Add backend API integration for Children, Family, and Tracking

API Services Created:
- lib/api/children.ts: Full CRUD operations for children management
- lib/api/families.ts: Family member management and invitations
- lib/api/tracking.ts: Activity tracking (feeding, sleep, diaper, etc.)

Children Page Implementation:
- Fetch and display children from backend API
- Add/Edit child with modal dialog (ChildDialog component)
- Delete child with confirmation (DeleteConfirmDialog component)
- Age calculation from birthDate
- Loading states and error handling
- Responsive card grid layout
- Gender-based avatar colors
- Empty state for no children

AuthContext Updates:
- Added families array to User interface
- Includes familyId for API calls

Components:
- components/children/ChildDialog.tsx: Form for add/edit child
- components/children/DeleteConfirmDialog.tsx: Delete confirmation

All components use Material-UI theme and include proper TypeScript types

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

maternal-web/components/children/ChildDialog.tsx

@@ -0,0 +1,157 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  TextField,
+  MenuItem,
+  Box,
+  Alert,
+} from '@mui/material';
+import { Child, CreateChildData } from '@/lib/api/children';
+
+interface ChildDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (data: CreateChildData) => Promise<void>;
+  child?: Child | null;
+  isLoading?: boolean;
+}
+
+export function ChildDialog({ open, onClose, onSubmit, child, isLoading = false }: ChildDialogProps) {
+  const [formData, setFormData] = useState<CreateChildData>({
+    name: '',
+    birthDate: '',
+    gender: 'male',
+    photoUrl: '',
+  });
+  const [error, setError] = useState<string>('');
+
+  useEffect(() => {
+    if (child) {
+      setFormData({
+        name: child.name,
+        birthDate: child.birthDate.split('T')[0], // Convert to YYYY-MM-DD format
+        gender: child.gender,
+        photoUrl: child.photoUrl || '',
+      });
+    } else {
+      setFormData({
+        name: '',
+        birthDate: '',
+        gender: 'male',
+        photoUrl: '',
+      });
+    }
+    setError('');
+  }, [child, open]);
+
+  const handleChange = (field: keyof CreateChildData) => (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setFormData({ ...formData, [field]: e.target.value });
+  };
+
+  const handleSubmit = async () => {
+    setError('');
+
+    // Validation
+    if (!formData.name.trim()) {
+      setError('Please enter a name');
+      return;
+    }
+    if (!formData.birthDate) {
+      setError('Please select a birth date');
+      return;
+    }
+
+    // Check if birth date is in the future
+    const selectedDate = new Date(formData.birthDate);
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    if (selectedDate > today) {
+      setError('Birth date cannot be in the future');
+      return;
+    }
+
+    try {
+      await onSubmit(formData);
+      onClose();
+    } catch (err: any) {
+      setError(err.message || 'Failed to save child');
+    }
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
+      <DialogTitle>{child ? 'Edit Child' : 'Add Child'}</DialogTitle>
+      <DialogContent>
+        <Box sx={{ pt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
+          {error && (
+            <Alert severity="error" onClose={() => setError('')}>
+              {error}
+            </Alert>
+          )}
+
+          <TextField
+            label="Name"
+            value={formData.name}
+            onChange={handleChange('name')}
+            fullWidth
+            required
+            autoFocus
+            disabled={isLoading}
+          />
+
+          <TextField
+            label="Birth Date"
+            type="date"
+            value={formData.birthDate}
+            onChange={handleChange('birthDate')}
+            fullWidth
+            required
+            InputLabelProps={{
+              shrink: true,
+            }}
+            disabled={isLoading}
+          />
+
+          <TextField
+            label="Gender"
+            value={formData.gender}
+            onChange={handleChange('gender')}
+            fullWidth
+            required
+            select
+            disabled={isLoading}
+          >
+            <MenuItem value="male">Male</MenuItem>
+            <MenuItem value="female">Female</MenuItem>
+            <MenuItem value="other">Other</MenuItem>
+          </TextField>
+
+          <TextField
+            label="Photo URL (Optional)"
+            value={formData.photoUrl}
+            onChange={handleChange('photoUrl')}
+            fullWidth
+            placeholder="https://example.com/photo.jpg"
+            disabled={isLoading}
+          />
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} disabled={isLoading}>
+          Cancel
+        </Button>
+        <Button onClick={handleSubmit} variant="contained" disabled={isLoading}>
+          {isLoading ? 'Saving...' : child ? 'Update' : 'Add'}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}