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

Mobile UX fixes

Browse Source
This commit is contained in:
Eric Gullickson
2025-12-17 21:46:44 -06:00
parent b611b56336
commit c13e17f0eb
14 changed files with 671 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
frontend/src/App.tsx
View File

@@ -10,11 +10,6 @@ import { useIsAuthInitialized } from './core/auth/auth-gate';
import { motion, AnimatePresence } from 'framer-motion';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import HomeRoundedIcon from '@mui/icons-material/HomeRounded';
import DirectionsCarRoundedIcon from '@mui/icons-material/DirectionsCarRounded';
import LocalGasStationRoundedIcon from '@mui/icons-material/LocalGasStationRounded';
import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded';
import DescriptionRoundedIcon from '@mui/icons-material/DescriptionRounded';
import { md3Theme } from './shared-minimal/theme/md3Theme';
import { Layout } from './components/Layout';
import { UnitsProvider } from './core/units/UnitsContext';
@@ -43,7 +38,9 @@ const AdminUsersMobileScreen = lazy(() => import('./features/admin/mobile/AdminU
const AdminCatalogMobileScreen = lazy(() => import('./features/admin/mobile/AdminCatalogMobileScreen').then(m => ({ default: m.AdminCatalogMobileScreen })));
const AdminStationsMobileScreen = lazy(() => import('./features/admin/mobile/AdminStationsMobileScreen').then(m => ({ default: m.AdminStationsMobileScreen })));
import { HomePage } from './pages/HomePage';
import { BottomNavigation, NavigationItem } from './shared-minimal/components/mobile/BottomNavigation';
import { BottomNavigation } from './shared-minimal/components/mobile/BottomNavigation';
import { QuickAction } from './shared-minimal/components/mobile/quickActions';
import { HamburgerDrawer } from './shared-minimal/components/mobile/HamburgerDrawer';
import { GlassCard } from './shared-minimal/components/mobile/GlassCard';
import { RouteSuspense } from './components/SuspenseWrappers';
import { Vehicle } from './features/vehicles/types/vehicles.types';
@@ -362,15 +359,29 @@ function App() {
return undefined;
}, [goBack, canGoBack, mobileMode]);
// Mobile navigation items
const mobileNavItems: NavigationItem[] = [
{ key: "Dashboard", label: "Dashboard", icon: <HomeRoundedIcon /> },
{ key: "Vehicles", label: "Vehicles", icon: <DirectionsCarRoundedIcon /> },
{ key: "Log Fuel", label: "Log Fuel", icon: <LocalGasStationRoundedIcon /> },
{ key: "Stations", label: "Stations", icon: <LocalGasStationRoundedIcon /> },
{ key: "Documents", label: "Documents", icon: <DescriptionRoundedIcon /> },
{ key: "Settings", label: "Settings", icon: <SettingsRoundedIcon /> },
];
// Menu state
const [hamburgerOpen, setHamburgerOpen] = useState(false);
// Quick action handler
const handleQuickAction = useCallback((action: QuickAction) => {
switch (action) {
case 'log-fuel':
navigateToScreen('Log Fuel', { source: 'quick-action' });
break;
case 'add-vehicle':
setShowAddVehicle(true);
navigateToScreen('Vehicles', { source: 'quick-action' });
navigateToVehicleSubScreen('add', undefined, { source: 'quick-action' });
break;
case 'add-document':
navigateToScreen('Documents', { source: 'quick-action' });
break;
case 'add-maintenance':
// Navigate to maintenance or open form (future implementation)
navigateToScreen('Vehicles', { source: 'quick-action' });
break;
}
}, [navigateToScreen, navigateToVehicleSubScreen]);
console.log('MotoVaultPro status:', { isLoading, isAuthenticated, mobileMode, activeScreen, vehicleSubScreen, userAgent: navigator.userAgent });
@@ -689,9 +700,8 @@ function App() {
</Layout>
<BottomNavigation
items={mobileNavItems}
activeItem={activeScreen}
onItemSelect={(screen) => startTransition(() => {
activeScreen={activeScreen}
onNavigate={(screen) => startTransition(() => {
// Prefetch data for the target screen
prefetchForNavigation(screen);
@@ -704,8 +714,29 @@ function App() {
}
// Navigate after state cleanup
navigateToScreen(screen as any, { source: 'bottom-navigation' });
navigateToScreen(screen, { source: 'bottom-navigation' });
})}
onQuickAction={handleQuickAction}
onHamburgerPress={() => setHamburgerOpen(true)}
/>
<HamburgerDrawer
open={hamburgerOpen}
onClose={() => setHamburgerOpen(false)}
onNavigate={(screen) => {
setHamburgerOpen(false);
startTransition(() => {
prefetchForNavigation(screen);
if (screen !== 'Vehicles') {
setSelectedVehicle(null);
}
if (screen !== 'Vehicles' || vehicleSubScreen !== 'add') {
setShowAddVehicle(false);
}
navigateToScreen(screen, { source: 'hamburger-menu' });
});
}}
activeScreen={activeScreen}
/>
</UnitsProvider>
</ThemeProvider>