// MCP Hero — Admin portal (separate standalone app feel: dark sidebar, denser) const { useState: useAdmState, useMemo: useAdmMemo } = React; // ---------- tiny charts ---------- function BarChart({ data, height = 120, color = 'var(--accent)' }) { const max = Math.max(...data); return (
{data.map((v, i) => (
))}
); } function LineChart({ data, height = 120, color = 'var(--accent)' }) { const max = Math.max(...data), min = Math.min(...data); const W = 100, H = 100; const pts = data.map((v, i) => `${(i / (data.length - 1)) * W},${H - ((v - min) / (max - min || 1)) * (H - 8) - 4}`); return ( ); } function SplitBars({ items, color = 'var(--accent)' }) { return (
{items.map((s) => (
{s.name}{s.pct}%
))}
); } function McpStatusBadge({ status }) { return status === 'active' ? Active : status === 'draft' ? Draft : Disabled; } // ---------- Admin overview ---------- function AdminDash({ nav }) { const S = MH_ADMIN_STATS; return (
Gateway calls · last 30 days 1,601 today
Top MCPs today
{[...MH_MCPS].filter((m) => m.status === 'active').sort((a, b) => b.callsToday - a.callsToday).slice(0, 5).map((m) => (
{m.name} {m.callsToday}
))}
nav('/admin/analytics')}>Full analytics
); } // ---------- Admin MCP list ---------- function AdminMcps({ nav }) { const [q, setQ] = useAdmState(''); const rows = MH_MCPS.filter((m) => !q || m.name.toLowerCase().includes(q.toLowerCase())); return (
m.status === 'active').length + ' live on marketplace'} right={ nav('/admin/mcps/new')}>Add MCP}>
{rows.map((m) => ( nav('/admin/mcps/' + m.slug)}> ))}
{m.name} {m.installs.toLocaleString()} {m.revenue.toLocaleString()} {m.callsToday}
); } // ---------- Admin MCP edit / create ---------- function AdminMcpEdit({ slug, nav }) { const existing = slug !== 'new' ? mhGetMcp(slug) : null; const toast = useToast(); const [form, setForm] = useAdmState(existing ? { name: existing.name, slug: existing.slug, desc: existing.description, cat: existing.category, url: 'http://10.2.0.14:8821/mcp', status: existing.status, tools: existing.tools.map((t) => ({ ...t })), } : { name: '', slug: '', desc: '', cat: 'business-data', url: '', status: 'draft', tools: [{ name: '', desc: '', credits: 0 }] }); const set = (k, v) => setForm((f) => ({ ...f, [k]: v })); const setTool = (i, k, v) => setForm((f) => ({ ...f, tools: f.tools.map((t, j) => j === i ? { ...t, [k]: v } : t) })); return (
{form.status === 'draft' ? { set('status', 'active'); toast('Published to marketplace'); }}>Publish : null} {form.status === 'active' ? { set('status', 'disabled'); toast('MCP taken offline — gateway now returns MCP_UNAVAILABLE', 'danger'); }}>Disable : null} {form.status === 'disabled' ? { set('status', 'active'); toast('MCP re-enabled'); }}>Re-enable : null}
}>
Listing details
set('name', v)} placeholder="SSM Company Profile"> set('slug', v)} placeholder="ssm"> set('url', v)} placeholder="http://10.0.0.5:8821/mcp">
Tools & per-call pricing
setForm((f) => ({ ...f, tools: [...f.tools, { name: '', desc: '', credits: 0 }] }))}>Add tool

Set cost to 0 to make a tool free — free tools skip the credit check entirely.

