shadcn.io is not affiliated with official shadcn/ui
Production Schedule Kanban Block for React Aria
A shift schedule of twelve jobs across Unscheduled, Early, Late and Night lanes, with a units total and a capacity meter per shift and a refusal when a job would overfill the line.
Installation
Overview
Plan a workshop's week with this production schedule kanban for React with React Aria. A hairline frame with a plus mark on each corner holds four lanes that share their lines: Unscheduled, which has no limit, and the Early, Late and Night shifts, which each have a line capacity in units. Twelve jobs carry a title, the machine they run on and their units in a Badge. Every shift head adds up its units against its capacity ("52 of 60 units") and draws a thin meter that reads "full" at the limit; the sentence under the heading is worked out from the cards. A job can't be moved into a shift it would overfill: the refusal says by how many units the shift would be over and suggests moving a job out or choosing another shift. A card moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu with "Move to". The frame is ruled by Guides. On a phone the lanes scroll sideways in one named region. For workshops, kitchens, print rooms and any line with a hard capacity per shift.
FAQ
How do I fill it with my own jobs and shifts?
Edit COLUMNS and START. A lane has an id, a name and a cap in units, where 0 means no limit; a job has an id, a title, the line it runs on, its units and the column it starts in. Totals, meters and the header sentence are calculated from the cards.
How does the capacity refusal work?
refusalOf adds the job's units to the units already in the target shift and compares the sum with that shift's cap. If it is over, the move is refused with the shift, the sum and the limit in the sentence; a job that fits, even exactly (the head then says "full"), moves normally. Moving a job inside its own shift never counts it twice. The drop, the keyboard steps and the menu all ask the same function.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the job'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. A step into a full shift is refused in the status line and the job stays where it was. Every step is announced in the status line in the foot.
Is there a way to move without dragging?
Yes: the menu at the end of each card lists every lane under "Move to" with the current one ticked, so one choice moves the card, focus lands on it in its new place and the status line says so. This 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 it?
Everything: The moves and the totals live in the component's state, nothing is saved or sent, 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 cards from the response. The product, the people and the cards are made up.
How does it look 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 when a card moves. 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.