/* ═══════════════════════════════════════════════════════════════ BUSINESS METRICS — SA-only executive dashboard Live view of MRR, plan mix, COGS/margins, churn, funnel, and unit economics for the WPSiteBeam SaaS. Data model: All demo data is generated deterministically (seeded) so it looks realistic and stable across reloads. In production this would pull from Stripe (MRR, churn) + Supabase (signups, usage) + Railway (scan volume → AI cost attribution). 5 tabs: • Overview — headline KPIs + trend sparklines • MRR — 12-month ARR/MRR chart, breakdown by plan, new/expansion/churn waterfall • Plans — plan mix pie, per-plan MRR bar, add-on attach rates • COGS — per-scan cost stack, infra costs, margin by plan • Funnel — signup → trial → paid → expansion cohort chart SA-only: Shell guards via `sa: true` on the nav entry. ═══════════════════════════════════════════════════════════════ */ (function() { const { useState, useEffect, useMemo } = React; /* ── COLOR TOKENS (chart palette) ─────────────────────────── */ const CHART = { beam: 'var(--beam)', orange: 'var(--orange)', mint: 'var(--mint, #78dc8c)', warn: 'var(--warn)', red: 'var(--red)', rose: 'var(--rose, #f06292)', dim: 'var(--dim)', }; /* Seeded rng for deterministic demo data */ function mulberry32(seed) { return function() { let t = seed += 0x6D2B79F5; t = Math.imul(t ^ t >>> 15, t | 1); t ^= t + Math.imul(t ^ t >>> 7, t | 61); return ((t ^ t >>> 14) >>> 0) / 4294967296; }; } /* ═══════════════════════════════════════════════════════════ DATA GENERATORS ═══════════════════════════════════════════════════════════ */ /* 12-month MRR series with growth + churn drift */ function genMrrSeries() { const rng = mulberry32(42); const months = ['May','Jun','Jul','Aug','Sep','Oct','Nov','Dec','Jan','Feb','Mar','Apr']; let mrr = 8400; // 12 months ago const data = []; for (let i = 0; i < 12; i++) { const growth = (0.08 + rng()*0.06) * mrr; // 8-14% new+expansion const churn = (0.03 + rng()*0.02) * mrr; // 3-5% churn mrr = mrr + growth - churn; data.push({ month: months[i], mrr: Math.round(mrr), newMrr: Math.round(growth * 0.7), expansion: Math.round(growth * 0.3), churn: -Math.round(churn), }); } return data; } /* Current customer counts by plan */ const PLAN_DATA = [ { plan:'Free', count: 284, mrr: 0, price: 0, color: CHART.dim, cogs: 1.8 }, { plan:'Starter', count: 187, mrr: 18513, price: 99, color: CHART.beam, cogs: 8.2 }, { plan:'Growth', count: 94, mrr: 18706, price: 199, color: CHART.orange, cogs: 22.4 }, { plan:'Agency', count: 31, mrr: 12369, price: 399, color: CHART.mint, cogs: 48.6 }, { plan:'Enterprise', count: 6, mrr: 4194, price: 699, color: CHART.rose, cogs: 112.3 }, ]; /* Add-on attach rates */ const ADD_ONS = [ { name:'Extra Scans (10/25/50)', attach: 0.18, avgPrice: 31, volume: 58 }, { name:'Deep Scan (500/1000pg)', attach: 0.09, avgPrice: 36, volume: 29 }, { name:'Priority Support', attach: 0.07, avgPrice: 49, volume: 22 }, ]; /* Per-plan unit economics */ const UNIT_ECON = [ { plan:'Starter', arpu: 99, cogs: 8.2, stripe: 3.27, support: 4.20, ai: 2.10, margin: 81.23, marginPct: 0.821 }, { plan:'Growth', arpu: 199, cogs: 22.4, stripe: 6.27, support: 6.80, ai: 7.50, margin: 156.03, marginPct: 0.784 }, { plan:'Agency', arpu: 399, cogs: 48.6, stripe: 11.87, support:12.40, ai: 18.60, margin: 307.53, marginPct: 0.771 }, { plan:'Enterprise', arpu: 699, cogs:112.3, stripe: 20.57, support:28.00, ai: 47.80, margin: 490.33, marginPct: 0.702 }, ]; /* COGS per scan (Railway + AI + DB write) */ const SCAN_COGS = [ { item:'Railway compute (Puppeteer pool)', cost: 0.024, share: 0.42 }, { item:'OpenAI API (tech-stack summary)', cost: 0.018, share: 0.32 }, { item:'Supabase write + storage', cost: 0.005, share: 0.09 }, { item:'Egress / bandwidth', cost: 0.003, share: 0.05 }, { item:'Monitoring / logging', cost: 0.007, share: 0.12 }, ]; const SCAN_COST_TOTAL = SCAN_COGS.reduce((s,i) => s + i.cost, 0); // $0.057/scan /* Funnel data */ const FUNNEL = [ { stage:'Landing-page visits', count: 14280 }, { stage:'Free scan signups', count: 1807, conv: 0.127 }, { stage:'Scan completed', count: 1620, conv: 0.897 }, { stage:'Estimator opened', count: 742, conv: 0.458 }, { stage:'Upgrade modal shown', count: 489, conv: 0.659 }, { stage:'Checkout started', count: 198, conv: 0.405 }, { stage:'Paid conversion', count: 142, conv: 0.717 }, ]; /* Churn cohort (by plan, trailing 6 months) */ const CHURN = [ { plan:'Starter', gross: 0.058, net: 0.041 }, { plan:'Growth', gross: 0.034, net: 0.019 }, { plan:'Agency', gross: 0.022, net:-0.018 }, // net negative = expansion > churn { plan:'Enterprise', gross: 0.017, net:-0.041 }, ]; /* Infra monthly costs — SA-editable, persisted to localStorage as demo (production: writes to Supabase business_config row) */ const INFRA_DEFAULT = [ { key:'railway', name:'Railway (API + scanner pool)', cost: 387, source:'constant' }, { key:'supabase', name:'Supabase (DB + Auth + Edge)', cost: 249, source:'constant' }, { key:'ai', name:'AI API (Anthropic/OpenAI)', cost: 198, source:'live', note:'pulled from anthropic_api_log' }, { key:'stripe', name:'Stripe fees (calculated)', cost: 89, source:'calculated' }, { key:'cf', name:'Cloudflare + monitoring', cost: 47, source:'constant' }, { key:'misc', name:'Misc (email, storage, GHL)', cost: 31, source:'constant' }, ]; /* Data source registry — wired to real endpoints in production. Each card/tab declares which endpoints it reads. Status is demo for now. */ const DATA_SOURCES = [ { id:'overview', endpoint:'GET /sa/metrics/overview', status:'demo', desc:'Combined summary — MRR + counts + top-line KPIs', feeds:['Overview KPI strip','Overview MRR line chart'] }, { id:'mrr', endpoint:'GET /sa/metrics/mrr', status:'demo', desc:'MRR series + waterfall · reads accounts × plan × billing_interval', feeds:['MRR tab line chart','MRR waterfall table','Monthly movement stacked bars'] }, { id:'plans', endpoint:'GET /sa/metrics/plans', status:'demo', desc:'Plan mix + attach rates · reads accounts + addon purchases', feeds:['Plans pie chart','Plan count bars','Unit economics table','Add-on attach rates'] }, { id:'costs', endpoint:'GET /sa/metrics/costs', status:'demo', desc:'Infra + AI + per-scan · reads anthropic_api_log + business_config', feeds:['Infra spend donut','Cost per scan breakdown','Gross margin calc','Net margin by plan'] }, { id:'funnel', endpoint:'GET /sa/metrics/funnel', status:'demo', desc:'Landing→paid conversion · reads signup_funnel_events + auth_events', feeds:['Conversion funnel bars','Churn by plan cards'] }, ]; /* Build status — surfaced in footer so SA can see what's deployed */ const BUILD_STATUS = [ { group:'Supabase migration', items:[ { name:'anthropic_api_log table', status:'pending', notes:'account_id + scan_id + input_tok + output_tok + cost_cents + created_at' }, { name:'signup_funnel_events table', status:'pending', notes:'event_name + session_id + account_id (nullable) + ts' }, { name:'business_config row (infra constants)', status:'pending', notes:'Singleton row — Railway/Supabase/CF/Misc monthly costs' }, { name:'plan_change_history (from auth_events)', status:'exists', notes:'Reuse existing auth_events table with event="plan_changed"' }, ]}, { group:'Railway endpoints', items:[ { name:'GET /sa/metrics/overview', status:'pending', notes:'Combined summary — 1 call for Overview tab' }, { name:'GET /sa/metrics/mrr', status:'pending', notes:'Aggregate accounts by plan × interval × PLAN_LIMITS price' }, { name:'GET /sa/metrics/plans', status:'pending', notes:'Plan counts + ARPU + add-on attach' }, { name:'GET /sa/metrics/costs', status:'pending', notes:'Sum anthropic_api_log cost_cents + infra constants + Stripe fee calc' }, { name:'GET /sa/metrics/funnel', status:'pending', notes:'Stage counts from signup_funnel_events × date range' }, { name:'SA role gate middleware', status:'exists', notes:'requireSA() already guards /sa/* routes' }, ]}, { group:'Frontend (this page)', items:[ { name:'5 tabs + charts + tables', status:'done', notes:'Overview / MRR / Plans / COGS / Funnel — all SVG, no deps' }, { name:'Data Sources panel', status:'done', notes:'Shows endpoint per card + connection status' }, { name:'Infra Costs editor modal', status:'done', notes:'SA-editable constants persisted to localStorage (demo)' }, { name:'Refresh button → endpoints', status:'pending', notes:'Wire refresh action to call all 5 endpoints' }, ]}, ]; /* ═══════════════════════════════════════════════════════════ CHART PRIMITIVES All SVG, no external deps. Responsive via viewBox. ═══════════════════════════════════════════════════════════ */ /* Sparkline — tiny inline line chart */ function Sparkline({ data, color = CHART.beam, height = 32, width = 110 }) { if (!data || data.length < 2) return null; const max = Math.max(...data); const min = Math.min(...data); const rng = max - min || 1; const step = width / (data.length - 1); const pts = data.map((v,i) => `${i*step},${height - ((v - min)/rng)*height}`).join(' '); return ( ); } /* Line chart — full size, with axes + hover tooltip */ function LineChart({ series, height = 280, formatY = v => v, accentColor = CHART.beam }) { const [hover, setHover] = useState(null); const vb = { w: 800, h: height, padL: 58, padR: 18, padT: 18, padB: 32 }; const chartW = vb.w - vb.padL - vb.padR; const chartH = vb.h - vb.padT - vb.padB; const n = series.length; const max = Math.max(...series.map(s => s.value)); const min = 0; const rng = max - min || 1; const step = chartW / (n - 1); const pts = series.map((s,i) => [vb.padL + i*step, vb.padT + chartH - ((s.value - min)/rng)*chartH]); const path = pts.map((p,i) => `${i===0?'M':'L'} ${p[0]} ${p[1]}`).join(' '); const areaPath = `${path} L ${pts[n-1][0]} ${vb.padT+chartH} L ${pts[0][0]} ${vb.padT+chartH} Z`; // Y-axis ticks const ticks = 4; const tickVals = Array.from({length: ticks+1}, (_,i) => min + (rng * i / ticks)); return ( { const rect = e.currentTarget.getBoundingClientRect(); const x = ((e.clientX - rect.left) / rect.width) * vb.w; const idx = Math.round((x - vb.padL) / step); if (idx >= 0 && idx < n) setHover(idx); }} onMouseLeave={() => setHover(null)}> {/* Grid lines */} {tickVals.map((v,i) => { const y = vb.padT + chartH - ((v - min)/rng)*chartH; return ( {formatY(v)} ); })} {/* X-axis labels */} {series.map((s,i) => ( {s.label} ))} {/* Area fill */} {/* Line */} {/* Points */} {pts.map((p,i) => ( ))} {/* Hover tooltip */} {hover != null && ( {series[hover].label} {formatY(series[hover].value)} )} ); } /* Bar chart (vertical) — with stacked variant */ function BarChart({ data, height = 260, stacked = false, formatY = v => v, accentColor = CHART.beam }) { const vb = { w: 720, h: height, padL: 58, padR: 18, padT: 18, padB: 42 }; const chartW = vb.w - vb.padL - vb.padR; const chartH = vb.h - vb.padT - vb.padB; const n = data.length; const barGap = 14; const barW = (chartW - barGap*(n-1)) / n; const max = stacked ? Math.max(...data.map(d => (d.stacks || []).reduce((a,b) => a + Math.abs(b.value), 0))) : Math.max(...data.map(d => d.value)); const rng = max || 1; const ticks = 4; const tickVals = Array.from({length: ticks+1}, (_,i) => (rng * i / ticks)); return ( {tickVals.map((v,i) => { const y = vb.padT + chartH - (v/rng)*chartH; return ( {formatY(v)} ); })} {data.map((d,i) => { const x = vb.padL + i*(barW + barGap); if (stacked && d.stacks) { let yCursor = vb.padT + chartH; return ( {d.stacks.map((st, si) => { const h = (Math.abs(st.value) / rng) * chartH; yCursor -= h; return ; })} {d.label} ); } const h = (d.value / rng) * chartH; const y = vb.padT + chartH - h; return ( {formatY(d.value)} {d.label} ); })} ); } /* Pie / donut chart */ function PieChart({ data, size = 220, donut = true, centerLabel = null, centerValue = null }) { const total = data.reduce((s,d) => s + d.value, 0); const cx = size/2, cy = size/2; const r = size/2 - 8; const rInner = donut ? r * 0.58 : 0; let angleCursor = -Math.PI / 2; const slices = data.map(d => { const a = (d.value / total) * Math.PI * 2; const a0 = angleCursor; const a1 = angleCursor + a; angleCursor = a1; const x0 = cx + Math.cos(a0) * r, y0 = cy + Math.sin(a0) * r; const x1 = cx + Math.cos(a1) * r, y1 = cy + Math.sin(a1) * r; const large = a > Math.PI ? 1 : 0; let path; if (donut) { const xi0 = cx + Math.cos(a0) * rInner, yi0 = cy + Math.sin(a0) * rInner; const xi1 = cx + Math.cos(a1) * rInner, yi1 = cy + Math.sin(a1) * rInner; path = `M ${x0} ${y0} A ${r} ${r} 0 ${large} 1 ${x1} ${y1} L ${xi1} ${yi1} A ${rInner} ${rInner} 0 ${large} 0 ${xi0} ${yi0} Z`; } else { path = `M ${cx} ${cy} L ${x0} ${y0} A ${r} ${r} 0 ${large} 1 ${x1} ${y1} Z`; } return { path, color: d.color, label: d.label, value: d.value, pct: d.value/total }; }); return ( {slices.map((s,i) => )} {donut && centerValue && ( <> {centerLabel} {centerValue} )} ); } /* Horizontal bar (for funnel + cost stacks) */ function HBar({ label, value, max, color = CHART.beam, subValue = null, pct = null }) { const w = Math.max(2, (value / max) * 100); return (
{label}
{pct != null &&
{(pct*100).toFixed(1)}%
}
{typeof value === 'number' ? value.toLocaleString() : value}
{subValue != null &&
{subValue}
}
); } /* ═══════════════════════════════════════════════════════════ MAIN COMPONENT ═══════════════════════════════════════════════════════════ */ function BusinessMetrics() { const Icon = window.Icon; const PageHead = window.Pages1?.PageHead; const [tab, setTab] = useState(() => { try { return localStorage.getItem('wpsb-bm-tab') || 'overview'; } catch { return 'overview'; } }); const [period, setPeriod] = useState('12m'); const [showSources, setShowSources] = useState(false); const [showInfraEdit, setShowInfraEdit] = useState(false); const [infra, setInfra] = useState(() => { try { const saved = JSON.parse(localStorage.getItem('wpsb-bm-infra') || 'null'); return saved || INFRA_DEFAULT; } catch { return INFRA_DEFAULT; } }); useEffect(() => { try { localStorage.setItem('wpsb-bm-infra', JSON.stringify(infra)); } catch {} }, [infra]); useEffect(() => { try { localStorage.setItem('wpsb-bm-tab', tab); } catch {} }, [tab]); const mrrSeries = useMemo(genMrrSeries, []); const currentMrr = mrrSeries[mrrSeries.length - 1].mrr; const priorMrr = mrrSeries[mrrSeries.length - 2].mrr; const mrrGrowth = (currentMrr - priorMrr) / priorMrr; const arr = currentMrr * 12; const totalPaid = PLAN_DATA.filter(p => p.price > 0).reduce((s,p) => s + p.count, 0); const totalFree = PLAN_DATA.find(p => p.plan === 'Free').count; const arpu = currentMrr / totalPaid; const monthlyInfra = infra.reduce((s,i) => s + i.cost, 0); const grossMargin = (currentMrr - monthlyInfra) / currentMrr; const weightedChurn = CHURN.reduce((s,c) => s + (c.gross * PLAN_DATA.find(p => p.plan === c.plan).mrr), 0) / currentMrr; return (
Business Metrics SA ONLY · LIVE } sub={<>Executive view of MRR, plan mix, unit economics, infra COGS, and conversion funnel. Connected to Stripe + Supabase + Railway. Demo data shown below — swap to production in Account → Data Sources.} actions={<> } /> {/* ── Headline KPI strip ─────────────────────────────── */}
m.mrr)} color={CHART.beam}/>
{/* ── Tab nav ────────────────────────────────────────── */}
{[ { id:'overview', label:'Overview', icon:'dashboard' }, { id:'mrr', label:'MRR & ARR', icon:'trend' }, { id:'plans', label:'Plans', icon:'stack' }, { id:'cogs', label:'COGS', icon:'calc' }, { id:'funnel', label:'Funnel', icon:'filter' }, ].map(t => { const active = tab === t.id; return ( ); })}
{/* ── Data Sources panel (collapsible) ───────────────── */} {showSources && setShowSources(false)}/>} {tab === 'overview' && } {tab === 'mrr' && } {tab === 'plans' && } {tab === 'cogs' && } {tab === 'funnel' && } {/* ── Build Status footer ────────────────────────────── */} {/* ── Infra Costs editor modal ──────────────────────── */} {showInfraEdit && setShowInfraEdit(false)}/>}
); } /* ═══════════════════════════════════════════════════════════ DATA SOURCES PANEL — shows which endpoint feeds each card ═══════════════════════════════════════════════════════════ */ function DataSourcesPanel({ activeTab, onClose }) { const Icon = window.Icon; return (

Data sources · 5 endpoints

All endpoints demo · awaiting Railway deploy
{DATA_SOURCES.map(ds => { const isActive = ds.id === activeTab || activeTab === 'overview'; return ( ); })}
Endpoint Description Feeds Status
{ds.endpoint} {ds.desc} {ds.feeds.map((f,i) =>
• {f}
)} 		{ds.status.toUpperCase()}
Active tab highlights the primary endpoint · see Build Status below for deploy checklist SA role gate: requireSA() already deployed
); } /* ═══════════════════════════════════════════════════════════ INFRA COSTS EDITOR — SA-editable constants Persists to localStorage (demo). Production writes to Supabase `business_config` singleton row. ═══════════════════════════════════════════════════════════ */ function InfraEditor({ infra, setInfra, onClose }) { const Icon = window.Icon; const [draft, setDraft] = useState(infra); const total = draft.reduce((s,i) => s + (Number(i.cost) || 0), 0); const save = () => { setInfra(draft.map(d => ({ ...d, cost: Number(d.cost) || 0 }))); window.wpsbToast?.('Infra costs updated — will write to business_config in production', 'beam'); onClose(); }; return (
e.stopPropagation()}>

Infrastructure costs · SA-managed constants

Edits flow into Gross-margin, Net-margin, and Cost-per-scan calculations. In production these persist to a Supabase business_config singleton row.
{draft.map((item, i) => ( ))}
Category Source $/month
{item.name}
{item.note &&
{item.note}
} 		{item.source.toUpperCase()} {item.source === 'live' ? ( ${item.cost} auto ) : item.source === 'calculated' ? ( ${item.cost} calc ) : ( { const next = [...draft]; next[i] = { ...item, cost: e.target.value }; setDraft(next); }} style={{ width:90, textAlign:'right', fontFamily:'var(--font-mono)' }} /> )}
Total monthly infra ${total.toLocaleString()}
LIVE = pulled from anthropic_api_log
CALC = computed from MRR × 2.9% + count × $0.30
CONSTANT = SA-editable flat monthly cost
); } /* ═══════════════════════════════════════════════════════════ BUILD STATUS FOOTER — deploy checklist for Supabase + Railway ═══════════════════════════════════════════════════════════ */ function BuildStatusFooter() { const Icon = window.Icon; const all = BUILD_STATUS.flatMap(g => g.items); const done = all.filter(i => i.status === 'done').length; const exists = all.filter(i => i.status === 'exists').length; const pending = all.filter(i => i.status === 'pending').length; return (

Build status · backend deploy checklist

{done} done {exists} already exists {pending} pending
{BUILD_STATUS.map(g => (
{g.group}
{g.items.map((item, i) => { const color = item.status === 'done' ? 'var(--mint)' : item.status === 'exists' ? 'var(--beam)' : 'var(--warn)'; const icon = item.status === 'done' ? 'check' : item.status === 'exists' ? 'check' : 'circle'; return (
{item.name}
{item.notes}
); })}
))}
Next: run Supabase migration → deploy Railway endpoints → flip page from demo to live Estimated deploy: ~4 hrs (SQL 30m · endpoints 2h · testing 1.5h)
); } /* KPI card with sparkline */ function KPI({ label, value, delta, spark, color = CHART.beam, sub = null, invertDelta = false }) { const dColor = (invertDelta ? -delta : delta) >= 0 ? 'var(--mint)' : 'var(--red)'; const arrow = delta >= 0 ? '↑' : '↓'; return (
{label}
{value}
{spark && }
{arrow} {Math.abs(delta*100).toFixed(1)}% {sub || 'vs last period'}
); } /* ═══════════════════════════════════════════════════════════ OVERVIEW TAB ═══════════════════════════════════════════════════════════ */ function OverviewTab({ mrrSeries, currentMrr }) { const Icon = window.Icon; return ( <>

MRR growth · trailing 12 months

${currentMrr.toLocaleString()} current
({ label: m.month, value: m.mrr }))} formatY={v => '$' + Math.round(v/1000) + 'k'} accentColor={CHART.beam} />

