// hq-cockpit.jsx — the single read-only "Operator cockpit" screen. // Principle: READ HERE, ACT THERE. Every mutating path is a deep-link OUT // to Stripe (billing) or Supabase (app data). Nothing here writes. function HqCockpit() { const A = HQ_AGENCIES; const [sel, setSel] = React.useState(null); // Derive KPIs straight from the (mirrored) operator data so everything ties out. const active = A.filter(a => a.status === 'active'); const trialing = A.filter(a => a.status === 'trial'); const pastDue = A.filter(a => a.status === 'past_due'); const canceled = A.filter(a => a.status === 'churned'); const mrr = A.reduce((s, a) => s + a.mrr, 0); // active + past-due owe const pilgrims = A.reduce((s, a) => s + a.pilgrims, 0); // MRR sparkline scaled to land on the live figure. const sc = mrr / (HQ_MRR_SERIES[HQ_MRR_SERIES.length - 1] * 1000); const mrrSpark = HQ_MRR_SERIES.map(v => v * 1000 * sc); const pilgrimSpark = HQ_PILGRIM_SERIES.map(v => v * (pilgrims / HQ_PILGRIM_SERIES[HQ_PILGRIM_SERIES.length - 1])); return (
{/* Header strip */}
Subscriber overview
{A.length} operators on Muyassir · {pilgrims.toLocaleString('en-GB')} pilgrims under management
{/* KPI row */}
vs last month} chart={} /> {trialing.length} trialing · {canceled.length} canceled} /> live + upcoming batches} chart={} /> 0} foot={{pastDue.length} past-due · 1 failed charge} /> 1 converts in 6 days} />
{/* Main grid */}
setSel(null)} />
); } // ── Sync strip (top-right) ─────────────────────────────────────────────── function SyncStrip() { return (
{['stripe', 'supabase'].map(k => { const s = HQ_SYNC[k]; return (
{s.label} · {s.purpose}
synced {s.synced}
); })}
); } // ── KPI card ───────────────────────────────────────────────────────────── function KpiCard({ label, value, foot, chart, alert, accent }) { return (
{label}
{value}
{chart &&
{chart}
}
{foot}
); } // ── Operators panel (search + filters + table) ─────────────────────────── function OperatorsPanel({ agencies, onSelect }) { const [q, setQ] = React.useState(''); const [filter, setFilter] = React.useState('all'); const counts = { all: agencies.length, active: agencies.filter(a => a.status === 'active').length, trial: agencies.filter(a => a.status === 'trial').length, past_due: agencies.filter(a => a.status === 'past_due').length, churned: agencies.filter(a => a.status === 'churned').length, }; const TABS = [ { id: 'all', label: 'All' }, { id: 'active', label: 'Active' }, { id: 'trial', label: 'Trialing' }, { id: 'past_due', label: 'Past due' }, { id: 'churned', label: 'Canceled' }, ]; const rows = agencies .filter(a => filter === 'all' || a.status === filter) .filter(a => !q || a.name.toLowerCase().includes(q.toLowerCase()) || a.country.toLowerCase().includes(q.toLowerCase())) .sort((a, b) => b.mrr - a.mrr); return ( {/* Header: title + search */}
Operators
Tap a name for the full account. Change billing in Stripe, account data in Supabase.
setQ(e.target.value)} placeholder="Search operator or country…" style={{ border: 'none', background: 'transparent', outline: 'none', fontFamily: 'var(--ug-body)', fontSize: 12.5, color: 'var(--ug-ink)', width: '100%' }} />
{/* Filter tabs */}
{TABS.map(t => { const on = filter === t.id; return ( ); })}
{/* Table header */}
{['Operator', 'Plan', 'Status', 'MRR', 'Pilgrims', 'Last active', ''].map((h, i) => (
= 3 && i <= 4 ? 'right' : 'left' }}>{h}
))}
{/* Rows */}
{rows.map((a, i) => )} {rows.length === 0 &&
No operators match.
}
Showing {rows.length} of {agencies.length} operators Sorted by MRR
); } function OperatorRow({ a, last, onSelect }) { const st = HQ_STATUS[a.status]; const trial = a.status === 'trial', canceled = a.status === 'churned'; return (
onSelect && onSelect(a)} style={{ display: 'grid', gridTemplateColumns: '3fr 0.9fr 1.05fr 0.7fr 0.65fr 0.9fr 1.5fr', gap: 12, alignItems: 'center', padding: '12px 18px', borderBottom: last ? 'none' : '1px solid var(--ug-hairline)', transition: 'background .12s', cursor: 'pointer', }} onMouseEnter={e => e.currentTarget.style.background = 'var(--ug-surface)'} onMouseLeave={e => e.currentTarget.style.background = 'transparent'} > {/* Operator */}
{a.name} {a.verified && }
{a.country}
{/* Plan */}
{/* Status */}
{a.status === 'past_due' && {a.overdueDays}d overdue} {trial && {a.trialDays}d left}
{/* MRR */}
{(trial || canceled) ? '—' : hqMoney(a.mrr)}
{/* Pilgrims */}
{a.pilgrims || '—'}
{/* Last active */}
{a.lastActive}
{/* Actions — deep links OUT (named by purpose) */}
); } // ── Needs attention ────────────────────────────────────────────────────── const HQ_SEV = { high: 'var(--ug-danger)', medium: '#C77D3A', low: 'var(--ug-gold)' }; function AttentionPanel() { return (
Needs attention
Resolve in the source tool
{HQ_ATTENTION.length}
{HQ_ATTENTION.map((it, i) => (
{it.title}
{it.agency}
{it.detail}
))}
); } // ── Revenue mix (plan distribution) ────────────────────────────────────── function RevenueMix({ agencies, mrr }) { const order = ['premium', 'base']; const byPlan = order.map(k => { const items = agencies.filter(a => a.plan === k && a.mrr > 0); return { key: k, label: HQ_PLANS[k].label, color: HQ_PLANS[k].tone, count: items.length, sum: items.reduce((s, a) => s + a.mrr, 0) }; }).filter(p => p.sum > 0); return (
MRR by plan
{byPlan.map(p => (
{p.label} · {p.count}
{hqMoney(p.sum)}
))}
Total MRR {hqMoney(mrr)} /mo
); } // ── Operator detail drawer (read-only profile, opens on row click) ──────── function HqOperatorDrawer({ agency, onClose }) { const open = !!agency; const [a, setA] = React.useState(agency); React.useEffect(() => { if (agency) setA(agency); }, [agency]); React.useEffect(() => { const onKey = e => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [onClose]); if (!a) return null; const st = HQ_STATUS[a.status], hl = HQ_HEALTH[a.health], trial = a.status === 'trial', canceled = a.status === 'churned'; const invoices = HQ_INVOICES.filter(iv => iv.agency === a.name).slice(0, 4); const Stat = ({ label, value, accent }) => (
{label}
{value}
); const SectionHead = ({ tool, title }) => { const s = HQ_SYNC[tool]; return (
{title}
from {s.label}
); }; return (
{/* Header */}
{a.name} {a.verified && }
{a.country} · operator since {a.joined.startsWith('Trial') ? 'trial' : a.joined}
{!trial && !canceled && }
{/* Body */}
{/* Subscription & billing — Stripe */}
{a.status === 'past_due' && (
Card declined ×2 · subscription cancels in 7 days if unpaid.
)} {invoices.length > 0 && (
Recent invoices
{invoices.map(iv => (
{iv.id} {iv.date} {hqMoney(iv.amount)}
))}
)}
{/* Account & usage — Supabase */}
Feature adoption this month {Math.round(a.usage * 100)}%
Last active {a.lastActive} · licence {a.verified ? 'verified' : 'not yet uploaded'}
{/* Primary contact */}
Primary contact
); } function HqApp() { return (
); } ReactDOM.createRoot(document.getElementById('root')).render();