From 544428fca2990962b714561b4503f45c6ae6cefe Mon Sep 17 00:00:00 2001
From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com>
Date: Fri, 2 Jan 2026 22:16:47 -0600
Subject: [PATCH] fix: maintenance button navigates to maintenance screen (refs
 #2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add onViewMaintenance prop to DashboardScreen
- Desktop: navigates to /garage/maintenance
- Mobile: falls back to Vehicles (no dedicated mobile maintenance screen)

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/features/dashboard/components/DashboardScreen.tsx   | 6 ++++--
 frontend/src/features/dashboard/pages/DashboardPage.tsx     | 5 +++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/dashboard/components/DashboardScreen.tsx b/frontend/src/features/dashboard/components/DashboardScreen.tsx
index 77e96ea..7a8c585 100644
--- a/frontend/src/features/dashboard/components/DashboardScreen.tsx
+++ b/frontend/src/features/dashboard/components/DashboardScreen.tsx
@@ -19,11 +19,13 @@ import { Vehicle } from '../../vehicles/types/vehicles.types';
 interface DashboardScreenProps {
   onNavigate?: (screen: MobileScreen, metadata?: Record<string, any>) => void;
   onVehicleClick?: (vehicle: Vehicle) => void;
+  onViewMaintenance?: () => void;
 }
 
 export const DashboardScreen: React.FC<DashboardScreenProps> = ({
   onNavigate,
-  onVehicleClick
+  onVehicleClick,
+  onViewMaintenance
 }) => {
   const { data: summary, isLoading: summaryLoading, error: summaryError } = useDashboardSummary();
   const { data: vehiclesNeedingAttention, isLoading: attentionLoading, error: attentionError } = useVehiclesNeedingAttention();
@@ -118,7 +120,7 @@ export const DashboardScreen: React.FC<DashboardScreenProps> = ({
       <QuickActions
         onAddVehicle={() => onNavigate?.('Vehicles')}
         onLogFuel={() => onNavigate?.('Log Fuel')}
-        onViewMaintenance={() => onNavigate?.('Vehicles')} // Navigate to vehicles then maintenance
+        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 29c9451..f539271 100644
--- a/frontend/src/features/dashboard/pages/DashboardPage.tsx
+++ b/frontend/src/features/dashboard/pages/DashboardPage.tsx
@@ -39,6 +39,10 @@ export const DashboardPage: React.FC = () => {
     navigate(`/garage/vehicles/${vehicle.id}`);
   };
 
+  const handleViewMaintenance = () => {
+    navigate('/garage/maintenance');
+  };
+
   return (
     <Box sx={{ py: 2 }}>
       <Typography variant="h4" sx={{ fontWeight: 700, color: 'text.primary', mb: 4 }}>
@@ -47,6 +51,7 @@ export const DashboardPage: React.FC = () => {
       <DashboardScreen
         onNavigate={handleNavigate}
         onVehicleClick={handleVehicleClick}
+        onViewMaintenance={handleViewMaintenance}
       />
     </Box>
   );