ClinicQueue

Code

import { ClinicQueue } from "@fadymondy/nasaq/web";<ClinicQueue entries={queue} onAction={async (action, id) => api.queue(action, id)} />

Healthcare · beta

Live examples and controls: ClinicQueue in the lab.

InstallCopy Anchor Link

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 useCopy Anchor Link

• The doctor or nurse works through the waiting list.
• Reception calls patients to rooms.

When not to useCopy Anchor Link

• A shared board: use LobbyDisplay.

ImportCopy Anchor Link

import { ClinicQueueAction, ClinicQueue } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { ClinicQueue } from "@fadymondy/nasaq/web";

<ClinicQueue entries={queue} onAction={async (action, id) => api.queue(action, id)} />

AnatomyCopy Anchor Link

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

APICopy Anchor Link

Every div prop is passed through unless noted.

ExamplesCopy Anchor Link

Apply the rules in your handler

import { callNext, skipTicket } from "@fadymondy/nasaq/web";

const change = action === "call-next" ? callNext(list, { room: "1", at: Date.now() }) : skipTicket(list, id);

AccessibilityCopy Anchor Link

• Actions are buttons with text. The table has a label and row names.
• An unanswered call shows a warning alert with the ticket.

RTL & i18nCopy Anchor Link

• 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 & tokensCopy Anchor Link

• 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'tCopy Anchor Link

• 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.

RelatedCopy Anchor Link

• waiting-screen
• lobby-display
• current-visit
• data-table

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-healthcare-clinic-queue--docs