fix: Connect measurement unit preference to backend storage

Fixed measurement unit not persisting across page refreshes:

- Settings page now includes measurementUnit in the preferences object when saving
- MeasurementUnitSelector now accepts value/onChange props for controlled usage
- Settings state properly loads and saves measurementUnit from user preferences
- UnitInput component will now correctly read imperial/metric from user.preferences.measurementUnit

Previously, measurementUnit was only saved to localStorage but not synced to backend,
causing UnitInput to always default to metric since it reads from user.preferences.

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

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

maternal-web/app/settings/page.tsx

@@ -28,6 +28,7 @@ export default function SettingsPage() {
     notifications: true,
     emailUpdates: false,
     darkMode: false,
+    measurementUnit: 'metric' as 'metric' | 'imperial',
   });
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -41,6 +42,7 @@ export default function SettingsPage() {
         notifications: user.preferences.notifications ?? true,
         emailUpdates: user.preferences.emailUpdates ?? false,
         darkMode: user.preferences.darkMode ?? false,
+        measurementUnit: (user.preferences.measurementUnit as 'metric' | 'imperial') || 'metric',
       });
       setTimeFormat(user.preferences.timeFormat || '12h');
     }
@@ -169,7 +171,10 @@ export default function SettingsPage() {
             <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, mt: 2 }}>
               <LanguageSelector />
               <Divider />
-              <MeasurementUnitSelector />
+              <MeasurementUnitSelector
+                value={settings.measurementUnit}
+                onChange={(value) => setSettings(prev => ({ ...prev, measurementUnit: value }))}
+              />
               <Divider />
               <TimeZoneSelector value={timezone} onChange={setTimezone} />
               <Divider />

maternal-web/components/forms/UnitInput.tsx

@@ -44,6 +44,9 @@ export function UnitInput({ type, value, onChange, ...textFieldProps }: UnitInpu
   const measurementSystem: MeasurementSystem =
     (user?.preferences?.measurementUnit as MeasurementSystem) || 'metric';
 
+  // Debug logging
+  console.log('[UnitInput] Measurement system:', measurementSystem, 'User preferences:', user?.preferences);
+
   // Get the display unit symbol
   const unitSymbol = getUnitSymbol(type, measurementSystem);
 

maternal-web/components/settings/MeasurementUnitSelector.tsx

@@ -17,6 +17,8 @@ interface MeasurementUnitSelectorProps {
   variant?: 'standard' | 'outlined' | 'filled';
   fullWidth?: boolean;
   showDescription?: boolean;
+  value?: MeasurementSystem;
+  onChange?: (value: MeasurementSystem) => void;
 }
 
 /**
@@ -26,19 +28,25 @@ export function MeasurementUnitSelector({
   variant = 'outlined',
   fullWidth = true,
   showDescription = true,
+  value,
+  onChange,
 }: MeasurementUnitSelectorProps) {
   const { measurementSystem, setMeasurementSystem } = useLocale();
   const { t } = useTranslation('settings');
-  const [selectedSystem, setSelectedSystem] = useState<MeasurementSystem>(measurementSystem);
 
-  useEffect(() => {
+  // Use controlled value if provided, otherwise use hook value
-    setSelectedSystem(measurementSystem);
+  const selectedSystem = value !== undefined ? value : measurementSystem;
-  }, [measurementSystem]);
 
   const handleSystemChange = (event: SelectChangeEvent) => {
     const newSystem = event.target.value as MeasurementSystem;
-    setSelectedSystem(newSystem);
+
-    setMeasurementSystem(newSystem);
+    // If onChange is provided (controlled), use it
+    if (onChange) {
+      onChange(newSystem);
+    } else {
+      // Otherwise use the hook (uncontrolled)
+      setMeasurementSystem(newSystem);
+    }
   };
 
   return (