533 lines
19 KiB
TypeScript
533 lines
19 KiB
TypeScript
/**
|
|
* @ai-summary Main app component with routing and mobile navigation
|
|
*/
|
|
|
|
import { useState, useEffect, useTransition, useCallback, lazy } from 'react';
|
|
import { useQueryClient } from '@tanstack/react-query';
|
|
import { Routes, Route, Navigate } from 'react-router-dom';
|
|
import { useAuth0 } from '@auth0/auth0-react';
|
|
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 { md3Theme } from './shared-minimal/theme/md3Theme';
|
|
import { Layout } from './components/Layout';
|
|
import { UnitsProvider } from './core/units/UnitsContext';
|
|
|
|
// Lazy load route components for better initial bundle size
|
|
const VehiclesPage = lazy(() => import('./features/vehicles/pages/VehiclesPage').then(m => ({ default: m.VehiclesPage })));
|
|
const VehicleDetailPage = lazy(() => import('./features/vehicles/pages/VehicleDetailPage').then(m => ({ default: m.VehicleDetailPage })));
|
|
const SettingsPage = lazy(() => import('./pages/SettingsPage').then(m => ({ default: m.SettingsPage })));
|
|
const FuelLogsPage = lazy(() => import('./features/fuel-logs/pages/FuelLogsPage').then(m => ({ default: m.FuelLogsPage })));
|
|
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';
|
|
import { FuelLogForm } from './features/fuel-logs/components/FuelLogForm';
|
|
import { FuelLogsList } from './features/fuel-logs/components/FuelLogsList';
|
|
import { FuelLogEditDialog } from './features/fuel-logs/components/FuelLogEditDialog';
|
|
import { useFuelLogs } from './features/fuel-logs/hooks/useFuelLogs';
|
|
import { FuelLogResponse, UpdateFuelLogRequest } from './features/fuel-logs/types/fuel-logs.types';
|
|
import { fuelLogsApi } from './features/fuel-logs/api/fuel-logs.api';
|
|
import { VehicleForm } from './features/vehicles/components/VehicleForm';
|
|
import { useOptimisticVehicles } from './features/vehicles/hooks/useOptimisticVehicles';
|
|
import { CreateVehicleRequest } from './features/vehicles/types/vehicles.types';
|
|
import { MobileSettingsScreen } from './features/settings/mobile/MobileSettingsScreen';
|
|
import { useNavigationStore, useUserStore } from './core/store';
|
|
import { useDataSync } from './core/hooks/useDataSync';
|
|
import { MobileDebugPanel } from './core/debug/MobileDebugPanel';
|
|
import { MobileErrorBoundary } from './core/error-boundaries/MobileErrorBoundary';
|
|
|
|
// Hoisted mobile screen components to stabilize identity and prevent remounts
|
|
const DashboardScreen: React.FC = () => (
|
|
<div className="space-y-4">
|
|
<GlassCard>
|
|
<div className="text-center py-12">
|
|
<h2 className="text-lg font-semibold text-slate-800 mb-2">Dashboard</h2>
|
|
<p className="text-slate-500">Coming soon - Vehicle insights and analytics</p>
|
|
</div>
|
|
</GlassCard>
|
|
</div>
|
|
);
|
|
|
|
const LogFuelScreen: React.FC = () => {
|
|
const queryClient = useQueryClient();
|
|
const [editingLog, setEditingLog] = useState<FuelLogResponse | null>(null);
|
|
const { goBack, canGoBack, navigateToScreen } = useNavigationStore();
|
|
useEffect(() => {
|
|
console.log('[LogFuelScreen] Mounted');
|
|
return () => console.log('[LogFuelScreen] Unmounted');
|
|
}, []);
|
|
|
|
let fuelLogs: FuelLogResponse[] | undefined, isLoading: boolean | undefined, error: any;
|
|
try {
|
|
const hookResult = useFuelLogs();
|
|
fuelLogs = hookResult.fuelLogs;
|
|
isLoading = hookResult.isLoading;
|
|
error = hookResult.error;
|
|
} catch (hookError) {
|
|
console.error('[LogFuelScreen] Hook error:', hookError);
|
|
error = hookError;
|
|
}
|
|
|
|
const handleEdit = (log: FuelLogResponse) => {
|
|
if (!log || !log.id) {
|
|
console.error('[LogFuelScreen] Invalid log data for edit:', log);
|
|
return;
|
|
}
|
|
try {
|
|
setEditingLog(log);
|
|
} catch (error) {
|
|
console.error('[LogFuelScreen] Error setting editing log:', error);
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (_logId: string) => {
|
|
try {
|
|
queryClient.invalidateQueries({ queryKey: ['fuelLogs'] });
|
|
queryClient.invalidateQueries({ queryKey: ['fuelLogsStats'] });
|
|
} catch (error) {
|
|
console.error('Failed to refresh fuel logs after delete:', error);
|
|
}
|
|
};
|
|
|
|
const handleSaveEdit = async (id: string, data: UpdateFuelLogRequest) => {
|
|
try {
|
|
await fuelLogsApi.update(id, data);
|
|
queryClient.invalidateQueries({ queryKey: ['fuelLogs'] });
|
|
queryClient.invalidateQueries({ queryKey: ['fuelLogsStats'] });
|
|
setEditingLog(null);
|
|
} catch (error) {
|
|
console.error('Failed to update fuel log:', error);
|
|
throw error;
|
|
}
|
|
};
|
|
|
|
const handleCloseEdit = () => setEditingLog(null);
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="space-y-4">
|
|
<GlassCard>
|
|
<div className="text-center py-8">
|
|
<p className="text-red-600 mb-4">Failed to load fuel logs</p>
|
|
<button
|
|
onClick={() => window.location.reload()}
|
|
className="px-4 py-2 bg-blue-600 text-white rounded-lg"
|
|
>
|
|
Retry
|
|
</button>
|
|
</div>
|
|
</GlassCard>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (isLoading === undefined) {
|
|
return (
|
|
<div className="space-y-4">
|
|
<GlassCard>
|
|
<div className="text-center py-8 text-slate-500">
|
|
Initializing fuel logs...
|
|
</div>
|
|
</GlassCard>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<MobileErrorBoundary screenName="FuelLogForm" key="fuel-form">
|
|
<FuelLogForm onSuccess={() => {
|
|
// Refresh dependent data
|
|
try {
|
|
queryClient.invalidateQueries({ queryKey: ['fuelLogs'] });
|
|
queryClient.invalidateQueries({ queryKey: ['fuelLogsStats'] });
|
|
} catch {}
|
|
// Navigate back if we have history; otherwise go to Vehicles
|
|
if (canGoBack()) {
|
|
goBack();
|
|
} else {
|
|
navigateToScreen('Vehicles', { source: 'fuel-log-added' });
|
|
}
|
|
}} />
|
|
</MobileErrorBoundary>
|
|
<MobileErrorBoundary screenName="FuelLogsSection" key="fuel-section">
|
|
<GlassCard>
|
|
<div className="py-2">
|
|
{isLoading ? (
|
|
<div className="text-center py-8 text-slate-500">
|
|
Loading fuel logs...
|
|
</div>
|
|
) : (
|
|
<FuelLogsList
|
|
logs={fuelLogs || []}
|
|
onEdit={handleEdit}
|
|
onDelete={handleDelete}
|
|
/>
|
|
)}
|
|
</div>
|
|
</GlassCard>
|
|
</MobileErrorBoundary>
|
|
|
|
<MobileErrorBoundary screenName="FuelLogEditDialog" key="fuel-edit-dialog">
|
|
<FuelLogEditDialog
|
|
open={!!editingLog}
|
|
log={editingLog}
|
|
onClose={handleCloseEdit}
|
|
onSave={handleSaveEdit}
|
|
/>
|
|
</MobileErrorBoundary>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
interface AddVehicleScreenProps {
|
|
onBack: () => void;
|
|
onAdded: () => void;
|
|
}
|
|
|
|
const AddVehicleScreen: React.FC<AddVehicleScreenProps> = ({ onBack, onAdded }) => {
|
|
const { optimisticCreateVehicle } = useOptimisticVehicles([]);
|
|
|
|
const handleCreateVehicle = async (data: CreateVehicleRequest) => {
|
|
try {
|
|
await optimisticCreateVehicle(data);
|
|
onAdded();
|
|
} catch (error) {
|
|
console.error('Failed to create vehicle:', error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<GlassCard>
|
|
<div className="p-4">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-lg font-semibold text-slate-800">Add Vehicle</h2>
|
|
<button
|
|
onClick={onBack}
|
|
className="p-2 hover:bg-gray-100 rounded-full transition-colors"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
<VehicleForm
|
|
onSubmit={handleCreateVehicle}
|
|
onCancel={onBack}
|
|
/>
|
|
</div>
|
|
</GlassCard>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
function App() {
|
|
const { isLoading, isAuthenticated, loginWithRedirect, user } = useAuth0();
|
|
const [_isPending, startTransition] = useTransition();
|
|
|
|
// Initialize data synchronization
|
|
const { prefetchForNavigation } = useDataSync();
|
|
|
|
// Enhanced navigation and user state management
|
|
const {
|
|
activeScreen,
|
|
vehicleSubScreen,
|
|
navigateToScreen,
|
|
navigateToVehicleSubScreen,
|
|
goBack,
|
|
canGoBack,
|
|
} = useNavigationStore();
|
|
|
|
const { setUserProfile } = useUserStore();
|
|
|
|
// Mobile mode detection - detect mobile screen size with responsive updates
|
|
const [mobileMode, setMobileMode] = useState(() => {
|
|
if (typeof window !== 'undefined') {
|
|
return window.innerWidth <= 768;
|
|
}
|
|
return false;
|
|
});
|
|
|
|
const [selectedVehicle, setSelectedVehicle] = useState<Vehicle | null>(null);
|
|
const [showAddVehicle, setShowAddVehicle] = useState(false);
|
|
|
|
// Update mobile mode on window resize
|
|
useEffect(() => {
|
|
const checkMobileMode = () => {
|
|
const isMobile = window.innerWidth <= 768 ||
|
|
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
|
console.log('Window width:', window.innerWidth, 'User agent mobile:', /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent), 'Mobile mode:', isMobile);
|
|
setMobileMode(isMobile);
|
|
};
|
|
|
|
// Check on mount
|
|
checkMobileMode();
|
|
|
|
window.addEventListener('resize', checkMobileMode);
|
|
return () => window.removeEventListener('resize', checkMobileMode);
|
|
}, []);
|
|
|
|
// Update user profile when authenticated
|
|
useEffect(() => {
|
|
if (isAuthenticated && user) {
|
|
setUserProfile(user);
|
|
}
|
|
}, [isAuthenticated, user, setUserProfile]);
|
|
|
|
// Handle mobile back button and navigation errors
|
|
useEffect(() => {
|
|
const handlePopState = (event: PopStateEvent) => {
|
|
event.preventDefault();
|
|
if (canGoBack() && mobileMode) {
|
|
goBack();
|
|
}
|
|
};
|
|
|
|
if (mobileMode) {
|
|
window.addEventListener('popstate', handlePopState);
|
|
return () => window.removeEventListener('popstate', handlePopState);
|
|
}
|
|
|
|
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: "Settings", label: "Settings", icon: <SettingsRoundedIcon /> },
|
|
];
|
|
|
|
console.log('MotoVaultPro status:', { isLoading, isAuthenticated, mobileMode, activeScreen, vehicleSubScreen, userAgent: navigator.userAgent });
|
|
|
|
// Enhanced navigation handlers for mobile
|
|
const handleVehicleSelect = useCallback((vehicle: Vehicle) => {
|
|
setSelectedVehicle(vehicle);
|
|
navigateToVehicleSubScreen('detail', vehicle.id, { source: 'vehicle-list' });
|
|
}, [navigateToVehicleSubScreen]);
|
|
|
|
const handleAddVehicle = useCallback(() => {
|
|
setShowAddVehicle(true);
|
|
navigateToVehicleSubScreen('add', undefined, { source: 'vehicle-list' });
|
|
}, [navigateToVehicleSubScreen]);
|
|
|
|
const handleBackToList = useCallback(() => {
|
|
setSelectedVehicle(null);
|
|
setShowAddVehicle(false);
|
|
navigateToVehicleSubScreen('list', undefined, { source: 'back-navigation' });
|
|
}, [navigateToVehicleSubScreen]);
|
|
|
|
const handleVehicleAdded = useCallback(() => {
|
|
setShowAddVehicle(false);
|
|
navigateToVehicleSubScreen('list', undefined, { source: 'vehicle-added' });
|
|
}, [navigateToVehicleSubScreen]);
|
|
|
|
// Enhanced debug component
|
|
const DebugInfo = () => (
|
|
<MobileDebugPanel visible={import.meta.env.MODE === 'development'} />
|
|
);
|
|
|
|
// Mobile settings now uses the dedicated MobileSettingsScreen component
|
|
const SettingsScreen = MobileSettingsScreen;
|
|
|
|
if (isLoading) {
|
|
if (mobileMode) {
|
|
return (
|
|
<ThemeProvider theme={md3Theme}>
|
|
<CssBaseline />
|
|
<Layout mobileMode={true}>
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="text-slate-500">Loading...</div>
|
|
</div>
|
|
</Layout>
|
|
</ThemeProvider>
|
|
);
|
|
}
|
|
return (
|
|
<ThemeProvider theme={md3Theme}>
|
|
<CssBaseline />
|
|
<div className="flex items-center justify-center min-h-screen">
|
|
<div className="text-lg">Loading...</div>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|
|
|
|
if (!isAuthenticated) {
|
|
if (mobileMode) {
|
|
return (
|
|
<ThemeProvider theme={md3Theme}>
|
|
<CssBaseline />
|
|
<Layout mobileMode={true}>
|
|
<div className="space-y-6 flex flex-col items-center justify-center min-h-[400px]">
|
|
<div className="text-center">
|
|
<h1 className="text-2xl font-bold text-slate-800 mb-3">Welcome to MotoVaultPro</h1>
|
|
<p className="text-slate-600 mb-6 text-sm">Your personal vehicle management platform</p>
|
|
<button
|
|
onClick={() => loginWithRedirect()}
|
|
className="h-12 px-8 rounded-2xl text-white font-medium shadow-lg active:scale-[0.99] transition bg-gradient-moto"
|
|
>
|
|
Login to Continue
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<DebugInfo />
|
|
</Layout>
|
|
</ThemeProvider>
|
|
);
|
|
}
|
|
return (
|
|
<ThemeProvider theme={md3Theme}>
|
|
<CssBaseline />
|
|
<div className="flex items-center justify-center min-h-screen bg-gray-50">
|
|
<div className="text-center max-w-md mx-auto px-6">
|
|
<h1 className="text-4xl font-bold text-gray-900 mb-4">MotoVaultPro</h1>
|
|
<p className="text-gray-600 mb-8">Your personal vehicle management platform</p>
|
|
<Button onClick={() => loginWithRedirect()}>
|
|
Login to Continue
|
|
</Button>
|
|
</div>
|
|
<DebugInfo />
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|
|
|
|
// Mobile app rendering
|
|
if (mobileMode) {
|
|
return (
|
|
<ThemeProvider theme={md3Theme}>
|
|
<CssBaseline />
|
|
<UnitsProvider>
|
|
<Layout mobileMode={true}>
|
|
<AnimatePresence mode="popLayout" initial={false}>
|
|
{activeScreen === "Dashboard" && (
|
|
<motion.div
|
|
key="dashboard"
|
|
initial={{opacity:0, y:8}}
|
|
animate={{opacity:1, y:0}}
|
|
exit={{opacity:0, y:-8}}
|
|
transition={{ duration: 0.2, ease: "easeOut" }}
|
|
>
|
|
<MobileErrorBoundary screenName="Dashboard">
|
|
<DashboardScreen />
|
|
</MobileErrorBoundary>
|
|
</motion.div>
|
|
)}
|
|
{activeScreen === "Vehicles" && (
|
|
<motion.div
|
|
key="vehicles"
|
|
initial={{opacity:0, y:8}}
|
|
animate={{opacity:1, y:0}}
|
|
exit={{opacity:0, y:-8}}
|
|
className="space-y-6"
|
|
transition={{ duration: 0.2, ease: "easeOut" }}
|
|
>
|
|
<MobileErrorBoundary screenName="Vehicles">
|
|
{vehicleSubScreen === 'add' || showAddVehicle ? (
|
|
<AddVehicleScreen onBack={handleBackToList} onAdded={handleVehicleAdded} />
|
|
) : selectedVehicle && (vehicleSubScreen === 'detail') ? (
|
|
<VehicleDetailMobile
|
|
vehicle={selectedVehicle}
|
|
onBack={handleBackToList}
|
|
onLogFuel={() => navigateToScreen("Log Fuel")}
|
|
/>
|
|
) : (
|
|
<VehiclesMobileScreen
|
|
onVehicleSelect={handleVehicleSelect}
|
|
onAddVehicle={handleAddVehicle}
|
|
/>
|
|
)}
|
|
</MobileErrorBoundary>
|
|
</motion.div>
|
|
)}
|
|
{activeScreen === "Log Fuel" && (
|
|
<motion.div
|
|
key="logfuel"
|
|
initial={{opacity:0, y:8}}
|
|
animate={{opacity:1, y:0}}
|
|
exit={{opacity:0, y:-8}}
|
|
transition={{ duration: 0.2, ease: "easeOut" }}
|
|
>
|
|
<MobileErrorBoundary screenName="Log Fuel">
|
|
<LogFuelScreen />
|
|
</MobileErrorBoundary>
|
|
</motion.div>
|
|
)}
|
|
{activeScreen === "Settings" && (
|
|
<motion.div
|
|
key="settings"
|
|
initial={{opacity:0, y:8}}
|
|
animate={{opacity:1, y:0}}
|
|
exit={{opacity:0, y:-8}}
|
|
transition={{ duration: 0.2, ease: "easeOut" }}
|
|
>
|
|
<MobileErrorBoundary screenName="Settings">
|
|
<SettingsScreen />
|
|
</MobileErrorBoundary>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
<DebugInfo />
|
|
</Layout>
|
|
|
|
<BottomNavigation
|
|
items={mobileNavItems}
|
|
activeItem={activeScreen}
|
|
onItemSelect={(screen) => startTransition(() => {
|
|
// Prefetch data for the target screen
|
|
prefetchForNavigation(screen);
|
|
|
|
// Reset states first, then navigate to prevent race conditions
|
|
if (screen !== 'Vehicles') {
|
|
setSelectedVehicle(null); // Reset selected vehicle when leaving Vehicles
|
|
}
|
|
if (screen !== 'Vehicles' || vehicleSubScreen !== 'add') {
|
|
setShowAddVehicle(false); // Reset add vehicle form when appropriate
|
|
}
|
|
|
|
// Navigate after state cleanup
|
|
navigateToScreen(screen as any, { source: 'bottom-navigation' });
|
|
})}
|
|
/>
|
|
</UnitsProvider>
|
|
</ThemeProvider>
|
|
);
|
|
}
|
|
|
|
// Desktop app rendering (fallback)
|
|
return (
|
|
<ThemeProvider theme={md3Theme}>
|
|
<CssBaseline />
|
|
<UnitsProvider>
|
|
<Layout mobileMode={false}>
|
|
<RouteSuspense>
|
|
<Routes>
|
|
<Route path="/" element={<Navigate to="/vehicles" replace />} />
|
|
<Route path="/callback" element={<div>Processing login...</div>} />
|
|
<Route path="/vehicles" element={<VehiclesPage />} />
|
|
<Route path="/vehicles/:id" element={<VehicleDetailPage />} />
|
|
<Route path="/fuel-logs" element={<FuelLogsPage />} />
|
|
<Route path="/maintenance" element={<div>Maintenance (TODO)</div>} />
|
|
<Route path="/stations" element={<div>Stations (TODO)</div>} />
|
|
<Route path="/settings" element={<SettingsPage />} />
|
|
<Route path="*" element={<Navigate to="/vehicles" replace />} />
|
|
</Routes>
|
|
</RouteSuspense>
|
|
<DebugInfo />
|
|
</Layout>
|
|
</UnitsProvider>
|
|
</ThemeProvider>
|
|
);
|
|
}
|
|
|
|
export default App;
|