// backoffice.jsx — Narrio Operator Console // The admin surface an Operator (paid licensee) sees once signed in. // Reuses tokens. Multi-community portfolio overview + per-community // deep-dive + waiver brokerage + sponsor pipeline + revenue waterfall. const COMMUNITIES = [ { id: 'wealth', name: 'Wealth Signal', niche: 'Personal finance', subs: 4280, mrr: 8420, lead: 'A. Ohanian', contribs: 3, status: 'healthy', growth: 0.124, openRate: 0.48, churn: 0.018, streak: 16 }, { id: 'aiwork', name: 'The AI Workplace', niche: 'AI × future of work', subs: 5120, mrr: 6890, lead: 'M. Patel', contribs: 3, status: 'healthy', growth: 0.092, openRate: 0.52, churn: 0.022, streak: 14 }, { id: 'climate', name: 'Climate Capital', niche: 'Climate finance', subs: 2940, mrr: 5240, lead: 'D. Castellanos', contribs: 2, status: 'attention', growth: 0.031, openRate: 0.41, churn: 0.039, streak: 9 }, { id: 'longev', name: 'Longevity Stack', niche: 'Health × longevity', subs: 3380, mrr: 4720, lead: 'S. Park', contribs: 3, status: 'healthy', growth: 0.078, openRate: 0.46, churn: 0.024, streak: 11 }, { id: 'brick', name: 'Brick Intelligence',niche: 'Construction × tech', subs: 0, mrr: 0, lead: '— open seat', contribs: 0, status: 'opening', growth: 0, openRate: 0, churn: 0, streak: 0 }, ]; function App() { const [tab, setTab] = React.useState('overview'); const [active, setActive] = React.useState('wealth'); return (
{tab === 'overview' && } {tab === 'community' && } {tab === 'brokerage' && } {tab === 'sponsors' && } {tab === 'revenue' && } {tab === 'team' && }
); } function Sidebar({ tab, setTab, active, setActive }) { const items = [ { id: 'overview', l: 'Portfolio overview', shortcut: 'O' }, { id: 'community', l: 'Community', shortcut: 'C' }, { id: 'brokerage', l: 'Coverage brokerage', shortcut: 'B' }, { id: 'sponsors', l: 'Sponsor pipeline', shortcut: 'S' }, { id: 'revenue', l: 'Revenue & payouts', shortcut: 'R' }, { id: 'team', l: 'Team & seats', shortcut: 'T' }, ]; return ( ); } function TopBar() { return (
SYSTEM · OPERATIONAL Last sync 14s ago
Dashboard ← Public site
); } // ─── Overview ─────────────────────────────────────────────── function Overview() { const total = COMMUNITIES.reduce((a, c) => a + c.mrr, 0); const subs = COMMUNITIES.reduce((a, c) => a + c.subs, 0); const tier = { share: 0.15, license: 199 }; // Growth tier const yourTake = total * (1 - tier.share) - tier.license; return ( <>
{/* KPI strip */}
{/* Community grid */}

Communities

