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>
This commit is contained in:
andupetcu
157
maternal-web/components/children/ChildDialog.tsx
Normal file
157
maternal-web/components/children/ChildDialog.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
52
maternal-web/components/children/DeleteConfirmDialog.tsx
Normal file
52
maternal-web/components/children/DeleteConfirmDialog.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
Button,
|
||||
Typography,
|
||||
} from '@mui/material';
|
||||
import { Warning } from '@mui/icons-material';
|
||||
|
||||
interface DeleteConfirmDialogProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onConfirm: () => void;
|
||||
childName: string;
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
export function DeleteConfirmDialog({
|
||||
open,
|
||||
onClose,
|
||||
onConfirm,
|
||||
childName,
|
||||
isLoading = false,
|
||||
}: DeleteConfirmDialogProps) {
|
||||
return (
|
||||
<Dialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
|
||||
<DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Warning color="warning" />
|
||||
Confirm Delete
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<Typography variant="body1">
|
||||
Are you sure you want to delete <strong>{childName}</strong>?
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
|
||||
This action cannot be undone. All associated data will be permanently removed.
|
||||
</Typography>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={onClose} disabled={isLoading}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={onConfirm} color="error" variant="contained" disabled={isLoading}>
|
||||
{isLoading ? 'Deleting...' : 'Delete'}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user