Andrei
95ef0e5e78
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>
244 lines
7.1 KiB
Markdown
244 lines
7.1 KiB
Markdown
# 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 |