/* Admin pages */ const ago = (iso) => { if (!iso) return "—"; const diff = Date.now() - new Date(iso).getTime(); if (!Number.isFinite(diff)) return "—"; const mins = Math.floor(diff / 60000); if (mins < 1) return "just now"; if (mins < 60) return `${mins}m`; const hrs = Math.floor(mins / 60); if (hrs < 24) return `${hrs}h`; return `${Math.floor(hrs / 24)}d`; }; const AdminDashboard = ({ onGo }) => { const store = MK_USE(); const metrics = store.adminMetrics || {}; const queueRows = store.atQueue || []; return (
All systems operational

Control plane

{metrics.active_tenants || 0} active tenants · {(queueRows || []).length} items need your attention.

}/> }/>
Operations queue
Items that can't complete without you
onGo("at-setup")}>Full queue →
{queueRows.length === 0 ? ( ) : queueRows.slice(0, 6).map((r) => ( ))}
TaskTenantPriorityAge
No queue items.
{r.action || "Manual setup needed"} {r.tenant_name || r.tenant_id || "—"} {r.priority || "medium"} {ago(r.created_at)}
System health
{[["Africa's Talking trunk","up","p95 142ms"],["Livekit media","up","p95 89ms"],["Supabase","up","42ms"],["M-Pesa collections","degraded","timeouts"]].map((h, i) => (
{h[0]}
{h[2]}
))}
Number pool
142
ready
36
assigned
8
setup
onGo("number-pool")}>Manage pool →
); }; const AdminTenants = ({ onGo }) => { const store = MK_USE(); const [filter, setFilter] = useState("all"); const [q, setQ] = useState(""); const filters = ["all", "active", "pending", "suspended"]; const rows = store.tenants.filter(t => (filter === "all" || t.status === filter) && t.name.toLowerCase().includes(q.toLowerCase())); return (

Tenants

{store.tenants.filter(t => t.status === "active").length} active · {store.tenants.filter(t => t.status === "pending").length} pending activation

{filters.map(f => )}
setQ(e.target.value)}/>
{rows.length === 0 ? (
No tenants match that filter.
) : ( {rows.map(t => ( onGo("tenant-detail")}> ))}
TenantPlanNumbersCalls 7dStatusCreated
{t.name.split(" ").map(s=>s[0]).slice(0,2).join("")}
{t.name}
 {t.plan} {t.numbers} {t.calls7d.toLocaleString()} {t.status} {t.created}
)}
); }; const TenantDetail = ({ onGo }) => { const [tab, setTab] = useState("overview"); const [actionsOpen, setActionsOpen] = useState(false); const [addNum, setAddNum] = useState(false); const toast = useToast(); useEffect(() => { if (!actionsOpen) return; const h = () => setActionsOpen(false); window.addEventListener("click", h); return () => window.removeEventListener("click", h); }, [actionsOpen]); return (
setAddNum(false)}/>
onGo("tenants")}>Tenants / Acme Dentistry
AD

Acme Dentistry

