# ClinicQueue > The doctor's live patient queue - a big Call next button, who is called or in the room, and a table of everyone else with call, call again, skip, start, finish and put back actions. Source: https://docs.nasaqui.com/components/clinic-queue ## Install ```bash npx shadcn@latest add https://docs.nasaqui.com/r/clinic-queue.json ``` The order comes from queue-math: urgent first, then appointments, then walk-ins, first come first served in each group. Every move is a row action, so it is also in the row menu, the context menu and the keyboard. ## When to use - The doctor or nurse works through the waiting list. - Reception calls patients to rooms. ## When not to use - A shared board: use LobbyDisplay. ## Import ```tsx import { ClinicQueueAction, ClinicQueue } from "@fadymondy/nasaq/web"; // inside this monorepo: "@nasaq/web" ``` ## Quick start ```tsx import { ClinicQueue } from "@fadymondy/nasaq/web"; api.queue(action, id)} /> ``` ## Anatomy ``` ClinicQueue data-slot="clinic-queue" ├─ header next in line, QueueLiveIndicator, Call next ├─ alerts error, unanswered call ├─ active cards called and in the room, with their buttons └─ DataTable ticket, patient, priority, status, wait; rowActions ``` ## API Every `div` prop is passed through unless noted. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `entries` | `QueueEntry[]` | `required` | The queue. Pass one doctor's entries or all. | | `onAction` | `(action, id?) => Promise` | `required` | action is "call-next", "call", "recall", "skip", "start", "finish" or "no-show". | | `graceMinutes` | `number` | `5` | Minutes a call may go unanswered before a warning. | | `connection, updatedAt` | | `"live"` | Live indicator. | | `now` | `number` | | Epoch ms for stories. | | `labels` | `Partial` | | Override any string. | ## Examples **Apply the rules in your handler** ```tsx import { callNext, skipTicket } from "@fadymondy/nasaq/web"; const change = action === "call-next" ? callNext(list, { room: "1", at: Date.now() }) : skipTicket(list, id); ``` ## Accessibility - Actions are buttons with text. The table has a label and row names. - An unanswered call shows a warning alert with the ticket. ## RTL & i18n - Table columns mirror; tickets stay left to right. - Strings live in a `STRINGS = { en, ar }` object and any of them can be replaced with `labels`. The locale comes from `NasaqProvider`. ## Styling & tokens - Colours, radii and type come from `--nq-*` tokens; nothing is a raw colour. Spacing and alignment use logical classes. - Target `[data-slot="clinic-queue"]` and the inner `data-slot` parts shown in the anatomy. ## Do / Don't - Do keep the async callbacks honest: return `{ error }` so the component can show the message. - Do pass `now` in tests and stories so the output stays the same. - Don't fetch inside the component: it is presentational and takes data and callbacks. - Don't rely on colour for state: every state also has a word. ## Related - [`waiting-screen`](https://docs.nasaqui.com/components/waiting-screen) - [`lobby-display`](https://docs.nasaqui.com/components/lobby-display) - [`current-visit`](https://docs.nasaqui.com/components/current-visit) - [`data-table`](https://docs.nasaqui.com/components/data-table) ## Lab https://docs.nasaqui.com/?path=/docs/components-healthcare-clinic-queue--docs ## Code ### React ```tsx import { ClinicQueue } from "@fadymondy/nasaq/web"; api.queue(action, id)} /> ``` ### shadcn ```tsx import { ClinicQueue } from "@/components/ui/clinic-queue"; api.queue(action, id)} /> ``` ### Vue ```vue ``` ### Blade ```blade @php $t = now()->getTimestamp() * 1000; $base = ['checkedInAt' => $t - 1800000]; $queue = [ $base + ['id' => 'q1', 'ticket' => 'A-014', 'number' => 14, 'name' => 'Layla Hassan', 'status' => 'serving', 'room' => '2', 'queuedAt' => $t - 1500000, 'calledAt' => $t - 600000], $base + ['id' => 'q2', 'ticket' => 'A-015', 'number' => 15, 'name' => 'Omar Nasser', 'status' => 'called', 'room' => '2', 'priority' => 'appointment', 'queuedAt' => $t - 1200000, 'calledAt' => $t - 420000], $base + ['id' => 'q3', 'ticket' => 'A-016', 'number' => 16, 'name' => 'Sara Khalil', 'status' => 'waiting', 'priority' => 'urgent', 'queuedAt' => $t - 600000], $base + ['id' => 'q4', 'ticket' => 'A-017', 'number' => 17, 'name' => 'Hadi Mansour', 'status' => 'waiting', 'priority' => 'appointment', 'queuedAt' => $t - 500000], $base + ['id' => 'q5', 'ticket' => 'A-018', 'number' => 18, 'name' => 'Nour Aziz', 'status' => 'waiting', 'queuedAt' => $t - 300000], ]; @endphp ``` ### HTML + Alpine ```html

Patient queue

Next in line: A-016

Live

A-015 has not answered for 7 min. Call again or skip.

A-014 In visit

Layla Hassan · Room 2

A-015 Called

Omar Nasser · Room 2

Ticket

Patient

Priority

Status

Waiting

A-014

Layla Hassan

Walk-in

In visit

25 min

A-015

Omar Nasser

Appointment

Called

20 min

A-016

Sara Khalil

Urgent

Waiting

10 min

A-017

Hadi Mansour

Appointment

Waiting

8 min

A-018

Nour Aziz

Walk-in

Waiting

5 min

```