shadcn.io is not affiliated with official shadcn/ui
Maintenance Log Kanban Block for React Aria
A four-column maintenance log (Reported, Scheduled, In progress, Closed) of ten jobs with a priority glyph and word and an Assign button, where a job can't be closed without a technician.
Installation
Overview
Keep a plant's machines running with this maintenance log for React with React Aria. A hairline frame with a plus mark on each corner holds four columns that share their lines (Reported, Scheduled, In progress and Closed) and ten jobs. Each card names the job and the machine, shows its priority as a glyph and a word in an outline Badge so colour is never the only cue, and says which technician has it; an "Assign" Button gives the job to the next technician in turn and "Unassign" takes it back. One rule guards the board: a job can't be Closed without a technician, and the refusal names the job. Every column head counts its jobs and the high-priority ones, and the sentence under the heading is worked out from the cards. A card moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu under "Move to". A polite status line reports each change and Reset restores the log. The frame is ruled by Guides. On a phone the columns scroll sideways in one named region. For facilities teams, workshops and any queue of repairs.
FAQ
How do I fill it with my own jobs?
Edit COLUMNS, TECHS and START. A job has an id, the column it starts in, a title, the machine, a priority (High, Medium or Low) and the tech who has it, empty if nobody. Counts and sentences are calculated from the cards.
How does the closing rule work?
refusalOf returns a reason when a job going to Closed has no technician. The drop, the keyboard steps and the menu all ask it. Closed jobs keep their technician: the button says so rather than clearing it.
How does Assign choose a technician?
It takes the next name in TECHS by how many jobs already have one. It is a stand-in for a picker: replace the handler with a select or a popover listing the people available.
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. Each step is announced in the status line. The card's "More actions" menu offers a "Move to" choice for every column too, which is the route for a single pointer and for touch. React Aria's menu is a group of selectable items, so the column is chosen by selection rather than by a radio item.
What stays in the demo, and how do I save the moves?
Everything: assignments and moves live in the component's state, and a reload or Reset restores the log. To save for real, call your API from put and from the assign handler. The jobs, machines and people are made up.
How does it look on a phone?
The columns scroll sideways in one named region with the next column showing, and each column scrolls up and down inside the board's fixed height, so the page never jumps. The priority and the technician share a row, and the technician's name is trimmed to fit. Touch drags from the grip only, so the rest of a card still scrolls the board; the menu moves a card with a single tap.