feat: Add comprehensive accessibility improvements and medical tracking

- **EULA Persistence Fix**: Fixed EULA dialog showing on every login
  - Added eulaAcceptedAt/eulaVersion to AuthResponse interface
  - Updated login/register/getUserById endpoints to return EULA fields
  - Changed EULACheck to use refreshUser() instead of window.reload()

- **Touch Target Accessibility**: All interactive elements now meet 48x48px minimum
  - Fixed 14 undersized IconButtons across 5 files
  - Changed size="small" to size="medium" with minWidth/minHeight constraints
  - Updated children page, AI chat, analytics cards, legal viewer

- **Alt Text for Images**: Complete image accessibility for screen readers
  - Added photoAlt field to children table (Migration V009)
  - PhotoUpload component now includes alt text input field
  - All Avatar components have meaningful alt text
  - Default alt text: "Photo of {childName}", "{userName}'s profile photo"

- **Medical Tracking Consolidation**: Unified medical page with tabs
  - Medicine page now has 3 tabs: Medication, Temperature, Doctor Visit
  - Backward compatibility for legacy 'medicine' activity type
  - Created dedicated /track/growth page for physical measurements

- **Track Page Updates**:
  - Simplified to 6 options: Feeding, Sleep, Diaper, Medical, Activity, Growth
  - Fixed grid layout to 3 cards per row with minWidth: 200px
  - Updated terminology from "Medicine" to "Medical"

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

maternal-web/components/children/ChildDialog.tsx

@@ -31,6 +31,7 @@ export function ChildDialog({ open, onClose, onSubmit, child, isLoading = false
     birthDate: '',
     gender: 'male',
     photoUrl: '',
+    photoAlt: '',
   });
   const [error, setError] = useState<string>('');
 
