feat: Redesign UI with consistent card styling and mobile header
- Updated track page cards to match home page styling with vibrant colors - Applied consistent 140px height cards across track and insights pages - Added mobile header bar with connection status and user menu - Moved user menu from floating top-left to fixed header top-right - Updated insights dashboard with home page color palette (#E91E63, #1976D2, etc.) - Centered cards with minWidth constraints (200px for stats, 400px for charts) - Fixed hydration mismatch by replacing JS media queries with CSS breakpoints - Improved accessibility with viewport settings (removed zoom restrictions) - Added UI improvements documentation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -5,17 +5,18 @@ import {
|
||||
Box,
|
||||
Typography,
|
||||
Grid,
|
||||
Card,
|
||||
CardContent,
|
||||
Paper,
|
||||
Button,
|
||||
Avatar,
|
||||
IconButton,
|
||||
CircularProgress,
|
||||
Alert,
|
||||
Chip,
|
||||
CardActions,
|
||||
Container,
|
||||
Card,
|
||||
CardContent,
|
||||
} from '@mui/material';
|
||||
import { Add, ChildCare, Edit, Delete, Cake } from '@mui/icons-material';
|
||||
import { Add, ChildCare, Edit, Delete, CalendarToday } from '@mui/icons-material';
|
||||
import { AppShell } from '@/components/layouts/AppShell/AppShell';
|
||||
import { ProtectedRoute } from '@/components/common/ProtectedRoute';
|
||||
import { useAuth } from '@/lib/auth/AuthContext';
|
||||
@@ -151,13 +152,13 @@ export default function ChildrenPage() {
|
||||
return (
|
||||
<ProtectedRoute>
|
||||
<AppShell>
|
||||
<Box>
|
||||
<Container maxWidth="md" sx={{ px: { xs: 2, sm: 3 }, py: 3 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4 }}>
|
||||
<Box>
|
||||
<Typography variant="h4" component="h1" fontWeight="600" gutterBottom>
|
||||
<Typography variant="h4" component="h1" fontWeight="600">
|
||||
{t('title')}
|
||||
</Typography>
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{t('subtitle')}
|
||||
</Typography>
|
||||
</Box>
|
||||
@@ -166,6 +167,11 @@ export default function ChildrenPage() {
|
||||
startIcon={<Add />}
|
||||
onClick={handleAddChild}
|
||||
disabled={loading || !familyId}
|
||||
sx={{
|
||||
borderRadius: 2,
|
||||
textTransform: 'none',
|
||||
px: 3
|
||||
}}
|
||||
>
|
||||
{t('addChild')}
|
||||
</Button>
|
||||
@@ -208,86 +214,66 @@ export default function ChildrenPage() {
|
||||
) : (
|
||||
<Grid container spacing={3}>
|
||||
{children.map((child, index) => (
|
||||
<Grid item xs={12} sm={6} md={4} key={child.id}>
|
||||
<Grid item xs={12} sm={6} key={child.id}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3, delay: index * 0.1 }}
|
||||
>
|
||||
<Card
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
height: '280px', // Fixed height for consistency
|
||||
minHeight: '280px',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
p: 3,
|
||||
borderRadius: 3,
|
||||
bgcolor: 'background.paper',
|
||||
border: 1,
|
||||
borderColor: 'divider'
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ flexGrow: 1 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
|
||||
<Avatar
|
||||
src={child.photoUrl}
|
||||
sx={{
|
||||
width: 60,
|
||||
height: 60,
|
||||
bgcolor: child.gender === 'male' ? '#B6D7FF' : '#FFB6C1',
|
||||
mr: 2,
|
||||
}}
|
||||
>
|
||||
<ChildCare sx={{ fontSize: 32 }} />
|
||||
</Avatar>
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<Typography variant="h6" fontWeight="600">
|
||||
{child.name}
|
||||
</Typography>
|
||||
<Chip
|
||||
label={t(`gender.${child.gender}`)}
|
||||
size="small"
|
||||
sx={{ textTransform: 'capitalize', mt: 0.5 }}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
|
||||
<Cake sx={{ fontSize: 20, color: 'text.secondary' }} />
|
||||
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
|
||||
<Avatar
|
||||
src={child.photoUrl}
|
||||
sx={{
|
||||
width: 64,
|
||||
height: 64,
|
||||
bgcolor: 'primary.light',
|
||||
fontSize: 24
|
||||
}}
|
||||
>
|
||||
{child.name[0]}
|
||||
</Avatar>
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<Typography variant="h6" fontWeight="600">{child.name}</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{new Date(child.birthDate).toLocaleDateString()}
|
||||
{t(`gender.${child.gender}`)}
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 1 }}>
|
||||
<CalendarToday fontSize="small" color="action" />
|
||||
<Typography variant="caption">
|
||||
{new Date(child.birthDate).toLocaleDateString()}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Typography variant="caption" color="primary.main">
|
||||
{t('age')}: {calculateAge(child.birthDate)}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="primary"
|
||||
fontWeight="600"
|
||||
sx={{ mt: 1 }}
|
||||
>
|
||||
{t('age')}: {calculateAge(child.birthDate)}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
|
||||
<CardActions sx={{ justifyContent: 'flex-end', pt: 0 }}>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => handleEditChild(child)}
|
||||
color="primary"
|
||||
>
|
||||
<Box sx={{ display: 'flex', gap: 1, mt: 2 }}>
|
||||
<IconButton size="small" color="primary" onClick={() => handleEditChild(child)}>
|
||||
<Edit />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => handleDeleteClick(child)}
|
||||
color="error"
|
||||
>
|
||||
<IconButton size="small" color="error" onClick={() => handleDeleteClick(child)}>
|
||||
<Delete />
|
||||
</IconButton>
|
||||
</CardActions>
|
||||
</Card>
|
||||
</Box>
|
||||
</Paper>
|
||||
</motion.div>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
)}
|
||||
</Box>
|
||||
</Container>
|
||||
|
||||
<ChildDialog
|
||||
open={dialogOpen}
|
||||
|
||||
@@ -5,8 +5,7 @@ import {
|
||||
Box,
|
||||
Typography,
|
||||
Grid,
|
||||
Card,
|
||||
CardContent,
|
||||
Paper,
|
||||
Button,
|
||||
Avatar,
|
||||
Chip,
|
||||
@@ -15,6 +14,13 @@ import {
|
||||
IconButton,
|
||||
Divider,
|
||||
Snackbar,
|
||||
Container,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemAvatar,
|
||||
ListItemText,
|
||||
Card,
|
||||
CardContent,
|
||||
} from '@mui/material';
|
||||
import { PersonAdd, ContentCopy, People, Delete, GroupAdd } from '@mui/icons-material';
|
||||
import { useAuth } from '@/lib/auth/AuthContext';
|
||||
@@ -162,22 +168,23 @@ export default function FamilyPage() {
|
||||
return (
|
||||
<ProtectedRoute>
|
||||
<AppShell>
|
||||
<Box>
|
||||
<Container maxWidth="md" sx={{ px: { xs: 2, sm: 3 }, py: 3 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4 }}>
|
||||
<Box>
|
||||
<Typography variant="h4" component="h1" fontWeight="600" gutterBottom>
|
||||
<Typography variant="h4" component="h1" fontWeight="600">
|
||||
{t('pageTitle')}
|
||||
</Typography>
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{t('pageSubtitle')}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<Box sx={{ display: 'flex', gap: 2 }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<GroupAdd />}
|
||||
onClick={() => setJoinDialogOpen(true)}
|
||||
disabled={loading}
|
||||
sx={{ borderRadius: 2, textTransform: 'none' }}
|
||||
>
|
||||
{t('buttons.joinFamily')}
|
||||
</Button>
|
||||
@@ -186,6 +193,7 @@ export default function FamilyPage() {
|
||||
startIcon={<PersonAdd />}
|
||||
onClick={() => setInviteDialogOpen(true)}
|
||||
disabled={loading || !familyId}
|
||||
sx={{ borderRadius: 2, textTransform: 'none' }}
|
||||
>
|
||||
{t('buttons.inviteMember')}
|
||||
</Button>
|
||||
@@ -203,49 +211,48 @@ export default function FamilyPage() {
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
) : (
|
||||
<Grid container spacing={3}>
|
||||
<Grid container spacing={4}>
|
||||
{/* Family Share Code */}
|
||||
{family && (
|
||||
<Grid item xs={12}>
|
||||
<Card sx={{ minHeight: '140px' }}>
|
||||
<CardContent>
|
||||
<Typography variant="h6" component="h2" fontWeight="600" gutterBottom>
|
||||
{t('shareCode.title')}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
|
||||
{t('shareCode.description')}
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flexWrap: 'wrap' }}>
|
||||
<Chip
|
||||
label={family.shareCode}
|
||||
sx={{
|
||||
fontSize: '1.1rem',
|
||||
fontWeight: 600,
|
||||
py: 2.5,
|
||||
px: 1,
|
||||
}}
|
||||
color="primary"
|
||||
/>
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<ContentCopy />}
|
||||
onClick={handleCopyCode}
|
||||
>
|
||||
{t('buttons.copyCode')}
|
||||
</Button>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Paper elevation={0} sx={{ p: 3, borderRadius: 3, bgcolor: 'background.paper' }}>
|
||||
<Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
{t('shareCode.title')}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
|
||||
{t('shareCode.description')}
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
|
||||
<Chip
|
||||
label={family.shareCode}
|
||||
sx={{
|
||||
px: 3,
|
||||
py: 1,
|
||||
fontSize: '1.25rem',
|
||||
fontWeight: 600,
|
||||
bgcolor: 'primary.light',
|
||||
color: 'primary.main'
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<ContentCopy />}
|
||||
onClick={handleCopyCode}
|
||||
sx={{ borderRadius: 2, textTransform: 'none' }}
|
||||
>
|
||||
{t('buttons.copyCode')}
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Grid>
|
||||
)}
|
||||
|
||||
{/* Family Members */}
|
||||
<Grid item xs={12}>
|
||||
<Card sx={{ minHeight: '200px' }}>
|
||||
<CardContent>
|
||||
<Typography variant="h6" fontWeight="600" gutterBottom sx={{ mb: 3 }}>
|
||||
{t('members.title', { count: members.length })}
|
||||
</Typography>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Paper elevation={0} sx={{ p: 3, borderRadius: 3, bgcolor: 'background.paper' }}>
|
||||
<Typography variant="h6" sx={{ mb: 3, fontWeight: 600 }}>
|
||||
{t('members.title', { count: members.length })}
|
||||
</Typography>
|
||||
|
||||
{members.length === 0 ? (
|
||||
<Box sx={{ textAlign: 'center', py: 4 }}>
|
||||
@@ -265,68 +272,71 @@ export default function FamilyPage() {
|
||||
</Button>
|
||||
</Box>
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<List sx={{ p: 0 }}>
|
||||
{members.map((member, index) => {
|
||||
const memberName = member.user?.name || t('placeholders.unknownUser');
|
||||
return (
|
||||
<Box key={member.id} component="div">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.2, delay: index * 0.05 }}
|
||||
<motion.div
|
||||
key={member.id}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.2, delay: index * 0.05 }}
|
||||
>
|
||||
<ListItem
|
||||
sx={{
|
||||
px: 2,
|
||||
py: 1.5,
|
||||
borderRadius: 2,
|
||||
mb: 1,
|
||||
bgcolor: 'background.default'
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
{index > 0 && <Divider sx={{ mb: 2 }} />}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
||||
<Avatar
|
||||
sx={{
|
||||
bgcolor: isCurrentUser(member.userId) ? 'primary.main' : 'secondary.main',
|
||||
}}
|
||||
>
|
||||
{memberName.charAt(0).toUpperCase()}
|
||||
</Avatar>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Typography variant="body1" fontWeight="600">
|
||||
{memberName}
|
||||
</Typography>
|
||||
{isCurrentUser(member.userId) && (
|
||||
<Chip label={t('members.youLabel')} size="small" color="success" />
|
||||
)}
|
||||
</Box>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{member.user?.email || t('placeholders.noEmail')}
|
||||
<ListItemAvatar>
|
||||
<Avatar sx={{ bgcolor: isCurrentUser(member.userId) ? 'primary.main' : 'secondary.main' }}>
|
||||
{memberName[0]}
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Typography variant="body1" fontWeight={500}>
|
||||
{memberName}
|
||||
</Typography>
|
||||
{isCurrentUser(member.userId) && (
|
||||
<Chip label={t('members.youLabel')} size="small" color="success" />
|
||||
)}
|
||||
</Box>
|
||||
<Chip
|
||||
label={t(`roles.${member.role}`)}
|
||||
color={getRoleColor(member.role)}
|
||||
size="small"
|
||||
/>
|
||||
{!isCurrentUser(member.userId) && (
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => handleRemoveClick(member)}
|
||||
color="error"
|
||||
aria-label={t('members.removeAriaLabel', { name: memberName })}
|
||||
>
|
||||
<Delete />
|
||||
</IconButton>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</motion.div>
|
||||
</Box>
|
||||
}
|
||||
secondary={member.user?.email || t('placeholders.noEmail')}
|
||||
primaryTypographyProps={{ fontWeight: 500 }}
|
||||
/>
|
||||
<Chip
|
||||
label={t(`roles.${member.role}`)}
|
||||
size="small"
|
||||
color={getRoleColor(member.role)}
|
||||
sx={{ borderRadius: 1, mr: 1 }}
|
||||
/>
|
||||
{!isCurrentUser(member.userId) && (
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => handleRemoveClick(member)}
|
||||
color="error"
|
||||
aria-label={t('members.removeAriaLabel', { name: memberName })}
|
||||
>
|
||||
<Delete fontSize="small" />
|
||||
</IconButton>
|
||||
)}
|
||||
</ListItem>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
</List>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
)}
|
||||
</Box>
|
||||
</Container>
|
||||
|
||||
<InviteMemberDialog
|
||||
open={inviteDialogOpen}
|
||||
|
||||
@@ -19,8 +19,6 @@ const inter = Inter({ subsets: ['latin'] });
|
||||
export const viewport: Viewport = {
|
||||
width: 'device-width',
|
||||
initialScale: 1,
|
||||
maximumScale: 1,
|
||||
userScalable: false,
|
||||
themeColor: '#FFB6C1',
|
||||
};
|
||||
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
'use client';
|
||||
|
||||
import { Box, Typography, Grid, Card, CardContent, CardActionArea } from '@mui/material';
|
||||
import { Box, Typography, Grid, Paper } 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';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
export default function TrackPage() {
|
||||
const { t } = useTranslation('tracking');
|
||||
@@ -14,100 +15,103 @@ export default function TrackPage() {
|
||||
const trackingOptions = [
|
||||
{
|
||||
title: t('activities.feeding'),
|
||||
icon: <Restaurant sx={{ fontSize: 48, color: 'primary.main' }} />,
|
||||
icon: Restaurant,
|
||||
path: '/track/feeding',
|
||||
color: '#FFE4E1',
|
||||
color: '#E91E63', // Pink with 4.5:1 contrast
|
||||
},
|
||||
{
|
||||
title: t('activities.sleep'),
|
||||
icon: <Hotel sx={{ fontSize: 48, color: 'info.main' }} />,
|
||||
icon: Hotel,
|
||||
path: '/track/sleep',
|
||||
color: '#E1F5FF',
|
||||
color: '#1976D2', // Blue with 4.5:1 contrast
|
||||
},
|
||||
{
|
||||
title: t('activities.diaper'),
|
||||
icon: <BabyChangingStation sx={{ fontSize: 48, color: 'warning.main' }} />,
|
||||
icon: BabyChangingStation,
|
||||
path: '/track/diaper',
|
||||
color: '#FFF4E1',
|
||||
color: '#F57C00', // Orange with 4.5:1 contrast
|
||||
},
|
||||
{
|
||||
title: t('activities.medicine'),
|
||||
icon: <MedicalServices sx={{ fontSize: 48, color: 'error.main' }} />,
|
||||
icon: MedicalServices,
|
||||
path: '/track/medicine',
|
||||
color: '#FFE8E8',
|
||||
color: '#C62828', // Red with 4.5:1 contrast
|
||||
},
|
||||
{
|
||||
title: t('activities.activity'),
|
||||
icon: <ChildCare sx={{ fontSize: 48, color: 'success.main' }} />,
|
||||
icon: ChildCare,
|
||||
path: '/track/activity',
|
||||
color: '#E8F5E9',
|
||||
color: '#558B2F', // Green with 4.5:1 contrast
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ProtectedRoute>
|
||||
<AppShell>
|
||||
<Box>
|
||||
<Typography variant="h4" fontWeight="600" gutterBottom>
|
||||
<Box sx={{ px: { xs: 2, sm: 3 }, py: 3 }}>
|
||||
<Typography variant="h4" sx={{ mb: 1, fontWeight: 600 }}>
|
||||
{t('trackActivity')}
|
||||
</Typography>
|
||||
<Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
|
||||
{t('selectActivity')}
|
||||
</Typography>
|
||||
|
||||
<Grid container spacing={3} sx={{ justifyContent: 'flex-start' }}>
|
||||
{trackingOptions.map((option) => (
|
||||
<Grid item xs={6} sm={4} md={2.4} 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%',
|
||||
width: '100%',
|
||||
}}
|
||||
<Grid container spacing={2} justifyContent="center">
|
||||
{trackingOptions.map((activity, index) => {
|
||||
const IconComponent = activity.icon;
|
||||
return (
|
||||
<Grid item xs={6} sm={4} lg={2.4} key={activity.title} sx={{ minWidth: 200 }}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.3, delay: index * 0.1 }}
|
||||
>
|
||||
<Box
|
||||
<Paper
|
||||
component="button"
|
||||
onClick={() => router.push(activity.path)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
router.push(activity.path);
|
||||
}
|
||||
}}
|
||||
aria-label={`Track ${activity.title}`}
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
p: 3,
|
||||
height: '140px',
|
||||
minHeight: '140px',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: '180px',
|
||||
minHeight: '180px',
|
||||
width: '100%',
|
||||
p: 2,
|
||||
textAlign: 'center',
|
||||
cursor: 'pointer',
|
||||
bgcolor: activity.color,
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
transition: 'transform 0.2s',
|
||||
'&:hover': {
|
||||
transform: 'scale(1.05)',
|
||||
},
|
||||
'&:focus-visible': {
|
||||
outline: '3px solid white',
|
||||
outlineOffset: '-3px',
|
||||
transform: 'scale(1.05)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{option.icon}
|
||||
<Typography
|
||||
variant="h6"
|
||||
fontWeight="600"
|
||||
sx={{
|
||||
mt: 2,
|
||||
textAlign: 'center',
|
||||
width: '100%',
|
||||
lineHeight: 1.2,
|
||||
}}
|
||||
>
|
||||
{option.title}
|
||||
<Box sx={{ fontSize: 48, mb: 1 }} aria-hidden="true">
|
||||
<IconComponent sx={{ fontSize: 48 }} />
|
||||
</Box>
|
||||
<Typography variant="body1" fontWeight="600">
|
||||
{activity.title}
|
||||
</Typography>
|
||||
</Box>
|
||||
</CardActionArea>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Paper>
|
||||
</motion.div>
|
||||
</Grid>
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
</Box>
|
||||
</AppShell>
|
||||
|
||||
@@ -408,7 +408,13 @@ export const AIChatInterface: React.FC = () => {
|
||||
variant="contained"
|
||||
startIcon={<Add />}
|
||||
onClick={handleNewConversation}
|
||||
sx={{ borderRadius: 2 }}
|
||||
sx={{
|
||||
borderRadius: 2,
|
||||
textTransform: 'none',
|
||||
bgcolor: 'primary.light',
|
||||
color: 'primary.main',
|
||||
'&:hover': { bgcolor: 'primary.main', color: 'white' }
|
||||
}}
|
||||
>
|
||||
{t('chat.newChat')}
|
||||
</Button>
|
||||
@@ -621,10 +627,15 @@ export const AIChatInterface: React.FC = () => {
|
||||
label={question}
|
||||
onClick={() => handleSuggestedQuestion(question)}
|
||||
sx={{
|
||||
borderRadius: 3,
|
||||
py: 2,
|
||||
borderRadius: 2,
|
||||
fontSize: '0.875rem',
|
||||
bgcolor: 'background.paper',
|
||||
border: 1,
|
||||
borderColor: 'divider',
|
||||
'&:hover': {
|
||||
bgcolor: 'primary.light',
|
||||
color: 'white',
|
||||
borderColor: 'primary.main',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
@@ -776,6 +787,9 @@ export const AIChatInterface: React.FC = () => {
|
||||
sx={{
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: 3,
|
||||
bgcolor: 'background.default',
|
||||
'&:hover fieldset': { borderColor: 'primary.main' },
|
||||
'&.Mui-focused fieldset': { borderColor: 'primary.main' }
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
@@ -68,11 +68,11 @@ interface ActivityTypeData {
|
||||
}
|
||||
|
||||
const COLORS = {
|
||||
feeding: '#FFB6C1',
|
||||
sleep: '#B6D7FF',
|
||||
diaper: '#FFE4B5',
|
||||
medication: '#D4B5FF',
|
||||
milestone: '#B5FFD4',
|
||||
feeding: '#E91E63',
|
||||
sleep: '#1976D2',
|
||||
diaper: '#F57C00',
|
||||
medication: '#C62828',
|
||||
milestone: '#558B2F',
|
||||
note: '#FFD3B6',
|
||||
wet: '#87CEEB',
|
||||
dirty: '#D2691E',
|
||||
@@ -269,50 +269,49 @@ export const InsightsDashboard: React.FC = () => {
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<Box>
|
||||
<Typography variant="h4" fontWeight="600" gutterBottom>
|
||||
<Box sx={{ px: { xs: 2, sm: 3 }, py: 3 }}>
|
||||
<Typography variant="h4" sx={{ mb: 1, fontWeight: 600 }}>
|
||||
{t('title')}
|
||||
</Typography>
|
||||
<Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
|
||||
{t('subtitle')}
|
||||
</Typography>
|
||||
|
||||
{/* Filters */}
|
||||
<Paper sx={{ p: 3, mb: 3 }}>
|
||||
<Grid container spacing={2} alignItems="center">
|
||||
{children.length > 1 && (
|
||||
<Grid item xs={12} sm={6} md={4}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>{t('filters.child')}</InputLabel>
|
||||
<Select
|
||||
value={selectedChild}
|
||||
onChange={(e) => setSelectedChild(e.target.value)}
|
||||
label={t('filters.child')}
|
||||
>
|
||||
{children.map((child) => (
|
||||
<MenuItem key={child.id} value={child.id}>
|
||||
{child.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
)}
|
||||
<Grid item xs={12} sm={6} md={4}>
|
||||
<ToggleButtonGroup
|
||||
value={dateRange}
|
||||
exclusive
|
||||
onChange={(_, newValue) => newValue && setDateRange(newValue)}
|
||||
fullWidth
|
||||
size="large"
|
||||
{/* Time period selector */}
|
||||
<Box sx={{ mb: 4, display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center' }}>
|
||||
{children.length > 1 && (
|
||||
<FormControl sx={{ minWidth: 200 }}>
|
||||
<InputLabel>{t('filters.child')}</InputLabel>
|
||||
<Select
|
||||
value={selectedChild}
|
||||
onChange={(e) => setSelectedChild(e.target.value)}
|
||||
label={t('filters.child')}
|
||||
>
|
||||
<ToggleButton value="7days">{t('filters.dateRange.7days')}</ToggleButton>
|
||||
<ToggleButton value="30days">{t('filters.dateRange.30days')}</ToggleButton>
|
||||
<ToggleButton value="3months">{t('filters.dateRange.3months')}</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Paper>
|
||||
{children.map((child) => (
|
||||
<MenuItem key={child.id} value={child.id}>
|
||||
{child.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
<ToggleButtonGroup
|
||||
value={dateRange}
|
||||
exclusive
|
||||
onChange={(_, newValue) => newValue && setDateRange(newValue)}
|
||||
sx={{
|
||||
'& .MuiToggleButton-root': {
|
||||
textTransform: 'none',
|
||||
fontWeight: 500,
|
||||
minWidth: { xs: 80, sm: 120 }
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ToggleButton value="7days">{t('filters.dateRange.7days')}</ToggleButton>
|
||||
<ToggleButton value="30days">{t('filters.dateRange.30days')}</ToggleButton>
|
||||
<ToggleButton value="3months">{t('filters.dateRange.3months')}</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</Box>
|
||||
|
||||
{error && (
|
||||
<Alert severity="error" sx={{ mb: 3 }}>
|
||||
@@ -355,148 +354,167 @@ export const InsightsDashboard: React.FC = () => {
|
||||
|
||||
{!loading && !noChildren && !noActivities && (
|
||||
<>
|
||||
{/* Summary Statistics */}
|
||||
<Grid container spacing={3} sx={{ mb: 3 }}>
|
||||
<Grid item xs={12} sm={6} md={3}>
|
||||
{/* Stats cards */}
|
||||
<Grid container spacing={2} sx={{ mb: 4 }} justifyContent="center">
|
||||
<Grid item xs={6} sm={3} sx={{ minWidth: 200 }}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.3, delay: 0 }}
|
||||
>
|
||||
<Card sx={{ bgcolor: COLORS.feeding, color: 'white', height: '160px', minHeight: '160px', width: '100%' }}>
|
||||
<Box
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: '160px',
|
||||
minHeight: '160px',
|
||||
width: '100%',
|
||||
p: 2,
|
||||
}}
|
||||
>
|
||||
<Restaurant sx={{ fontSize: 32, mb: 1 }} />
|
||||
<Typography variant="h3" fontWeight="700">
|
||||
{stats.totalFeedings}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ opacity: 0.9, mt: 1 }}>
|
||||
{t('stats.feedings.subtitle')}
|
||||
</Typography>
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
p: 3,
|
||||
height: '140px',
|
||||
minHeight: '140px',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
textAlign: 'center',
|
||||
bgcolor: COLORS.feeding,
|
||||
color: 'white',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ fontSize: 48, mb: 1 }} aria-hidden="true">
|
||||
<Restaurant sx={{ fontSize: 48 }} />
|
||||
</Box>
|
||||
</Card>
|
||||
<Typography variant="h3" fontWeight={600}>
|
||||
{stats.totalFeedings}
|
||||
</Typography>
|
||||
<Typography variant="caption" sx={{ opacity: 0.9 }}>
|
||||
{t('stats.feedings.subtitle')}
|
||||
</Typography>
|
||||
</Paper>
|
||||
</motion.div>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={6} md={3}>
|
||||
<Grid item xs={6} sm={3} sx={{ minWidth: 200 }}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.3, delay: 0.1 }}
|
||||
>
|
||||
<Card sx={{ bgcolor: COLORS.sleep, color: 'white', height: '160px', minHeight: '160px', width: '100%' }}>
|
||||
<Box
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: '160px',
|
||||
minHeight: '160px',
|
||||
width: '100%',
|
||||
p: 2,
|
||||
}}
|
||||
>
|
||||
<Hotel sx={{ fontSize: 32, mb: 1 }} />
|
||||
<Typography variant="h3" fontWeight="700">
|
||||
{stats.avgSleepHours}h
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ opacity: 0.9, mt: 1 }}>
|
||||
{t('stats.sleep.subtitle')}
|
||||
</Typography>
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
p: 3,
|
||||
height: '140px',
|
||||
minHeight: '140px',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
textAlign: 'center',
|
||||
bgcolor: COLORS.sleep,
|
||||
color: 'white',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ fontSize: 48, mb: 1 }} aria-hidden="true">
|
||||
<Hotel sx={{ fontSize: 48 }} />
|
||||
</Box>
|
||||
</Card>
|
||||
<Typography variant="h3" fontWeight={600}>
|
||||
{stats.avgSleepHours}h
|
||||
</Typography>
|
||||
<Typography variant="caption" sx={{ opacity: 0.9 }}>
|
||||
{t('stats.sleep.subtitle')}
|
||||
</Typography>
|
||||
</Paper>
|
||||
</motion.div>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={6} md={3}>
|
||||
<Grid item xs={6} sm={3} sx={{ minWidth: 200 }}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.3, delay: 0.2 }}
|
||||
>
|
||||
<Card sx={{ bgcolor: COLORS.diaper, color: 'white', height: '160px', minHeight: '160px', width: '100%' }}>
|
||||
<Box
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: '160px',
|
||||
minHeight: '160px',
|
||||
width: '100%',
|
||||
p: 2,
|
||||
}}
|
||||
>
|
||||
<BabyChangingStation sx={{ fontSize: 32, mb: 1 }} />
|
||||
<Typography variant="h3" fontWeight="700">
|
||||
{stats.totalDiapers}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ opacity: 0.9, mt: 1 }}>
|
||||
{t('stats.diapers.subtitle')}
|
||||
</Typography>
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
p: 3,
|
||||
height: '140px',
|
||||
minHeight: '140px',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
textAlign: 'center',
|
||||
bgcolor: COLORS.diaper,
|
||||
color: 'white',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ fontSize: 48, mb: 1 }} aria-hidden="true">
|
||||
<BabyChangingStation sx={{ fontSize: 48 }} />
|
||||
</Box>
|
||||
</Card>
|
||||
<Typography variant="h3" fontWeight={600}>
|
||||
{stats.totalDiapers}
|
||||
</Typography>
|
||||
<Typography variant="caption" sx={{ opacity: 0.9 }}>
|
||||
{t('stats.diapers.subtitle')}
|
||||
</Typography>
|
||||
</Paper>
|
||||
</motion.div>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={6} md={3}>
|
||||
<Grid item xs={6} sm={3} sx={{ minWidth: 200 }}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.3, delay: 0.3 }}
|
||||
>
|
||||
<Card sx={{ bgcolor: COLORS.milestone, color: 'white', height: '160px', minHeight: '160px', width: '100%' }}>
|
||||
<Box
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: '160px',
|
||||
minHeight: '160px',
|
||||
width: '100%',
|
||||
p: 2,
|
||||
}}
|
||||
>
|
||||
<TrendingUp sx={{ fontSize: 32, mb: 1 }} />
|
||||
<Typography variant="h3" fontWeight="700" sx={{ textTransform: 'capitalize' }}>
|
||||
{t(`activityTypes.${stats.mostCommonType}`)}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ opacity: 0.9, mt: 1 }}>
|
||||
{t('stats.topActivity.subtitle')}
|
||||
</Typography>
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
p: 3,
|
||||
height: '140px',
|
||||
minHeight: '140px',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
textAlign: 'center',
|
||||
bgcolor: COLORS.milestone,
|
||||
color: 'white',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ fontSize: 48, mb: 1 }} aria-hidden="true">
|
||||
<TrendingUp sx={{ fontSize: 48 }} />
|
||||
</Box>
|
||||
</Card>
|
||||
<Typography variant="h3" fontWeight={600} sx={{ textTransform: 'capitalize' }}>
|
||||
{t(`activityTypes.${stats.mostCommonType}`)}
|
||||
</Typography>
|
||||
<Typography variant="caption" sx={{ opacity: 0.9 }}>
|
||||
{t('stats.topActivity.subtitle')}
|
||||
</Typography>
|
||||
</Paper>
|
||||
</motion.div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Charts */}
|
||||
<Grid container spacing={3} sx={{ mb: 3 }}>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Card sx={{ height: '350px', minHeight: '350px', width: '100%' }}>
|
||||
<CardContent sx={{ height: '100%', display: 'flex', flexDirection: 'column', p: 2, '&:last-child': { pb: 2 } }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
|
||||
<Restaurant sx={{ mr: 1, color: COLORS.feeding }} />
|
||||
<Typography variant="h6" fontWeight="600">
|
||||
{t('charts.feedingFrequency')}
|
||||
</Typography>
|
||||
</Box>
|
||||
{/* Charts grid */}
|
||||
<Grid container spacing={3} justifyContent="center" sx={{ mb: 3 }}>
|
||||
<Grid item xs={12} md={6} sx={{ minWidth: 400 }}>
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
p: 3,
|
||||
bgcolor: 'background.paper',
|
||||
height: 400,
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" sx={{ mb: 2, display: 'flex', alignItems: 'center', gap: 1, fontWeight: 600 }}>
|
||||
<Restaurant sx={{ color: COLORS.feeding }} /> {t('charts.feedingFrequency')}
|
||||
</Typography>
|
||||
<Box sx={{ flexGrow: 1, position: 'relative' }}>
|
||||
<ResponsiveContainer width="100%" height={250}>
|
||||
<BarChart data={dailyData}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
@@ -506,19 +524,26 @@ export const InsightsDashboard: React.FC = () => {
|
||||
<Bar dataKey="feedings" fill={COLORS.feeding} name={t('charts.chartLabels.feedings')} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6}>
|
||||
<Card sx={{ height: '350px', minHeight: '350px', width: '100%' }}>
|
||||
<CardContent sx={{ height: '100%', display: 'flex', flexDirection: 'column', p: 2, '&:last-child': { pb: 2 } }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
|
||||
<Hotel sx={{ mr: 1, color: COLORS.sleep }} />
|
||||
<Typography variant="h6" fontWeight="600">
|
||||
{t('charts.sleepDuration')}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Grid item xs={12} md={6} sx={{ minWidth: 400 }}>
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
p: 3,
|
||||
bgcolor: 'background.paper',
|
||||
height: 400,
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" sx={{ mb: 2, display: 'flex', alignItems: 'center', gap: 1, fontWeight: 600 }}>
|
||||
<Hotel sx={{ color: COLORS.sleep }} /> {t('charts.sleepDuration')}
|
||||
</Typography>
|
||||
<Box sx={{ flexGrow: 1, position: 'relative' }}>
|
||||
<ResponsiveContainer width="100%" height={250}>
|
||||
<LineChart data={dailyData}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
@@ -535,20 +560,27 @@ export const InsightsDashboard: React.FC = () => {
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Grid>
|
||||
|
||||
{diaperData.length > 0 && (
|
||||
<Grid item xs={12} md={6}>
|
||||
<Card sx={{ height: '350px', minHeight: '350px', width: '100%' }}>
|
||||
<CardContent sx={{ height: '100%', display: 'flex', flexDirection: 'column', p: 2, '&:last-child': { pb: 2 } }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
|
||||
<BabyChangingStation sx={{ mr: 1, color: COLORS.diaper }} />
|
||||
<Typography variant="h6" fontWeight="600">
|
||||
{t('charts.diaperChangesByType')}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Grid item xs={12} md={6} sx={{ minWidth: 400 }}>
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
p: 3,
|
||||
bgcolor: 'background.paper',
|
||||
height: 400,
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" sx={{ mb: 2, display: 'flex', alignItems: 'center', gap: 1, fontWeight: 600 }}>
|
||||
<BabyChangingStation sx={{ color: COLORS.diaper }} /> {t('charts.diaperChangesByType')}
|
||||
</Typography>
|
||||
<Box sx={{ flexGrow: 1, position: 'relative' }}>
|
||||
<ResponsiveContainer width="100%" height={250}>
|
||||
<PieChart>
|
||||
<Pie
|
||||
@@ -568,20 +600,27 @@ export const InsightsDashboard: React.FC = () => {
|
||||
<Tooltip />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Grid>
|
||||
)}
|
||||
|
||||
<Grid item xs={12} md={diaperData.length > 0 ? 6 : 12}>
|
||||
<Card sx={{ height: '350px', minHeight: '350px', width: '100%' }}>
|
||||
<CardContent sx={{ height: '100%', display: 'flex', flexDirection: 'column', p: 2, '&:last-child': { pb: 2 } }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
|
||||
<Assessment sx={{ mr: 1, color: 'primary.main' }} />
|
||||
<Typography variant="h6" fontWeight="600">
|
||||
{t('charts.activityTimeline')}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Grid item xs={12} md={diaperData.length > 0 ? 6 : 12} sx={{ minWidth: 400 }}>
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
p: 3,
|
||||
bgcolor: 'background.paper',
|
||||
height: 400,
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" sx={{ mb: 2, display: 'flex', alignItems: 'center', gap: 1, fontWeight: 600 }}>
|
||||
<Assessment sx={{ color: 'primary.main' }} /> {t('charts.activityTimeline')}
|
||||
</Typography>
|
||||
<Box sx={{ flexGrow: 1, position: 'relative' }}>
|
||||
<ResponsiveContainer width="100%" height={250}>
|
||||
<BarChart data={dailyData}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
@@ -594,8 +633,8 @@ export const InsightsDashboard: React.FC = () => {
|
||||
<Bar dataKey="sleepHours" fill={COLORS.sleep} name={t('charts.chartLabels.sleepHours')} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
|
||||
@@ -62,20 +62,65 @@ export const AppShell = ({ children }: AppShellProps) => {
|
||||
flexDirection: 'column',
|
||||
minHeight: '100vh',
|
||||
bgcolor: 'background.default',
|
||||
pb: isMobile ? '64px' : 0, // Space for tab bar
|
||||
pb: { xs: '64px', md: 0 }, // Space for tab bar on mobile
|
||||
}}>
|
||||
{!isMobile && <MobileNav />}
|
||||
|
||||
{/* Mobile User Menu Button - Top Left */}
|
||||
{/* Mobile Header Bar */}
|
||||
{isMobile && (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'fixed',
|
||||
top: 8,
|
||||
left: 8,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: 48,
|
||||
bgcolor: 'background.paper',
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'divider',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
px: 2,
|
||||
zIndex: 1200,
|
||||
boxShadow: 1,
|
||||
}}
|
||||
>
|
||||
{/* Connection Status & Presence Indicator */}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<Tooltip title={isConnected ? t('connection.syncActive') : t('connection.syncDisconnected')}>
|
||||
<Chip
|
||||
icon={isConnected ? <Wifi /> : <WifiOff />}
|
||||
label={isConnected ? t('connection.live') : t('connection.offline')}
|
||||
size="small"
|
||||
color={isConnected ? 'success' : 'default'}
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
{isConnected && presence.count > 1 && (
|
||||
<Tooltip title={t('connection.familyMembersOnline', { count: presence.count })}>
|
||||
<Chip
|
||||
icon={<People />}
|
||||
label={presence.count}
|
||||
size="small"
|
||||
color="primary"
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* User Menu Button - Top Right */}
|
||||
<IconButton
|
||||
onClick={handleMenuOpen}
|
||||
size="small"
|
||||
@@ -83,14 +128,6 @@ export const AppShell = ({ children }: AppShellProps) => {
|
||||
aria-controls={anchorEl ? 'user-menu' : undefined}
|
||||
aria-haspopup="true"
|
||||
aria-expanded={anchorEl ? 'true' : undefined}
|
||||
sx={{
|
||||
bgcolor: 'background.paper',
|
||||
boxShadow: 1,
|
||||
'&:hover': {
|
||||
bgcolor: 'background.paper',
|
||||
boxShadow: 2,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
sx={{
|
||||
@@ -110,8 +147,8 @@ export const AppShell = ({ children }: AppShellProps) => {
|
||||
open={Boolean(anchorEl)}
|
||||
onClose={handleMenuClose}
|
||||
onClick={handleMenuClose}
|
||||
transformOrigin={{ horizontal: 'left', vertical: 'top' }}
|
||||
anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
|
||||
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
|
||||
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
|
||||
sx={{
|
||||
mt: 1,
|
||||
}}
|
||||
@@ -145,52 +182,55 @@ export const AppShell = ({ children }: AppShellProps) => {
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Connection Status & Presence Indicator */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'fixed',
|
||||
top: isMobile ? 8 : 16,
|
||||
right: isMobile ? 8 : 16,
|
||||
zIndex: 1200,
|
||||
display: 'flex',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<Tooltip title={isConnected ? t('connection.syncActive') : t('connection.syncDisconnected')}>
|
||||
<Chip
|
||||
icon={isConnected ? <Wifi /> : <WifiOff />}
|
||||
label={isConnected ? t('connection.live') : t('connection.offline')}
|
||||
size="small"
|
||||
color={isConnected ? 'success' : 'default'}
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
boxShadow: 1,
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
{isConnected && presence.count > 1 && (
|
||||
<Tooltip title={t('connection.familyMembersOnline', { count: presence.count })}>
|
||||
{/* Connection Status & Presence Indicator - Desktop Only */}
|
||||
{!isMobile && (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'fixed',
|
||||
top: 16,
|
||||
right: 16,
|
||||
zIndex: 1200,
|
||||
display: 'flex',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<Tooltip title={isConnected ? t('connection.syncActive') : t('connection.syncDisconnected')}>
|
||||
<Chip
|
||||
icon={<People />}
|
||||
label={presence.count}
|
||||
icon={isConnected ? <Wifi /> : <WifiOff />}
|
||||
label={isConnected ? t('connection.live') : t('connection.offline')}
|
||||
size="small"
|
||||
color="primary"
|
||||
color={isConnected ? 'success' : 'default'}
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
boxShadow: 1,
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{isConnected && presence.count > 1 && (
|
||||
<Tooltip title={t('connection.familyMembersOnline', { count: presence.count })}>
|
||||
<Chip
|
||||
icon={<People />}
|
||||
label={presence.count}
|
||||
size="small"
|
||||
color="primary"
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
boxShadow: 1,
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Container
|
||||
maxWidth={isTablet ? 'md' : 'lg'}
|
||||
sx={{
|
||||
flex: 1,
|
||||
px: isMobile ? 2 : 3,
|
||||
px: { xs: 2, md: 3 },
|
||||
py: 3,
|
||||
pt: { xs: '64px', md: 3 }, // Add top padding for header bar on mobile
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
||||
Reference in New Issue
Block a user