@volter/twin-stripe 0.1.2 → 2.0.0

package/dist/client/stripe-mirror.js

@@ -0,0 +1,823 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// The Stripe Dashboard (manifest screen `dashboard`, dashboard.stripe.com/test/{section}): a React app
+// (Bun-bundled) authored as Stripe's Dashboard in test mode, reading and writing only through Stripe's API
+// (client/dashboard-api.ts). Its pages sit at Stripe's own paths: /test/dashboard (Home),
+// /test/balance/overview, /test/payments[/{pi|ch}], /test/customers[/{cus}], /test/subscriptions[/{sub}],
+// /test/invoices[/{in}], /test/products, /test/developers, /test/settings, and the pages under "More".
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { formatStripeAmount, formatRecurring, formatPaymentMethod, formatPaymentError, formatBalanceSummary, formatAccountFlags, accountCurrentlyDue, publicBusinessName, PLATFORM_DEFAULT_NAME, } from "../src/stripe-shared.js";
+import { API_BASE, list, loadBalances, loadCustomer, loadCustomers, loadDevelopers, loadHome, loadInvoices, loadPayment, loadPayments, loadProducts, loadSubscription, loadSubscriptions, retrieve, createRefund, cancelSubscription, createObject, } from "./dashboard-api.js";
+// ── routing: Stripe's paths, inside whatever prefix this page is served under ─────────────────────
+const BASE_PATH = API_BASE;
+export function routeOf(pathname) {
+    const inside = pathname.startsWith(BASE_PATH) ? pathname.slice(BASE_PATH.length) : pathname;
+    const parts = inside.split('/').filter(Boolean);
+    return parts[0] === 'test' ? parts.slice(1) : parts;
+}
+const hrefOf = (to) => `${BASE_PATH}/test/${to.replace(/^\/+/, '')}`;
+// ── formatting ───────────────────────────────────────────────────────────────
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+export function formatDate(ts, withTime = true) {
+    const n = Number(ts);
+    if (!Number.isFinite(n) || n <= 0)
+        return '—';
+    const d = new Date(n * 1000);
+    const day = `${MONTHS[d.getMonth()]} ${d.getDate()}`;
+    const sameYear = d.getFullYear() === new Date().getFullYear();
+    if (!withTime)
+        return `${day}, ${d.getFullYear()}`;
+    const h = d.getHours() % 12 || 12;
+    const time = `${h}:${String(d.getMinutes()).padStart(2, '0')} ${d.getHours() < 12 ? 'AM' : 'PM'}`;
+    return sameYear ? `${day}, ${time}` : `${day}, ${d.getFullYear()}, ${time}`;
+}
+const money = (amount, currency) => formatStripeAmount(Number(amount) || 0, currency);
+const ccy = (currency) => String(currency ?? 'usd').toUpperCase();
+const titleCase = (s) => s.replace(/_/g, ' ').replace(/^\w/, (c) => c.toUpperCase());
+const customerLabel = (c) => (c ? c.name || c.email || c.id : '—');
+// ── icons ────────────────────────────────────────────────────────────────────
+const ICONS = {
+    home: 'M8 1.5 1.5 7v7.5h4.5v-4.5h4v4.5h4.5V7L8 1.5z',
+    balance: 'M2 4h12v9H2zM2 7h12M5 10.5h3',
+    transactions: 'M2 5h10M9 2l3 3-3 3M14 11H4M7 8l-3 3 3 3',
+    customers: 'M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM2.5 14.5c.6-2.8 2.8-4.5 5.5-4.5s4.9 1.7 5.5 4.5',
+    catalog: 'M2 4.5 8 1.5l6 3v7L8 14.5l-6-3v-7zM2 4.5l6 3 6-3M8 7.5v7',
+    connect: 'M5.5 10.5 10.5 5.5M7 3.5l1.5-1.5a3 3 0 0 1 4.5 4.5L11.5 8M9 12.5 7.5 14a3 3 0 0 1-4.5-4.5L4.5 8',
+    payments: 'M1.5 3.5h13v9h-13zM1.5 6.5h13M4 10h2.5',
+    billing: 'M3 1.5h10v13l-2-1.3-2 1.3-2-1.3-2 1.3-2-1.3zM5.5 5h5M5.5 8h5',
+    reporting: 'M2 14h12M4 11V7M8 11V3M12 11V8',
+    more: 'M3 8h.01M8 8h.01M13 8h.01',
+    developers: 'M5 4 1.5 8 5 12M11 4l3.5 4-3.5 4',
+    search: 'M7 12.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM11 11l3.5 3.5',
+    bell: 'M4 11V7a4 4 0 0 1 8 0v4l1.5 1.5h-11L4 11zM6.5 14h3',
+    gear: 'M8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zM8 1v2M8 13v2M1 8h2M13 8h2M3 3l1.4 1.4M11.6 11.6 13 13M3 13l1.4-1.4M11.6 4.4 13 3',
+    help: 'M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zM6 6a2 2 0 1 1 2.5 2c-.4.1-.5.4-.5.8V10M8 12v.01',
+    plus: 'M8 2v12M2 8h12',
+    check: 'M3 8.5 6.5 12 13 4.5',
+    x: 'M4 4l8 8M12 4l-8 8',
+    refund: 'M4 6h6.5a3 3 0 0 1 0 6H6M6.5 3.5 4 6l2.5 2.5',
+    clock: 'M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zM8 4v4l2.5 1.5',
+    chevronDown: 'M4 6l4 4 4-4',
+    chevronRight: 'M6 4l4 4-4 4',
+    dispute: 'M8 1.5 15 14H1L8 1.5zM8 6v3.5M8 11.5v.01',
+    arrowRight: 'M2 8h11M9 4l4 4-4 4',
+    card: 'M1.5 3.5h13v9h-13zM1.5 6.5h13',
+    download: 'M8 2v8M4.5 6.5 8 10l3.5-3.5M2.5 13.5h11',
+    person: 'M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM2.5 14.5c.6-2.8 2.8-4.5 5.5-4.5s4.9 1.7 5.5 4.5',
+};
+export function Icon({ name, size = 16, className }) {
+    return (_jsx("svg", { className: `icon ${className ?? ''}`, width: size, height: size, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: ICONS[name] ?? '' }) }));
+}
+/** The card network mark Stripe shows beside a card's last four. */
+export function CardBrand({ brand }) {
+    const b = String(brand ?? '').toLowerCase();
+    if (b === 'mastercard') {
+        return (_jsx("span", { className: "brand brand-mastercard", title: "Mastercard", children: _jsxs("svg", { width: "20", height: "12", viewBox: "0 0 20 12", "aria-hidden": "true", children: [_jsx("circle", { cx: "7", cy: "6", r: "5", fill: "#EB001B" }), _jsx("circle", { cx: "13", cy: "6", r: "5", fill: "#F79E1B", fillOpacity: "0.9" })] }) }));
+    }
+    if (b === 'amex')
+        return _jsx("span", { className: "brand brand-amex", title: "American Express", children: "AMEX" });
+    if (b === 'visa')
+        return _jsx("span", { className: "brand brand-visa", title: "Visa", children: "VISA" });
+    return _jsx("span", { className: "brand brand-generic", title: brand ?? 'Card', children: _jsx(Icon, { name: "card", size: 12 }) });
+}
+export function CardLabel({ pm }) {
+    const card = pm?.card;
+    if (!card)
+        return _jsx("span", { className: "muted", children: pm ? formatPaymentMethod(pm) : '—' });
+    return _jsxs("span", { className: "card-label", children: [_jsx(CardBrand, { brand: card.brand }), _jsx("span", { className: "dots", children: "\u2022\u2022\u2022\u2022" }), " ", card.last4] });
+}
+const STATUS = {
+    succeeded: { label: 'Succeeded', tone: 'green', icon: 'check' },
+    refunded: { label: 'Refunded', tone: 'grey', icon: 'refund' },
+    partially_refunded: { label: 'Partial refund', tone: 'grey', icon: 'refund' },
+    failed: { label: 'Failed', tone: 'red', icon: 'x' },
+    incomplete: { label: 'Incomplete', tone: 'grey', icon: 'clock' },
+    uncaptured: { label: 'Uncaptured', tone: 'blue', icon: 'clock' },
+    canceled: { label: 'Canceled', tone: 'grey', icon: 'x' },
+    disputed: { label: 'Disputed', tone: 'orange', icon: 'dispute' },
+    processing: { label: 'Pending', tone: 'grey', icon: 'clock' },
+    active: { label: 'Active', tone: 'green' },
+    trialing: { label: 'Trialing', tone: 'blue' },
+    past_due: { label: 'Past due', tone: 'red' },
+    unpaid: { label: 'Unpaid', tone: 'red' },
+    incomplete_expired: { label: 'Expired', tone: 'grey' },
+    paused: { label: 'Paused', tone: 'grey' },
+    paid: { label: 'Paid', tone: 'green' },
+    open: { label: 'Open', tone: 'blue' },
+    draft: { label: 'Draft', tone: 'grey' },
+    void: { label: 'Void', tone: 'grey' },
+    uncollectible: { label: 'Uncollectible', tone: 'red' },
+    pending: { label: 'Pending', tone: 'grey' },
+    enabled: { label: 'Enabled', tone: 'green' },
+    disabled: { label: 'Disabled', tone: 'grey' },
+    true: { label: 'Active', tone: 'green' },
+    false: { label: 'Archived', tone: 'grey' },
+};
+export function StatusPill({ value, suffix }) {
+    const key = String(value ?? '');
+    const s = STATUS[key] ?? { label: titleCase(key || '—'), tone: 'grey' };
+    return (_jsxs("span", { className: `pill pill-${s.tone}`, "data-status": key, children: [s.label, suffix ?? '', s.icon ? _jsx(Icon, { name: s.icon, size: 12 }) : null] }));
+}
+/** A declined payment's reason, as Stripe states it above the payment. */
+export function PaymentErrorBanner({ error }) {
+    const text = formatPaymentError(error);
+    if (!text)
+        return null;
+    const message = typeof error?.message === 'string' ? error.message : text;
+    return (_jsxs("div", { className: "pay-error", role: "alert", children: [_jsx(Icon, { name: "dispute" }), _jsxs("div", { children: [_jsx("div", { className: "pay-error-label", children: "Payment error" }), _jsxs("div", { className: "pay-error-text", children: [message, " ", _jsx("span", { className: "mono muted", children: text.split(':')[0] })] })] })] }));
+}
+/** The balance's per-currency buckets: incoming (pending) and available. */
+export function BalanceSummary({ row }) {
+    const buckets = formatBalanceSummary(row);
+    if (buckets.length === 0)
+        return null;
+    const label = (b) => (b === 'pending' ? 'Incoming' : 'Available');
+    return (_jsx("div", { className: "balance-summary", children: [...buckets].reverse().map((b) => (_jsxs("div", { className: `balance-bucket ${b.bucket}`, children: [_jsx("span", { className: "balance-bucket-label", children: label(b.bucket) }), _jsx("span", { className: "balance-bucket-amount", children: b.text })] }, b.bucket))) }));
+}
+/** A connected account's readiness: charges, payouts, details, and what is currently due. */
+export function ConnectAccountPanel({ row }) {
+    const flags = formatAccountFlags(row);
+    const due = accountCurrentlyDue(row);
+    if (flags.length === 0)
+        return null;
+    return (_jsxs("div", { className: "connect-panel", children: [_jsx("div", { className: "connect-flags", children: flags.map((f) => (_jsxs("div", { className: `connect-flag ${f.enabled ? 'ok' : 'warn'}`, children: [_jsx("span", { className: "connect-flag-label", children: f.label }), _jsx(StatusPill, { value: f.enabled ? 'enabled' : 'disabled' })] }, f.key))) }), due.length > 0 && (_jsxs("div", { className: "connect-requirements", role: "status", children: [_jsx("span", { className: "connect-req-label", children: "Requirements currently due" }), _jsx("ul", { className: "connect-req-list", children: due.map((d) => _jsx("li", { className: "connect-req-item mono", children: d }, d)) })] }))] }));
+}
+const d = (r) => formatDate(r.created);
+export const SECTIONS = [
+    { key: 'customers', label: 'Customers', path: 'customers', title: (r) => r.name || r.email || r.id, subtitle: (r) => r.email || r.id },
+    { key: 'payment_intents', label: 'Payments', path: 'payments', title: (r) => formatStripeAmount(r.amount, r.currency), subtitle: (r) => r.description || r.id },
+    { key: 'subscriptions', label: 'Subscriptions', path: 'subscriptions', title: (r) => r.id, subtitle: (r) => r.customer ?? '' },
+    { key: 'invoices', label: 'Invoices', path: 'invoices', title: (r) => formatStripeAmount(r.total ?? r.amount_due, r.currency), subtitle: (r) => r.number || r.id },
+    { key: 'products', label: 'Products', path: 'products', title: (r) => r.name || r.id, subtitle: (r) => r.description || r.id },
+    { key: 'prices', label: 'Prices', path: 'prices', title: (r) => `${formatStripeAmount(r.unit_amount, r.currency)}${formatRecurring(r.recurring) ? ` ${formatRecurring(r.recurring)}` : ''}`, subtitle: (r) => r.product ?? r.id },
+    { key: 'charges', label: 'Charges', path: 'charges', title: (r) => formatStripeAmount(r.amount, r.currency), subtitle: (r) => r.description || r.id },
+    { key: 'refunds', label: 'Refunds', path: 'refunds', title: (r) => formatStripeAmount(r.amount, r.currency), subtitle: (r) => r.charge ?? r.id },
+    { key: 'payment_methods', label: 'Payment Methods', path: 'payment-methods', title: (r) => formatPaymentMethod(r), subtitle: (r) => r.customer ?? r.id },
+    { key: 'setup_intents', label: 'Setup Intents', path: 'setup-intents', title: (r) => r.id, subtitle: (r) => r.usage ?? '' },
+    { key: 'invoiceitems', label: 'Invoice Items', path: 'invoice-items', title: (r) => formatStripeAmount(r.amount, r.currency), subtitle: (r) => r.description || r.customer || r.id },
+    { key: 'credit_notes', label: 'Credit Notes', path: 'credit-notes', title: (r) => formatStripeAmount(r.amount, r.currency), subtitle: (r) => r.invoice ?? r.id },
+    { key: 'tax_ids', label: 'Tax IDs', path: 'tax-ids', title: (r) => `${r.value ?? r.id}`, subtitle: (r) => `${r.type ?? ''}` },
+    { key: 'balance', label: 'Balance', path: 'balance', title: (r) => r.id, subtitle: () => '' },
+    // pages the Dashboard has, reached from the navigation
+    { key: 'disputes', label: 'Disputes', path: 'disputes', title: (r) => formatStripeAmount(r.amount, r.currency), subtitle: (r) => `${titleCase(String(r.reason ?? ''))} · ${r.charge ?? ''}`, page: true, columns: ['Amount', 'Reason'] },
+    { key: 'payouts', label: 'Payouts', path: 'payouts', title: (r) => formatStripeAmount(r.amount, r.currency), subtitle: (r) => `Arrives ${formatDate(r.arrival_date, false)}`, page: true, columns: ['Amount', 'Arrival'] },
+    { key: 'balance_transactions', label: 'Balance Transactions', path: 'balance-transactions', title: (r) => formatStripeAmount(r.amount, r.currency), subtitle: (r) => `${titleCase(String(r.type ?? ''))} · ${r.source ?? r.id}`, page: true, columns: ['Amount', 'Type'] },
+    { key: 'payment_links', label: 'Payment Links', path: 'payment-links', title: (r) => r.url || r.id, subtitle: (r) => (r.active ? 'Active' : 'Inactive'), page: true },
+    { key: 'coupons', label: 'Coupons', path: 'coupons', title: (r) => r.name || (r.percent_off != null ? `${r.percent_off}% off` : `${formatStripeAmount(r.amount_off, r.currency)} off`), subtitle: (r) => titleCase(String(r.duration ?? '')), page: true, columns: ['Coupon', 'Duration'] },
+    { key: 'promotion_codes', label: 'Promotion Codes', path: 'promotion-codes', title: (r) => r.code || r.id, subtitle: (r) => (typeof r.coupon === 'object' ? r.coupon?.id : r.coupon) ?? '', page: true },
+    { key: 'quotes', label: 'Quotes', path: 'quotes', title: (r) => formatStripeAmount(r.amount_total, r.currency), subtitle: (r) => r.customer ?? r.id, page: true, columns: ['Amount', 'Customer'] },
+    { key: 'accounts', label: 'Connected Accounts', path: 'connect/accounts', title: (r) => r.business_profile?.name || r.email || r.id, subtitle: (r) => `${titleCase(String(r.type ?? 'account'))} · ${r.country ?? ''}`, page: true },
+    { key: 'transfers', label: 'Transfers', path: 'connect/transfers', title: (r) => formatStripeAmount(r.amount, r.currency), subtitle: (r) => `To ${r.destination ?? '—'}`, page: true, columns: ['Amount', 'Destination'] },
+    { key: 'tax_rates', label: 'Tax Rates', path: 'tax/rates', title: (r) => `${r.display_name ?? 'Tax'} · ${r.percentage ?? 0}%`, subtitle: (r) => `${r.inclusive ? 'Inclusive' : 'Exclusive'} · ${r.jurisdiction ?? ''}`, page: true, columns: ['Tax rate', 'Type'] },
+    { key: 'reviews', label: 'Radar Reviews', path: 'radar/reviews', title: (r) => r.charge || r.payment_intent || r.id, subtitle: (r) => (r.open ? 'Open' : titleCase(String(r.closed_reason ?? 'closed'))), page: true },
+    { key: 'radar/value_lists', label: 'Radar Value Lists', path: 'radar/lists', title: (r) => r.name || r.alias || r.id, subtitle: (r) => `${r.item_type ?? ''} · ${r.alias ?? ''}`, page: true },
+    { key: 'terminal/readers', label: 'Terminal Readers', path: 'terminal/readers', title: (r) => r.label || r.id, subtitle: (r) => `${titleCase(String(r.device_type ?? ''))} · ${r.status ?? ''}`, page: true },
+    { key: 'terminal/locations', label: 'Terminal Locations', path: 'terminal/locations', title: (r) => r.display_name || r.id, subtitle: (r) => r.address?.city ?? '', page: true },
+    { key: 'issuing/cards', label: 'Issuing Cards', path: 'issuing/cards', title: (r) => `•••• ${r.last4 ?? ''}`, subtitle: (r) => `${titleCase(String(r.type ?? ''))} · ${typeof r.cardholder === 'object' ? r.cardholder?.name ?? '' : r.cardholder ?? ''}`, page: true },
+    { key: 'issuing/cardholders', label: 'Issuing Cardholders', path: 'issuing/cardholders', title: (r) => r.name || r.id, subtitle: (r) => r.email || titleCase(String(r.type ?? '')), page: true },
+    { key: 'reporting/report_runs', label: 'Reports', path: 'reports', title: (r) => r.report_type || r.id, subtitle: (r) => titleCase(String(r.status ?? '')), page: true },
+    { key: 'events', label: 'Events', path: 'events', title: (r) => r.type || r.id, subtitle: (r) => r.data?.object?.id ?? r.id, page: true, columns: ['Event', 'Object'] },
+    { key: 'webhook_endpoints', label: 'Webhook Endpoints', path: 'webhooks', title: (r) => r.url || r.id, subtitle: (r) => `${(r.enabled_events ?? []).length} events`, page: true },
+];
+const SECTION_BY_PATH = new Map(SECTIONS.filter((s) => s.page).map((s) => [s.path, s]));
+const statusOfRow = (r) => (r.status !== undefined ? r.status : r.active !== undefined ? String(r.active) : undefined);
+/** A Stripe list table over one resource's objects. */
+export function ListPane({ section, rows, query, currentId, onSelect }) {
+    return (_jsxs("table", { className: "table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: section.columns?.[0] ?? section.label.replace(/^(Radar|Terminal|Issuing|Tax) /, '') }), _jsx("th", { children: section.columns?.[1] ?? 'Details' }), _jsx("th", { children: "Status" }), _jsx("th", { children: "ID" }), _jsx("th", { className: "right", children: "Created" })] }) }), _jsxs("tbody", { children: [rows.length === 0 && _jsx("tr", { className: "empty-row", children: _jsx("td", { colSpan: 5, children: _jsx(EmptyState, { title: query ? 'No results' : `No ${section.label.toLowerCase()}` }) }) }), rows.map((row, i) => (_jsxs("tr", { className: `list-row ${currentId === row.id ? 'current' : ''}`, onClick: () => onSelect(row.id), children: [_jsx("td", { className: "strong", children: section.title(row) }), _jsx("td", { className: "muted", children: section.subtitle(row) }), _jsx("td", { children: statusOfRow(row) !== undefined ? _jsx(StatusPill, { value: statusOfRow(row) }) : null }), _jsx("td", { className: "mono muted", children: row.id }), _jsx("td", { className: "right muted nowrap", children: d(row) })] }, row.id ?? i)))] })] }));
+}
+export function globalSearch(data, query, limit = 12) {
+    const q = query.trim().toLowerCase();
+    if (!q)
+        return [];
+    const hits = [];
+    const add = (rows, kind, route, label, sub, fields) => {
+        for (const r of rows ?? []) {
+            if (hits.length >= limit)
+                return;
+            if (fields(r).some((f) => String(f ?? '').toLowerCase().includes(q)))
+                hits.push({ to: `${route}/${r.id}`, kind, label: label(r), sub: sub(r) });
+        }
+    };
+    add(data.customers, 'Customers', 'customers', (r) => r.name || r.email || r.id, (r) => r.email || r.id, (r) => [r.id, r.name, r.email, r.description]);
+    add(data.payment_intents, 'Payments', 'payments', (r) => `${formatStripeAmount(r.amount, r.currency)} ${ccy(r.currency)}`, (r) => r.description || r.id, (r) => [r.id, r.description, r.latest_charge, (Number(r.amount) / 100).toFixed(2)]);
+    add(data.subscriptions, 'Subscriptions', 'subscriptions', (r) => r.id, (r) => titleCase(String(r.status ?? '')), (r) => [r.id]);
+    add(data.invoices, 'Invoices', 'invoices', (r) => r.number || r.id, (r) => `${formatStripeAmount(r.total, r.currency)} · ${titleCase(String(r.status ?? ''))}`, (r) => [r.id, r.number, r.customer_email]);
+    add(data.products, 'Products', 'products', (r) => r.name || r.id, (r) => r.description || r.id, (r) => [r.id, r.name, r.description]);
+    return hits;
+}
+function SearchBox({ go }) {
+    const [q, setQ] = useState('');
+    const [open, setOpen] = useState(false);
+    const [data, setData] = useState({});
+    const input = useRef(null);
+    const load = useCallback(async () => {
+        const keys = ['customers', 'payment_intents', 'subscriptions', 'invoices', 'products'];
+        const lists = await Promise.all(keys.map((k) => list(`/v1/${k}${k === 'subscriptions' ? '?status=all' : ''}`).catch(() => [])));
+        setData(Object.fromEntries(keys.map((k, i) => [k, lists[i]])));
+    }, []);
+    useEffect(() => {
+        const onKey = (e) => {
+            const typing = e.target?.closest?.('input,textarea,select');
+            if (!typing && (e.key === '/' || ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k'))) {
+                e.preventDefault();
+                input.current?.focus();
+            }
+            if (e.key === 'Escape') {
+                setOpen(false);
+                input.current?.blur();
+            }
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, []);
+    const hits = useMemo(() => globalSearch(data, q), [data, q]);
+    const pick = (h) => { go(h.to); setOpen(false); setQ(''); input.current?.blur(); };
+    return (_jsxs("div", { className: "search", children: [_jsx(Icon, { name: "search", className: "search-icon" }), _jsx("input", { ref: input, className: "search-input cmdk-input", placeholder: "Search", value: q, onFocus: () => { setOpen(true); void load(); }, onBlur: () => window.setTimeout(() => setOpen(false), 150), onChange: (e) => { setQ(e.target.value); setOpen(true); }, onKeyDown: (e) => { if (e.key === 'Enter' && hits[0])
+                    pick(hits[0]); } }), open && q ? (_jsxs("div", { className: "cmdk", role: "listbox", "aria-label": "Search results", children: [hits.length === 0 && _jsxs("div", { className: "cmdk-empty", children: ["No results for \u201C", q, "\u201D"] }), hits.map((h, i) => (_jsxs(React.Fragment, { children: [i === 0 || hits[i - 1].kind !== h.kind ? _jsx("div", { className: "cmdk-group", children: h.kind }) : null, _jsxs("button", { className: "cmdk-hit", role: "option", onMouseDown: (e) => e.preventDefault(), onClick: () => pick(h), children: [_jsx("span", { className: "cmdk-hit-label", children: h.label }), _jsx("span", { className: "cmdk-hit-sub", children: h.sub })] })] }, h.to)))] })) : null] }));
+}
+const PRIMARY_NAV = [
+    { to: 'dashboard', label: 'Home', icon: 'home' },
+    { to: 'balance/overview', label: 'Balances', icon: 'balance', match: ['balance', 'payouts', 'balance-transactions'] },
+    { to: 'payments', label: 'Transactions', icon: 'transactions', match: ['payments', 'disputes'] },
+    { to: 'customers', label: 'Customers', icon: 'customers' },
+    { to: 'products', label: 'Product catalog', icon: 'catalog', match: ['products', 'coupons', 'promotion-codes'] },
+];
+const PRODUCT_NAV = [
+    { label: 'Connect', icon: 'connect', items: [{ to: 'connect/accounts', label: 'Connected accounts' }, { to: 'connect/transfers', label: 'Transfers' }] },
+    { label: 'Payments', icon: 'payments', items: [{ to: 'disputes', label: 'Disputes' }, { to: 'radar/reviews', label: 'Radar' }, { to: 'payment-links', label: 'Payment Links' }, { to: 'terminal/readers', label: 'Terminal' }] },
+    { label: 'Billing', icon: 'billing', items: [{ to: 'subscriptions', label: 'Subscriptions' }, { to: 'invoices', label: 'Invoices' }, { to: 'quotes', label: 'Quotes' }] },
+    { label: 'Reporting', icon: 'reporting', items: [{ to: 'reports', label: 'Reports' }] },
+    { label: 'More', icon: 'more', items: [{ to: 'tax/rates', label: 'Tax' }, { to: 'issuing/cards', label: 'Issuing' }] },
+];
+const isActive = (route, item) => {
+    const here = route.join('/');
+    return [item.to, ...(item.match ?? [])].some((m) => here === m || here.startsWith(`${m}/`) || route[0] === m);
+};
+export function SideNav({ route, go }) {
+    const [open, setOpen] = useState({ Billing: true });
+    const link = (item, sub = false) => (_jsxs("a", { href: hrefOf(item.to), className: `nav-item ${sub ? 'nav-sub' : ''} ${isActive(route, item) ? 'active' : ''}`, onClick: (e) => { e.preventDefault(); go(item.to); }, children: [item.icon ? _jsx(Icon, { name: item.icon }) : null, _jsx("span", { children: item.label })] }, item.to));
+    return (_jsxs("nav", { className: "side", "aria-label": "Main", children: [_jsxs("button", { className: "account-switcher", onClick: () => go('settings'), children: [_jsx("span", { className: "account-mark", children: "T" }), _jsx("span", { className: "account-name", children: "Twin Inc." }), _jsx(Icon, { name: "chevronDown", size: 12 })] }), _jsx("div", { className: "nav-group", children: PRIMARY_NAV.map((i) => link(i)) }), _jsx("div", { className: "nav-heading", children: "Products" }), _jsx("div", { className: "nav-group", children: PRODUCT_NAV.map((g) => {
+                    const expanded = open[g.label] || g.items.some((i) => isActive(route, i));
+                    return (_jsxs("div", { className: "nav-folder", children: [_jsxs("button", { className: `nav-item ${expanded ? 'expanded' : ''}`, "aria-expanded": expanded, onClick: () => setOpen((o) => ({ ...o, [g.label]: !expanded })), children: [_jsx(Icon, { name: g.icon }), _jsx("span", { children: g.label }), _jsx(Icon, { name: expanded ? 'chevronDown' : 'chevronRight', size: 12, className: "nav-caret" })] }), expanded ? g.items.map((i) => link(i, true)) : null] }, g.label));
+                }) }), _jsx("div", { className: "nav-foot", children: link({ to: 'developers', label: 'Developers', icon: 'developers', match: ['developers', 'events', 'webhooks'] }) })] }));
+}
+function TopBar({ go }) {
+    return (_jsxs("header", { className: "topbar", children: [_jsx(SearchBox, { go: go }), _jsxs("div", { className: "topbar-actions", children: [_jsx("button", { className: "icon-btn", title: "Help", "aria-label": "Help", children: _jsx(Icon, { name: "help" }) }), _jsx("button", { className: "icon-btn", title: "Notifications", "aria-label": "Notifications", children: _jsx(Icon, { name: "bell" }) }), _jsx("button", { className: "icon-btn", title: "Settings", "aria-label": "Settings", onClick: () => go('settings'), children: _jsx(Icon, { name: "gear" }) }), _jsx("button", { className: "icon-btn create", title: "Create", "aria-label": "Create", onClick: () => go('customers?create=1'), children: _jsx(Icon, { name: "plus" }) })] })] }));
+}
+export function TestModeBand() {
+    return (_jsxs("div", { className: "test-band", role: "note", children: [_jsx("span", { className: "test-band-tag", children: "Test mode" }), _jsx("span", { className: "test-band-text", children: "You\u2019re using test data. Changes you make here don\u2019t affect your live account." })] }));
+}
+// ── data per page ────────────────────────────────────────────────────────────
+/** Load a page's data through the API, refresh it every few seconds, and after a write. */
+function useApi(loader, deps) {
+    const [state, setState] = useState({});
+    const [tick, setTick] = useState(0);
+    useEffect(() => {
+        let live = true;
+        const run = () => loader().then((data) => { if (live)
+            setState({ data }); }, (e) => { if (live)
+            setState((s) => ({ ...s, error: String(e?.message ?? e) })); });
+        void run();
+        const timer = window.setInterval(run, 4000);
+        return () => { live = false; window.clearInterval(timer); };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [...deps, tick]);
+    return { ...state, reload: () => setTick((t) => t + 1) };
+}
+function EmptyState({ title, body }) {
+    return _jsxs("div", { className: "empty", children: [_jsx("div", { className: "empty-title", children: title }), body ? _jsx("div", { className: "empty-body", children: body }) : null] });
+}
+function Loading({ error }) {
+    return error ? _jsx("div", { className: "page-error", role: "alert", children: error }) : _jsx("div", { className: "loading", children: "Loading\u2026" });
+}
+function PageHead({ title, actions, kicker, children }) {
+    return (_jsxs("div", { className: "page-head", children: [kicker ? _jsx("div", { className: "kicker", children: kicker }) : null, _jsxs("div", { className: "page-head-row", children: [_jsx("h1", { children: title }), actions ? _jsx("div", { className: "page-actions", children: actions }) : null] }), children] }));
+}
+function FilterCards({ options, value, onChange }) {
+    return (_jsx("div", { className: "filter-cards", role: "tablist", children: options.map((o) => (_jsxs("button", { role: "tab", "aria-selected": value === o.key, className: `filter-card ${value === o.key ? 'selected' : ''}`, onClick: () => onChange(o.key), children: [_jsx("span", { className: "filter-card-label", children: o.label }), _jsx("span", { className: "filter-card-count", children: o.count })] }, o.key))) }));
+}
+/** One of the toolbar's filter chips: a dashed pill that opens a list of values; a chosen value fills it. */
+function FilterChip({ label, value, options, onChange }) {
+    const [open, setOpen] = useState(false);
+    const chosen = options.find((o) => o.key === value);
+    return (_jsxs("div", { className: "chip-wrap", children: [_jsxs("button", { className: `chip ${chosen ? 'chip-set' : ''}`, "aria-expanded": open, onClick: () => setOpen((o) => !o), children: [_jsx("span", { className: "chip-plus", onClick: (e) => { if (chosen) {
+                            e.stopPropagation();
+                            onChange(undefined);
+                            setOpen(false);
+                        } }, children: _jsx(Icon, { name: chosen ? 'x' : 'plus', size: 10 }) }), label, chosen ? _jsxs(_Fragment, { children: [_jsx("span", { className: "chip-sep", children: "|" }), _jsx("span", { className: "chip-value", children: chosen.label })] }) : null] }), open ? (_jsxs("div", { className: "popover", role: "menu", "aria-label": `Filter by ${label}`, children: [_jsxs("div", { className: "popover-title", children: ["Filter by ", label.toLowerCase()] }), options.map((o) => (_jsxs("button", { role: "menuitemradio", "aria-checked": o.key === value, className: `popover-item ${o.key === value ? 'checked' : ''}`, onClick: () => { onChange(o.key); setOpen(false); }, children: [_jsx("span", { className: "popover-radio" }), o.label] }, o.key)))] })) : null] }));
+}
+/** Download the rows the table shows as a CSV, as the Dashboard's Export does. */
+function exportCsv(name, header, rows) {
+    const cell = (v) => `"${String(v).replace(/"/g, '""')}"`;
+    const csv = [header, ...rows].map((r) => r.map(cell).join(',')).join('\n');
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(new Blob([csv], { type: 'text/csv' }));
+    a.download = `${name}.csv`;
+    a.click();
+    URL.revokeObjectURL(a.href);
+}
+function ResultCount({ n }) {
+    return (_jsxs("div", { className: "table-foot", children: [_jsxs("span", { children: [n, " ", n === 1 ? 'result' : 'results'] }), _jsxs("span", { className: "pager", children: [_jsx("button", { className: "btn", disabled: true, children: "Previous" }), _jsx("button", { className: "btn", disabled: true, children: "Next" })] })] }));
+}
+function Section({ title, actions, children, className }) {
+    return (_jsxs("section", { className: `section ${className ?? ''}`, children: [_jsxs("div", { className: "section-head", children: [_jsx("h2", { children: title }), actions] }), children] }));
+}
+function Props({ rows }) {
+    return (_jsx("dl", { className: "props", children: rows.map(([k, v]) => _jsxs("div", { className: "prop", children: [_jsx("dt", { children: k }), _jsx("dd", { children: v ?? '—' })] }, k)) }));
+}
+function Amount({ amount, currency }) {
+    return _jsxs("span", { className: "amount", children: [_jsx("span", { className: "amount-value", children: money(amount, currency) }), " ", _jsx("span", { className: "amount-ccy", children: ccy(currency) })] });
+}
+function Link({ to, go, children, className }) {
+    return _jsx("a", { href: hrefOf(to), className: `link ${className ?? ''}`, onClick: (e) => { e.preventDefault(); e.stopPropagation(); go(to); }, children: children });
+}
+// ── Home ─────────────────────────────────────────────────────────────────────
+export function computeHomeMetrics(data) {
+    const succeeded = data.payments.filter((p) => ['succeeded', 'refunded', 'partially_refunded', 'disputed'].includes(p.status));
+    const currency = succeeded[0]?.currency ?? 'usd';
+    const grossVolume = succeeded.reduce((s, p) => s + p.amount, 0);
+    const refunded = succeeded.reduce((s, p) => s + p.amountRefunded, 0);
+    const available = data.balance ? (data.balance.available ?? []).find((b) => b.currency === currency)?.amount ?? 0 : 0;
+    const pending = data.balance ? (data.balance.pending ?? []).find((b) => b.currency === currency)?.amount ?? 0 : 0;
+    return {
+        currency, grossVolume, netVolume: grossVolume - refunded, available: Number(available) || 0, pending: Number(pending) || 0,
+        succeededPayments: data.payments.filter((p) => p.status === 'succeeded').length,
+        failedPayments: data.payments.filter((p) => p.status === 'failed').length,
+        customers: data.customers.length,
+        activeSubscriptions: data.subscriptions.filter((s) => s.status === 'active' || s.status === 'trialing').length,
+        openInvoices: data.invoices.filter((i) => i.status === 'open').length,
+    };
+}
+function Sparkline({ points, of = points.length }) {
+    const w = 280, h = 64;
+    const max = Math.max(1, ...points);
+    const xy = points.map((p, i) => `${(i / Math.max(1, of - 1)) * w},${h - 4 - (p / max) * (h - 12)}`);
+    return (_jsxs("svg", { className: "spark", viewBox: `0 0 ${w} ${h}`, preserveAspectRatio: "none", "aria-hidden": "true", children: [_jsx("polyline", { points: xy.join(' '), fill: "none", stroke: "#635BFF", strokeWidth: "2", vectorEffect: "non-scaling-stroke" }), _jsx("line", { x1: "0", x2: w, y1: h - 1, y2: h - 1, stroke: "#EBEEF1" })] }));
+}
+function cumulativeByHour(payments) {
+    const out = new Array(24).fill(0);
+    for (const p of payments)
+        if (p.status !== 'failed' && p.status !== 'incomplete')
+            out[new Date(p.created * 1000).getHours()] += p.amount;
+    for (let i = 1; i < 24; i++)
+        out[i] += out[i - 1];
+    // today's line stops at the current hour, as Stripe's does
+    return out.slice(0, new Date().getHours() + 1);
+}
+export function HomeScreen({ go }) {
+    const { data, error } = useApi(loadHome, []);
+    if (!data)
+        return _jsx(Loading, { error: error });
+    const m = computeHomeMetrics(data);
+    const curve = cumulativeByHour(data.payments);
+    const overview = [
+        { key: 'gross', label: 'Gross volume', value: money(m.grossVolume, m.currency) },
+        { key: 'net', label: 'Net volume', value: money(m.netVolume, m.currency) },
+        { key: 'payments', label: 'Successful payments', value: String(m.succeededPayments) },
+        { key: 'failed', label: 'Failed payments', value: String(m.failedPayments) },
+        { key: 'customers', label: 'New customers', value: String(m.customers) },
+        { key: 'subs', label: 'Active subscribers', value: String(m.activeSubscriptions) },
+    ];
+    return (_jsxs("div", { className: "home-screen", children: [_jsx(PageHead, { title: "Today" }), _jsxs("div", { className: "today", children: [_jsxs("div", { className: "today-chart", children: [_jsxs("div", { className: "today-label", children: ["Gross volume ", _jsx(Icon, { name: "chevronDown", size: 12 })] }), _jsx("div", { className: "today-value", children: money(m.grossVolume, m.currency) }), _jsx(Sparkline, { points: curve, of: 24 }), _jsxs("div", { className: "today-axis", children: [_jsx("span", { children: "12:00 AM" }), _jsx("span", { children: "11:59 PM" })] })] }), _jsxs("div", { className: "today-side", children: [_jsxs("div", { className: "today-side-block", children: [_jsxs("div", { className: "today-label", children: [ccy(m.currency), " balance"] }), _jsx("div", { className: "today-side-value", children: money(m.available + m.pending, m.currency) }), _jsx(Link, { to: "balance/overview", go: go, children: "View" })] }), _jsxs("div", { className: "today-side-block", children: [_jsx("div", { className: "today-label", children: "Payouts" }), _jsx("div", { className: "today-side-value", children: money(0, m.currency) }), _jsx(Link, { to: "payouts", go: go, children: "View" })] })] })] }), _jsx("h2", { className: "overview-title", children: "Your overview" }), _jsx("div", { className: "home-metrics", children: overview.map((c) => (_jsxs("div", { className: "metric-card", "data-metric": c.key, children: [_jsx("span", { className: "metric-label", children: c.label }), _jsx("span", { className: "metric-value", children: c.value })] }, c.key))) }), _jsx(Section, { title: "Recent payments", actions: _jsx(Link, { to: "payments", go: go, children: "View all" }), children: _jsx(PaymentsTable, { payments: data.payments.slice(0, 5), go: go, compact: true }) })] }));
+}
+const matchesFilter = (p, f) => f === 'all' || (f === 'refunded' ? p.status === 'refunded' || p.status === 'partially_refunded' : p.status === f);
+export function PaymentsTable({ payments, go, compact, noCustomer }) {
+    const cols = (compact ? 6 : 8) - (noCustomer ? 1 : 0);
+    return (_jsxs("table", { className: "table payments-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Amount" }), _jsx("th", {}), _jsx("th", { children: "Payment method" }), _jsx("th", { children: "Description" }), noCustomer ? null : _jsx("th", { children: "Customer" }), _jsx("th", { children: "Date" }), compact ? null : _jsxs(_Fragment, { children: [_jsx("th", { children: "Refunded date" }), _jsx("th", { children: "Decline reason" })] })] }) }), _jsxs("tbody", { children: [payments.length === 0 && _jsx("tr", { className: "empty-row", children: _jsx("td", { colSpan: cols, children: _jsx(EmptyState, { title: "No payments", body: compact ? undefined : 'Payments you create through the API show up here.' }) }) }), payments.map((p) => (_jsxs("tr", { className: "list-row", onClick: () => go(`payments/${p.id}`), children: [_jsx("td", { className: "nowrap", children: _jsx(Amount, { amount: p.amount, currency: p.currency }) }), _jsx("td", { children: _jsx(StatusPill, { value: p.status }) }), _jsx("td", { className: "nowrap", children: _jsx(CardLabel, { pm: p.paymentMethod }) }), _jsx("td", { className: "truncate", children: p.description ?? _jsx("span", { className: "muted", children: p.id }) }), noCustomer ? null : _jsx("td", { className: "truncate", children: p.customer ? p.customer.email || p.customer.name || p.customer.id : _jsx("span", { className: "muted", children: "\u2014" }) }), _jsx("td", { className: "nowrap muted", children: formatDate(p.created) }), compact ? null : _jsxs(_Fragment, { children: [_jsx("td", { className: "nowrap muted", children: p.refundedAt ? formatDate(p.refundedAt) : '—' }), _jsx("td", { className: "nowrap muted", children: p.declineReason ?? '—' })] })] }, p.id)))] })] }));
+}
+const DAY = 86400;
+const DATE_RANGES = [{ key: 'today', label: 'Today' }, { key: '7d', label: 'Last 7 days' }, { key: '4w', label: 'Last 4 weeks' }, { key: '12m', label: 'Last 12 months' }];
+function inRange(ts, range) {
+    if (!range)
+        return true;
+    const now = Date.now() / 1000;
+    if (range === 'today') {
+        const d = new Date();
+        d.setHours(0, 0, 0, 0);
+        return ts >= d.getTime() / 1000;
+    }
+    return ts >= now - ({ '7d': 7, '4w': 28, '12m': 365 }[range] ?? 0) * DAY;
+}
+function PaymentsPage({ go }) {
+    const { data, error } = useApi(loadPayments, []);
+    const [filter, setFilter] = useState('all');
+    const [chips, setChips] = useState({});
+    const all = data ?? [];
+    const payments = all.filter((p) => inRange(p.created, chips.date) && (!chips.currency || p.currency === chips.currency)
+        && (!chips.status || p.status === chips.status) && (!chips.method || (p.paymentMethod?.card?.brand ?? p.paymentMethod?.type) === chips.method));
+    const count = (f) => payments.filter((p) => matchesFilter(p, f)).length;
+    const shown = payments.filter((p) => matchesFilter(p, filter));
+    const uniq = (xs) => [...new Set(xs.filter((x) => Boolean(x)))];
+    return (_jsxs("div", { className: "page", children: [_jsx(PageHead, { title: "Transactions", children: _jsxs("div", { className: "tabs", children: [_jsx(Link, { to: "payments", go: go, className: "tab active", children: "Payments" }), _jsx(Link, { to: "disputes", go: go, className: "tab", children: "Disputes" })] }) }), _jsx(FilterCards, { value: filter, onChange: setFilter, options: [
+                    { key: 'all', label: 'All', count: payments.length }, { key: 'succeeded', label: 'Succeeded', count: count('succeeded') },
+                    { key: 'refunded', label: 'Refunded', count: count('refunded') }, { key: 'disputed', label: 'Disputed', count: count('disputed') },
+                    { key: 'failed', label: 'Failed', count: count('failed') }, { key: 'uncaptured', label: 'Uncaptured', count: count('uncaptured') },
+                ] }), _jsxs("div", { className: "toolbar", children: [_jsx(FilterChip, { label: "Date and time", value: chips.date, options: DATE_RANGES, onChange: (date) => setChips((c) => ({ ...c, date })) }), _jsx(FilterChip, { label: "Currency", value: chips.currency, options: uniq(all.map((p) => p.currency)).map((c) => ({ key: c, label: ccy(c) })), onChange: (currency) => setChips((c) => ({ ...c, currency })) }), _jsx(FilterChip, { label: "Status", value: chips.status, options: uniq(all.map((p) => p.status)).map((k) => ({ key: k, label: STATUS[k]?.label ?? k })), onChange: (status) => setChips((c) => ({ ...c, status })) }), _jsx(FilterChip, { label: "Payment method", value: chips.method, options: uniq(all.map((p) => p.paymentMethod?.card?.brand ?? p.paymentMethod?.type)).map((b) => ({ key: b, label: b === 'amex' ? 'American Express' : titleCase(b) })), onChange: (method) => setChips((c) => ({ ...c, method })) }), _jsx("div", { className: "toolbar-right", children: _jsxs("button", { className: "btn", onClick: () => exportCsv('payments', ['id', 'Amount', 'Currency', 'Status', 'Description', 'Customer Email', 'Created'], shown.map((p) => [p.id, (p.amount / 100).toFixed(2), p.currency, p.status, p.description ?? '', p.customer?.email ?? '', new Date(p.created * 1000).toISOString()])), children: [_jsx(Icon, { name: "download", size: 14 }), " Export"] }) })] }), data ? _jsxs(_Fragment, { children: [_jsx(PaymentsTable, { payments: shown, go: go }), _jsx(ResultCount, { n: shown.length })] }) : _jsx(Loading, { error: error })] }));
+}
+const EVENT_TEXT = {
+    'payment_intent.created': 'Payment started',
+    'payment_intent.succeeded': 'Payment succeeded',
+    'payment_intent.payment_failed': 'Payment failed',
+    'payment_intent.canceled': 'Payment canceled',
+    'payment_intent.amount_capturable_updated': 'Payment authorized',
+    'payment_intent.requires_action': 'Payment requires authentication',
+    'charge.succeeded': 'Payment succeeded',
+    'charge.failed': 'Payment failed',
+    'charge.captured': 'Payment captured',
+    'charge.dispute.created': 'Payment disputed',
+    'refund.created': 'Refund initiated',
+    'refund.updated': 'Refund updated',
+    'customer.created': 'Customer created',
+    'customer.updated': 'Customer updated',
+    'customer.subscription.created': 'Subscription created',
+    'customer.subscription.updated': 'Subscription updated',
+    'customer.subscription.deleted': 'Subscription canceled',
+    'invoice.created': 'Invoice created',
+    'invoice.finalized': 'Invoice finalized',
+    'invoice.paid': 'Invoice paid',
+    'invoice.payment_failed': 'Invoice payment failed',
+};
+function eventText(e) {
+    const obj = e.data?.object ?? {};
+    if (e.type === 'charge.refunded')
+        return `${money(obj.amount_refunded, obj.currency)} ${ccy(obj.currency)} refunded`;
+    if (e.type === 'refund.created')
+        return `Refund of ${money(obj.amount, obj.currency)} ${ccy(obj.currency)} initiated`;
+    if (e.type === 'payment_intent.payment_failed')
+        return `Payment failed${obj.last_payment_error?.message ? `: ${obj.last_payment_error.message}` : ''}`;
+    return EVENT_TEXT[e.type] ?? e.type;
+}
+const eventTone = (type) => (/failed|dispute/.test(type) ? 'red' : /succeeded|paid|captured/.test(type) ? 'green' : /refund/.test(type) ? 'grey' : 'blue');
+function Timeline({ events }) {
+    if (events.length === 0)
+        return _jsx(EmptyState, { title: "No events" });
+    return (_jsx("ol", { className: "timeline", children: events.map((e) => (_jsxs("li", { className: "timeline-item", children: [_jsx("span", { className: `timeline-dot dot-${eventTone(e.type)}` }), _jsxs("div", { className: "timeline-body", children: [_jsx("div", { className: "timeline-text", children: eventText(e) }), _jsx("div", { className: "timeline-time", children: formatDate(e.created) })] })] }, e.id))) }));
+}
+function PaymentPage({ id, go }) {
+    const { data, error, reload } = useApi(() => loadPayment(id), [id]);
+    const [refunding, setRefunding] = useState(false);
+    if (!data)
+        return _jsx(Loading, { error: error });
+    return (_jsxs(_Fragment, { children: [_jsx(PaymentDetailView, { p: data, go: go, onRefund: () => setRefunding(true) }), refunding ? _jsx(RefundDialog, { payment: data, onClose: () => setRefunding(false), onDone: () => { setRefunding(false); reload(); } }) : null] }));
+}
+/** A payment's page: amount and status, who and how, the timeline of its events, the money, its refunds. */
+export function PaymentDetailView({ p, go, onRefund }) {
+    const refundable = Boolean(p.charge) && (p.status === 'succeeded' || p.status === 'partially_refunded') && p.amount - p.amountRefunded > 0;
+    const card = p.paymentMethod?.card;
+    const net = p.amount - p.amountRefunded;
+    return (_jsxs("div", { className: "page detail-page", children: [_jsx(PageHead, { kicker: _jsxs(_Fragment, { children: [_jsx(Icon, { name: "payments", size: 12 }), " Payment"] }), title: _jsxs(_Fragment, { children: [_jsx(Amount, { amount: p.amount, currency: p.currency }), " ", _jsx(StatusPill, { value: p.status })] }), actions: refundable ? _jsxs("button", { className: "btn", onClick: onRefund, children: [_jsx(Icon, { name: "refund", size: 14 }), " Refund"] }) : null, children: _jsxs("div", { className: "summary", children: [_jsxs("div", { className: "summary-item", children: [_jsx("div", { className: "summary-label", children: "Last update" }), _jsx("div", { children: formatDate(p.events[0]?.created ?? p.created) })] }), _jsxs("div", { className: "summary-item", children: [_jsx("div", { className: "summary-label", children: "Customer" }), _jsx("div", { children: p.customer ? _jsx(Link, { to: `customers/${p.customer.id}`, go: go, children: p.customer.email || customerLabel(p.customer) }) : '—' })] }), _jsxs("div", { className: "summary-item", children: [_jsx("div", { className: "summary-label", children: "Payment method" }), _jsx("div", { children: _jsx(CardLabel, { pm: p.paymentMethod }) })] }), p.declineReason ? _jsxs("div", { className: "summary-item", children: [_jsx("div", { className: "summary-label", children: "Decline reason" }), _jsx("div", { children: p.declineReason })] }) : null] }) }), p.intent?.last_payment_error ? _jsx(PaymentErrorBanner, { error: p.intent.last_payment_error }) : null, _jsxs("div", { className: "detail-columns", children: [_jsxs("div", { className: "detail-main", children: [_jsx(Section, { title: "Timeline", children: _jsx(Timeline, { events: p.events }) }), _jsx(Section, { title: "Payment breakdown", children: _jsxs("dl", { className: "breakdown", children: [_jsxs("div", { children: [_jsx("dt", { children: "Payment amount" }), _jsxs("dd", { children: [money(p.amount, p.currency), " ", ccy(p.currency)] })] }), p.amountRefunded > 0 ? _jsxs("div", { children: [_jsx("dt", { children: "Refunded" }), _jsxs("dd", { children: ["\u2212", money(p.amountRefunded, p.currency), " ", ccy(p.currency)] })] }) : null, _jsxs("div", { className: "total", children: [_jsx("dt", { children: "Net amount" }), _jsxs("dd", { children: [money(p.status === 'failed' || p.status === 'incomplete' ? 0 : net, p.currency), " ", ccy(p.currency)] })] })] }) }), p.refunds.length > 0 ? (_jsx(Section, { title: "Refunds", children: _jsxs("table", { className: "table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Amount" }), _jsx("th", {}), _jsx("th", { children: "Reason" }), _jsx("th", { children: "ID" }), _jsx("th", { className: "right", children: "Date" })] }) }), _jsx("tbody", { children: p.refunds.map((r) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(Amount, { amount: Number(r.amount) || 0, currency: r.currency }) }), _jsx("td", { children: _jsx(StatusPill, { value: r.status }) }), _jsx("td", { children: r.reason ? titleCase(r.reason) : '—' }), _jsx("td", { className: "mono muted", children: r.id }), _jsx("td", { className: "right muted nowrap", children: formatDate(r.created) })] }, r.id))) })] }) })) : null] }), _jsxs("aside", { className: "detail-side", children: [_jsx(Section, { title: "Payment details", children: _jsx(Props, { rows: [
+                                        ['Statement descriptor', p.charge?.calculated_statement_descriptor ?? p.intent?.statement_descriptor ?? '—'],
+                                        ['Description', p.description ?? '—'],
+                                        ...(p.invoice ? [['Invoice', _jsx(Link, { to: `invoices/${p.invoice.id}`, go: go, children: p.invoice.number || p.invoice.id })]] : []),
+                                        ['Payment ID', _jsx("span", { className: "mono", children: p.intent?.id ?? p.id })],
+                                        ...(p.charge ? [['Charge ID', _jsx("span", { className: "mono", children: p.charge.id })]] : []),
+                                    ] }) }), _jsx(Section, { title: "Payment method", children: p.paymentMethod ? (_jsx(Props, { rows: [
+                                        ['ID', _jsx("span", { className: "mono", children: p.paymentMethod.id })],
+                                        ['Number', card ? _jsxs("span", { className: "card-label", children: [_jsx("span", { className: "dots", children: "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022" }), " ", card.last4] }) : '—'],
+                                        ['Expires', card ? `${String(card.exp_month).padStart(2, '0')} / ${card.exp_year}` : '—'],
+                                        ['Type', card ? `${BRANDS[card.brand] ?? titleCase(String(card.brand))} ${card.funding ?? ''} card` : titleCase(String(p.paymentMethod.type))],
+                                        ['Owner', p.paymentMethod.billing_details?.name ?? p.customer?.name ?? '—'],
+                                        ['Owner email', p.paymentMethod.billing_details?.email ?? p.customer?.email ?? '—'],
+                                        ['Origin', card?.country ? COUNTRIES[card.country] ?? card.country : '—'],
+                                        ['CVC check', card?.checks?.cvc_check ? (card.checks.cvc_check === 'pass' ? _jsxs("span", { className: "check-pass", children: [_jsx(Icon, { name: "check", size: 12 }), " Passed"] }) : titleCase(card.checks.cvc_check)) : '—'],
+                                    ] })) : _jsx(EmptyState, { title: "No payment method" }) }), _jsx(Section, { title: "Metadata", children: Object.keys(p.intent?.metadata ?? p.charge?.metadata ?? {}).length ? (_jsx(Props, { rows: Object.entries(p.intent?.metadata ?? p.charge?.metadata ?? {}).map(([k, v]) => [k, String(v)]) })) : _jsx("div", { className: "muted small", children: "No metadata" }) })] })] })] }));
+}
+const BRANDS = { visa: 'Visa', mastercard: 'Mastercard', amex: 'American Express', discover: 'Discover', diners: 'Diners Club', jcb: 'JCB', unionpay: 'UnionPay' };
+const COUNTRIES = { US: 'United States', GB: 'United Kingdom', CA: 'Canada', DE: 'Germany', FR: 'France', AU: 'Australia', JP: 'Japan', IE: 'Ireland', NL: 'Netherlands', SG: 'Singapore' };
+// ── dialogs ──────────────────────────────────────────────────────────────────
+function Dialog({ title, onClose, children, footer, label }) {
+    return (_jsx("div", { className: "overlay", onMouseDown: onClose, children: _jsxs("div", { className: "dialog create-modal", role: "dialog", "aria-modal": "true", "aria-label": label ?? title, onMouseDown: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "dialog-head", children: [_jsx("h2", { children: title }), _jsx("button", { className: "icon-btn", "aria-label": "Close", onClick: onClose, children: _jsx(Icon, { name: "x" }) })] }), _jsx("div", { className: "dialog-body", children: children }), _jsx("div", { className: "dialog-foot", children: footer })] }) }));
+}
+function RefundDialog({ payment, onClose, onDone }) {
+    const remaining = payment.amount - payment.amountRefunded;
+    const [amount, setAmount] = useState((remaining / 100).toFixed(2));
+    const [reason, setReason] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [err, setErr] = useState(null);
+    const cents = Math.round(Number(amount) * 100);
+    const submit = async () => {
+        if (!Number.isFinite(cents) || cents <= 0) {
+            setErr('Enter an amount greater than 0.');
+            return;
+        }
+        if (cents > remaining) {
+            setErr(`Refund cannot be more than ${money(remaining, payment.currency)}.`);
+            return;
+        }
+        setBusy(true);
+        setErr(null);
+        try {
+            await createRefund(payment, cents === remaining && payment.amountRefunded === 0 ? undefined : cents, reason && reason !== 'other' ? reason : undefined);
+            onDone();
+        }
+        catch (e) {
+            setErr(String(e.message ?? e));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsxs(Dialog, { title: "Refund payment", onClose: onClose, footer: _jsxs(_Fragment, { children: [_jsx("button", { className: "btn", onClick: onClose, children: "Cancel" }), _jsx("button", { className: "btn btn-primary create-submit", disabled: busy, onClick: submit, children: busy ? 'Refunding…' : 'Refund' })] }), children: [_jsx("p", { className: "dialog-note", children: "Refunds take 5\u201310 days to appear on a customer\u2019s statement. Stripe\u2019s fees for the original payment won\u2019t be returned, but there are no additional fees for the refund." }), _jsxs("label", { className: "field create-field", children: [_jsx("span", { className: "field-label", children: "Refund" }), _jsxs("span", { className: "money-input", children: [_jsx("span", { className: "money-prefix", children: "$" }), _jsx("input", { "aria-label": "Refund amount", inputMode: "decimal", value: amount, onChange: (e) => setAmount(e.target.value) }), _jsx("span", { className: "money-suffix", children: ccy(payment.currency) })] }), payment.amountRefunded > 0 ? _jsxs("span", { className: "field-hint", children: [money(payment.amountRefunded, payment.currency), " already refunded"] }) : null] }), _jsxs("label", { className: "field create-field", children: [_jsx("span", { className: "field-label", children: "Reason" }), _jsxs("select", { "aria-label": "Reason", value: reason, onChange: (e) => setReason(e.target.value), children: [_jsx("option", { value: "", children: "Select a reason" }), _jsx("option", { value: "duplicate", children: "Duplicate" }), _jsx("option", { value: "fraudulent", children: "Fraudulent" }), _jsx("option", { value: "requested_by_customer", children: "Requested by customer" }), _jsx("option", { value: "other", children: "Other" })] })] }), err ? _jsx("div", { className: "form-error", role: "alert", children: err }) : null] }));
+}
+function CancelSubscriptionDialog({ subscription, onClose, onDone }) {
+    const [when, setWhen] = useState('now');
+    const [busy, setBusy] = useState(false);
+    const [err, setErr] = useState(null);
+    const submit = async () => {
+        setBusy(true);
+        setErr(null);
+        try {
+            await cancelSubscription(String(subscription.id), when);
+            onDone();
+        }
+        catch (e) {
+            setErr(String(e.message ?? e));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsxs(Dialog, { title: "Cancel subscription", onClose: onClose, footer: _jsxs(_Fragment, { children: [_jsx("button", { className: "btn", onClick: onClose, children: "Don\u2019t cancel" }), _jsx("button", { className: "btn btn-danger create-submit", disabled: busy, onClick: submit, children: busy ? 'Canceling…' : 'Cancel subscription' })] }), children: [_jsxs("fieldset", { className: "radio-group", children: [_jsx("legend", { className: "field-label", children: "Cancel" }), _jsxs("label", { className: "radio", children: [_jsx("input", { type: "radio", name: "when", checked: when === 'now', onChange: () => setWhen('now') }), _jsxs("span", { children: ["Immediately", _jsx("span", { className: "radio-hint", children: "The subscription ends now and no further invoices are created." })] })] }), _jsxs("label", { className: "radio", children: [_jsx("input", { type: "radio", name: "when", checked: when === 'period_end', onChange: () => setWhen('period_end') }), _jsxs("span", { children: ["End of the current period", _jsx("span", { className: "radio-hint", children: formatDate(subscription.current_period_end, false) })] })] })] }), err ? _jsx("div", { className: "form-error", role: "alert", children: err }) : null] }));
+}
+/** The create forms the Dashboard opens from a list page: each posts the resource's create call. */
+export const CREATE_FORMS = {
+    customers: {
+        title: 'Create customer', submit: 'Add customer',
+        fields: [{ name: 'name', label: 'Name' }, { name: 'email', label: 'Email', type: 'email' }, { name: 'description', label: 'Description' }, { name: 'phone', label: 'Phone' }],
+    },
+    products: {
+        title: 'Add a product', submit: 'Add product',
+        fields: [{ name: 'name', label: 'Name', required: true }, { name: 'description', label: 'Description' }],
+    },
+};
+function CreateDialog({ collection, onClose, onCreated }) {
+    const form = CREATE_FORMS[collection];
+    const [values, setValues] = useState({});
+    const [busy, setBusy] = useState(false);
+    const [err, setErr] = useState(null);
+    const submit = async () => {
+        setBusy(true);
+        setErr(null);
+        try {
+            onCreated(await createObject(collection, values));
+        }
+        catch (e) {
+            setErr(String(e.message ?? e));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsxs(Dialog, { title: form.title, onClose: onClose, footer: _jsxs(_Fragment, { children: [_jsx("button", { className: "btn", onClick: onClose, children: "Cancel" }), _jsx("button", { className: "btn btn-primary create-submit", disabled: busy, onClick: submit, children: busy ? 'Saving…' : form.submit })] }), children: [collection === 'customers' ? _jsx("div", { className: "dialog-subhead", children: "Account information" }) : null, form.fields.map((f) => (_jsxs("label", { className: "field create-field", children: [_jsxs("span", { className: "field-label", children: [f.label, f.required ? '' : _jsx("span", { className: "optional", children: " (optional)" })] }), _jsx("input", { "aria-label": f.label, type: f.type ?? 'text', placeholder: f.placeholder ?? '', value: values[f.name] ?? '', onChange: (e) => setValues((v) => ({ ...v, [f.name]: e.target.value })) })] }, f.name))), err ? _jsx("div", { className: "form-error", role: "alert", children: err }) : null] }));
+}
+const SEGMENTS = [
+    { key: 'all', label: 'All customers', test: () => true },
+    { key: 'first_time', label: 'First-time customers', test: (c) => c.payments === 1 },
+    { key: 'repeat', label: 'Repeat customers', test: (c) => c.payments > 1 },
+    { key: 'recent', label: 'Recent customers', test: (c) => Number(c.created) >= Date.now() / 1000 - 30 * DAY },
+    { key: 'refunds', label: 'High refunds', test: (c) => c.refunds > 0 },
+];
+function CustomersPage({ go, create }) {
+    const { data, error, reload } = useApi(loadCustomers, []);
+    const [creating, setCreating] = useState(create);
+    const [segment, setSegment] = useState('all');
+    const [created, setCreated] = useState();
+    useEffect(() => { if (create)
+        setCreating(true); }, [create]);
+    const all = (data ?? []).filter((c) => inRange(Number(c.created), created));
+    const rows = all.filter(SEGMENTS.find((s) => s.key === segment).test);
+    return (_jsxs("div", { className: "page", children: [_jsx(PageHead, { title: "Customers", actions: _jsxs("button", { className: "btn btn-primary", onClick: () => setCreating(true), children: [_jsx(Icon, { name: "plus", size: 14 }), " Create customer"] }) }), _jsx(FilterCards, { value: segment, onChange: setSegment, options: SEGMENTS.map((s) => ({ key: s.key, label: s.label, count: all.filter(s.test).length })) }), _jsxs("div", { className: "toolbar", children: [_jsx(FilterChip, { label: "Created", value: created, options: DATE_RANGES, onChange: setCreated }), _jsx("div", { className: "toolbar-right", children: _jsxs("button", { className: "btn", onClick: () => exportCsv('customers', ['id', 'Name', 'Email', 'Created', 'Total Spend', 'Payment Count', 'Refunded Volume'], rows.map((c) => [c.id, c.name ?? '', c.email ?? '', new Date(Number(c.created) * 1000).toISOString(), (c.totalSpend / 100).toFixed(2), c.payments, (c.refunds / 100).toFixed(2)])), children: [_jsx(Icon, { name: "download", size: 14 }), " Export"] }) })] }), data ? (_jsxs(_Fragment, { children: [_jsxs("table", { className: "table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Name" }), _jsx("th", { children: "Email" }), _jsx("th", { children: "Default payment method" }), _jsx("th", { children: "Created" }), _jsx("th", { className: "right", children: "Total spend" }), _jsx("th", { className: "right", children: "Payments" }), _jsx("th", { className: "right", children: "Refunds" })] }) }), _jsxs("tbody", { children: [rows.length === 0 && _jsx("tr", { className: "empty-row", children: _jsx("td", { colSpan: 7, children: _jsx(EmptyState, { title: "No customers", body: "Customers you create show up here." }) }) }), rows.map((c) => (_jsxs("tr", { className: "list-row", onClick: () => go(`customers/${c.id}`), children: [_jsx("td", { className: "strong", children: c.name || _jsx("span", { className: "muted", children: "\u2014" }) }), _jsx("td", { children: c.email || _jsx("span", { className: "muted", children: "\u2014" }) }), _jsx("td", { children: _jsx(CardLabel, { pm: c.defaultCard }) }), _jsx("td", { className: "muted nowrap", children: formatDate(c.created) }), _jsx("td", { className: "right nowrap", children: money(c.totalSpend, c.currency) }), _jsx("td", { className: "right", children: c.payments }), _jsx("td", { className: "right nowrap", children: money(c.refunds, c.currency) })] }, c.id)))] })] }), _jsx(ResultCount, { n: rows.length })] })) : _jsx(Loading, { error: error }), creating ? _jsx(CreateDialog, { collection: "customers", onClose: () => { setCreating(false); if (create)
+                    go('customers'); }, onCreated: (c) => { setCreating(false); reload(); go(`customers/${c.id}`); } }) : null] }));
+}
+function subscriptionProduct(sub, products) {
+    const items = sub.items?.data ?? [];
+    const names = items.map((it) => {
+        const productId = typeof it.price?.product === 'string' ? it.price.product : it.price?.product?.id;
+        const name = products.get(productId)?.name ?? it.price?.nickname ?? productId ?? 'Product';
+        return Number(it.quantity) > 1 ? `${name} × ${it.quantity}` : name;
+    });
+    return names.length > 1 ? `${names[0]} and ${names.length - 1} more` : names[0] ?? '—';
+}
+function subscriptionAmount(sub) {
+    const items = sub.items?.data ?? [];
+    const amount = items.reduce((n, it) => n + (Number(it.price?.unit_amount) || 0) * (Number(it.quantity) || 1), 0);
+    const interval = items[0]?.price?.recurring?.interval ?? 'month';
+    return { amount, currency: String(items[0]?.price?.currency ?? sub.currency ?? 'usd'), interval };
+}
+export function InvoicesTable({ invoices, customers, go, noCustomer }) {
+    return (_jsxs("table", { className: "table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Amount" }), _jsx("th", {}), _jsx("th", { children: "Invoice number" }), noCustomer ? null : _jsx("th", { children: "Customer" }), _jsx("th", { children: "Due" }), _jsx("th", { className: "right", children: "Created" })] }) }), _jsxs("tbody", { children: [invoices.length === 0 && _jsx("tr", { className: "empty-row", children: _jsx("td", { colSpan: 6, children: _jsx(EmptyState, { title: "No invoices" }) }) }), invoices.map((inv) => {
+                        const c = customers?.get(inv.customer);
+                        return (_jsxs("tr", { className: "list-row", onClick: () => go(`invoices/${inv.id}`), children: [_jsx("td", { className: "nowrap", children: _jsx(Amount, { amount: Number(inv.total ?? inv.amount_due) || 0, currency: inv.currency }) }), _jsx("td", { children: _jsx(StatusPill, { value: inv.status }) }), _jsx("td", { className: "mono", children: inv.number || inv.id }), noCustomer ? null : _jsx("td", { className: "truncate", children: inv.customer_email || c?.email || c?.name || inv.customer }), _jsx("td", { className: "muted nowrap", children: inv.due_date ? formatDate(inv.due_date, false) : '—' }), _jsx("td", { className: "right muted nowrap", children: formatDate(inv.created) })] }, inv.id));
+                    })] })] }));
+}
+function CustomerPage({ id, go }) {
+    const { data, error } = useApi(() => loadCustomer(id), [id]);
+    return data ? _jsx(CustomerDetailView, { data: data, go: go }) : _jsx(Loading, { error: error });
+}
+/** A customer's page: who they are, their subscriptions, payments, saved cards, invoices and events. */
+export function CustomerDetailView({ data, go }) {
+    const c = data.customer;
+    const defaultPm = c.invoice_settings?.default_payment_method;
+    const spend = data.payments.filter((p) => p.status !== 'failed' && p.status !== 'incomplete').reduce((n, p) => n + p.amount - p.amountRefunded, 0);
+    return (_jsxs("div", { className: "page detail-page", children: [_jsxs(PageHead, { kicker: _jsxs(_Fragment, { children: [_jsx(Icon, { name: "person", size: 12 }), " Customer"] }), title: c.name || c.email || c.id, children: [_jsx("div", { className: "subtitle", children: c.email ?? '' }), _jsxs("div", { className: "summary", children: [_jsxs("div", { className: "summary-item", children: [_jsx("div", { className: "summary-label", children: "Customer since" }), _jsx("div", { children: formatDate(c.created, false) })] }), _jsxs("div", { className: "summary-item", children: [_jsx("div", { className: "summary-label", children: "Total spend" }), _jsx("div", { children: money(spend, data.payments[0]?.currency ?? 'usd') })] }), _jsxs("div", { className: "summary-item", children: [_jsx("div", { className: "summary-label", children: "Payments" }), _jsx("div", { children: data.payments.filter((p) => p.status !== 'failed' && p.status !== 'incomplete').length })] })] })] }), _jsxs("div", { className: "detail-columns", children: [_jsxs("div", { className: "detail-main", children: [_jsx(Section, { title: "Subscriptions", children: data.subscriptions.length === 0 ? _jsx("div", { className: "muted small", children: "No subscriptions" }) : (_jsx("div", { className: "sub-list", children: data.subscriptions.map((s) => {
+                                        const a = subscriptionAmount(s);
+                                        return (_jsxs("a", { href: hrefOf(`subscriptions/${s.id}`), className: "sub-card list-row", onClick: (e) => { e.preventDefault(); go(`subscriptions/${s.id}`); }, children: [_jsxs("div", { className: "sub-card-main", children: [_jsx("span", { className: "strong", children: subscriptionProduct(s, data.products) }), " ", _jsx(StatusPill, { value: s.status })] }), _jsxs("div", { className: "muted small", children: [money(a.amount, a.currency), " / ", a.interval, " \u00B7 ", s.status === 'canceled' ? `Canceled ${formatDate(s.canceled_at ?? s.ended_at, false)}` : s.status === 'trialing' ? `Trial ends ${formatDate(s.trial_end, false)}` : s.cancel_at_period_end ? `Cancels ${formatDate(s.current_period_end, false)}` : `Next invoice on ${formatDate(s.current_period_end, false)}`] })] }, s.id));
+                                    }) })) }), _jsx(Section, { title: "Payments", className: "customer-payments", children: _jsx(PaymentsTable, { payments: data.payments, go: go, compact: true, noCustomer: true }) }), _jsx(Section, { title: "Payment methods", children: data.paymentMethods.length === 0 ? _jsx("div", { className: "muted small", children: "No payment methods" }) : (_jsx("table", { className: "table", children: _jsx("tbody", { children: data.paymentMethods.map((pm) => (_jsxs("tr", { children: [_jsxs("td", { children: [_jsx(CardLabel, { pm: pm }), " ", pm.id === defaultPm ? _jsx("span", { className: "pill pill-grey", children: "Default" }) : null] }), _jsx("td", { className: "muted", children: pm.card ? `Expires ${String(pm.card.exp_month).padStart(2, '0')} / ${pm.card.exp_year}` : '' }), _jsx("td", { className: "mono muted right", children: pm.id })] }, pm.id))) }) })) }), _jsx(Section, { title: "Invoices", children: _jsx(InvoicesTable, { invoices: data.invoices, go: go, noCustomer: true }) }), _jsx(Section, { title: "Events", children: _jsx(Timeline, { events: data.events.slice(0, 10) }) })] }), _jsxs("aside", { className: "detail-side", children: [_jsx(Section, { title: "Details", children: _jsx(Props, { rows: [
+                                        ['Customer ID', _jsx("span", { className: "mono", children: c.id })],
+                                        ['Customer since', formatDate(c.created, false)],
+                                        ['Email', c.email ?? '—'],
+                                        ['Description', c.description || '—'],
+                                        ['Phone', c.phone || '—'],
+                                        ['Billing details', c.address?.line1 ? `${c.address.line1}, ${c.address.city ?? ''}` : 'No billing address'],
+                                        ['Currency', c.currency ? ccy(c.currency) : '—'],
+                                    ] }) }), _jsx(Section, { title: "Metadata", children: Object.keys(c.metadata ?? {}).length ? _jsx(Props, { rows: Object.entries(c.metadata).map(([k, v]) => [k, String(v)]) }) : _jsx("div", { className: "muted small", children: "No metadata" }) })] })] })] }));
+}
+function SubscriptionsPage({ go }) {
+    const { data, error } = useApi(loadSubscriptions, []);
+    const [filter, setFilter] = useState('all');
+    const subs = data?.subscriptions ?? [];
+    const shown = subs.filter((s) => filter === 'all' || s.status === filter);
+    return (_jsxs("div", { className: "page", children: [_jsx(PageHead, { title: "Subscriptions" }), _jsx(FilterCards, { value: filter, onChange: setFilter, options: ['all', 'active', 'trialing', 'past_due', 'canceled'].map((k) => ({ key: k, label: k === 'all' ? 'All' : STATUS[k].label, count: k === 'all' ? subs.length : subs.filter((s) => s.status === k).length })) }), data ? (_jsxs(_Fragment, { children: [_jsxs("table", { className: "table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Customer" }), _jsx("th", { children: "Status" }), _jsx("th", { children: "Billing" }), _jsx("th", { children: "Product" }), _jsx("th", { className: "right", children: "Amount" }), _jsx("th", { className: "right", children: "Created" })] }) }), _jsxs("tbody", { children: [shown.length === 0 && _jsx("tr", { className: "empty-row", children: _jsx("td", { colSpan: 6, children: _jsx(EmptyState, { title: "No subscriptions" }) }) }), shown.map((s) => {
+                                        const c = data.customers.get(s.customer);
+                                        const a = subscriptionAmount(s);
+                                        return (_jsxs("tr", { className: "list-row", onClick: () => go(`subscriptions/${s.id}`), children: [_jsxs("td", { children: [_jsx("div", { className: "strong", children: c?.name || c?.email || s.customer }), c?.name && c?.email ? _jsx("div", { className: "muted small", children: c.email }) : null] }), _jsxs("td", { children: [_jsx(StatusPill, { value: s.status }), s.cancel_at_period_end && s.status !== 'canceled' ? _jsxs("span", { className: "muted small", children: [" Cancels ", formatDate(s.current_period_end, false)] }) : null] }), _jsx("td", { children: s.collection_method === 'send_invoice' ? 'Send invoice' : 'Auto' }), _jsx("td", { children: subscriptionProduct(s, data.products) }), _jsxs("td", { className: "right nowrap", children: [money(a.amount, a.currency), " / ", a.interval] }), _jsx("td", { className: "right muted nowrap", children: formatDate(s.created) })] }, s.id));
+                                    })] })] }), _jsx(ResultCount, { n: shown.length })] })) : _jsx(Loading, { error: error })] }));
+}
+function SubscriptionPage({ id, go }) {
+    const { data, error, reload } = useApi(() => loadSubscription(id), [id]);
+    const [canceling, setCanceling] = useState(false);
+    if (!data)
+        return _jsx(Loading, { error: error });
+    return (_jsxs(_Fragment, { children: [_jsx(SubscriptionDetailView, { data: data, go: go, onCancel: () => setCanceling(true) }), canceling ? _jsx(CancelSubscriptionDialog, { subscription: data.subscription, onClose: () => setCanceling(false), onDone: () => { setCanceling(false); reload(); } }) : null] }));
+}
+/** A subscription's page: whose, on what, its period and next invoice, its prices, invoices and events. */
+export function SubscriptionDetailView({ data, go, onCancel }) {
+    const s = data.subscription;
+    const c = data.customer;
+    const a = subscriptionAmount(s);
+    const product = subscriptionProduct(s, data.products);
+    const live = s.status !== 'canceled' && s.status !== 'incomplete_expired';
+    const next = s.status === 'canceled' ? `Canceled on ${formatDate(s.canceled_at ?? s.ended_at, false)}`
+        : s.cancel_at_period_end ? `Cancels on ${formatDate(s.current_period_end, false)}`
+            : s.status === 'trialing' ? `Trial ends ${formatDate(s.trial_end, false)} · First invoice for ${money(a.amount, a.currency)}`
+                : `Next invoice on ${formatDate(s.current_period_end, false)} for ${money(a.amount, a.currency)}`;
+    return (_jsxs("div", { className: "page detail-page", children: [_jsxs(PageHead, { kicker: _jsxs(_Fragment, { children: [_jsx(Icon, { name: "billing", size: 12 }), " Subscription"] }), title: _jsxs(_Fragment, { children: [customerLabel(c), " on ", product, " ", _jsx(StatusPill, { value: s.status })] }), actions: live && !s.cancel_at_period_end ? _jsx("button", { className: "btn", onClick: onCancel, children: "Cancel subscription" }) : null, children: [_jsxs("div", { className: "subtitle", children: ["Billing ", a.interval, "ly \u00B7 ", next] }), _jsxs("div", { className: "summary", children: [_jsxs("div", { className: "summary-item", children: [_jsx("div", { className: "summary-label", children: "Started" }), _jsx("div", { children: formatDate(s.start_date ?? s.created, false) })] }), _jsxs("div", { className: "summary-item", children: [_jsx("div", { className: "summary-label", children: s.status === 'canceled' ? 'Ended' : s.cancel_at_period_end ? 'Cancels' : 'Next invoice' }), _jsx("div", { children: s.status === 'canceled' ? formatDate(s.ended_at ?? s.canceled_at, false) : s.cancel_at_period_end ? formatDate(s.current_period_end, false) : `${money(a.amount, a.currency)} on ${formatDate(s.current_period_end, false)}` })] }), _jsxs("div", { className: "summary-item", children: [_jsx("div", { className: "summary-label", children: "Customer" }), _jsx("div", { children: c ? _jsx(Link, { to: `customers/${c.id}`, go: go, children: c.email || c.name }) : s.customer })] })] })] }), _jsx(Section, { title: "Subscription details", children: _jsx(Props, { rows: [
+                        ['Customer', c ? _jsx(Link, { to: `customers/${c.id}`, go: go, children: customerLabel(c) }) : s.customer],
+                        ['Created', formatDate(s.created)],
+                        ['Current period', `${formatDate(s.current_period_start, false).replace(/, \d{4}$/, '')} to ${formatDate(s.current_period_end, false)}`],
+                        ...(s.trial_end ? [['Trial', `${formatDate(s.trial_start, false)} to ${formatDate(s.trial_end, false)}`]] : []),
+                        ['ID', _jsx("span", { className: "mono", children: s.id })],
+                        ['Billing method', s.collection_method === 'send_invoice' ? 'Email invoice to the customer' : 'Charge default payment method'],
+                        ['Payment method', _jsx(CardLabel, { pm: data.paymentMethod })],
+                        ['Discounts', (s.discounts ?? []).length ? `${s.discounts.length}` : '—'],
+                    ] }) }), _jsx(Section, { title: "Pricing", children: _jsxs("table", { className: "table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Product" }), _jsx("th", { className: "right", children: "Quantity" }), _jsx("th", { className: "right", children: "Unit price" }), _jsx("th", { className: "right", children: "Total" })] }) }), _jsx("tbody", { children: (s.items?.data ?? []).map((it) => {
+                                const productId = typeof it.price?.product === 'string' ? it.price.product : it.price?.product?.id;
+                                const unit = Number(it.price?.unit_amount) || 0;
+                                const q = Number(it.quantity) || 1;
+                                return (_jsxs("tr", { children: [_jsxs("td", { children: [_jsx("div", { className: "strong", children: data.products.get(productId)?.name ?? productId }), _jsxs("div", { className: "muted small", children: [money(unit, it.price?.currency), " / ", it.price?.recurring?.interval ?? 'month'] })] }), _jsx("td", { className: "right", children: q }), _jsx("td", { className: "right", children: money(unit, it.price?.currency) }), _jsxs("td", { className: "right", children: [money(unit * q, it.price?.currency), " ", ccy(it.price?.currency)] })] }, it.id));
+                            }) })] }) }), _jsx(Section, { title: "Invoices", children: _jsx(InvoicesTable, { invoices: data.invoices, go: go, noCustomer: true }) }), _jsx(Section, { title: "Events", children: _jsx(Timeline, { events: data.events }) })] }));
+}
+function InvoicesPage({ go }) {
+    const { data, error } = useApi(loadInvoices, []);
+    const [filter, setFilter] = useState('all');
+    const invoices = data?.invoices ?? [];
+    const shown = invoices.filter((i) => filter === 'all' || i.status === filter);
+    return (_jsxs("div", { className: "page", children: [_jsx(PageHead, { title: "Invoices" }), _jsx(FilterCards, { value: filter, onChange: setFilter, options: ['all', 'draft', 'open', 'paid', 'void', 'uncollectible'].map((k) => ({ key: k, label: k === 'all' ? 'All invoices' : STATUS[k].label, count: k === 'all' ? invoices.length : invoices.filter((i) => i.status === k).length })) }), data ? _jsxs(_Fragment, { children: [_jsx(InvoicesTable, { invoices: shown, customers: data.customers, go: go }), _jsx(ResultCount, { n: shown.length })] }) : _jsx(Loading, { error: error })] }));
+}
+function InvoicePage({ id, go }) {
+    const { data, error } = useApi(async () => {
+        const invoice = await retrieve(`/v1/invoices/${id}`);
+        const customer = typeof invoice.customer === 'string' ? await retrieve(`/v1/customers/${invoice.customer}`).catch(() => undefined) : undefined;
+        return { invoice, customer };
+    }, [id]);
+    if (!data)
+        return _jsx(Loading, { error: error });
+    const inv = data.invoice;
+    const lines = inv.lines?.data ?? [];
+    return (_jsxs("div", { className: "page detail-page", children: [_jsx(PageHead, { kicker: _jsxs(_Fragment, { children: [_jsx(Icon, { name: "billing", size: 12 }), " Invoice"] }), title: _jsxs(_Fragment, { children: [_jsx(Amount, { amount: Number(inv.total ?? inv.amount_due) || 0, currency: inv.currency }), " ", _jsx(StatusPill, { value: inv.status })] }), children: _jsxs("div", { className: "summary", children: [_jsxs("div", { className: "summary-item", children: [_jsx("div", { className: "summary-label", children: "Invoice number" }), _jsx("div", { className: "mono", children: inv.number || inv.id })] }), _jsxs("div", { className: "summary-item", children: [_jsx("div", { className: "summary-label", children: "Customer" }), _jsx("div", { children: data.customer ? _jsx(Link, { to: `customers/${data.customer.id}`, go: go, children: data.customer.email || data.customer.name }) : inv.customer })] }), _jsxs("div", { className: "summary-item", children: [_jsx("div", { className: "summary-label", children: inv.status === 'paid' ? 'Paid' : 'Due' }), _jsx("div", { children: inv.status === 'paid' ? formatDate(inv.status_transitions?.paid_at) : inv.due_date ? formatDate(inv.due_date, false) : '—' })] })] }) }), _jsx(Section, { title: "Summary", children: _jsxs("table", { className: "table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Description" }), _jsx("th", { className: "right", children: "Qty" }), _jsx("th", { className: "right", children: "Amount" })] }) }), _jsxs("tbody", { children: [lines.map((l) => _jsxs("tr", { children: [_jsx("td", { children: l.description || (l.price?.product ? `Subscription (${formatDate(l.period?.start, false)} – ${formatDate(l.period?.end, false)})` : '—') }), _jsx("td", { className: "right", children: l.quantity ?? 1 }), _jsx("td", { className: "right", children: money(l.amount, l.currency) })] }, l.id)), _jsxs("tr", { className: "table-total", children: [_jsx("td", { children: "Total" }), _jsx("td", {}), _jsx("td", { className: "right strong", children: money(inv.total, inv.currency) })] }), _jsxs("tr", { className: "table-total", children: [_jsx("td", { children: "Amount due" }), _jsx("td", {}), _jsx("td", { className: "right strong", children: money(inv.amount_remaining ?? inv.amount_due, inv.currency) })] })] })] }) }), _jsx(Section, { title: "Details", children: _jsx(Props, { rows: [
+                        ['ID', _jsx("span", { className: "mono", children: inv.id })],
+                        ['Billing', inv.collection_method === 'send_invoice' ? 'Send invoice' : 'Charge automatically'],
+                        ...(inv.subscription ? [['Subscription', _jsx(Link, { to: `subscriptions/${inv.subscription}`, go: go, children: inv.subscription })]] : []),
+                        ...(inv.payment_intent ? [['Payment', _jsx(Link, { to: `payments/${inv.payment_intent}`, go: go, children: inv.payment_intent })]] : []),
+                        ['Created', formatDate(inv.created)],
+                    ] }) })] }));
+}
+// ── Product catalog ──────────────────────────────────────────────────────────
+function ProductsPage({ go }) {
+    const { data, error, reload } = useApi(loadProducts, []);
+    const [creating, setCreating] = useState(false);
+    return (_jsxs("div", { className: "page", children: [_jsx(PageHead, { title: "Product catalog", actions: _jsxs("button", { className: "btn btn-primary", onClick: () => setCreating(true), children: [_jsx(Icon, { name: "plus", size: 14 }), " Create product"] }), children: _jsxs("div", { className: "tabs", children: [_jsx(Link, { to: "products", go: go, className: "tab active", children: "Products" }), _jsx(Link, { to: "coupons", go: go, className: "tab", children: "Coupons" })] }) }), data ? (_jsxs(_Fragment, { children: [_jsxs("table", { className: "table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Name" }), _jsx("th", { children: "Pricing" }), _jsx("th", { children: "Created" }), _jsx("th", { className: "right", children: "Updated" })] }) }), _jsxs("tbody", { children: [data.products.length === 0 && _jsx("tr", { className: "empty-row", children: _jsx("td", { colSpan: 4, children: _jsx(EmptyState, { title: "No products" }) }) }), data.products.map((p) => {
+                                        const prices = data.prices.filter((x) => x.product === p.id);
+                                        const first = prices[prices.length - 1];
+                                        return (_jsxs("tr", { children: [_jsx("td", { children: _jsxs("div", { className: "product-cell", children: [_jsx("span", { className: "product-thumb", children: p.images?.[0] ? _jsx("img", { src: p.images[0], alt: "" }) : _jsx(Icon, { name: "catalog" }) }), _jsxs("div", { children: [_jsx("div", { className: "strong", children: p.name }), p.description ? _jsx("div", { className: "muted small", children: p.description }) : null] })] }) }), _jsx("td", { children: first ? _jsxs(_Fragment, { children: [_jsxs("span", { children: [money(first.unit_amount, first.currency), " ", ccy(first.currency), first.recurring ? ` / ${first.recurring.interval}` : ''] }), prices.length > 1 ? _jsxs("div", { className: "muted small", children: [prices.length, " prices"] }) : null] }) : _jsx("span", { className: "muted", children: "No prices" }) }), _jsx("td", { className: "muted nowrap", children: formatDate(p.created, false) }), _jsx("td", { className: "right muted nowrap", children: formatDate(p.updated ?? p.created, false) })] }, p.id));
+                                    })] })] }), _jsx(ResultCount, { n: data.products.length })] })) : _jsx(Loading, { error: error }), creating ? _jsx(CreateDialog, { collection: "products", onClose: () => setCreating(false), onCreated: () => { setCreating(false); reload(); } }) : null] }));
+}
+// ── Balances ─────────────────────────────────────────────────────────────────
+function BalancesPage({ go }) {
+    const { data, error } = useApi(loadBalances, []);
+    if (!data)
+        return _jsx(Loading, { error: error });
+    const buckets = (k) => (data.balance[k] ?? []);
+    const currencies = [...new Set([...buckets('available'), ...buckets('pending')].map((b) => b.currency))];
+    return (_jsxs("div", { className: "page", children: [_jsx(PageHead, { title: "Balances" }), _jsxs(Section, { title: "Balance summary", children: [_jsx(BalanceSummary, { row: data.balance }), _jsxs("table", { className: "table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Payments" }), _jsx("th", { className: "right", children: "Amount" })] }) }), _jsx("tbody", { children: currencies.map((c) => {
+                                    const pending = buckets('pending').find((b) => b.currency === c)?.amount ?? 0;
+                                    const available = buckets('available').find((b) => b.currency === c)?.amount ?? 0;
+                                    return (_jsxs(React.Fragment, { children: [_jsxs("tr", { children: [_jsx("td", { children: "Incoming" }), _jsxs("td", { className: "right", children: [money(pending, c), " ", ccy(c)] })] }), _jsxs("tr", { children: [_jsx("td", { children: "Available to pay out" }), _jsxs("td", { className: "right", children: [money(available, c), " ", ccy(c)] })] }), _jsxs("tr", { className: "table-total", children: [_jsx("td", { children: "Total" }), _jsxs("td", { className: "right strong", children: [money(pending + available, c), " ", ccy(c)] })] })] }, c));
+                                }) })] })] }), _jsx(Section, { title: "Recent activity", actions: _jsx(Link, { to: "balance-transactions", go: go, children: "View all" }), children: _jsx(ListPane, { section: SECTIONS.find((s) => s.key === 'balance_transactions'), rows: data.transactions.slice(0, 10), onSelect: () => { } }) }), _jsx(Section, { title: "Payouts", actions: _jsx(Link, { to: "payouts", go: go, children: "View all" }), children: _jsx(ListPane, { section: SECTIONS.find((s) => s.key === 'payouts'), rows: data.payouts.slice(0, 10), onSelect: () => { } }) })] }));
+}
+// ── Developers and Settings ──────────────────────────────────────────────────
+export function payoutScheduleText(account) {
+    const sched = account?.settings?.payouts?.schedule;
+    if (!sched || typeof sched !== 'object')
+        return 'Daily';
+    const interval = String(sched.interval ?? 'daily');
+    if (interval === 'weekly' && sched.weekly_anchor)
+        return `Weekly on ${titleCase(String(sched.weekly_anchor))}`;
+    if (interval === 'monthly' && sched.monthly_anchor != null)
+        return `Monthly on day ${sched.monthly_anchor}`;
+    return titleCase(interval);
+}
+function DevelopersPage({ go }) {
+    const { data, error } = useApi(loadDevelopers, []);
+    if (!data)
+        return _jsx(Loading, { error: error });
+    return (_jsxs("div", { className: "page", children: [_jsx(PageHead, { title: "Developers" }), _jsxs("section", { className: "section settings-block", "data-settings": "api-keys", children: [_jsx("div", { className: "section-head", children: _jsx("h2", { children: "API keys" }) }), _jsxs("table", { className: "table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Name" }), _jsx("th", { children: "Token" }), _jsx("th", { className: "right", children: "Created" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "strong", children: "Publishable key" }), _jsx("td", { className: "mono", children: "pk_test_twin" }), _jsx("td", { className: "right muted", children: "\u2014" })] }), _jsxs("tr", { children: [_jsx("td", { className: "strong", children: "Secret key" }), _jsx("td", { className: "mono", children: "sk_test_\u2022\u2022\u2022\u2022twin" }), _jsx("td", { className: "right muted", children: "\u2014" })] })] })] })] }), _jsxs("section", { className: "section settings-block", "data-settings": "webhooks", children: [_jsx("div", { className: "section-head", children: _jsx("h2", { children: "Webhooks" }) }), _jsxs("table", { className: "table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Endpoint" }), _jsx("th", { children: "Status" }), _jsx("th", { className: "right", children: "Listening to" })] }) }), _jsxs("tbody", { children: [data.webhooks.length === 0 && _jsx("tr", { className: "empty-row", children: _jsx("td", { colSpan: 3, children: _jsx(EmptyState, { title: "No webhook endpoints" }) }) }), data.webhooks.map((w) => _jsxs("tr", { children: [_jsx("td", { className: "mono", children: w.url ?? w.id }), _jsx("td", { children: _jsx(StatusPill, { value: w.status ?? 'enabled' }) }), _jsxs("td", { className: "right muted", children: [(w.enabled_events ?? []).length, " events"] })] }, w.id))] })] })] }), _jsx(Section, { title: "Events", actions: _jsx(Link, { to: "events", go: go, children: "View all" }), children: _jsxs("table", { className: "table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Event" }), _jsx("th", { children: "Type" }), _jsx("th", { children: "Object" }), _jsx("th", { className: "right", children: "Date" })] }) }), _jsx("tbody", { children: data.events.slice(0, 15).map((e) => (_jsxs("tr", { children: [_jsx("td", { children: eventText(e) }), _jsx("td", { className: "mono muted", children: e.type }), _jsx("td", { className: "mono muted", children: e.data?.object?.id }), _jsx("td", { className: "right muted nowrap", children: formatDate(e.created) })] }, e.id))) })] }) })] }));
+}
+function SettingsPage() {
+    const { data, error } = useApi(loadDevelopers, []);
+    if (!data)
+        return _jsx(Loading, { error: error });
+    const account = data.account;
+    return (_jsxs("div", { className: "page", children: [_jsx(PageHead, { title: "Settings" }), _jsxs("section", { className: "section settings-block", "data-settings": "account", children: [_jsx("div", { className: "section-head", children: _jsx("h2", { children: "Business details" }) }), _jsx(Props, { rows: [
+                            ['Account ID', _jsx("span", { className: "mono", children: account?.id ?? '—' })],
+                            ['Account name', account?.settings?.dashboard?.display_name ?? PLATFORM_DEFAULT_NAME],
+                            ['Country', account?.country ?? '—'],
+                            ['Default currency', String(account?.default_currency ?? 'usd').toUpperCase()],
+                        ] })] }), _jsxs("section", { className: "section settings-block", "data-settings": "public-details", children: [_jsxs("div", { className: "section-head", children: [_jsx("h2", { children: "Public details" }), _jsx("a", { className: "btn", href: `${API_BASE}/settings/public`, children: "Edit" })] }), _jsx(Props, { rows: [['Business name', _jsx("span", { className: "settings-public-name", children: publicBusinessName(account) })]] })] }), _jsxs("section", { className: "section settings-block", "data-settings": "payouts", children: [_jsx("div", { className: "section-head", children: _jsx("h2", { children: "Payouts" }) }), _jsx(Props, { rows: [['Payout schedule', _jsx("span", { className: "settings-payout-schedule", children: payoutScheduleText(account) })]] })] })] }));
+}
+function ResourcePage({ section, go }) {
+    const { data, error } = useApi(() => list(`/v1/${section.key}`), [section.key]);
+    const account = section.key === 'accounts' ? data?.[0] : undefined;
+    const tabs = section.path.startsWith('radar/') ? ['radar/reviews', 'radar/lists']
+        : section.path.startsWith('terminal/') ? ['terminal/readers', 'terminal/locations']
+            : section.path.startsWith('issuing/') ? ['issuing/cards', 'issuing/cardholders']
+                : section.path.startsWith('connect/') ? ['connect/accounts', 'connect/transfers']
+                    : section.key === 'payouts' || section.key === 'balance_transactions' ? ['payouts', 'balance-transactions'] : [];
+    const title = section.path.startsWith('radar/') ? 'Radar' : section.path.startsWith('terminal/') ? 'Terminal' : section.path.startsWith('issuing/') ? 'Issuing'
+        : section.path.startsWith('connect/') ? 'Connect' : section.key === 'tax_rates' ? 'Tax' : section.label;
+    return (_jsxs("div", { className: "page", children: [_jsx(PageHead, { title: title, children: tabs.length ? _jsx("div", { className: "tabs", children: tabs.map((t) => _jsx(Link, { to: t, go: go, className: `tab ${t === section.path ? 'active' : ''}`, children: SECTION_BY_PATH.get(t).label.replace(/^(Radar|Terminal|Issuing) /, '') }, t)) }) : null }), account ? _jsx(ConnectAccountPanel, { row: account }) : null, data ? _jsxs(_Fragment, { children: [_jsx(ListPane, { section: section, rows: data, onSelect: () => { } }), _jsx(ResultCount, { n: data.length })] }) : _jsx(Loading, { error: error })] }));
+}
+// ── the app ──────────────────────────────────────────────────────────────────
+export function Page({ route, search, go }) {
+    const [head, id] = route;
+    const joined = route.join('/');
+    if (!head || head === 'dashboard')
+        return _jsx(HomeScreen, { go: go });
+    if (head === 'payments')
+        return id ? _jsx(PaymentPage, { id: id, go: go }) : _jsx(PaymentsPage, { go: go });
+    if (head === 'customers')
+        return id ? _jsx(CustomerPage, { id: id, go: go }) : _jsx(CustomersPage, { go: go, create: new URLSearchParams(search).has('create') });
+    if (head === 'subscriptions')
+        return id ? _jsx(SubscriptionPage, { id: id, go: go }) : _jsx(SubscriptionsPage, { go: go });
+    if (head === 'invoices')
+        return id ? _jsx(InvoicePage, { id: id, go: go }) : _jsx(InvoicesPage, { go: go });
+    if (head === 'products')
+        return _jsx(ProductsPage, { go: go });
+    if (head === 'balance')
+        return _jsx(BalancesPage, { go: go });
+    if (head === 'developers')
+        return _jsx(DevelopersPage, { go: go });
+    if (head === 'settings')
+        return _jsx(SettingsPage, {});
+    const section = SECTION_BY_PATH.get(joined) ?? SECTION_BY_PATH.get(head);
+    if (section)
+        return _jsx(ResourcePage, { section: section, go: go }, section.key);
+    return _jsx("div", { className: "page", children: _jsx(EmptyState, { title: "Page not found", body: "This page doesn\u2019t exist in the Dashboard." }) });
+}
+export function App() {
+    const [loc, setLoc] = useState(() => ({ path: window.location.pathname, search: window.location.search }));
+    useEffect(() => {
+        const onPop = () => setLoc({ path: window.location.pathname, search: window.location.search });
+        window.addEventListener('popstate', onPop);
+        return () => window.removeEventListener('popstate', onPop);
+    }, []);
+    const go = useCallback((to) => {
+        const href = hrefOf(to);
+        window.history.pushState(null, '', href);
+        const u = new URL(href, window.location.origin);
+        setLoc({ path: u.pathname, search: u.search });
+        window.scrollTo(0, 0);
+    }, []);
+    const route = routeOf(loc.path);
+    useEffect(() => {
+        if (route.length === 0)
+            window.history.replaceState(null, '', hrefOf('dashboard'));
+        const [head, id] = route;
+        const names = { dashboard: 'Home', payments: 'Payments', customers: 'Customers', subscriptions: 'Subscriptions', invoices: 'Invoices', products: 'Product catalog', balance: 'Balances', developers: 'Developers', settings: 'Settings' };
+        document.title = `${id ? `${id} – ` : ''}${names[head ?? 'dashboard'] ?? SECTION_BY_PATH.get(route.join('/'))?.label ?? 'Dashboard'} – Stripe`;
+    }, [loc.path]);
+    return (_jsxs("div", { className: "dash", children: [_jsx(TestModeBand, {}), _jsxs("div", { className: "frame", children: [_jsx(SideNav, { route: route, go: go }), _jsxs("div", { className: "main", children: [_jsx(TopBar, { go: go }), _jsx("main", { className: "content", children: _jsx(Page, { route: route, search: loc.search, go: go }) })] })] })] }));
+}
+if (typeof document !== 'undefined' && document.getElementById('root')) {
+    createRoot(document.getElementById('root')).render(_jsx(App, {}));
+}