// Realistic SaaS-style dashboard mockup — "Advisory Readiness Center" // Shows learner cohort readiness, gamification leaderboard, ladder progress. function DashboardMockup() { // Animated KPI counters const targets = { ready: 78, ladder: 4.6, drills: 312, conduct: 0 }; const [kpi, setKpi] = React.useState({ ready: 0, ladder: 0, drills: 0, conduct: 0 }); React.useEffect(() => { const obs = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) { const start = performance.now(); const dur = 1200; function frame(now) { const t = Math.min(1, (now - start) / dur); const ease = 1 - Math.pow(1 - t, 3); setKpi({ ready: Math.round(targets.ready * ease), ladder: +(targets.ladder * ease).toFixed(1), drills: Math.round(targets.drills * ease), conduct: targets.conduct, }); if (t < 1) requestAnimationFrame(frame); } requestAnimationFrame(frame); obs.disconnect(); } }, { threshold: 0.3 }); const el = document.getElementById('dashboard-frame'); if (el) obs.observe(el); return () => obs.disconnect(); }, []); // Readiness rings data — 7 ladder rungs const readiness = [ { lbl: 'Pre-Read', pct: 100 }, { lbl: 'Case', pct: 96 }, { lbl: 'Simulation', pct: 88 }, { lbl: 'Mimicking', pct: 74 }, { lbl: 'Shadow', pct: 62 }, { lbl: 'Supervise', pct: 48 }, { lbl: 'Independent', pct: 31 }, ]; // Leaderboard const lb = [ { name: 'Maria S.', sub: 'Private Banking · Jakarta', score: 92.4, delta: '+8.6', top: true }, { name: 'Daniel R.', sub: 'Wealth Advisory · Surabaya', score: 89.7, delta: '+5.2', top: true }, { name: 'Aisyah N.', sub: 'Securities · Bandung', score: 86.1, delta: '+7.0' }, { name: 'Henry P.', sub: 'Insurance · Medan', score: 83.3, delta: '+3.4' }, { name: 'Rina T.', sub: 'Private Banking · Jakarta', score: 79.8, delta: '+4.9' }, ]; // Capability mastery const mastery = [ { lbl: 'Finance', pct: 84 }, { lbl: 'Business', pct: 76 }, { lbl: 'Macro', pct: 68 }, { lbl: 'Products', pct: 81 }, { lbl: 'Value', pct: 72 }, { lbl: 'Acquisition', pct: 65 }, { lbl: 'Reactivation',pct: 58 }, { lbl: 'Execution', pct: 79 }, ]; return (

07 · ADVISORY READINESS CENTER

Track readiness before it reaches the client.

Every drill, score, and supervised case rolls into one operational view. Managers see who is ready, who needs another rung, and what to coach next — without waiting for the post-mortem.

{/* Title bar */}
metrix.ambiz.com / wealth-advisory · cohort-2026-A
{/* Sidebar */} {/* Main */}
Readiness Overview
42 advisors · 8 capabilities · 7 rungs · live
Last sync 3 min Export Report
Cohort Readiness
{kpi.ready}%
▲ +6.2 wk
Avg. Ladder Rung
{kpi.ladder}/6
▲ +0.8 wk
Drills Logged
{kpi.drills}
▲ +48 wk
Conduct Flags
{kpi.conduct}
—
{/* Readiness rings */}
Ladder Readiness
Share of cohort that has cleared each rung
Week 6
{readiness.map(r => (
{r.pct}%
{r.lbl}
))}
Capability Mastery
Avg score
{mastery.map(m => (
{m.lbl}
{m.pct}
))}
{/* Leaderboard */}
Top Performers
Composite score · drills + supervised + independent
Cohort 2026-A
{lb.map((p, i) => { const avatarColors = ['#0D903A','#1A549F','#246BB2','#057430','#19519C']; return (
#{i+1}
{p.name.split(' ').map(n=>n[0]).join('')}
{p.name}
{p.sub}
{p.score}
{p.delta}
); })}
Live Gamification
This week
); } function Ring({ pct }) { const r = 16, c = 2 * Math.PI * r; const offset = c - (pct / 100) * c; return ( ); } function Badge({ label, value, tint }) { return (
{label}
{value}
); } window.DashboardMockup = DashboardMockup;