/* ============================================================ SUPER ADMIN (Elephant Ed Admin) views -> window.SuperAdmin ============================================================ */ (function () { const { useState, useEffect } = React; const D = window.DATA; const NAV = [ { id: 'overview', label: 'Overview', icon: 'grid' }, { id: 'courses', label: 'Courses', icon: 'course', count: D.courses.length }, { section: 'Platform' }, { id: 'settings', label: 'Settings', icon: 'settings' }]; const PAGE_META = { overview: { crumb: 'Elephant Ed · Platform', title: 'Platform Overview' }, courses: { crumb: 'Elephant Ed · Library', title: 'Course Library' }, settings: { crumb: 'Elephant Ed', title: 'Settings' } }; /* ---------- OVERVIEW ---------- */ function Overview({ toast }) { const p = D.platform; const [drawerWp, setDrawerWp] = useState(null); const months = ['Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May']; const topWp = [...D.workplaces].sort((a, b) => b.completion - a.completion); return (
{topWp.map((w) => setDrawerWp(w)}> )}
WorkplaceIndustryLearnersCoursesCompletion
{w.name}
 {w.industry} {w.employees} {w.courses}
{drawerWp && setDrawerWp(null)} toast={toast} />}
); } /* ---------- WORKPLACE DETAIL DRAWER ---------- */ function WorkplaceDrawer({ wp, onClose, toast }) { useEffect(() => { const h = (e) => {if (e.key === 'Escape') onClose();}; window.addEventListener('keydown', h); return () => window.removeEventListener('keydown', h); }, []); const courses = D.courses.filter((c) => c.workplaces.includes(wp.id)); return ( <>
); } /* ---------- COURSE LIBRARY + DETAIL ---------- */ function Courses({ toast }) { const [detail, setDetail] = useState(null); const [upload, setUpload] = useState(null); // course for upload modal return (
{D.courses.map((c) => { const cur = c.versions.find((v) => v.current) || c.versions[0]; return (
setDetail(c)} style={{ cursor: 'pointer' }}>
{c.cat}
v{cur.v}

{c.name}

{c.desc}

{c.workplaces.length} workplaces {c.mins} min
); })}
{detail && setDetail(null)} toast={toast} upload={upload} setUpload={setUpload} />}
); } function CourseDetail({ course, onClose, toast, upload, setUpload }) { const [tab, setTab] = useState('versions'); const [distOpen, setDistOpen] = useState(false); const [shellOpen, setShellOpen] = useState(false); useEffect(() => { const h = (e) => {if (e.key === 'Escape') onClose();}; window.addEventListener('keydown', h); return () => window.removeEventListener('keydown', h); }, []); const cur = course.versions.find((v) => v.current) || course.versions[0]; return ( <>
{upload && setUpload(null)} toast={toast} />} ); } /* ---------- MODALS ---------- */ function UploadModal({ course, onClose, toast }) { const [stage, setStage] = useState('drop'); // drop -> validating -> done const [hot, setHot] = useState(false); const start = () => { setStage('validating'); setTimeout(() => setStage('done'), 1700); }; return ( : <>}> {stage === 'drop' &&
{e.preventDefault();setHot(true);}} onDragLeave={() => setHot(false)} onDrop={(e) => {e.preventDefault();setHot(false);start();}} onClick={start}>
Drop Articulate SCORM package
SCORM 1.2 · single launchable course · max 500 MB
} {stage === 'validating' &&
Validating package…
Checking manifest, launch file & SCORM 1.2 conformance
} {stage === 'done' &&
Package valid
SCORM 1.2 · 1 launchable item · resume tracking detected
File
{course.abbr.toLowerCase()}_v1-4.zip
Size
49.6 MB
Version
v1.4 (draft)
Launch file
story.html
} ); } function DistributePopover({ course, onClose, toast }) { const avail = D.workplaces.filter((w) => !course.workplaces.includes(w.id)); const [sel, setSel] = useState([]); const toggle = (id) => setSel((s) => s.includes(id) ? s.filter((x) => x !== id) : [...s, id]); useEffect(() => { const h = (e) => {if (e.key === 'Escape') onClose();}; window.addEventListener('keydown', h); return () => window.removeEventListener('keydown', h); }, []); return ( <>
e.stopPropagation()}>
Distribute to workplaces
Adds this course to each workplace's catalogue.
{avail.map((w) => )} {avail.length === 0 &&
Already distributed to all workplaces.
}
); } function ShellPopover({ course, onClose, toast }) { useEffect(() => { const h = (e) => {if (e.key === 'Escape') onClose();}; window.addEventListener('keydown', h); return () => window.removeEventListener('keydown', h); }, []); return ( <>
e.stopPropagation()}>
Export SCORM shell
A lightweight package a workplace uploads to their own LMS — on launch it redirects the learner to Elephant Ed.
Package {course.abbr.toLowerCase()}_shell.zip
); } function Placeholder({ title }) { return
{title}
Out of scope for this prototype.
; } function SuperAdmin({ page, toast }) { switch (page) { case 'overview':return ; case 'courses':return ; default:return ; } } window.SuperAdmin = { Component: SuperAdmin, NAV, PAGE_META, user: { name: 'Avery Sloan', role: 'Elephant Ed Admin', color: '#15A6C9' } }; })();