From 7643c9b90da8c14420fe7ea7ab7b9c03e5cdf5f0 Mon Sep 17 00:00:00 2001
From: Trezy <tre@trezy.com>
Date: Sat, 14 Feb 2026 11:01:24 -0600
Subject: [PATCH] feat: add dashboard navigation with sidebar layout

---
 web/src/app/(dashboard)/layout.tsx | 39 ++++++++++++
 web/src/app/(dashboard)/page.tsx   | 86 +++++++++++++++++++++++++++
 web/src/app/page.tsx               |  7 ---
 web/src/components/app-sidebar.tsx | 95 ++++++++++++++++++++++++++++++
 web/src/components/site-header.tsx | 19 ++++++
 5 files changed, 239 insertions(+), 7 deletions(-)
 create mode 100644 web/src/app/(dashboard)/layout.tsx
 create mode 100644 web/src/app/(dashboard)/page.tsx
 delete mode 100644 web/src/app/page.tsx
 create mode 100644 web/src/components/app-sidebar.tsx
 create mode 100644 web/src/components/site-header.tsx

diff --git a/web/src/app/(dashboard)/layout.tsx b/web/src/app/(dashboard)/layout.tsx
new file mode 100644
index 0000000..da3ae01
--- /dev/null
+++ b/web/src/app/(dashboard)/layout.tsx
@@ -0,0 +1,39 @@
+"use client"
+
+import { useEffect } from "react"
+import { useRouter } from "next/navigation"
+
+import { useAuth } from "@/lib/auth-context"
+import { AppSidebar } from "@/components/app-sidebar"
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const { token } = useAuth()
+  const router = useRouter()
+
+  useEffect(() => {
+    if (!token) {
+      router.replace("/login")
+    }
+  }, [token, router])
+
+  if (!token) return null
+
+  return (
+    <SidebarProvider
+      style={
+        {
+          "--sidebar-width": "calc(var(--spacing) * 72)",
+          "--header-height": "calc(var(--spacing) * 12)",
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar variant="inset" />
+      <SidebarInset>{children}</SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/web/src/app/(dashboard)/page.tsx b/web/src/app/(dashboard)/page.tsx
new file mode 100644
index 0000000..4d0b030
--- /dev/null
+++ b/web/src/app/(dashboard)/page.tsx
@@ -0,0 +1,86 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+import { useAuth } from "@/lib/auth-context"
+import { getStats, type StatsResponse } from "@/lib/api"
+import { SiteHeader } from "@/components/site-header"
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+
+export default function DashboardPage() {
+  const { token } = useAuth()
+  const [stats, setStats] = useState<StatsResponse | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!token) return
+    getStats(token).then(setStats).catch((e) => setError(e.message))
+  }, [token])
+
+  return (
+    <>
+      <SiteHeader title="Dashboard" />
+      <div className="flex flex-1 flex-col gap-4 p-4 md:gap-6 md:p-6">
+        {error && (
+          <p className="text-destructive text-sm">{error}</p>
+        )}
+        <div className="grid grid-cols-1 gap-4 @xl:grid-cols-2 @3xl:grid-cols-3">
+          <Card>
+            <CardHeader>
+              <CardDescription>Total Records</CardDescription>
+              <CardTitle className="text-2xl font-semibold tabular-nums">
+                {stats ? stats.total_records.toLocaleString() : "--"}
+              </CardTitle>
+            </CardHeader>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardDescription>Collections</CardDescription>
+              <CardTitle className="text-2xl font-semibold tabular-nums">
+                {stats ? stats.collections.length : "--"}
+              </CardTitle>
+            </CardHeader>
+          </Card>
+        </div>
+
+        {stats && stats.collections.length > 0 && (
+          <div className="rounded-lg border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Collection</TableHead>
+                  <TableHead className="text-right">Records</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {stats.collections.map((col) => (
+                  <TableRow key={col.collection}>
+                    <TableCell className="font-mono text-sm">
+                      {col.collection}
+                    </TableCell>
+                    <TableCell className="text-right tabular-nums">
+                      {col.count.toLocaleString()}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </div>
+    </>
+  )
+}
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
deleted file mode 100644
index 5fca611..0000000
--- a/web/src/app/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function Home() {
-  return (
-    <div className="flex min-h-svh items-center justify-center">
-      <h1 className="text-2xl font-semibold">HappyView Admin</h1>
-    </div>
-  )
-}
diff --git a/web/src/components/app-sidebar.tsx b/web/src/components/app-sidebar.tsx
new file mode 100644
index 0000000..3bb4c57
--- /dev/null
+++ b/web/src/components/app-sidebar.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import {
+  IconDashboard,
+  IconFileDescription,
+  IconWorld,
+  IconDatabase,
+  IconUsers,
+  IconLogout,
+} from "@tabler/icons-react"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+
+import { useAuth } from "@/lib/auth-context"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar"
+
+const navItems = [
+  { title: "Dashboard", url: "/", icon: IconDashboard },
+  { title: "Lexicons", url: "/lexicons", icon: IconFileDescription },
+  { title: "Network Lexicons", url: "/network-lexicons", icon: IconWorld },
+  { title: "Backfill", url: "/backfill", icon: IconDatabase },
+  { title: "Admins", url: "/admins", icon: IconUsers },
+]
+
+export function AppSidebar({
+  ...props
+}: React.ComponentProps<typeof Sidebar>) {
+  const pathname = usePathname()
+  const { logout } = useAuth()
+
+  return (
+    <Sidebar collapsible="offcanvas" {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              asChild
+              className="data-[slot=sidebar-menu-button]:!p-1.5"
+            >
+              <Link href="/">
+                <span className="text-base font-semibold">HappyView</span>
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent className="flex flex-col gap-2">
+            <SidebarMenu>
+              {navItems.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton
+                    asChild
+                    tooltip={item.title}
+                    isActive={
+                      item.url === "/"
+                        ? pathname === "/"
+                        : pathname.startsWith(item.url)
+                    }
+                  >
+                    <Link href={item.url}>
+                      <item.icon />
+                      <span>{item.title}</span>
+                    </Link>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton onClick={logout} tooltip="Log out">
+              <IconLogout />
+              <span>Log out</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+    </Sidebar>
+  )
+}
diff --git a/web/src/components/site-header.tsx b/web/src/components/site-header.tsx
new file mode 100644
index 0000000..46a63a8
--- /dev/null
+++ b/web/src/components/site-header.tsx
@@ -0,0 +1,19 @@
+"use client"
+
+import { Separator } from "@/components/ui/separator"
+import { SidebarTrigger } from "@/components/ui/sidebar"
+
+export function SiteHeader({ title }: { title: string }) {
+  return (
+    <header className="flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
+      <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
+        <SidebarTrigger className="-ml-1" />
+        <Separator
+          orientation="vertical"
+          className="mx-2 data-[orientation=vertical]:h-4"
+        />
+        <h1 className="text-base font-medium">{title}</h1>
+      </div>
+    </header>
+  )
+}
-- 
2.54.0