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>

maternal-web/app/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { Box, Typography, Button, Paper, Grid } from '@mui/material';
+import { useState, useEffect } from 'react';
+import { Box, Typography, Button, Paper, Grid, CircularProgress } from '@mui/material';
 import { AppShell } from '@/components/layouts/AppShell/AppShell';
 import { ProtectedRoute } from '@/components/common/ProtectedRoute';
 import {
@@ -14,10 +15,51 @@ import {
 import { motion } from 'framer-motion';
 import { useAuth } from '@/lib/auth/AuthContext';
 import { useRouter } from 'next/navigation';
+import { trackingApi, DailySummary } from '@/lib/api/tracking';
+import { childrenApi, Child } from '@/lib/api/children';
+import { format } from 'date-fns';
 
 export default function HomePage() {
   const { user } = useAuth();
   const router = useRouter();
+  const [children, setChildren] = useState<Child[]>([]);
+  const [selectedChild, setSelectedChild] = useState<Child | null>(null);
+  const [dailySummary, setDailySummary] = useState<DailySummary | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const familyId = user?.families?.[0]?.familyId;
+  // Load children and daily summary
+  useEffect(() => {
+    const loadData = async () => {
+      if (!familyId) {
+        setLoading(false);
+        return;
+      }
+
+      try {
+        // Load children
+        const childrenData = await childrenApi.getChildren(familyId);
+        setChildren(childrenData);
+
+        if (childrenData.length > 0) {
+          const firstChild = childrenData[0];
+          setSelectedChild(firstChild);
+
+          // Load today's summary for first child
+          const today = format(new Date(), 'yyyy-MM-dd');
+          const summary = await trackingApi.getDailySummary(firstChild.id, today);
+          setDailySummary(summary);
+        }
+      } catch (error) {
+        console.error('Failed to load data:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadData();
+  }, [familyId]);
+
   const quickActions = [
     { icon: <Restaurant />, label: 'Feeding', color: '#FFB6C1', path: '/track/feeding' },
     { icon: <Hotel />, label: 'Sleep', color: '#B6D7FF', path: '/track/sleep' },
@@ -26,6 +68,18 @@ export default function HomePage() {
     { icon: <Analytics />, label: 'Analytics', color: '#D4B5FF', path: '/analytics' },
   ];
 
+  const formatSleepHours = (minutes: number) => {
+    const hours = Math.floor(minutes / 60);
+    const mins = minutes % 60;
+    if (hours > 0 && mins > 0) {
+      return `${hours}h ${mins}m`;
+    } else if (hours > 0) {
+      return `${hours}h`;
+    } else {
+      return `${mins}m`;
+    }
+  };
+
   return (
     <ProtectedRoute>
       <AppShell>
@@ -78,34 +132,62 @@ export default function HomePage() {
             ))}
           </Grid>
 
-          {/* Recent Activity */}
+          {/* Today's Summary */}
           <Typography variant="h6" gutterBottom fontWeight="600" sx={{ mb: 2 }}>
-            Today's Summary
+            Today's Summary{selectedChild ? ` - ${selectedChild.name}` : ''}
           </Typography>
           <Paper sx={{ p: 3 }}>
-            <Grid container spacing={3}>
-              <Grid item xs={4}>
-                <Box textAlign="center">
-                  <Restaurant sx={{ fontSize: 32, color: 'primary.main', mb: 1 }} />
-                  <Typography variant="h5" fontWeight="600">8</Typography>
-                  <Typography variant="body2" color="text.secondary">Feedings</Typography>
-                </Box>
+            {loading ? (
+              <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
+                <CircularProgress />
+              </Box>
+            ) : !dailySummary ? (
+              <Box sx={{ textAlign: 'center', py: 4 }}>
+                <Typography variant="body2" color="text.secondary">
+                  {children.length === 0
+                    ? 'Add a child to start tracking'
+                    : 'No activities tracked today'}
+                </Typography>
+              </Box>
+            ) : (
+              <Grid container spacing={3}>
+                <Grid item xs={4}>
+                  <Box textAlign="center">
+                    <Restaurant sx={{ fontSize: 32, color: 'primary.main', mb: 1 }} />
+                    <Typography variant="h5" fontWeight="600">
+                      {dailySummary.feedingCount || 0}
+                    </Typography>
+                    <Typography variant="body2" color="text.secondary">
+                      Feedings
+                    </Typography>
+                  </Box>
+                </Grid>
+                <Grid item xs={4}>
+                  <Box textAlign="center">
+                    <Hotel sx={{ fontSize: 32, color: 'info.main', mb: 1 }} />
+                    <Typography variant="h5" fontWeight="600">
+                      {dailySummary.sleepTotalMinutes
+                        ? formatSleepHours(dailySummary.sleepTotalMinutes)
+                        : '0m'}
+                    </Typography>
+                    <Typography variant="body2" color="text.secondary">
+                      Sleep
+                    </Typography>
+                  </Box>
+                </Grid>
+                <Grid item xs={4}>
+                  <Box textAlign="center">
+                    <BabyChangingStation sx={{ fontSize: 32, color: 'warning.main', mb: 1 }} />
+                    <Typography variant="h5" fontWeight="600">
+                      {dailySummary.diaperCount || 0}
+                    </Typography>
+                    <Typography variant="body2" color="text.secondary">
+                      Diapers
+                    </Typography>
+                  </Box>
+                </Grid>
               </Grid>
-              <Grid item xs={4}>
-                <Box textAlign="center">
-                  <Hotel sx={{ fontSize: 32, color: 'info.main', mb: 1 }} />
-                  <Typography variant="h5" fontWeight="600">12h</Typography>
-                  <Typography variant="body2" color="text.secondary">Sleep</Typography>
-                </Box>
-              </Grid>
-              <Grid item xs={4}>
-                <Box textAlign="center">
-                  <BabyChangingStation sx={{ fontSize: 32, color: 'warning.main', mb: 1 }} />
-                  <Typography variant="h5" fontWeight="600">6</Typography>
-                  <Typography variant="body2" color="text.secondary">Diapers</Typography>
-                </Box>
-              </Grid>
-            </Grid>
+            )}
           </Paper>
 
           {/* Next Predicted Activity */}