feat(dashboard): scaffold BetterBase Next.js dashboard app

betterbase/apps/dashboard/README.md

@@ -1,28 +1,21 @@
-# Dashboard App (Scaffold)
+# BetterBase Dashboard
 
-Future BetterBase dashboard/studio app.
+Next.js 15 dashboard for managing BetterBase projects (Supabase Studio-style UX).
 
-## Planned Features (Optional)
+## Stack
 
-- [ ] Table browser and editor
-- [ ] API explorer / request runner
-- [ ] Auth and session management views
-- [ ] Project settings and environment controls
+- Next.js 15 App Router
+- React 19 + TypeScript strict mode
+- Tailwind CSS + shadcn-style UI primitives
+- TanStack Query v5
+- Recharts + Lucide React
+- `@betterbase/client` for API access
 
-## Tech Stack (Optional)
+## Development
 
-- Framework: _TBD_ (e.g., Next.js / Astro / React)
-- UI: _TBD_ (e.g., Tailwind CSS / shadcn/ui)
-- State/Data: _TBD_ (e.g., TanStack Query)
+```bash
+bun install
+bun run dev
+```
 
-## Setup (Placeholder)
-
-- `cd betterbase/apps/dashboard`
-- `bun install`
-- `bun run dev`
-
-## Related Docs / Links (Optional)
-
-- Design doc: _TBD_
-- Roadmap ticket(s): _TBD_
-- UX references: _TBD_
+Set `NEXT_PUBLIC_BETTERBASE_URL` to your BetterBase server URL.

betterbase/apps/dashboard/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

betterbase/apps/dashboard/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  reactStrictMode: true,
+};
+
+export default nextConfig;

betterbase/apps/dashboard/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@betterbase/dashboard",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@betterbase/client": "workspace:*",
+    "@radix-ui/react-dialog": "^1.1.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@tanstack/react-query": "^5.67.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.468.0",
+    "next": "^15.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "recharts": "^2.15.0",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.25.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.9.3",
+    "@tailwindcss/postcss": "^4.0.0"
+  }
+}

betterbase/apps/dashboard/postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};

betterbase/apps/dashboard/src/app/(auth)/login/page.tsx

@@ -0,0 +1,22 @@
+import Link from 'next/link';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+
+export default function LoginPage() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-zinc-50 p-4 dark:bg-zinc-950">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>Sign in</CardTitle>
+          <CardDescription>Connect to your BetterBase project.</CardDescription>
+        </CardHeader>
+        <CardContent className="text-sm">
+          Auth form wiring is next. Need an account?{' '}
+          <Link href="/signup" className="text-blue-600 hover:underline">
+            Sign up
+          </Link>
+          .
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

betterbase/apps/dashboard/src/app/(auth)/signup/page.tsx

@@ -0,0 +1,22 @@
+import Link from 'next/link';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+
+export default function SignupPage() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-zinc-50 p-4 dark:bg-zinc-950">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>Create account</CardTitle>
+          <CardDescription>Start managing your BetterBase backend.</CardDescription>
+        </CardHeader>
+        <CardContent className="text-sm">
+          Signup flow wiring is next. Already have an account?{' '}
+          <Link href="/login" className="text-blue-600 hover:underline">
+            Sign in
+          </Link>
+          .
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

betterbase/apps/dashboard/src/app/(dashboard)/api-explorer/page.tsx

@@ -0,0 +1,13 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+
+export default function ApiPage() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>API Explorer</CardTitle>
+        <CardDescription>Inspect generated endpoints and test requests.</CardDescription>
+      </CardHeader>
+      <CardContent className="text-sm text-zinc-600 dark:text-zinc-400">API explorer ships in Phase 9.3.</CardContent>
+    </Card>
+  );
+}

betterbase/apps/dashboard/src/app/(dashboard)/auth/page.tsx

@@ -0,0 +1,13 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+
+export default function AuthManagerPage() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Authentication Manager</CardTitle>
+        <CardDescription>Manage users, sessions, and auth providers.</CardDescription>
+      </CardHeader>
+      <CardContent className="text-sm text-zinc-600 dark:text-zinc-400">Authentication manager ships in Phase 9.4.</CardContent>
+    </Card>
+  );
+}

betterbase/apps/dashboard/src/app/(dashboard)/layout.tsx

@@ -0,0 +1,18 @@
+import { Header } from '@/components/layout/header';
+import { Sidebar } from '@/components/layout/sidebar';
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex h-screen bg-zinc-50 dark:bg-zinc-950">
+      <Sidebar />
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <Header />
+        <main className="flex-1 overflow-y-auto p-4 md:p-6">{children}</main>
+      </div>
+    </div>
+  );
+}

