Implement Phase 7 Performance Optimization and fix tracking system

Phase 7 Implementation:
- Add lazy loading for AI Assistant and Insights pages
- Create LoadingFallback component with skeleton screens (page, card, list, chart, chat variants)
- Create OptimizedImage component with Next.js Image optimization
- Create PerformanceMonitor component with web-vitals v5 integration
- Add performance monitoring library tracking Core Web Vitals (CLS, INP, FCP, LCP, TTFB)
- Install web-vitals v5.1.0 dependency
- Extract AI chat interface and insights dashboard to lazy-loaded components

Tracking System Fixes:
- Fix API data transformation between frontend (timestamp/data) and backend (startedAt/metadata)
- Update createActivity, getActivities, and getActivity to properly transform data structures
- Fix diaper, feeding, and sleep tracking pages to work with backend API

Homepage Improvements:
- Connect Today's Summary to backend daily summary API
- Load real-time data for feeding count, sleep hours, and diaper count
- Add loading states and empty states for better UX
- Format sleep duration as "Xh Ym" for better readability
- Display child name in summary section

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
andupetcu
2025-10-01 09:40:21 +03:00
parent 688f9bd57a
commit 0a2e28b5ee
16 changed files with 1725 additions and 1032 deletions

View File

@@ -44,19 +44,44 @@ export const trackingApi = {
if (endDate) params.endDate = endDate;
const response = await apiClient.get('/api/v1/activities', { params });
return response.data.data.activities;
// Transform backend response to frontend format
const activities = response.data.data.activities.map((activity: any) => ({
...activity,
timestamp: activity.startedAt, // Frontend expects timestamp
data: activity.metadata, // Frontend expects data
}));
return activities;
},
// Get a specific activity
getActivity: async (id: string): Promise<Activity> => {
const response = await apiClient.get(`/api/v1/activities/${id}`);
return response.data.data.activity;
const activity = response.data.data.activity;
// Transform backend response to frontend format
return {
...activity,
timestamp: activity.startedAt,
data: activity.metadata,
};
},
// Create a new activity
createActivity: async (childId: string, data: CreateActivityData): Promise<Activity> => {
const response = await apiClient.post(`/api/v1/activities?childId=${childId}`, data);
return response.data.data.activity;
// Transform frontend data structure to backend DTO format
const payload = {
type: data.type,
startedAt: data.timestamp, // Backend expects startedAt, not timestamp
metadata: data.data, // Backend expects metadata, not data
notes: data.notes,
};
const response = await apiClient.post(`/api/v1/activities?childId=${childId}`, payload);
const activity = response.data.data.activity;
// Transform backend response to frontend format
return {
...activity,
timestamp: activity.startedAt,
data: activity.metadata,
};
},
// Update an activity