From 98a4a62ea51276eb414ca7772fd721d2ca00c261 Mon Sep 17 00:00:00 2001
From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com>
Date: Fri, 2 Jan 2026 22:25:35 -0600
Subject: [PATCH] fix: add vehicle button opens add vehicle form (refs #2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add onAddVehicle prop to DashboardScreen
- Mobile: triggers setShowAddVehicle(true) in App.tsx
- Desktop: navigates to /garage/vehicles with showAddForm state
- VehiclesPage auto-opens form when receiving showAddForm state

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/App.tsx                              |  1 +
 .../dashboard/components/DashboardScreen.tsx      |  8 +++++---
 .../features/dashboard/pages/DashboardPage.tsx    |  5 +++++
 .../src/features/vehicles/pages/VehiclesPage.tsx  | 15 +++++++++++++--
 4 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 06d6ad4..945c56c 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -633,6 +633,7 @@ function App() {
                   <DashboardFeature
                     onNavigate={navigateToScreen}
                     onVehicleClick={handleVehicleSelect}
+                    onAddVehicle={() => setShowAddVehicle(true)}
                   />
                 </MobileErrorBoundary>
               </motion.div>
diff --git a/frontend/src/features/dashboard/components/DashboardScreen.tsx b/frontend/src/features/dashboard/components/DashboardScreen.tsx
index 7a8c585..ae7d827 100644
--- a/frontend/src/features/dashboard/components/DashboardScreen.tsx
+++ b/frontend/src/features/dashboard/components/DashboardScreen.tsx
@@ -20,12 +20,14 @@ interface DashboardScreenProps {
   onNavigate?: (screen: MobileScreen, metadata?: Record<string, any>) => void;
   onVehicleClick?: (vehicle: Vehicle) => void;
   onViewMaintenance?: () => void;
+  onAddVehicle?: () => void;
 }
 
 export const DashboardScreen: React.FC<DashboardScreenProps> = ({
   onNavigate,
   onVehicleClick,
-  onViewMaintenance
+  onViewMaintenance,
+  onAddVehicle
 }) => {
   const { data: summary, isLoading: summaryLoading, error: summaryError } = useDashboardSummary();
   const { data: vehiclesNeedingAttention, isLoading: attentionLoading, error: attentionError } = useVehiclesNeedingAttention();
@@ -87,7 +89,7 @@ export const DashboardScreen: React.FC<DashboardScreenProps> = ({
             <Button
               variant="primary"
               size="lg"
-              onClick={() => onNavigate?.('Vehicles')}
+              onClick={onAddVehicle ?? (() => onNavigate?.('Vehicles'))}
             >
               Add Your First Vehicle
             </Button>
@@ -118,7 +120,7 @@ export const DashboardScreen: React.FC<DashboardScreenProps> = ({
 
       {/* Quick Actions */}
       <QuickActions
-        onAddVehicle={() => onNavigate?.('Vehicles')}
+        onAddVehicle={onAddVehicle ?? (() => onNavigate?.('Vehicles'))}
         onLogFuel={() => onNavigate?.('Log Fuel')}
         onViewMaintenance={onViewMaintenance ?? (() => onNavigate?.('Vehicles'))}
         onViewVehicles={() => onNavigate?.('Vehicles')}
diff --git a/frontend/src/features/dashboard/pages/DashboardPage.tsx b/frontend/src/features/dashboard/pages/DashboardPage.tsx
index f539271..39bd4d7 100644
--- a/frontend/src/features/dashboard/pages/DashboardPage.tsx
+++ b/frontend/src/features/dashboard/pages/DashboardPage.tsx
@@ -43,6 +43,10 @@ export const DashboardPage: React.FC = () => {
     navigate('/garage/maintenance');
   };
 
+  const handleAddVehicle = () => {
+    navigate('/garage/vehicles', { state: { showAddForm: true } });
+  };
+
   return (
     <Box sx={{ py: 2 }}>
       <Typography variant="h4" sx={{ fontWeight: 700, color: 'text.primary', mb: 4 }}>
@@ -52,6 +56,7 @@ export const DashboardPage: React.FC = () => {
         onNavigate={handleNavigate}
         onVehicleClick={handleVehicleClick}
         onViewMaintenance={handleViewMaintenance}
+        onAddVehicle={handleAddVehicle}
       />
     </Box>
   );
diff --git a/frontend/src/features/vehicles/pages/VehiclesPage.tsx b/frontend/src/features/vehicles/pages/VehiclesPage.tsx
index c060903..f0873d4 100644
--- a/frontend/src/features/vehicles/pages/VehiclesPage.tsx
+++ b/frontend/src/features/vehicles/pages/VehiclesPage.tsx
@@ -3,7 +3,7 @@
  * @ai-context Enhanced with Suspense, useOptimistic, and useTransition
  */
 
-import React, { useState, useTransition, useMemo } from 'react';
+import React, { useState, useTransition, useMemo, useEffect } from 'react';
 import { Box, Typography, Grid, Button as MuiButton, TextField, IconButton } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import SearchIcon from '@mui/icons-material/Search';
@@ -16,12 +16,13 @@ import { VehicleForm } from '../components/VehicleForm';
 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 { useNavigate, useLocation } 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 location = useLocation();
   const queryClient = useQueryClient();
   const { data: vehicles, isLoading } = useVehicles();
   const setSelectedVehicle = useAppStore(state => state.setSelectedVehicle);
@@ -52,6 +53,16 @@ export const VehiclesPage: React.FC = () => {
   const [showForm, setShowForm] = useState(false);
   const [stagedImageFile, setStagedImageFile] = useState<File | null>(null);
 
+  // Auto-show form if navigated with showAddForm state (from dashboard)
+  useEffect(() => {
+    const state = location.state as { showAddForm?: boolean } | null;
+    if (state?.showAddForm) {
+      setShowForm(true);
+      // Clear the state to prevent re-triggering on refresh
+      navigate(location.pathname, { replace: true, state: {} });
+    }
+  }, [location.state, location.pathname, navigate]);
+
   const handleSelectVehicle = (id: string) => {
     // Use transition for navigation to avoid blocking UI
     startTransition(() => {