Plan mix · paid only

p.price > 0).map(p => ({ label: p.plan, value: p.count, color: p.color }))} donut centerLabel="Total paid" centerValue={PLAN_DATA.filter(p => p.price > 0).reduce((s,p) => s + p.count, 0).toString()} />
{PLAN_DATA.filter(p => p.price > 0).map(p => (
{p.plan} {p.count}
))}
{/* Secondary row */}

Month-over-month movement

({ label: m.month, stacks: [ { value: m.newMrr, color: CHART.beam }, { value: m.expansion, color: CHART.mint }, { value: Math.abs(m.churn), color: CHART.red }, ], }))} stacked formatY={v => '$' + Math.round(v/1000) + 'k'} />
New Expansion Churn

Key events this month

{[ { icon:'trend', text:'MRR crossed $65k — new high', meta:'2 days ago', color:CHART.mint }, { icon:'plus', text:'3 Enterprise upgrades (2× Growth, 1× Agency)', meta:'this week', color:CHART.beam }, { icon:'warn', text:'Starter churn up 0.4pp — investigate onboarding', meta:'Apr 18', color:CHART.warn }, { icon:'spark', text:'Deep Scan add-on attach rose 23%', meta:'Apr 15', color:CHART.orange }, { icon:'x', text:'1 Enterprise downgrade to Agency', meta:'Apr 12', color:CHART.red }, ].map((e,i) => (
{e.text}
{e.meta}
))}
); } /* ═══════════════════════════════════════════════════════════ MRR TAB ═══════════════════════════════════════════════════════════ */ function MrrTab({ mrrSeries }) { const latest = mrrSeries[mrrSeries.length - 1]; const totalNew = mrrSeries.reduce((s,m) => s + m.newMrr, 0); const totalExpansion = mrrSeries.reduce((s,m) => s + m.expansion, 0); const totalChurn = mrrSeries.reduce((s,m) => s + m.churn, 0); return ( <>

MRR trend · 12 months

Start: ${mrrSeries[0].mrr.toLocaleString()} Now: ${latest.mrr.toLocaleString()} Growth: +{(((latest.mrr - mrrSeries[0].mrr)/mrrSeries[0].mrr)*100).toFixed(0)}%
({ label: m.month, value: m.mrr }))} formatY={v => '$' + Math.round(v/1000) + 'k'} accentColor={CHART.beam} height={320} />

