maternal-app/docs/implementation-docs/multi-child-implementation.md

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