Vehicle drop down and Gas Station fixes

frontend/src/features/vehicles/components/VehicleForm.tsx

@@ -61,6 +61,7 @@ interface VehicleFormProps {
   initialData?: Partial<CreateVehicleRequest> & { id?: string; imageUrl?: string };
   loading?: boolean;
   onImageUpdate?: (vehicle: Vehicle) => void;
+  onStagedImage?: (file: File | null) => void;
 }
 
 export const VehicleForm: React.FC<VehicleFormProps> = ({
@@ -69,6 +70,7 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
   initialData,
   loading,
   onImageUpdate,
+  onStagedImage,
 }) => {
   const [years, setYears] = useState<number[]>([]);
   const [makes, setMakes] = useState<string[]>([]);
@@ -84,6 +86,7 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
   const hasInitialized = useRef(false);
   const isInitializing = useRef(false);
   const [currentImageUrl, setCurrentImageUrl] = useState<string | undefined>(initialData?.imageUrl);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
 
   const isEditMode = !!initialData?.id;
   const vehicleId = initialData?.id;
@@ -340,51 +343,69 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
   }, [watchedYear, selectedMake, selectedModel, watch('trimLevel')]);
 
   const handleImageUpload = async (file: File) => {
-    if (!vehicleId) return;
-    const updated = await vehiclesApi.uploadImage(vehicleId, file);
-    setCurrentImageUrl(updated.imageUrl);
-    onImageUpdate?.(updated);
+    if (isEditMode && vehicleId) {
+      // Edit mode: upload immediately to server
+      const updated = await vehiclesApi.uploadImage(vehicleId, file);
+      setCurrentImageUrl(updated.imageUrl);
+      onImageUpdate?.(updated);
+    } else {
+      // Create mode: stage file locally for upload after vehicle creation
+      const objectUrl = URL.createObjectURL(file);
+      setPreviewUrl(objectUrl);
+      onStagedImage?.(file);
+    }
   };
 
   const handleImageRemove = async () => {
-    if (!vehicleId) return;
-    await vehiclesApi.deleteImage(vehicleId);
-    setCurrentImageUrl(undefined);
-    if (initialData) {
-      onImageUpdate?.({ ...initialData, imageUrl: undefined } as Vehicle);
+    if (isEditMode && vehicleId) {
+      // Edit mode: delete from server
+      await vehiclesApi.deleteImage(vehicleId);
+      setCurrentImageUrl(undefined);
+      if (initialData) {
+        onImageUpdate?.({ ...initialData, imageUrl: undefined } as Vehicle);
+      }
+    } else {
+      // Create mode: clear staged file
+      if (previewUrl) {
+        URL.revokeObjectURL(previewUrl);
+      }
+      setPreviewUrl(null);
+      onStagedImage?.(null);
     }
   };
 
+  // Watch current form values for image preview (uses make for logo fallback)
+  const watchedColor = watch('color');
+  const currentMake = watch('make') || initialData?.make;
+
   const vehicleForImage: Vehicle = {
     id: vehicleId || '',
     userId: '',
     vin: initialData?.vin || '',
-    make: initialData?.make,
+    make: currentMake,
     model: initialData?.model,
     year: initialData?.year,
-    color: initialData?.color,
+    color: watchedColor || initialData?.color,
     odometerReading: initialData?.odometerReading || 0,
     isActive: true,
     createdAt: '',
     updatedAt: '',
-    imageUrl: currentImageUrl,
+    imageUrl: previewUrl || currentImageUrl,
   };
 
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-      {isEditMode && (
-        <div className="mb-6">
-          <label className="block text-sm font-medium text-gray-700 mb-2">
-            Vehicle Photo
-          </label>
-          <VehicleImageUpload
-            vehicle={vehicleForImage}
-            onUpload={handleImageUpload}
-            onRemove={handleImageRemove}
-            disabled={loading || loadingDropdowns}
-          />
-        </div>
-      )}
+      <div className="mb-6">
+        <label className="block text-sm font-medium text-gray-700 mb-2">
+          Vehicle Photo
+        </label>
+        <VehicleImageUpload
+          vehicle={vehicleForImage}
+          onUpload={handleImageUpload}
+          onRemove={handleImageRemove}
+          disabled={loading || loadingDropdowns}
+        />
+      </div>
 
       <div>
         <label className="block text-sm font-medium text-gray-700 mb-1">