Vehicle drop down and Gas Station fixes

frontend/src/features/vehicles/pages/VehiclesPage.tsx

@@ -17,9 +17,12 @@ import { Card } from '../../../shared-minimal/components/Card';
 import { VehicleListSuspense, FormSuspense } from '../../../components/SuspenseWrappers';
 import { useAppStore } from '../../../core/store';
 import { useNavigate } from 'react-router-dom';
+import { useQueryClient } from '@tanstack/react-query';
+import { vehiclesApi } from '../api/vehicles.api';
 
 export const VehiclesPage: React.FC = () => {
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
   const { data: vehicles, isLoading } = useVehicles();
   const setSelectedVehicle = useAppStore(state => state.setSelectedVehicle);
   
@@ -42,6 +45,7 @@ export const VehiclesPage: React.FC = () => {
   
   const [isPending, startTransition] = useTransition();
   const [showForm, setShowForm] = useState(false);
+  const [stagedImageFile, setStagedImageFile] = useState<File | null>(null);
 
   // Update search vehicles when optimistic vehicles change
   useEffect(() => {
@@ -64,7 +68,37 @@ export const VehiclesPage: React.FC = () => {
   };
 
   const handleCreateVehicle = async (data: any) => {
-    await optimisticCreateVehicle(data);
+    const newVehicle = await optimisticCreateVehicle(data);
+
+    console.log('[VehiclesPage] Vehicle created:', newVehicle?.id, 'stagedImageFile:', !!stagedImageFile);
+
+    // Upload staged image if one was selected during creation
+    if (stagedImageFile && newVehicle?.id) {
+      // Don't upload if ID is temporary (optimistic)
+      if (newVehicle.id.startsWith('temp-')) {
+        console.warn('[VehiclesPage] Cannot upload image - vehicle has temporary ID:', newVehicle.id);
+      } else {
+        try {
+          console.log('[VehiclesPage] Uploading image for vehicle:', newVehicle.id);
+          const updatedVehicle = await vehiclesApi.uploadImage(newVehicle.id, stagedImageFile);
+          console.log('[VehiclesPage] Image uploaded, updated vehicle:', updatedVehicle);
+          // Directly update the cache with the vehicle that has imageUrl
+          queryClient.setQueryData(['vehicles'], (old: typeof vehicles) => {
+            if (!old || !Array.isArray(old)) return old;
+            return old.map(v => v.id === updatedVehicle.id ? updatedVehicle : v);
+          });
+        } catch (err: any) {
+          console.error('[VehiclesPage] Failed to upload vehicle image:', {
+            error: err,
+            message: err?.message,
+            response: err?.response?.data,
+            status: err?.response?.status
+          });
+        }
+      }
+    }
+
+    setStagedImageFile(null);
     // Use transition for UI state change
     startTransition(() => {
       setShowForm(false);
@@ -150,6 +184,7 @@ export const VehiclesPage: React.FC = () => {
               onSubmit={handleCreateVehicle}
               onCancel={() => startTransition(() => setShowForm(false))}
               loading={isOptimisticPending}
+              onStagedImage={setStagedImageFile}
             />
           </Card>
         </FormSuspense>