Implement Family page with full backend integration
Features: - Fetch and display family details and members - Family share code with copy-to-clipboard functionality - Invite family members via email with role selection - Join another family using share code - Remove family members with confirmation - Visual indicators for current user - Role-based chip colors (Parent/Caregiver/Viewer) - Loading states and error handling - Empty state when no members exist - Success notifications via Snackbar Components Created: - components/family/InviteMemberDialog.tsx: Invite form with email and role - components/family/JoinFamilyDialog.tsx: Join family via share code - components/family/RemoveMemberDialog.tsx: Remove member confirmation All features fully integrated with backend API using familiesApi 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
andupetcu
126
maternal-web/components/family/InviteMemberDialog.tsx
Normal file
126
maternal-web/components/family/InviteMemberDialog.tsx
Normal file
@@ -0,0 +1,126 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
Button,
|
||||
TextField,
|
||||
MenuItem,
|
||||
Box,
|
||||
Alert,
|
||||
} from '@mui/material';
|
||||
import { InviteMemberData } from '@/lib/api/families';
|
||||
|
||||
interface InviteMemberDialogProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit: (data: InviteMemberData) => Promise<void>;
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
export function InviteMemberDialog({
|
||||
open,
|
||||
onClose,
|
||||
onSubmit,
|
||||
isLoading = false,
|
||||
}: InviteMemberDialogProps) {
|
||||
const [formData, setFormData] = useState<InviteMemberData>({
|
||||
email: '',
|
||||
role: 'viewer',
|
||||
});
|
||||
const [error, setError] = useState<string>('');
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setFormData({
|
||||
email: '',
|
||||
role: 'viewer',
|
||||
});
|
||||
setError('');
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
const handleChange = (field: keyof InviteMemberData) => (
|
||||
e: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
setFormData({ ...formData, [field]: e.target.value });
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
setError('');
|
||||
|
||||
// Validation
|
||||
if (!formData.email.trim()) {
|
||||
setError('Please enter an email address');
|
||||
return;
|
||||
}
|
||||
|
||||
// Basic email validation
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(formData.email)) {
|
||||
setError('Please enter a valid email address');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await onSubmit(formData);
|
||||
onClose();
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Failed to invite member');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>Invite Family Member</DialogTitle>
|
||||
<DialogContent>
|
||||
<Box sx={{ pt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
{error && (
|
||||
<Alert severity="error" onClose={() => setError('')}>
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<TextField
|
||||
label="Email Address"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange('email')}
|
||||
fullWidth
|
||||
required
|
||||
autoFocus
|
||||
disabled={isLoading}
|
||||
placeholder="member@example.com"
|
||||
helperText="Enter the email address of the person you want to invite"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
label="Role"
|
||||
value={formData.role}
|
||||
onChange={handleChange('role')}
|
||||
fullWidth
|
||||
required
|
||||
select
|
||||
disabled={isLoading}
|
||||
helperText="Select the access level for this member"
|
||||
>
|
||||
<MenuItem value="parent">Parent - Full access to all features</MenuItem>
|
||||
<MenuItem value="caregiver">Caregiver - Can manage daily activities</MenuItem>
|
||||
<MenuItem value="viewer">Viewer - Can only view information</MenuItem>
|
||||
</TextField>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={onClose} disabled={isLoading}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleSubmit} variant="contained" disabled={isLoading}>
|
||||
{isLoading ? 'Sending...' : 'Send Invitation'}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
95
maternal-web/components/family/JoinFamilyDialog.tsx
Normal file
95
maternal-web/components/family/JoinFamilyDialog.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
Button,
|
||||
TextField,
|
||||
Box,
|
||||
Alert,
|
||||
Typography,
|
||||
} from '@mui/material';
|
||||
import { JoinFamilyData } from '@/lib/api/families';
|
||||
|
||||
interface JoinFamilyDialogProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit: (data: JoinFamilyData) => Promise<void>;
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
export function JoinFamilyDialog({
|
||||
open,
|
||||
onClose,
|
||||
onSubmit,
|
||||
isLoading = false,
|
||||
}: JoinFamilyDialogProps) {
|
||||
const [shareCode, setShareCode] = useState<string>('');
|
||||
const [error, setError] = useState<string>('');
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setShareCode('');
|
||||
setError('');
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
setError('');
|
||||
|
||||
// Validation
|
||||
if (!shareCode.trim()) {
|
||||
setError('Please enter a share code');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await onSubmit({ shareCode: shareCode.trim() });
|
||||
onClose();
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Failed to join family');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>Join a Family</DialogTitle>
|
||||
<DialogContent>
|
||||
<Box sx={{ pt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
{error && (
|
||||
<Alert severity="error" onClose={() => setError('')}>
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Enter the share code provided by the family administrator to join their family.
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
label="Share Code"
|
||||
value={shareCode}
|
||||
onChange={(e) => setShareCode(e.target.value)}
|
||||
fullWidth
|
||||
required
|
||||
autoFocus
|
||||
disabled={isLoading}
|
||||
placeholder="Enter family share code"
|
||||
helperText="Ask a family member for their share code"
|
||||
/>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={onClose} disabled={isLoading}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleSubmit} variant="contained" disabled={isLoading}>
|
||||
{isLoading ? 'Joining...' : 'Join Family'}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
52
maternal-web/components/family/RemoveMemberDialog.tsx
Normal file
52
maternal-web/components/family/RemoveMemberDialog.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 RemoveMemberDialogProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onConfirm: () => void;
|
||||
memberName: string;
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
export function RemoveMemberDialog({
|
||||
open,
|
||||
onClose,
|
||||
onConfirm,
|
||||
memberName,
|
||||
isLoading = false,
|
||||
}: RemoveMemberDialogProps) {
|
||||
return (
|
||||
<Dialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
|
||||
<DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Warning color="warning" />
|
||||
Remove Family Member
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<Typography variant="body1">
|
||||
Are you sure you want to remove <strong>{memberName}</strong> from your family?
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
|
||||
This member will lose access to all family data and activities.
|
||||
</Typography>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={onClose} disabled={isLoading}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={onConfirm} color="error" variant="contained" disabled={isLoading}>
|
||||
{isLoading ? 'Removing...' : 'Remove Member'}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user