feat: Add ChildSelector component and update Child types

TypeScript Types:
- Updated Child interface with displayColor, sortOrder, nickname
- Added FamilyStatistics interface for UI view mode decisions
- Updated CreateChildData to support custom colors and nicknames

API Client:
- Added getFamilyStatistics() method
- Returns totalChildren, viewMode (tabs/cards), ageRange, genderDistribution

ChildSelector Component:
- Supports 3 modes: single, multiple, all
- Shows child avatars with color-coded borders
- Displays child name and optional nickname
- "All Children" option for bulk operations
- Chip-based multi-select display
- Compact mode for inline usage
- Sorted by sortOrder (birth order)
- Disabled state when no children available
- Simplified UI for single-child families

Features:
- Color-coded child indicators using displayColor
- Avatar fallback with child's first initial
- Checkbox selection for multiple mode
- Indeterminate checkbox for partial selection
- Required field validation support
- Accessible with labels and ARIA

Props:
- children: Child[] - List of children to display
- selectedChildIds: string[] - Currently selected child IDs
- onChange: (childIds: string[]) => void - Selection change handler
- mode: 'single' | 'multiple' | 'all' - Selection behavior
- showAllOption: boolean - Show "All Children" option
- label: string - Form label
- compact: boolean - Compact display mode

Use Cases:
- Activity tracking forms
- Analytics filtering
- Bulk operations
- Dashboard child switching
- Comparison views

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

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

maternal-web/components/common/ChildSelector.tsx