4 ACTIVE · 1 OPENING
{['COMMUNITY', 'LEAD', 'STATUS', 'SUBS', 'MRR', 'GROWTH', 'OPEN RATE'].map((h) => ( {h} ))}
{COMMUNITIES.map((c, i) => (
{c.name}
{c.niche}
{c.lead} {c.subs > 0 ? c.subs.toLocaleString() : '—'} {c.mrr > 0 ? '$' + c.mrr.toLocaleString() : '—'} 0.05 ? 'var(--green)' : c.growth > 0 ? 'var(--amber)' : 'var(--t3)', textAlign: 'right' }}> {c.growth > 0 ? '+' + (c.growth * 100).toFixed(1) + '%' : '—'} {c.openRate > 0 ? (c.openRate * 100).toFixed(0) + '%' : '—'}
))}
{/* Two-up: events + alerts */}
{[ { t: 'PUBLISH', m: 'Wealth Signal · Issue #42 sent to 4,280 subs', tm: '2m' }, { t: 'INTEL', m: 'Climate Capital · 3 intel items accepted', tm: '6m' }, { t: 'GROWTH', m: 'AI Workplace · +47 paid subs (24h)', tm: '11m' }, { t: 'ROUTE', m: 'Brick Intelligence · Lead candidate matched', tm: '14m' }, ].map((e, i) => (
{e.t} {e.m} {e.tm}
))} {[ { l: 'Climate Capital churn ↑ to 3.9%', d: 'Lead Editor briefed · review draft pivot', tm: 'Today' }, { l: 'Brick Intelligence still seeking Lead', d: '12 candidates · 3 above 9.0 rep', tm: 'Day 4' }, { l: 'Sponsor renewal · Wealth Signal Q4', d: 'Acme · $4,200 · expires in 12d', tm: '12d' }, ].map((a, i) => (
{a.l} {a.tm}
{a.d}
))}
); } function CommunityDetail({ id }) { const c = COMMUNITIES.find((x) => x.id === id) || COMMUNITIES[0]; return ( <>
COMMUNITY · {c.niche.toUpperCase()}

{c.name}

Lead: {c.lead} ·Contributors: {c.contribs} / 3 ·Streak: {c.streak}w ·
0.03 ? 'down' : 'up'} />
); } function Spark({ inverted }) { const pts = [4, 6, 5, 7, 8, 7, 10, 12]; const W = 480, H = 120; const max = Math.max(...pts); const path = pts.map((y, i) => `${i ? 'L' : 'M'}${(i / (pts.length - 1)) * (W - 20) + 10},${H - 10 - (y / max) * (H - 30)}`).join(' '); return ( ); } function Brokerage() { return ( <>
{[ { from: 'A. Ohanian', to: 'S. Park', com: 'Wealth Signal', dur: '14d', split: '40 / 25 / 35', status: 'Active' }, { from: 'M. Patel', to: 'I. Rao', com: 'AI Workplace', dur: '7d', split: '40 / 25 / 35', status: 'Active' }, { from: 'L. Tomek', to: 'pending', com: 'SaaS Signals', dur: '10d', split: '—', status: 'Brokering' }, ].map((r, i) => (
{r.from} → {r.to} {r.com} {r.dur} {r.split}
))} ); } function Sponsors() { const rows = [ { com: 'Wealth Signal', sponsor: 'Acme Capital', amt: 4200, status: 'Booked', issue: '#43' }, { com: 'AI Workplace', sponsor: 'Ramp', amt: 3800, status: 'Booked', issue: '#48' }, { com: 'Climate Capital', sponsor: 'Stripe Climate', amt: 2900, status: 'Negotiating', issue: '#21' }, { com: 'Longevity Stack', sponsor: 'Function Health',amt: 3400, status: 'Renewal due', issue: '#28' }, ]; return ( <>
{['COMMUNITY','SPONSOR','ISSUE','STATUS','AMOUNT', ''].map((h) => ( {h} ))}
{rows.map((r, i) => (
{r.com} {r.sponsor} {r.issue} ${r.amt.toLocaleString()}
))} ); } function Revenue() { const total = 25270; const license = 199; const share = total * 0.15; const take = total - license - share; return ( <>
{[ { l: 'Gross', v: total, c: 'var(--t1)' }, { l: 'Platform share', v: share, c: 'var(--purple)', neg: true }, { l: 'License (Growth)',v: license, c: 'var(--amber)', neg: true }, { l: 'You take', v: take, c: 'var(--green)' }, ].map((it) => (
{it.l.toUpperCase()}
{it.neg ? '−' : ''}${Math.round(it.v).toLocaleString()}
))}
{[ { name: 'A. Ohanian', com: 'Wealth Signal · Lead', amt: 2140 }, { name: 'S. Park', com: 'Longevity Stack · Lead', amt: 1820 }, { name: 'M. Patel', com: 'AI Workplace · Lead', amt: 1740 }, { name: 'I. Rao', com: 'Wealth Signal · Contrib', amt: 680 }, { name: 'L. Tomek', com: 'AI Workplace · Contrib', amt: 520 }, ].map((p, i) => (
{p.name} {p.com} ${p.amt.toLocaleString()}
))} ); } function Team() { return ( <>
Detailed seat-management table — names, slots used, reputation, streak, recent activity.
 ); } // ─── Building blocks ──────────────────────────────────────── function Header({ eyebrow, title, sub }) { return (
{eyebrow}

{title}

{sub &&

{sub}

}
); } function KPI({ label, value, sub, delta, trend, highlight }) { return (
{label}
{value}
{sub &&
{sub}
} {delta &&
{delta}
}
); } function Card({ title, sub, tone, children }) { return (

{title}

{sub && {sub}}
{children}
); } function StatusBadge({ s, label }) { const map = { healthy: { c: 'var(--green)', bg: 'var(--green-d)', l: label || 'Healthy' }, attention: { c: 'var(--amber)', bg: 'var(--amber-d)', l: label || 'Attention' }, opening: { c: 'var(--blue)', bg: 'var(--blue-d)', l: label || 'Opening' }, }; const m = map[s] || map.healthy; return {m.l.toUpperCase()}; } ReactDOM.createRoot(document.getElementById('root')).render();