feat: Implement dynamic dashboard with tabs/cards for multi-child families

- Create DynamicChildDashboard component with tab view (1-3 children) and card view (4+)
- Integrate with Redux viewMode selector for automatic layout switching
- Update GraphQL dashboard query to include displayColor, sortOrder, nickname
- Replace static summary with dynamic multi-child dashboard
- Add child selection handling with Redux state sync
- Implement compact metrics display for card view
- Build and test successfully

maternal-web/app/page.tsx

@@ -9,6 +9,7 @@ import { ErrorBoundary } from '@/components/common/ErrorBoundary';
 import { DataErrorFallback } from '@/components/common/ErrorFallbacks';
 import { NetworkStatusIndicator } from '@/components/common/NetworkStatusIndicator';
 import { StatGridSkeleton } from '@/components/common/LoadingSkeletons';
+import DynamicChildDashboard from '@/components/dashboard/DynamicChildDashboard';
 import {
   Restaurant,
   Hotel,
@@ -28,16 +29,29 @@ import { useRealTimeActivities } from '@/hooks/useWebSocket';
 import { useTranslation } from '@/hooks/useTranslation';
 import { analyticsApi } from '@/lib/api/analytics';
 import { useTheme } from '@mui/material/styles';
+import { useDispatch, useSelector } from 'react-redux';
+import { fetchChildren, selectSelectedChild } from '@/store/slices/childrenSlice';
+import { AppDispatch, RootState } from '@/store/store';
 
 export default function HomePage() {
   const { t } = useTranslation('dashboard');
   const theme = useTheme();
   const { user, isLoading: authLoading } = useAuth();
   const router = useRouter();
+  const dispatch = useDispatch<AppDispatch>();
+  const selectedChild = useSelector(selectSelectedChild);
+  const familyId = useSelector((state: RootState) => state.auth.user?.familyId);
   const [selectedChildId, setSelectedChildId] = useState<string | null>(null);
   const [predictions, setPredictions] = useState<any>(null);
   const [predictionsLoading, setPredictionsLoading] = useState(false);
 
+  // Fetch children on mount
+  useEffect(() => {
+    if (familyId && !authLoading) {
+      dispatch(fetchChildren(familyId));
+    }
+  }, [familyId, authLoading, dispatch]);
+
   // GraphQL query for dashboard data
   const { data, loading, error, refetch } = useQuery(GET_DASHBOARD, {
     variables: { childId: selectedChildId },
@@ -99,6 +113,13 @@ export default function HomePage() {
     }
   }, [data, selectedChildId]);
 
+  // Sync selectedChildId with Redux selectedChild
+  useEffect(() => {
+    if (selectedChild?.id && selectedChild.id !== selectedChildId) {
+      setSelectedChildId(selectedChild.id);
+    }
+  }, [selectedChild, selectedChildId]);
+
   // Fetch predictions when selectedChildId changes
   useEffect(() => {
     const fetchPredictions = async () => {
@@ -142,10 +163,36 @@ export default function HomePage() {
 
   // Extract data from GraphQL response
   const children = data?.dashboard?.children || [];
-  const selectedChild = data?.dashboard?.selectedChild;
+  const graphqlSelectedChild = data?.dashboard?.selectedChild;
   const dailySummary = data?.dashboard?.todaySummary;
   const isLoading = authLoading || loading;
 
+  // Build child metrics object for DynamicChildDashboard
+  const childMetrics = children.reduce((acc: any, child: any) => {
+    // For now, use the same summary for selected child, or zero for others
+    // TODO: Fetch per-child summaries from backend
+    if (child.id === selectedChildId && dailySummary) {
+      acc[child.id] = {
+        feedingCount: dailySummary.feedingCount || 0,
+        sleepDuration: dailySummary.totalSleepDuration || 0,
+        diaperCount: dailySummary.diaperCount || 0,
+        medicationCount: dailySummary.medicationCount || 0,
+      };
+    } else {
+      acc[child.id] = {
+        feedingCount: 0,
+        sleepDuration: 0,
+        diaperCount: 0,
+        medicationCount: 0,
+      };
+    }
+    return acc;
+  }, {});
+
+  const handleChildSelect = (childId: string) => {
+    setSelectedChildId(childId);
+  };
+
   return (
     <ProtectedRoute>
       <AppShell>
@@ -223,9 +270,9 @@ export default function HomePage() {
             ))}
           </Grid>
 
-          {/* Today's Summary */}
+          {/* Today's Summary - Dynamic Multi-Child Dashboard */}
           <Typography variant="h6" component="h2" gutterBottom fontWeight="600" sx={{ mb: 2 }}>
-            {selectedChild ? t('summary.titleWithChild', { childName: selectedChild.name }) : t('summary.title')}
+            {t('summary.title')}
           </Typography>
           <ErrorBoundary
             isolate
@@ -233,111 +280,19 @@ export default function HomePage() {
           >
             {isLoading ? (
               <StatGridSkeleton count={3} />
-            ) : (
+            ) : children.length === 0 ? (
               <Paper sx={{ p: 3 }}>
-                {!dailySummary ? (
                 <Box sx={{ textAlign: 'center', py: 4 }}>
                   <Typography variant="body2" sx={{ color: 'rgba(0, 0, 0, 0.7)' }}>
-                    {children.length === 0
-                      ? t('summary.noChild')
-                      : t('summary.noActivities')}
+                    {t('summary.noChild')}
                   </Typography>
                 </Box>
-              ) : (
-                <Grid container spacing={3}>
-                  <Grid size={{ xs: 6, sm: 3 }}>
-                    <Box
-                      textAlign="center"
-                      sx={{
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        height: '120px', // Fixed height for consistency
-                        minHeight: '120px',
-                        width: '100%'
-                      }}
-                    >
-                      <Restaurant sx={{ fontSize: 32, color: 'primary.main', mb: 1 }} aria-hidden="true" />
-                      <Typography variant="h3" component="div" fontWeight="600" aria-label={`${dailySummary.feedingCount || 0} feedings today`}>
-                        {dailySummary.feedingCount || 0}
-                      </Typography>
-                      <Typography variant="body2" sx={{ color: 'rgba(0, 0, 0, 0.7)' }}>
-                        {t('summary.feedings')}
-                      </Typography>
-                    </Box>
-                  </Grid>
-                  <Grid size={{ xs: 6, sm: 3 }}>
-                    <Box
-                      textAlign="center"
-                      sx={{
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        height: '120px', // Fixed height for consistency
-                        minHeight: '120px',
-                        width: '100%'
-                      }}
-                    >
-                      <Hotel sx={{ fontSize: 32, color: 'info.main', mb: 1 }} aria-hidden="true" />
-                      <Typography variant="h3" component="div" fontWeight="600" aria-label={`${dailySummary.totalSleepDuration ? formatSleepHours(dailySummary.totalSleepDuration) : '0 minutes'} sleep today`}>
-                        {dailySummary.totalSleepDuration
-                          ? formatSleepHours(dailySummary.totalSleepDuration)
-                          : '0m'}
-                      </Typography>
-                      <Typography variant="body2" sx={{ color: 'rgba(0, 0, 0, 0.7)' }}>
-                        {t('summary.sleep')}
-                      </Typography>
-                    </Box>
-                  </Grid>
-                  <Grid size={{ xs: 6, sm: 3 }}>
-                    <Box
-                      textAlign="center"
-                      sx={{
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        height: '120px', // Fixed height for consistency
-                        minHeight: '120px',
-                        width: '100%'
-                      }}
-                    >
-                      <BabyChangingStation sx={{ fontSize: 32, color: 'warning.main', mb: 1 }} aria-hidden="true" />
-                      <Typography variant="h3" component="div" fontWeight="600" aria-label={`${dailySummary.diaperCount || 0} diaper changes today`}>
-                        {dailySummary.diaperCount || 0}
-                      </Typography>
-                      <Typography variant="body2" sx={{ color: 'rgba(0, 0, 0, 0.7)' }}>
-                        {t('summary.diapers')}
-                      </Typography>
-                    </Box>
-                  </Grid>
-                  <Grid size={{ xs: 6, sm: 3 }}>
-                    <Box
-                      textAlign="center"
-                      sx={{
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        height: '120px', // Fixed height for consistency
-                        minHeight: '120px',
-                        width: '100%'
-                      }}
-                    >
-                      <MedicalServices sx={{ fontSize: 32, color: 'error.main', mb: 1 }} aria-hidden="true" />
-                      <Typography variant="h3" component="div" fontWeight="600" aria-label={`${dailySummary.medicationCount || 0} medications today`}>
-                        {dailySummary.medicationCount || 0}
-                      </Typography>
-                      <Typography variant="body2" sx={{ color: 'rgba(0, 0, 0, 0.7)' }}>
-                        {t('summary.medications')}
-                      </Typography>
-                    </Box>
-                  </Grid>
-                </Grid>
-                )}
               </Paper>
+            ) : (
+              <DynamicChildDashboard
+                childMetrics={childMetrics}
+                onChildSelect={handleChildSelect}
+              />
             )}
           </ErrorBoundary>