From 82ad40769745c48c6cd730a8a997cb657767ab1e Mon Sep 17 00:00:00 2001 From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com> Date: Fri, 2 Jan 2026 21:37:24 -0600 Subject: [PATCH] fix: add dashboard to navigation and set as default landing page (refs #2) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- frontend/src/App.tsx | 6 ++- frontend/src/components/Layout.tsx | 2 + frontend/src/core/store/navigation.ts | 2 +- frontend/src/features/dashboard/index.ts | 1 + .../dashboard/pages/DashboardPage.tsx | 53 +++++++++++++++++++ 5 files changed, 61 insertions(+), 3 deletions(-) create mode 100644 frontend/src/features/dashboard/pages/DashboardPage.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index a431fba..06d6ad4 100644 --- a/frontend/src/App.tsx +++ b/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() { - } /> + } /> + } /> } /> } /> } /> @@ -957,7 +959,7 @@ function App() { } /> } /> } /> - } /> + } /> diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx index 42c3d53..2dd2505 100644 --- a/frontend/src/components/Layout.tsx +++ b/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 = ({ children, mobileMode = false }) }, [mobileMode, setSidebarOpen]); // Removed sidebarOpen from dependencies const navigation = [ + { name: 'Dashboard', href: '/garage/dashboard', icon: }, { name: 'Vehicles', href: '/garage/vehicles', icon: }, { name: 'Fuel Logs', href: '/garage/fuel-logs', icon: }, { name: 'Maintenance', href: '/garage/maintenance', icon: }, diff --git a/frontend/src/core/store/navigation.ts b/frontend/src/core/store/navigation.ts index 9b4c1d3..89e6327 100644 --- a/frontend/src/core/store/navigation.ts +++ b/frontend/src/core/store/navigation.ts @@ -51,7 +51,7 @@ export const useNavigationStore = create()( persist( (set, get) => ({ // Initial state - activeScreen: 'Vehicles', + activeScreen: 'Dashboard', vehicleSubScreen: 'list', selectedVehicleId: null, navigationHistory: [], diff --git a/frontend/src/features/dashboard/index.ts b/frontend/src/features/dashboard/index.ts index ca27aaf..09b2fde 100644 --- a/frontend/src/features/dashboard/index.ts +++ b/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'; diff --git a/frontend/src/features/dashboard/pages/DashboardPage.tsx b/frontend/src/features/dashboard/pages/DashboardPage.tsx new file mode 100644 index 0000000..29c9451 --- /dev/null +++ b/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 ( + + + Dashboard + + + + ); +};