docs: Add comprehensive multi-child implementation plan

Added detailed implementation plan covering:
- Frontend: Dynamic UI, child selector, bulk activity logging, comparison analytics
- Backend: Bulk operations, multi-child queries, family statistics
- AI/Voice: Child name detection, context building, clarification flows
- Database: Schema enhancements, user preferences, bulk operation tracking
- State management, API enhancements, real-time sync updates
- Testing strategy: Unit, integration, and E2E tests
- Migration plan with feature flags for phased rollout
- Performance optimizations: Caching, indexes, code splitting

Also includes:
- Security fixes for multi-family data leakage in analytics pages
- ParentFlow branding updates
- Activity tracking navigation improvements
- Backend DTO and error handling fixes

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

Co-Authored-By: Claude <noreply@anthropic.com>

maternal-web/app/(auth)/onboarding/page.tsx

@@ -23,6 +23,9 @@ import {
   FormControlLabel,
   FormControl,
   Grid,
+  StepConnector,
+  stepConnectorClasses,
+  styled,
 } from '@mui/material';
 import { ArrowBack, ArrowForward, Check, Language, Straighten } from '@mui/icons-material';
 import { motion, AnimatePresence } from 'framer-motion';
@@ -33,9 +36,60 @@ import { useLocale, MeasurementSystem } from '@/hooks/useLocale';
 import { useTranslation } from '@/hooks/useTranslation';
 import { supportedLanguages } from '@/lib/i18n/config';
 import { usersApi } from '@/lib/api/users';
+import { useTheme } from '@mui/material/styles';
+import { StepIconProps } from '@mui/material/StepIcon';
 
 const steps = ['Welcome', 'Language', 'Measurements', 'Add Child', 'Complete'];
 
