shadcn.io is not affiliated with official shadcn/ui
Team Workload Task List Block for React
A load balancer for four people against a 40 hour cap, with a bar and a word for each, a Move to select on every task, and one suggested move to Apply or Undo.
Installation
Overview
See who is over their week and fix it with one move, with this team workload to-do list block for React with Base UI. Four people sit in a column, each with their initials in an Avatar, hours assigned against a 40 hour cap, a bar with a mark at the cap and a word beside it ("113%, over"). Opening a person lists their tasks with hours and a Native Select that moves a task to someone else. The end cell proposes one rebalance worked out from the numbers: the smallest task that brings the busiest person back to their cap, sent to the least loaded person who has room for it. Apply move is the block's Shine Button, and a one-line Undo takes the last move back. After every move the suggestion is worked out again, and the cell says "Balanced" when nobody is over. Guides rule the cells, which stack on a phone. For capacity planning, sprint balancing and any team that shares a backlog.
FAQ
How is the suggested move chosen?
suggestionOf finds the person with the most hours and how far over the cap they are. It tries their tasks from the smallest that is at least that big, and for each looks for the least loaded other person who would stay at or under the cap. The first pair that works is proposed; if none does, the cell says no single move fixes it and you move tasks by hand.
Are the percentages typed?
No. Hours are typed per task; every total, percentage and bar is worked out from them, so the text, the bars and the suggestion always agree. Change START or CAP and everything follows.
What does Undo restore?
The whole plan as it was before the last move, whether you made it by hand or with Apply, and then it disappears. Focus goes to the Undo button after Apply, and back to Apply after Undo.