# Course dashboard

A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Education](https://beamline.io/components/apps/education) app. Live demo: https://beamline.io/components/course-dashboard

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](https://beamline.io/components/course-home)).
- Grading one attempt against a rubric ([grading-desk](https://beamline.io/components/grading-desk)).
- Editing the lessons and their release ([course-builder](https://beamline.io/components/course-builder)).
- A SaaS revenue overview ([analytics-dashboard](https://beamline.io/components/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](https://beamline.io/components/metric-card)
- tabs
- [search-field](https://beamline.io/components/search-field)
- avatar
- badge
- button
- [dropdown-menu](https://beamline.io/components/dropdown-menu)
- sheet
- [segmented-control](https://beamline.io/components/segmented-control)
- [number-field](https://beamline.io/components/number-field)
- textarea
- alert
- [empty-state](https://beamline.io/components/empty-state)
- skeleton

## Dependencies

`lucide-react`

## Import

```tsx
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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Education

- [Course builder](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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…

Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).