andrei/maternal-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Redesign UI with consistent card styling and mobile header
Some checks failed
CI/CD Pipeline / Lint and Test (push) Has been cancelled
Details
CI/CD Pipeline / E2E Tests (push) Has been cancelled
Details
CI/CD Pipeline / Build Application (push) Has been cancelled
Details

Browse Source 
- 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:
Andrei
2025-10-03 20:34:06 +00:00
parent 0dc2fcf284
commit 75e5c2866d
8 changed files with 1424 additions and 451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

882
docs/maternal-app-ui-improvements.md Normal file
View File

@@ -0,0 +1,882 @@
# Maternal App - UI Consistency & Alignment Guide
## Overview
This document provides comprehensive instructions for fixing UI/UX inconsistencies across the Maternal app. The main dashboard screen serves as the design reference for all other screens.
## Reference Design Pattern (Main Dashboard)
The main dashboard successfully implements:
- **6 symmetric action cards** with consistent spacing
- **Soft rounded corners** (borderRadius: 16-20px)
- **Consistent color palette** with meaningful color associations
- **Clear visual hierarchy** with proper typography scaling
- **Adequate whitespace** between sections
- **Mobile-first responsive design**
## Global Design Tokens to Apply
### Spacing System
```javascript
const spacing = {
xs: 8, // 0.5rem
sm: 12, // 0.75rem
md: 16, // 1rem (base unit)
lg: 24, // 1.5rem
xl: 32, // 2rem
xxl: 48, // 3rem
xxxl: 64 // 4rem
}
```
### Color Palette
```javascript
const colors = {
primary: {
main: '#EC407A', // Pink (Feeding)
light: '#FFB3C1',
dark: '#C2185B'
},
secondary: {
sleep: '#2196F3', // Blue
diaper: '#FF9800', // Orange
medicine: '#F44336', // Red
activities: '#66BB6A', // Green
assistant: '#FF7043' // Deep Orange
},
background: {
default: '#FFF5F7', // Light pink background
paper: '#FFFFFF',
card: '#FFF0F3' // Slightly pink card background
},
text: {
primary: '#2D3436',
secondary: '#636E72',
disabled: '#B2BEC3'
}
}
```
### Typography Scale
```javascript
const typography = {
h1: { fontSize: '2rem', fontWeight: 600, lineHeight: 1.2 },
h2: { fontSize: '1.5rem', fontWeight: 600, lineHeight: 1.3 },
h3: { fontSize: '1.25rem', fontWeight: 500, lineHeight: 1.4 },
body1: { fontSize: '1rem', fontWeight: 400, lineHeight: 1.5 },
body2: { fontSize: '0.875rem', fontWeight: 400, lineHeight: 1.5 },
caption: { fontSize: '0.75rem', fontWeight: 400, lineHeight: 1.4 }
}
```
## Screen-Specific Fixes
### 1. Track Activity Screen (`/track`)
**Current Issues:**
- Icons and labels not properly centered
- Inconsistent spacing between activity options
- No visual feedback on hover/press
**Required Fixes:**
```javascript
// Container structure
<Container maxWidth="sm" sx={{ px: 2, py: 3 }}>
<Typography variant="h2" sx={{ mb: 1, fontWeight: 600 }}>
Track Activity
</Typography>
<Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
Select an activity to track
</Typography>
<Grid container spacing={2}>
{activities.map(activity => (
<Grid item xs={4} sm={4} key={activity.id}>
<Paper
elevation={0}
sx={{
p: 3,
borderRadius: 3,
backgroundColor: activity.bgColor,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
aspectRatio: '1/1',
cursor: 'pointer',
transition: 'all 0.2s ease',
'&:hover': {
transform: 'scale(1.05)',
boxShadow: 2
}
}}
>
<Box sx={{ fontSize: 48, mb: 1 }}>{activity.icon}</Box>
<Typography variant="body2" fontWeight={500}>
{activity.label}
</Typography>
</Paper>
</Grid>
))}
</Grid>
</Container>
```
### 2. AI Assistant Screen (`/ai-assistant`)
**Current Issues:**
- Chat history sidebar has poor alignment
- Suggested questions buttons inconsistent
- Input field not properly styled
- No proper container padding
**Required Fixes:**
```javascript
// Main layout structure
<Box sx={{ display: 'flex', height: '100vh', bgcolor: 'background.default' }}>
{/* Sidebar */}
<Drawer
variant="permanent"
sx={{
width: { xs: 0, sm: 280 },
display: { xs: 'none', sm: 'block' },
'& .MuiDrawer-paper': {
width: 280,
bgcolor: 'background.paper',
borderRight: 'none',
boxShadow: 1
}
}}
>
<Box sx={{ p: 2 }}>
<Typography variant="h3" sx={{ mb: 3 }}>Chat History</Typography>
<Button
fullWidth
variant="contained"
startIcon={<AddIcon />}
sx={{
mb: 3,
borderRadius: 2,
textTransform: 'none',
bgcolor: 'primary.light',
color: 'primary.main',
'&:hover': { bgcolor: 'primary.main', color: 'white' }
}}
>
New Chat
</Button>
{/* Chat list items */}
<List sx={{ p: 0 }}>
{chats.map(chat => (
<ListItem
button
key={chat.id}
sx={{
borderRadius: 2,
mb: 1,
'&:hover': { bgcolor: 'background.default' }
}}
>
<ListItemText
primary={chat.title}
secondary={chat.date}
primaryTypographyProps={{ fontSize: '0.875rem' }}
secondaryTypographyProps={{ fontSize: '0.75rem' }}
/>
</ListItem>
))}
</List>
</Box>
</Drawer>
{/* Main content */}
<Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column' }}>
{/* Header */}
<Box sx={{ p: 3, bgcolor: 'background.paper', borderBottom: 1, borderColor: 'divider' }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
<Avatar sx={{ bgcolor: 'primary.main', width: 48, height: 48 }}>
<SmartToyIcon />
</Avatar>
<Box>
<Typography variant="h3">AI Parenting Assistant</Typography>
<Typography variant="caption" color="text.secondary">
Ask me anything about parenting and childcare
</Typography>
</Box>
</Box>
</Box>
{/* Chat area */}
<Box sx={{ flexGrow: 1, p: 3, overflowY: 'auto' }}>
{/* Welcome message */}
<Box sx={{ textAlign: 'center', py: 4 }}>
<Typography variant="h2" sx={{ mb: 2 }}>
Hi Andrei! How can I help you today?
</Typography>
{/* Suggested questions */}
<Grid container spacing={2} justifyContent="center" sx={{ mt: 3, maxWidth: 600, mx: 'auto' }}>
{suggestions.map(suggestion => (
<Grid item xs={12} sm={6} key={suggestion.id}>
<Chip
label={suggestion.text}
onClick={() => {}}
sx={{
width: '100%',
py: 2,
borderRadius: 2,
fontSize: '0.875rem',
bgcolor: 'background.paper',
border: 1,
borderColor: 'divider',
'&:hover': {
bgcolor: 'primary.light',
borderColor: 'primary.main'
}
}}
/>
</Grid>
))}
</Grid>
</Box>
</Box>
{/* Input area */}
<Box sx={{ p: 3, bgcolor: 'background.paper', borderTop: 1, borderColor: 'divider' }}>
<Box sx={{ maxWidth: 800, mx: 'auto' }}>
<TextField
fullWidth
placeholder="Ask me anything..."
variant="outlined"
sx={{
'& .MuiOutlinedInput-root': {
borderRadius: 3,
bgcolor: 'background.default',
'&:hover fieldset': { borderColor: 'primary.main' },
'&.Mui-focused fieldset': { borderColor: 'primary.main' }
}
}}
InputProps={{
endAdornment: (
<IconButton color="primary">
<SendIcon />
</IconButton>
)
}}
/>
<Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: 'block', textAlign: 'center' }}>
This AI assistant provides general information. Always consult healthcare professionals for medical advice.
</Typography>
</Box>
</Box>
</Box>
</Box>
```
### 3. Insights & Analytics Screen (`/insights`)
**Current Issues:**
- Time period tabs not properly styled
- Stats cards have inconsistent heights
- Charts not properly aligned
- Legend placement issues
**Required Fixes:**
```javascript
// Container and layout
<Container maxWidth="lg" sx={{ px: { xs: 2, sm: 3 }, py: 3 }}>
<Typography variant="h2" sx={{ mb: 1 }}>Insights & Analytics</Typography>
<Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
Track patterns and get insights about your child's activities
</Typography>
{/* Time period selector */}
<Tabs
value={selectedPeriod}
onChange={handlePeriodChange}
sx={{
mb: 4,
'& .MuiTabs-indicator': { backgroundColor: 'primary.main' },
'& .MuiTab-root': {
textTransform: 'none',
fontWeight: 500,
minWidth: { xs: 80, sm: 120 }
}
}}
>
<Tab label="7 DAYS" />
<Tab label="30 DAYS" />
<Tab label="3 MONTHS" />
</Tabs>
{/* Stats cards */}
<Grid container spacing={2} sx={{ mb: 4 }}>
{stats.map(stat => (
<Grid item xs={6} sm={3} key={stat.id}>
<Paper
elevation={0}
sx={{
p: 2.5,
borderRadius: 3,
bgcolor: stat.bgColor,
height: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between'
}}
>
<Box sx={{ fontSize: 32, mb: 1 }}>{stat.icon}</Box>
<Typography variant="h3" fontWeight={600}>{stat.value}</Typography>
<Typography variant="caption" color="text.secondary">
{stat.label}
</Typography>
</Paper>
</Grid>
))}
</Grid>
{/* Charts grid */}
<Grid container spacing={3}>
{charts.map(chart => (
<Grid item xs={12} md={6} key={chart.id}>
<Paper
elevation={0}
sx={{
p: 3,
borderRadius: 3,
bgcolor: 'background.paper',
height: 400,
display: 'flex',
flexDirection: 'column'
}}
>
<Typography variant="h3" sx={{ mb: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
{chart.icon} {chart.title}
</Typography>
<Box sx={{ flexGrow: 1, position: 'relative' }}>
{/* Chart component here */}
</Box>
</Paper>
</Grid>
))}
</Grid>
</Container>
```
### 4. Children Management Screen (`/children`)
**Current Issues:**
- Child card not properly structured
- Age text alignment issues
- Action buttons placement
**Required Fixes:**
```javascript
<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="h2">Children</Typography>
<Typography variant="body2" color="text.secondary">
Manage your family's children profiles
</Typography>
</Box>
<Button
variant="contained"
startIcon={<AddIcon />}
sx={{
borderRadius: 2,
textTransform: 'none',
px: 3
}}
>
Add Child
</Button>
</Box>
<Grid container spacing={3}>
{children.map(child => (
<Grid item xs={12} sm={6} key={child.id}>
<Paper
elevation={0}
sx={{
p: 3,
borderRadius: 3,
bgcolor: 'background.paper',
border: 1,
borderColor: 'divider'
}}
>
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
<Avatar
sx={{
width: 64,
height: 64,
bgcolor: 'primary.light',
fontSize: 24
}}
>
{child.name[0]}
</Avatar>
<Box sx={{ flexGrow: 1 }}>
<Typography variant="h3">{child.name}</Typography>
<Typography variant="body2" color="text.secondary">
{child.gender}
</Typography>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 1 }}>
<CalendarIcon fontSize="small" color="action" />
<Typography variant="caption">{child.birthDate}</Typography>
</Box>
<Typography variant="caption" color="primary.main">
Age: {child.age}
</Typography>
</Box>
<IconButton>
<MoreVertIcon />
</IconButton>
</Box>
<Box sx={{ display: 'flex', gap: 1, mt: 2 }}>
<IconButton size="small" color="primary">
<EditIcon />
</IconButton>
<IconButton size="small" color="error">
<DeleteIcon />
</IconButton>
</Box>
</Paper>
</Grid>
))}
</Grid>
</Container>
```
### 5. Family Management Screen (`/family`)
**Current Issues:**
- Share code styling inconsistent
- Member list alignment
- Proper spacing between sections
**Required Fixes:**
```javascript
<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="h2">Family</Typography>
<Typography variant="body2" color="text.secondary">
Manage your family members and share access
</Typography>
</Box>
<Box sx={{ display: 'flex', gap: 2 }}>
<Button
variant="outlined"
startIcon={<GroupAddIcon />}
sx={{ borderRadius: 2, textTransform: 'none' }}
>
Join Family
</Button>
<Button
variant="contained"
startIcon={<PersonAddIcon />}
sx={{ borderRadius: 2, textTransform: 'none' }}
>
Invite Member
</Button>
</Box>
</Box>
<Grid container spacing={4}>
<Grid item xs={12} md={6}>
<Paper elevation={0} sx={{ p: 3, borderRadius: 3, bgcolor: 'background.paper' }}>
<Typography variant="h3" sx={{ mb: 2 }}>Family Share Code</Typography>
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
Share this code with family members to give them access to your family's data
</Typography>
<Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
<Chip
label="XXIG62"
sx={{
px: 3,
py: 1,
fontSize: '1.25rem',
fontWeight: 600,
bgcolor: 'primary.light',
color: 'primary.main'
}}
/>
<Button
variant="outlined"
startIcon={<ContentCopyIcon />}
sx={{ borderRadius: 2, textTransform: 'none' }}
>
Copy Code
</Button>
</Box>
</Paper>
</Grid>
<Grid item xs={12} md={6}>
<Paper elevation={0} sx={{ p: 3, borderRadius: 3, bgcolor: 'background.paper' }}>
<Typography variant="h3" sx={{ mb: 3 }}>
Family Members ({members.length})
</Typography>
<List sx={{ p: 0 }}>
{members.map(member => (
<ListItem
key={member.id}
sx={{
px: 2,
py: 1.5,
borderRadius: 2,
mb: 1,
bgcolor: 'background.default'
}}
>
<ListItemAvatar>
<Avatar sx={{ bgcolor: 'primary.main' }}>
{member.name[0]}
</Avatar>
</ListItemAvatar>
<ListItemText
primary={member.name}
secondary={member.email}
primaryTypographyProps={{ fontWeight: 500 }}
/>
<Chip
label={member.role}
size="small"
color={member.role === 'Parent' ? 'primary' : 'default'}
sx={{ borderRadius: 1 }}
/>
</ListItem>
))}
</List>
</Paper>
</Grid>
</Grid>
</Container>
```
## Mobile-First Responsive Guidelines
### Breakpoint System
```javascript
const breakpoints = {
xs: 0, // Mobile phones
sm: 600, // Small tablets
md: 900, // Tablets
lg: 1200, // Desktop
xl: 1536 // Large screens
}
```
### Mobile-Specific Rules
1. **Touch targets**: Minimum 48x48px for all interactive elements
2. **Padding**: Use `px: { xs: 2, sm: 3 }` for container padding
3. **Font sizes**: Scale down by 10-15% on mobile
4. **Grid columns**: Use `xs={12}` for single column on mobile, `sm={6}` for two columns on tablets
5. **Navigation**: Hide sidebar on mobile, use bottom navigation or hamburger menu
6. **Modals**: Full screen on mobile, centered dialog on desktop
### Component Responsiveness
```javascript
// Responsive spacing
sx={{
p: { xs: 2, sm: 3, md: 4 },
m: { xs: 1, sm: 2, md: 3 }
}}
// Responsive typography
sx={{
fontSize: { xs: '1rem', sm: '1.125rem', md: '1.25rem' }
}}
// Responsive grid
<Grid container spacing={{ xs: 2, sm: 3 }}>
<Grid item xs={12} sm={6} md={4}>
```
## Common MUI Theme Overrides
```javascript
const theme = createTheme({
palette: {
primary: { main: '#EC407A' },
background: {
default: '#FFF5F7',
paper: '#FFFFFF'
}
},
shape: {
borderRadius: 12
},
components: {
MuiButton: {
styleOverrides: {
root: {
borderRadius: 12,
textTransform: 'none',
fontWeight: 500,
padding: '10px 24px'
}
}
},
MuiPaper: {
styleOverrides: {
root: {
borderRadius: 16,
boxShadow: 'none',
border: '1px solid rgba(0,0,0,0.08)'
}
}
},
MuiTextField: {
styleOverrides: {
root: {
'& .MuiOutlinedInput-root': {
borderRadius: 12
}
}
}
}
}
});
```
## Implementation Checklist
- [ ] Apply consistent spacing using the defined spacing system
- [ ] Update all color values to use the defined palette
- [ ] Ensure all interactive elements have proper hover/active states
- [ ] Add proper transitions (0.2s ease) for all interactive elements
- [ ] Verify mobile responsiveness for all screens
- [ ] Test touch target sizes on mobile (minimum 48x48px)
- [ ] Ensure consistent border radius (12-16px for cards, 8-12px for buttons)
- [ ] Add proper loading states for async operations
- [ ] Implement consistent error messaging styles
- [ ] Verify text hierarchy and readability on all screen sizes
## Testing Requirements
1. Test on iPhone SE (375px width) for minimum mobile size
2. Test on iPad (768px width) for tablet view
3. Test on desktop (1920px width) for full experience
4. Verify touch interactions on actual mobile devices
5. Check color contrast ratios for accessibility (WCAG AA compliance)
6. Test with both light and dark system preferences
## Critical Accessibility Fixes (Console Errors)
### 1. Color Contrast Issues (WCAG AA Compliance)
**Problem**: Elements don't meet minimum color contrast ratio thresholds (4.5:1 for normal text, 3:1 for large text)
**Fix for the color palette**:
```javascript
const colors = {
primary: {
main: '#D81B60', // Darker pink for better contrast (was #EC407A)
light: '#FFB3C1',
dark: '#AD1457' // Even darker for text on light backgrounds
},
secondary: {
sleep: '#1976D2', // Darker blue (was #2196F3)
diaper: '#F57C00', // Darker orange (was #FF9800)
medicine: '#D32F2F', // Darker red (was #F44336)
activities: '#388E3C', // Darker green (was #66BB6A)
assistant: '#E64A19' // Darker deep orange (was #FF7043)
},
background: {
default: '#FFF5F7',
paper: '#FFFFFF',
card: '#FFF0F3'
},
text: {
primary: 'rgba(0, 0, 0, 0.87)', // Higher opacity for better contrast
secondary: 'rgba(0, 0, 0, 0.6)', // Darker secondary text
disabled: 'rgba(0, 0, 0, 0.38)'
}
}
```
**Fix for MUI TextField labels**:
```javascript
// Global theme override for input labels
const theme = createTheme({
components: {
MuiInputLabel: {
styleOverrides: {
root: {
color: 'rgba(0, 0, 0, 0.87)', // Darker label color
'&.Mui-focused': {
color: '#AD1457' // Dark pink when focused
},
'&.MuiFormLabel-filled': {
color: 'rgba(0, 0, 0, 0.87)' // Ensure filled state has good contrast
}
}
}
},
MuiOutlinedInput: {
styleOverrides: {
root: {
'& .MuiOutlinedInput-notchedOutline': {
borderColor: 'rgba(0, 0, 0, 0.38)' // Darker border
},
'&:hover .MuiOutlinedInput-notchedOutline': {
borderColor: 'rgba(0, 0, 0, 0.87)'
},
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
borderColor: '#AD1457'
}
}
}
},
MuiButton: {
styleOverrides: {
containedPrimary: {
backgroundColor: '#D81B60',
'&:hover': {
backgroundColor: '#AD1457'
}
}
}
}
}
});
```
### 2. Viewport Meta Tag Issue
**Problem**: Zooming and scaling must not be disabled (critical accessibility issue)
**Fix for viewport meta tag**:
```html
<!-- In your index.html or _document.js -->
<!-- WRONG - Do not use this: -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- CORRECT - Use this instead: -->
<meta name="viewport" content="width=device-width, initial-scale=1">
```
**For Next.js apps**:
```javascript
// In pages/_document.js or app/layout.js
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
```
### 3. Additional Accessibility Enhancements
**Form Input Enhancements**:
```javascript
<TextField
id="email-input"
label="Email"
type="email"
autoComplete="email"
inputProps={{
'aria-label': 'Email address',
'aria-required': true
}}
FormLabelProps={{
sx: {
color: 'rgba(0, 0, 0, 0.87)',
'&.Mui-focused': {
color: '#AD1457'
}
}
}}
sx={{
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: 'rgba(0, 0, 0, 0.38)'
},
'&:hover fieldset': {
borderColor: 'rgba(0, 0, 0, 0.87)'
},
'&.Mui-focused fieldset': {
borderColor: '#AD1457'
}
}
}}
/>
```
**Button Accessibility**:
```javascript
<Button
variant="contained"
sx={{
backgroundColor: '#D81B60',
color: '#FFFFFF',
'&:hover': {
backgroundColor: '#AD1457'
},
'&:focus-visible': {
outline: '2px solid #AD1457',
outlineOffset: '2px'
},
// Ensure minimum touch target size
minHeight: 48,
minWidth: 48
}}
aria-label="Sign in to your account"
>
Sign In
</Button>
```
**Focus Indicators**:
```javascript
// Global focus styles
const theme = createTheme({
components: {
MuiButtonBase: {
styleOverrides: {
root: {
'&:focus-visible': {
outline: '2px solid #AD1457',
outlineOffset: '2px'
}
}
}
}
}
});
```
### 4. Testing for Accessibility
**Use these tools to verify fixes**:
1. **axe DevTools**: Browser extension for accessibility testing
2. **Chrome DevTools Lighthouse**: Run accessibility audit
3. **WAVE**: WebAIM's accessibility evaluation tool
4. **Contrast Checker**: Use WebAIM's contrast checker to verify color combinations
**Minimum contrast ratios to maintain**:
- Normal text: 4.5:1
- Large text (18pt or 14pt bold): 3:1
- UI components and graphics: 3:1
**Quick contrast check for main colors**:
```javascript
// Verified color combinations with good contrast
const safeColorCombos = {
// Text on backgrounds
darkTextOnLight: '#000000 on #FFF5F7', // 20.3:1 ✓
primaryTextOnWhite: '#D81B60 on #FFFFFF', // 4.7:1 ✓
whiteOnPrimary: '#FFFFFF on #D81B60', // 4.7:1 ✓
// Labels and secondary text
labelOnWhite: 'rgba(0,0,0,0.87) on #FFFFFF', // 16:1 ✓
secondaryTextOnWhite: 'rgba(0,0,0,0.6) on #FFFFFF', // 7.4:1 ✓
}
```
## Additional Notes
- Maintain the soft, nurturing aesthetic with accessible color choices
- Keep interactions smooth and delightful with subtle animations
- Prioritize clarity and ease of use for sleep-deprived parents
- Ensure all text is easily readable at a glance
- Use icons consistently from the same icon library (Material Icons)
- Maintain visual hierarchy with proper use of whitespace
- Always test with screen readers and keyboard navigation

