Fixed mobile form

frontend/src/features/fuel-logs/components/FuelLogForm.tsx

@@ -36,7 +36,7 @@ const FuelLogFormComponent: React.FC<{ onSuccess?: () => void; initial?: Partial
   const [useOdometer, setUseOdometer] = useState(false);
   const formInitialized = useRef(false);
 
-  const { control, handleSubmit, watch, setValue, formState: { errors, isValid } } = useForm<CreateFuelLogRequest>({
+  const { control, handleSubmit, watch, setValue, reset, formState: { errors, isValid } } = useForm<CreateFuelLogRequest>({
     resolver: zodResolver(schema),
     mode: 'onChange',
     defaultValues: {
@@ -47,14 +47,22 @@ const FuelLogFormComponent: React.FC<{ onSuccess?: () => void; initial?: Partial
   });
 
   // DEBUG: Log component renders and form state
-  console.log('[FuelLogForm] Render - formInitialized:', formInitialized.current, 'isLoading:', isLoading);
+  console.log('[FuelLogForm] Render', {
+    at: new Date().toISOString(),
+    formInitialized: formInitialized.current,
+    isLoading,
+  });
 
   // Prevent form reset after initial load
   useEffect(() => {
+    console.log('[FuelLogForm] Mounted');
     if (!formInitialized.current) {
       formInitialized.current = true;
       console.log('[FuelLogForm] Form initialized');
     }
+    return () => {
+      console.log('[FuelLogForm] Unmounted');
+    };
   }, []);
 
   // DEBUG: Watch for form value changes
@@ -63,6 +71,16 @@ const FuelLogFormComponent: React.FC<{ onSuccess?: () => void; initial?: Partial
     console.log('[FuelLogForm] Vehicle ID changed:', vehicleId);
   }, [vehicleId]);
 
+  // DEBUG: Track dirty-state changes to detect resets
+  useEffect(() => {
+    const subscription = watch((_, info) => {
+      if (info.name) {
+        console.log('[FuelLogForm] Field change', { name: info.name, type: info.type });
+      }
+    });
+    return () => subscription.unsubscribe();
+  }, [watch]);
+
   const watched = watch(['fuelUnits', 'costPerUnit']);
   const [fuelUnitsRaw, costPerUnitRaw] = watched as [string | number | undefined, string | number | undefined];
 
@@ -83,6 +101,19 @@ const FuelLogFormComponent: React.FC<{ onSuccess?: () => void; initial?: Partial
       tripDistance: useOdometer ? undefined : data.tripDistance,
     };
     await createFuelLog(payload);
+    // Reset form to initial defaults after successful create
+    reset({
+      vehicleId: undefined as any,
+      dateTime: new Date().toISOString().slice(0, 16),
+      odometerReading: undefined as any,
+      tripDistance: undefined as any,
+      fuelType: FuelType.GASOLINE,
+      fuelGrade: undefined as any,
+      fuelUnits: undefined as any,
+      costPerUnit: undefined as any,
+      locationData: undefined as any,
+      notes: undefined as any,
+    } as any);
     onSuccess?.();
   };
 
@@ -178,4 +209,3 @@ const FuelLogFormComponent: React.FC<{ onSuccess?: () => void; initial?: Partial
 };
 
 export const FuelLogForm = memo(FuelLogFormComponent);
-