shadcn.io is not affiliated with official shadcn/ui
Resource Matrix Kanban Block for Radix UI
A capacity matrix of five people by four weeks where assignments move between cells, every cell adds its hours against a forty hour week, and a full week refuses more.
Installation
Overview
Plan who works on what, week by week, with this resource matrix for React with Radix UI. A hairline frame with a plus mark on each corner holds a row for each of five people, with their discipline under the name, and a column for each of four weeks (the weeks of Oct 19, Oct 26, Nov 2 and Nov 9) over seventeen assignments, each with the hours it takes. Every cell adds up its hours against a forty hour week ("32 of 40 h", with a small bar and the word "Full" at forty), a person's row head totals their hours across the four weeks and the hours still free, and the sentence under the heading is worked out from the cards. An assignment moves between cells, to another week, to another person or both, and one rule guards the plan: no cell goes past forty hours, and the refusal says which cell would reach how many. 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 week of" a date or "Hand to" a person. A polite status line in the foot reports each move, and Reset puts the plan back. The frame is ruled by Guides. For resourcing, project staffing and any plan with a weekly limit.
FAQ
How do I use my own people, weeks and assignments?
Edit LANES, STATUSES, START and WEEK. The STATUSES array holds the weeks (an id and the label shown), a person has an id, a name and a discipline, and an assignment has an id, a title, its hours and the column it starts in, written as the person and the week joined by a dot (tiago.w2). The hours in each cell, in each row and in the header sentence are worked out from the assignments.
How do I move an assignment without a mouse?
Tab to the grip at the start of a card, named "Move" with the assignment'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 week), ArrowLeft and ArrowRight to go to the neighbouring week 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 "Checkout redesign, part 2, Mirela Hartigan, Oct 26, position 1 of 1."
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 week of" each week 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 the forty hour rule work, and how do I change it?
refusalOf adds the assignment's hours to the cell it is going to and refuses when the total passes WEEK. The drop, the keyboard steps and the menu all ask it, so no route gets around it. A refused move leaves the assignment where it was, puts focus back on it, and the status line names the cell and the hours it would reach. Change WEEK, or give each person their own limit by looking the person up in the function.
What stays in the demo, and how do I save the plan?
Everything: the moves live in the component's state, nothing is sent anywhere, and a reload or Reset brings back the starting plan. To save for real, call your API from put, the one function every finished move goes through, and update the assignments from the response. The people and assignments are made up.
How does it work on a phone?
The board is one scroll region that moves sideways and up and down inside its fixed height, so the page never jumps, and the person names are sticky so you always know whose row you are in. Touch drags from the grip only, so the rest of a card still scrolls the board, and the menu is the other way to move a card. The status line is still read out to screen readers.