# Multi-Child Support Implementation Guide ## Overview Implementation specifications for supporting multiple children in the maternal organization app with dynamic UI adaptation based on the number of children registered. --- ## Core Rules Implementation ### Rule 1: Dynamic Dashboard View (1-3 vs 3+ children) **For 1-3 Children - Tab Implementation:** - Display horizontal tabs at the top of the dashboard - Each tab shows one child's name - Add an "All" tab at the end to view combined summary - Active tab should be visually distinct (use primary color from Design System) - Tab transitions should be smooth and instantaneous - Selected tab state must persist during app session **For 3+ Children - Stacked Cards Implementation:** - Display vertically scrollable cards - Each card represents one child - Cards should show compact summary (key metrics only) - Include child's name and age on each card - Add visual separation between cards (8px spacing) - Implement pull-to-refresh for updating all cards ### Rule 2: Global Child Selector **Implementation Requirements:** - Add dropdown selector to app header (below navigation bar) - Only display when family has 2+ children - Show currently selected child(ren) name(s) - Dropdown options must include: - Individual child names with profile photos (if available) - "All Children" option - Visual indicator for currently selected - Selector state must persist across all screens - Update all displayed data when selection changes --- ## Screen-by-Screen Updates ### Dashboard Screen - Implement view mode detection based on children count - Add child selector if 2+ children - Update summary calculations based on selected child(ren) - For "All" selection, show aggregated statistics - Ensure real-time sync updates correct child's data ### Activity Logging Screens - Add child selection step before logging - Default to last active child - Allow bulk logging for multiple children (e.g., "both kids napping") - Update confirmation messages to include child name(s) - Store child association with each activity ### AI Assistant Screen - Modify context building to include selected child's data - Update prompts to specify which child when asking questions - Allow questions about multiple children comparisons - Include child name in AI responses for clarity ### Analytics Screen - Add "Comparison" tab as specified in Rule 4 - Update all charts to filter by selected child(ren) - Implement side-by-side view for comparing 2 children - Add legend when showing multiple children's data - Export reports should specify which child(ren) included --- ## Rule 3: Analytics Comparison Tab ### Comparison View Requirements - Add new tab in Analytics section labeled "Compare" - Only show when 2+ children registered - Default to comparing all children - Implement following comparison metrics: - Sleep patterns overlay chart - Feeding frequency comparison - Growth curves on same graph - Development milestones timeline - Activity patterns heatmap ### Comparison Controls - Add date range selector (default: last 7 days) - Include child selector checkboxes - Implement metric selector (choose what to compare) - Add export functionality for comparison reports - Use different colors per child (from a predefined palette) --- ## Rule 4: Voice Command Multi-Child Handling ### Voice Processing Updates **Child Detection Logic:** 1. Parse voice input for child names 2. If child name detected, associate with that child 3. If no child name detected: - For single child families: auto-select - For multi-child families: prompt for selection 4. Support keywords: "both", "all kids", "everyone" **Clarification Prompts:** - "Which child is this for?" - "Did you mean [Child Name]?" - "Should I log this for all children?" - Display child selector with voice feedback - Allow voice response for selection **Natural Language Patterns to Support:** - "[Child name] just [activity]" - "Both kids are [activity]" - "Log feeding for [child name]" - "All children went to bed" - "The twins are napping" --- ## State Management Updates ### Redux Store Modifications **UI Slice Updates:** - Add active children IDs array (supports multi-select) - Store default child ID for quick actions - Add view mode preference (tabs vs cards) - Cache last selected child per screen - Store comparison view preferences **Activities Slice Updates:** - Index activities by child ID - Support filtering by multiple children - Add bulk operation support - Update sync to handle multi-child selections **Analytics Slice Updates:** - Cache calculations per child - Store comparison configurations - Add aggregation logic for "all children" view --- ## API Updates ### Endpoint Modifications **Activity Endpoints:** - Accept child_id array for bulk operations - Return child-specific data in responses - Support filtering by multiple children - Add comparison-specific endpoints **Analytics Endpoints:** - Add comparison query parameters - Support multi-child aggregations - Return child-separated statistics - Include child identifiers in all responses ### WebSocket Updates - Include child ID in all real-time events - Support room-per-child architecture - Emit updates only for selected children - Handle bulk activity broadcasts --- ## Database Updates ### Schema Modifications - Ensure all activity tables include child_id foreign key - Add indexes on child_id for performance - Create views for multi-child aggregations - Add comparison preferences table ### Query Optimizations - Implement efficient multi-child queries - Add database functions for aggregations - Optimize for common comparison queries - Cache frequently accessed combinations --- ## Testing Requirements ### Unit Tests - Test view mode selection logic - Verify child selector state management - Test voice command child detection - Validate aggregation calculations ### Integration Tests - Test multi-child activity logging flow - Verify real-time sync for multiple children - Test comparison view data accuracy - Validate API filtering with multiple children ### E2E Tests - Complete flow for 2-child family - Complete flow for 4+ child family - Voice command with child selection - Analytics comparison interactions --- ## Migration Plan ### For Existing Users 1. Detect single-child accounts 2. Hide multi-child features initially 3. Enable features when second child added 4. Preserve all existing data associations 5. Default existing activities to first child ### UI Migration 1. Add child selector component globally 2. Update dashboard based on child count 3. Add comparison tab to analytics 4. Update all logging flows 5. Modify voice processing pipeline --- ## Performance Considerations - Lazy load child data as needed - Cache per-child calculations - Implement virtual scrolling for many children - Optimize database queries for multi-child filters - Throttle real-time updates when showing multiple children --- ## Accessibility Updates - Ensure child selector is screen-reader friendly - Add voice announcements for child selection - Label all charts with child names - Support keyboard navigation for tabs - Provide text alternatives for comparison visualizations