Gas Station Feature

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

@@ -10,10 +10,11 @@ import { VehicleSelector } from './VehicleSelector';
 import { DistanceInput } from './DistanceInput';
 import { FuelTypeSelector } from './FuelTypeSelector';
 import { UnitSystemDisplay } from './UnitSystemDisplay';
-import { LocationInput } from './LocationInput';
+import { StationPicker } from './StationPicker';
 import { CostCalculator } from './CostCalculator';
 import { useFuelLogs } from '../hooks/useFuelLogs';
 import { useUserSettings } from '../hooks/useUserSettings';
+import { useGeolocation } from '../../stations/hooks/useGeolocation';
 import { CreateFuelLogRequest, FuelType } from '../types/fuel-logs.types';
 
 const schema = z.object({
@@ -39,6 +40,9 @@ const FuelLogFormComponent: React.FC<{ onSuccess?: () => void; initial?: Partial
   const [useOdometer, setUseOdometer] = useState(false);
   const formInitialized = useRef(false);
 
+  // Get user location for nearby station search
+  const { coordinates: userLocation } = useGeolocation();
+
   const { control, handleSubmit, watch, setValue, reset, formState: { errors, isValid } } = useForm<CreateFuelLogRequest>({
     resolver: zodResolver(schema),
     mode: 'onChange',
@@ -282,7 +286,12 @@ const FuelLogFormComponent: React.FC<{ onSuccess?: () => void; initial?: Partial
             </Grid>
             <Grid item xs={12}>
               <Controller name="locationData" control={control} render={({ field }) => (
-                <LocationInput value={field.value as any} onChange={field.onChange as any} placeholder="Station location (optional)" />
+                <StationPicker
+                  value={field.value as any}
+                  onChange={field.onChange as any}
+                  userLocation={userLocation}
+                  placeholder="Station location (optional)"
+                />
               )} />
             </Grid>
             <Grid item xs={12}>