feat: user export service. bug and UX fixes. Complete minus outstanding email template fixes.

frontend/src/App.tsx

@@ -16,6 +16,7 @@ import { UnitsProvider } from './core/units/UnitsContext';
 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 SecuritySettingsPage = lazy(() => import('./pages/SecuritySettingsPage').then(m => ({ default: m.SecuritySettingsPage })));
 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 })));
@@ -71,6 +72,7 @@ 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 { SecurityMobileScreen } from './features/settings/mobile/SecurityMobileScreen';
 import { useNavigationStore, useUserStore } from './core/store';
 import { useDataSync } from './core/hooks/useDataSync';
 import { MobileDebugPanel } from './core/debug/MobileDebugPanel';
@@ -641,6 +643,19 @@ function App() {
                 </MobileErrorBoundary>
               </motion.div>
             )}
+            {activeScreen === "Security" && (
+              <motion.div
+                key="security"
+                initial={{opacity:0, y:8}}
+                animate={{opacity:1, y:0}}
+                exit={{opacity:0, y:-8}}
+                transition={{ duration: 0.2, ease: "easeOut" }}
+              >
+                <MobileErrorBoundary screenName="Security">
+                  <SecurityMobileScreen />
+                </MobileErrorBoundary>
+              </motion.div>
+            )}
             {activeScreen === "Documents" && (
               <motion.div
                 key="documents"
@@ -883,6 +898,7 @@ function App() {
             <Route path="/garage/maintenance" element={<MaintenancePage />} />
             <Route path="/garage/stations" element={<StationsPage />} />
             <Route path="/garage/settings" element={<SettingsPage />} />
+            <Route path="/garage/settings/security" element={<SecuritySettingsPage />} />
             <Route path="/garage/settings/admin/users" element={<AdminUsersPage />} />
             <Route path="/garage/settings/admin/catalog" element={<AdminCatalogPage />} />
             <Route path="/garage/settings/admin/community-stations" element={<AdminCommunityStationsPage />} />