{/* Member selector */}
VIEW AS:
{SAMPLE_MEMBERS.map(m => (
))}
{/* Member stats */}
{selectedMember.name.split(" ").map(w => w[0]).join("")}
{selectedMember.name}
{selectedMember.rank} · {selectedMember.region}
{/* Progress bar */}
Academy Completion Progress
{Math.round((earnedModules.length / 10) * 100)}%
{/* Module certificates */}
Module Certificates (10)
{MODULES.map(m => (
))}
{/* Special certificates */}
Special Achievement Certificates (4)
{SPECIAL_CERTS.map(s => (
))}
)}
{/* ─── ADMIN VIEW ─── */}
{tab === "admin" && (
{/* Stats overview */}
m.completedModules.length === 10).length}
label="Full Graduates" color="#4ade80"
/>
a + m.completedModules.length, 0)}
label="Certs Issued" color="#60a5fa"
/>
a+m.completedModules.length,0)/SAMPLE_MEMBERS.length*10)+"%"}
label="Avg Completion" color="#f472b6"
/>
{/* Filter bar */}
setSearchQuery(e.target.value)}
placeholder="Search by name or region..."
style={{
flex: 1, minWidth: 180, background: "rgba(255,255,255,0.04)",
border: "1px solid rgba(255,255,255,0.1)", borderRadius: 8,
color: T.white, padding: "8px 14px", fontSize: 12,
outline: "none",
}}
/>
{["all", "complete", "partial", "none"].map(f => (
))}
{/* Member table */}
{/* Header */}
Member
Rank
Points
Module Progress
Actions
{filteredMembers.map((m, i) => {
const pct = Math.round((m.completedModules.length / 10) * 100);
return (
e.currentTarget.style.background = "rgba(255,255,255,0.03)"}
onMouseLeave={e => e.currentTarget.style.background = "transparent"}
>
{m.name.split(" ").map(w => w[0]).join("")}
{m.points.toLocaleString()}
{m.completedModules.length}/10 ({pct}%)
{MODULES.map(mod => (
m.completedModules.includes(mod.id) && setPreview({ member: m, certType: mod.id })}
>
{m.completedModules.includes(mod.id) ? "✓" : mod.id}
))}
);
})}
{filteredMembers.length === 0 && (
No members match your filter.
)}