Files
maternal-app/maternal-web/lib/api/children.ts
Andrei 97830c5905
Some checks failed
CI/CD Pipeline / Lint and Test (push) Has been cancelled
CI/CD Pipeline / E2E Tests (push) Has been cancelled
CI/CD Pipeline / Build Application (push) Has been cancelled
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

81 lines
2.4 KiB
TypeScript

import apiClient from './client';
export interface Child {
id: string;
familyId: string;
name: string;
birthDate: string;
gender: 'male' | 'female' | 'other';
photoUrl?: string;
photoAlt?: string;
displayColor: string;
sortOrder: number;
nickname?: string;
medicalInfo?: any;
createdAt: string;
}
export interface CreateChildData {
name: string;
birthDate: string;
gender: 'male' | 'female' | 'other';
photoUrl?: string;
photoAlt?: string;
displayColor?: string;
nickname?: string;
medicalInfo?: any;
}
export interface FamilyStatistics {
totalChildren: number;
viewMode: 'tabs' | 'cards';
ageRange: { youngest: number; oldest: number } | null;
genderDistribution: { male: number; female: number; other: number };
}
export interface UpdateChildData extends Partial<CreateChildData> {}
export const childrenApi = {
// Get all children for the authenticated user
getChildren: async (familyId?: string): Promise<Child[]> => {
const params = familyId ? { familyId } : {};
const response = await apiClient.get('/api/v1/children', { params });
return response.data.data.children;
},
// Get a specific child
getChild: async (id: string): Promise<Child> => {
const response = await apiClient.get(`/api/v1/children/${id}`);
return response.data.data.child;
},
// Create a new child
createChild: async (familyId: string, data: CreateChildData): Promise<Child> => {
const response = await apiClient.post(`/api/v1/children?familyId=${familyId}`, data);
return response.data.data.child;
},
// Update a child
updateChild: async (id: string, data: UpdateChildData): Promise<Child> => {
const response = await apiClient.patch(`/api/v1/children/${id}`, data);
return response.data.data.child;
},
// Delete a child
deleteChild: async (id: string): Promise<void> => {
await apiClient.delete(`/api/v1/children/${id}`);
},
// Get child's age
getChildAge: async (id: string): Promise<{ ageInMonths: number; ageInYears: number; remainingMonths: number }> => {
const response = await apiClient.get(`/api/v1/children/${id}/age`);
return response.data.data;
},
// Get family statistics for multi-child UI
getFamilyStatistics: async (familyId: string): Promise<FamilyStatistics> => {
const response = await apiClient.get(`/api/v1/children/family/${familyId}/statistics`);
return response.data.data;
},
};