Monthly waterfall · last 12 months

{mrrSeries.map(m => ( ))}
MonthMRRNew ExpansionChurn Net
{m.month} ${m.mrr.toLocaleString()} +${m.newMrr.toLocaleString()} +${m.expansion.toLocaleString()} ${m.churn.toLocaleString()} 0 ? 'var(--mint)' : 'var(--red)' }}> {(m.newMrr + m.expansion + m.churn) >= 0 ? '+' : ''}${(m.newMrr + m.expansion + m.churn).toLocaleString()}
); } function SummaryCard({ label, value, color, icon }) { const Icon = window.Icon; return (
{label}
{value}
); } /* ═══════════════════════════════════════════════════════════ PLANS TAB ═══════════════════════════════════════════════════════════ */ function PlansTab() { const Icon = window.Icon; const paidPlans = PLAN_DATA.filter(p => p.price > 0); const totalMrr = paidPlans.reduce((s,p) => s + p.mrr, 0); return ( <>

MRR contribution by plan

${totalMrr.toLocaleString()}/mo
({ label: p.plan, value: p.mrr, color: p.color }))} donut centerLabel="Total MRR" centerValue={'$' + Math.round(totalMrr/1000) + 'k'} size={240} />
{paidPlans.map(p => (
{p.plan} ${p.mrr.toLocaleString()}
{p.count} customers · ${p.price}/mo · {((p.mrr/totalMrr)*100).toFixed(1)}%
))}

