fix: add dashboard to navigation and set as default landing page (refs #2)

- Add Dashboard to desktop sidebar navigation (first item)
- Add /garage/dashboard route for desktop
- Change default redirect from /garage/vehicles to /garage/dashboard
- Change mobile default screen from Vehicles to Dashboard
- Create DashboardPage wrapper for desktop route

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/App.tsx

@@ -22,6 +22,7 @@ const DocumentsPage = lazy(() => import('./features/documents/pages/DocumentsPag
 const DocumentDetailPage = lazy(() => import('./features/documents/pages/DocumentDetailPage').then(m => ({ default: m.DocumentDetailPage })));
 const MaintenancePage = lazy(() => import('./features/maintenance/pages/MaintenancePage').then(m => ({ default: m.MaintenancePage })));
 const StationsPage = lazy(() => import('./features/stations/pages/StationsPage').then(m => ({ default: m.StationsPage })));
+const DashboardPage = lazy(() => import('./features/dashboard/pages/DashboardPage').then(m => ({ default: m.DashboardPage })));
 const StationsMobileScreen = lazy(() => import('./features/stations/mobile/StationsMobileScreen').then(m => ({ default: m.default })));
 const VehiclesMobileScreen = lazy(() => import('./features/vehicles/mobile/VehiclesMobileScreen').then(m => ({ default: m.VehiclesMobileScreen })));
 const VehicleDetailMobile = lazy(() => import('./features/vehicles/mobile/VehicleDetailMobile').then(m => ({ default: m.VehicleDetailMobile })));
@@ -942,7 +943,8 @@ function App() {
         <Layout mobileMode={false}>
         <RouteSuspense>
           <Routes>
-            <Route path="/garage" element={<Navigate to="/garage/vehicles" replace />} />
+            <Route path="/garage" element={<Navigate to="/garage/dashboard" replace />} />
+            <Route path="/garage/dashboard" element={<DashboardPage />} />
             <Route path="/garage/vehicles" element={<VehiclesPage />} />
             <Route path="/garage/vehicles/:id" element={<VehicleDetailPage />} />
             <Route path="/garage/fuel-logs" element={<FuelLogsPage />} />
@@ -957,7 +959,7 @@ function App() {
             <Route path="/garage/settings/admin/community-stations" element={<AdminCommunityStationsPage />} />
             <Route path="/garage/settings/admin/email-templates" element={<AdminEmailTemplatesPage />} />
             <Route path="/garage/settings/admin/backup" element={<AdminBackupPage />} />
-            <Route path="*" element={<Navigate to="/garage/vehicles" replace />} />
+            <Route path="*" element={<Navigate to="/garage/dashboard" replace />} />
           </Routes>
         </RouteSuspense>
         <DebugInfo />

frontend/src/components/Layout.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import { useAuth0 } from '@auth0/auth0-react';
 import { Link, useLocation } from 'react-router-dom';
 import { Container, Paper, Typography, Box, IconButton, Avatar } from '@mui/material';
+import HomeRoundedIcon from '@mui/icons-material/HomeRounded';
 import DirectionsCarRoundedIcon from '@mui/icons-material/DirectionsCarRounded';
 import LocalGasStationRoundedIcon from '@mui/icons-material/LocalGasStationRounded';
 import BuildRoundedIcon from '@mui/icons-material/BuildRounded';
@@ -40,6 +41,7 @@ export const Layout: React.FC<LayoutProps> = ({ children, mobileMode = false })
   }, [mobileMode, setSidebarOpen]); // Removed sidebarOpen from dependencies
 
   const navigation = [
+    { name: 'Dashboard', href: '/garage/dashboard', icon: <HomeRoundedIcon sx={{ fontSize: 20 }} /> },
     { name: 'Vehicles', href: '/garage/vehicles', icon: <DirectionsCarRoundedIcon sx={{ fontSize: 20 }} /> },
     { name: 'Fuel Logs', href: '/garage/fuel-logs', icon: <LocalGasStationRoundedIcon sx={{ fontSize: 20 }} /> },
     { name: 'Maintenance', href: '/garage/maintenance', icon: <BuildRoundedIcon sx={{ fontSize: 20 }} /> },

frontend/src/core/store/navigation.ts

@@ -51,7 +51,7 @@ export const useNavigationStore = create<NavigationState>()(
   persist(
     (set, get) => ({
       // Initial state
-      activeScreen: 'Vehicles',
+      activeScreen: 'Dashboard',
       vehicleSubScreen: 'list',
       selectedVehicleId: null,
       navigationHistory: [],

frontend/src/features/dashboard/index.ts

@@ -3,6 +3,7 @@
  */
 
 export { DashboardScreen } from './components/DashboardScreen';
+export { DashboardPage } from './pages/DashboardPage';
 export { SummaryCards, SummaryCardsSkeleton } from './components/SummaryCards';
 export { VehicleAttention, VehicleAttentionSkeleton } from './components/VehicleAttention';
 export { QuickActions, QuickActionsSkeleton } from './components/QuickActions';

frontend/src/features/dashboard/pages/DashboardPage.tsx

@@ -0,0 +1,53 @@
+/**
+ * @ai-summary Desktop dashboard page wrapping the DashboardScreen component
+ */
+
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Box, Typography } from '@mui/material';
+import { DashboardScreen } from '../components/DashboardScreen';
+import { MobileScreen } from '../../../core/store';
+import { Vehicle } from '../../vehicles/types/vehicles.types';
+
+export const DashboardPage: React.FC = () => {
+  const navigate = useNavigate();
+
+  // Map mobile screen names to desktop routes
+  const handleNavigate = (screen: MobileScreen) => {
+    switch (screen) {
+      case 'Vehicles':
+        navigate('/garage/vehicles');
+        break;
+      case 'Log Fuel':
+        navigate('/garage/fuel-logs');
+        break;
+      case 'Stations':
+        navigate('/garage/stations');
+        break;
+      case 'Documents':
+        navigate('/garage/documents');
+        break;
+      case 'Settings':
+        navigate('/garage/settings');
+        break;
+      default:
+        navigate('/garage/dashboard');
+    }
+  };
+
+  const handleVehicleClick = (vehicle: Vehicle) => {
+    navigate(`/garage/vehicles/${vehicle.id}`);
+  };
+
+  return (
+    <Box sx={{ py: 2 }}>
+      <Typography variant="h4" sx={{ fontWeight: 700, color: 'text.primary', mb: 4 }}>
+        Dashboard
+      </Typography>
+      <DashboardScreen
+        onNavigate={handleNavigate}
+        onVehicleClick={handleVehicleClick}
+      />
+    </Box>
+  );
+};