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')}
       />
 

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>
   );