ClinicDashboard

Code

import { ClinicDashboard } from "@fadymondy/nasaq/web";<ClinicDashboard rooms={rooms} doctors={doctors} queuedAt={waitingSince} />

Healthcare · beta

Live examples and controls: ClinicDashboard in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/clinic-dashboard.json

The figures reception needs: how many are waiting and for how long, which doctors are on duty, and which rooms are free. It is read only; selecting a room or doctor calls back. The pure helpers (doctorsOnDuty, roomCounts, roomOccupancy, waitingFigures) are exported.

When to useCopy Anchor Link

• The reception or clinic manager screen.

When not to useCopy Anchor Link

• Detailed analytics over time: use charts.

ImportCopy Anchor Link

import { ClinicDashboard } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

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

<ClinicDashboard rooms={rooms} doctors={doctors} queuedAt={waitingSince} />

AnatomyCopy Anchor Link

ClinicDashboard               data-slot="clinic-dashboard"
├─ StatGrid                   waiting, longest wait, on duty, occupancy
├─ rooms                      one card per room, with Progress for use
└─ doctors card               on-duty doctors

APICopy Anchor Link

Every div prop is passed through unless noted.

ExamplesCopy Anchor Link

Extra content

<ClinicDashboard rooms={rooms} doctors={doctors} queuedAt={queuedAt}>
  <MyChart />
</ClinicDashboard>

AccessibilityCopy Anchor Link

• Room and doctor states use an icon and a word.
• Room cards are buttons only when onRoomSelect is set.

RTL & i18nCopy Anchor Link

• Cards and rows mirror. Tickets and shift times 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-dashboard"] 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

• clinic-queue
• lobby-display
• stat-card

LabCopy Anchor Link

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