shadcn.io is not affiliated with official shadcn/ui
Assignment Tracking Comments Block for React Aria
Three unassigned comments each get an owner from a picker that shows everyone's open count, plus a due date, while a workload list warns when someone reaches capacity.
Installation
Overview
Give every comment an owner and a due date without overloading anyone, with this assignment tracking comment block for React with React Aria. A compact header names the queue; the frame holds a list of three comments that still need an owner beside a workload column. Each comment has an Assign button that opens a small Popover of four people with how many items each already holds, an Unassign button that takes it back, and three due choices (Today, Friday, Next week) worked out from a fixed Wednesday. The workload column draws each person's open items against a capacity of five, with a bar and the words Has room, At capacity or Over capacity by 1. Assigning to someone who is already at five is allowed but said out loud, and the one primary Shine Button, Spread the rest, hands every unassigned comment to whoever has the lightest load. It is built from Popover, Shine Button, Button, Avatar and Guides, with CSS only. For support desks, triage queues and any team that wants load to be visible before a comment is handed over.
FAQ
How do I use my own people and comments?
Edit PEOPLE and COMMENTS. A person has an id, initials, a name and open, the number of items they hold before anything here is assigned; a comment has an id, an ISO at, its by and body. The workload, the counts in the picker and the bars are all worked out from those and from the current assignments. CAPACITY sets the limit and DUES the due choices.
What happens when someone is at capacity?
Nothing blocks you. Assigning to a person at five items goes through, their bar becomes full and reads Over capacity by 1, and the status line asks whether you meant it: Tomás Ferreira is at 5 of 5, pick someone else? Assigned anyway. In a real app you might require a confirmation or an override reason instead.
How does Spread the rest choose?
It walks the unassigned comments in order and gives each to the person with the fewest open items at that moment, counting what it has just handed out, and the first person in the list wins a tie. It refuses with a message when nothing is unassigned.
What stays local?
Assignments and due dates live in the page and the status line says what changed; nobody is notified and nothing is saved. To make it real, send each assignment from the pick handler, return the person's new open count from the server so two people assigning at once see the truth, and notify the assignee there.
Is it accessible?
The picker is a labelled group of native radio buttons inside a popover, so arrow keys, Tab and Escape work as expected and focus returns to the Assign button. Each due choice is a labelled radio group per comment, bars are decorative with the same numbers written beside them, and the status line is read out politely.