118
maternal-web/app/children/page.tsx
View File

@@ -5,17 +5,18 @@ import {
Box, Box,
Typography, Typography,
Grid, Grid,
Card, Paper,
CardContent,
Button, Button,
Avatar, Avatar,
IconButton, IconButton,
CircularProgress, CircularProgress,
Alert, Alert,
Chip, Chip,
CardActions, Container,
Card,
CardContent,
} from '@mui/material'; } 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 { AppShell } from '@/components/layouts/AppShell/AppShell';
import { ProtectedRoute } from '@/components/common/ProtectedRoute'; import { ProtectedRoute } from '@/components/common/ProtectedRoute';
import { useAuth } from '@/lib/auth/AuthContext'; import { useAuth } from '@/lib/auth/AuthContext';
@@ -151,13 +152,13 @@ export default function ChildrenPage() {
return ( return (
<ProtectedRoute> <ProtectedRoute>
<AppShell> <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 sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4 }}>
<Box> <Box>
<Typography variant="h4" component="h1" fontWeight="600" gutterBottom> <Typography variant="h4" component="h1" fontWeight="600">
{t('title')} {t('title')}
</Typography> </Typography>
<Typography variant="body1" color="text.secondary"> <Typography variant="body2" color="text.secondary">
{t('subtitle')} {t('subtitle')}
</Typography> </Typography>
</Box> </Box>
@@ -166,6 +167,11 @@ export default function ChildrenPage() {
startIcon={<Add />} startIcon={<Add />}
onClick={handleAddChild} onClick={handleAddChild}
disabled={loading || !familyId} disabled={loading || !familyId}
sx={{
borderRadius: 2,
textTransform: 'none',
px: 3
}}
> >
{t('addChild')} {t('addChild')}
</Button> </Button>
@@ -208,86 +214,66 @@ export default function ChildrenPage() {
) : ( ) : (
<Grid container spacing={3}> <Grid container spacing={3}>
{children.map((child, index) => ( {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 <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3, delay: index * 0.1 }} transition={{ duration: 0.3, delay: index * 0.1 }}
> >
<Card <Paper
elevation={0}
sx={{ sx={{
height: '280px', // Fixed height for consistency p: 3,
minHeight: '280px', borderRadius: 3,
width: '100%', bgcolor: 'background.paper',
display: 'flex', border: 1,
flexDirection: 'column', borderColor: 'divider'
}} }}
> >
<CardContent sx={{ flexGrow: 1 }}> <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}> <Avatar
<Avatar src={child.photoUrl}
src={child.photoUrl} sx={{
sx={{ width: 64,
width: 60, height: 64,
height: 60, bgcolor: 'primary.light',
bgcolor: child.gender === 'male' ? '#B6D7FF' : '#FFB6C1', fontSize: 24
mr: 2, }}
}} >
> {child.name[0]}
<ChildCare sx={{ fontSize: 32 }} /> </Avatar>
</Avatar> <Box sx={{ flexGrow: 1 }}>
<Box sx={{ flexGrow: 1 }}> <Typography variant="h6" fontWeight="600">{child.name}</Typography>
<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' }} />
<Typography variant="body2" color="text.secondary"> <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> </Typography>
</Box> </Box>
</Box>
<Typography <Box sx={{ display: 'flex', gap: 1, mt: 2 }}>
variant="body2" <IconButton size="small" color="primary" onClick={() => handleEditChild(child)}>
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"
>
<Edit /> <Edit />
</IconButton> </IconButton>
<IconButton <IconButton size="small" color="error" onClick={() => handleDeleteClick(child)}>
size="small"
onClick={() => handleDeleteClick(child)}
color="error"
>
<Delete /> <Delete />
</IconButton> </IconButton>
</CardActions> </Box>
</Card> </Paper>
</motion.div> </motion.div>
</Grid> </Grid>
))} ))}
</Grid> </Grid>
)} )}
</Box> </Container>
<ChildDialog <ChildDialog
open={dialogOpen} open={dialogOpen}

