shadcn.io is not affiliated with official shadcn/ui
Student Progress Tracker Kanban Block for Solid
A four-stage board of ten students with a grade word and mark, where a student can't reach Capstone or Graduated while their assessment is missing.
Installation
Overview
Follow a cohort from enrolment to graduation with this student tracker for Solid with Ark UI. A hairline frame with a plus mark on each corner holds four stages that share their lines (Enrolled, Coursework, Capstone and Graduated) and ten students. Each card shows the student's initials in an Avatar, their name and track, and a grade word with the mark in a Badge: Distinction from 70, Merit from 55, Pass from 40, Not passed below. A student with no assessment shows a dashed "Not assessed" badge and a Record button that files the marks the tutor has already entered. The guard is the missing assessment: a student can't enter Capstone or Graduated without one, can't graduate on a Not passed, and each refusal says which and what to do. The sentence under the heading and the stage heads count the students still unassessed. A card moves by dragging its grip, by keyboard, or from its Dropdown Menu under "Move to". A polite status line in the foot reports each change, and Reset puts the cohort back. The frame is ruled by Guides. On a phone the stages scroll sideways in one named region with the next stage showing. For schools, bootcamps and any app that moves people through stages on evidence.
FAQ
How do I fill it with my own students?
Edit COLUMNS and START. A student has an id, the column it starts in, a title (the name, from which the initials are drawn), a track, a score (0 when there is no assessment on record) and marks, what Record will file. Grade words come from gradeOf, so change its thresholds to your scheme.
How does the missing-assessment guard work?
The rule is the function refusalOf, which gets the students, the student, the stage they come from and the stage they are going to, and returns a reason or an empty string. For Capstone and Graduated it refuses a score of 0, and for Graduated it also refuses a Not passed. The grip's drop, the keyboard steps and the menu all ask it, so no route gets around it.
What does Record do?
It copies the student's marks into score, so the badge turns from "Not assessed" into a grade word and the guard lets them through. The button keeps its place on assessed cards but is hidden and disabled, so cards don't change height. In your app, call your gradebook instead and read the mark back.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the card's title. Press Space or Enter to pick it up, then ArrowUp and ArrowDown to change its place, ArrowLeft and ArrowRight to go to the neighbouring column (the arrows swap in right-to-left languages), Home and End for the first and last place, Space or Enter to drop it and Escape to put it back. Every step is announced in the status line, for example "Amara Quennell, Coursework, position 2 of 3".
Why is there a menu as well as the grip?
Dragging needs a held pointer and a path, which not everyone has, so each card also has a "More actions" menu with a "Move to" choice for every column and the current one ticked. It goes through the same guard as the grip and the keys, so no route gets around it. Choosing one moves the card, puts focus on it in its new place and says so in the status line.
What stays in the demo, and how do I save the changes?
Everything: the cards live in the component's state, nothing is sent anywhere, and a reload or Reset brings back the starting board. To save for real, call your API from put, the one function every finished move goes through (the menu, a drop and the block's own buttons) and Record, and update the cards from the response. The school, the students and the marks are made up; no real person is meant.
How does it work on a phone?
The board is a sideways scroll region with the next column showing, and each column scrolls up and down inside the board's fixed height, so the page never jumps. Touch drags from the grip only, so the rest of a card still scrolls the board; the menu is the other way to move a card. The status line is still read out to screen readers.