shadcn.io is not affiliated with official shadcn/ui
Support Tickets Table Block for React Aria
A helpdesk queue in a fixed window that sorts open tickets by the time left on their service clock, counts breached ones, and narrows by assignee with an Assign to me button.
Installation
Overview
Work a queue by the clock, with this support tickets table for React with React Aria. A helpdesk's ten open tickets sit in a native table inside a window of fixed height, sorted by the time each has left on its service clock, soonest first. The time left is worked out from a fixed "now" and each ticket's due instant: "1 h 20 m left", or a clock with an alert and "Breached by 35 m", so a breach is a glyph and words and never only a colour. The top bar counts the breached tickets, an "Assigned to" Native Select narrows the queue to anyone, you or nobody, and a ticket nobody owns has an Assign to me button that takes it (a ticket you own has Unassign). A polite line at the foot says what changed. The queue scrolls inside the window, which never changes height; on a phone the customer folds into the ticket's cell and the assignee moves under the title. It's built from a native table, Native Select, Button, Avatar, Badge, Empty and Guides. For helpdesks, ticket queues, on-call lists and any work with a deadline.
FAQ
Where does the time left come from?
Each ticket has a due instant in the data, and the file has one typed AS_OF that stands for "now". The minutes between them are turned into two units ("1 h 20 m", "3 d 2 h"); a negative number is a breach and reads "Breached by" followed by how long. Nothing is read from the visitor's clock, so the page looks the same each time it loads. To make it live, replace AS_OF with the current time and re-render on a timer.
Why does the order never change when I assign a ticket?
The queue is sorted by the due instant, which assigning does not touch. Only the Assigned to filter changes which rows are shown, and when an action makes a row leave the current view, focus moves to the queue so the keyboard is not lost.
How is a breach shown without colour?
A breached ticket has a clock-with-alert glyph, the words "Breached by" and a heavier weight, and its row has a faint foreground tint. A ticket still inside its time has a plain clock and "left". The top bar says how many are breached.
What about phones and tablets?
Below the medium breakpoint the Customer column folds into the line under the subject. Below the small one the Assigned to column folds into a line under that, with the same Assign to me button. The window keeps its height and the queue scrolls inside it.