shadcn.io is not affiliated with official shadcn/ui
IT Ticket Queue Kanban Block for Ark UI
A queue and three agent columns of twelve compact IT tickets with a priority glyph and word, where each agent holds at most three open tickets and the fourth is refused.
Installation
Overview
Share out an IT support queue with this ticket board for React with Ark UI. A hairline frame with a plus mark on each corner holds five columns that share their lines: a Queue, one column for each of three agents, and Resolved, with twelve compact tickets. Each card shows a mono ticket number, a priority drawn as a glyph and a word in an outline Badge (Urgent, High, Normal or Low, with Urgent solid) and a one-line title. Each agent's head shows how many tickets they hold of three, and "Full" at the cap. The cap is the rule: a ticket that would be an agent's fourth is refused, and the refusal names the agent and says to resolve one of theirs or pick another. The sentence under the heading counts what is waiting and how many agents are full. A card moves by dragging its grip, by keyboard, or from its Dropdown Menu under "Move to", which is the quickest way to hand a ticket to someone. A polite status line in the foot reports each move, and Reset puts the queue back. The frame is ruled by Guides. On a phone the columns scroll sideways in one named region with the next column showing. For IT desks, facilities teams and any app that shares work with a limit.
FAQ
How do I fill it with my own tickets and agents?
Edit COLUMNS, AGENTS and START. A column has an id and a name; AGENTS lists the ids of the columns that are people. A ticket has an id, the column it starts in, a ref, a title and a priority of Urgent, High, Normal or Low. Counts and sentences are worked out from them.
How does the cap work, and how do I change it?
CAP is three. The rule is the function refusalOf: it refuses a move into an agent's column when that column already holds CAP tickets, and the status line names the agent. The grip's drop, the keyboard steps and the menu all ask it. Change CAP, or make it a number for each agent, to match your team.
How is priority shown without colour?
As a glyph and a word together: double chevrons for Urgent, one up for High, a dash for Normal and a chevron down for Low, with the word beside it. Urgent is also drawn solid. A screen reader hears the word, and the glyph is decoration.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the card'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. Every step is announced in the status line, for example "Q-3042, Joss Verhaege, position 2 of 3".
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 a "Move to" choice for every column and the current one ticked. It goes through the same cap as the grip and the keys, so no route gets around it. Choosing one moves the card, puts focus on it in its new place and says so in the status line.
What stays in the demo, and how do I save the changes?
Everything: the cards live in the component's state, nothing is sent anywhere, 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 (the menu, a drop and the block's own buttons), and update the cards from the response. The product, the agents and the tickets are made up.
How does it work 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. 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. The status line is still read out to screen readers.