Add Phase 2 & 3: Web frontend with authentication and tracking features
- Initialize Next.js 14 web application with Material UI and TypeScript - Implement authentication (login/register) with device fingerprint - Create mobile-first responsive layout with app shell pattern - Add tracking pages for feeding, sleep, and diaper changes - Implement activity history with filtering - Configure backend CORS for web frontend (port 3030) - Update backend port to 3020, frontend to 3030 - Fix API response handling for auth endpoints 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
andupetcu
259
maternal-web/app/track/sleep/page.tsx
Normal file
259
maternal-web/app/track/sleep/page.tsx
Normal file
@@ -0,0 +1,259 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Button,
|
||||
Paper,
|
||||
TextField,
|
||||
IconButton,
|
||||
Alert,
|
||||
Chip,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
RadioGroup,
|
||||
FormControlLabel,
|
||||
Radio,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
ArrowBack,
|
||||
Bedtime,
|
||||
WbSunny,
|
||||
Save,
|
||||
Mic,
|
||||
} from '@mui/icons-material';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { AppShell } from '@/components/layouts/AppShell/AppShell';
|
||||
import { ProtectedRoute } from '@/components/common/ProtectedRoute';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
const sleepSchema = z.object({
|
||||
startTime: z.string(),
|
||||
endTime: z.string(),
|
||||
quality: z.enum(['excellent', 'good', 'fair', 'poor']),
|
||||
notes: z.string().optional(),
|
||||
}).refine((data) => new Date(data.endTime) > new Date(data.startTime), {
|
||||
message: 'End time must be after start time',
|
||||
path: ['endTime'],
|
||||
});
|
||||
|
||||
type SleepFormData = z.infer<typeof sleepSchema>;
|
||||
|
||||
export default function SleepTrackPage() {
|
||||
const router = useRouter();
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
watch,
|
||||
formState: { errors },
|
||||
} = useForm<SleepFormData>({
|
||||
resolver: zodResolver(sleepSchema),
|
||||
defaultValues: {
|
||||
quality: 'good',
|
||||
},
|
||||
});
|
||||
|
||||
const startTime = watch('startTime');
|
||||
const endTime = watch('endTime');
|
||||
|
||||
const calculateDuration = () => {
|
||||
if (!startTime || !endTime) return null;
|
||||
const start = new Date(startTime);
|
||||
const end = new Date(endTime);
|
||||
const diff = end.getTime() - start.getTime();
|
||||
if (diff < 0) return null;
|
||||
|
||||
const hours = Math.floor(diff / (1000 * 60 * 60));
|
||||
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
||||
return `${hours}h ${minutes}m`;
|
||||
};
|
||||
|
||||
const setStartNow = () => {
|
||||
const now = format(new Date(), "yyyy-MM-dd'T'HH:mm");
|
||||
setValue('startTime', now);
|
||||
};
|
||||
|
||||
const setEndNow = () => {
|
||||
const now = format(new Date(), "yyyy-MM-dd'T'HH:mm");
|
||||
setValue('endTime', now);
|
||||
};
|
||||
|
||||
const onSubmit = async (data: SleepFormData) => {
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
// TODO: Call API to save sleep data
|
||||
console.log('Sleep data:', data);
|
||||
setSuccess(true);
|
||||
setTimeout(() => router.push('/'), 2000);
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Failed to log sleep');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ProtectedRoute>
|
||||
<AppShell>
|
||||
<Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
|
||||
<IconButton onClick={() => router.back()} sx={{ mr: 2 }}>
|
||||
<ArrowBack />
|
||||
</IconButton>
|
||||
<Typography variant="h4" fontWeight="600">
|
||||
Track Sleep
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{success && (
|
||||
<Alert severity="success" sx={{ mb: 3 }}>
|
||||
Sleep logged successfully!
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<Alert severity="error" sx={{ mb: 3 }}>
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<Paper sx={{ p: 3, mb: 3 }}>
|
||||
<Box component="form" onSubmit={handleSubmit(onSubmit)}>
|
||||
{/* Start Time */}
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 1 }}>
|
||||
<Bedtime color="primary" />
|
||||
<Typography variant="h6" fontWeight="600">
|
||||
Sleep Start
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', gap: 2, alignItems: 'flex-start' }}>
|
||||
<TextField
|
||||
fullWidth
|
||||
type="datetime-local"
|
||||
{...register('startTime')}
|
||||
error={!!errors.startTime}
|
||||
helperText={errors.startTime?.message}
|
||||
InputLabelProps={{ shrink: true }}
|
||||
/>
|
||||
<Button variant="outlined" onClick={setStartNow} sx={{ minWidth: 100 }}>
|
||||
Now
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* End Time */}
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 1 }}>
|
||||
<WbSunny color="warning" />
|
||||
<Typography variant="h6" fontWeight="600">
|
||||
Wake Up
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', gap: 2, alignItems: 'flex-start' }}>
|
||||
<TextField
|
||||
fullWidth
|
||||
type="datetime-local"
|
||||
{...register('endTime')}
|
||||
error={!!errors.endTime}
|
||||
helperText={errors.endTime?.message}
|
||||
InputLabelProps={{ shrink: true }}
|
||||
/>
|
||||
<Button variant="outlined" onClick={setEndNow} sx={{ minWidth: 100 }}>
|
||||
Now
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Duration Display */}
|
||||
{calculateDuration() && (
|
||||
<Box sx={{ mb: 3, textAlign: 'center' }}>
|
||||
<Chip
|
||||
label={`Duration: ${calculateDuration()}`}
|
||||
color="primary"
|
||||
sx={{ fontSize: '1rem', py: 3 }}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Sleep Quality */}
|
||||
<FormControl component="fieldset" sx={{ mb: 3, width: '100%' }}>
|
||||
<FormLabel component="legend" sx={{ mb: 2 }}>
|
||||
Sleep Quality
|
||||
</FormLabel>
|
||||
<RadioGroup row>
|
||||
<FormControlLabel
|
||||
value="excellent"
|
||||
control={<Radio {...register('quality')} />}
|
||||
label="Excellent"
|
||||
/>
|
||||
<FormControlLabel
|
||||
value="good"
|
||||
control={<Radio {...register('quality')} />}
|
||||
label="Good"
|
||||
/>
|
||||
<FormControlLabel
|
||||
value="fair"
|
||||
control={<Radio {...register('quality')} />}
|
||||
label="Fair"
|
||||
/>
|
||||
<FormControlLabel
|
||||
value="poor"
|
||||
control={<Radio {...register('quality')} />}
|
||||
label="Poor"
|
||||
/>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
|
||||
{/* Notes */}
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Notes (optional)"
|
||||
multiline
|
||||
rows={3}
|
||||
{...register('notes')}
|
||||
sx={{ mb: 3 }}
|
||||
placeholder="Any disruptions, dreams, or observations..."
|
||||
/>
|
||||
|
||||
{/* Voice Input Button */}
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', mb: 3 }}>
|
||||
<Chip
|
||||
icon={<Mic />}
|
||||
label="Use Voice Input"
|
||||
onClick={() => {/* TODO: Implement voice input */}}
|
||||
sx={{ cursor: 'pointer' }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Submit Button */}
|
||||
<Button
|
||||
fullWidth
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
startIcon={<Save />}
|
||||
>
|
||||
Save Sleep Session
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
</motion.div>
|
||||
</Box>
|
||||
</AppShell>
|
||||
</ProtectedRoute>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user