Customer count by plan

({ label: p.plan, value: p.count, color: p.color }))} formatY={v => v.toString()} />
{/* Unit economics table */}

Unit economics per plan · monthly

ARPU − all costs = net margin
{UNIT_ECON.map(u => ( ))}
PlanARPUInfra COGS Stripe feeSupport alloc AI COGSNet margin Margin %
{u.plan} ${u.arpu} −${u.cogs.toFixed(2)} −${u.stripe.toFixed(2)} −${u.support.toFixed(2)} −${u.ai.toFixed(2)} ${u.margin.toFixed(2)} 0.75 ? 'var(--mint)' : 'var(--warn)' }}>{(u.marginPct*100).toFixed(1)}%
{/* Add-on attach rates */}

Add-on attach rates · paid customers

{ADD_ONS.map((a,i) => ( x.volume))} color={[CHART.beam, CHART.orange, CHART.mint][i]} subValue={`$${(a.volume * a.avgPrice).toLocaleString()}/mo revenue`} pct={a.attach} /> ))}
); } /* ═══════════════════════════════════════════════════════════ COGS TAB ═══════════════════════════════════════════════════════════ */ function CogsTab({ currentMrr, monthlyInfra, infra }) { const Icon = window.Icon; const grossMargin = (currentMrr - monthlyInfra) / currentMrr; const infraList = infra || INFRA_DEFAULT; return ( <>

Monthly infrastructure spend

${monthlyInfra}/mo total
({ label: item.name, value: item.cost, color: [CHART.beam, CHART.orange, CHART.mint, CHART.rose, CHART.warn, CHART.dim][i] }))} donut centerLabel="Infra/mo" centerValue={'$' + monthlyInfra} size={200} />
{infraList.map((item, i) => (
{item.name} ${item.cost}
))}

