Course dashboard
A React block (a whole screen) in Beamline's Education app.
A course's staff view: its identity (draft or published, who may join, how it runs, its lessons) with Publish through your app, Preview as a learner and an export request said apart from a finished file; figures counted over an enrollment scope you name, a learner whose records can't be read said instead of counted as zero; then Learners (a row opens their lessons by section, done or not in icon and word, with lessons added after they started named so the changed total is never a mystery), Comments (the learner, the words and the lesson they came from, a reply in place that keeps the comment chosen, a removed lesson and a comment you can't see said) and Results (each learner's answers as a strip with waiting-for-a-grade and not-graded apart from wrong, a waiting answer scored in place, means by question or by concept over graded answers only, an out-of-date report and grades not sent on said with their own action). The figures lead as one picture of the cohort: the average progress (not known for unreadable learners, said), enrolled, started and finished in one line, and for each lesson in order how many have finished it. A learner's bar is green when finished and amber when they've gone quiet (a week without activity against the cohort's latest, or never started); the rest ink.
Use it for
- The instructor's or training team's page for one course: is it published, who is enrolled, how far each learner is, which comments wait for an answer and how the last quiz went.
- Any programme people work through lesson by lesson (onboarding, certification, coaching) where staff need publishing state, progress and results together.
Not for
- The learner's own view of the course (course-home).
- Grading one attempt against a rubric (grading-desk).
- Editing the lessons and their release (course-builder).
- A SaaS revenue overview (analytics-dashboard).
Anatomy
- head: cover or initials tile, title, Draft or Published, how it runs, who may join, lesson count; Edit lessons, Publish (draft only), a menu with Preview as a learner and Export learners; a refused publish and an export requested or refused said under the title
- figures: the scope sentence, then Enrolled, Started, Completed and Average progress; learners whose records can't be read are left out of the average and counted in its context
- Learners: search, a row per learner (avatar, name, progress bar in ink with done of total, last active); a row opens the progress sheet
- progress sheet: the learner, enrolled date, Not started / In progress / Complete / Progress unavailable, done of total, the sentence naming lessons added after they started, lessons by section with a done or open circle and the word
- Comments: a row per comment (author, excerpt, lesson or Lesson removed, New or Replied, date); a hidden comment is listed with a lock and why; a chosen comment opens its words, a reply field, Open the lesson and Send reply
- Results: the quiz, finished or still running, when the report was made, By learner / Question / Concept; out of date with Refresh; grades not sent on with Send again; Accuracy, Finished, Waiting for a grade, Questions; the key of answer marks; by learner each learner's strip and points of graded max with waiting count, opening to the answers where a waiting one is scored; by question and by concept a mean bar over graded answers with graded of total
States
- draft course
- published
- publishing
- publish refused
- no enrollments
- loading engagement
- restricted access (invite only, restricted to groups)
- export requested
- export refused
- not started
- in progress
- complete
- curriculum changed (lessons added after the learner started)
- progress unavailable
- no comments
- new question
- replied
- deleted lesson
- comment hidden
- comments blocked
- sending a reply
- reply refused
- results: running, finished, waiting for a grade, not graded, not answered, part marks
- scoring refused
- report out of date
- grades not sent on
- no results
Keyboard
- Tab through the head, the tabs (arrow keys between them) and each row
- a learner row: Enter opens the progress sheet; Escape closes it and focus returns to the row
- a comment row: Enter opens it in place; the reply field, Open the lesson and Send reply follow in order
- Results: the view switch by arrow keys; a learner row's Enter opens their answers; a waiting answer's points field takes ↑/↓ in half points
Motion
Progress bars ease to a new value on the motion tokens; the sheet slides in from the side (from the bottom on a phone); a row opens in place. Nothing moves at rest.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
course (required) | CourseInfo | — | |
curriculum (required) | CurriculumSection[] | — | |
learners (required) | CourseLearner[] | null | — | Everyone counted in the figures; null while loading. |
scope (required) | string | — | Who the figures count, in words: "active learners of the Autumn cohort". |
comments | CourseComment[] | — | |
commentsBlocked | string | null | — | Why this person can't see comments; omit when they can. |
results | CourseResults | null | — | |
tab | CourseTab | — | |
defaultTab | CourseTab | — | |
onTabChange | ((tab: CourseTab) => void) | — | |
openLearner | string | null | — | The learner whose progress is open. |
defaultOpenLearner | string | null | — | |
onOpenLearnerChange | ((id: string | null) => void) | — | |
onPublish | (() => void | Promise<unknown>) | — | Publishes the draft; resolve once published (the app passes status "published"), reject with the reason. |
onEditLessons | (() => void) | — | |
onPreview | (() => void) | — | Opens the course as a learner would see it; the app marks that view as a preview. |
onExport | (() => void | Promise<unknown>) | — | Requests the learners' export; resolve when requested (the file arrives later), reject with the reason. |
onOpenLesson | ((lessonId: string) => void) | — | |
onReply | ((commentId: string, text: string) => void | Promise<unknown>) | — | Sends a reply; resolve once sent (the app marks the comment replied), reject with the reason. |
onScore | ((score: { learnerId: string; questionId: string; points: number; }) => void | Promise<… | — | Saves a person's score of a waiting answer; resolve once saved (the app updates results), reject with why. |
onRefreshResults | (() => void | Promise<unknown>) | — | |
onRetrySync | (() => void) | — | |
className | string | — | Classes on the documented visual root; no override by default. |
style | CSSProperties | — | Inline styles on the documented visual root; no overrides by default. |
ref | Ref<HTMLDivElement> | — | Receives the documented native target or imperative handle; omitted by default. |
Built from
- metric-card
- tabs
- search-field
- avatar
- badge
- button
- dropdown-menu
- sheet
- segmented-control
- number-field
- textarea
- alert
- empty-state
- skeleton
Dependencies
lucide-react
Import
import { CourseDashboard } from "@beamline/course-dashboard";Get it
Course dashboard is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent
More in Education
- Course builder: Setting a course up. The learning path as ordered sets, each with its release rule in place (at once, a delay after the set before drawn as a bar you…
- Program modules: A wellness or coaching program's modules as a practitioner builds them. The modules down the side with where each stands (draft, published at a revision…
- Question builder: Questions built beside their material. A reading passage (imported, with an import pending or failed said with Try again, or pasted) whose words become…
- Grading desk: Grading a quiz or an assignment. The submissions down the side, not graded first, the open one beside its grade. A quiz attempt shows each question's…
- Course home: A learner's course, week by week, in the cohort's time zone: each lesson done or not, a project's draft or submission, a reflection answered or not, a…
- Volunteer rota: Several plans side by side for the people who staff them: plans as columns, teams and their positions as rows, each cell the people scheduled with their…
- Gift desk: A gift or tickets taken in person, on a phone at an event or at a desk: the gift entered large in its currency, once or monthly (monthly said as an…
- Gift batches: Gift batches between counting and the books: batches a counting team enters, each with the day the gifts were received (apart from when they were entered…