Added Documents Feature

frontend/src/App.tsx

@@ -2,7 +2,7 @@
  * @ai-summary Main app component with routing and mobile navigation
  */
 
-import { useState, useEffect, useTransition, useCallback, lazy } from 'react';
+import React, { 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';
@@ -13,6 +13,7 @@ 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';
@@ -22,8 +23,11 @@ const VehiclesPage = lazy(() => import('./features/vehicles/pages/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 DocumentsPage = lazy(() => import('./features/documents/pages/DocumentsPage').then(m => ({ default: m.DocumentsPage })));
+const DocumentDetailPage = lazy(() => import('./features/documents/pages/DocumentDetailPage').then(m => ({ default: m.DocumentDetailPage })));
 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 })));
+const DocumentsMobileScreen = lazy(() => import('./features/documents/mobile/DocumentsMobileScreen'));
 import { BottomNavigation, NavigationItem } from './shared-minimal/components/mobile/BottomNavigation';
 import { GlassCard } from './shared-minimal/components/mobile/GlassCard';
 import { Button } from './shared-minimal/components/Button';
@@ -303,6 +307,7 @@ function App() {
     { key: "Dashboard", label: "Dashboard", icon: <HomeRoundedIcon /> },
     { key: "Vehicles", label: "Vehicles", icon: <DirectionsCarRoundedIcon /> },
     { key: "Log Fuel", label: "Log Fuel", icon: <LocalGasStationRoundedIcon /> },
+    { key: "Documents", label: "Documents", icon: <DescriptionRoundedIcon /> },
     { key: "Settings", label: "Settings", icon: <SettingsRoundedIcon /> },
   ];
 
@@ -475,6 +480,34 @@ function App() {
                 </MobileErrorBoundary>
               </motion.div>
             )}
+            {activeScreen === "Documents" && (
+              <motion.div
+                key="documents"
+                initial={{opacity:0, y:8}}
+                animate={{opacity:1, y:0}}
+                exit={{opacity:0, y:-8}}
+                transition={{ duration: 0.2, ease: "easeOut" }}
+              >
+                <MobileErrorBoundary screenName="Documents">
+                  <React.Suspense fallback={
+                    <div className="space-y-4">
+                      <GlassCard>
+                        <div className="p-4">
+                          <div className="text-slate-500 py-6 text-center">
+                            {(() => {
+                              console.log('[App] Documents Suspense fallback triggered');
+                              return 'Loading documents screen...';
+                            })()}
+                          </div>
+                        </div>
+                      </GlassCard>
+                    </div>
+                  }>
+                    <DocumentsMobileScreen />
+                  </React.Suspense>
+                </MobileErrorBoundary>
+              </motion.div>
+            )}
           </AnimatePresence>
           <DebugInfo />
         </Layout>
@@ -516,6 +549,8 @@ function App() {
             <Route path="/vehicles" element={<VehiclesPage />} />
             <Route path="/vehicles/:id" element={<VehicleDetailPage />} />
             <Route path="/fuel-logs" element={<FuelLogsPage />} />
+            <Route path="/documents" element={<DocumentsPage />} />
+            <Route path="/documents/:id" element={<DocumentDetailPage />} />
             <Route path="/maintenance" element={<div>Maintenance (TODO)</div>} />
             <Route path="/stations" element={<div>Stations (TODO)</div>} />
             <Route path="/settings" element={<SettingsPage />} />