fix: edit buttons

frontend/src/App.tsx

@@ -265,6 +265,50 @@ const AddVehicleScreen: React.FC<AddVehicleScreenProps> = ({ onBack, onAdded })
   );
 };
 
+interface EditVehicleScreenProps {
+  vehicle: Vehicle;
+  onBack: () => void;
+  onUpdated: () => void;
+}
+
+const EditVehicleScreen: React.FC<EditVehicleScreenProps> = ({ vehicle, onBack, onUpdated }) => {
+  const queryClient = useQueryClient();
+
+  const handleUpdateVehicle = async (data: CreateVehicleRequest) => {
+    try {
+      const { vehiclesApi } = await import('./features/vehicles/api/vehicles.api');
+      await vehiclesApi.update(vehicle.id, data);
+      queryClient.invalidateQueries({ queryKey: ['vehicles'] });
+      onUpdated();
+    } catch (error) {
+      console.error('Failed to update vehicle:', error);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <GlassCard>
+        <div className="p-4">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-lg font-semibold text-slate-800">Edit Vehicle</h2>
+            <button
+              onClick={onBack}
+              className="p-2 hover:bg-gray-100 rounded-full transition-colors"
+            >
+              ✕
+            </button>
+          </div>
+          <VehicleForm
+            initialData={vehicle}
+            onSubmit={handleUpdateVehicle}
+            onCancel={onBack}
+          />
+        </div>
+      </GlassCard>
+    </div>
+  );
+};
+
 function App() {
   const { isLoading, isAuthenticated, user } = useAuth0();
   const location = useLocation();
@@ -440,6 +484,16 @@ function App() {
     navigateToVehicleSubScreen('list', undefined, { source: 'vehicle-added' });
   }, [navigateToVehicleSubScreen]);
 
+  const handleEditVehicle = useCallback(() => {
+    if (selectedVehicle) {
+      navigateToVehicleSubScreen('edit', selectedVehicle.id, { source: 'vehicle-detail' });
+    }
+  }, [navigateToVehicleSubScreen, selectedVehicle]);
+
+  const handleVehicleUpdated = useCallback(() => {
+    navigateToVehicleSubScreen('detail', selectedVehicle?.id, { source: 'vehicle-updated' });
+  }, [navigateToVehicleSubScreen, selectedVehicle]);
+
   // Enhanced debug component
   const DebugInfo = () => (
     <MobileDebugPanel visible={import.meta.env.MODE === 'development'} />
@@ -602,11 +656,18 @@ function App() {
                 <MobileErrorBoundary screenName="Vehicles">
                   {vehicleSubScreen === 'add' || showAddVehicle ? (
                     <AddVehicleScreen onBack={handleBackToList} onAdded={handleVehicleAdded} />
-                  ) : selectedVehicle && (vehicleSubScreen === 'detail') ? (
+                  ) : selectedVehicle && vehicleSubScreen === 'edit' ? (
+                    <EditVehicleScreen
+                      vehicle={selectedVehicle}
+                      onBack={handleBackToList}
+                      onUpdated={handleVehicleUpdated}
+                    />
+                  ) : selectedVehicle && vehicleSubScreen === 'detail' ? (
                     <VehicleDetailMobile
                       vehicle={selectedVehicle}
                       onBack={handleBackToList}
                       onLogFuel={() => navigateToScreen("Log Fuel")}
+                      onEdit={handleEditVehicle}
                     />
                   ) : (
                     <VehiclesMobileScreen