fix: edit buttons

frontend/src/features/vehicles/mobile/VehicleDetailMobile.tsx

@@ -16,6 +16,7 @@ interface VehicleDetailMobileProps {
   vehicle: Vehicle;
   onBack: () => void;
   onLogFuel?: () => void;
+  onEdit?: () => void;
 }
 
 const Section: React.FC<{ title: string; children: React.ReactNode }> = ({
@@ -33,7 +34,8 @@ const Section: React.FC<{ title: string; children: React.ReactNode }> = ({
 export const VehicleDetailMobile: React.FC<VehicleDetailMobileProps> = ({
   vehicle,
   onBack,
-  onLogFuel
+  onLogFuel,
+  onEdit
 }) => {
   const displayName = vehicle.nickname || 
     [vehicle.year, vehicle.make, vehicle.model, vehicle.trimLevel].filter(Boolean).join(' ') || 'Vehicle';
@@ -168,9 +170,15 @@ export const VehicleDetailMobile: React.FC<VehicleDetailMobileProps> = ({
         </Box>
       </Box>
       
-      <Box sx={{ display: 'flex', gap: 1.5, mb: 3 }}>
-        <Button 
+      <Box sx={{ display: 'flex', gap: 1.5, mb: 3, flexWrap: 'wrap' }}>
+        <Button
           variant="contained"
+          onClick={onEdit}
+        >
+          Edit Vehicle
+        </Button>
+        <Button
+          variant="outlined"
           onClick={onLogFuel}
         >
           Add Fuel

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

@@ -3,7 +3,7 @@
  */
 
 import React, { useMemo, useState, useEffect } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
 import { Box, Typography, Button as MuiButton, Divider, FormControl, InputLabel, Select, MenuItem, Table, TableHead, TableRow, TableCell, TableBody, Dialog, DialogTitle, DialogContent, useMediaQuery } from '@mui/material';
 import { useQueryClient } from '@tanstack/react-query';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
@@ -43,9 +43,10 @@ const DetailField: React.FC<{
 export const VehicleDetailPage: React.FC = () => {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
   const [vehicle, setVehicle] = useState<Vehicle | null>(null);
   const [isLoading, setIsLoading] = useState(true);
-  const [isEditing, setIsEditing] = useState(false);
+  const [isEditing, setIsEditing] = useState(() => searchParams.get('edit') === 'true');
   const [error, setError] = useState<string | null>(null);
   const [recordFilter, setRecordFilter] = useState<'All' | 'Fuel Logs' | 'Maintenance' | 'Documents'>('All');
 
@@ -139,11 +140,16 @@ export const VehicleDetailPage: React.FC = () => {
 
   const handleUpdateVehicle = async (data: any) => {
     if (!vehicle) return;
-    
+
     try {
       const updatedVehicle = await vehiclesApi.update(vehicle.id, data);
       setVehicle(updatedVehicle);
       setIsEditing(false);
+      // Clear the edit query param from URL
+      if (searchParams.has('edit')) {
+        searchParams.delete('edit');
+        setSearchParams(searchParams, { replace: true });
+      }
     } catch (err) {
       console.error('Error updating vehicle:', err);
     }
@@ -151,6 +157,11 @@ export const VehicleDetailPage: React.FC = () => {
 
   const handleCancelEdit = () => {
     setIsEditing(false);
+    // Clear the edit query param from URL
+    if (searchParams.has('edit')) {
+      searchParams.delete('edit');
+      setSearchParams(searchParams, { replace: true });
+    }
   };
 
   if (isLoading) {

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

@@ -215,7 +215,7 @@ export const VehiclesPage: React.FC = () => {
             <Grid item xs={12} md={6} lg={4} key={vehicle.id}>
               <VehicleCard
                 vehicle={vehicle}
-                onEdit={(v) => console.log('Edit', v)}
+                onEdit={(v) => navigate(`/garage/vehicles/${v.id}?edit=true`)}
                 onDelete={handleDelete}
                 onSelect={handleSelectVehicle}
               />