2026-04-15-1 dashboard

apps/dashboard/src/App.tsx

@@ -0,0 +1,89 @@
+import { useState, useEffect } from 'react';
+import { Routes, Route, useLocation } from 'react-router-dom';
+import axios from 'axios';
+import Sidebar from './components/Sidebar';
+import Header from './components/Header';
+import DashboardHome from './pages/DashboardHome';
+import Analytics from './pages/Analytics';
+import Billing from './pages/Billing';
+import Documentation from './pages/Documentation';
+import Playground from './pages/Playground';
+
+interface ApiKey {
+  id: string;
+  key: string;
+  name: string;
+  isActive: boolean;
+  rateLimit: number;
+  allowedOrigins: string[];
+  lastUsedAt: string | null;
+}
+
+interface Tenant {
+  id: string;
+  name: string;
+  email: string;
+}
+
+const App = () => {
+  const [tenant, setTenant] = useState<Tenant | null>(null);
+  const [keys, setKeys] = useState<ApiKey[]>([]);
+  const [loading, setLoading] = useState(true);
+  const location = useLocation();
+
+  const fetchData = async () => {
+    try {
+      setLoading(true);
+      const tenantRes = await axios.get('/api/auth/management/me');
+      setTenant(tenantRes.data);
+
+      if (tenantRes.data && tenantRes.data.id) {
+        const keysRes = await axios.get(`/api/auth/management/keys/${tenantRes.data.id}`);
+        if (Array.isArray(keysRes.data)) {
+          setKeys(keysRes.data);
+        }
+      }
+    } catch (error: any) {
+      console.error('Failed to fetch dashboard data', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  // Scroll to top on route change
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [location.pathname]);
+
+  return (
+    <div className="app-container">
+      <Sidebar />
+      <div className="flex-1 overflow-y-auto bg-gradient-to-br from-[#0a0a0b] via-[#0f1115] to-[#0a0a0b]">
+        <Header />
+        
+        <main className="main-content">
+          <Routes>
+            <Route path="/" element={
+              <DashboardHome 
+                tenant={tenant} 
+                keys={keys} 
+                loading={loading} 
+                onRefresh={fetchData} 
+              />
+            } />
+            <Route path="/analytics" element={<Analytics />} />
+            <Route path="/billing" element={<Billing />} />
+            <Route path="/documentation" element={<Documentation />} />
+            <Route path="/playground" element={<Playground apiKeys={keys} />} />
+          </Routes>
+        </main>
+      </div>
+    </div>
+  );
+};
+
+export default App;