// ===== org-lms-deep.jsx ===== // Staff-side LMS — replaces window.OrgTraining with a deeper module. // Adds: // - Course detail screen (enrollments, completion funnel, quiz analytics, modules) // - Quiz analytics view (per-question accuracy + time) // - Assignment rules tab (auto-enroll by role, due dates, escalation) // - Keeps existing surfaces (catalog, certs, behind, builder, external LMS) const { React, Card, Btn, IconBtn, StatusChip, Avatar, Kpi, Progress, Field, Input, Textarea, Select, Checkbox, Toggle, Tabs, Empty, SectionHead, TopBar, IconPlus, IconCheck, IconX, IconArrow, IconArrowL, IconDownload, IconUpload, IconBook, IconClock, IconUsers, IconAward, IconShield, IconSearch, IconFilter, IconBell, IconStar, IconEdit, IconExternal, IconChevron, IconChevronD, IconEye, IconMore, IconCal, IconClipboard, IconMail, VOLUNTEERS, } = window; const { useState: useOL, useMemo: useOLM, useEffect: useOLE } = React; const ol_over = { fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--fg-3)", fontWeight: 500 }; const ol_meta = { fontSize: 11, color: "var(--fg-3)" }; // ============================================================ // DATA // ============================================================ const STAFF_COURSES = [ { id: "co-1", title: "Camp host orientation", program: "State parks", time: "45 min", modules: 6, enrolled: 124, completion: 92, avgScore: 88, required: true, format: "video+quiz", thumbColor: "var(--coral-700)", state: "published" }, { id: "co-2", title: "Trail crew safety", program: "State parks", time: "30 min", modules: 4, enrolled: 86, completion: 88, avgScore: 91, required: true, format: "video+quiz", thumbColor: "var(--sage-700)", state: "published" }, { id: "co-3", title: "First aid refresher", program: "All programs", time: "30 min", modules: 5, enrolled: 186, completion: 72, avgScore: 85, required: true, format: "video+exam", thumbColor: "var(--crimson-500)", state: "published" }, { id: "co-4", title: "Wildlife encounter protocols", program: "All programs", time: "15 min", modules: 4, enrolled: 142, completion: 81, avgScore: 92, required: false, format: "video+quiz", thumbColor: "var(--sage-500)", state: "published" }, { id: "co-5", title: "Reservation system basics", program: "State parks", time: "20 min", modules: 4, enrolled: 124, completion: 96, avgScore: 94, required: true, format: "video+quiz", thumbColor: "var(--iris-600)", state: "published" }, { id: "co-6", title: "Naturalist program", program: "Education", time: "60 min", modules: 8, enrolled: 38, completion: 64, avgScore: 87, required: false, format: "video+quiz", thumbColor: "var(--amber-600)", state: "published" }, { id: "co-7", title: "Hunter ed methodology", program: "Hunter Outreach", time: "75 min", modules: 9, enrolled: 22, completion: 86, avgScore: 90, required: true, format: "video+exam", thumbColor: "var(--coral-600)", state: "published" }, { id: "co-8", title: "Leave No Trace for volunteers", program: "All programs", time: "20 min", modules: 3, enrolled: 84, completion: 78, avgScore: 89, required: false, format: "video+quiz", thumbColor: "var(--stone-700)", state: "published" }, ]; const CERTS = [ { id: "ce-1", name: "CPR / First Aid (Red Cross)", validYears: 2, holders: 186, expiringSoon: 12, expired: 4, kind: "external" }, { id: "ce-2", name: "Hunter Ed Instructor (Kalkomey)", validYears: 3, holders: 22, expiringSoon: 3, expired: 1, kind: "external" }, { id: "ce-3", name: "Camp Host (CPW internal)", validYears: 1, holders: 124, expiringSoon: 18, expired: 0, kind: "internal" }, { id: "ce-4", name: "Trail Crew Safety (CPW)", validYears: 1, holders: 86, expiringSoon: 8, expired: 2, kind: "internal" }, { id: "ce-5", name: "Wilderness First Responder", validYears: 3, holders: 18, expiringSoon: 2, expired: 0, kind: "external" }, ]; // ============================================================ // ROOT // ============================================================ const OrgTraining = ({ go }) => { const [view, setView] = useOL("list"); const [tab, setTab] = useOL("courses"); const [activeCourseId, setActiveCourseId] = useOL(null); if (view === "course-detail") { const course = STAFF_COURSES.find(c => c.id === activeCourseId); if (course) return setView("list")} go={go} />; } return ( <> a + c.enrolled, 0).toLocaleString()} active enrollments`} primary={ setTab("builder")}>New course} secondary={Upload SCORM} />
c.required).length} required`} tone="neutral" icon={IconBook} />
{tab === "courses" && (
{STAFF_COURSES.map(c => ( { setActiveCourseId(c.id); setView("course-detail"); }} /> ))}
)} {tab === "certs" && } {tab === "behind" && } {tab === "rules" && } {tab === "builder" && } {tab === "lms" && }
); }; // ============================================================ // COURSE CARD (catalog) // ============================================================ const StaffCourseCard = ({ c, onOpen }) => (
{c.required && Required}
{c.program}
{c.title}
{c.time}{c.modules} modules{c.format}
{c.enrolled} enrolled · {c.completion}% complete
Open analytics
); // ============================================================ // COURSE DETAIL — deepest view // ============================================================ const CourseDetail = ({ course, onBack, go }) => { const [tab, setTab] = useOL("overview"); const c = course; return ( <> Edit course} secondary={Nudge non-starters} />
{tab === "overview" && } {tab === "modules" && } {tab === "enrollments" && } {tab === "quiz" && } {tab === "rules" && } {tab === "settings" && }
); }; // ---- Course overview ---- const CourseOverview = ({ c }) => ( <>
Completion funnel · last 30 days
{[ { l: "Assigned", n: 138, pct: 100 }, { l: "Started", n: 124, pct: 90 }, { l: "Hit quiz", n: 118, pct: 86 }, { l: "Passed", n: 108, pct: 78 }, { l: "Cert issued (if applicable)", n: 104, pct: 75 }, ].map(s => (
{s.l} {s.n} · {s.pct}%
))}
Where people drop off
About this course

Recertify CPW field first-aid skills. Bleeding control, CPR positioning, when to call 911 vs. radio. Renewal valid 1 year. Issues the First Aid certification.

); const RR = ({ label, v }) => (
{label} {v}
); const DropoffRow = ({ label, count, note }) => (
{label}
{note}
{count}
); // ---- Modules ---- const CourseModules = ({ c }) => { const mods = [ { id: "m1", n: 1, type: "video", title: "When to step in (and when not to)", time: 6, completion: 96, drops: 0 }, { id: "m2", n: 2, type: "video", title: "Bleeding control + tourniquets", time: 7, completion: 92, drops: 1 }, { id: "m3", n: 3, type: "video", title: "CPR positioning", time: 8, completion: 78, drops: 4 }, { id: "m4", n: 4, type: "video", title: "Wildlife-specific scenarios", time: 5, completion: 84, drops: 2 }, { id: "m5", n: 5, type: "exam", title: "Exam (20 questions · 80% to pass)", time: 15, completion: 72, drops: 6, passRate: 86 }, ]; return (
#ModuleTimeCompletionDrops
{mods.map((m, i) => (
{m.n}
{m.type === "video" ? : m.type === "exam" ? : }
{m.title}
{m.type}{m.passRate ? ` · pass rate ${m.passRate}%` : ""}
{m.time} min
{m.completion}%
2 ? "var(--crimson-600)" : "var(--fg-3)", fontVariantNumeric: "tabular-nums" }}>{m.drops}
))} ); }; // ---- Enrollments ---- const CourseEnrollments = ({ c, go }) => { const [filter, setFilter] = useOL("all"); const enrollments = VOLUNTEERS.slice(0, 8).map((v, i) => { const states = ["completed", "in-progress", "completed", "behind", "completed", "in-progress", "not-started", "completed"]; const progresses = [100, 56, 100, 32, 100, 72, 0, 100]; const dates = ["May 4", "May 18", "Apr 22", "Apr 18", "May 1", "May 16", "—", "Apr 30"]; const scores = [92, null, 88, null, 96, null, null, 84]; return { v, state: states[i], progress: progresses[i], lastActive: dates[i], score: scores[i] }; }); const filtered = filter === "all" ? enrollments : enrollments.filter(e => e.state === filter); return ( <>
{[ { id: "all", t: "All", n: 124 }, { id: "completed", t: "Completed", n: 89 }, { id: "in-progress", t: "In progress", n: 22 }, { id: "behind", t: "Behind", n: 7 }, { id: "not-started", t: "Not started", n: 6 }, ].map(f => ( ))}
Nudge selected Export
{}} aria-label="Select all" /> VolunteerStateProgressLast activeScore
{filtered.map((e, i, arr) => (
go("volunteer/" + e.v.id)} style={{ display: "grid", gridTemplateColumns: "30px minmax(200px, 1.4fr) 130px 130px 110px 100px 36px", gap: 14, padding: "12px 16px", alignItems: "center", borderBottom: i === arr.length - 1 ? "none" : "1px solid var(--border-soft)", cursor: "pointer", fontSize: 13 }}> {}} />
{e.v.name}
{e.v.role}
{e.progress}%
{e.lastActive} {e.score != null ? `${e.score}%` : "—"}
))} ); }; // ---- Quiz analytics ---- const QuizAnalytics = ({ c }) => { const questions = [ { n: 1, text: "When you start compressions on an adult, what's the correct hand position?", accuracy: 96, time: 18, retake: 2 }, { n: 2, text: "How fast should chest compressions be?", accuracy: 92, time: 14, retake: 4 }, { n: 3, text: "A volunteer is unconscious on a backcountry trail with weak signal. First step?", accuracy: 84, time: 22, retake: 8 }, { n: 4, text: "What does the acronym RICE stand for?", accuracy: 88, time: 16, retake: 4 }, { n: 14, text: "(hardest) For a severe arterial bleed below the knee, what's the cutoff time on the tourniquet?", accuracy: 38, time: 38, retake: 24 }, { n: 15, text: "(2nd hardest) When you suspect a spinal injury, what's the rule about moving them?", accuracy: 54, time: 28, retake: 14 }, { n: 16, text: "Which of these are NOT signs of an opioid overdose?", accuracy: 72, time: 22, retake: 8 }, ]; return ( <>
Sort by accuracy} />
#QuestionAccuracyTime (avg)Retakes
{questions.map((q, i, arr) => (
Q{q.n} {q.text}
{q.accuracy}%
{q.time}s 10 ? "var(--crimson-600)" : "var(--fg-2)", fontVariantNumeric: "tabular-nums" }}>{q.retake}
))}
Q14 has a 38% accuracy across 124 attempts. Consider reviewing the question copy, the corresponding module 3 video at 06:42, or both. Click the question to see the breakdown of which distractor learners pick most.
Review Q14
); }; // ---- Assignment rules (per-course) ---- const CourseAssignmentRules = ({ c }) => ( <>

Define who's auto-enrolled and the due dates. Rules run when a volunteer's role changes or when this course is updated.

Auto-enroll when…
Add rule
Due date
Escalation
{[ { t: "Day −7", what: "Reminder email to volunteer" }, { t: "Day −3", what: "Reminder email + SMS (if opted in)" }, { t: "Day 0", what: "Auto-pause shift signups + notify coordinator" }, { t: "Day +7", what: "Coordinator review · option to extend or override" }, ].map(s => (
{s.t} {s.what}
))}
); const RuleChip = ({ op, desc }) => (
{op} {desc}
); const CourseSettings = ({ c }) => (
{[ { type: "Video", title: "Intro — coexisting with wildlife", time: "6 min" }, { type: "Text", title: "Bear protocol", time: "5 min" }, { type: "Video", title: "Mountain lion encounters", time: "4 min" }, { type: "Document", title: "Reference PDF — what to carry", time: "—" }, { type: "Quiz", title: "Knowledge check (8 questions)", time: "10 min" }, ].map((m, i) => (
{m.type === "Video" ? : m.type === "Quiz" ? : m.type === "Document" ? : }
{m.type} {m.title} {m.time}
))} Add module
Module types supported
{[ { i: IconEye, t: "Video", d: "Embed or upload (MP4, WebM). Auto-thumbnail." }, { i: IconEdit, t: "Text + rich media", d: "Markdown editor with images, links." }, { i: IconBook, t: "Document", d: "PDF, DOCX. Downloadable." }, { i: IconClipboard, t: "Quiz", d: "Multiple choice, true/false, free-text grading." }, { i: IconAward, t: "Exam", d: "Pass/fail with attempts and proctor option." }, { i: IconExternal, t: "External (SCORM/xAPI)", d: "Import from Articulate, Rise, Captivate." }, ].map(m => (
{m.t}
{m.d}
))}
Auto-enrollment
This course will be automatically required for volunteers in selected roles.
{["Camp host", "Trail steward", "Naturalist"].map(r => {r} ×)} Role
); // ============================================================ // EXTERNAL LMS (existing — preserved) // ============================================================ const ExternalLMS = () => (
External LMS integration (optional)
Send roster, completions, and certifications to and from external LMS platforms. Configurable — no preferred vendor.
{[ { name: "Articulate Rise 360", status: "Not connected", desc: "Import published Rise courses as SCORM.", color: "var(--iris-100)" }, { name: "Adobe Captivate", status: "Not connected", desc: "Import .cptx published packages.", color: "var(--coral-100)" }, { name: "Kalkomey (Hunter Ed)", status: "Connected · sync nightly", desc: "Imports instructor records and certification status.", color: "var(--sage-100)", connected: true }, { name: "Moodle", status: "Not connected", desc: "Send completions via LTI.", color: "var(--amber-100)" }, ].map((p, i) => (
0 ? "1px solid var(--border-soft)" : "none" }}>
{p.name}
{p.desc}
{p.status} {p.connected ? "Manage" : "Connect"}
))} ); // ============================================================ Object.assign(window, { OrgTraining });