+// Custom connector for mobile-friendly stepper
+const CustomConnector = styled(StepConnector)(({ theme }) => ({
+  [`&.${stepConnectorClasses.active}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
+      borderColor: theme.palette.primary.main,
+    },
+  },
+  [`&.${stepConnectorClasses.completed}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
+      borderColor: theme.palette.primary.main,
+    },
+  },
+  [`& .${stepConnectorClasses.line}`]: {
+    borderColor: theme.palette.divider,
+    borderTopWidth: 2,
+    borderRadius: 1,
+  },
+}));
+
+// Custom step icon showing numbers
+const CustomStepIconRoot = styled('div')<{ ownerState: { active?: boolean; completed?: boolean } }>(
+  ({ theme, ownerState }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 32,
+    height: 32,
+    borderRadius: '50%',
+    backgroundColor: ownerState.completed
+      ? theme.palette.primary.main
+      : ownerState.active
+      ? theme.palette.primary.main
+      : theme.palette.grey[300],
+    color: ownerState.active || ownerState.completed ? '#fff' : theme.palette.text.secondary,
+    fontWeight: 600,
+    fontSize: '0.875rem',
+  })
+);
+
+function CustomStepIcon(props: StepIconProps) {
+  const { active, completed, icon } = props;
+
+  return (
+    <CustomStepIconRoot ownerState={{ active, completed }}>
+      {completed ? <Check sx={{ fontSize: 18 }} /> : icon}
+    </CustomStepIconRoot>
+  );
+}
+
 export default function OnboardingPage() {
   const [activeStep, setActiveStep] = useState(0);
   const [selectedLanguage, setSelectedLanguage] = useState('en');
@@ -49,6 +103,7 @@ export default function OnboardingPage() {
   const { user, refreshUser } = useAuth();
   const { setLanguage, setMeasurementSystem } = useLocale();
   const { t } = useTranslation('onboarding');
+  const theme = useTheme();
 
   const handleNext = async () => {
     setError('');
@@ -154,7 +209,7 @@ export default function OnboardingPage() {
         flexDirection: 'column',
         px: 3,
         py: 4,
-        background: 'linear-gradient(135deg, #FFE4E1 0%, #FFDAB9 100%)',
+        background: `linear-gradient(135deg, ${theme.palette.primary.light} 0%, ${theme.palette.secondary.light} 100%)`,
       }}
     >
       <Paper
@@ -163,13 +218,18 @@ export default function OnboardingPage() {
           maxWidth: 600,
           mx: 'auto',
           width: '100%',
-          p: 4,
+          p: { xs: 3, sm: 4 },
           borderRadius: 4,
           background: 'rgba(255, 255, 255, 0.95)',
           backdropFilter: 'blur(10px)',
         }}
       >
-        <Stepper activeStep={activeStep} sx={{ mb: 4 }}>
+        <Stepper
+          activeStep={activeStep}
+          alternativeLabel
+          connector={<CustomConnector />}
+          sx={{ mb: 4 }}
+        >
           {steps.map((label, index) => {
             let stepLabel = label;
             if (index === 0) stepLabel = t('welcome.title').split('!')[0];
@@ -177,10 +237,24 @@ export default function OnboardingPage() {
             else if (index === 2) stepLabel = t('measurements.title');
             else if (index === 3) stepLabel = t('child.title');
             else if (index === 4) stepLabel = t('complete.title').split('!')[0];
-            
+
+            // Only show label for active step on mobile
+            const showLabel = activeStep === index;
+
             return (
               <Step key={label}>
-                <StepLabel>{stepLabel}</StepLabel>
+                <StepLabel
+                  StepIconComponent={CustomStepIcon}
+                  sx={{
+                    '& .MuiStepLabel-label': {
+                      display: { xs: showLabel ? 'block' : 'none', sm: 'block' },
+                      mt: 1,
+                      fontSize: { xs: '0.75rem', sm: '0.875rem' },
+                    },
+                  }}
+                >
+                  {stepLabel}
+                </StepLabel>
               </Step>
             );
           })}

maternal-web/app/activities/page.tsx

@@ -1,276 +0,0 @@
-'use client';
-
-import { useState, useEffect, useCallback } from 'react';
-import {
-  Box,
-  Typography,
-  Paper,
-  List,
-  ListItem,
-  ListItemIcon,
-  ListItemText,
-  Chip,
-  CircularProgress,
-  Snackbar,
-  Alert,
-} from '@mui/material';
-import {
-  Restaurant,
-  Hotel,
-  BabyChangingStation,
-  MedicalServices,
-  EmojiEvents,
-  Note,
-} from '@mui/icons-material';
-import { AppShell } from '@/components/layouts/AppShell/AppShell';
-import { ProtectedRoute } from '@/components/common/ProtectedRoute';
-import { useAuth } from '@/lib/auth/AuthContext';
-import { childrenApi, Child } from '@/lib/api/children';
-import { trackingApi, Activity } from '@/lib/api/tracking';
-import { useLocalizedDate } from '@/hooks/useLocalizedDate';
-import { useRealTimeActivities } from '@/hooks/useWebSocket';
-
-const activityIcons: Record<string, any> = {
-  feeding: <Restaurant />,
-  sleep: <Hotel />,
-  diaper: <BabyChangingStation />,
-  medication: <MedicalServices />,
-  milestone: <EmojiEvents />,
-  note: <Note />,
-};
-
-const activityColors: Record<string, string> = {
-  feeding: '#FFB6C1',
-  sleep: '#B6D7FF',
-  diaper: '#FFE4B5',
-  medication: '#FFB8B8',
-  milestone: '#FFD700',
-  note: '#E0E0E0',
-};
-
-export default function ActivitiesPage() {
-  const { user } = useAuth();
-  const { format } = useLocalizedDate();
-  const [children, setChildren] = useState<Child[]>([]);
-  const [selectedChild, setSelectedChild] = useState<Child | null>(null);
-  const [activities, setActivities] = useState<Activity[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [notification, setNotification] = useState<string | null>(null);
-
-  const familyId = user?.families?.[0]?.familyId;
-
-  // Real-time activity handlers
-  const handleActivityCreated = useCallback((activity: Activity) => {
-    console.log('[ActivitiesPage] Real-time activity created:', activity);
-    setActivities((prev) => [activity, ...prev]);
-    setNotification('New activity added by family member');
-  }, []);
-
-  const handleActivityUpdated = useCallback((activity: Activity) => {
-    console.log('[ActivitiesPage] Real-time activity updated:', activity);
-    setActivities((prev) =>
-      prev.map((a) => (a.id === activity.id ? activity : a))
-    );
-    setNotification('Activity updated by family member');
-  }, []);
-
-  const handleActivityDeleted = useCallback((data: { activityId: string }) => {
-    console.log('[ActivitiesPage] Real-time activity deleted:', data);
-    setActivities((prev) => prev.filter((a) => a.id !== data.activityId));
-    setNotification('Activity deleted by family member');
-  }, []);
-
-  // Subscribe to real-time updates
-  useRealTimeActivities(
-    handleActivityCreated,
-    handleActivityUpdated,
-    handleActivityDeleted
-  );
-
-  useEffect(() => {
-    const loadData = async () => {
-      if (!familyId) {
-        setLoading(false);
-        return;
-      }
-
-      try {
-        const childrenData = await childrenApi.getChildren(familyId);
-        setChildren(childrenData);
-
-        if (childrenData.length > 0) {
-          const firstChild = childrenData[0];
-          setSelectedChild(firstChild);
-
-          // Load activities for the last 7 days
-          const endDate = format(new Date(), 'yyyy-MM-dd');
-          const startDate = format(
-            new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
-            'yyyy-MM-dd'
-          );
-
-          const activitiesData = await trackingApi.getActivities(
-            firstChild.id,
-            undefined,
-            startDate,
-            endDate
-          );
-          setActivities(activitiesData);
-        }
-      } catch (error) {
-        console.error('[ActivitiesPage] Failed to load data:', error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    loadData();
-  }, [familyId]);
-
-  const formatActivityTime = (timestamp: string) => {
-    const date = new Date(timestamp);
-    const today = new Date();
-    const yesterday = new Date(today);
-    yesterday.setDate(yesterday.getDate() - 1);
-
-    const isToday = date.toDateString() === today.toDateString();
-    const isYesterday = date.toDateString() === yesterday.toDateString();
-
-    if (isToday) {
-      return `Today at ${format(date, 'h:mm a')}`;
-    } else if (isYesterday) {
-      return `Yesterday at ${format(date, 'h:mm a')}`;
-    } else {
-      return format(date, 'MMM d, h:mm a');
-    }
-  };
-
-  const getActivityDescription = (activity: Activity) => {
-    switch (activity.type) {
-      case 'feeding':
-        return activity.data?.amount
-          ? `${activity.data.amount} ${activity.data.unit || 'oz'}`
-          : 'Feeding';
-      case 'sleep':
-        if (activity.data?.endedAt) {
-          const duration = Math.floor(
-            (new Date(activity.data.endedAt).getTime() -
-              new Date(activity.timestamp).getTime()) /
-              60000
-          );
-          const hours = Math.floor(duration / 60);
-          const mins = duration % 60;
-          return hours > 0 ? `${hours}h ${mins}m` : `${mins}m`;
-        }
-        return 'Sleep';
-      case 'diaper':
-        return activity.data?.type || 'Diaper change';
-      case 'medication':
-        return activity.data?.name || 'Medication';
-      default:
-        return activity.type;
-    }
-  };
-
-  return (
-    <ProtectedRoute>
-      <AppShell>
-        <Box>
-          <Typography variant="h4" component="h1" gutterBottom fontWeight="600" sx={{ mb: 3 }}>
-            Recent Activities
-          </Typography>
-
-          {loading ? (
-            <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
-              <CircularProgress />
-            </Box>
-          ) : activities.length === 0 ? (
-            <Paper sx={{ p: 4, textAlign: 'center' }}>
-              <Typography variant="body1" color="text.secondary">
-                No activities recorded yet
-              </Typography>
-            </Paper>
-          ) : (
-            <Paper>
-              <List>
-                {activities.map((activity, index) => (
-                  <ListItem
-                    key={activity.id}
-                    sx={{
-                      borderBottom:
-                        index < activities.length - 1 ? '1px solid' : 'none',
-                      borderColor: 'divider',
-                    }}
-                  >
-                    <ListItemIcon>
-                      <Box
-                        sx={{
-                          width: 48,
-                          height: 48,
-                          borderRadius: 2,
-                          bgcolor: activityColors[activity.type] || '#E0E0E0',
-                          display: 'flex',
-                          alignItems: 'center',
-                          justifyContent: 'center',
-                          color: 'white',
-                        }}
-                      >
-                        {activityIcons[activity.type] || <Note />}
-                      </Box>
-                    </ListItemIcon>
-                    <ListItemText
-                      primary={
-                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                          <Typography variant="body1" fontWeight="500">
-                            {getActivityDescription(activity)}
-                          </Typography>
-                          <Chip
-                            label={activity.type}
-                            size="small"
-                            sx={{ textTransform: 'capitalize' }}
-                          />
-                        </Box>
-                      }
-                      secondary={
-                        <Box>
-                          <Typography variant="body2" color="text.secondary">
-                            {formatActivityTime(activity.timestamp)}
-                          </Typography>
-                          {activity.notes && (
-                            <Typography
-                              variant="body2"
-                              color="text.secondary"
-                              sx={{ mt: 0.5 }}
-                            >
-                              {activity.notes}
-                            </Typography>
-                          )}
-                        </Box>
-                      }
-                    />
-                  </ListItem>
-                ))}
-              </List>
-            </Paper>
-          )}
-        </Box>
-
-        {/* Real-time update notification */}
-        <Snackbar
-          open={!!notification}
-          autoHideDuration={3000}
-          onClose={() => setNotification(null)}
-          anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-        >
-          <Alert
-            onClose={() => setNotification(null)}
-            severity="info"
-            sx={{ width: '100%' }}
-          >
-            {notification}
-          </Alert>
-        </Snackbar>
-      </AppShell>
-    </ProtectedRoute>
-  );
-}

maternal-web/app/analytics/page.tsx

@@ -40,6 +40,7 @@ import PredictionsCard from '@/components/features/analytics/PredictionsCard';
 import GrowthSpurtAlert from '@/components/features/analytics/GrowthSpurtAlert';
 import WeeklyReportCard from '@/components/features/analytics/WeeklyReportCard';
 import MonthlyReportCard from '@/components/features/analytics/MonthlyReportCard';
+import { useAuth } from '@/lib/auth/AuthContext';
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -65,6 +66,7 @@ function TabPanel(props: TabPanelProps) {
 
 export default function AnalyticsPage() {
   const theme = useTheme();
+  const { user } = useAuth();
   const [children, setChildren] = useState<Child[]>([]);
   const [selectedChildId, setSelectedChildId] = useState<string>('');
   const [tabValue, setTabValue] = useState(0);
@@ -74,27 +76,54 @@ export default function AnalyticsPage() {
   const [insightsLoading, setInsightsLoading] = useState(false);
   const [predictionsLoading, setPredictionsLoading] = useState(false);
   const [days, setDays] = useState<number>(7);
+  const [error, setError] = useState<string>('');
+
+  const familyId = user?.families?.[0]?.familyId;
 
   useEffect(() => {
-    loadChildren();
-  }, []);
-
-  useEffect(() => {
-    if (selectedChildId) {
-      loadInsights();
-      loadPredictions();
+    if (familyId) {
+      loadChildren();
     }
-  }, [selectedChildId, days]);
+  }, [familyId]);
+
+  useEffect(() => {
+    if (selectedChildId && children.length > 0) {
+      // Validate that selectedChildId belongs to current user's children
+      const childExists = children.some(child => child.id === selectedChildId);
+      if (childExists) {
+        loadInsights();
+        loadPredictions();
+      } else {
+        console.warn('[AnalyticsPage] Selected child not found in user\'s children, resetting');
+        setSelectedChildId(children[0].id);
+        setError('Selected child not found. Showing data for your first child.');
+      }
+    }
+  }, [selectedChildId, days, children]);
 
   const loadChildren = async () => {
+    if (!familyId) {
+      setLoading(false);
+      setError('No family found');
+      return;
+    }
+
     try {
-      const data = await childrenApi.getChildren();
+      console.log('[AnalyticsPage] Loading children for familyId:', familyId);
+      const data = await childrenApi.getChildren(familyId);
+      console.log('[AnalyticsPage] Loaded children:', data);
       setChildren(data);
-      if (data.length > 0 && !selectedChildId) {
-        setSelectedChildId(data[0].id);
+
+      if (data.length > 0) {
+        const existingChildStillValid = data.some(child => child.id === selectedChildId);
+        if (!selectedChildId || !existingChildStillValid) {
+          setSelectedChildId(data[0].id);
+        }
       }
+      setError('');
     } catch (error) {
-      console.error('Failed to load children:', error);
+      console.error('[AnalyticsPage] Failed to load children:', error);
+      setError('Failed to load children');
     } finally {
       setLoading(false);
     }

maternal-web/app/page.tsx

@@ -124,7 +124,7 @@ export default function HomePage() {
     { icon: <Hotel />, label: t('quickActions.sleep'), color: theme.palette.secondary.main, path: '/track/sleep' },
     { icon: <BabyChangingStation />, label: t('quickActions.diaper'), color: theme.palette.warning.main, path: '/track/diaper' },
     { icon: <MedicalServices />, label: t('quickActions.medical'), color: theme.palette.error.main, path: '/track/medicine' },
-    { icon: <Insights />, label: t('quickActions.activities'), color: theme.palette.success.main, path: '/activities' },
+    { icon: <Insights />, label: t('quickActions.activities'), color: theme.palette.success.main, path: '/track/activity' },
     { icon: <SmartToy />, label: t('quickActions.aiAssistant'), color: theme.palette.info.main, path: '/ai-assistant' },
   ];