Andrei
9fad81921d
**Pages Localized:** - Track main page: Activity selection menu with all tracking options - Children page: Complete localization including age formatting with pluralization **Translation Files:** - Enhanced tracking.json: Added trackActivity, selectActivity, and activities keys - Created children.json for all 5 languages with comprehensive strings - Updated i18n config to include children namespace **Key Features:** - Localized age calculation with proper pluralization (year/years, month/months) - All error messages translated - Gender labels localized - Properly formatted age display for all languages **Languages Supported:** - English, Spanish, French, Portuguese, Chinese (Simplified) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
98 lines
3.1 KiB
TypeScript
98 lines
3.1 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: '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>
|
|
);
|
|
}
|