feat: Add unit conversion support to tracking pages

Implemented automatic unit conversions for feeding and medicine tracking:

- Created UnitInput component for automatic ml↔oz conversions
- Updated Feeding page to use UnitInput for bottle amounts
- Updated Medicine page to use UnitInput for liquid medicine dosages
- All values stored in metric (ml) in database
- Display values automatically converted based on user's measurement preference
- Supports voice input with proper unit handling

Component features:
- Automatic conversion between metric and imperial
- User preference-based display
- Consistent metric storage
- Type safety with TypeScript

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

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

maternal-web/app/track/feeding/page.tsx

@@ -53,6 +53,7 @@ import { FormSkeleton, ActivityListSkeleton } from '@/components/common/LoadingS
 import { motion } from 'framer-motion';
 import { useLocalizedDate } from '@/hooks/useLocalizedDate';
 import { useTranslation } from '@/hooks/useTranslation';
+import { UnitInput } from '@/components/forms/UnitInput';
 
 interface FeedingData {
   feedingType: 'breast' | 'bottle' | 'solid';
@@ -80,7 +81,7 @@ function FeedingTrackPage() {
   const [timerSeconds, setTimerSeconds] = useState(0);
 
   // Bottle feeding state
-  const [amount, setAmount] = useState<string>('');
+  const [amount, setAmount] = useState<number>(0); // Stored in ml (metric)
   const [bottleType, setBottleType] = useState<'formula' | 'breastmilk' | 'other'>('formula');
 
   // Solid food state
@@ -218,7 +219,7 @@ function FeedingTrackPage() {
         data.side = side;
         data.duration = duration || Math.floor(timerSeconds / 60);
       } else if (feedingType === 'bottle') {
-        data.amount = parseFloat(amount);
+        data.amount = amount; // Already in ml (metric)
         data.bottleType = bottleType;
       } else if (feedingType === 'solid') {
         data.foodDescription = foodDescription;
@@ -252,7 +253,7 @@ function FeedingTrackPage() {
     setDuration(0);
     setTimerSeconds(0);
     setIsTimerRunning(false);
-    setAmount('');
+    setAmount(0);
     setBottleType('formula');
     setFoodDescription('');
     setAmountDescription('');
@@ -377,7 +378,7 @@ function FeedingTrackPage() {
                   // Auto-fill form with voice data
                   if (data.type === 'bottle' && data.amount) {
                     setFeedingType('bottle');
-                    setAmount(data.amount.toString());
+                    setAmount(typeof data.amount === 'number' ? data.amount : parseFloat(data.amount));
                   } else if (data.type?.includes('breast')) {
                     setFeedingType('breast');
                     if (data.side) setSide(data.side);
@@ -506,12 +507,12 @@ function FeedingTrackPage() {
               {/* Bottle Form */}
               {feedingType === 'bottle' && (
                 <Box>
-                  <TextField
+                  <UnitInput
                     fullWidth
-                    label={`${t('feeding.amount')} (${t('feeding.units.ml')})`}
+                    label={t('feeding.amount')}
-                    type="number"
+                    type="volume"
                     value={amount}
-                    onChange={(e) => setAmount(e.target.value)}
+                    onChange={(metricValue) => setAmount(metricValue)}
                     sx={{ mb: 3 }}
                   />
 

maternal-web/app/track/medicine/page.tsx

@@ -45,6 +45,7 @@ import { FormSkeleton, ActivityListSkeleton } from '@/components/common/LoadingS
 import { motion } from 'framer-motion';
 import { useLocalizedDate } from '@/hooks/useLocalizedDate';
 import { useTranslation } from '@/hooks/useTranslation';
+import { UnitInput } from '@/components/forms/UnitInput';
 
 interface MedicineData {
   medicineName: string;
@@ -64,7 +65,8 @@ function MedicineTrackPage() {
 
   // Medicine state
   const [medicineName, setMedicineName] = useState<string>('');
-  const [dosage, setDosage] = useState<string>('');
+  const [dosage, setDosage] = useState<number>(0); // For ml/liquid - stored in ml
+  const [dosageText, setDosageText] = useState<string>(''); // For non-liquid units
   const [unit, setUnit] = useState<string>('ml');
   const [route, setRoute] = useState<'oral' | 'topical' | 'injection' | 'other'>('oral');
   const [reason, setReason] = useState<string>('');
@@ -146,7 +148,8 @@ function MedicineTrackPage() {
       return;
     }
 
-    if (!dosage) {
+    const dosageValue = unit === 'ml' ? dosage : dosageText;
+    if (!dosageValue || (unit === 'ml' && dosage === 0) || (unit !== 'ml' && !dosageText)) {
       setError('Please enter dosage');
       return;
     }
@@ -157,7 +160,7 @@ function MedicineTrackPage() {
 
       const data: MedicineData = {
         medicineName,
-        dosage,
+        dosage: unit === 'ml' ? dosage.toString() : dosageText,
         unit,
         route,
         reason: reason || undefined,
@@ -187,7 +190,8 @@ function MedicineTrackPage() {
 
   const resetForm = () => {
     setMedicineName('');
-    setDosage('');
+    setDosage(0);
+    setDosageText('');
     setUnit('ml');
     setRoute('oral');
     setReason('');
@@ -297,8 +301,14 @@ function MedicineTrackPage() {
                   const data = result.structuredData;
                   // Auto-fill form with voice data
                   if (data.medicineName) setMedicineName(data.medicineName);
-                  if (data.dosage) setDosage(data.dosage.toString());
                   if (data.unit) setUnit(data.unit);
+                  if (data.dosage) {
+                    if (data.unit === 'ml') {
+                      setDosage(typeof data.dosage === 'number' ? data.dosage : parseFloat(data.dosage));
+                    } else {
+                      setDosageText(data.dosage.toString());
+                    }
+                  }
                   if (data.route) setRoute(data.route);
                   if (data.reason) setReason(data.reason);
                 }
@@ -358,20 +368,40 @@ function MedicineTrackPage() {
               />
 
               <Box sx={{ display: 'flex', gap: 2, mb: 3 }}>
-                <TextField
+                {unit === 'ml' ? (
-                  fullWidth
+                  <UnitInput
-                  label="Dosage"
+                    fullWidth
-                  value={dosage}
+                    label="Dosage"
-                  onChange={(e) => setDosage(e.target.value)}
+                    type="volume"
-                  placeholder="e.g., 5, 2.5"
+                    value={dosage}
-                  required
+                    onChange={(metricValue) => setDosage(metricValue)}
-                />
+                    required
+                  />
+                ) : (
+                  <TextField
+                    fullWidth
+                    label="Dosage"
+                    value={dosageText}
+                    onChange={(e) => setDosageText(e.target.value)}
+                    placeholder="e.g., 5, 2.5"
+                    required
+                  />
+                )}
 
                 <FormControl fullWidth>
                   <InputLabel>Unit</InputLabel>
                   <Select
                     value={unit}
-                    onChange={(e) => setUnit(e.target.value)}
+                    onChange={(e) => {
+                      const newUnit = e.target.value;
+                      setUnit(newUnit);
+                      // Reset dosage when switching units
+                      if (newUnit === 'ml') {
+                        setDosageText('');
+                      } else {
+                        setDosage(0);
+                      }
+                    }}
                     label="Unit"
                   >
                     <MenuItem value="ml">ml</MenuItem>

maternal-web/components/forms/UnitInput.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import { TextField, InputAdornment, TextFieldProps } from '@mui/material';
+import { useAuth } from '@/lib/auth/AuthContext';
+import {
+  convertVolume,
+  convertVolumeToMl,
+  convertWeight,
+  convertWeightToKg,
+  convertHeight,
+  convertHeightToCm,
+  getUnitSymbol
+} from '@/lib/utils/unitConversion';
+import { MeasurementSystem } from '@/hooks/useLocale';
+
+type UnitType = 'volume' | 'weight' | 'height';
+
+interface UnitInputProps extends Omit<TextFieldProps, 'onChange' | 'value'> {
+  /**
+   * The type of measurement (volume, weight, or height)
+   */
+  type: UnitType;
+
+  /**
+   * The value in metric units (ml, kg, or cm)
+   */
+  value: number | string;
+
+  /**
+   * Callback when value changes, always returns metric value
+   */
+  onChange: (metricValue: number) => void;
+}
+
+/**
+ * UnitInput - A text field that automatically handles unit conversions
+ *
+ * Storage: Always stores values in metric (ml, kg, cm) in the database
+ * Display: Shows values in user's preferred measurement system
+ * Input: Accepts values in user's preferred units, converts to metric
+ */
+export function UnitInput({ type, value, onChange, ...textFieldProps }: UnitInputProps) {
+  const { user } = useAuth();
+  const measurementSystem: MeasurementSystem =
+    (user?.preferences?.measurementUnit as MeasurementSystem) || 'metric';
+
+  // Get the display unit symbol
+  const unitSymbol = getUnitSymbol(type, measurementSystem);
+
+  // Convert metric value to display value
+  const getDisplayValue = (metricValue: number | string): number => {
+    const numericValue = typeof metricValue === 'string' ? parseFloat(metricValue) : metricValue;
+    if (isNaN(numericValue)) return 0;
+
+    switch (type) {
+      case 'volume':
+        return convertVolume(numericValue, measurementSystem).value;
+      case 'weight':
+        return convertWeight(numericValue, measurementSystem).value;
+      case 'height':
+        return convertHeight(numericValue, measurementSystem).value;
+      default:
+        return numericValue;
+    }
+  };
+
+  // Convert display value back to metric
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const displayValue = parseFloat(event.target.value);
+    if (isNaN(displayValue)) {
+      onChange(0);
+      return;
+    }
+
+    let metricValue: number;
+    switch (type) {
+      case 'volume':
+        metricValue = convertVolumeToMl(displayValue, measurementSystem);
+        break;
+      case 'weight':
+        metricValue = convertWeightToKg(displayValue, measurementSystem);
+        break;
+      case 'height':
+        metricValue = convertHeightToCm(displayValue, measurementSystem);
+        break;
+      default:
+        metricValue = displayValue;
+    }
+
+    onChange(metricValue);
+  };
+
+  const displayValue = getDisplayValue(value);
+  const roundedDisplayValue = Math.round(displayValue * 100) / 100; // Round to 2 decimals
+
+  return (
+    <TextField
+      {...textFieldProps}
+      type="number"
+      value={roundedDisplayValue || ''}
+      onChange={handleChange}
+      InputProps={{
+        endAdornment: <InputAdornment position="end">{unitSymbol}</InputAdornment>,
+        ...textFieldProps.InputProps,
+      }}
+      inputProps={{
+        step: type === 'volume' ? '0.1' : '0.01',
+        min: 0,
+        ...textFieldProps.inputProps,
+      }}
+    />
+  );
+}