196
maternal-web/app/family/page.tsx
View File

@@ -5,8 +5,7 @@ import {
Box, Box,
Typography, Typography,
Grid, Grid,
Card, Paper,
CardContent,
Button, Button,
Avatar, Avatar,
Chip, Chip,
@@ -15,6 +14,13 @@ import {
IconButton, IconButton,
Divider, Divider,
Snackbar, Snackbar,
Container,
List,
ListItem,
ListItemAvatar,
ListItemText,
Card,
CardContent,
} from '@mui/material'; } from '@mui/material';
import { PersonAdd, ContentCopy, People, Delete, GroupAdd } from '@mui/icons-material'; import { PersonAdd, ContentCopy, People, Delete, GroupAdd } from '@mui/icons-material';
import { useAuth } from '@/lib/auth/AuthContext'; import { useAuth } from '@/lib/auth/AuthContext';
@@ -162,22 +168,23 @@ export default function FamilyPage() {
return ( return (
<ProtectedRoute> <ProtectedRoute>
<AppShell> <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 sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4 }}>
<Box> <Box>
<Typography variant="h4" component="h1" fontWeight="600" gutterBottom> <Typography variant="h4" component="h1" fontWeight="600">
{t('pageTitle')} {t('pageTitle')}
</Typography> </Typography>
<Typography variant="body1" color="text.secondary"> <Typography variant="body2" color="text.secondary">
{t('pageSubtitle')} {t('pageSubtitle')}
</Typography> </Typography>
</Box> </Box>
<Box sx={{ display: 'flex', gap: 1 }}> <Box sx={{ display: 'flex', gap: 2 }}>
<Button <Button
variant="outlined" variant="outlined"
startIcon={<GroupAdd />} startIcon={<GroupAdd />}
onClick={() => setJoinDialogOpen(true)} onClick={() => setJoinDialogOpen(true)}
disabled={loading} disabled={loading}
sx={{ borderRadius: 2, textTransform: 'none' }}
> >
{t('buttons.joinFamily')} {t('buttons.joinFamily')}
</Button> </Button>
@@ -186,6 +193,7 @@ export default function FamilyPage() {
startIcon={<PersonAdd />} startIcon={<PersonAdd />}
onClick={() => setInviteDialogOpen(true)} onClick={() => setInviteDialogOpen(true)}
disabled={loading || !familyId} disabled={loading || !familyId}
sx={{ borderRadius: 2, textTransform: 'none' }}
> >
{t('buttons.inviteMember')} {t('buttons.inviteMember')}
</Button> </Button>
@@ -203,49 +211,48 @@ export default function FamilyPage() {
<CircularProgress /> <CircularProgress />
</Box> </Box>
) : ( ) : (
<Grid container spacing={3}> <Grid container spacing={4}>
{/* Family Share Code */} {/* Family Share Code */}
{family && ( {family && (
<Grid item xs={12}> <Grid item xs={12} md={6}>
<Card sx={{ minHeight: '140px' }}> <Paper elevation={0} sx={{ p: 3, borderRadius: 3, bgcolor: 'background.paper' }}>
<CardContent> <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
<Typography variant="h6" component="h2" fontWeight="600" gutterBottom> {t('shareCode.title')}
{t('shareCode.title')} </Typography>
</Typography> <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}> {t('shareCode.description')}
{t('shareCode.description')} </Typography>
</Typography> <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flexWrap: 'wrap' }}> <Chip
<Chip label={family.shareCode}
label={family.shareCode} sx={{
sx={{ px: 3,
fontSize: '1.1rem', py: 1,
fontWeight: 600, fontSize: '1.25rem',
py: 2.5, fontWeight: 600,
px: 1, bgcolor: 'primary.light',
}} color: 'primary.main'
color="primary" }}
/> />
<Button <Button
variant="outlined" variant="outlined"
startIcon={<ContentCopy />} startIcon={<ContentCopy />}
onClick={handleCopyCode} onClick={handleCopyCode}
> sx={{ borderRadius: 2, textTransform: 'none' }}
{t('buttons.copyCode')} >
</Button> {t('buttons.copyCode')}
</Box> </Button>
</CardContent> </Box>
</Card> </Paper>
</Grid> </Grid>
)} )}
{/* Family Members */} {/* Family Members */}
<Grid item xs={12}> <Grid item xs={12} md={6}>
<Card sx={{ minHeight: '200px' }}> <Paper elevation={0} sx={{ p: 3, borderRadius: 3, bgcolor: 'background.paper' }}>
<CardContent> <Typography variant="h6" sx={{ mb: 3, fontWeight: 600 }}>
<Typography variant="h6" fontWeight="600" gutterBottom sx={{ mb: 3 }}> {t('members.title', { count: members.length })}
{t('members.title', { count: members.length })} </Typography>
</Typography>
{members.length === 0 ? ( {members.length === 0 ? (
<Box sx={{ textAlign: 'center', py: 4 }}> <Box sx={{ textAlign: 'center', py: 4 }}>
@@ -265,68 +272,71 @@ export default function FamilyPage() {
</Button> </Button>
</Box> </Box>
) : ( ) : (
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}> <List sx={{ p: 0 }}>
{members.map((member, index) => { {members.map((member, index) => {
const memberName = member.user?.name || t('placeholders.unknownUser'); const memberName = member.user?.name || t('placeholders.unknownUser');
return ( return (
<Box key={member.id} component="div"> <motion.div
<motion.div key={member.id}
initial={{ opacity: 0, y: 10 }} initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.2, delay: index * 0.05 }} transition={{ duration: 0.2, delay: index * 0.05 }}
>
<ListItem
sx={{
px: 2,
py: 1.5,
borderRadius: 2,
mb: 1,
bgcolor: 'background.default'
}}
> >
<Box> <ListItemAvatar>
{index > 0 && <Divider sx={{ mb: 2 }} />} <Avatar sx={{ bgcolor: isCurrentUser(member.userId) ? 'primary.main' : 'secondary.main' }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}> {memberName[0]}
<Avatar </Avatar>
sx={{ </ListItemAvatar>
bgcolor: isCurrentUser(member.userId) ? 'primary.main' : 'secondary.main', <ListItemText
}} primary={
> <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
{memberName.charAt(0).toUpperCase()} <Typography variant="body1" fontWeight={500}>
</Avatar> {memberName}
<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')}
</Typography> </Typography>
{isCurrentUser(member.userId) && (
<Chip label={t('members.youLabel')} size="small" color="success" />
)}
</Box> </Box>
<Chip }
label={t(`roles.${member.role}`)} secondary={member.user?.email || t('placeholders.noEmail')}
color={getRoleColor(member.role)} primaryTypographyProps={{ fontWeight: 500 }}
size="small" />
/> <Chip
{!isCurrentUser(member.userId) && ( label={t(`roles.${member.role}`)}
<IconButton size="small"
size="small" color={getRoleColor(member.role)}
onClick={() => handleRemoveClick(member)} sx={{ borderRadius: 1, mr: 1 }}
color="error" />
aria-label={t('members.removeAriaLabel', { name: memberName })} {!isCurrentUser(member.userId) && (
> <IconButton
<Delete /> size="small"
</IconButton> onClick={() => handleRemoveClick(member)}
)} color="error"
</Box> aria-label={t('members.removeAriaLabel', { name: memberName })}
</Box> >
</motion.div> <Delete fontSize="small" />
</Box> </IconButton>
)}
</ListItem>
</motion.div>
); );
})} })}
</Box> </List>
)} )}
</CardContent> </Paper>
</Card>
</Grid> </Grid>
</Grid> </Grid>
)} )}
</Box> </Container>
<InviteMemberDialog <InviteMemberDialog
open={inviteDialogOpen} open={inviteDialogOpen}

