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() { setShowAddVehicle(true)} /> 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) => void; onVehicleClick?: (vehicle: Vehicle) => void; onViewMaintenance?: () => void; + onAddVehicle?: () => void; } export const DashboardScreen: React.FC = ({ 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 = ({ @@ -118,7 +120,7 @@ export const DashboardScreen: React.FC = ({ {/* Quick Actions */} 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 ( @@ -52,6 +56,7 @@ export const DashboardPage: React.FC = () => { onNavigate={handleNavigate} onVehicleClick={handleVehicleClick} onViewMaintenance={handleViewMaintenance} + onAddVehicle={handleAddVehicle} /> ); 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(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(() => {