From f8e498557e848f29eb041975d386a51e669a119e Mon Sep 17 00:00:00 2001
From: Kai Chappell <git@kschappell.com>
Date: Mon, 14 Apr 2025 20:16:52 +0000
Subject: [PATCH] add dashboard layout and routing

---
 dashboard/src/App.tsx                       | 33 +++++++++++++++++++
 dashboard/src/components/layout/Header.tsx  | 30 ++++++++++++++++++
 dashboard/src/components/layout/Layout.tsx  | 17 ++++++++++
 dashboard/src/components/layout/Sidebar.tsx | 35 +++++++++++++++++++++
 4 files changed, 115 insertions(+)
 create mode 100644 dashboard/src/App.tsx
 create mode 100644 dashboard/src/components/layout/Header.tsx
 create mode 100644 dashboard/src/components/layout/Layout.tsx
 create mode 100644 dashboard/src/components/layout/Sidebar.tsx

diff --git a/dashboard/src/App.tsx b/dashboard/src/App.tsx
new file mode 100644
index 0000000..c0b33f6
--- /dev/null
+++ b/dashboard/src/App.tsx
@@ -0,0 +1,33 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Layout } from './components/layout/Layout';
+import { ReviewsPage } from './pages/ReviewsPage';
+import { ReviewDetailPage } from './pages/ReviewDetailPage';
+import { MetricsPage } from './pages/MetricsPage';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 30 * 1000,
+      retry: 1,
+    },
+  },
+});
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Layout />}>
+            <Route index element={<ReviewsPage />} />
+            <Route path="reviews/:id" element={<ReviewDetailPage />} />
+            <Route path="metrics" element={<MetricsPage />} />
+          </Route>
+        </Routes>
+      </BrowserRouter>
+    </QueryClientProvider>
+  );
+}
+
+export default App;
diff --git a/dashboard/src/components/layout/Header.tsx b/dashboard/src/components/layout/Header.tsx
new file mode 100644
index 0000000..7b93e51
--- /dev/null
+++ b/dashboard/src/components/layout/Header.tsx
@@ -0,0 +1,30 @@
+import { Link } from 'react-router-dom';
+
+export function Header() {
+  return (
+    <header className="bg-white border-b border-gray-200 px-6 py-4">
+      <div className="flex items-center justify-between">
+        <Link to="/" className="flex items-center gap-2">
+          <div className="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center">
+            <span className="text-white font-bold text-sm">A</span>
+          </div>
+          <span className="text-xl font-semibold text-gray-900">Arbiter</span>
+        </Link>
+        <nav className="flex items-center gap-6">
+          <Link
+            to="/"
+            className="text-sm font-medium text-gray-600 hover:text-gray-900"
+          >
+            Reviews
+          </Link>
+          <Link
+            to="/metrics"
+            className="text-sm font-medium text-gray-600 hover:text-gray-900"
+          >
+            Metrics
+          </Link>
+        </nav>
+      </div>
+    </header>
+  );
+}
diff --git a/dashboard/src/components/layout/Layout.tsx b/dashboard/src/components/layout/Layout.tsx
new file mode 100644
index 0000000..d50c0e3
--- /dev/null
+++ b/dashboard/src/components/layout/Layout.tsx
@@ -0,0 +1,17 @@
+import { Outlet } from 'react-router-dom';
+import { Header } from './Header';
+import { Sidebar } from './Sidebar';
+
+export function Layout() {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Header />
+      <div className="flex">
+        <Sidebar />
+        <main className="flex-1 p-6">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}
diff --git a/dashboard/src/components/layout/Sidebar.tsx b/dashboard/src/components/layout/Sidebar.tsx
new file mode 100644
index 0000000..d89f5bb
--- /dev/null
+++ b/dashboard/src/components/layout/Sidebar.tsx
@@ -0,0 +1,35 @@
+import { NavLink } from 'react-router-dom';
+
+const navItems = [
+  { to: '/', label: 'Reviews', icon: '📋' },
+  { to: '/metrics', label: 'Metrics', icon: '📊' },
+];
+
+export function Sidebar() {
+  return (
+    <aside className="w-64 bg-white border-r border-gray-200 min-h-screen">
+      <nav className="p-4">
+        <ul className="space-y-1">
+          {navItems.map((item) => (
+            <li key={item.to}>
+              <NavLink
+                to={item.to}
+                end={item.to === '/'}
+                className={({ isActive }) =>
+                  `flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
+                    isActive
+                      ? 'bg-indigo-50 text-indigo-700'
+                      : 'text-gray-700 hover:bg-gray-100'
+                  }`
+                }
+              >
+                <span>{item.icon}</span>
+                <span>{item.label}</span>
+              </NavLink>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </aside>
+  );
+}