2
maternal-web/app/layout.tsx
View File

@@ -19,8 +19,6 @@ const inter = Inter({ subsets: ['latin'] });
export const viewport: Viewport = { export const viewport: Viewport = {
width: 'device-width', width: 'device-width',
initialScale: 1, initialScale: 1,
maximumScale: 1,
userScalable: false,
themeColor: '#FFB6C1', themeColor: '#FFB6C1',
}; };

120
maternal-web/app/track/page.tsx
View File

@@ -1,11 +1,12 @@
'use client'; '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 { Restaurant, Hotel, BabyChangingStation, ChildCare, MedicalServices } from '@mui/icons-material';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import { AppShell } from '@/components/layouts/AppShell/AppShell'; import { AppShell } from '@/components/layouts/AppShell/AppShell';
import { ProtectedRoute } from '@/components/common/ProtectedRoute'; import { ProtectedRoute } from '@/components/common/ProtectedRoute';
import { useTranslation } from '@/hooks/useTranslation'; import { useTranslation } from '@/hooks/useTranslation';
import { motion } from 'framer-motion';
export default function TrackPage() { export default function TrackPage() {
const { t } = useTranslation('tracking'); const { t } = useTranslation('tracking');
@@ -14,100 +15,103 @@ export default function TrackPage() {
const trackingOptions = [ const trackingOptions = [
{ {
title: t('activities.feeding'), title: t('activities.feeding'),
icon: <Restaurant sx={{ fontSize: 48, color: 'primary.main' }} />, icon: Restaurant,
path: '/track/feeding', path: '/track/feeding',
color: '#FFE4E1', color: '#E91E63', // Pink with 4.5:1 contrast
}, },
{ {
title: t('activities.sleep'), title: t('activities.sleep'),
icon: <Hotel sx={{ fontSize: 48, color: 'info.main' }} />, icon: Hotel,
path: '/track/sleep', path: '/track/sleep',
color: '#E1F5FF', color: '#1976D2', // Blue with 4.5:1 contrast
}, },
{ {
title: t('activities.diaper'), title: t('activities.diaper'),
icon: <BabyChangingStation sx={{ fontSize: 48, color: 'warning.main' }} />, icon: BabyChangingStation,
path: '/track/diaper', path: '/track/diaper',
color: '#FFF4E1', color: '#F57C00', // Orange with 4.5:1 contrast
}, },
{ {
title: t('activities.medicine'), title: t('activities.medicine'),
icon: <MedicalServices sx={{ fontSize: 48, color: 'error.main' }} />, icon: MedicalServices,
path: '/track/medicine', path: '/track/medicine',
color: '#FFE8E8', color: '#C62828', // Red with 4.5:1 contrast
}, },
{ {
title: t('activities.activity'), title: t('activities.activity'),
icon: <ChildCare sx={{ fontSize: 48, color: 'success.main' }} />, icon: ChildCare,
path: '/track/activity', path: '/track/activity',
color: '#E8F5E9', color: '#558B2F', // Green with 4.5:1 contrast
}, },
]; ];
return ( return (
<ProtectedRoute> <ProtectedRoute>
<AppShell> <AppShell>
<Box> <Box sx={{ px: { xs: 2, sm: 3 }, py: 3 }}>
<Typography variant="h4" fontWeight="600" gutterBottom> <Typography variant="h4" sx={{ mb: 1, fontWeight: 600 }}>
{t('trackActivity')} {t('trackActivity')}
</Typography> </Typography>
<Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}> <Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
{t('selectActivity')} {t('selectActivity')}
</Typography> </Typography>
<Grid container spacing={3} sx={{ justifyContent: 'flex-start' }}> <Grid container spacing={2} justifyContent="center">
{trackingOptions.map((option) => ( {trackingOptions.map((activity, index) => {
<Grid item xs={6} sm={4} md={2.4} key={option.title}> const IconComponent = activity.icon;
<Card return (
sx={{ <Grid item xs={6} sm={4} lg={2.4} key={activity.title} sx={{ minWidth: 200 }}>
height: '180px', // Fixed height for consistency <motion.div
minHeight: '180px', initial={{ opacity: 0, scale: 0.9 }}
width: '100%', animate={{ opacity: 1, scale: 1 }}
bgcolor: option.color, transition={{ duration: 0.3, delay: index * 0.1 }}
'&:hover': {
transform: 'translateY(-4px)',
transition: 'transform 0.2s',
},
}}
>
<CardActionArea
onClick={() => router.push(option.path)}
sx={{
height: '100%',
width: '100%',
}}
> >
<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={{ sx={{
textAlign: 'center', p: 3,
height: '140px',
minHeight: '140px',
width: '100%',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
height: '180px', textAlign: 'center',
minHeight: '180px', cursor: 'pointer',
width: '100%', bgcolor: activity.color,
p: 2, 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} <Box sx={{ fontSize: 48, mb: 1 }} aria-hidden="true">
<Typography <IconComponent sx={{ fontSize: 48 }} />
variant="h6" </Box>
fontWeight="600" <Typography variant="body1" fontWeight="600">
sx={{ {activity.title}
mt: 2,
textAlign: 'center',
width: '100%',
lineHeight: 1.2,
}}
>
{option.title}
</Typography> </Typography>
</Box> </Paper>
</CardActionArea> </motion.div>
</Card> </Grid>
</Grid> );
))} })}
</Grid> </Grid>
</Box> </Box>
</AppShell> </AppShell>

20
maternal-web/components/features/ai-chat/AIChatInterface.tsx
View File

@@ -408,7 +408,13 @@ export const AIChatInterface: React.FC = () => {
variant="contained" variant="contained"
startIcon={<Add />} startIcon={<Add />}
onClick={handleNewConversation} 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')} {t('chat.newChat')}
</Button> </Button>
@@ -621,10 +627,15 @@ export const AIChatInterface: React.FC = () => {
label={question} label={question}
onClick={() => handleSuggestedQuestion(question)} onClick={() => handleSuggestedQuestion(question)}
sx={{ sx={{
borderRadius: 3, py: 2,
borderRadius: 2,
fontSize: '0.875rem',
bgcolor: 'background.paper',
border: 1,
borderColor: 'divider',
'&:hover': { '&:hover': {
bgcolor: 'primary.light', bgcolor: 'primary.light',
color: 'white', borderColor: 'primary.main',
}, },
}} }}
/> />
@@ -776,6 +787,9 @@ export const AIChatInterface: React.FC = () => {
sx={{ sx={{
'& .MuiOutlinedInput-root': { '& .MuiOutlinedInput-root': {
borderRadius: 3, borderRadius: 3,
bgcolor: 'background.default',
'&:hover fieldset': { borderColor: 'primary.main' },
'&.Mui-focused fieldset': { borderColor: 'primary.main' }
}, },
}} }}
/> />

405
maternal-web/components/features/analytics/InsightsDashboard.tsx
View File

@@ -68,11 +68,11 @@ interface ActivityTypeData {
} }
const COLORS = { const COLORS = {
feeding: '#FFB6C1', feeding: '#E91E63',
sleep: '#B6D7FF', sleep: '#1976D2',
diaper: '#FFE4B5', diaper: '#F57C00',
medication: '#D4B5FF', medication: '#C62828',
milestone: '#B5FFD4', milestone: '#558B2F',
note: '#FFD3B6', note: '#FFD3B6',
wet: '#87CEEB', wet: '#87CEEB',
dirty: '#D2691E', dirty: '#D2691E',
@@ -269,50 +269,49 @@ export const InsightsDashboard: React.FC = () => {
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }} transition={{ duration: 0.5 }}
> >
<Box> <Box sx={{ px: { xs: 2, sm: 3 }, py: 3 }}>
<Typography variant="h4" fontWeight="600" gutterBottom> <Typography variant="h4" sx={{ mb: 1, fontWeight: 600 }}>
{t('title')} {t('title')}
</Typography> </Typography>
<Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}> <Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
{t('subtitle')} {t('subtitle')}
</Typography> </Typography>
{/* Filters */} {/* Time period selector */}
<Paper sx={{ p: 3, mb: 3 }}> <Box sx={{ mb: 4, display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center' }}>
<Grid container spacing={2} alignItems="center"> {children.length > 1 && (
{children.length > 1 && ( <FormControl sx={{ minWidth: 200 }}>
<Grid item xs={12} sm={6} md={4}> <InputLabel>{t('filters.child')}</InputLabel>
<FormControl fullWidth> <Select
<InputLabel>{t('filters.child')}</InputLabel> value={selectedChild}
<Select onChange={(e) => setSelectedChild(e.target.value)}
value={selectedChild} label={t('filters.child')}
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"
> >
<ToggleButton value="7days">{t('filters.dateRange.7days')}</ToggleButton> {children.map((child) => (
<ToggleButton value="30days">{t('filters.dateRange.30days')}</ToggleButton> <MenuItem key={child.id} value={child.id}>
<ToggleButton value="3months">{t('filters.dateRange.3months')}</ToggleButton> {child.name}
</ToggleButtonGroup> </MenuItem>
</Grid> ))}
</Grid> </Select>
</Paper> </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 && ( {error && (
<Alert severity="error" sx={{ mb: 3 }}> <Alert severity="error" sx={{ mb: 3 }}>
@@ -355,148 +354,167 @@ export const InsightsDashboard: React.FC = () => {
{!loading && !noChildren && !noActivities && ( {!loading && !noChildren && !noActivities && (
<> <>
{/* Summary Statistics */} {/* Stats cards */}
<Grid container spacing={3} sx={{ mb: 3 }}> <Grid container spacing={2} sx={{ mb: 4 }} justifyContent="center">
<Grid item xs={12} sm={6} md={3}> <Grid item xs={6} sm={3} sx={{ minWidth: 200 }}>
<motion.div <motion.div
initial={{ opacity: 0, scale: 0.9 }} initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.3, delay: 0 }} transition={{ duration: 0.3, delay: 0 }}
> >
<Card sx={{ bgcolor: COLORS.feeding, color: 'white', height: '160px', minHeight: '160px', width: '100%' }}> <Paper
<Box elevation={0}
sx={{ sx={{
textAlign: 'center', p: 3,
display: 'flex', height: '140px',
flexDirection: 'column', minHeight: '140px',
alignItems: 'center', width: '100%',
justifyContent: 'center', display: 'flex',
height: '160px', flexDirection: 'column',
minHeight: '160px', alignItems: 'center',
width: '100%', justifyContent: 'center',
p: 2, textAlign: 'center',
}} bgcolor: COLORS.feeding,
> color: 'white',
<Restaurant sx={{ fontSize: 32, mb: 1 }} /> }}
<Typography variant="h3" fontWeight="700"> >
{stats.totalFeedings} <Box sx={{ fontSize: 48, mb: 1 }} aria-hidden="true">
</Typography> <Restaurant sx={{ fontSize: 48 }} />
<Typography variant="body2" sx={{ opacity: 0.9, mt: 1 }}>
{t('stats.feedings.subtitle')}
</Typography>
</Box> </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> </motion.div>
</Grid> </Grid>
<Grid item xs={12} sm={6} md={3}> <Grid item xs={6} sm={3} sx={{ minWidth: 200 }}>
<motion.div <motion.div
initial={{ opacity: 0, scale: 0.9 }} initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.3, delay: 0.1 }} transition={{ duration: 0.3, delay: 0.1 }}
> >
<Card sx={{ bgcolor: COLORS.sleep, color: 'white', height: '160px', minHeight: '160px', width: '100%' }}> <Paper
<Box elevation={0}
sx={{ sx={{
textAlign: 'center', p: 3,
display: 'flex', height: '140px',
flexDirection: 'column', minHeight: '140px',
alignItems: 'center', width: '100%',
justifyContent: 'center', display: 'flex',
height: '160px', flexDirection: 'column',
minHeight: '160px', alignItems: 'center',
width: '100%', justifyContent: 'center',
p: 2, textAlign: 'center',
}} bgcolor: COLORS.sleep,
> color: 'white',
<Hotel sx={{ fontSize: 32, mb: 1 }} /> }}
<Typography variant="h3" fontWeight="700"> >
{stats.avgSleepHours}h <Box sx={{ fontSize: 48, mb: 1 }} aria-hidden="true">
</Typography> <Hotel sx={{ fontSize: 48 }} />
<Typography variant="body2" sx={{ opacity: 0.9, mt: 1 }}>
{t('stats.sleep.subtitle')}
</Typography>
</Box> </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> </motion.div>
</Grid> </Grid>
<Grid item xs={12} sm={6} md={3}> <Grid item xs={6} sm={3} sx={{ minWidth: 200 }}>
<motion.div <motion.div
initial={{ opacity: 0, scale: 0.9 }} initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.3, delay: 0.2 }} transition={{ duration: 0.3, delay: 0.2 }}
> >
<Card sx={{ bgcolor: COLORS.diaper, color: 'white', height: '160px', minHeight: '160px', width: '100%' }}> <Paper
<Box elevation={0}
sx={{ sx={{
textAlign: 'center', p: 3,
display: 'flex', height: '140px',
flexDirection: 'column', minHeight: '140px',
alignItems: 'center', width: '100%',
justifyContent: 'center', display: 'flex',
height: '160px', flexDirection: 'column',
minHeight: '160px', alignItems: 'center',
width: '100%', justifyContent: 'center',
p: 2, textAlign: 'center',
}} bgcolor: COLORS.diaper,
> color: 'white',
<BabyChangingStation sx={{ fontSize: 32, mb: 1 }} /> }}
<Typography variant="h3" fontWeight="700"> >
{stats.totalDiapers} <Box sx={{ fontSize: 48, mb: 1 }} aria-hidden="true">
</Typography> <BabyChangingStation sx={{ fontSize: 48 }} />
<Typography variant="body2" sx={{ opacity: 0.9, mt: 1 }}>
{t('stats.diapers.subtitle')}
</Typography>
</Box> </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> </motion.div>
</Grid> </Grid>
<Grid item xs={12} sm={6} md={3}> <Grid item xs={6} sm={3} sx={{ minWidth: 200 }}>
<motion.div <motion.div
initial={{ opacity: 0, scale: 0.9 }} initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.3, delay: 0.3 }} transition={{ duration: 0.3, delay: 0.3 }}
> >
<Card sx={{ bgcolor: COLORS.milestone, color: 'white', height: '160px', minHeight: '160px', width: '100%' }}> <Paper
<Box elevation={0}
sx={{ sx={{
textAlign: 'center', p: 3,
display: 'flex', height: '140px',
flexDirection: 'column', minHeight: '140px',
alignItems: 'center', width: '100%',
justifyContent: 'center', display: 'flex',
height: '160px', flexDirection: 'column',
minHeight: '160px', alignItems: 'center',
width: '100%', justifyContent: 'center',
p: 2, textAlign: 'center',
}} bgcolor: COLORS.milestone,
> color: 'white',
<TrendingUp sx={{ fontSize: 32, mb: 1 }} /> }}
<Typography variant="h3" fontWeight="700" sx={{ textTransform: 'capitalize' }}> >
{t(`activityTypes.${stats.mostCommonType}`)} <Box sx={{ fontSize: 48, mb: 1 }} aria-hidden="true">
</Typography> <TrendingUp sx={{ fontSize: 48 }} />
<Typography variant="body2" sx={{ opacity: 0.9, mt: 1 }}>
{t('stats.topActivity.subtitle')}
</Typography>
</Box> </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> </motion.div>
</Grid> </Grid>
</Grid> </Grid>
{/* Charts */} {/* Charts grid */}
<Grid container spacing={3} sx={{ mb: 3 }}> <Grid container spacing={3} justifyContent="center" sx={{ mb: 3 }}>
<Grid item xs={12} md={6}> <Grid item xs={12} md={6} sx={{ minWidth: 400 }}>
<Card sx={{ height: '350px', minHeight: '350px', width: '100%' }}> <Paper
<CardContent sx={{ height: '100%', display: 'flex', flexDirection: 'column', p: 2, '&:last-child': { pb: 2 } }}> elevation={0}
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}> sx={{
<Restaurant sx={{ mr: 1, color: COLORS.feeding }} /> p: 3,
<Typography variant="h6" fontWeight="600"> bgcolor: 'background.paper',
{t('charts.feedingFrequency')} height: 400,
</Typography> width: '100%',
</Box> 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}> <ResponsiveContainer width="100%" height={250}>
<BarChart data={dailyData}> <BarChart data={dailyData}>
<CartesianGrid strokeDasharray="3 3" /> <CartesianGrid strokeDasharray="3 3" />
@@ -506,19 +524,26 @@ export const InsightsDashboard: React.FC = () => {
<Bar dataKey="feedings" fill={COLORS.feeding} name={t('charts.chartLabels.feedings')} /> <Bar dataKey="feedings" fill={COLORS.feeding} name={t('charts.chartLabels.feedings')} />
</BarChart> </BarChart>
</ResponsiveContainer> </ResponsiveContainer>
</CardContent> </Box>
</Card> </Paper>
</Grid> </Grid>
<Grid item xs={12} md={6}> <Grid item xs={12} md={6} sx={{ minWidth: 400 }}>
<Card sx={{ height: '350px', minHeight: '350px', width: '100%' }}> <Paper
<CardContent sx={{ height: '100%', display: 'flex', flexDirection: 'column', p: 2, '&:last-child': { pb: 2 } }}> elevation={0}
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}> sx={{
<Hotel sx={{ mr: 1, color: COLORS.sleep }} /> p: 3,
<Typography variant="h6" fontWeight="600"> bgcolor: 'background.paper',
{t('charts.sleepDuration')} height: 400,
</Typography> width: '100%',
</Box> 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}> <ResponsiveContainer width="100%" height={250}>
<LineChart data={dailyData}> <LineChart data={dailyData}>
<CartesianGrid strokeDasharray="3 3" /> <CartesianGrid strokeDasharray="3 3" />
@@ -535,20 +560,27 @@ export const InsightsDashboard: React.FC = () => {
/> />
</LineChart> </LineChart>
</ResponsiveContainer> </ResponsiveContainer>
</CardContent> </Box>
</Card> </Paper>
</Grid> </Grid>
{diaperData.length > 0 && ( {diaperData.length > 0 && (
<Grid item xs={12} md={6}> <Grid item xs={12} md={6} sx={{ minWidth: 400 }}>
<Card sx={{ height: '350px', minHeight: '350px', width: '100%' }}> <Paper
<CardContent sx={{ height: '100%', display: 'flex', flexDirection: 'column', p: 2, '&:last-child': { pb: 2 } }}> elevation={0}
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}> sx={{
<BabyChangingStation sx={{ mr: 1, color: COLORS.diaper }} /> p: 3,
<Typography variant="h6" fontWeight="600"> bgcolor: 'background.paper',
{t('charts.diaperChangesByType')} height: 400,
</Typography> width: '100%',
</Box> 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}> <ResponsiveContainer width="100%" height={250}>
<PieChart> <PieChart>
<Pie <Pie
@@ -568,20 +600,27 @@ export const InsightsDashboard: React.FC = () => {
<Tooltip /> <Tooltip />
</PieChart> </PieChart>
</ResponsiveContainer> </ResponsiveContainer>
</CardContent> </Box>
</Card> </Paper>
</Grid> </Grid>
)} )}
<Grid item xs={12} md={diaperData.length > 0 ? 6 : 12}> <Grid item xs={12} md={diaperData.length > 0 ? 6 : 12} sx={{ minWidth: 400 }}>
<Card sx={{ height: '350px', minHeight: '350px', width: '100%' }}> <Paper
<CardContent sx={{ height: '100%', display: 'flex', flexDirection: 'column', p: 2, '&:last-child': { pb: 2 } }}> elevation={0}
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}> sx={{
<Assessment sx={{ mr: 1, color: 'primary.main' }} /> p: 3,
<Typography variant="h6" fontWeight="600"> bgcolor: 'background.paper',
{t('charts.activityTimeline')} height: 400,
</Typography> width: '100%',
</Box> 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}> <ResponsiveContainer width="100%" height={250}>
<BarChart data={dailyData}> <BarChart data={dailyData}>
<CartesianGrid strokeDasharray="3 3" /> <CartesianGrid strokeDasharray="3 3" />
@@ -594,8 +633,8 @@ export const InsightsDashboard: React.FC = () => {
<Bar dataKey="sleepHours" fill={COLORS.sleep} name={t('charts.chartLabels.sleepHours')} /> <Bar dataKey="sleepHours" fill={COLORS.sleep} name={t('charts.chartLabels.sleepHours')} />
</BarChart> </BarChart>
</ResponsiveContainer> </ResponsiveContainer>
</CardContent> </Box>
</Card> </Paper>
</Grid> </Grid>
</Grid> </Grid>

132
maternal-web/components/layouts/AppShell/AppShell.tsx
View File

@@ -62,20 +62,65 @@ export const AppShell = ({ children }: AppShellProps) => {
flexDirection: 'column', flexDirection: 'column',
minHeight: '100vh', minHeight: '100vh',
bgcolor: 'background.default', bgcolor: 'background.default',
pb: isMobile ? '64px' : 0, // Space for tab bar pb: { xs: '64px', md: 0 }, // Space for tab bar on mobile
}}> }}>
{!isMobile && <MobileNav />} {!isMobile && <MobileNav />}
{/* Mobile User Menu Button - Top Left */} {/* Mobile Header Bar */}
{isMobile && ( {isMobile && (
<Box <Box
sx={{ sx={{
position: 'fixed', position: 'fixed',
top: 8, top: 0,
left: 8, 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, 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 <IconButton
onClick={handleMenuOpen} onClick={handleMenuOpen}
size="small" size="small"
@@ -83,14 +128,6 @@ export const AppShell = ({ children }: AppShellProps) => {
aria-controls={anchorEl ? 'user-menu' : undefined} aria-controls={anchorEl ? 'user-menu' : undefined}
aria-haspopup="true" aria-haspopup="true"
aria-expanded={anchorEl ? 'true' : undefined} aria-expanded={anchorEl ? 'true' : undefined}
sx={{
bgcolor: 'background.paper',
boxShadow: 1,
'&:hover': {
bgcolor: 'background.paper',
boxShadow: 2,
},
}}
> >
<Avatar <Avatar
sx={{ sx={{
@@ -110,8 +147,8 @@ export const AppShell = ({ children }: AppShellProps) => {
open={Boolean(anchorEl)} open={Boolean(anchorEl)}
onClose={handleMenuClose} onClose={handleMenuClose}
onClick={handleMenuClose} onClick={handleMenuClose}
transformOrigin={{ horizontal: 'left', vertical: 'top' }} transformOrigin={{ horizontal: 'right', vertical: 'top' }}
anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }} anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
sx={{ sx={{
mt: 1, mt: 1,
}} }}
@@ -145,52 +182,55 @@ export const AppShell = ({ children }: AppShellProps) => {
</Box> </Box>
)} )}
{/* Connection Status & Presence Indicator */} {/* Connection Status & Presence Indicator - Desktop Only */}
<Box {!isMobile && (
sx={{ <Box
position: 'fixed', sx={{
top: isMobile ? 8 : 16, position: 'fixed',
right: isMobile ? 8 : 16, top: 16,
zIndex: 1200, right: 16,
display: 'flex', zIndex: 1200,
gap: 1, display: 'flex',
}} gap: 1,
> }}
<Tooltip title={isConnected ? t('connection.syncActive') : t('connection.syncDisconnected')}> >
<Chip <Tooltip title={isConnected ? t('connection.syncActive') : t('connection.syncDisconnected')}>
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 })}>
<Chip <Chip
icon={<People />} icon={isConnected ? <Wifi /> : <WifiOff />}
label={presence.count} label={isConnected ? t('connection.live') : t('connection.offline')}
size="small" size="small"
color="primary" color={isConnected ? 'success' : 'default'}
sx={{ sx={{
fontWeight: 600, fontWeight: 600,
boxShadow: 1, boxShadow: 1,
}} }}
/> />
</Tooltip> </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 <Container
maxWidth={isTablet ? 'md' : 'lg'} maxWidth={isTablet ? 'md' : 'lg'}
sx={{ sx={{
flex: 1, flex: 1,
px: isMobile ? 2 : 3, px: { xs: 2, md: 3 },
py: 3, py: 3,
pt: { xs: '64px', md: 3 }, // Add top padding for header bar on mobile
}} }}
> >
{children} {children}