betterbase/apps/dashboard/src/app/(dashboard)/logs/page.tsx

@@ -0,0 +1,13 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+
+export default function LogsPage() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Logs Viewer</CardTitle>
+        <CardDescription>Track database, auth, and function logs in real-time.</CardDescription>
+      </CardHeader>
+      <CardContent className="text-sm text-zinc-600 dark:text-zinc-400">Logs viewer ships in Phase 9.5.</CardContent>
+    </Card>
+  );
+}

betterbase/apps/dashboard/src/app/(dashboard)/page.tsx

@@ -0,0 +1,68 @@
+import { ApiUsageChart } from '@/components/charts/api-usage-chart';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Activity, Code, Database, Users } from 'lucide-react';
+
+export default function DashboardPage() {
+  const stats = [
+    { name: 'Total Tables', value: '12', icon: Database, change: '+2 this week' },
+    { name: 'API Calls', value: '45.2K', icon: Code, change: '+12% from last week' },
+    { name: 'Active Users', value: '2,547', icon: Users, change: '+234 this week' },
+    { name: 'Uptime', value: '99.9%', icon: Activity, change: '30 days' },
+  ];
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-3xl font-bold tracking-tight">Dashboard</h2>
+        <p className="text-zinc-600 dark:text-zinc-400">Welcome back! Here&apos;s an overview of your project.</p>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        {stats.map((stat) => (
+          <Card key={stat.name}>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">{stat.name}</CardTitle>
+              <stat.icon className="h-4 w-4 text-zinc-600 dark:text-zinc-400" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{stat.value}</div>
+              <p className="text-xs text-zinc-600 dark:text-zinc-400">{stat.change}</p>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>API Usage</CardTitle>
+            <CardDescription>Requests over the last 7 days</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ApiUsageChart />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Quick Actions</CardTitle>
+            <CardDescription>Common tasks and shortcuts</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              {['Create new table', 'Test API endpoint', 'View logs'].map((action) => (
+                <button
+                  type="button"
+                  key={action}
+                  className="w-full rounded-lg border border-zinc-200 p-3 text-left text-sm hover:bg-zinc-50 dark:border-zinc-800 dark:hover:bg-zinc-900"
+                >
+                  {action}
+                </button>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

betterbase/apps/dashboard/src/app/(dashboard)/settings/page.tsx

@@ -0,0 +1,13 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+
+export default function SettingsPage() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Project Settings</CardTitle>
+        <CardDescription>Environment variables, integrations, and billing controls.</CardDescription>
+      </CardHeader>
+      <CardContent className="text-sm text-zinc-600 dark:text-zinc-400">Configure your project settings here.</CardContent>
+    </Card>
+  );
+}

betterbase/apps/dashboard/src/app/(dashboard)/tables/[table]/page.tsx

@@ -0,0 +1,10 @@
+import { TableEditor } from '@/components/tables/table-editor';
+
+export default async function TableDetailPage({
+  params,
+}: {
+  params: Promise<{ table: string }>;
+}) {
+  const { table } = await params;
+  return <TableEditor tableName={table} />;
+}

betterbase/apps/dashboard/src/app/(dashboard)/tables/page.tsx

@@ -0,0 +1,5 @@
+import { TableBrowser } from '@/components/tables/table-browser';
+
+export default function TablesPage() {
+  return <TableBrowser />;
+}

betterbase/apps/dashboard/src/app/globals.css

@@ -0,0 +1,55 @@
+@import 'tailwindcss';
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+  --primary: 221 83% 53%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 221 83% 53%;
+  --radius: 0.75rem;
+}
+
+.dark {
+  --background: 240 10% 3.9%;
+  --foreground: 0 0% 98%;
+  --card: 240 10% 3.9%;
+  --card-foreground: 0 0% 98%;
+  --popover: 240 10% 3.9%;
+  --popover-foreground: 0 0% 98%;
+  --primary: 217 91% 60%;
+  --primary-foreground: 222 47% 11%;
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
+  --accent: 240 3.7% 15.9%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+  --ring: 224.3 76.3% 48%;
+}
+
+* {
+  border-color: hsl(var(--border));
+}
+
+body {
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+}

betterbase/apps/dashboard/src/app/layout.tsx

@@ -0,0 +1,25 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+import { Providers } from '@/components/providers';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'BetterBase Dashboard',
+  description: 'Manage your BetterBase backends',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}