egullickson/motovaultpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modernization Project Complete. Updated to latest versions of frameworks.

Browse Source
This commit is contained in:
Eric Gullickson
2025-08-24 09:49:21 -05:00
parent 673fe7ce91
commit b534e92636
46 changed files with 2341 additions and 5267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/App.tsx
View File

@@ -2,7 +2,7 @@
* @ai-summary Main app component with routing and mobile navigation
*/
import { useState, useEffect } from 'react';
import { useState, useEffect, useTransition, lazy } from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import { useAuth0 } from '@auth0/auth0-react';
import { motion, AnimatePresence } from 'framer-motion';
@@ -14,17 +14,21 @@ import LocalGasStationRoundedIcon from '@mui/icons-material/LocalGasStationRound
import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded';
import { md3Theme } from './shared-minimal/theme/md3Theme';
import { Layout } from './components/Layout';
import { VehiclesPage } from './features/vehicles/pages/VehiclesPage';
import { VehiclesMobileScreen } from './features/vehicles/mobile/VehiclesMobileScreen';
import { VehicleDetailMobile } from './features/vehicles/mobile/VehicleDetailMobile';
// Lazy load route components for better initial bundle size
const VehiclesPage = lazy(() => import('./features/vehicles/pages/VehiclesPage').then(m => ({ default: m.VehiclesPage })));
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 })));
import { BottomNavigation, NavigationItem } from './shared-minimal/components/mobile/BottomNavigation';
import { GlassCard } from './shared-minimal/components/mobile/GlassCard';
import { Button } from './shared-minimal/components/Button';
import { RouteSuspense } from './components/SuspenseWrappers';
import { Vehicle } from './features/vehicles/types/vehicles.types';
function App() {
const { isLoading, isAuthenticated, loginWithRedirect } = useAuth0();
const [_isPending, startTransition] = useTransition();
// Mobile navigation state - detect mobile screen size with responsive updates
const [mobileMode, setMobileMode] = useState(() => {
@@ -210,7 +214,10 @@ function App() {
<BottomNavigation
items={mobileNavItems}
activeItem={activeScreen}
onItemSelect={setActiveScreen}
onItemSelect={(screen) => startTransition(() => {
setActiveScreen(screen);
setSelectedVehicle(null); // Reset selected vehicle on navigation
})}
/>
</ThemeProvider>
);
@@ -221,15 +228,17 @@ function App() {
<ThemeProvider theme={md3Theme}>
<CssBaseline />
<Layout mobileMode={false}>
<Routes>
<Route path="/" element={<Navigate to="/vehicles" replace />} />
<Route path="/vehicles" element={<VehiclesPage />} />
<Route path="/vehicles/:id" element={<div>Vehicle Details (TODO)</div>} />
<Route path="/fuel-logs" element={<div>Fuel Logs (TODO)</div>} />
<Route path="/maintenance" element={<div>Maintenance (TODO)</div>} />
<Route path="/stations" element={<div>Stations (TODO)</div>} />
<Route path="*" element={<Navigate to="/vehicles" replace />} />
</Routes>
<RouteSuspense>
<Routes>
<Route path="/" element={<Navigate to="/vehicles" replace />} />
<Route path="/vehicles" element={<VehiclesPage />} />
<Route path="/vehicles/:id" element={<div>Vehicle Details (TODO)</div>} />
<Route path="/fuel-logs" element={<div>Fuel Logs (TODO)</div>} />
<Route path="/maintenance" element={<div>Maintenance (TODO)</div>} />
<Route path="/stations" element={<div>Stations (TODO)</div>} />
<Route path="*" element={<Navigate to="/vehicles" replace />} />
</Routes>
</RouteSuspense>
<DebugInfo />
</Layout>
</ThemeProvider>