@@ -41,6 +42,7 @@ export function ChildDialog({ open, onClose, onSubmit, child, isLoading = false
         birthDate: child.birthDate.split('T')[0], // Convert to YYYY-MM-DD format
         gender: child.gender,
         photoUrl: child.photoUrl || '',
+        photoAlt: child.photoAlt || '',
       });
     } else {
       setFormData({
@@ -48,6 +50,7 @@ export function ChildDialog({ open, onClose, onSubmit, child, isLoading = false
         birthDate: '',
         gender: 'male',
         photoUrl: '',
+        photoAlt: '',
       });
     }
     setError('');
@@ -151,6 +154,8 @@ export function ChildDialog({ open, onClose, onSubmit, child, isLoading = false
             label={t('dialog.photoUrl')}
             value={formData.photoUrl || ''}
             onChange={(url) => setFormData({ ...formData, photoUrl: url })}
+            altText={formData.photoAlt || ''}
+            onAltTextChange={(altText) => setFormData({ ...formData, photoAlt: altText })}
             disabled={isLoading}
             size={80}
           />

maternal-web/components/common/PhotoUpload.tsx

@@ -19,6 +19,9 @@ interface PhotoUploadProps {
   label: string;
   disabled?: boolean;
   size?: number;
+  altText?: string;
+  onAltTextChange?: (altText: string) => void;
+  showAltText?: boolean;
 }
 
 export function PhotoUpload({
@@ -26,7 +29,10 @@ export function PhotoUpload({
   onChange,
   label,
   disabled = false,
-  size = 100
+  size = 100,
+  altText = '',
+  onAltTextChange,
+  showAltText = true,
 }: PhotoUploadProps) {
   const [imageError, setImageError] = useState(false);
   const [uploadError, setUploadError] = useState<string>('');
@@ -120,6 +126,7 @@ export function PhotoUpload({
         <Box sx={{ position: 'relative' }}>
           <Avatar
             src={!imageError && value ? value : undefined}
+            alt={altText || 'Profile photo'}
             sx={{
               width: size,
               height: size,
@@ -165,7 +172,19 @@ export function PhotoUpload({
           </IconButton>
         </Box>
 
-        {/* Photo URL field removed - users upload via camera icon only */}
+        {/* Alt text input for accessibility */}
+        {showAltText && onAltTextChange && (
+          <TextField
+            fullWidth
+            label="Photo description (for accessibility)"
+            placeholder="e.g., Smiling baby with blue eyes"
+            value={altText}
+            onChange={(e) => onAltTextChange(e.target.value)}
+            disabled={disabled}
+            helperText="Describe the photo for screen reader users"
+            size="small"
+          />
+        )}
       </Paper>
     </Box>
   );

maternal-web/components/features/ai-chat/AIChatInterface.tsx

@@ -481,7 +481,7 @@ export const AIChatInterface: React.FC = () => {
             {t('history.title')}
           </Typography>
           {isMobile && (
-            <IconButton onClick={() => setDrawerOpen(false)} size="small" aria-label={t('interface.closeDrawer')}>
+            <IconButton onClick={() => setDrawerOpen(false)} size="medium" sx={{ minWidth: 48, minHeight: 48 }} aria-label={t('interface.closeDrawer')}>
               <Close />
             </IconButton>
           )}
@@ -578,7 +578,7 @@ export const AIChatInterface: React.FC = () => {
                           }}
                         />
                         <IconButton
-                          size="small"
+                          size="medium"
                           onClick={(e) => {
                             e.stopPropagation();
                             if (isMobile) {
@@ -588,7 +588,7 @@ export const AIChatInterface: React.FC = () => {
                               setDeleteDialogOpen(true);
                             }
                           }}
-                          sx={{ ml: 1 }}
+                          sx={{ ml: 1, minWidth: 48, minHeight: 48 }}
                           aria-label={isMobile ? t('interface.moreOptions') : t('interface.deleteConversation')}
                         >
                           {isMobile ? <MoreVert fontSize="small" /> : <Delete fontSize="small" />}
@@ -655,7 +655,7 @@ export const AIChatInterface: React.FC = () => {
                 <MenuIcon />
               </IconButton>
             )}
-            <Avatar sx={{ bgcolor: 'primary.main' }}>
+            <Avatar sx={{ bgcolor: 'primary.main' }} alt="User">
               <SmartToy />
             </Avatar>
             <Box>
@@ -816,7 +816,7 @@ export const AIChatInterface: React.FC = () => {
                     )}
                   </Paper>
                   {message.role === 'user' && (
-                    <Avatar sx={{ bgcolor: 'secondary.main', mt: 1 }}>
+                    <Avatar sx={{ bgcolor: 'secondary.main', mt: 1 }} alt="AI Assistant">
                       <Person />
                     </Avatar>
                   )}
@@ -899,7 +899,7 @@ export const AIChatInterface: React.FC = () => {
           {/* Loading Indicator (shown when waiting for first token) */}
           {isLoading && !streamingMessage && (
             <Box sx={{ display: 'flex', gap: 2 }}>
-              <Avatar sx={{ bgcolor: 'primary.main' }}>
+              <Avatar sx={{ bgcolor: 'primary.main' }} alt="User">
                 <SmartToy />
               </Avatar>
               <Paper

maternal-web/components/features/analytics/MonthlyReportCard.tsx

@@ -128,13 +128,13 @@ export default function MonthlyReportCard({ childId }: MonthlyReportCardProps) {
         <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
           <Typography variant="h6">Monthly Report</Typography>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-            <IconButton size="small" onClick={handlePreviousMonth}>
+            <IconButton size="medium" onClick={handlePreviousMonth} sx={{ minWidth: 48, minHeight: 48 }}>
               <NavigateBefore />
             </IconButton>
             <Typography variant="body2">
               {formatDate(report.month, 'MMMM yyyy')}
             </Typography>
-            <IconButton size="small" onClick={handleNextMonth} disabled={currentMonth >= startOfMonth(new Date())}>
+            <IconButton size="medium" onClick={handleNextMonth} disabled={currentMonth >= startOfMonth(new Date())} sx={{ minWidth: 48, minHeight: 48 }}>
               <NavigateNext />
             </IconButton>
           </Box>
@@ -220,7 +220,7 @@ export default function MonthlyReportCard({ childId }: MonthlyReportCardProps) {
             </Typography>
             <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mt: 1 }}>
               {report.trends.map((trend, index) => (
-                <Chip key={index} label={trend} size="small" color="primary" variant="outlined" />
+                <Chip key={index} label={trend} size="medium" color="primary" variant="outlined" />
               ))}
             </Box>
           </Box>
@@ -251,16 +251,18 @@ export default function MonthlyReportCard({ childId }: MonthlyReportCardProps) {
         {/* Export Options */}
         <Box sx={{ mt: 3, display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
           <Button
-            size="small"
+            size="medium"
             startIcon={<Download />}
             onClick={() => handleExport('pdf')}
+            sx={{ minHeight: 48 }}
           >
             PDF
           </Button>
           <Button
-            size="small"
+            size="medium"
             startIcon={<Download />}
             onClick={() => handleExport('csv')}
+            sx={{ minHeight: 48 }}
           >
             CSV
           </Button>

maternal-web/components/features/analytics/WeeklyReportCard.tsx

@@ -138,13 +138,13 @@ export default function WeeklyReportCard({ childId }: WeeklyReportCardProps) {
         <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
           <Typography variant="h6">Weekly Report</Typography>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-            <IconButton size="small" onClick={handlePreviousWeek}>
+            <IconButton size="medium" onClick={handlePreviousWeek} sx={{ minWidth: 48, minHeight: 48 }}>
               <NavigateBefore />
             </IconButton>
             <Typography variant="body2">
               {formatDate(report.weekStart, 'MMM d')} - {formatDate(report.weekEnd, 'MMM d')}
             </Typography>
-            <IconButton size="small" onClick={handleNextWeek} disabled={currentWeekStart >= startOfWeek(new Date())}>
+            <IconButton size="medium" onClick={handleNextWeek} disabled={currentWeekStart >= startOfWeek(new Date())} sx={{ minWidth: 48, minHeight: 48 }}>
               <NavigateNext />
             </IconButton>
           </Box>
@@ -246,16 +246,18 @@ export default function WeeklyReportCard({ childId }: WeeklyReportCardProps) {
         {/* Export Options */}
         <Box sx={{ mt: 3, display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
           <Button
-            size="small"
+            size="medium"
             startIcon={<Download />}
             onClick={() => handleExport('pdf')}
+            sx={{ minHeight: 48 }}
           >
             PDF
           </Button>
           <Button
-            size="small"
+            size="medium"
             startIcon={<Download />}
             onClick={() => handleExport('csv')}
+            sx={{ minHeight: 48 }}
           >
             CSV
           </Button>

maternal-web/components/layouts/AppShell/AppShell.tsx

@@ -126,6 +126,7 @@ export const AppShell = ({ children }: AppShellProps) => {
           >
             <Avatar
               src={user?.photoUrl || undefined}
+              alt={user?.name ? `${user.name}'s profile photo` : 'User profile photo'}
               key={user?.photoUrl || 'no-photo'} // Force re-render when photoUrl changes
               sx={{
                 width: 36,

maternal-web/components/layouts/MobileNav/MobileNav.tsx

@@ -73,7 +73,7 @@ export const MobileNav = () => {
           >
             <Home />
           </IconButton>
-          <Avatar sx={{ bgcolor: 'primary.main' }}>U</Avatar>
+          <Avatar sx={{ bgcolor: 'primary.main' }} alt="User profile photo">U</Avatar>
         </Toolbar>
       </AppBar>
 
@@ -89,7 +89,7 @@ export const MobileNav = () => {
           aria-label="Main menu"
         >
           <Box sx={{ p: 3, bgcolor: 'primary.light' }}>
-            <Avatar sx={{ width: 64, height: 64, bgcolor: 'primary.main', mb: 2 }}>U</Avatar>
+            <Avatar sx={{ width: 64, height: 64, bgcolor: 'primary.main', mb: 2 }} alt="User profile photo">U</Avatar>
             <Typography variant="h6" fontWeight="600">User Name</Typography>
             <Typography variant="body2" color="text.secondary">user@example.com</Typography>
           </Box>

maternal-web/components/legal/EULACheck.tsx

@@ -7,7 +7,7 @@ import { useRouter } from 'next/navigation';
 import apiClient from '@/lib/api/client';
 
 export function EULACheck() {
-  const { user, logout } = useAuth();
+  const { user, logout, refreshUser } = useAuth();
   const router = useRouter();
   const [showDialog, setShowDialog] = useState(false);
   const [checking, setChecking] = useState(true);
@@ -42,8 +42,13 @@ export function EULACheck() {
 
       console.log('✅ EULA acceptance recorded:', response.data);
 
-      // Reload user data to get updated EULA acceptance
-      window.location.reload();
+      // Close dialog immediately
+      setShowDialog(false);
+
+      // Refresh user data to get updated EULA acceptance
+      await refreshUser();
+
+      console.log('✅ User data refreshed after EULA acceptance');
     } catch (error) {
       console.error('❌ Failed to accept EULA:', error);
       alert('Failed to accept EULA. Please try again.');

maternal-web/components/legal/LegalDocumentViewer.tsx

@@ -58,7 +58,7 @@ export function LegalDocumentViewer({ open, onClose, documentType, title }: Lega
     >
       <DialogTitle sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
         <Typography variant="h6">{title}</Typography>
-        <IconButton onClick={onClose} size="small" aria-label="close">
+        <IconButton onClick={onClose} size="medium" sx={{ minWidth: 48, minHeight: 48 }} aria-label="close">
           <Close />
         </IconButton>
       </DialogTitle>