feat(pitch-deck): admin UI for investor + financial-model management (#3)

Adds /pitch-admin dashboard with real bcrypt admin accounts and full
audit attribution for every state-changing action.

- pitch_admins + pitch_admin_sessions tables (migration 002)
- pitch_audit_logs.admin_id + target_investor_id columns
- lib/admin-auth.ts: bcryptjs, single-session, jose JWT with audience claim
- middleware.ts: two-cookie gating with bearer-secret CLI fallback
- 14 new API routes (admin-auth, dashboard, investor detail/edit/resend,
  admins CRUD, fm scenarios + assumptions PATCH)
- 9 admin pages: login, dashboard, investors list/new/[id], audit,
  financial-model list/[id], admins
- Bootstrap CLI: npm run admin:create
- 36 vitest tests covering auth, admin-auth, rate-limit primitives

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

pitch-deck/components/pitch-admin/AdminShell.tsx

@@ -0,0 +1,129 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname, useRouter } from 'next/navigation'
+import { useState } from 'react'
+import {
+  LayoutDashboard,
+  Users,
+  FileText,
+  TrendingUp,
+  ShieldCheck,
+  LogOut,
+  Menu,
+  X,
+} from 'lucide-react'
+
+interface AdminShellProps {
+  admin: { id: string; email: string; name: string }
+  children: React.ReactNode
+}
+
+const NAV = [
+  { href: '/pitch-admin', label: 'Dashboard', icon: LayoutDashboard, exact: true },
+  { href: '/pitch-admin/investors', label: 'Investors', icon: Users },
+  { href: '/pitch-admin/audit', label: 'Audit Log', icon: FileText },
+  { href: '/pitch-admin/financial-model', label: 'Financial Model', icon: TrendingUp },
+  { href: '/pitch-admin/admins', label: 'Admins', icon: ShieldCheck },
+]
+
+export default function AdminShell({ admin, children }: AdminShellProps) {
+  const pathname = usePathname()
+  const router = useRouter()
+  const [open, setOpen] = useState(false)
+
+  async function logout() {
+    await fetch('/api/admin-auth/logout', { method: 'POST' })
+    router.push('/pitch-admin/login')
+  }
+
+  function isActive(item: typeof NAV[number]) {
+    if (item.exact) return pathname === item.href
+    return pathname === item.href || pathname.startsWith(item.href + '/')
+  }
+
+  return (
+    <div className="min-h-screen bg-[#0a0a1a] text-white flex">
+      {/* Sidebar */}
+      <aside
+        className={`fixed lg:static inset-y-0 left-0 z-40 w-64 bg-black/40 backdrop-blur-xl border-r border-white/[0.06]
+          transform transition-transform lg:transform-none ${open ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}`}
+      >
+        <div className="h-full flex flex-col">
+          <div className="px-6 py-5 border-b border-white/[0.06]">
+            <div className="flex items-center gap-3">
+              <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
+                <svg width="20" height="20" viewBox="0 0 40 40" fill="none">
+                  <path d="M8 12L20 6L32 12V28L20 34L8 28V12Z" stroke="white" strokeWidth="2.5" fill="none" />
+                  <circle cx="20" cy="20" r="3" fill="white" />
+                </svg>
+              </div>
+              <div className="min-w-0">
+                <div className="text-sm font-semibold text-white">BreakPilot</div>
+                <div className="text-[10px] text-white/40 uppercase tracking-wider">Pitch Admin</div>
+              </div>
+            </div>
+          </div>
+
+          <nav className="flex-1 px-3 py-4 space-y-1">
+            {NAV.map((item) => {
+              const Icon = item.icon
+              const active = isActive(item)
+              return (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  onClick={() => setOpen(false)}
+                  className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors
+                    ${active
+                      ? 'bg-indigo-500/15 text-indigo-300 border border-indigo-500/20'
+                      : 'text-white/60 hover:bg-white/[0.04] hover:text-white/90 border border-transparent'}`}
+                >
+                  <Icon className="w-4 h-4" />
+                  {item.label}
+                </Link>
+              )
+            })}
+          </nav>
+
+          <div className="px-3 py-4 border-t border-white/[0.06]">
+            <div className="px-3 py-2 mb-2">
+              <div className="text-sm font-medium text-white/90 truncate">{admin.name}</div>
+              <div className="text-xs text-white/40 truncate">{admin.email}</div>
+            </div>
+            <button
+              onClick={logout}
+              className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-white/60 hover:bg-red-500/10 hover:text-red-300 transition-colors"
+            >
+              <LogOut className="w-4 h-4" />
+              Logout
+            </button>
+          </div>
+        </div>
+      </aside>
+
+      {/* Mobile overlay */}
+      {open && (
+        <div
+          onClick={() => setOpen(false)}
+          className="fixed inset-0 bg-black/60 z-30 lg:hidden"
+        />
+      )}
+
+      {/* Main content */}
+      <div className="flex-1 flex flex-col min-w-0">
+        <header className="lg:hidden flex items-center justify-between px-4 py-3 border-b border-white/[0.06]">
+          <button
+            onClick={() => setOpen(true)}
+            className="w-9 h-9 rounded-lg bg-white/[0.04] flex items-center justify-center"
+          >
+            <Menu className="w-5 h-5" />
+          </button>
+          <div className="text-sm font-semibold">Pitch Admin</div>
+          <div className="w-9" />
+        </header>
+        <main className="flex-1 p-6 lg:p-8 overflow-y-auto">{children}</main>
+      </div>
+    </div>
+  )
+}

pitch-deck/components/pitch-admin/AuditLogTable.tsx

@@ -0,0 +1,153 @@
+'use client'
+
+export interface AuditLogRow {
+  id: number | string
+  action: string
+  created_at: string
+  details: Record<string, unknown> | null
+  ip_address?: string | null
+  slide_id?: string | null
+  investor_email?: string | null
+  investor_name?: string | null
+  target_investor_email?: string | null
+  target_investor_name?: string | null
+  admin_email?: string | null
+  admin_name?: string | null
+}
+
+interface AuditLogTableProps {
+  rows: AuditLogRow[]
+  showActor?: boolean
+}
+
+const ACTION_COLORS: Record<string, string> = {
+  login_success: 'text-green-400 bg-green-500/10',
+  login_failed: 'text-rose-400 bg-rose-500/10',
+  admin_login_success: 'text-green-400 bg-green-500/10',
+  admin_login_failed: 'text-rose-400 bg-rose-500/10',
+  admin_logout: 'text-white/40 bg-white/[0.04]',
+  logout: 'text-white/40 bg-white/[0.04]',
+  slide_viewed: 'text-indigo-400 bg-indigo-500/10',
+  assumption_changed: 'text-amber-400 bg-amber-500/10',
+  assumption_edited: 'text-amber-400 bg-amber-500/10',
+  scenario_edited: 'text-amber-400 bg-amber-500/10',
+  investor_invited: 'text-purple-400 bg-purple-500/10',
+  magic_link_resent: 'text-purple-400 bg-purple-500/10',
+  investor_revoked: 'text-rose-400 bg-rose-500/10',
+  investor_edited: 'text-blue-400 bg-blue-500/10',
+  admin_created: 'text-green-400 bg-green-500/10',
+  admin_edited: 'text-blue-400 bg-blue-500/10',
+  admin_deactivated: 'text-rose-400 bg-rose-500/10',
+  new_ip_detected: 'text-amber-400 bg-amber-500/10',
+}
+
+function actorLabel(row: AuditLogRow): { label: string; sub: string; kind: 'admin' | 'investor' | 'system' } {
+  if (row.admin_email) {
+    return { label: row.admin_name || row.admin_email, sub: row.admin_email, kind: 'admin' }
+  }
+  if (row.investor_email) {
+    return { label: row.investor_name || row.investor_email, sub: row.investor_email, kind: 'investor' }
+  }
+  return { label: 'system', sub: '', kind: 'system' }
+}
+
+function targetLabel(row: AuditLogRow): string | null {
+  if (row.target_investor_email) {
+    return row.target_investor_name
+      ? `${row.target_investor_name} <${row.target_investor_email}>`
+      : row.target_investor_email
+  }
+  return null
+}
+
+function formatDate(iso: string): string {
+  return new Date(iso).toLocaleString()
+}
+
+function summarizeDetails(action: string, details: Record<string, unknown> | null): string {
+  if (!details) return ''
+  if (action === 'slide_viewed' && details.slide_id) return String(details.slide_id)
+  if (action === 'assumption_edited' || action === 'scenario_edited') {
+    const before = details.before as Record<string, unknown> | undefined
+    const after = details.after as Record<string, unknown> | undefined
+    if (before && after) {
+      const keys = Object.keys(after).filter(k => JSON.stringify(before[k]) !== JSON.stringify(after[k]))
+      return keys.map(k => `${k}: ${JSON.stringify(before[k])} → ${JSON.stringify(after[k])}`).join(', ')
+    }
+  }
+  if (action === 'investor_invited' || action === 'magic_link_resent') {
+    return String(details.email || '')
+  }
+  if (action === 'investor_edited') {
+    const before = details.before as Record<string, unknown> | undefined
+    const after = details.after as Record<string, unknown> | undefined
+    if (before && after) {
+      const keys = Object.keys(after).filter(k => before[k] !== after[k])
+      return keys.map(k => `${k}: "${before[k] || ''}" → "${after[k] || ''}"`).join(', ')
+    }
+  }
+  return JSON.stringify(details).slice(0, 80)
+}
+
+export default function AuditLogTable({ rows, showActor = true }: AuditLogTableProps) {
+  if (rows.length === 0) {
+    return <div className="text-white/40 text-sm py-8 text-center">No audit events</div>
+  }
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="text-left text-xs uppercase tracking-wider text-white/40 border-b border-white/[0.06]">
+            <th className="py-3 px-3 font-medium">When</th>
+            {showActor && <th className="py-3 px-3 font-medium">Actor</th>}
+            <th className="py-3 px-3 font-medium">Action</th>
+            <th className="py-3 px-3 font-medium">Target / Details</th>
+            <th className="py-3 px-3 font-medium">IP</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row) => {
+            const actor = actorLabel(row)
+            const target = targetLabel(row)
+            const summary = summarizeDetails(row.action, row.details)
+            const colorClass = ACTION_COLORS[row.action] || 'text-white/60 bg-white/[0.04]'
+            return (
+              <tr key={row.id} className="border-b border-white/[0.04] hover:bg-white/[0.02]">
+                <td className="py-3 px-3 text-white/60 whitespace-nowrap">{formatDate(row.created_at)}</td>
+                {showActor && (
+                  <td className="py-3 px-3">
+                    <div className="flex items-center gap-2">
+                      <span
+                        className={`text-[9px] px-1.5 py-0.5 rounded uppercase font-semibold ${
+                          actor.kind === 'admin'
+                            ? 'bg-purple-500/20 text-purple-300'
+                            : actor.kind === 'investor'
+                              ? 'bg-indigo-500/20 text-indigo-300'
+                              : 'bg-white/10 text-white/50'
+                        }`}
+                      >
+                        {actor.kind}
+                      </span>
+                      <div className="min-w-0">
+                        <div className="text-white/80 truncate max-w-[180px]">{actor.label}</div>
+                      </div>
+                    </div>
+                  </td>
+                )}
+                <td className="py-3 px-3">
+                  <span className={`text-xs px-2 py-1 rounded font-mono ${colorClass}`}>{row.action}</span>
+                </td>
+                <td className="py-3 px-3 text-white/60 max-w-md">
+                  {target && <div className="text-white/80 truncate">→ {target}</div>}
+                  {summary && <div className="text-xs text-white/40 truncate">{summary}</div>}
+                </td>
+                <td className="py-3 px-3 text-white/40 font-mono text-xs">{row.ip_address || '—'}</td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    </div>
+  )
+}

pitch-deck/components/pitch-admin/StatCard.tsx

@@ -0,0 +1,33 @@
+import { LucideIcon } from 'lucide-react'
+
+interface StatCardProps {
+  label: string
+  value: string | number
+  icon?: LucideIcon
+  hint?: string
+  accent?: 'indigo' | 'green' | 'amber' | 'rose'
+}
+
+const ACCENTS = {
+  indigo: 'text-indigo-400 bg-indigo-500/10 border-indigo-500/20',
+  green: 'text-green-400 bg-green-500/10 border-green-500/20',
+  amber: 'text-amber-400 bg-amber-500/10 border-amber-500/20',
+  rose: 'text-rose-400 bg-rose-500/10 border-rose-500/20',
+}
+
+export default function StatCard({ label, value, icon: Icon, hint, accent = 'indigo' }: StatCardProps) {
+  return (
+    <div className="bg-white/[0.04] border border-white/[0.06] rounded-2xl p-5">
+      <div className="flex items-start justify-between mb-3">
+        <span className="text-xs font-medium text-white/50 uppercase tracking-wider">{label}</span>
+        {Icon && (
+          <div className={`w-9 h-9 rounded-lg flex items-center justify-center border ${ACCENTS[accent]}`}>
+            <Icon className="w-4 h-4" />
+          </div>
+        )}
+      </div>
+      <div className="text-3xl font-semibold text-white">{value}</div>
+      {hint && <div className="text-xs text-white/40 mt-1">{hint}</div>}
+    </div>
+  )
+}