# ClinicDashboard
> Front-desk overview with waiting count and longest wait, doctors on duty, room use, a card per room and a row per doctor, each state shown with an icon and a word.
Source: https://docs.nasaqui.com/components/clinic-dashboard
## Install
```bash
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 use
- The reception or clinic manager screen.
## When not to use
- Detailed analytics over time: use charts.
## Import
```tsx
import { ClinicDashboard } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"
```
## Quick start
```tsx
import { ClinicDashboard } from "@fadymondy/nasaq/web";
```
## Anatomy
```
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
```
## API
Every `div` prop is passed through unless noted.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `rooms` | `ClinicRoom[]` | `required` | free, busy, cleaning or closed. |
| `doctors` | `ClinicDoctor[]` | `required` | With status, shift and waiting count. |
| `queuedAt` | `number[]` | `required` | When each waiting patient joined (epoch ms). |
| `connection, updatedAt` | | `"live"` | Live indicator. |
| `onRoomSelect, onDoctorSelect` | `callbacks` | | Make room cards and doctor rows clickable. |
| `now, labels` | | | For stories; override strings. |
## Examples
**Extra content**
```tsx
```
## Accessibility
- Room and doctor states use an icon and a word.
- Room cards are buttons only when onRoomSelect is set.
## RTL & i18n
- 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 & tokens
- 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'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
- [`clinic-queue`](https://docs.nasaqui.com/components/clinic-queue)
- [`lobby-display`](https://docs.nasaqui.com/components/lobby-display)
- [`stat-card`](https://docs.nasaqui.com/components/stat-card)
## Lab
https://docs.nasaqui.com/?path=/docs/components-healthcare-clinic-dashboard--docs
## Code
### React
```tsx
import { ClinicDashboard } from "@fadymondy/nasaq/web";
```
### shadcn
```tsx
import { ClinicDashboard } from "@/components/ui/clinic-dashboard";
```
### Vue
```vue
```
### Blade
```blade
@php
$t = now()->getTimestamp() * 1000;
$rooms = [
['id' => 'r1', 'name' => 'Room 1', 'status' => 'busy', 'doctorId' => 'd1', 'ticket' => 'A-014', 'since' => $t - 12 * 60000],
['id' => 'r2', 'name' => 'Room 2', 'status' => 'busy', 'doctorId' => 'd2', 'ticket' => 'A-015', 'since' => $t - 4 * 60000],
['id' => 'r3', 'name' => 'Room 3', 'status' => 'free'],
['id' => 'r4', 'name' => 'Room 4', 'status' => 'cleaning'],
['id' => 'r5', 'name' => 'Room 5', 'status' => 'closed'],
];
$doctors = [
['id' => 'd1', 'name' => 'Dr. Mona Saleh', 'specialty' => 'Family medicine', 'status' => 'in_visit', 'roomId' => 'r1', 'shift' => ['start' => '08:00', 'end' => '16:00'], 'waiting' => 3],
['id' => 'd2', 'name' => 'Dr. Karim Adel', 'specialty' => 'Pediatrics', 'status' => 'in_visit', 'roomId' => 'r2', 'shift' => ['start' => '08:00', 'end' => '16:00'], 'waiting' => 2],
['id' => 'd3', 'name' => 'Dr. Huda Nabil', 'specialty' => 'Dermatology', 'status' => 'break', 'shift' => ['start' => '08:00', 'end' => '16:00'], 'waiting' => 0],
];
$queuedAt = [$t - 5 * 60000, $t - 9 * 60000, $t - 14 * 60000, $t - 2 * 60000, $t - 20 * 60000];
@endphp
```
### HTML + Alpine
```html