shadcn.io is not affiliated with official shadcn/ui
Team Workload Kanban Block for Solid
A capacity board with a lane for each of five people that folds to one summary line, shows each person's load against ten points, and refuses a move that would overload them.
Installation
Overview
See who has room before you hand out more work, with this team workload board for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a lane for each of five people and four statuses (To do, In progress, Review and Done) over sixteen tasks. Each task shows its title, its priority as three bars and a word, and its points. A person's lane head shows their load, the points of their open work against a limit of ten, as a sentence and a small bar, and a chevron folds the lane to one summary line such as "2 to do, 1 doing, 1 in review, 3 done"; "Collapse all" in the header folds every lane at once, and on a phone all but the first start folded. A folded lane still takes a drop on its head, and the task lands in To do. One rule guards the limit: a move that would take someone past ten points of open work is refused, and the refusal gives the number and the way out. A card moves three ways: drag its grip, focus the grip and use Space, the arrow keys and Escape, or open its Dropdown Menu and choose "Move to" a status or "Hand to" a person. A polite status line in the foot reports each move and each fold, and Reset puts the board back. The frame is ruled by Guides. For capacity planning, resourcing and any team that needs to see overload before it happens.
FAQ
How do I use my own people and tasks?
Edit LANES, STATUSES, START and LIMIT. A lane has an id and a name; a task has an id, a title, its points, a priority from 1 to 3 and the column it starts in, written as the lane and the status joined by a dot (petra.doing). Open work is everything but Done; isOpen says so. The loads, the summaries and the header sentence are all worked out from the tasks.
How do I move a task without a mouse?
Tab to the grip at the start of a card, named "Move" with the task's title. Press Space or Enter to pick it up, then ArrowUp and ArrowDown to change its place in the cell (at the top or bottom of a cell the card crosses into the neighbouring person's cell in the same status), ArrowLeft and ArrowRight to go to the neighbouring status in the same person (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 "Fix the export timeout, Torvald Rask, Review, position 1 of 1." Folded lanes are skipped when a card crosses between lanes.
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 two groups of choices: "Move to" each status and "Hand to" each person, the current one ticked in both. Choosing one moves the card, puts focus on the card in its new place and says so in the status line.
How does folding a lane work?
The chevron in a lane head is a button that says whether the lane is expanded, and "Collapse all" in the header folds or opens every lane. A folded lane becomes one line: the name, the summary and the load. It is still a drop target, so a task dropped on it lands at the top of To do, and the board keeps its height whatever is folded. The folded lanes are one array of ids in the component's state, so you can start with any lanes folded.
How does the limit work, and how do I change it?
refusalOf adds the task's points to the person's open work and refuses when the total passes LIMIT, unless the task already counts there (moving between open statuses in the same lane changes nothing). The drop, the keyboard steps and the menu all ask it. A refused move leaves the task where it was and the status line says how many points the person would carry. Change LIMIT, or return a different reason from the same function.
What stays in the demo, and how do I save the moves?
Everything: the moves and the folds 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, and update the tasks from the response. The people and tasks are made up.