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

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 }}>
+            <Box sx={{ minWidth: 250 }}>
-              <InputLabel>Child</InputLabel>
+              <ChildSelector
-              <Select
+                children={children}
-                value={selectedChildId}
+                selectedChildIds={selectedChildIds}
+                onChange={(childIds) => setSelectedChildIds(childIds)}
+                mode="single"
                 label="Child"
-                onChange={(e) => setSelectedChildId(e.target.value)}
+                compact={false}
-              >
+              />
-                {children.map((child) => (
+            </Box>
-                  <MenuItem key={child.id} value={child.id}>
-                    {child.name}
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
           )}
           <FormControl sx={{ minWidth: 150 }}>
             <InputLabel>Time Period</InputLabel>