{form.tools.map((t, i) => (
setTool(i, 'name', v)} placeholder="tool_name" style={{ fontSize: 12.5 }}> setTool(i, 'desc', v)} placeholder="What it does" style={{ fontSize: 13 }}>
setTool(i, 'credits', Math.max(0, parseInt(v || 0)))} style={{ paddingRight: 36, fontSize: 13 }}> cr
))}
{ toast('MCP saved'); nav('/admin/mcps'); }}>Save changes nav('/admin/mcps')}>Cancel {existing && form.status === 'draft' ? { toast('Draft deleted', 'danger'); nav('/admin/mcps'); }}>Delete draft : null}
); } // ---------- Admin users ---------- function AdminUsers({ nav }) { const [q, setQ] = useAdmState(''); const [type, setType] = useAdmState('all'); const [status, setStatus] = useAdmState('all'); const rows = MH_ADMIN_USERS .filter((u) => type === 'all' || u.type === type) .filter((u) => status === 'all' || u.status === status) .filter((u) => !q || (u.name + u.email).toLowerCase().includes(q.toLowerCase())); return (
u.type === 'org').length + ' organizations'}>
{rows.map((u, i) => ( nav('/admin/users/' + i)}> ))}
w[0]).slice(0, 2).join('').toUpperCase()} size={30} hue={(u.name.length * 53) % 360}> {u.name} {u.email} {u.type === 'org' ? Org · {u.members} : Personal} {u.registered} {u.balance.toLocaleString()} cr {u.status === 'active' ? Active : Suspended}
); } // ---------- Admin user detail ---------- function AdminUserDetail({ idx, nav }) { const u = MH_ADMIN_USERS[parseInt(idx)] || MH_ADMIN_USERS[0]; const toast = useToast(); const [adjustOpen, setAdjustOpen] = useAdmState(false); const [suspendOpen, setSuspendOpen] = useAdmState(false); const [amount, setAmount] = useAdmState(''); const [reason, setReason] = useAdmState(''); return (
w[0]).slice(0, 2).join('').toUpperCase()} size={52} hue={(u.name.length * 53) % 360}>

{u.name}

{u.type === 'org' ? Organization · {u.members} members : Personal} {u.status === 'suspended' ? Suspended : null}
{u.email} · registered {u.registered}
setAdjustOpen(true)}>Adjust credits {u.status === 'active' ? setSuspendOpen(true)}>Suspend : toast('Account reactivated')}>Reactivate}
{u.type === 'org' ? (
Members
{MH_TEAM.slice(0, u.members).map((m, i) => (
{m.name} · {m.email} {m.role}
))} ) : null} {/* top-up & credit history */} toast('Exporting credit history…')}>Export}> {[ { date: '2 Jun 2026', type: 'topup', label: 'Standard package', sub: 'Visa •••• 4242 · Stripe', paid: 'RM 50.00', credits: 550, status: 'paid' }, { date: '28 May 2026', type: 'topup', label: 'Pro package', sub: 'iPay88 · FPX', paid: 'RM 100.00', credits: 1200, status: 'paid' }, { date: '19 May 2026', type: 'adjust', label: 'Manual adjustment', sub: 'Refund · failed SSM call #482 · by Agmo Staff', paid: '—', credits: 25, status: 'adjustment' }, { date: '3 May 2026', type: 'topup', label: 'Starter package', sub: 'Stripe', paid: 'RM 10.00', credits: 100, status: 'paid' }, { date: '3 May 2026', type: 'topup', label: 'Starter package', sub: 'Stripe · payment not completed', paid: 'RM 10.00', credits: 0, status: 'abandoned' }, { date: '14 Apr 2026', type: 'topup', label: 'Standard package', sub: 'Razorpay', paid: 'RM 50.00', credits: 550, status: 'paid' }, ].map((tx, i) => { const isAdjust = tx.type === 'adjust'; const failed = tx.status === 'abandoned'; return ( ); })}
{tx.date} {tx.label} {tx.sub} {tx.paid} 0 ? 'var(--ok)' : 'var(--text-3)' }}>{tx.credits > 0 ? '+' + tx.credits.toLocaleString() : '—'} {tx.status === 'paid' ? Paid : tx.status === 'adjustment' ? Adjustment : Abandoned}
{MH_USAGE.slice(0, 6).map((g, i) => ( ))}
{g.ts} {mhGetMcp(g.mcp).name} {g.tool} {g.credits === 0 ? 'Free' : '−' + g.credits}
setAdjustOpen(false)} title="Manual credit adjustment">

The adjustment is added to the transaction history and the user is notified by email.

{ setAdjustOpen(false); toast('Adjusted ' + u.name + ' by ' + amount + ' credits'); setAmount(''); setReason(''); }} style={{ justifyContent: 'center' }}>Apply adjustment
setSuspendOpen(false)} title={'Suspend ' + u.name + '?'}>

They can't log in and the gateway rejects all their API keys with 403. {u.type === 'org' ? All {u.members} members are suspended too. : null}You can reactivate at any time.

