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/app/track/medicine/page.tsx

@@ -23,6 +23,8 @@ import {
   DialogActions,
   Chip,
   Snackbar,
+  Tabs,
+  Tab,
 } from '@mui/material';
 import {
   ArrowBack,
@@ -32,6 +34,9 @@ import {
   Refresh,
   ChildCare,
   Add,
+  Thermostat,
+  LocalHospital,
+  Medication as MedicationIcon,
 } from '@mui/icons-material';
 import { useRouter } from 'next/navigation';
 import { AppShell } from '@/components/layouts/AppShell/AppShell';
@@ -46,10 +51,12 @@ import { motion } from 'framer-motion';
 import { useLocalizedDate } from '@/hooks/useLocalizedDate';
 import { useTranslation } from '@/hooks/useTranslation';
 import { UnitInput } from '@/components/forms/UnitInput';
-import { convertVolume, getUnitSymbol } from '@/lib/utils/unitConversion';
+import { convertVolume, convertTemperature } from '@/lib/utils/unitConversion';
 import { MeasurementSystem } from '@/hooks/useLocale';
 
-interface MedicineData {
+type MedicalActivityType = 'medication' | 'temperature' | 'doctor';
+
+interface MedicationData {
   medicineName: string;
   dosage: string;
   unit?: string;
@@ -57,28 +64,53 @@ interface MedicineData {
   reason?: string;
 }
 
-function MedicineTrackPage() {
+interface TemperatureData {
+  temperature: number; // stored in Celsius
+  location?: 'oral' | 'rectal' | 'armpit' | 'ear' | 'forehead';
+  symptoms?: string;
+}
+
+interface DoctorVisitData {
+  visitType: 'checkup' | 'emergency' | 'followup' | 'vaccination' | 'other';
+  diagnosis?: string;
+  treatment?: string;
+  doctorName?: string;
+}
+
+function MedicalTrackPage() {
   const router = useRouter();
   const { user } = useAuth();
   const { t } = useTranslation('tracking');
   const { formatDistanceToNow } = useLocalizedDate();
   const [children, setChildren] = useState<Child[]>([]);
   const [selectedChild, setSelectedChild] = useState<string>('');
+  const [activityType, setActivityType] = useState<MedicalActivityType>('medication');
 
-  // Medicine state
+  // Medication state
   const [medicineName, setMedicineName] = useState<string>('');
-  const [dosage, setDosage] = useState<number>(0); // For ml/liquid - stored in ml
-  const [dosageText, setDosageText] = useState<string>(''); // For non-liquid units
+  const [dosage, setDosage] = useState<number>(0);
+  const [dosageText, setDosageText] = useState<string>('');
   const [unit, setUnit] = useState<string>('ml');
   const [route, setRoute] = useState<'oral' | 'topical' | 'injection' | 'other'>('oral');
   const [reason, setReason] = useState<string>('');
 
+  // Temperature state
+  const [temperature, setTemperature] = useState<number>(0);
+  const [tempLocation, setTempLocation] = useState<'oral' | 'rectal' | 'armpit' | 'ear' | 'forehead'>('oral');
+  const [symptoms, setSymptoms] = useState<string>('');
+
+  // Doctor visit state
+  const [visitType, setVisitType] = useState<'checkup' | 'emergency' | 'followup' | 'vaccination' | 'other'>('checkup');
+  const [diagnosis, setDiagnosis] = useState<string>('');
+  const [treatment, setTreatment] = useState<string>('');
+  const [doctorName, setDoctorName] = useState<string>('');
+
   // Common state
   const [notes, setNotes] = useState<string>('');
-  const [recentMedicines, setRecentMedicines] = useState<Activity[]>([]);
+  const [recentActivities, setRecentActivities] = useState<Activity[]>([]);
   const [loading, setLoading] = useState(false);
   const [childrenLoading, setChildrenLoading] = useState(true);
-  const [medicinesLoading, setMedicinesLoading] = useState(false);
+  const [activitiesLoading, setActivitiesLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [successMessage, setSuccessMessage] = useState<string | null>(null);
 
@@ -88,19 +120,17 @@ function MedicineTrackPage() {
 
   const familyId = user?.families?.[0]?.familyId;
 
-  // Load children
   useEffect(() => {
     if (familyId) {
       loadChildren();
     }
   }, [familyId]);
 
-  // Load recent medicines when child is selected
   useEffect(() => {
     if (selectedChild) {
-      loadRecentMedicines();
+      loadRecentActivities();
     }
-  }, [selectedChild]);
+  }, [selectedChild, activityType]);
 
   const loadChildren = async () => {
     if (!familyId) return;
@@ -120,21 +150,37 @@ function MedicineTrackPage() {
     }
   };
 
-  const loadRecentMedicines = async () => {
+  const loadRecentActivities = async () => {
     if (!selectedChild) return;
 
     try {
-      setMedicinesLoading(true);
-      const activities = await trackingApi.getActivities(selectedChild, 'medicine');
-      // Sort by timestamp descending and take last 10
-      const sorted = activities.sort((a, b) =>
+      setActivitiesLoading(true);
+      // Load all medical-related activities (including legacy 'medicine' type)
+      const medicalTypes = ['medication', 'temperature', 'doctor', 'medicine'];
+      const allActivities = await Promise.all(
+        medicalTypes.map(type =>
+          trackingApi.getActivities(selectedChild, type as any).catch(() => [])
+        )
+      );
+
+      // Flatten and filter by current tab (but include legacy 'medicine' in medication tab)
+      const flatActivities = allActivities.flat();
+      const filtered = flatActivities.filter(activity => {
+        if (activityType === 'medication') {
+          // Include both 'medication' and legacy 'medicine' types
+          return activity.type === 'medication' || activity.type === 'medicine';
+        }
+        return activity.type === activityType;
+      });
+
+      const sorted = filtered.sort((a, b) =>
         new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
       ).slice(0, 10);
-      setRecentMedicines(sorted);
+      setRecentActivities(sorted);
     } catch (err: any) {
-      console.error('Failed to load recent medicines:', err);
+      console.error('Failed to load recent activities:', err);
     } finally {
-      setMedicinesLoading(false);
+      setActivitiesLoading(false);
     }
   };
 
@@ -144,59 +190,97 @@ function MedicineTrackPage() {
       return;
     }
 
-    // Validation
-    if (!medicineName) {
-      setError(t('health.medicineName.required'));
-      return;
-    }
-
-    const dosageValue = unit === 'ml' ? dosage : dosageText;
-    if (!dosageValue || (unit === 'ml' && dosage === 0) || (unit !== 'ml' && !dosageText)) {
-      setError(t('health.dosage.required'));
-      return;
+    // Validation based on activity type
+    if (activityType === 'medication') {
+      if (!medicineName) {
+        setError(t('health.medicineName.required'));
+        return;
+      }
+      const dosageValue = unit === 'ml' ? dosage : dosageText;
+      if (!dosageValue || (unit === 'ml' && dosage === 0) || (unit !== 'ml' && !dosageText)) {
+        setError(t('health.dosage.required'));
+        return;
+      }
+    } else if (activityType === 'temperature') {
+      if (temperature === 0) {
+        setError('Please enter temperature');
+        return;
+      }
+    } else if (activityType === 'doctor') {
+      if (!visitType) {
+        setError('Please select visit type');
+        return;
+      }
     }
 
     try {
       setLoading(true);
       setError(null);
 
-      const data: MedicineData = {
-        medicineName,
-        dosage: unit === 'ml' ? dosage.toString() : dosageText,
-        unit,
-        route,
-        reason: reason || undefined,
-      };
+      let data: MedicationData | TemperatureData | DoctorVisitData;
+
+      if (activityType === 'medication') {
+        data = {
+          medicineName,
+          dosage: unit === 'ml' ? dosage.toString() : dosageText,
+          unit,
+          route,
+          reason: reason || undefined,
+        };
+      } else if (activityType === 'temperature') {
+        data = {
+          temperature,
+          location: tempLocation,
+          symptoms: symptoms || undefined,
+        };
+      } else {
+        data = {
+          visitType,
+          diagnosis: diagnosis || undefined,
+          treatment: treatment || undefined,
+          doctorName: doctorName || undefined,
+        };
+      }
 
       await trackingApi.createActivity(selectedChild, {
-        type: 'medicine',
+        type: activityType,
         timestamp: new Date().toISOString(),
         data,
         notes: notes || undefined,
       });
 
-      setSuccessMessage(t('health.success'));
+      setSuccessMessage(`${activityType.charAt(0).toUpperCase() + activityType.slice(1)} logged successfully!`);
 
-      // Reset form
       resetForm();
-
-      // Reload recent medicines
-      await loadRecentMedicines();
+      await loadRecentActivities();
     } catch (err: any) {
-      console.error('Failed to save medicine:', err);
-      setError(err.response?.data?.message || t('health.error'));
+      console.error('Failed to save activity:', err);
+      setError(err.response?.data?.message || 'Failed to save activity');
     } finally {
       setLoading(false);
     }
   };
 
   const resetForm = () => {
+    // Medication
     setMedicineName('');
     setDosage(0);
     setDosageText('');
     setUnit('ml');
     setRoute('oral');
     setReason('');
+
+    // Temperature
+    setTemperature(0);
+    setTempLocation('oral');
+    setSymptoms('');
+
+    // Doctor visit
+    setVisitType('checkup');
+    setDiagnosis('');
+    setTreatment('');
+    setDoctorName('');
+
     setNotes('');
   };
 
@@ -211,46 +295,78 @@ function MedicineTrackPage() {
     try {
       setLoading(true);
       await trackingApi.deleteActivity(activityToDelete);
-      setSuccessMessage(t('health.deleted'));
+      setSuccessMessage('Activity deleted successfully');
       setDeleteDialogOpen(false);
       setActivityToDelete(null);
-      await loadRecentMedicines();
+      await loadRecentActivities();
     } catch (err: any) {
-      console.error('Failed to delete medicine:', err);
-      setError(err.response?.data?.message || t('health.deleteError'));
+      console.error('Failed to delete activity:', err);
+      setError(err.response?.data?.message || 'Failed to delete activity');
     } finally {
       setLoading(false);
     }
   };
 
-  const getMedicineDetails = (activity: Activity) => {
-    const data = activity.data as MedicineData;
-
-    // Only convert if unit is ml (liquid medicine)
-    if (data.unit === 'ml') {
-      const measurementSystem: MeasurementSystem =
-        (user?.preferences?.measurementUnit as MeasurementSystem) || 'metric';
-      const converted = convertVolume(parseFloat(data.dosage), measurementSystem);
-      const roundedValue = Math.round(converted.value * 10) / 10; // Round to 1 decimal
-      let details = `${roundedValue} ${converted.unit}`;
-      if (data.route) {
-        details += ` - ${data.route.charAt(0).toUpperCase() + data.route.slice(1)}`;
-      }
-      if (data.reason) {
-        details += ` - ${data.reason}`;
+  const getActivityDetails = (activity: Activity) => {
+    // Handle both 'medication' and legacy 'medicine' types
+    if (activity.type === 'medication' || activity.type === 'medicine') {
+      const data = activity.data as MedicationData;
+      if (data.unit === 'ml') {
+        const measurementSystem: MeasurementSystem = (user?.preferences?.measurementUnit as MeasurementSystem) || 'metric';
+        const converted = convertVolume(parseFloat(data.dosage), measurementSystem);
+        const roundedValue = Math.round(converted.value * 10) / 10;
+        let details = `${roundedValue} ${converted.unit}`;
+        if (data.route) details += ` - ${data.route.charAt(0).toUpperCase() + data.route.slice(1)}`;
+        if (data.reason) details += ` - ${data.reason}`;
+        return details;
       }
+      let details = `${data.dosage} ${data.unit || ''}`;
+      if (data.route) details += ` - ${data.route.charAt(0).toUpperCase() + data.route.slice(1)}`;
+      if (data.reason) details += ` - ${data.reason}`;
+      return details;
+    } else if (activity.type === 'temperature') {
+      const data = activity.data as TemperatureData;
+      const measurementSystem: MeasurementSystem = (user?.preferences?.measurementUnit as MeasurementSystem) || 'metric';
+      const converted = convertTemperature(data.temperature, measurementSystem);
+      const roundedValue = Math.round(converted.value * 10) / 10;
+      let details = `${roundedValue}${converted.unit}`;
+      if (data.location) details += ` - ${data.location.charAt(0).toUpperCase() + data.location.slice(1)}`;
+      if (data.symptoms) details += ` - ${data.symptoms}`;
+      return details;
+    } else if (activity.type === 'doctor') {
+      const data = activity.data as DoctorVisitData;
+      let details = data.visitType.charAt(0).toUpperCase() + data.visitType.slice(1);
+      if (data.doctorName) details += ` - Dr. ${data.doctorName}`;
+      if (data.diagnosis) details += ` - ${data.diagnosis}`;
       return details;
     }
+    return '';
+  };
 
-    // For non-liquid units (mg, tablets, drops), display as-is
-    let details = `${data.dosage} ${data.unit || ''}`;
-    if (data.route) {
-      details += ` - ${data.route.charAt(0).toUpperCase() + data.route.slice(1)}`;
+  const getActivityIcon = (type: string) => {
+    switch (type) {
+      case 'medication':
+      case 'medicine': // Legacy type
+        return <MedicationIcon color="error" />;
+      case 'temperature':
+        return <Thermostat color="warning" />;
+      case 'doctor':
+        return <LocalHospital color="primary" />;
+      default:
+        return <MedicalServices color="error" />;
     }
-    if (data.reason) {
-      details += ` - ${data.reason}`;
+  };
+
+  const getActivityTitle = (activity: Activity) => {
+    if (activity.type === 'medication' || activity.type === 'medicine') {
+      const data = activity.data as MedicationData;
+      return data.medicineName;
+    } else if (activity.type === 'temperature') {
+      return 'Temperature Reading';
+    } else if (activity.type === 'doctor') {
+      return 'Doctor Visit';
     }
-    return details;
+    return 'Medical Record';
   };
 
   if (childrenLoading) {
@@ -259,14 +375,11 @@ function MedicineTrackPage() {
         <AppShell>
           <Box>
             <Typography variant="h4" fontWeight="600" sx={{ mb: 3 }}>
-              {t('activities.medicine')}
+              Medical
             </Typography>
             <Paper sx={{ p: 3, mb: 3 }}>
               <FormSkeleton />
             </Paper>
-            <Typography variant="h6" fontWeight="600" sx={{ mb: 2 }}>
-              {t('activities.medicine')}
-            </Typography>
             <ActivityListSkeleton count={3} />
           </Box>
         </AppShell>
@@ -287,11 +400,7 @@ function MedicineTrackPage() {
               <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
                 {t('common.noChildrenMessage')}
               </Typography>
-              <Button
-                variant="contained"
-                startIcon={<Add />}
-                onClick={() => router.push('/children')}
-              >
+              <Button variant="contained" startIcon={<Add />} onClick={() => router.push('/children')}>
                 {t('common.addChild')}
               </Button>
             </CardContent>
@@ -310,16 +419,16 @@ function MedicineTrackPage() {
               <ArrowBack />
             </IconButton>
             <Typography variant="h4" fontWeight="600" sx={{ flex: 1 }}>
-              {t('activities.medicine')}
+              Medical
             </Typography>
             <VoiceInputButton
               onTranscript={(transcript) => {
-                console.log('[Medicine] Voice transcript:', transcript);
+                console.log('[Medical] Voice transcript:', transcript);
               }}
               onClassifiedIntent={(result) => {
                 if (result.intent === 'medicine' && result.structuredData) {
                   const data = result.structuredData;
-                  // Auto-fill form with voice data
+                  setActivityType('medication');
                   if (data.medicineName) setMedicineName(data.medicineName);
                   if (data.unit) setUnit(data.unit);
                   if (data.dosage) {
@@ -343,21 +452,13 @@ function MedicineTrackPage() {
             </Alert>
           )}
 
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.3 }}
-          >
+          <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
             {/* Child Selector */}
             {children.length > 1 && (
               <Paper sx={{ p: 2, mb: 3 }}>
                 <FormControl fullWidth>
                   <InputLabel>{t('common.selectChild')}</InputLabel>
-                  <Select
-                    value={selectedChild}
-                    onChange={(e) => setSelectedChild(e.target.value)}
-                    label={t('common.selectChild')}
-                  >
+                  <Select value={selectedChild} onChange={(e) => setSelectedChild(e.target.value)} label={t('common.selectChild')}>
                     {children.map((child) => (
                       <MenuItem key={child.id} value={child.id}>
                         {child.name}
@@ -368,94 +469,204 @@ function MedicineTrackPage() {
               </Paper>
             )}
 
+            {/* Activity Type Tabs */}
+            <Paper sx={{ mb: 3 }}>
+              <Tabs value={activityType} onChange={(e, newValue) => setActivityType(newValue)} variant="fullWidth">
+                <Tab icon={<MedicationIcon />} iconPosition="start" label="Medication" value="medication" />
+                <Tab icon={<Thermostat />} iconPosition="start" label="Temperature" value="temperature" />
+                <Tab icon={<LocalHospital />} iconPosition="start" label="Doctor Visit" value="doctor" />
+              </Tabs>
+            </Paper>
+
             {/* Main Form */}
             <Paper sx={{ p: 3, mb: 3 }}>
-              <Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
-                <MedicalServices sx={{ fontSize: 36, color: 'error.main', mr: 2 }} />
-                <Typography variant="h6" fontWeight="600">
-                  {t('health.medicineInfo')}
-                </Typography>
-              </Box>
+              {activityType === 'medication' && (
+                <>
+                  <Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
+                    <MedicationIcon sx={{ fontSize: 36, color: 'error.main', mr: 2 }} />
+                    <Typography variant="h6" fontWeight="600">
+                      {t('health.medicineInfo')}
+                    </Typography>
+                  </Box>
 
-              <TextField
-                fullWidth
-                label={t('health.medicineName.label')}
-                value={medicineName}
-                onChange={(e) => setMedicineName(e.target.value)}
-                sx={{ mb: 3 }}
-                placeholder={t('health.medicineName.placeholder')}
-                required
-              />
-
-              <Box sx={{ display: 'flex', gap: 2, mb: 3 }}>
-                {unit === 'ml' ? (
-                  <UnitInput
-                    fullWidth
-                    label={t('health.dosage.label')}
-                    type="volume"
-                    value={dosage}
-                    onChange={(metricValue) => setDosage(metricValue)}
-                    required
-                  />
-                ) : (
                   <TextField
                     fullWidth
-                    label={t('health.dosage.label')}
-                    value={dosageText}
-                    onChange={(e) => setDosageText(e.target.value)}
-                    placeholder={t('health.dosage.placeholder')}
+                    label={t('health.medicineName.label')}
+                    value={medicineName}
+                    onChange={(e) => setMedicineName(e.target.value)}
+                    sx={{ mb: 3 }}
+                    placeholder={t('health.medicineName.placeholder')}
                     required
                   />
-                )}
 
-                <FormControl fullWidth>
-                  <InputLabel>{t('health.unit')}</InputLabel>
-                  <Select
-                    value={unit}
-                    onChange={(e) => {
-                      const newUnit = e.target.value;
-                      setUnit(newUnit);
-                      // Reset dosage when switching units
-                      if (newUnit === 'ml') {
-                        setDosageText('');
-                      } else {
-                        setDosage(0);
-                      }
-                    }}
-                    label={t('health.unit')}
-                  >
-                    <MenuItem value="ml">{t('health.units.ml')}</MenuItem>
-                    <MenuItem value="mg">{t('health.units.mg')}</MenuItem>
-                    <MenuItem value="tsp">{t('health.units.tsp')}</MenuItem>
-                    <MenuItem value="tbsp">{t('health.units.tbsp')}</MenuItem>
-                    <MenuItem value="drops">{t('health.units.drops')}</MenuItem>
-                    <MenuItem value="tablet">{t('health.units.tablet')}</MenuItem>
-                  </Select>
-                </FormControl>
-              </Box>
+                  <Box sx={{ display: 'flex', gap: 2, mb: 3 }}>
+                    {unit === 'ml' ? (
+                      <UnitInput
+                        fullWidth
+                        label={t('health.dosage.label')}
+                        type="volume"
+                        value={dosage}
+                        onChange={(metricValue) => setDosage(metricValue)}
+                        required
+                      />
+                    ) : (
+                      <TextField
+                        fullWidth
+                        label={t('health.dosage.label')}
+                        value={dosageText}
+                        onChange={(e) => setDosageText(e.target.value)}
+                        placeholder={t('health.dosage.placeholder')}
+                        required
+                      />
+                    )}
 
-              <FormControl fullWidth sx={{ mb: 3 }}>
-                <InputLabel>{t('health.route.label')}</InputLabel>
-                <Select
-                  value={route}
-                  onChange={(e) => setRoute(e.target.value as 'oral' | 'topical' | 'injection' | 'other')}
-                  label={t('health.route.label')}
-                >
-                  <MenuItem value="oral">{t('health.route.oral')}</MenuItem>
-                  <MenuItem value="topical">{t('health.route.topical')}</MenuItem>
-                  <MenuItem value="injection">{t('health.route.injection')}</MenuItem>
-                  <MenuItem value="other">{t('health.route.other')}</MenuItem>
-                </Select>
-              </FormControl>
+                    <FormControl fullWidth>
+                      <InputLabel>{t('health.unit')}</InputLabel>
+                      <Select
+                        value={unit}
+                        onChange={(e) => {
+                          const newUnit = e.target.value;
+                          setUnit(newUnit);
+                          if (newUnit === 'ml') {
+                            setDosageText('');
+                          } else {
+                            setDosage(0);
+                          }
+                        }}
+                        label={t('health.unit')}
+                      >
+                        <MenuItem value="ml">{t('health.units.ml')}</MenuItem>
+                        <MenuItem value="mg">{t('health.units.mg')}</MenuItem>
+                        <MenuItem value="tsp">{t('health.units.tsp')}</MenuItem>
+                        <MenuItem value="tbsp">{t('health.units.tbsp')}</MenuItem>
+                        <MenuItem value="drops">{t('health.units.drops')}</MenuItem>
+                        <MenuItem value="tablet">{t('health.units.tablet')}</MenuItem>
+                      </Select>
+                    </FormControl>
+                  </Box>
 
-              <TextField
-                fullWidth
-                label={t('health.reason.label')}
-                value={reason}
-                onChange={(e) => setReason(e.target.value)}
-                sx={{ mb: 3 }}
-                placeholder={t('health.reason.placeholder')}
-              />
+                  <FormControl fullWidth sx={{ mb: 3 }}>
+                    <InputLabel>{t('health.route.label')}</InputLabel>
+                    <Select
+                      value={route}
+                      onChange={(e) => setRoute(e.target.value as 'oral' | 'topical' | 'injection' | 'other')}
+                      label={t('health.route.label')}
+                    >
+                      <MenuItem value="oral">{t('health.route.oral')}</MenuItem>
+                      <MenuItem value="topical">{t('health.route.topical')}</MenuItem>
+                      <MenuItem value="injection">{t('health.route.injection')}</MenuItem>
+                      <MenuItem value="other">{t('health.route.other')}</MenuItem>
+                    </Select>
+                  </FormControl>
+
+                  <TextField
+                    fullWidth
+                    label={t('health.reason.label')}
+                    value={reason}
+                    onChange={(e) => setReason(e.target.value)}
+                    sx={{ mb: 3 }}
+                    placeholder={t('health.reason.placeholder')}
+                  />
+                </>
+              )}
+
+              {activityType === 'temperature' && (
+                <>
+                  <Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
+                    <Thermostat sx={{ fontSize: 36, color: 'warning.main', mr: 2 }} />
+                    <Typography variant="h6" fontWeight="600">
+                      Temperature Reading
+                    </Typography>
+                  </Box>
+
+                  <UnitInput
+                    fullWidth
+                    label="Temperature"
+                    type="temperature"
+                    value={temperature}
+                    onChange={(metricValue) => setTemperature(metricValue)}
+                    required
+                    sx={{ mb: 3 }}
+                  />
+
+                  <FormControl fullWidth sx={{ mb: 3 }}>
+                    <InputLabel>Measurement Location</InputLabel>
+                    <Select
+                      value={tempLocation}
+                      onChange={(e) => setTempLocation(e.target.value as any)}
+                      label="Measurement Location"
+                    >
+                      <MenuItem value="oral">Oral</MenuItem>
+                      <MenuItem value="rectal">Rectal</MenuItem>
+                      <MenuItem value="armpit">Armpit</MenuItem>
+                      <MenuItem value="ear">Ear</MenuItem>
+                      <MenuItem value="forehead">Forehead</MenuItem>
+                    </Select>
+                  </FormControl>
+
+                  <TextField
+                    fullWidth
+                    label="Symptoms (optional)"
+                    value={symptoms}
+                    onChange={(e) => setSymptoms(e.target.value)}
+                    sx={{ mb: 3 }}
+                    placeholder="e.g., Fever, Cough, Runny nose"
+                  />
+                </>
+              )}
+
+              {activityType === 'doctor' && (
+                <>
+                  <Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
+                    <LocalHospital sx={{ fontSize: 36, color: 'primary.main', mr: 2 }} />
+                    <Typography variant="h6" fontWeight="600">
+                      Doctor Visit
+                    </Typography>
+                  </Box>
+
+                  <FormControl fullWidth sx={{ mb: 3 }}>
+                    <InputLabel>Visit Type</InputLabel>
+                    <Select
+                      value={visitType}
+                      onChange={(e) => setVisitType(e.target.value as any)}
+                      label="Visit Type"
+                    >
+                      <MenuItem value="checkup">Regular Checkup</MenuItem>
+                      <MenuItem value="emergency">Emergency</MenuItem>
+                      <MenuItem value="followup">Follow-up</MenuItem>
+                      <MenuItem value="vaccination">Vaccination</MenuItem>
+                      <MenuItem value="other">Other</MenuItem>
+                    </Select>
+                  </FormControl>
+
+                  <TextField
+                    fullWidth
+                    label="Doctor Name (optional)"
+                    value={doctorName}
+                    onChange={(e) => setDoctorName(e.target.value)}
+                    sx={{ mb: 3 }}
+                    placeholder="Dr. Smith"
+                  />
+
+                  <TextField
+                    fullWidth
+                    label="Diagnosis (optional)"
+                    value={diagnosis}
+                    onChange={(e) => setDiagnosis(e.target.value)}
+                    sx={{ mb: 3 }}
+                    placeholder="Enter diagnosis or findings"
+                  />
+
+                  <TextField
+                    fullWidth
+                    label="Treatment (optional)"
+                    value={treatment}
+                    onChange={(e) => setTreatment(e.target.value)}
+                    sx={{ mb: 3 }}
+                    placeholder="Enter prescribed treatment"
+                  />
+                </>
+              )}
 
               <TextField
                 fullWidth
@@ -477,26 +688,26 @@ function MedicineTrackPage() {
                 onClick={handleSubmit}
                 disabled={loading}
               >
-                {loading ? t('common.loading') : t('health.logMedicine')}
+                {loading ? t('common.loading') : `Log ${activityType.charAt(0).toUpperCase() + activityType.slice(1)}`}
               </Button>
             </Paper>
 
-            {/* Recent Medicines */}
+            {/* Recent Activities */}
             <Paper sx={{ p: 3 }}>
               <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
                 <Typography variant="h6" fontWeight="600">
-                  {t('health.recentMedicines')}
+                  Recent {activityType.charAt(0).toUpperCase() + activityType.slice(1)} Records
                 </Typography>
-                <IconButton onClick={loadRecentMedicines} disabled={medicinesLoading}>
+                <IconButton onClick={loadRecentActivities} disabled={activitiesLoading}>
                   <Refresh />
                 </IconButton>
               </Box>
 
-              {medicinesLoading ? (
+              {activitiesLoading ? (
                 <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
                   <CircularProgress size={30} />
                 </Box>
-              ) : recentMedicines.length === 0 ? (
+              ) : recentActivities.length === 0 ? (
                 <Box sx={{ textAlign: 'center', py: 4 }}>
                   <Typography variant="body2" color="text.secondary">
                     {t('noEntries')}
@@ -504,61 +715,52 @@ function MedicineTrackPage() {
                 </Box>
               ) : (
                 <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-                  {recentMedicines.map((activity, index) => {
-                    const data = activity.data as MedicineData;
-                    if (!data || !data.medicineName) {
-                      console.warn('[Medicine] Activity missing medicineName:', activity);
-                      return null;
-                    }
-                    return (
-                      <motion.div
-                        key={activity.id}
-                        initial={{ opacity: 0, y: 10 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        transition={{ duration: 0.2, delay: index * 0.05 }}
-                      >
-                        <Card variant="outlined">
-                          <CardContent>
-                            <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
-                              <Box sx={{ mt: 0.5 }}>
-                                <MedicalServices color="error" />
-                              </Box>
-                              <Box sx={{ flex: 1 }}>
-                                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
-                                  <Typography variant="body1" fontWeight="600">
-                                    {data.medicineName}
-                                  </Typography>
-                                  <Chip
-                                    label={formatDistanceToNow(new Date(activity.timestamp), { addSuffix: true })}
-                                    size="small"
-                                    variant="outlined"
-                                  />
-                                </Box>
-                                <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
-                                  {getMedicineDetails(activity)}
+                  {recentActivities.map((activity, index) => (
+                    <motion.div
+                      key={activity.id}
+                      initial={{ opacity: 0, y: 10 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{ duration: 0.2, delay: index * 0.05 }}
+                    >
+                      <Card variant="outlined">
+                        <CardContent>
+                          <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
+                            <Box sx={{ mt: 0.5 }}>{getActivityIcon(activity.type)}</Box>
+                            <Box sx={{ flex: 1 }}>
+                              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
+                                <Typography variant="body1" fontWeight="600">
+                                  {getActivityTitle(activity)}
                                 </Typography>
-                                {activity.notes && (
-                                  <Typography variant="body2" color="text.secondary" sx={{ fontStyle: 'italic' }}>
-                                    {activity.notes}
-                                  </Typography>
-                                )}
-                              </Box>
-                              <Box sx={{ display: 'flex', gap: 0.5 }}>
-                                <IconButton
+                                <Chip
+                                  label={formatDistanceToNow(new Date(activity.timestamp), { addSuffix: true })}
                                   size="small"
-                                  color="error"
-                                  onClick={() => handleDeleteClick(activity.id)}
-                                  disabled={loading}
-                                >
-                                  <Delete />
-                                </IconButton>
+                                  variant="outlined"
+                                />
                               </Box>
+                              <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+                                {getActivityDetails(activity)}
+                              </Typography>
+                              {activity.notes && (
+                                <Typography variant="body2" color="text.secondary" sx={{ fontStyle: 'italic' }}>
+                                  {activity.notes}
+                                </Typography>
+                              )}
                             </Box>
-                          </CardContent>
-                        </Card>
-                      </motion.div>
-                    );
-                  })}
+                            <Box sx={{ display: 'flex', gap: 0.5 }}>
+                              <IconButton
+                                size="small"
+                                color="error"
+                                onClick={() => handleDeleteClick(activity.id)}
+                                disabled={loading}
+                              >
+                                <Delete />
+                              </IconButton>
+                            </Box>
+                          </Box>
+                        </CardContent>
+                      </Card>
+                    </motion.div>
+                  ))}
                 </Box>
               )}
             </Paper>
@@ -566,15 +768,10 @@ function MedicineTrackPage() {
         </Box>
 
         {/* Delete Confirmation Dialog */}
-        <Dialog
-          open={deleteDialogOpen}
-          onClose={() => setDeleteDialogOpen(false)}
-        >
+        <Dialog open={deleteDialogOpen} onClose={() => setDeleteDialogOpen(false)}>
           <DialogTitle>{t('deleteEntry')}</DialogTitle>
           <DialogContent>
-            <DialogContentText>
-              {t('confirmDelete')}
-            </DialogContentText>
+            <DialogContentText>{t('confirmDelete')}</DialogContentText>
           </DialogContent>
           <DialogActions>
             <Button onClick={() => setDeleteDialogOpen(false)} disabled={loading}>
@@ -598,4 +795,4 @@ function MedicineTrackPage() {
   );
 }
 
-export default withErrorBoundary(MedicineTrackPage, 'form');
+export default withErrorBoundary(MedicalTrackPage, 'form');