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')})`}
-                    type="number"
+                    label={t('feeding.amount')}
+                    type="volume"
                     value={amount}
-                    onChange={(e) => setAmount(e.target.value)}
+                    onChange={(metricValue) => setAmount(metricValue)}
                     sx={{ mb: 3 }}
                   />