70 lines
3.0 KiB
Plaintext
70 lines
3.0 KiB
Plaintext
---
|
|
import Layout from '../layouts/Layout.astro';
|
|
import Sidebar from '../components/Sidebar.astro';
|
|
import AppBar from '../components/AppBar.astro';
|
|
import SummaryCards from '../components/SummaryCards.astro';
|
|
import FilterBar from '../components/FilterBar.astro';
|
|
import UsageChart from '../components/UsageChart.astro';
|
|
import TransactionsTable from '../components/TransactionsTable.astro';
|
|
import ApiKeys from '../components/ApiKeys.astro';
|
|
import { eeSlot } from '../resources/ee';
|
|
|
|
const eeNav = eeSlot('nav');
|
|
---
|
|
|
|
<Layout>
|
|
<body class="bg-background text-on-background font-body-md overflow-x-hidden">
|
|
<!-- Side Navigation Shell -->
|
|
<Sidebar />
|
|
<!-- Main Content Area -->
|
|
<main class="ml-0 lg:ml-65 min-h-screen flex flex-col">
|
|
<!-- Top App Bar Shell -->
|
|
<AppBar />
|
|
<!-- Dashboard Canvas -->
|
|
<div id="dashboard-view" class="p-lg max-w-400px w-full mx-auto space-y-lg pb-24 lg:pb-lg">
|
|
<SummaryCards />
|
|
<FilterBar />
|
|
<UsageChart />
|
|
<TransactionsTable />
|
|
</div>
|
|
<!-- API Keys View -->
|
|
<ApiKeys />
|
|
<!-- Bottom Navigation Mobile Only -->
|
|
<nav class="docked full-width bottom-0 fixed lg:hidden z-50 flex justify-around items-center w-full h-16 bg-surface-container-lowest border-t border-surface-border shadow-lg pb-safe">
|
|
<a class="flex flex-col items-center justify-center text-vibrant-purple font-bold active:scale-95 duration-75" href="#">
|
|
<span class="material-symbols-outlined" data-icon="home">home</span>
|
|
<span class="font-label-sm-mobile text-label-sm-mobile">Home</span>
|
|
</a>
|
|
<a class="flex flex-col items-center justify-center text-on-surface-variant active:scale-95 duration-75" href="#">
|
|
<span class="material-symbols-outlined" data-icon="analytics">analytics</span>
|
|
<span class="font-label-sm-mobile text-label-sm-mobile">Usage</span>
|
|
</a>
|
|
<a class="flex flex-col items-center justify-center text-on-surface-variant active:scale-95 duration-75" href="#">
|
|
<span class="material-symbols-outlined" data-icon="list_alt">list_alt</span>
|
|
<span class="font-label-sm-mobile text-label-sm-mobile">Logs</span>
|
|
</a>
|
|
{eeNav.map((Item) => <Item />)}
|
|
</nav>
|
|
</main>
|
|
|
|
<script>
|
|
// Sidebar view switch: Dashboard <-> API Keys (single-page).
|
|
const navDashboard = document.getElementById('nav-dashboard');
|
|
const navKeys = document.getElementById('nav-api-keys');
|
|
const dashView = document.getElementById('dashboard-view');
|
|
const keysView = document.getElementById('api-keys-view');
|
|
|
|
function show(view: string) {
|
|
const keys = view === 'keys';
|
|
dashView?.classList.toggle('hidden', keys);
|
|
keysView?.classList.toggle('hidden', !keys);
|
|
navDashboard?.classList.toggle('bg-vibrant-purple/10', !keys);
|
|
navKeys?.classList.toggle('bg-vibrant-purple/10', keys);
|
|
window.dispatchEvent(new CustomEvent('dashboard:view', { detail: view }));
|
|
}
|
|
navDashboard?.addEventListener('click', (e) => { e.preventDefault(); show('dashboard'); });
|
|
navKeys?.addEventListener('click', (e) => { e.preventDefault(); show('keys'); });
|
|
</script>
|
|
</body>
|
|
</Layout>
|