{ setSuspendOpen(false); toast(u.name + ' suspended', 'danger'); setReason(''); }} style={{ flex: 1, justifyContent: 'center' }}>Suspend account setSuspendOpen(false)}>Cancel
); } // ---------- Admin analytics ---------- function AdminAnalytics() { const S = MH_ADMIN_STATS; const [granularity, setGranularity] = useAdmState('weekly'); return (
Export CSV}>
Revenue (RM)
MarAprMayJun
By package
By gateway
New registrations · weekly
78% personal 22% organization
Conversion funnel
{S.funnel.map((f, i) => { const pct = Math.round((f.n / S.funnel[0].n) * 100); return (
{f.stage}{f.n.toLocaleString()} · {pct}%
); })}
); } // ---------- Admin team & access ---------- function PermPip({ level }) { const map = { full: { label: 'Edit & update', color: 'var(--accent)', bg: 'color-mix(in oklch, var(--accent) 14%, transparent)' }, view: { label: 'View only', color: 'var(--text-2)', bg: 'var(--bg-sunken)' }, none: { label: 'No access', color: 'var(--text-3)', bg: 'transparent' }, }; const c = map[level] || map.none; return ( {c.label} ); } function RoleOption({ role, selected, onClick, disabled }) { return ( ); } function AdminTeam({ nav }) { const toast = useToast(); const [inviteOpen, setInviteOpen] = useAdmState(false); const [editStaff, setEditStaff] = useAdmState(null); const [email, setEmail] = useAdmState(''); const [role, setRole] = useAdmState('editor'); const active = MH_ADMIN_STAFF.filter((s) => s.status === 'active').length; const sendInvite = () => { setInviteOpen(false); toast('Invitation sent to ' + email + ' · ' + mhAdminRole(role).label); setEmail(''); setRole('editor'); }; return (
{ setRole('editor'); setEmail(''); setInviteOpen(true); }}>Invite admin}> {/* role permission reference */}
Roles & permissions
{MH_ADMIN_ROLES.map((r) => ( ))} {MH_ADMIN_SCOPES.map((sc) => ( {MH_ADMIN_ROLES.map((r) => ( ))} ))}
Access area{r.label}
{sc.label}
{sc.desc}
{/* current admins */} {MH_ADMIN_STAFF.map((s, i) => { const r = mhAdminRole(s.role); return ( { setEditStaff(s); setRole(s.role); }}> ); })}
{s.name}{s.you ? (you) : null} {s.email} {r.label} {s.lastActive} {s.status === 'active' ? Active : Suspended} {s.you ? — : }
{/* pending invites */} {MH_ADMIN_INVITES.length ? (
{MH_ADMIN_INVITES.map((inv, i) => ( ))}
{inv.email} {mhAdminRole(inv.role).label} {inv.invited} {inv.expires} toast('Invitation resent to ' + inv.email)}>Resend toast('Invitation revoked', 'danger')}>Revoke
) : null} {/* invite modal */} setInviteOpen(false)} title="Invite an admin" width={540}>
Role & access
{MH_ADMIN_ROLES.filter((r) => !r.system).map((r) => ( setRole(r.id)}> ))}
Send invitation
{/* edit / manage admin modal */} setEditStaff(null)} title={editStaff ? 'Manage ' + editStaff.name : ''} width={540}> {editStaff ? (
{editStaff.name}
{editStaff.email} · joined {editStaff.joined}
Change role
{MH_ADMIN_ROLES.filter((r) => !r.system).map((r) => ( setRole(r.id)}> ))}
{ toast(editStaff.name + ' is now ' + mhAdminRole(role).label); setEditStaff(null); }}>Save role {editStaff.status === 'active' ? { toast(editStaff.name + ' suspended', 'danger'); setEditStaff(null); }}>Suspend : { toast(editStaff.name + ' reactivated'); setEditStaff(null); }}>Reactivate} { toast('Admin access revoked', 'danger'); setEditStaff(null); }}>Revoke access
) : null}
); } // ---------- Admin shell ---------- const ADMIN_NAV = [ { path: '/admin', label: 'Overview', icon: 'grid' }, { path: '/admin/mcps', label: 'MCPs', icon: 'box' }, { path: '/admin/users', label: 'Users', icon: 'users' }, { path: '/admin/analytics', label: 'Analytics', icon: 'chart' }, { path: '/admin/team', label: 'Admins', icon: 'shield' }, ]; function AdminShell({ route, nav }) { let screen = ; const mcpMatch = route.match(/^\/admin\/mcps\/([\w-]+)$/); const userMatch = route.match(/^\/admin\/users\/(\d+)$/); if (route === '/admin/mcps') screen = ; else if (mcpMatch) screen = ; else if (route === '/admin/users') screen = ; else if (userMatch) screen = ; else if (route === '/admin/analytics') screen = ; else if (route === '/admin/team') screen = ; return (
{screen}
); } Object.assign(window, { AdminShell });