shadcn.io is not affiliated with official shadcn/ui
Appointment Queue Calendar Block for Ark UI
A walk-in queue of eight people where every wait is derived from the visit in progress, an average-visit select and an Urgent first switch, and Call next finishes one visit and starts the next.
Installation
Overview
Show a front desk who is next and when, with this appointment queue for React with Ark UI. A hairline frame with a plus mark on each corner opens with three counts (waiting, with the nurse, seen) and a band of controls: the average visit in a Native Select (10, 12 or 15 minutes), an Urgent first Switch and a Segment Group that shows Active, Seen or All. Below, eight people are listed with their check-in time, reason and a state marked by a shape and a word: seen, with the nurse since 09:22, or waiting. Waits are never typed: the person in progress started at 09:22, and each waiting person gets "About 09:34" from that time and the average visit. Turn on Urgent first and the waiting list re-orders and the times shift. Call next, the Shine Button in the header, finishes the current visit, starts the next person and works every time out again. When nobody is left an Empty state keeps the list's height. The bands are ruled by Guides. It's built from Native Select, Switch, Segment Group, Badge, Empty, Shine Button and Guides, with a CSS entrance only. For clinics, repair counters and any walk-in service.
FAQ
How do I fill it with my queue?
Edit PEOPLE, in check-in order, each with a name, a reason, a checkIn time and urgent. SEEN_AT_LOAD lists who is already done and when, as "id|08:52", and the initial current and started state say who is with the nurse and since when. Everything else, including the counts and every expected time, is worked out from those.
How is a wait worked out?
The first person waiting is expected one average visit after the current visit started, the second two visits after, and so on: "About 09:34" is 09:22 plus 12 minutes. Change the average and every time moves. These are estimates; real visits vary, so keep the word About.
What does Urgent first do?
It moves the people flagged urgent to the front of the waiting list, each group still in check-in order, so their expected times come forward and everyone else's move back. It only changes the order of those waiting; the person already in progress is not moved.
What does Call next do?
It marks the current visit as seen at the time it was due to end, starts the first person waiting from that moment, and updates the counts, the times and the status line. When nobody is waiting it says so, and it finishes the last visit. Nothing is sent or saved, and the queue resets on reload.