Gross margin summary

0.85 ? 'var(--mint)' : 'var(--warn)' }}>{(grossMargin*100).toFixed(1)}%
p.price>0).reduce((s,p)=>s+p.count,0)*0.30)}`} color="var(--dim)"/>
{/* Per-scan COGS breakdown */}

Cost per scan · ${SCAN_COST_TOTAL.toFixed(3)} avg

Break-even at 1,754 scans/mo covered by Starter plan
{SCAN_COGS.map((s,i) => ( x.cost))} color={[CHART.beam, CHART.orange, CHART.mint, CHART.warn, CHART.rose][i]} subValue={`$${s.cost.toFixed(3)}/scan`} pct={s.share} /> ))}
{/* Margin by plan bar chart */}

Net margin % by plan

({ label: u.plan, value: u.marginPct * 100, color: u.marginPct > 0.75 ? CHART.mint : CHART.warn }))} formatY={v => v.toFixed(0) + '%'} />
); } function StatRow({ label, value, color, bold }) { return (
{label} {value}
); } /* ═══════════════════════════════════════════════════════════ FUNNEL TAB ═══════════════════════════════════════════════════════════ */ function FunnelTab() { const Icon = window.Icon; const topCount = FUNNEL[0].count; return ( <>

Conversion funnel · last 30 days

Visit → Paid: {((FUNNEL[FUNNEL.length-1].count / topCount) * 100).toFixed(2)}%
{FUNNEL.map((f, i) => { const pct = f.count / topCount; const w = Math.max(8, pct * 100); const color = [CHART.beam, CHART.beam, CHART.mint, CHART.orange, CHART.orange, CHART.rose, CHART.mint][i]; return (
{f.stage}
{f.conv &&
↓ {(f.conv*100).toFixed(1)}% from prior
}
{(pct*100).toFixed(1)}%
{f.count.toLocaleString()}
); })}
{/* Churn by plan */}

Churn rates by plan · trailing 6 months

{CHURN.map((c,i) => (
{c.plan} 0.03 ? 'var(--red)' : 'var(--warn)') }}> Net: {c.net >= 0 ? '+' : ''}{(c.net*100).toFixed(1)}%
0.05 ? CHART.red : CHART.warn), borderRadius:2 }}/>
Gross: {(c.gross*100).toFixed(1)}% {c.net < 0 ? '✓ Net negative (expansion > churn)' : c.gross > 0.05 ? '⚠ Above target (5%)' : 'On target'}
))}

Key funnel insights

{[ { icon:'check', text:'Scan completion rate (89.7%) is best-in-class', color: CHART.mint }, { icon:'warn', text:'Estimator-open rate (45.8%) is biggest drop — test auto-open on scan-complete', color: CHART.warn }, { icon:'trend', text:'Upgrade modal → checkout (40.5%) improved 6pp after trust badge added', color: CHART.beam }, { icon:'spark', text:'Checkout → paid (71.7%) above SaaS benchmark (65%)', color: CHART.mint }, { icon:'x', text:'Landing → free scan (12.7%) below target — retest homepage copy', color: CHART.red }, ].map((e,i) => (
{e.text}
))}
); } window.BusinessMetrics = BusinessMetrics; })();