dev-api-ui 0.1.7

package/ui/components/DashboardPage.tsx

@@ -0,0 +1,773 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import StatusMark from './StatusMark';
+
+type View = 'dashboard' | 'billing' | 'settings';
+
+/* ── tiny helpers ────────────────────────────────────────────────── */
+const A = 'var(--accent)';
+const D = 'var(--down)';
+const W = 'var(--warn)';
+const T = 'var(--tertiary)';
+const DOTS = '••••••••••••••••••••••••••';
+
+function Label({ children }: { children: React.ReactNode }) {
+  return (
+    <span style={{
+      fontSize: 10, fontWeight: 600, textTransform: 'uppercase',
+      letterSpacing: '.07em', color: 'var(--tertiary)',
+    }}>
+      {children}
+    </span>
+  );
+}
+
+function SectionHead({ children }: { children: React.ReactNode }) {
+  return (
+    <h2 style={{
+      fontFamily: 'var(--mono)', fontSize: 18, fontWeight: 600,
+      letterSpacing: '-.01em', margin: '30px 0 12px',
+    }}>
+      {children}
+    </h2>
+  );
+}
+
+function Card({ children, style }: { children: React.ReactNode; style?: React.CSSProperties }) {
+  return (
+    <div style={{
+      background: 'var(--surface)', border: '0.5px solid var(--hairline-2)',
+      borderRadius: 8, ...style,
+    }}>
+      {children}
+    </div>
+  );
+}
+
+function GhostBtn({ children, onClick, style }: {
+  children: React.ReactNode; onClick?: () => void; style?: React.CSSProperties;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      style={{
+        fontFamily: 'inherit', fontSize: 13, fontWeight: 500,
+        padding: '7px 13px', borderRadius: 4,
+        border: '0.5px solid var(--hairline-2)',
+        background: 'var(--surface)', color: 'var(--ink)', cursor: 'pointer',
+        ...style,
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+/* ── usage line/area chart (inline SVG, no lib) ──────────────────── */
+function UsageChart() {
+  return (
+    <div>
+      <svg viewBox="0 0 1040 200" width="100%" height="180" preserveAspectRatio="none" style={{ display: 'block' }} aria-hidden="true">
+        <line x1="0" y1="50" x2="1040" y2="50" stroke="var(--hairline)" strokeWidth="1" />
+        <line x1="0" y1="100" x2="1040" y2="100" stroke="var(--hairline)" strokeWidth="1" />
+        <line x1="0" y1="150" x2="1040" y2="150" stroke="var(--hairline)" strokeWidth="1" />
+        <polygon points="0,200 0,150 87,140 174,150 261,120 348,128 435,96 522,108 609,70 696,86 783,60 870,78 957,52 1040,64 1040,200" fill="var(--accent)" fillOpacity={0.07} />
+        <polyline points="0,150 87,140 174,150 261,120 348,128 435,96 522,108 609,70 696,86 783,60 870,78 957,52 1040,64" fill="none" stroke="var(--accent)" strokeWidth="2" />
+      </svg>
+      <div style={{
+        display: 'flex', justifyContent: 'space-between',
+        fontSize: 11, color: 'var(--tertiary)', padding: '8px 2px 2px',
+      }}>
+        <span>14:00 yesterday</span><span>02:00</span><span>14:00 today</span>
+      </div>
+    </div>
+  );
+}
+
+/* ── Sidebar ──────────────────────────────────────────────────────── */
+interface NavItem { label: string; href: string; badge?: string; onClick?: () => void; active: boolean }
+interface NavGroup { title: string; items: NavItem[] }
+
+function Sidebar({ groups }: { groups: NavGroup[] }) {
+  return (
+    <aside style={{
+      borderRight: '0.5px solid var(--hairline)',
+      padding: '22px 16px',
+      position: 'sticky', top: 55,
+      alignSelf: 'start',
+      height: 'calc(100vh - 55px)',
+      overflowY: 'auto',
+      width: 222, flexShrink: 0,
+    }}>
+      {groups.map((g) => (
+        <div key={g.title} style={{ marginBottom: 20 }}>
+          <div style={{
+            fontSize: 11, fontWeight: 600, textTransform: 'uppercase',
+            letterSpacing: '.07em', color: 'var(--tertiary)',
+            marginBottom: 8, padding: '0 8px',
+          }}>
+            {g.title}
+          </div>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+            {g.items.map((it) => (
+              <a
+                key={it.label}
+                href={it.href}
+                onClick={it.onClick ? (e) => { e.preventDefault(); it.onClick!(); } : undefined}
+                aria-current={it.active ? 'page' : undefined}
+                style={{
+                  display: 'flex', alignItems: 'center', gap: 9,
+                  fontSize: 14, padding: '7px 8px', borderRadius: 4,
+                  textDecoration: 'none',
+                  color: it.active ? 'var(--ink)' : 'var(--secondary)',
+                  background: it.active ? '#F2F2EF' : 'transparent',
+                  fontWeight: it.active ? 500 : 400,
+                }}
+              >
+                {it.label}
+                {it.badge && (
+                  <span style={{ marginLeft: 'auto', fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--tertiary)' }}>
+                    {it.badge}
+                  </span>
+                )}
+              </a>
+            ))}
+          </div>
+        </div>
+      ))}
+    </aside>
+  );
+}
+
+/* ── Overview view ───────────────────────────────────────────────── */
+function OverviewView({ pkgName, repoUrl }: { pkgName: string; repoUrl: string }) {
+  const [shown, setShown] = useState<Record<string, boolean>>({});
+  const toggle = (id: string) => setShown((s) => ({ ...s, [id]: !s[id] }));
+
+  const stats = [
+    { label: 'Calls today', value: '84,210', note: '+12% vs yesterday', color: A },
+    { label: 'Daily quota', value: '8.4%', note: 'well within limit', color: A },
+    { label: 'Active keys', value: '2', note: '1 used in last hour', color: A },
+    { label: 'p50 latency', value: '41ms', note: '+3ms vs last wk', color: W },
+  ];
+
+  const keyDefs = [
+    { id: 'live', env: 'LIVE', real: 'ck_live_8f3a2b9c7f0d4e1aa44', accent: true },
+    { id: 'sandbox', env: 'SANDBOX', real: 'ck_test_2b9c7f0d4e1a8f3a210', accent: false },
+  ];
+
+  const requests = [
+    { time: '14:02:11', endpoint: 'GET /v1/fx/eurusd', code: '200', latency: '38 ms', color: A },
+    { time: '14:02:09', endpoint: 'GET /v1/fx/gbpusd', code: '200', latency: '41 ms', color: A },
+    { time: '14:01:52', endpoint: 'GET /v1/metals/xauusd', code: '200', latency: '55 ms', color: A },
+    { time: '14:01:30', endpoint: 'GET /v1/power/pjm-rt', code: '429', latency: '12 ms', color: W },
+    { time: '14:00:18', endpoint: 'GET /v1/fx/usdzar', code: '403', latency: '9 ms', color: D },
+  ];
+
+  const webhooks = [
+    { url: 'https://northwind.co/hooks/fx', event: 'series.threshold', status: 'Active', color: A },
+    { url: 'https://northwind.co/hooks/status', event: 'feed.status', status: 'Failing', color: D },
+  ];
+
+  const tbl = { borderBottom: '0.5px solid var(--hairline)', fontSize: 13 } as const;
+  const tHead = { fontSize: 10, fontWeight: 600, textTransform: 'uppercase' as const, letterSpacing: '.07em', color: 'var(--tertiary)' };
+
+  return (
+    <>
+      {/* Header row */}
+      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap', marginBottom: 20 }}>
+        <div>
+          <h1 style={{ fontFamily: 'var(--mono)', fontSize: 26, fontWeight: 600, letterSpacing: '-.02em' }}>Overview</h1>
+          <p style={{ fontSize: 14, color: 'var(--secondary)', marginTop: 4 }}>
+            Project <span style={{ fontFamily: 'var(--mono)', color: 'var(--ink)' }}>fx-prod</span> · last 24 hours
+          </p>
+        </div>
+        <a
+          href="#keys"
+          style={{
+            display: 'inline-flex', alignItems: 'center', gap: 7,
+            fontSize: 14, fontWeight: 500, padding: '9px 15px',
+            borderRadius: 4, border: '0.5px solid transparent',
+            background: 'var(--accent)', color: '#fff', textDecoration: 'none',
+          }}
+        >
+          Create key
+        </a>
+      </div>
+
+      {/* Stats row */}
+      <div id="overview" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 14, scrollMarginTop: 70 }}>
+        {stats.map((s) => (
+          <Card key={s.label} style={{ padding: '16px 18px' }}>
+            <Label>{s.label}</Label>
+            <div style={{ fontSize: 26, fontWeight: 600, letterSpacing: '-.02em', marginTop: 7 }}>{s.value}</div>
+            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 500, marginTop: 7, color: s.color }}>
+              <span style={{ width: 6, height: 6, borderRadius: '50%', background: s.color, display: 'inline-block' }} />
+              {s.note}
+            </div>
+          </Card>
+        ))}
+      </div>
+
+      {/* API Keys */}
+      <h2 id="keys" style={{ fontFamily: 'var(--mono)', fontSize: 18, fontWeight: 600, letterSpacing: '-.01em', margin: '36px 0 6px', scrollMarginTop: 70 }}>
+        API keys
+      </h2>
+      <p style={{ fontSize: 14, color: 'var(--secondary)', marginBottom: 14 }}>
+        One key streams live and pulls history. Keep them server-side; rotate instantly if exposed.
+      </p>
+      <Card style={{ padding: '6px 18px' }}>
+        {keyDefs.map((k, i) => {
+          const isShown = !!shown[k.id];
+          return (
+            <div
+              key={k.id}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 14,
+                padding: '14px 0',
+                borderBottom: i < keyDefs.length - 1 ? '0.5px solid var(--hairline)' : 'none',
+              }}
+            >
+              <span style={{
+                flexShrink: 0, width: 88, textAlign: 'center',
+                fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 600, letterSpacing: '.04em',
+                color: k.accent ? A : T,
+                border: `0.5px solid ${k.accent ? '#BFE3D0' : 'var(--hairline-2)'}`,
+                borderRadius: 4, padding: '5px 0',
+              }}>
+                {k.env}
+              </span>
+              <span style={{
+                flex: 1, minWidth: 0,
+                fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--ink)',
+                border: '0.5px solid var(--hairline-2)', borderRadius: 4,
+                padding: '8px 12px', background: 'var(--paper)',
+                whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
+              }}>
+                {isShown ? k.real : DOTS}
+              </span>
+              <GhostBtn onClick={() => toggle(k.id)}>{isShown ? 'Hide' : 'Reveal'}</GhostBtn>
+              <GhostBtn onClick={() => navigator.clipboard.writeText(k.real)}>Copy</GhostBtn>
+            </div>
+          );
+        })}
+      </Card>
+
+      {/* REST + Install */}
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 16 }}>
+        <Card style={{ padding: '20px 22px' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+            <Label>REST API</Label>
+            <span style={{
+              fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 600,
+              color: '#fff', background: 'var(--ink)', borderRadius: 4, padding: '2px 7px',
+            }}>HTTP</span>
+          </div>
+          <h3 style={{ fontFamily: 'var(--mono)', fontSize: 17, fontWeight: 600, letterSpacing: '-.01em', marginTop: 12 }}>
+            Use your key over REST
+          </h3>
+          <p style={{ fontSize: 14, color: 'var(--secondary)', marginTop: 8, lineHeight: 1.55 }}>
+            The same key that streams live prices pulls history over plain HTTP — fx, metals, and power, point-in-time, with every response available as JSON or CSV.
+          </p>
+          <a
+            href="#"
+            style={{
+              display: 'inline-flex', alignItems: 'center', gap: 7,
+              fontSize: 14, fontWeight: 500, marginTop: 14,
+              padding: '8px 14px', borderRadius: 4,
+              border: '0.5px solid var(--hairline-2)',
+              background: 'var(--surface)', color: 'var(--ink)', textDecoration: 'none',
+            }}
+          >
+            Read the API docs
+            <svg viewBox="0 0 24 24" width={14} height={14} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <path d="M5 12h14" /><path d="M13 6l6 6-6 6" />
+            </svg>
+          </a>
+        </Card>
+
+        <Card style={{ padding: '20px 22px' }}>
+          <Label>Install</Label>
+          <p style={{ fontSize: 14, color: 'var(--secondary)', marginTop: 12, lineHeight: 1.55 }}>
+            The client is open source and published to PyPI. One dependency, typed responses.
+          </p>
+          <div style={{
+            display: 'flex', alignItems: 'center', gap: 10, marginTop: 14,
+            border: '0.5px solid var(--hairline-2)', borderRadius: 4,
+            padding: '9px 12px', background: 'var(--paper)',
+          }}>
+            <span style={{ flex: 1, minWidth: 0, fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--ink)' }}>
+              <span style={{ color: 'var(--accent)' }}>$</span> pip install {pkgName}
+            </span>
+            <GhostBtn style={{ fontSize: 12, padding: '5px 11px' }} onClick={() => navigator.clipboard.writeText('pip install console')}>Copy</GhostBtn>
+          </div>
+          <a
+            href="#"
+            style={{
+              display: 'inline-flex', alignItems: 'center', gap: 7,
+              fontSize: 13, color: 'var(--secondary)', marginTop: 12, textDecoration: 'none',
+            }}
+          >
+            <svg viewBox="0 0 24 24" width={15} height={15} fill="currentColor" aria-hidden="true">
+              <path d="M12 2a10 10 0 0 0-3.16 19.49c.5.09.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.89 1.53 2.34 1.09 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02a9.5 9.5 0 0 1 5 0c1.91-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.68 0 3.84-2.34 4.69-4.57 4.94.36.31.68.92.68 1.85l-.01 2.75c0 .27.18.58.69.48A10 10 0 0 0 12 2z" />
+            </svg>
+            {repoUrl}
+          </a>
+        </Card>
+      </div>
+
+      {/* Usage */}
+      <h2 id="usage" style={{ fontFamily: 'var(--mono)', fontSize: 18, fontWeight: 600, letterSpacing: '-.01em', margin: '34px 0 14px', scrollMarginTop: 70 }}>
+        Usage
+      </h2>
+      <Card style={{ padding: '18px 20px 12px' }}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
+          <div style={{ fontSize: 14, fontWeight: 500 }}>Requests · last 24h</div>
+          <div style={{ fontSize: 12, color: 'var(--tertiary)' }}>84,210 of 1,000,000 daily</div>
+        </div>
+        <UsageChart />
+      </Card>
+
+      {/* Recent requests */}
+      <div style={{ margin: '24px 0 14px' }}>
+        <h3 style={{ fontFamily: 'var(--mono)', fontSize: 15, fontWeight: 600, letterSpacing: '-.01em' }}>Recent requests</h3>
+      </div>
+      <Card style={{ overflow: 'hidden' }}>
+        <div style={{ display: 'grid', gridTemplateColumns: '150px 1fr 90px 90px', alignItems: 'center', gap: 16, padding: '9px 18px', borderBottom: '0.5px solid var(--hairline-2)', background: '#F4F4F1' }}>
+          {['Time', 'Endpoint', 'Status', 'Latency'].map((h, i) => (
+            <span key={h} style={{ ...tHead, textAlign: i === 3 ? 'right' : undefined }}>{h}</span>
+          ))}
+        </div>
+        {requests.map((r) => (
+          <div key={r.time + r.endpoint} style={{ display: 'grid', gridTemplateColumns: '150px 1fr 90px 90px', alignItems: 'center', gap: 16, padding: '11px 18px', ...tbl }}>
+            <span style={{ color: 'var(--secondary)' }}>{r.time}</span>
+            <span style={{ fontFamily: 'var(--mono)', color: 'var(--ink)' }}>{r.endpoint}</span>
+            <span>
+              <StatusMark color={r.color} label={r.code} size={6} fontSize={13} />
+            </span>
+            <span style={{ textAlign: 'right', color: 'var(--secondary)' }}>{r.latency}</span>
+          </div>
+        ))}
+      </Card>
+
+      {/* Webhooks */}
+      <h2 id="webhooks" style={{ fontFamily: 'var(--mono)', fontSize: 18, fontWeight: 600, letterSpacing: '-.01em', margin: '36px 0 6px', scrollMarginTop: 70 }}>
+        Webhooks
+      </h2>
+      <p style={{ fontSize: 14, color: 'var(--secondary)', marginBottom: 14 }}>
+        Get a POST when a series crosses a threshold or a feed changes status.
+      </p>
+      <Card style={{ overflow: 'hidden' }}>
+        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 110px', alignItems: 'center', gap: 16, padding: '9px 18px', borderBottom: '0.5px solid var(--hairline-2)', background: '#F4F4F1' }}>
+          {['Endpoint', 'Event', 'Status'].map((h) => (
+            <span key={h} style={tHead}>{h}</span>
+          ))}
+        </div>
+        {webhooks.map((w) => (
+          <div key={w.url} style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 110px', alignItems: 'center', gap: 16, padding: '12px 18px', ...tbl }}>
+            <span style={{ fontFamily: 'var(--mono)', color: 'var(--ink)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{w.url}</span>
+            <span style={{ color: 'var(--secondary)' }}>{w.event}</span>
+            <span><StatusMark color={w.color} label={w.status} size={6} fontSize={13} /></span>
+          </div>
+        ))}
+        <div style={{ padding: '13px 18px' }}>
+          <GhostBtn>
+            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
+              <svg viewBox="0 0 24 24" width={14} height={14} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                <path d="M12 5v14" /><path d="M5 12h14" />
+              </svg>
+              Add endpoint
+            </span>
+          </GhostBtn>
+        </div>
+      </Card>
+    </>
+  );
+}
+
+/* ── Billing view ────────────────────────────────────────────────── */
+function BillingView() {
+  const plan = { price: '$49', cycle: '/mo', renews: 'Jul 1, 2026', calls: '84,210', quota: '1,000,000', pct: 8 };
+  const invoices = [
+    { date: '2026-06-01', amount: '$49.00', status: 'Paid', color: A },
+    { date: '2026-05-01', amount: '$49.00', status: 'Paid', color: A },
+    { date: '2026-04-01', amount: '$49.00', status: 'Paid', color: A },
+    { date: '2026-03-01', amount: '$19.00', status: 'Paid', color: A },
+  ];
+  const tHead = { fontSize: 10, fontWeight: 600, textTransform: 'uppercase' as const, letterSpacing: '.07em', color: 'var(--tertiary)' };
+
+  return (
+    <div style={{ maxWidth: 760 }}>
+      <h1 style={{ fontFamily: 'var(--mono)', fontSize: 26, fontWeight: 600, letterSpacing: '-.02em' }}>Billing</h1>
+      <p style={{ fontSize: 14, color: 'var(--secondary)', marginTop: 4 }}>
+        Workspace <span style={{ fontFamily: 'var(--mono)', color: 'var(--ink)' }}>Northwind</span> · plan, usage, and invoices
+      </p>
+
+      {/* Current plan */}
+      <Card style={{ padding: '20px 22px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 18, flexWrap: 'wrap', marginTop: 24 }}>
+        <div>
+          <Label>Current plan</Label>
+          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 8 }}>
+            <span style={{ fontFamily: 'var(--mono)', fontSize: 24, fontWeight: 600, letterSpacing: '-.02em' }}>Pro</span>
+            <span style={{ fontSize: 15, color: 'var(--secondary)' }}>{plan.price}{plan.cycle}</span>
+          </div>
+          <div style={{ fontSize: 13, color: 'var(--tertiary)', marginTop: 4 }}>Renews {plan.renews}</div>
+        </div>
+        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
+          <a
+            href="#"
+            style={{
+              display: 'inline-flex', alignItems: 'center', gap: 7,
+              fontSize: 14, fontWeight: 500, padding: '9px 15px',
+              borderRadius: 4, border: '0.5px solid transparent',
+              background: 'var(--accent)', color: '#fff', textDecoration: 'none',
+            }}
+          >
+            Manage plan
+          </a>
+          <GhostBtn style={{ fontSize: 14, padding: '9px 15px' }}>Cancel plan</GhostBtn>
+        </div>
+      </Card>
+
+      <SectionHead>Usage this cycle</SectionHead>
+      <Card style={{ padding: '20px 22px' }}>
+        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>
+          <span style={{ fontSize: 14, color: 'var(--ink)' }}>
+            <span style={{ fontWeight: 500 }}>{plan.calls}</span> of {plan.quota} calls
+          </span>
+          <span style={{ fontSize: 13, color: 'var(--tertiary)' }}>{plan.pct}% used</span>
+        </div>
+        <div style={{ height: 8, borderRadius: 999, background: '#EFEFEC', marginTop: 12, overflow: 'hidden' }}>
+          <div style={{ height: '100%', width: `${plan.pct}%`, background: 'var(--accent)', borderRadius: 999 }} />
+        </div>
+        <div style={{ fontSize: 13, color: 'var(--tertiary)', marginTop: 10 }}>
+          Overage is billed at $0.40 per 1,000 calls beyond your daily quota.
+        </div>
+      </Card>
+
+      <SectionHead>Payment method</SectionHead>
+      <Card style={{ padding: '18px 22px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 18, flexWrap: 'wrap' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+          <span style={{
+            flexShrink: 0, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+            width: 38, height: 26, border: '0.5px solid var(--hairline-2)', borderRadius: 4, color: 'var(--secondary)',
+          }}>
+            <svg viewBox="0 0 24 24" width={18} height={18} fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden="true">
+              <rect x="2" y="5" width="20" height="14" rx="2" /><path d="M2 10h20" />
+            </svg>
+          </span>
+          <div>
+            <div style={{ fontSize: 14, fontWeight: 500 }}>Visa ending 4242</div>
+            <div style={{ fontSize: 13, color: 'var(--tertiary)' }}>Expires 04/28</div>
+          </div>
+        </div>
+        <GhostBtn style={{ fontSize: 14, padding: '9px 15px' }}>Update</GhostBtn>
+      </Card>
+
+      <SectionHead>Invoices</SectionHead>
+      <Card style={{ overflow: 'hidden' }}>
+        <div style={{ display: 'grid', gridTemplateColumns: '170px 120px 1fr 30px', alignItems: 'center', gap: 16, padding: '9px 18px', borderBottom: '0.5px solid var(--hairline-2)', background: '#F4F4F1' }}>
+          {['Date', 'Amount', 'Status', ''].map((h, i) => (
+            <span key={i} style={tHead}>{h}</span>
+          ))}
+        </div>
+        {invoices.map((v) => (
+          <div key={v.date} style={{ display: 'grid', gridTemplateColumns: '170px 120px 1fr 30px', alignItems: 'center', gap: 16, padding: '12px 18px', borderBottom: '0.5px solid var(--hairline)', fontSize: 13 }}>
+            <span style={{ color: 'var(--secondary)' }}>{v.date}</span>
+            <span style={{ fontWeight: 500 }}>{v.amount}</span>
+            <span><StatusMark color={v.color} label={v.status} size={6} fontSize={13} /></span>
+            <span style={{ textAlign: 'right' }}>
+              <a href="#" aria-label={'Download invoice ' + v.date} style={{ display: 'inline-flex', color: 'var(--accent)' }}>
+                <svg viewBox="0 0 24 24" width={14} height={14} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                  <path d="M12 3v12" /><path d="M7 11l5 5 5-5" /><path d="M5 21h14" />
+                </svg>
+              </a>
+            </span>
+          </div>
+        ))}
+      </Card>
+    </div>
+  );
+}
+
+/* ── Settings view ───────────────────────────────────────────────── */
+function SettingsView() {
+  const [twofa, setTwofa] = useState(true);
+
+  const sessions = [
+    { device: 'MacBook Pro · Chrome', loc: 'London, UK', last: 'Active now', current: true },
+    { device: 'iPhone 15 · Safari', loc: 'London, UK', last: '2 hours ago', current: false },
+    { device: 'Linux · Firefox', loc: 'Frankfurt, DE', last: '3 days ago', current: false },
+  ];
+
+  const inputStyle: React.CSSProperties = {
+    width: '100%', fontFamily: 'inherit', fontSize: 14,
+    padding: '9px 11px', border: '0.5px solid var(--hairline-2)',
+    borderRadius: 4, background: 'var(--surface)', color: 'var(--ink)',
+    outline: 'none',
+  };
+
+  return (
+    <div style={{ maxWidth: 720 }}>
+      <h1 style={{ fontFamily: 'var(--mono)', fontSize: 26, fontWeight: 600, letterSpacing: '-.02em' }}>Settings</h1>
+      <p style={{ fontSize: 14, color: 'var(--secondary)', marginTop: 4 }}>
+        Workspace <span style={{ fontFamily: 'var(--mono)', color: 'var(--ink)' }}>Northwind</span> · profile, security, and defaults
+      </p>
+
+      <SectionHead>Profile</SectionHead>
+      <Card style={{ padding: '20px 22px' }}>
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
+          <label style={{ display: 'block' }}>
+            <span style={{ display: 'block', fontSize: 12, fontWeight: 500, color: 'var(--secondary)', marginBottom: 6 }}>Full name</span>
+            <input defaultValue="Dana Khoury" style={inputStyle} />
+          </label>
+          <label style={{ display: 'block' }}>
+            <span style={{ display: 'block', fontSize: 12, fontWeight: 500, color: 'var(--secondary)', marginBottom: 6 }}>Email</span>
+            <input defaultValue="dana@northwind.co" style={inputStyle} />
+          </label>
+        </div>
+        <div style={{ marginTop: 16 }}>
+          <GhostBtn style={{ fontSize: 14, padding: '8px 15px' }}>Save changes</GhostBtn>
+        </div>
+      </Card>
+
+      <SectionHead>Security</SectionHead>
+      <Card style={{ padding: '20px 22px' }}>
+        {/* Password change */}
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
+          <label style={{ display: 'block' }}>
+            <span style={{ display: 'block', fontSize: 12, fontWeight: 500, color: 'var(--secondary)', marginBottom: 6 }}>Current password</span>
+            <input type="password" style={inputStyle} />
+          </label>
+          <label style={{ display: 'block' }}>
+            <span style={{ display: 'block', fontSize: 12, fontWeight: 500, color: 'var(--secondary)', marginBottom: 6 }}>New password</span>
+            <input type="password" style={inputStyle} />
+          </label>
+        </div>
+        <div style={{ marginTop: 16 }}>
+          <GhostBtn style={{ fontSize: 14, padding: '8px 15px' }}>Update password</GhostBtn>
+        </div>
+        <div style={{ marginTop: 18, borderTop: '0.5px solid var(--hairline)' }} />
+
+        {/* 2FA toggle */}
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, paddingTop: 18 }}>
+          <div>
+            <div style={{ fontSize: 14, fontWeight: 500 }}>Two-factor authentication</div>
+            <div style={{ fontSize: 13, color: 'var(--secondary)', marginTop: 2 }}>Require a one-time code at sign-in.</div>
+          </div>
+          {/* Real stateful toggle */}
+          <button
+            onClick={() => setTwofa((v) => !v)}
+            role="switch"
+            aria-checked={twofa}
+            aria-label="Two-factor authentication"
+            style={{
+              flexShrink: 0, width: 40, height: 23, borderRadius: 999,
+              border: '0.5px solid var(--hairline-2)',
+              background: twofa ? 'var(--accent)' : 'var(--hairline-2)',
+              position: 'relative', cursor: 'pointer', padding: 0,
+              transition: 'background .15s',
+            }}
+          >
+            <span style={{
+              position: 'absolute', top: 2,
+              left: twofa ? 18 : 2,
+              width: 17, height: 17, borderRadius: '50%',
+              background: '#fff', border: '0.5px solid var(--hairline-2)',
+              transition: 'left .15s',
+            }} />
+          </button>
+        </div>
+
+        {/* Active sessions */}
+        <div style={{ paddingTop: 18, marginTop: 18, borderTop: '0.5px solid var(--hairline)' }}>
+          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink)', marginBottom: 10 }}>Active sessions</div>
+          <div style={{ border: '0.5px solid var(--hairline-2)', borderRadius: 6, overflow: 'hidden' }}>
+            {sessions.map((s, i) => (
+              <div key={s.device} style={{
+                display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr', gap: 14,
+                alignItems: 'center', padding: '11px 14px',
+                borderBottom: i < sessions.length - 1 ? '0.5px solid var(--hairline)' : 'none',
+                fontSize: 13,
+              }}>
+                <span style={{ color: 'var(--ink)' }}>
+                  {s.device}
+                  {s.current && <span style={{ color: 'var(--accent)', fontWeight: 500 }}> · this device</span>}
+                </span>
+                <span style={{ color: 'var(--secondary)' }}>{s.loc}</span>
+                <span style={{ color: 'var(--tertiary)', textAlign: 'right' }}>{s.last}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </Card>
+
+      <SectionHead>API defaults</SectionHead>
+      <Card style={{ padding: '20px 22px' }}>
+        <label style={{ display: 'block', maxWidth: 320 }}>
+          <span style={{ display: 'block', fontSize: 12, fontWeight: 500, color: 'var(--secondary)', marginBottom: 6 }}>Usage alert threshold</span>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+            <input defaultValue="80" style={{ ...inputStyle, width: 90 }} />
+            <span style={{ fontSize: 14, color: 'var(--secondary)' }}>% of daily quota</span>
+          </div>
+        </label>
+        <div style={{ marginTop: 16 }}>
+          <GhostBtn style={{ fontSize: 14, padding: '8px 15px' }}>Save changes</GhostBtn>
+        </div>
+      </Card>
+
+      <SectionHead>
+        <span style={{ color: 'var(--down)' }}>Danger zone</span>
+      </SectionHead>
+      <div style={{
+        background: 'var(--surface)', border: '0.5px solid #E7C4C0', borderRadius: 8,
+        padding: '18px 22px', display: 'flex', alignItems: 'center',
+        justifyContent: 'space-between', gap: 18, flexWrap: 'wrap',
+      }}>
+        <div>
+          <div style={{ fontSize: 14, fontWeight: 500 }}>Delete project fx-prod</div>
+          <div style={{ fontSize: 13, color: 'var(--secondary)', marginTop: 2 }}>
+            Permanently removes keys, webhooks, and usage history. This cannot be undone.
+          </div>
+        </div>
+        <button style={{
+          flexShrink: 0, fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
+          padding: '9px 15px', borderRadius: 4,
+          border: '0.5px solid var(--down)', background: 'transparent',
+          color: 'var(--down)', cursor: 'pointer',
+        }}>
+          Delete project
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/* ── Dashboard topbar ────────────────────────────────────────────── */
+function DashTopbar({ brand, onSignOut }: { brand: string; onSignOut: () => void }) {
+  return (
+    <header style={{
+      borderBottom: '0.5px solid var(--hairline)',
+      background: 'var(--surface)',
+      position: 'sticky', top: 0, zIndex: 20,
+    }}>
+      <div style={{
+        padding: '12px 22px', display: 'flex',
+        alignItems: 'center', justifyContent: 'space-between', gap: 24,
+      }}>
+        {/* Left */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 14, flex: 1, minWidth: 0, maxWidth: 520 }}>
+          <div style={{
+            display: 'flex', alignItems: 'center', gap: 9,
+            fontFamily: 'var(--mono)', fontWeight: 600, fontSize: 16,
+            letterSpacing: '-.01em', flexShrink: 0,
+          }}>
+            <span style={{ width: 9, height: 9, background: 'var(--accent)', transform: 'rotate(45deg)', display: 'inline-block' }} />
+            {brand}
+          </div>
+          <span style={{
+            display: 'flex', alignItems: 'center', gap: 7,
+            fontSize: 12, color: 'var(--secondary)',
+            border: '0.5px solid var(--hairline-2)', borderRadius: 4,
+            padding: '5px 10px', flexShrink: 0,
+          }}>
+            Northwind
+            <svg viewBox="0 0 24 24" width={12} height={12} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <path d="M6 9l6 6 6-6" />
+            </svg>
+          </span>
+          <span style={{
+            display: 'flex', alignItems: 'center', gap: 9, flex: 1, minWidth: 0,
+            fontSize: 13, color: 'var(--tertiary)',
+            border: '0.5px solid var(--hairline-2)', borderRadius: 4,
+            padding: '7px 11px', background: 'var(--paper)',
+          }}>
+            <svg viewBox="0 0 24 24" width={14} height={14} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true">
+              <circle cx="11" cy="11" r="7" /><path d="M21 21l-4-4" />
+            </svg>
+            <span style={{ flex: 1 }}>Jump to…</span>
+            <span style={{ border: '0.5px solid var(--hairline-2)', borderRadius: 3, padding: '1px 6px', fontSize: 11 }}>⌘K</span>
+          </span>
+        </div>
+
+        {/* Right */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexShrink: 0 }}>
+          <Link href="/docs" style={{ fontSize: 13, color: 'var(--secondary)', textDecoration: 'none' }}>Docs</Link>
+          <StatusMark color="var(--accent)" label="Operational" pulse size={6} fontSize={12} />
+          <button
+            onClick={onSignOut}
+            style={{
+              display: 'inline-flex', alignItems: 'center', gap: 8,
+              fontFamily: 'inherit', fontSize: 13, padding: '5px 10px 5px 6px',
+              borderRadius: 4, border: '0.5px solid var(--hairline-2)',
+              background: 'var(--surface)', color: 'var(--ink)', cursor: 'pointer',
+            }}
+          >
+            <span style={{
+              width: 22, height: 22, borderRadius: '50%',
+              background: 'var(--ink)', color: '#fff',
+              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+              fontFamily: 'var(--mono)', fontSize: 10, fontWeight: 600,
+            }}>DK</span>
+            Sign out
+          </button>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+/* ── Root export ─────────────────────────────────────────────────── */
+export interface DashboardPageProps {
+  brand?: string;
+  pkgName?: string;
+  repoUrl?: string;
+}
+
+export default function DashboardPage({
+  brand = 'Console',
+  pkgName = 'console',
+  repoUrl = 'github.com/console/console-py',
+}: DashboardPageProps = {}) {
+  const [view, setView] = useState<View>('dashboard');
+  const [section, setSection] = useState<string>('overview');
+
+  const mk = (label: string, href: string, badge: string | undefined, onClick: () => void, active: boolean): NavItem => ({
+    label, href, badge, onClick, active,
+  });
+
+  const navGroups: NavGroup[] = [
+    {
+      title: 'Project',
+      items: [
+        mk('Overview', '#overview', undefined, () => { setView('dashboard'); setSection('overview'); }, view === 'dashboard' && section === 'overview'),
+        mk('API keys', '#keys', '2', () => { setView('dashboard'); setSection('keys'); }, view === 'dashboard' && section === 'keys'),
+        mk('Usage', '#usage', undefined, () => { setView('dashboard'); setSection('usage'); }, view === 'dashboard' && section === 'usage'),
+        mk('Webhooks', '#webhooks', '2', () => { setView('dashboard'); setSection('webhooks'); }, view === 'dashboard' && section === 'webhooks'),
+      ],
+    },
+    {
+      title: 'Account',
+      items: [
+        mk('Billing', '#', undefined, () => setView('billing'), view === 'billing'),
+        mk('Settings', '#', undefined, () => setView('settings'), view === 'settings'),
+      ],
+    },
+  ];
+
+  return (
+    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
+      <DashTopbar brand={brand} onSignOut={() => {}} />
+      <div style={{ display: 'grid', gridTemplateColumns: '222px minmax(0,1fr)', flex: 1, alignItems: 'start' }}>
+        <Sidebar groups={navGroups} />
+        <main style={{ padding: '26px 30px 64px', minWidth: 0 }}>
+          {view === 'dashboard' && <OverviewView pkgName={pkgName} repoUrl={repoUrl} />}
+          {view === 'billing' && <BillingView />}
+          {view === 'settings' && <SettingsView />}
+        </main>
+      </div>
+    </div>
+  );
+}