BookingPipeline

Code

import { BookingPipeline } from "@fadymondy/nasaq/web";<BookingPipeline  status={booking.status}  history={booking.history}  onAdvance={async (to) => {    const r = await api.move(booking.id, to);    if (!r.ok) return { error: r.message };  }}/>

Bookings · beta

Live examples and controls: BookingPipeline in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/booking-pipeline.json

The status of one booking as a stepper, the moves allowed from where it is, and a history. The rules come from the pure booking-math functions (canTransition, nextStatuses), so a board and a form always agree. BookingStatusBadge shows the same status in a table.

When to useCopy Anchor Link

• Reception moves a booking along: confirm, check in, start, finish.
• Showing the history of a booking to staff.

When not to useCopy Anchor Link

• A patient looking at their own booking: use BookingManage.
• Ordering several bookings on a board: use KanbanBoard with canTransition to validate drops.

ImportCopy Anchor Link

import { BOOKING_STATUS_LABELS, BookingStatusBadge, BookingPipeline } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

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

<BookingPipeline
  status={booking.status}
  history={booking.history}
  onAdvance={async (to) => {
    const r = await api.move(booking.id, to);
    if (!r.ok) return { error: r.message };
  }}
/>

AnatomyCopy Anchor Link

BookingPipeline               data-slot="booking-pipeline"
├─ Stepper                    five stages; no-show or cancelled marks the stop point
├─ actions                    buttons for the moves allowed; no-show and cancel ask first
└─ history                    Timeline, newest first
BookingStatusBadge            data-slot="booking-status-badge"

APICopy Anchor Link

Every div prop is passed through unless noted.

ExamplesCopy Anchor Link

Show a status in a table cell

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

<BookingStatusBadge status={row.status} />

AccessibilityCopy Anchor Link

• The stepper marks the current stage. A stop (no-show, cancelled) is shown with an icon and text.
• Destructive moves ask for confirmation in an alert dialog.
• A failed move shows an alert and the status stays where it was.

RTL & i18nCopy Anchor Link

• Stages run right to left in Arabic; arrows mirror. Times use Latin digits by default.
• 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="booking-pipeline"] 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

• booking-manage
• clinic-schedule
• kanban-board
• stepper
• timeline

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-bookings-booking-pipeline--docs