@@ -0,0 +1,267 @@
+'use client';
+
+import React from 'react';
+import {
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  Checkbox,
+  ListItemText,
+  Avatar,
+  Box,
+  Chip,
+  SelectChangeEvent,
+} from '@mui/material';
+import { Child } from '@/lib/api/children';
+import { GroupAdd, Person } from '@mui/icons-material';
+
+export type ChildSelectorMode = 'single' | 'multiple' | 'all';
+
+interface ChildSelectorProps {
+  children: Child[];
+  selectedChildIds: string[];
+  onChange: (childIds: string[]) => void;
+  mode?: ChildSelectorMode;
+  showAllOption?: boolean;
+  label?: string;
+  disabled?: boolean;
+  compact?: boolean;
+  required?: boolean;
+}
+
+export default function ChildSelector({
+  children,
+  selectedChildIds,
+  onChange,
+  mode = 'single',
+  showAllOption = false,
+  label = 'Select Child',
+  disabled = false,
+  compact = false,
+  required = false,
+}: ChildSelectorProps) {
+  const handleChange = (event: SelectChangeEvent<string | string[]>) => {
+    const value = event.target.value;
+
+    if (mode === 'single') {
+      // Single selection
+      onChange(typeof value === 'string' ? [value] : value);
+    } else {
+      // Multiple selection
+      const selectedIds = typeof value === 'string' ? value.split(',') : value;
+
+      // Handle "All" option
+      if (selectedIds.includes('all')) {
+        if (selectedChildIds.length === children.length) {
+          // Deselect all
+          onChange([]);
+        } else {
+          // Select all
+          onChange(children.map((c) => c.id));
+        }
+      } else {
+        onChange(selectedIds);
+      }
+    }
+  };
+
+  const getDisplayValue = () => {
+    if (selectedChildIds.length === 0) {
+      return '';
+    }
+
+    if (mode === 'single') {
+      return selectedChildIds[0] || '';
+    }
+
+    // Multiple mode
+    if (showAllOption && selectedChildIds.length === children.length) {
+      return 'all';
+    }
+
+    return selectedChildIds;
+  };
+
+  const renderValue = (selected: string | string[]) => {
+    if (!selected || (Array.isArray(selected) && selected.length === 0)) {
+      return <em>None selected</em>;
+    }
+
+    if (mode === 'single') {
+      const child = children.find((c) => c.id === selected);
+      if (!child) return <em>None selected</em>;
+
+      return (
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <Avatar
+            src={child.photoUrl}
+            sx={{
+              width: compact ? 24 : 32,
+              height: compact ? 24 : 32,
+              bgcolor: child.displayColor,
+            }}
+          >
+            {child.name[0]}
+          </Avatar>
+          {child.name}
+        </Box>
+      );
+    }
+
+    // Multiple mode
+    if (showAllOption && Array.isArray(selected) && selected.includes('all')) {
+      return (
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+          <Chip
+            icon={<GroupAdd />}
+            label="All Children"
+            size="small"
+            sx={{ bgcolor: 'primary.light' }}
+          />
+        </Box>
+      );
+    }
+
+    const selectedIds = Array.isArray(selected) ? selected : [selected];
+    return (
+      <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
+        {selectedIds.map((id) => {
+          const child = children.find((c) => c.id === id);
+          if (!child) return null;
+
+          return (
+            <Chip
+              key={id}
+              avatar={
+                <Avatar
+                  src={child.photoUrl}
+                  sx={{ bgcolor: child.displayColor }}
+                >
+                  {child.name[0]}
+                </Avatar>
+              }
+              label={child.nickname || child.name}
+              size="small"
+              sx={{
+                bgcolor: `${child.displayColor}20`,
+                borderColor: child.displayColor,
+                borderWidth: 1,
+                borderStyle: 'solid',
+              }}
+            />
+          );
+        })}
+      </Box>
+    );
+  };
+
+  if (children.length === 0) {
+    return (
+      <FormControl fullWidth disabled>
+        <InputLabel>No children available</InputLabel>
+        <Select value="" label="No children available">
+          <MenuItem value="">No children available</MenuItem>
+        </Select>
+      </FormControl>
+    );
+  }
+
+  // Single child - show simplified selector
+  if (children.length === 1 && mode === 'single') {
+    const child = children[0];
+    return (
+      <FormControl fullWidth disabled={disabled}>
+        <InputLabel>{label}</InputLabel>
+        <Select value={child.id} label={label}>
+          <MenuItem value={child.id}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <Avatar
+                src={child.photoUrl}
+                sx={{
+                  width: compact ? 24 : 32,
+                  height: compact ? 24 : 32,
+                  bgcolor: child.displayColor,
+                }}
+              >
+                {child.name[0]}
+              </Avatar>
+              {child.name}
+            </Box>
+          </MenuItem>
+        </Select>
+      </FormControl>
+    );
+  }
+
+  return (
+    <FormControl fullWidth required={required} disabled={disabled}>
+      <InputLabel>{label}</InputLabel>
+      <Select
+        value={getDisplayValue()}
+        onChange={handleChange}
+        label={label}
+        multiple={mode === 'multiple'}
+        renderValue={renderValue}
+      >
+        {showAllOption && mode === 'multiple' && (
+          <MenuItem value="all">
+            <Checkbox
+              checked={selectedChildIds.length === children.length}
+              indeterminate={
+                selectedChildIds.length > 0 &&
+                selectedChildIds.length < children.length
+              }
+            />
+            <ListItemText primary="All Children" />
+          </MenuItem>
+        )}
+
+        {children
+          .sort((a, b) => a.sortOrder - b.sortOrder)
+          .map((child) => (
+            <MenuItem key={child.id} value={child.id}>
+              {mode === 'multiple' && (
+                <Checkbox checked={selectedChildIds.includes(child.id)} />
+              )}
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 1,
+                  flex: 1,
+                }}
+              >
+                <Avatar
+                  src={child.photoUrl}
+                  sx={{
+                    width: compact ? 24 : 32,
+                    height: compact ? 24 : 32,
+                    bgcolor: child.displayColor,
+                  }}
+                >
+                  {child.name[0]}
+                </Avatar>
+                <Box sx={{ flex: 1 }}>
+                  <ListItemText
+                    primary={child.name}
+                    secondary={child.nickname}
+                  />
+                </Box>
+                {!compact && (
+                  <Box
+                    sx={{
+                      width: 12,
+                      height: 12,
+                      borderRadius: '50%',
+                      bgcolor: child.displayColor,
+                    }}
+                  />
+                )}
+              </Box>
+            </MenuItem>
+          ))}
+      </Select>
+    </FormControl>
+  );
+}

maternal-web/lib/api/children.ts

@@ -8,6 +8,9 @@ export interface Child {
   gender: 'male' | 'female' | 'other';
   photoUrl?: string;
   photoAlt?: string;
+  displayColor: string;
+  sortOrder: number;
+  nickname?: string;
   medicalInfo?: any;
   createdAt: string;
 }
@@ -18,9 +21,18 @@ export interface CreateChildData {
   gender: 'male' | 'female' | 'other';
   photoUrl?: string;
   photoAlt?: string;
+  displayColor?: string;
+  nickname?: string;
   medicalInfo?: any;
 }
 
+export interface FamilyStatistics {
+  totalChildren: number;
+  viewMode: 'tabs' | 'cards';
+  ageRange: { youngest: number; oldest: number } | null;
+  genderDistribution: { male: number; female: number; other: number };
+}
+
 export interface UpdateChildData extends Partial<CreateChildData> {}
 
 export const childrenApi = {
@@ -59,4 +71,10 @@ export const childrenApi = {
     const response = await apiClient.get(`/api/v1/children/${id}/age`);
     return response.data.data;
   },
+
+  // Get family statistics for multi-child UI
+  getFamilyStatistics: async (familyId: string): Promise<FamilyStatistics> => {
+    const response = await apiClient.get(`/api/v1/children/family/${familyId}/statistics`);
+    return response.data.data;
+  },
 };