From 8e760d832382fd570e26761c2b696fa766975768 Mon Sep 17 00:00:00 2001
From: Andrei <andrei@cloudz.ro>
Date: Sun, 5 Oct 2025 18:15:57 +0000
Subject: [PATCH] Update insights page child filter to match design pattern

- Replace basic Select dropdown with ChildSelector component
- Add child photo + name display matching other pages (/track/feeding, etc.)
- Update state management to use selectedChildIds array for consistency
- Improve visual consistency across the application
- Maintain single selection mode for insights filtering
---
 .../analytics/UnifiedInsightsDashboard.tsx    | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/maternal-web/components/features/analytics/UnifiedInsightsDashboard.tsx b/maternal-web/components/features/analytics/UnifiedInsightsDashboard.tsx
index 2edfd99..5e2746d 100644
--- a/maternal-web/components/features/analytics/UnifiedInsightsDashboard.tsx
+++ b/maternal-web/components/features/analytics/UnifiedInsightsDashboard.tsx
@@ -22,6 +22,7 @@ import { analyticsApi, PatternInsights, PredictionInsights } from '@/lib/api/ana
 import { InsightsDashboard } from './InsightsDashboard';
 import PredictionsCard from './PredictionsCard';
 import GrowthSpurtAlert from './GrowthSpurtAlert';
+import ChildSelector from '@/components/common/ChildSelector';
 import { motion } from 'framer-motion';
 import { useAuth } from '@/lib/auth/AuthContext';
 
@@ -51,7 +52,7 @@ export function UnifiedInsightsDashboard() {
   const router = useRouter();
   const { user } = useAuth();
   const [children, setChildren] = useState<Child[]>([]);
-  const [selectedChildId, setSelectedChildId] = useState<string>('');
+  const [selectedChildIds, setSelectedChildIds] = useState<string[]>([]);
   const [tabValue, setTabValue] = useState(0);
   const [loading, setLoading] = useState(true);
   const [insights, setInsights] = useState<PatternInsights | null>(null);
@@ -61,6 +62,9 @@ export function UnifiedInsightsDashboard() {
   const [days, setDays] = useState<number>(7);
   const [error, setError] = useState<string>('');
 
+  // Get the selected child ID (first one from the array for single selection)
+  const selectedChildId = selectedChildIds[0] || '';
+
   const familyId = user?.families?.[0]?.familyId;
 
   useEffect(() => {
@@ -79,7 +83,7 @@ export function UnifiedInsightsDashboard() {
       } else {
         // Invalid child ID - reset to first child
         console.warn('[UnifiedInsightsDashboard] Selected child not found in user\'s children, resetting');
-        setSelectedChildId(children[0].id);
+        setSelectedChildIds([children[0].id]);
         setError('Selected child not found. Showing data for your first child.');
       }
     }
@@ -98,11 +102,11 @@ export function UnifiedInsightsDashboard() {
       console.log('[UnifiedInsightsDashboard] Loaded children:', data);
       setChildren(data);
 
-      // Only set selectedChildId if we don't have one or if it's not in the new list
+      // Only set selectedChildIds if we don't have one or if it's not in the new list
       if (data.length > 0) {
         const existingChildStillValid = data.some(child => child.id === selectedChildId);
         if (!selectedChildId || !existingChildStillValid) {
-          setSelectedChildId(data[0].id);
+          setSelectedChildIds([data[0].id]);
         }
       }
       setError('');
@@ -188,22 +192,18 @@ export function UnifiedInsightsDashboard() {
         )}
 
         {/* Shared Filters */}
-        <Box sx={{ mb: 3, display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center' }}>
+        <Box sx={{ mb: 3, display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'flex-start' }}>
           {children.length > 1 && (
-            <FormControl sx={{ minWidth: 200 }}>
-              <InputLabel>Child</InputLabel>
-              <Select
-                value={selectedChildId}
+            <Box sx={{ minWidth: 250 }}>
+              <ChildSelector
+                children={children}
+                selectedChildIds={selectedChildIds}
+                onChange={(childIds) => setSelectedChildIds(childIds)}
+                mode="single"
                 label="Child"
-                onChange={(e) => setSelectedChildId(e.target.value)}
-              >
-                {children.map((child) => (
-                  <MenuItem key={child.id} value={child.id}>
-                    {child.name}
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
+                compact={false}
+              />
+            </Box>
           )}
           <FormControl sx={{ minWidth: 150 }}>
             <InputLabel>Time Period</InputLabel>