shadcn.io is not affiliated with official shadcn/ui
Priority Queue CRUD Block for Vue
A support queue ordered by priority and then age, where every row says why it sits there, a quick line adds an item with a priority, Raise and Lower move it at once, and Resolve leaves an Undo placeholder instead of deleting.
Installation
Overview
Keep a help desk's next answer obvious, with this priority queue for Vue with Ark UI. A hairline frame with a plus mark on each corner opens on four counts, Urgent, High, Normal and Low, derived from the open items. Under them a quick line is an Input where an item and Enter add it, with a Segment Group for its priority and the Add button as the only Shine Button. Eight items sit in a frame of fixed height, ordered by priority and then by age in days from a fixed date, and each row says so: "Why here: Urgent, 3 days old". Raise and Lower change the priority at once and the status line says where the item landed ("Moved to 2: Urgent"). Resolve does not delete: the row turns into a placeholder of the same height, "Resolved Refund for order 1042", with an Undo, and the header band counts "Resolved today". The band is ruled by Guides, and an Empty state shows when the queue is clear. For help desks, review queues and any list whose order is a rule people should be able to read.
FAQ
How is the order worked out?
compareItems sorts by priority (LEVELS: Urgent, High, Normal, Low), then by the day the item was opened, oldest first, then by id. Age is counted in days from the AS_OF constant, so nothing reads the clock. The "Why here" line is written from the same two facts, so it can never disagree with the order.
What do Raise and Lower do?
They change the priority by one step and re-sort the queue at once; the item lands among its new peers by age. The status line says its new place and priority, and focus stays on the same button of the same item. At the ends Raise on an Urgent item and Lower on a Low one answer in the status line and change nothing.
Why is there no delete?
A queue item is answered, not discarded. Resolve turns the row into a placeholder of the same height with an Undo, so nothing below it jumps. The next action settles the placeholder for good, and "Resolved today" keeps counting it. Undo puts the item back at its sorted place.
What stays local, and how do I wire a real save?
Items live in state in this tab and a reload restores the eight; nothing is sent. In your app call your API from add, move and resolve and keep Undo as a reopen call. The sort is the only rule the block owns.