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>
81 lines
2.4 KiB
TypeScript
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;
|
|
},
|
|
};
|