active Growth tenant_01HGHRQ
e.stopPropagation()}> {actionsOpen && (
{ setActionsOpen(false); toast({ title: "Export started", body: "We'll email a link when ready." }); }}> Export tenant data
{ setActionsOpen(false); toast({ title: "Password reset sent" }); }}> Send password reset
{ setActionsOpen(false); toast({ title: "Trunk re-synced" }); }}> Re-sync trunk config
{ setActionsOpen(false); await api.tenants.suspend("ten_acme"); toast({ title: "Tenant suspended", kind: "danger" }); }}> Suspend tenant
)}
{["overview","numbers","routing","calls","billing","technical","audit"].map(t => ( ))}
{tab === "overview" && ( <>
}/>
Numbers
NumberRegionCallbackStatus
+254 20 765 4110Nairobitrunk:197.232.94.18healthy
+254 20 765 4212Mombasatrunk:197.232.94.18healthy
Owner
AM
Ayo Mwangi
ayo@acme.ke
Recent events
3m ago · Call handled · +254 722 •••
18m ago · Playbook updated
2h ago · Invoice paid · $39.00
)} {tab === "numbers" && } {tab === "routing" && } {tab === "calls" && } {tab === "billing" && } {tab === "technical" && } {tab === "audit" && }
); }; const NumberPool = () => { const [rows, setRows] = useState([]); const [addNum, setAddNum] = useState(false); useEffect(() => { let alive = true; api.numbers.pool().then((items) => { if (!alive) return; setRows(items || []); }).catch(() => { if (!alive) return; setRows([]); }); return () => { alive = false; }; }, []); return (
setAddNum(false)}/>

Number pool

186 total · 142 ready to assign · 8 mid-setup.

{rows.length === 0 ? ( ) : rows.map((r) => ( ))}
NumberRegionStatusCallbackAssigned toAdded
No numbers in pool.
{r.phone_number} {r.country_code || "—"} {r.is_active ? "assigned" : "setup"} {r.callback_url || "pending"} {r.tenant_name || "—"} {r.created_at ? new Date(r.created_at).toLocaleDateString() : "—"}
); }; const ATSetupQueue = () => { const toast = useToast(); const [queue, setQueue] = useState([]); const [resolved, setResolved] = useState({}); useEffect(() => { let alive = true; api.atQueue.queue().then((rows) => { if (!alive) return; setQueue(rows || []); }).catch(() => { if (!alive) return; setQueue([]); }); return () => { alive = false; }; }, []); const resolve = async (id) => { await api.atQueue.resolve(id); setResolved(r => ({ ...r, [id]: true })); toast({ title: "Marked complete" }); }; return (

AT setup queue

Manual callback updates pending in the Africa's Talking dashboard.

{queue.length === 0 ? (
No pending setup tasks.
) : queue.map((q) => (
{q.number || q.phone_number || "—"}{resolved[q.id] ? "resolved" : "awaiting you"}
{q.tenant_name || q.tenant_id || "—"} · {ago(q.created_at)} old
{!resolved[q.id] && }
Next step: {q.action || "Complete manual setup"}
1. Provision 1?"live":"neutral"} dot={(q.step || 1)>1}>2. Whitelist IP 2?"live":"neutral"} dot={(q.step || 1)>2}>3. Callback URL 3?"live":"neutral"} dot={(q.step || 1)>3}>4. Test call
))}
); }; const AdminRouting = () => { const [routes, setRoutes] = useState([]); useEffect(() => { let alive = true; api.admin.rateRoutes().then((rows) => { if (!alive) return; setRoutes(rows || []); }).catch(() => { if (!alive) return; setRoutes([]); }); return () => { alive = false; }; }, []); return (

Routing & LCR

Carriers and least-cost routes per prefix.

{routes.length === 0 ? ( ) : routes.map((r) => ( ))}
PrefixRegionPrimaryFailoverRateStatus
No routing rules found.
{r.prefix || "—"}{r.region || "—"}{r.primary_carrier || r.primary || "—"}{r.failover_carrier || r.failover || "—"}{r.rate || "—"}{r.status || "active"}
); }; const AdminFraud = () => { const [events, setEvents] = useState([]); useEffect(() => { let alive = true; api.admin.securityEvents().then((rows) => { if (!alive) return; setEvents(rows || []); }).catch(() => { if (!alive) return; setEvents([]); }); return () => { alive = false; }; }, []); return (

Fraud & limits

Security events and call-spend guardrails.

e.action === "blocked").length)} delta="live events" up={false}/> a + Number(e.score || 0), 0) / events.length).toFixed(2) : "0.00")}/> e.action === "throttled").map((e) => e.tenant_id)).size)}/>
{events.length === 0 ? ( ) : events.map((r) => ( ))}
WhenTenantEventSeverityAction
No fraud/security events.
{ago(r.created_at)}{r.tenant_name || r.tenant_id || "—"}{r.description || r.event || "Security event"}{r.severity || "low"}{r.action || "review"}
); }; const BillingPlans = () => (

Billing plans

Plans offered to tenants.

{[ { n: "Starter", p: "$0", incl: "100 min", active: "6 tenants", kind: "neutral" }, { n: "Growth", p: "$39", incl: "500 min · 1 number", active: "12 tenants", kind: "accent" }, { n: "Scale", p: "$149", incl: "5,000 min · 5 numbers", active: "4 tenants", kind: "purple" }, ].map((pl, i) => (
{pl.n}
{pl.active}
{pl.p}/mo
{pl.incl}
))}
); const AuditTrail = () => { const [logs, setLogs] = useState([]); useEffect(() => { let alive = true; api.admin.auditLogs().then((rows) => { if (!alive) return; setLogs(rows || []); }).catch(() => { if (!alive) return; setLogs([]); }); return () => { alive = false; }; }, []); return (

Audit trail

Every admin action, logged with actor + diff.

{logs.length === 0 ? ( ) : logs.map((r) => ( ))}
WhenActorActionEntity
No audit logs found.
{ago(r.created_at)}{r.actor || r.user_email || "system"}{r.action || "update"}{r.entity || r.target || "—"}
); }; const AdminSettings = () => { const toast = useToast(); return (

Settings

Platform configuration.

{[ { t: "Blocked callers", d: "12 numbers blocked across all tenants.", cta: "Manage" }, { t: "Trunk diagnostics", d: "Last check: 2m ago · all green.", cta: "Run check" }, { t: "API keys", d: "3 active · 1 expiring in 14 days.", cta: "Rotate" }, { t: "Environment", d: "Production · region eu-west-1.", cta: "View config" }, ].map((c, i) => (
{c.t}
{c.d}
))}
); }; const CreateTenant = ({ onGo }) => { const toast = useToast(); const [form, setForm] = useState({ name: "", country: "Kenya", plan: "Starter", email: "" }); const [busy, setBusy] = useState(false); const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value })); const submit = async () => { if (!form.name || !form.email) return; setBusy(true); await api.tenants.create(form); setBusy(false); toast({ title: "Tenant created", body: form.name + " has been invited." }); onGo("tenants"); }; return (
onGo("tenants")}>Tenants / New

Create a tenant

The tenant will receive an invite to complete self-service onboarding.

); }; Object.assign(window, { AdminDashboard, AdminTenants, TenantDetail, NumberPool, ATSetupQueue, AdminRouting, AdminFraud, BillingPlans, AuditTrail, AdminSettings, CreateTenant });