docs: Add comprehensive multi-child implementation plan
Added detailed implementation plan covering: - Frontend: Dynamic UI, child selector, bulk activity logging, comparison analytics - Backend: Bulk operations, multi-child queries, family statistics - AI/Voice: Child name detection, context building, clarification flows - Database: Schema enhancements, user preferences, bulk operation tracking - State management, API enhancements, real-time sync updates - Testing strategy: Unit, integration, and E2E tests - Migration plan with feature flags for phased rollout - Performance optimizations: Caching, indexes, code splitting Also includes: - Security fixes for multi-family data leakage in analytics pages - ParentFlow branding updates - Activity tracking navigation improvements - Backend DTO and error handling fixes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
244
docs/implementation-docs/multi-child-implementation.md
Normal file
244
docs/implementation-docs/multi-child-implementation.md
Normal file
@@ -0,0 +1,244 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user