MVP Build

frontend/src/App.tsx

@@ -0,0 +1,51 @@
+/**
+ * @ai-summary Main app component with routing
+ */
+
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { useAuth0 } from '@auth0/auth0-react';
+import { Layout } from './components/Layout';
+import { VehiclesPage } from './features/vehicles/pages/VehiclesPage';
+import { Button } from './shared-minimal/components/Button';
+
+function App() {
+  const { isLoading, isAuthenticated, loginWithRedirect } = useAuth0();
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-lg">Loading...</div>
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gray-50">
+        <div className="text-center">
+          <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>
+      </div>
+    );
+  }
+
+  return (
+    <Layout>
+      <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>
+    </Layout>
+  );
+}
+
+export default App;