90 lines
2.4 KiB
TypeScript
90 lines
2.4 KiB
TypeScript
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;
|