Andrei 97830c5905 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>

2025-10-04 21:28:15 +00:00

7.0 KiB

Raw Blame History

View Raw