jlinc-labs/jlinc-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

addition of new dashboard

Browse Source
This commit is contained in:
Ben Curtis
2026-08-20 15:08:32 +00:00
parent 0622018d95
commit bf59249ed7
161 changed files with 13170 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
frontend/src/pages/index.astro Normal file
View File

@@ -0,0 +1,69 @@
---
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>