{stats.months.map((m,i) => (
{thisMonth.slice(thisWeek.length, thisWeek.length + 8).map(u =>
);
}
else if (kpiKey === 'paying') {
const plusActive = users.filter(u => u.plan==='Plus' && u.status!=='churned');
const proActive = users.filter(u => u.plan==='Pro' && u.status!=='churned');
const plusMrr = plusActive.length * A_PLAN_PRICE.Plus;
const proMrr = proActive.length * A_PLAN_PRICE.Pro;
const arpu = stats.paying ? (stats.mrr / (plusActive.length + proActive.length)).toFixed(2) : 0;
const recentPaying = [...users].filter(u => u.plan !== 'Free').sort((a,b) => b.joined - a.joined).slice(0,6);
csvData = { filename:'vm_users_paying.csv', headers:['Name','Email','Plan','Status','Country','Joined'], rows:users.filter(u=>u.plan!=='Free').sort((a,b)=>b.joined-a.joined).map(u=>[u.name,u.email,u.plan,u.status,u.country,aDate(u.joined)]) };
title = `${stats.paying} Paying Accounts`;
subtitle = `${(stats.paying/stats.total*100).toFixed(0)}% conversion · ${aMoney(stats.mrr)}/mo MRR`;
body = (
<>
u.plan!=='Free'&&u.status==='churned').length} sub="former" valueColor={VM.downInk} />
{recentPaying.map(u =>
);
}
else if (kpiKey === 'mrr') {
const plusActive = users.filter(u => u.plan==='Plus' && u.status!=='churned');
const proActive = users.filter(u => u.plan==='Pro' && u.status!=='churned');
const plusMrr = plusActive.length * A_PLAN_PRICE.Plus;
const proMrr = proActive.length * A_PLAN_PRICE.Pro;
const topCMrr = {};
users.filter(u=>u.status!=='churned'&&u.plan!=='Free').forEach(u=>{ topCMrr[u.country]=(topCMrr[u.country]||0)+(u.plan==='Pro'?A_PLAN_PRICE.Pro:A_PLAN_PRICE.Plus); });
const topCountryMrr = Object.entries(topCMrr).sort((a,b)=>b[1]-a[1]).slice(0,4);
csvData = { filename:'vm_mrr.csv', headers:['Plan','Active Accounts','Price/mo','MRR/mo'], rows:[['Plus',plusActive.length,A_PLAN_PRICE.Plus,plusMrr],['Pro',proActive.length,A_PLAN_PRICE.Pro,proMrr],['Total',plusActive.length+proActive.length,'—',stats.mrr]] };
title = `Est. MRR · ${aMoney(stats.mrr)}`;
subtitle = 'Monthly recurring revenue estimate';
body = (
<>
{topCountryMrr.map(([c,v]) => (
);
}
else if (kpiKey === 'churned') {
const churnedUsers = users.filter(u => u.status === 'churned');
const churnByPlan = { Free:0, Plus:0, Pro:0 };
churnedUsers.forEach(u => churnByPlan[u.plan]++);
const lostMrr = churnedUsers.filter(u=>u.plan==='Plus').length*9 + churnedUsers.filter(u=>u.plan==='Pro').length*19;
const churnByCountry = {};
churnedUsers.forEach(u => { churnByCountry[u.country]=(churnByCountry[u.country]||0)+1; });
const topChurnC = Object.entries(churnByCountry).sort((a,b)=>b[1]-a[1]).slice(0,4);
const recentChurned = [...churnedUsers].sort((a,b) => b.lastActive - a.lastActive).slice(0,6);
csvData = { filename:'vm_users_churned.csv', headers:['Name','Email','Plan','Country','Last Active'], rows:churnedUsers.map(u=>[u.name,u.email,u.plan,u.country,aDate(u.lastActive)]) };
title = `${stats.churned} Churned`;
subtitle = `${(stats.churned/stats.total*100).toFixed(0)}% churn rate · ${aMoney(lostMrr)}/mo lost`;
body = (
<>
0?VM.downInk:VM.ink} />
0?VM.downInk:VM.ink} />
{topChurnC.map(([c,v]) => (
{recentChurned.map(u =>
);
}
else if (kpiKey === 'courses') {
const totalEnrolled = users.reduce((s,u) => s+u.enrolled, 0);
const totalLessons = users.reduce((s,u) => s+u.lessons, 0);
csvData = { filename:'vm_courses.csv', headers:['Title','Level'], rows:courses.map(c=>[c.title,c.level||'']) };
title = `${courses.length} Courses`;
subtitle = `${totalEnrolled} enrolments · ${totalLessons} lessons completed`;
body = (
<>
{courses.map((c,i) => (
);
}
return (
);
}
// Same KPI-drill-down modal, sourced from the real roster instead of
// VM_USERS. Only covers KPIs that have a real equivalent (no "churned" key —
// that tile doesn't exist in real mode; "suspended" replaces it).
function RealAdminKpiModal({ kpiKey, stats, realUsers, onClose }) {
const users = realUsers || [];
const StatRow = ({ label, value, sub, bar, barColor, valueColor }) => (
);
const UserRow = ({ u }) => (
{u.plan}
{u.joined ? aRelReal(u.joined) : '—'}
);
let title = '', subtitle = '', body = null, csvData = null;
if (kpiKey === 'total') {
const recentUsers = [...users].sort((a,b) => (b.joined?.getTime()||0) - (a.joined?.getTime()||0)).slice(0,6);
csvData = { filename:'vm_users_total_live.csv', headers:['Name','Email','Plan','Status','Joined'], rows:users.map(u=>[u.name,u.email,u.plan,realUserStatus(u),u.joined?aDate(u.joined):'']) };
title = `${stats.total} Users`;
subtitle = 'Live — Cognito + activity';
body = (
<>
{Object.keys(stats.byPlan).map(p => (
{recentUsers.length ? recentUsers.map(u =>
);
}
else if (kpiKey === 'new') {
const now = Date.now();
const thisWeek = users.filter(u => u.joined && (now - u.joined.getTime()) <= 7 * DAY_MS).sort((a,b) => b.joined - a.joined);
const thisMonth = users.filter(u => u.joined && (now - u.joined.getTime()) <= 30 * DAY_MS).sort((a,b) => b.joined - a.joined);
const peakMonth = Math.max(...stats.months.map(m => m.count), 1);
csvData = { filename:'vm_users_new_live.csv', headers:['Name','Email','Plan','Joined'], rows:thisMonth.map(u=>[u.name,u.email,u.plan,aDate(u.joined)]) };
title = `+${stats.newThisWeek} This Week`;
subtitle = `${stats.newThisMonth} joined in the last 30 days · live`;
body = (
<>
{thisWeek.length > 0 ? thisWeek.map(u =>
0?8:2)}px`, transition:'height .2s' }} />
{m.label}
))}
{c.title}
{c.level && {c.level}}
))}
e.stopPropagation()} style={{ width:'100%', maxWidth:520, maxHeight:'88vh', display:'flex', flexDirection:'column',
background:VM.paper, border:`1px solid ${VM.border}`, borderRadius:18,
boxShadow:'0 20px 60px rgba(31,29,26,0.28)', overflow:'hidden' }}>
{title}
{subtitle}
{csvData && (
)}
{body}
{label}
{bar !== undefined && (
)}
{value}
{sub && {sub}}
);
const Section = ({ title, children }) => (
{title}
{children}
{(u.name || '?')[0].toUpperCase()}
{u.name}
{u.email}
No join-date data yet.
}
No signups in the last 7 days.
}
{stats.months.map((m,i) => (
{thisMonth.slice(thisWeek.length, thisWeek.length + 8).map(u =>
);
}
else if (kpiKey === 'paying') {
const payingUsers = users.filter(u => u.planRaw !== 'free');
const plusActive = users.filter(u => u.plan==='Plus');
const proActive = users.filter(u => u.plan==='Pro');
const plusMrr = plusActive.length * (A_PLAN_PRICE.Plus || 0);
const proMrr = proActive.length * (A_PLAN_PRICE.Pro || 0);
const arpu = payingUsers.length ? (stats.mrr / payingUsers.length).toFixed(2) : 0;
const recentPaying = [...payingUsers].sort((a,b) => (b.joined?.getTime()||0) - (a.joined?.getTime()||0)).slice(0,6);
csvData = { filename:'vm_users_paying_live.csv', headers:['Name','Email','Plan','Joined'], rows:payingUsers.map(u=>[u.name,u.email,u.plan,u.joined?aDate(u.joined):'']) };
title = `${stats.paying} Paying Accounts`;
subtitle = `${stats.total ? (stats.paying/stats.total*100).toFixed(0) : 0}% conversion · ${aMoney(stats.mrr)}/mo est. MRR · live`;
body = (
<>
{recentPaying.length ? recentPaying.map(u =>
);
}
else if (kpiKey === 'mrr') {
const plusActive = users.filter(u => u.plan==='Plus');
const proActive = users.filter(u => u.plan==='Pro');
const plusMrr = plusActive.length * (A_PLAN_PRICE.Plus || 0);
const proMrr = proActive.length * (A_PLAN_PRICE.Pro || 0);
csvData = { filename:'vm_mrr_live.csv', headers:['Plan','Accounts','Price/mo','MRR/mo'], rows:[['Plus',plusActive.length,A_PLAN_PRICE.Plus,plusMrr],['Pro',proActive.length,A_PLAN_PRICE.Pro,proMrr],['Total',plusActive.length+proActive.length,'—',stats.mrr]] };
title = `Est. MRR · ${aMoney(stats.mrr)}`;
subtitle = 'Live plan data';
body = (
<>
{suspendedUsers.length ? suspendedUsers.map(u =>
);
}
else if (kpiKey === 'courses') {
const courses = vmGetCourses();
csvData = { filename:'vm_courses.csv', headers:['Title','Level'], rows:courses.map(c=>[c.title,c.level||'']) };
title = `${courses.length} Courses`;
subtitle = 'Catalogue';
body = (
{courses.map((c,i) => (
);
}
return (
);
}
function AdminChartModal({ chartKey, stats, onClose, real, realUsers }) {
if (real) return
{/* tall bar chart */}
0?8:2)}px`, transition:'height .2s' }} />
{m.label}
))}
None yet.
}
Computed from each account's current plan × list price — not pulled from Stripe, so it won't reflect trials, proration, discounts, or annual billing.
);
}
else if (kpiKey === 'suspended') {
const suspendedUsers = users.filter(u => u.enabled === false);
csvData = { filename:'vm_users_suspended.csv', headers:['Name','Email','Plan'], rows:suspendedUsers.map(u=>[u.name,u.email,u.plan]) };
title = `${stats.suspended} Suspended`;
subtitle = `${stats.total ? (stats.suspended/stats.total*100).toFixed(0) : 0}% of users · live`;
body = (
No suspended accounts.
}
{c.title}
{c.level && {c.level}}
))}
e.stopPropagation()} style={{ width:'100%', maxWidth:520, maxHeight:'88vh', display:'flex', flexDirection:'column',
background:VM.paper, border:`1px solid ${VM.border}`, borderRadius:18,
boxShadow:'0 20px 60px rgba(31,29,26,0.28)', overflow:'hidden' }}>
{title}
{subtitle}
{csvData && (
)}
{body}
{label}
{bar !== undefined && (
)}
{value}{sub && {sub}}
);
const Section = ({ title, children }) => (
{title}
{children}
{stats.months.map((m,i) => (
=0 ? VM.upInk : VM.downInk} />
);
}
else if (chartKey === 'plans') {
const planData = [
{ label:'Free', value:stats.byPlan.Free, color:A_PLAN_COLOR.Free, price:0 },
{ label:'Plus', value:stats.byPlan.Plus, color:A_PLAN_COLOR.Plus, price:A_PLAN_PRICE.Plus },
{ label:'Pro', value:stats.byPlan.Pro, color:A_PLAN_COLOR.Pro, price:A_PLAN_PRICE.Pro },
];
// by status per plan
const planStatus = {};
['Free','Plus','Pro'].forEach(p => {
planStatus[p] = { active:0, trial:0, churned:0 };
users.filter(u=>u.plan===p).forEach(u => planStatus[p][u.status]++);
});
csvData = { filename:'vm_plans.csv', headers:['Plan','Users','%','Active','Trial','Churned'], rows:planData.map(p=>[p.label,p.value,(p.value/stats.total*100).toFixed(0)+'%',planStatus[p.label].active,planStatus[p.label].trial,planStatus[p.label].churned]) };
title = 'Plan Distribution';
subtitle = `${stats.total} users across 3 tiers`;
body = (
<>
{planData.map(p => (
))}
{planData.filter(p=>p.price>0).map(p => {
const activePaying = planStatus[p.label].active + planStatus[p.label].trial;
return
);
}
else if (chartKey === 'countries') {
// all countries from VM_USERS
const byCountry = {};
users.forEach(u => { byCountry[u.country] = (byCountry[u.country]||0)+1; });
const allCountries = Object.entries(byCountry).sort((a,b)=>b[1]-a[1]);
const maxN = allCountries[0]?.[1] || 1;
// plan breakdown for top countries
const topPlanByCountry = {};
allCountries.slice(0,5).forEach(([c]) => {
topPlanByCountry[c] = { Free:0, Plus:0, Pro:0 };
users.filter(u=>u.country===c).forEach(u => topPlanByCountry[c][u.plan]++);
});
csvData = { filename:'vm_countries.csv', headers:['Country','Users','%'], rows:allCountries.map(([c,n])=>[c,n,(n/stats.total*100).toFixed(0)+'%']) };
title = 'Users by Country';
subtitle = `${allCountries.length} countries represented`;
body = (
<>
{allCountries.map(([c,n]) => (
{allCountries.slice(0,5).map(([c,n]) => {
const pm = topPlanByCountry[c];
return (
);
})}
);
}
return (
);
}
// Same chart drill-down, sourced from the real roster. No "countries" case —
// that card doesn't render in real mode (country was never captured).
function RealAdminChartModal({ chartKey, stats, realUsers, onClose }) {
const users = realUsers || [];
const StatRow = ({ label, value, sub, bar, barColor, valueColor }) => (
);
let title = '', subtitle = '', body = null, csvData = null;
if (chartKey === 'signups') {
const total12 = stats.months.reduce((s,m) => s+m.count, 0);
const peak = stats.months.reduce((p,m) => m.count > p.count ? m : p, stats.months[0]);
const slow = stats.months.reduce((p,m) => m.count < p.count ? m : p, stats.months[0]);
const last3 = stats.months.slice(-3).reduce((s,m)=>s+m.count,0);
const prev3 = stats.months.slice(-6,-3).reduce((s,m)=>s+m.count,0);
const growth = prev3 ? (((last3-prev3)/prev3)*100).toFixed(1) : '—';
const maxCount = Math.max(...stats.months.map(m=>m.count), 1);
csvData = { filename:'vm_signups_live.csv', headers:['Month','Signups'], rows:stats.months.map(m=>[m.label,m.count]) };
title = 'Signups · Last 12 Months';
subtitle = `${total12} total · peak in ${peak.label} · live`;
body = (
<>
{m.count}
{/* table */}
{stats.months.map((m,i) => (
0?6:2)}px` }} />
{m.label}
))}
{p.label}
{[['active',VM.upInk],['trial',VM.terra],['churned',VM.downInk]].map(([s,c]) => (
{s[0].toUpperCase()+s.slice(1)}
{planStatus[p.label][s]}
))}
{c}
{n} users
{[['Free',A_PLAN_COLOR.Free],['Plus',A_PLAN_COLOR.Plus],['Pro',A_PLAN_COLOR.Pro]].map(([p,col]) => (
pm[p] > 0 ? : null
))}
{[['Free',A_PLAN_COLOR.Free],['Plus',A_PLAN_COLOR.Plus],['Pro',A_PLAN_COLOR.Pro]].map(([p,col]) => (
{p} {pm[p]}
))}
e.stopPropagation()} style={{ width:'100%', maxWidth:560, maxHeight:'88vh', display:'flex', flexDirection:'column',
background:VM.paper, border:`1px solid ${VM.border}`, borderRadius:18,
boxShadow:'0 20px 60px rgba(31,29,26,0.28)', overflow:'hidden' }}>
{title}
{subtitle}
{csvData && (
)}
{body}
{label}
{bar !== undefined && (
)}
{value}{sub && {sub}}
);
const Section = ({ title, children }) => (
{title}
{children}
{stats.months.map((m,i) => (
=0 ? VM.upInk : VM.downInk} />
);
}
else if (chartKey === 'plans') {
const planLabels = Object.keys(stats.byPlan);
const planData = planLabels.map(l => ({ label:l, value: stats.byPlan[l]||0, color:A_PLAN_COLOR[l]||VM.terra, price: A_PLAN_PRICE[l]||0 }));
csvData = { filename:'vm_plans_live.csv', headers:['Plan','Users','%'], rows:planData.map(p=>[p.label,p.value,stats.total?(p.value/stats.total*100).toFixed(0)+'%':'0%']) };
title = 'Plan Distribution';
subtitle = `${stats.total} users · live`;
body = (
);
}
return (
);
}
function AdminCard({ title, children, dataTour, onOpen }) {
return (
{title}
{onOpen && (
)}
);
}
function AdminBars({ data }) {
const max = Math.max(...data.map(d => d.count), 1);
return (
{rows.length} of {source.length} users{real ? ' · live (Cognito + activity)' : realLoading ? ' · loading live data…' : ' · mock (live data unavailable)'}
setPendingAction({ type, user: u })} onToast={showToast} />
))}
{visible.length === 0 && (
{rows.length > visible.length && (
setShown(s => s + 40)}>Show more
)}
{detail && setDetail(null)} onAccess={access}
onAction={(type) => setPendingAction({ type, user: detail })} onToast={showToast} />}
{pendingAction && setPendingAction(null)} onDone={actionDone} onToast={showToast} />}
{toast &&
);
}
// One user row + its ⋮ actions menu (rendered fixed-position so it isn't
// clipped). Real rows' mutating actions (suspend/reactivate/delete/change
// plan) route through `onAction` → AdminActionModal for confirmation before
// anything actually happens — none of them fire directly from this menu.
function UserRow({ u, real, last, onView, onAccess, onAction, onToast }) {
const [open, setOpen] = useStateAdmin(false);
const [pos, setPos] = useStateAdmin({ top: 0, left: 0 });
const btnRef = React.useRef(null);
const openMenu = () => {
const r = btnRef.current.getBoundingClientRect();
setPos({ top: r.bottom + 5, left: Math.max(8, r.right - 210) });
setOpen(true);
};
const act = (fn) => { setOpen(false); fn(); };
const statusMap = real ? A_STATUS_REAL : A_STATUS;
const statusKey = real ? realUserStatus(u) : u.status;
const st = statusMap[statusKey];
const sendReset = async () => {
try { await vmForgotPassword(u.email); onToast('Password reset email sent to ' + u.email + '.'); }
catch (e) { onToast(e.message || 'Could not send reset email.'); }
};
return (
{u.email}
{u.plan}
{u.joined ? aDate(u.joined) : '—'}
{u.lastActive ? (real ? aRelReal(u.lastActive) : aRel(u.lastActive)) : 'never'}
{open && (
)}
);
}
function MenuItem({ icon, label, onClick, danger, tint }) {
const [hover, setHover] = useStateAdmin(false);
const color = danger ? VM.downInk : (tint || VM.ink2);
return (
);
}
function AdminToast({ text }) {
return (
);
}
// ── mock fallback ──
const isBeta = !real && u.role === 'beta';
const p = vmUserProfits(u);
const detail = [
['User ID', '#' + u.id],
['Plan', u.plan],
['Status', A_STATUS[u.status] ? A_STATUS[u.status].label : u.status],
['Role', isBeta ? 'Beta tester' : 'Standard'],
['Joined', aDate(u.joined)],
['Last active', aRelNow(u.lastActive)],
...(isBeta ? [['Invite token', u.inviteToken || '—']] : [['Country', u.country]]),
];
const handleDelete = () => {
if (!isBeta) { onToast('Deleted ' + u.name + ' (mock).'); return; }
if (!window.loadBetaUsers || !window.saveBetaUsers) return;
const all = window.loadBetaUsers().filter(b => b.id !== u.id);
window.saveBetaUsers(all);
onToast(u.name + ' removed from beta.');
onClose();
};
return (
);
}
// Confirmation for every real, mutating admin action (suspend/reactivate/
// delete/change plan) — nothing in UserRow or UserDetailModal calls
// vmAdminAction directly; it all routes through here first. Delete requires
// typing DELETE (matches the account's own self-delete flow); suspend/delete
// get a plain-language warning either way.
function AdminActionModal({ pending, onClose, onDone, onToast }) {
const { type, user } = pending;
const [busy, setBusy] = useStateAdmin(false);
const [confirmText, setConfirmText] = useStateAdmin('');
const [plan, setPlan] = useStateAdmin(user.planRaw || 'free');
const needsTypedConfirm = type === 'delete';
const ready = !needsTypedConfirm || confirmText.trim().toUpperCase() === 'DELETE';
const COPY = {
suspend: { title: 'Suspend this account?', body: `${user.name} won't be able to sign in until reactivated. No data is deleted.`, actionLabel: 'Suspend', danger: true },
reactivate: { title: 'Reactivate this account?', body: `${user.name} will be able to sign in again immediately.`, actionLabel: 'Reactivate', danger: false },
delete: { title: 'Permanently delete this account?', body: `This deletes ${user.name}'s real Cognito account. This cannot be undone.`, actionLabel: 'Delete account', danger: true },
plan: { title: 'Change plan', body: `Sets the plan Veridian shows ${user.name}. This does NOT touch Stripe — no subscription is created, changed, or charged; it's an app-side override (e.g. for comps or support).`, actionLabel: 'Save plan', danger: false },
}[type];
const run = async () => {
if (busy || !ready) return;
setBusy(true);
const action = type === 'plan' ? 'setPlan' : type;
const r = await vmAdminAction(action, user.id, type === 'plan' ? { plan } : {});
setBusy(false);
if (r.ok) onDone(COPY.actionLabel + ' — done.');
else onToast(r.error || 'Could not complete that action.');
};
return ReactDOM.createPortal(
,
document.body
);
}
// ── Courses ─────────────────────────────────────────────────────────────────
function CoursesTab({ go, isMobile }) {
const [courses, setCourses] = useStateAdmin(() => vmGetCourses());
const refresh = () => setCourses(vmGetCourses());
const cats = LEARN_CATS.filter(c => c.id !== 'all');
const tags = ['', 'New', 'Most read', 'Popular', 'Start here', 'Advanced', 'App tutorial'];
const blank = { title: '', cat: cats[0].id, provider: 'Veridian Academy', level: LEARN_LEVELS[0], format: LEARN_FORMATS[0], length: '', tag: '' };
const [form, setForm] = useStateAdmin(blank);
const [done, setDone] = useStateAdmin('');
const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
const submit = (e) => {
e.preventDefault();
if (!form.title.trim()) return;
vmAddCourse({ ...form, length: form.length.trim() || '—', tag: form.tag || null });
setForm(blank); refresh();
setDone('“' + form.title.trim() + '” added — it’s live on the Learn page.');
setTimeout(() => setDone(''), 4000);
};
const remove = (id) => { vmDeleteCourse(id); refresh(); };
return (
{done &&
);
}
function Field({ label, full, children }) {
return ;
}
const inputStyle = { width: '100%', boxSizing: 'border-box', fontFamily: VM.serif, fontSize: 14, color: VM.ink, padding: '9px 11px', borderRadius: 8, border: `1px solid ${VM.border}`, background: VM.paperWarm, outline: 'none' };
// ── Media tab ─────────────────────────────────────────────────────────────────
const MEDIA_VIDEO_KEY = 'vm_founder_video_url';
function MediaTab({ isMobile }) {
const { useState: useStateMedia } = React;
const [videoUrl, setVideoUrl] = useStateMedia(
() => window.VM_FOUNDER_VIDEO_URL || localStorage.getItem(MEDIA_VIDEO_KEY) || ''
);
const [uploading, setUploading] = useStateMedia(false);
const [uploadMsg, setUploadMsg] = useStateMedia('');
const [uploadOk, setUploadOk] = useStateMedia(false);
const handleFileUpload = async (e) => {
const file = e.target.files && e.target.files[0];
if (!file) return;
const endpoint = window.VM_MEDIA_UPLOAD_URL;
if (!endpoint) {
setUploadMsg('VM_MEDIA_UPLOAD_URL is not set in index.html. Add it and reload.');
return;
}
setUploading(true); setUploadMsg(''); setUploadOk(false);
try {
const headers = window.VM_ADMIN_KEY ? { 'X-VM-Admin-Key': window.VM_ADMIN_KEY } : {};
const res = await fetch(`${endpoint}?filename=${encodeURIComponent(file.name)}&type=${encodeURIComponent(file.type)}`, { headers });
const { uploadUrl: presigned, publicUrl } = await res.json();
await fetch(presigned, { method: 'PUT', body: file, headers: { 'Content-Type': file.type } });
localStorage.setItem(MEDIA_VIDEO_KEY, publicUrl);
window.VM_FOUNDER_VIDEO_URL = publicUrl;
setVideoUrl(publicUrl);
setUploadOk(true);
setUploadMsg('Upload complete. This video will now play for new beta sign-ups.');
} catch (err) {
setUploadMsg('Upload failed: ' + (err.message || 'unknown error'));
}
setUploading(false);
};
return (
)}
{/* Upload button */}
{uploadMsg && (
);
}
// Module-level section header used by BetaTab (top-level, so Section defined
// inside other components is out of scope here).
function BetaSection({ label, icon, children, style }) {
return (
);
}
// ── Beta tab ───────────────────────────────────────────────────────────────────
function BetaTab({ isMobile }) {
const { useState: useStateBeta, useEffect: useEffectBeta } = React;
const [invites, setInvites] = useStateBeta([]);
const [users, setUsers] = useStateBeta([]);
const [feedback, setFeedback] = useStateBeta([]);
const [copied, setCopied] = useStateBeta('');
const [fbExpanded, setFbExp] = useStateBeta(null);
const reload = () => {
setInvites(window.loadBetaInvites ? window.loadBetaInvites() : []);
setUsers( window.loadBetaUsers ? window.loadBetaUsers() : []);
setFeedback(window.loadFeedback ? window.loadFeedback() : []);
};
useEffectBeta(reload, []);
const generateLink = () => {
const token = window.generateInviteToken ? window.generateInviteToken() : Math.random().toString(36).slice(2, 14);
const inv = { token, createdAt: Date.now(), usedAt: null, usedBy: null };
const all = window.loadBetaInvites ? window.loadBetaInvites() : [];
all.push(inv);
if (window.saveBetaInvites) window.saveBetaInvites(all);
setInvites([...all]);
};
const copyLink = (token) => {
const url = `${location.origin}/invite/${token}`;
navigator.clipboard.writeText(url).then(() => { setCopied(token); setTimeout(() => setCopied(''), 2000); });
};
const mono = { fontFamily: VM.mono, fontSize: 11, color: VM.ink3 };
const badge = (txt, color) => (
{txt}
);
return (
{foot} }
);
}
// Compact responsive line chart (markers + value labels).
function AnLine({ data, height = 130, color = VM.forest, prefix = '', suffix = '', area = true }) {
const max = Math.max(...data.map(d => d.v), 1);
const n = data.length, W = Math.max(280, n * 56), H = height, pad = 26, base = H - 22;
const x = i => pad + i * ((W - 2 * pad) / Math.max(n - 1, 1));
const y = v => base - (v / max) * (base - 16);
const line = data.map((d, i) => `${i ? 'L' : 'M'}${x(i).toFixed(1)},${y(d.v).toFixed(1)}`).join(' ');
const fill = `${line} L${x(n - 1).toFixed(1)},${base} L${x(0).toFixed(1)},${base} Z`;
return (
);
}
// ── Tool 1: Cohort retention ─────────────────────────────────────────────────
function AnRetention({ isMobile }) {
const { rows, curve } = React.useMemo(() => {
const buckets = {};
VM_USERS.forEach(u => { const k = u.joined.getFullYear() * 12 + u.joined.getMonth(); (buckets[k] = buckets[k] || []).push(u); });
const nowKey = VM_NOW.getFullYear() * 12 + VM_NOW.getMonth();
const span = 7; // last 8 monthly cohorts
const rows = [];
for (let k = nowKey - span; k <= nowKey; k++) {
const us = buckets[k] || [];
const age = nowKey - k;
// retention at month-offset t = % of the cohort whose activity tenure ≥ t.
const ret = [];
for (let t = 0; t <= age; t++) ret.push(us.length ? Math.round(us.filter(u => anMonths(u.joined, u.lastActive) >= t).length / us.length * 100) : null);
const d = new Date(VM_NOW.getFullYear(), VM_NOW.getMonth() - age, 1);
rows.push({ label: d.toLocaleString('en-US', { month:'short', year:'2-digit' }), size: us.length, ret });
}
// average curve across cohorts per offset
const curve = [];
for (let t = 0; t <= span; t++) {
const vals = rows.map(r => r.ret[t]).filter(v => v != null);
if (vals.length) curve.push({ label:'M' + t, v: Math.round(vals.reduce((s, v) => s + v, 0) / vals.length) });
}
return { rows, curve };
}, []);
const offsets = rows[rows.length - 1].ret.length;
return (
{r.label}
{r.size}
{Array.from({ length: offsets }).map((_, t) => {
const v = r.ret[t];
return (
))}
);
}
// ── Tool 2: Conversion funnel ────────────────────────────────────────────────
function AnFunnel({ isMobile }) {
const steps = React.useMemo(() => {
const signups = VM_USERS.length;
const activated = VM_USERS.filter(u => u.lessons >= 1).length;
const paying = VM_USERS.filter(u => u.plan !== 'Free' && u.status !== 'churned').length;
const retained = VM_USERS.filter(u => u.status === 'active').length;
const visitors = Math.round(signups / 0.082); // ~8.2% visitor→signup
return [
{ label:'Visitors', value:visitors, note:'unique site visitors' },
{ label:'Sign-ups', value:signups, note:'created an account' },
{ label:'Activated', value:activated, note:'completed ≥1 lesson' },
{ label:'Paying', value:paying, note:'on Plus or Pro' },
{ label:'Retained', value:retained, note:'still active today' },
];
}, []);
const top = steps[0].value;
return (
);
}
// ── Tool 3: Revenue / MRR movement ───────────────────────────────────────────
function AnRevenue({ stats, isMobile }) {
const m = React.useMemo(() => {
const paying = VM_USERS.filter(u => u.plan !== 'Free' && u.status !== 'churned');
const mrr = paying.reduce((s, u) => s + A_PLAN_PRICE[u.plan], 0);
const arppu = paying.length ? mrr / paying.length : 0;
const arpu = mrr / VM_USERS.length;
const monthlyChurn = (stats.churned / stats.total) / 9; // ~tenure-adjusted proxy
const ltv = arppu / Math.max(monthlyChurn, 0.001);
const cac = 42; // mock blended CAC
// This-month movement.
const newMrr = VM_USERS.filter(u => u.plan !== 'Free' && u.status !== 'churned' && anWithin(u.joined, 30)).reduce((s, u) => s + A_PLAN_PRICE[u.plan], 0);
const churnMrr = VM_USERS.filter(u => u.plan !== 'Free' && u.status === 'churned' && anWithin(u.lastActive, 60)).reduce((s, u) => s + A_PLAN_PRICE[u.plan], 0);
const expansion = Math.round(mrr * 0.035), contraction = Math.round(mrr * 0.018);
const start = mrr - newMrr - expansion + contraction + churnMrr;
// Net / Gross revenue retention from the existing base (excludes new MRR).
const nrr = start ? Math.round((start + expansion - contraction - churnMrr) / start * 100) : 0;
const grr = start ? Math.round((start - contraction - churnMrr) / start * 100) : 0;
// 12-month MRR trend (paying, not-yet-churned, joined on/before each month).
const trend = [];
for (let k = 11; k >= 0; k--) {
const end = new Date(VM_NOW.getFullYear(), VM_NOW.getMonth() - k + 1, 0, 23, 59, 59);
const v = VM_USERS.filter(u => u.plan !== 'Free' && u.joined <= end && (u.status !== 'churned' || u.lastActive > end)).reduce((s, u) => s + A_PLAN_PRICE[u.plan], 0);
trend.push({ label: end.toLocaleString('en-US', { month:'short' }), v });
}
return { mrr, arppu, arpu, ltv, cac, newMrr, churnMrr, expansion, contraction, start, nrr, grr, trend };
}, [stats]);
const wf = [
{ label:'Start', v:m.start, type:'base' },
{ label:'+ New', v:m.newMrr, type:'pos' },
{ label:'+ Expan', v:m.expansion, type:'pos' },
{ label:'− Contr', v:m.contraction, type:'neg' },
{ label:'− Churn', v:m.churnMrr, type:'neg' },
{ label:'End', v:m.mrr, type:'total' },
];
// floating-bar geometry
let run = 0; const bars = wf.map(s => {
if (s.type === 'base' || s.type === 'total') { run = s.v; return { ...s, lo:0, hi:s.v }; }
if (s.type === 'pos') { const lo = run; run += s.v; return { ...s, lo, hi:run }; }
const hi = run; run -= s.v; return { ...s, lo:run, hi };
});
const peak = Math.max(...bars.map(b => b.hi), 1);
return (
= 3 ? 'up' : 'down'} />
= 100 ? 'up' : 'down'} />
Illustrative quarter-over-quarter plan transitions.
);
}
// ── Tool 4: Engagement ───────────────────────────────────────────────────────
const AN_PAGES = [
{ name:'Home', v:4120 }, { name:'Search', v:3380 },
{ name:'Company dashboard', v:2960 }, { name:'Dependency map', v:2210 },
{ name:'Calendar', v:1740 }, { name:'My Portfolio', v:1520 },
{ name:'Learn', v:1180 }, { name:'News', v:980 },
{ name:'My Business', v:640 },
];
function AnEngagement({ isMobile }) {
const e = React.useMemo(() => {
const dau = VM_USERS.filter(u => anWithin(u.lastActive, 1)).length;
const wau = VM_USERS.filter(u => anWithin(u.lastActive, 7)).length;
const mau = VM_USERS.filter(u => anWithin(u.lastActive, 30)).length;
return { dau, wau, mau, stickiness: mau ? Math.round(dau / mau * 100) : 0 };
}, []);
// Engagement depth — days active in the last 28 (Facebook's L28). Synthesised
// per user (we only snapshot lastActive) but stable + status-weighted.
const depth = React.useMemo(() => {
const buckets = [{ label:'1–3', min:1, max:3, n:0 }, { label:'4–7', min:4, max:7, n:0 }, { label:'8–14', min:8, max:14, n:0 }, { label:'15–21', min:15, max:21, n:0 }, { label:'22–28', min:22, max:28, n:0 }];
let core = 0, any = 0;
VM_USERS.forEach(u => {
if (!anWithin(u.lastActive, 28)) return;
const rnd = vmRng(u.id * 97 + 3);
let d = u.status === 'active' ? 8 + Math.floor(rnd() * 21) : u.status === 'trial' ? 2 + Math.floor(rnd() * 10) : 1 + Math.floor(rnd() * 5);
d = Math.min(28, d); any++; if (d >= 15) core++;
const b = buckets.find(b => d >= b.min && d <= b.max); if (b) b.n++;
});
return { buckets, corePct: any ? Math.round(core / any * 100) : 0, any };
}, []);
const maxV = AN_PAGES[0].v;
const maxB = Math.max(...depth.buckets.map(b => b.n), 1);
return (
= 20 ? 'up' : undefined} />
{depth.corePct}% of active users are core (15+ days/28) — your power users.
Illustrative — for real per-page interaction data, see the Heatmap sub-tab.
);
}
// Illustrative quarter-over-quarter plan transitions (used by Revenue).
const AN_PLAN_MOVE = [
{ plan:'Free', dist:[['Stayed', 88, VM.faint], ['Upgrade', 8, VM.forest], ['Churned', 4, VM.down]] },
{ plan:'Plus', dist:[['Stayed', 79, VM.faint], ['Upgrade', 9, VM.forest], ['Downgrade', 5, VM.teal], ['Churned', 7, VM.down]] },
{ plan:'Pro', dist:[['Stayed', 86, VM.faint], ['Downgrade', 6, VM.teal], ['Churned', 8, VM.down]] },
];
// ── Tool 5: Growth accounting ────────────────────────────────────────────────
// MAU change decomposed into New + Resurrected + Retained − Churned, plus the
// growth Quick Ratio = (new + resurrected) / churned (>1 = growing). Per-user
// monthly activity is synthesised (with gaps, so resurrection appears) from the
// snapshot — deterministic via the seeded RNG.
function AnGrowth({ isMobile }) {
const data = React.useMemo(() => {
const nowKey = anMKey(VM_NOW), startKey = nowKey - 11;
const active = {}; for (let k = startKey; k <= nowKey; k++) active[k] = new Set();
const joinedKey = {};
VM_USERS.forEach(u => {
joinedKey[u.id] = anMKey(u.joined);
const rnd = vmRng(u.id * 1313 + 7);
const from = Math.max(joinedKey[u.id], startKey), to = Math.min(anMKey(u.lastActive), nowKey);
for (let k = from; k <= to; k++) { if (k === joinedKey[u.id] || rnd() < 0.8) active[k].add(u.id); }
});
const rows = [];
for (let k = startKey + 1; k <= nowKey; k++) {
const cur = active[k], prev = active[k - 1];
let nu = 0, res = 0, ret = 0, ch = 0;
cur.forEach(id => { if (joinedKey[id] === k) nu++; else if (prev.has(id)) ret++; else res++; });
prev.forEach(id => { if (!cur.has(id)) ch++; });
const d = new Date(VM_NOW.getFullYear(), VM_NOW.getMonth() - (nowKey - k), 1);
rows.push({ label: d.toLocaleString('en-US', { month:'short' }), mau: cur.size, nu, res, ret, ch, net: nu + res - ch, qr: ch ? (nu + res) / ch : (nu + res) });
}
return rows.slice(-8);
}, []);
const latest = data[data.length - 1];
const maxPos = Math.max(...data.map(r => r.ret + r.nu + r.res), 1);
const maxNeg = Math.max(...data.map(r => r.ch), 1);
const POS = 132, NEG = 48;
const px = v => Math.round(v / maxPos * POS);
return (
= 1 ? 'up' : 'down'} />
= 0 ? '+' : ''}${latest.net}`} foot="this month" tone={latest.net >= 0 ? 'up' : 'down'} />
);
}
// ── Tool 6: Churn risk ───────────────────────────────────────────────────────
// Ranks paying (Plus/Pro) accounts by a churn-risk score so the operator gets a
// "save list" before they actually churn. Score blends recency, trial status and
// low product usage.
function AnRisk({ isMobile }) {
const list = React.useMemo(() => {
return VM_USERS.filter(u => u.plan !== 'Free' && u.status !== 'churned').map(u => {
const recency = Math.round((VM_NOW - u.lastActive) / DAY_MS);
let score = recency * 4 + (u.status === 'trial' ? 34 : 0) + Math.max(0, 18 - u.lessons) * 2.2;
if (anWithin(u.joined, 30) && u.lessons < 4) score += 14;
score = Math.max(0, Math.min(100, Math.round(score)));
const reasons = [];
if (recency > 7) reasons.push(`${recency}d idle`);
if (u.status === 'trial') reasons.push('trial ending');
if (u.lessons < 6) reasons.push('low usage');
if (!reasons.length) reasons.push('engagement dipping');
return { u, score, recency, mrr: A_PLAN_PRICE[u.plan], reason: reasons.slice(0, 2).join(' · ') };
}).sort((a, b) => b.score - a.score);
}, []);
const high = list.filter(r => r.score >= 60), med = list.filter(r => r.score >= 35 && r.score < 60);
const mrrAtRisk = high.reduce((s, r) => s + r.mrr, 0);
const top = list.slice(0, 14);
const tier = (s) => s >= 60 ? { l:'High', c:VM.downInk, bg:'rgba(163,45,45,0.10)' } : s >= 35 ? { l:'Med', c:VM.terra, bg:'rgba(196,106,59,0.12)' } : { l:'Low', c:VM.ink3, bg:VM.paperWarm };
const cols = '1.6fr 0.6fr 0.7fr 0.8fr 1.4fr';
return (
{r.u.country}
{r.u.plan}
{r.score}
{aRel(r.u.lastActive)}
{r.reason}
);
})}
);
}
// ── Team ────────────────────────────────────────────────────────────────────
// Per-employee admin permissions. Backed by three real Cognito groups
// (admin-suspend / admin-delete / admin-billing) enforced server-side in
// vm-admin-actions — this UI is just a client for that, not the authority.
// An admin who's never been touched here shows as "Full admin" (today's
// default, unrestricted); ticking any box for them switches them to exactly
// what's ticked. See the Lambda's SAFE ROLLOUT RULE comment for why.
// Two sections: which Admin tabs an employee even sees (Users has no group —
// it's the floor everyone gets; Team never shows to non-full-admins), and
// which mutating actions they can take inside Users. Same six groups the
// Lambda's PERMISSION_GROUPS knows about — keep these two lists in sync.
const TEAM_SECTIONS = [
{ title: 'Tabs', perms: [
{ group: 'admin-view-overview', label: 'Overview' },
{ group: 'admin-view-analytics', label: 'Analytics' },
{ group: 'admin-view-courses', label: 'Courses' },
] },
{ title: 'Actions', perms: [
{ group: 'admin-suspend', label: 'Suspend / reactivate' },
{ group: 'admin-delete', label: 'Delete' },
{ group: 'admin-billing', label: 'Change plan' },
] },
];
const TEAM_PERMS = TEAM_SECTIONS.flatMap(s => s.perms);
const TEAM_GRID_COLS = `1.5fr repeat(${TEAM_PERMS.length}, 0.85fr)`;
function useAdminTeam() {
const [state, setState] = useStateAdmin({ team: null, loading: true, error: null });
const load = React.useCallback(() => {
setState(s => ({ ...s, loading: true, error: null }));
vmAdminAction('listTeam').then(r => {
setState({ team: r.ok ? r.team : null, loading: false, error: r.ok ? null : r.error });
});
}, []);
React.useEffect(() => { load(); }, [load]);
return { ...state, refresh: load };
}
function TeamTab({ user, isMobile }) {
const { team, loading, error, refresh } = useAdminTeam();
const [busy, setBusy] = useStateAdmin(null); // `${sub}:${group}` currently saving
const [toggleError, setToggleError] = useStateAdmin('');
async function toggle(member, group, grant) {
const key = `${member.sub}:${group}`;
setBusy(key); setToggleError('');
const r = await vmAdminAction('setPermissions', member.sub, { group, grant });
setBusy(null);
if (r.ok) refresh();
else setToggleError(r.error || 'Could not update permissions.');
}
return (
Loading team… }
{toggleError && (
{m.email}
{!m.migrated && (
{TEAM_PERMS.map(p => {
const checked = m.migrated ? m.permissions.includes(p.group) : true;
const key = `${m.sub}:${p.group}`;
return (
);
})}
);
})}
{!team.length && (
)}
);
}
Object.assign(window, { AdminPanel });
{m.count}
{stats.months.map((m,i) => (
0?6:2)}px` }} />
{m.label}
))}
e.stopPropagation()} style={{ width:'100%', maxWidth:560, maxHeight:'88vh', display:'flex', flexDirection:'column',
background:VM.paper, border:`1px solid ${VM.border}`, borderRadius:18,
boxShadow:'0 20px 60px rgba(31,29,26,0.28)', overflow:'hidden' }}>
{title}
{subtitle}
{csvData && (
)}
{body}
{children}
{data.map((d, i) => (
{d.count}
{d.label}
))}
);
}
function AdminDonut({ data, size = 140, thickness = 19, center, centerLabel }) {
const r = (size - thickness) / 2, c = 2 * Math.PI * r, total = data.reduce((s, d) => s + d.value, 0) || 1;
let acc = 0;
return (
);
}
// ── Users ───────────────────────────────────────────────────────────────────
const A_USER_COLS = '1.7fr 0.6fr 0.8fr 0.9fr 0.7fr 34px';
function UsersTab({ onAccess, isMobile }) {
const { users: realUsers, loading: realLoading, refresh: refreshRealUsers } = useRealAdminUsers();
const real = !!realUsers;
const source = real ? realUsers : VM_USERS;
const statusMap = real ? A_STATUS_REAL : A_STATUS;
const statusFilters = real ? ['all', 'active', 'inactive', 'unconfirmed', 'suspended'] : ['all', 'active', 'trial', 'churned'];
const statusOf = (u) => real ? realUserStatus(u) : u.status;
const [q, setQ] = useStateAdmin('');
const [status, setStatus] = useStateAdmin('all');
const [shown, setShown] = useStateAdmin(40);
const [detail, setDetail] = useStateAdmin(null);
const [pendingAction, setPendingAction] = useStateAdmin(null);
const [toast, setToast] = useStateAdmin('');
const showToast = (m) => { setToast(m); setTimeout(() => setToast(''), 3000); };
const access = (u) => { setDetail(null); onAccess(u); };
const actionDone = (msg) => { setPendingAction(null); setDetail(null); if (real) refreshRealUsers(); showToast(msg); };
const term = q.trim().toLowerCase();
const rows = source.filter(u => {
if (status !== 'all' && statusOf(u) !== status) return false;
if (term && !(u.name.toLowerCase().includes(term) || u.email.toLowerCase().includes(term))) return false;
return true;
});
const visible = rows.slice(0, shown);
return (
{ setQ(e.target.value); setShown(40); }} placeholder="Search name or email…"
style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontFamily: VM.serif, fontSize: 14, color: VM.ink }} />
{statusFilters.map(s => (
{ setStatus(s); setShown(40); }}>{s === 'all' ? 'All' : statusMap[s].label}
))}
{['User', 'Plan', 'Status', 'Joined', 'Active', ''].map((h, i) => )}
{visible.map((u, i) => (
{(users||[]).length === 0 ? 'No beta users have signed up yet.' : 'No users match.'}
)}
{u.name}
{st.label}
setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 70 }}>
{text}
);
}
function useAdminUserActivity(sub, enabled) {
const [state, setState] = useStateAdmin({ events: null, loading: !!enabled });
React.useEffect(() => {
if (!enabled || !sub) { setState({ events: null, loading: false }); return; }
let alive = true;
setState(s => ({ ...s, loading: true }));
vmAdminAnalytics('user', sub).then(d => { if (alive) setState({ events: (d && d.events) || [], loading: false }); });
return () => { alive = false; };
}, [sub, enabled]);
return state;
}
// Full account details + admin actions. Real users get a real recent-activity
// timeline instead of the mock's fabricated "Personal profits".
function UserDetailModal({ u, real, onClose, onAccess, onAction, onToast }) {
const initials = u.name.split(' ').map(s => s[0]).join('').slice(0, 2).toUpperCase();
const activity = useAdminUserActivity(u.id, real); // always called (rules of hooks); no-op when !real
if (real) {
const st = A_STATUS_REAL[realUserStatus(u)];
const detail = [
['User ID', u.id], ['Plan', u.plan], ['Status', st.label],
['Joined', u.joined ? aDate(u.joined) : '—'],
['Last active', u.lastActive ? aRelReal(u.lastActive) : 'never'],
['Events captured', u.eventCount.toLocaleString('en-US')],
];
return (
e.stopPropagation()} style={{ width: '100%', maxWidth: 560, maxHeight: '88vh', overflowY: 'auto', background: VM.paper, border: `1px solid ${VM.border}`, borderRadius: 16, boxShadow: '0 24px 60px rgba(31,29,26,0.3)' }}>
Favourited
)}
onAccess(u)}>Access account
{ try { await vmForgotPassword(u.email); onToast('Password reset email sent.'); } catch (e) { onToast(e.message || 'Could not send reset email.'); } }}>
Send password reset
onAction('plan')}>Change plan
onAction(realUserStatus(u) === 'suspended' ? 'reactivate' : 'suspend')} style={{ color: VM.downInk, borderColor: VM.downInk }}>
{realUserStatus(u) === 'suspended' ? 'Reactivate' : 'Suspend'}
onAction('delete')} style={{ color: VM.downInk, borderColor: VM.downInk, marginLeft: 'auto' }}>
Delete
{initials}
{u.email}
{u.name}
{detail.map(([k, v]) => (
{k}
))}
{u.favourites.length > 0 && (
{v}
{u.favourites.map(t => {t})}
{activity.loading && Loading… }
{!activity.loading && activity.events && activity.events.length === 0 && No events captured yet. }
{!activity.loading && activity.events && activity.events.slice(0, 12).map((e, i, a) => (
{e.type}{e.props && e.props.ticker ? ` · ${e.props.ticker}` : ''}{e.page ? ` · ${e.page}` : ''}
{aRelReal(new Date(e.ts))}
))}
e.stopPropagation()} style={{ width: '100%', maxWidth: 500, maxHeight: '88vh', overflowY: 'auto', background: VM.paper, border: `1px solid ${VM.border}`, borderRadius: 16, boxShadow: '0 24px 60px rgba(31,29,26,0.3)' }}>
onAccess(u)}>Access account
onToast('Password reset sent (coming soon).')}>Reset password
Remove
{initials}
{u.email}
{u.name}
{detail.map(([k, v]) => (
{k}
))}
{v}
e.stopPropagation()} style={{ width: '100%', maxWidth: 420, background: VM.paper, borderRadius: 14, boxShadow: '0 24px 60px rgba(31,29,26,0.3)', padding: 22 }}>
Type DELETE to confirm
setConfirmText(e.target.value)} placeholder="DELETE"
style={{ width: '100%', boxSizing: 'border-box', fontFamily: VM.mono, fontSize: 14, padding: '9px 12px', borderRadius: 8,
border: `1.5px solid ${ready ? VM.downInk : VM.border}`, background: VM.paper, color: VM.ink, outline: 'none' }} />
)}
{COPY.title}
{COPY.body}
{type === 'plan' && (
{['free', 'plus', 'pro', 'business'].map(p => (
))}
)}
{needsTypedConfirm && (
{done}
go('learn')} style={{ color: VM.teal, cursor: 'pointer', marginLeft: 4 }}>View on Learn →
}
{courses.map((c, i) => {
const cat = LEARN_CATS.find(x => x.id === c.cat);
const t = catTint(c.cat);
return (
{cat ? cat.label : c.cat} · {c.level} · {c.format} · {c.length}
{c.added
?
: SEED}
);
})}
{c.title}
{c.added && ADDED}
Media
Upload the founder video shown to new beta users during onboarding.
{/* Current video preview */}
{videoUrl && (
Current founder video · re-upload below to replace
{uploadMsg}
)}
Supported formats: MP4, MOV, WebM · Uploads directly to S3 via AWS Lambda.
The video persists across reloads — no redeployment needed.
The video persists across reloads — no redeployment needed.
{icon && }
{children}
{label}
{/* Header */}
{/* Invite links */}
{invites.length === 0 && (
);
})}
{/* Beta users */}
{users.length === 0 && (
{/* Feedback */}
{feedback.length === 0 && (
))}
);
}
// ── Analytics ─────────────────────────────────────────────────────────────────
// Operator-facing business analytics derived (deterministically) from the mock
// VM_USERS dataset: cohort retention, conversion funnel, revenue/MRR movement and
// engagement. The Heatmap (real DynamoDB-backed) lives on as a sub-view here.
const AN_TOOLS = [
{ id:'retention', label:'Retention', icon:'chart-dots' },
{ id:'growth', label:'Growth', icon:'chart-arrows-vertical' },
{ id:'funnel', label:'Funnel', icon:'filter' },
{ id:'revenue', label:'Revenue', icon:'cash' },
{ id:'engagement', label:'Engagement', icon:'activity' },
{ id:'risk', label:'Churn risk', icon:'alert-triangle' },
{ id:'heatmap', label:'Heatmap', icon:'flame' },
];
const anMonths = (a, b) => Math.max(0, (b.getFullYear() - a.getFullYear()) * 12 + (b.getMonth() - a.getMonth()));
const anMKey = (d) => d.getFullYear() * 12 + d.getMonth();
const anWithin = (d, days) => (VM_NOW - d) <= days * DAY_MS;
// teal→forest wash for retention cells, by percentage.
const anHeat = (pct) => pct == null ? VM.paperWarm : `rgba(29,78,58,${(pct / 100) * 0.82 + 0.05})`;
function AnalyticsTab({ stats, isMobile }) {
const [tool, setTool] = useStateAdmin('retention');
return (
Beta programme
{users.length} beta users · {invites.filter(i => !i.usedAt).length} unused invites · {feedback.length} feedback items
No invites yet — click Generate to create one.
)}
{[...invites].reverse().map(inv => {
const url = `${location.origin}/invite/${inv.token}`;
return (
{url}
{inv.usedAt ? badge('Used', VM.ink3) : badge('Available', VM.teal)}
{inv.usedBy && {inv.usedBy}}
{!inv.usedAt && (
)}
No beta users yet.
)}
| {h} | ))}||||
|---|---|---|---|---|
| {u.name} | {u.email} | {badge('Pro', VM.teal)} | {new Date(u.joined).toLocaleDateString()} | {u.inviteToken} |
No feedback yet.
)}
{[...feedback].reverse().map(fb => (
{fb.userName}
{fb.userEmail}
·
{fb.route}
·
{new Date(fb.ts).toLocaleString()}
{badge(`${fb.items?.length || 1} suggestion${(fb.items?.length || 1) > 1 ? 's' : ''}`, VM.terra)}
{fbExpanded === fb.id && (fb.items || []).map((item, i) => (
{item.screenshot && (
)}
))}
Suggestion {i+1}
{item.comment || No comment left.}
{AN_TOOLS.map(t => {
const on = tool === t.id;
return (
);
})}
{tool === 'retention' && {value}
{foot && Of the users who joined in a given month, how many were still active N months later. Read each row left→right; healthy products flatten rather than fall to zero.
{Array.from({ length: offsets }).map((_, t) => )}
{rows.map((r, i) => (
{v != null && = 55 ? VM.paperWarm : VM.ink2 }}>{v}}
);
})}
Where prospects drop off on the path from first visit to a retained, paying user. The biggest fall-off is where to focus.
{steps.map((s, i) => {
const stepConv = i === 0 ? 100 : (s.value / steps[i - 1].value) * 100;
const overall = (s.value / top) * 100;
return (
{overall.toFixed(1)}%
);
})}
{s.label} · {s.note}
{s.value.toLocaleString('en-US')} {i > 0 && {stepConv.toFixed(0)}% of prev }
{(steps[3].value / top * 100).toFixed(1)}%
{(steps[3].value / steps[1].value * 100).toFixed(0)}%
{(steps[4].value / steps[3].value * 100).toFixed(0)}%
{bars.map((b, i) => {
const color = b.type === 'pos' ? VM.up : b.type === 'neg' ? VM.down : VM.forest;
return (
{b.type === 'neg' ? '-' : b.type === 'pos' ? '+' : ''}${Math.abs(b.type === 'base' || b.type === 'total' ? b.v : b.v)}
{b.label}
);
})}
{AN_PLAN_MOVE.map(p => (
))}
From {p.plan}
{p.dist.map(d => `${d[0]} ${d[1]}%`).join(' · ')}
{p.dist.map((d, i) => (
))}
{[['Stayed', VM.faint],['Upgrade', VM.forest],['Downgrade', VM.teal],['Churned', VM.down]].map(([l, c]) => (
{l}
))}
{depth.buckets.map((b, i) => (
{b.n}
{b.label}
))}
= 3 ? VM.forest : VM.tealTint2, borderRadius:'4px 4px 0 0' }}>
{AN_PAGES.map(p => (
{p.name}
{p.v.toLocaleString('en-US')}
))}
Every month's active-user change, split into where it came from. The Quick Ratio = (new + resurrected) ÷ churned — above 1 means you're growing; Facebook's growth team used this as a north-star health check.
{data.map((r, i) => (
= 1 ? VM.upInk : VM.downInk}>{r.qr.toFixed(1)}
{r.label}
))}
{[['Retained', VM.forest],['New', VM.up],['Resurrected', VM.teal],['Churned', VM.down]].map(([l, c]) => (
{l}
))}
Paying accounts most likely to cancel, scored on recency, trial status and product usage — reach out to these before they go.
{['Account', 'Plan', 'Risk', 'Last seen', 'Why'].map((h, i) => )}
{top.map((r, i) => {
const t = tier(r.score);
return (
{r.u.name}
Control exactly which tabs each fellow admin can see and which actions they can take. The Users tab
always stays visible — it's the floor. Anyone not yet configured here is a full admin (today's
default); ticking a box for someone switches them to exactly what's ticked. You can't change your own permissions from here.
{loading &&
{toggleError}
)}
{!loading && error && (
{error === 'not configured'
? 'Team permissions aren’t wired up yet — the vm-admin-actions Lambda URL needs a redeploy that includes the Team endpoints.'
: error}
)}
{!loading && !error && team && (
{TEAM_SECTIONS.map(s => (
{s.title}
))}
{TEAM_PERMS.map(p => )}
{team.map(m => {
const isSelf = user && m.email === user.email;
return (
{m.name || m.email} {isSelf && (you)}
Full admin
)}
No admins found.
)}