Andrei
58c3a8d9d5
- Updated all Spanish (es) translation files with comprehensive translations for tracking, AI, family, insights, children, and settings pages - Updated French (fr), Portuguese (pt), and Chinese (zh) translations to match English structure - Added German (de) and Italian (it) language support with complete translation files - Fixed medicine tracker route from /track/medication to /track/medicine - Updated i18n config to support 7 languages: en, es, fr, pt, zh, de, it - All tracking pages now fully localized: sleep, feeding, diaper, medicine, activity - AI assistant interface fully translated with thinking messages and suggested questions - Family management and insights pages now support all languages 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
100 lines
3.2 KiB
TypeScript
100 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import { Box, Typography, Grid, Card, CardContent, CardActionArea } from '@mui/material';
|
|
import { Restaurant, Hotel, BabyChangingStation, ChildCare, MedicalServices } from '@mui/icons-material';
|
|
import { useRouter } from 'next/navigation';
|
|
import { AppShell } from '@/components/layouts/AppShell/AppShell';
|
|
import { ProtectedRoute } from '@/components/common/ProtectedRoute';
|
|
import { useTranslation } from '@/hooks/useTranslation';
|
|
|
|
export default function TrackPage() {
|
|
const { t } = useTranslation('tracking');
|
|
const router = useRouter();
|
|
|
|
const trackingOptions = [
|
|
{
|
|
title: t('activities.feeding'),
|
|
icon: <Restaurant sx={{ fontSize: 48, color: 'primary.main' }} />,
|
|
path: '/track/feeding',
|
|
color: '#FFE4E1',
|
|
},
|
|
{
|
|
title: t('activities.sleep'),
|
|
icon: <Hotel sx={{ fontSize: 48, color: 'info.main' }} />,
|
|
path: '/track/sleep',
|
|
color: '#E1F5FF',
|
|
},
|
|
{
|
|
title: t('activities.diaper'),
|
|
icon: <BabyChangingStation sx={{ fontSize: 48, color: 'warning.main' }} />,
|
|
path: '/track/diaper',
|
|
color: '#FFF4E1',
|
|
},
|
|
{
|
|
title: t('activities.medicine'),
|
|
icon: <MedicalServices sx={{ fontSize: 48, color: 'error.main' }} />,
|
|
path: '/track/medicine',
|
|
color: '#FFE8E8',
|
|
},
|
|
{
|
|
title: t('activities.activity'),
|
|
icon: <ChildCare sx={{ fontSize: 48, color: 'success.main' }} />,
|
|
path: '/track/activity',
|
|
color: '#E8F5E9',
|
|
},
|
|
];
|
|
|
|
return (
|
|
<ProtectedRoute>
|
|
<AppShell>
|
|
<Box>
|
|
<Typography variant="h4" fontWeight="600" gutterBottom>
|
|
{t('trackActivity')}
|
|
</Typography>
|
|
<Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
|
|
{t('selectActivity')}
|
|
</Typography>
|
|
|
|
<Grid container spacing={3}>
|
|
{trackingOptions.map((option) => (
|
|
<Grid item xs={12} sm={6} md={3} key={option.title}>
|
|
<Card
|
|
sx={{
|
|
height: '180px', // Fixed height for consistency
|
|
minHeight: '180px',
|
|
width: '100%',
|
|
bgcolor: option.color,
|
|
'&:hover': {
|
|
transform: 'translateY(-4px)',
|
|
transition: 'transform 0.2s',
|
|
},
|
|
}}
|
|
>
|
|
<CardActionArea
|
|
onClick={() => router.push(option.path)}
|
|
sx={{
|
|
height: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
py: 4,
|
|
}}
|
|
>
|
|
<CardContent sx={{ textAlign: 'center' }}>
|
|
{option.icon}
|
|
<Typography variant="h6" fontWeight="600" sx={{ mt: 2 }}>
|
|
{option.title}
|
|
</Typography>
|
|
</CardContent>
|
|
</CardActionArea>
|
|
</Card>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</Box>
|
|
</AppShell>
|
|
</ProtectedRoute>
|
|
);
|
|
}
|