# BookingManage > A patient's own booking page - QR ticket with code, add to calendar, reschedule in a dialog and cancel with the late fee stated, all following a cancel and reschedule policy. Source: https://docs.nasaqui.com/components/booking-manage ## Install ```bash npx shadcn@latest add https://docs.nasaqui.com/r/booking-manage.json ``` What the patient sees after booking and when they come back to change it. BookingTicket is the ticket on its own: a QR that holds booking:CODE, the code as text, the details, a .ics download and a Google Calendar link. ## When to use - A booking confirmation page or a manage link in an email. - Enforcing a cancellation window and a late fee. ## When not to use - Staff tools: use BookingPipeline. - Booking for the first time: use BookingFlow. ## Import ```tsx import { BookingTicket, BookingManage } from "@fadymondy/nasaq/web"; // inside this monorepo: "@nasaq/web" ``` ## Quick start ```tsx import { BookingManage } from "@fadymondy/nasaq/web"; api.slots(booking)} onReschedule={(start) => api.reschedule(booking.id, start)} onCancel={() => api.cancel(booking.id)} /> ``` ## Anatomy ``` BookingManage data-slot="booking-manage" ├─ BookingTicket QR, code, details, calendar links ├─ policy text ├─ Reschedule button opens a Dialog with BookingSlots └─ Cancel button ConfirmButton; the fee is stated first ``` ## API Every `div` prop is passed through unless noted. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `booking` | `BookingRecord` | `required` | The booking shown. | | `policy` | `{ cancelHours, rescheduleHours?, lateFeePercent? }` | `required` | Free cancellation window, reschedule window and the late fee. | | `getSlots` | `(booking) => Promise` | `required` | Times to move to, called when the dialog opens. | | `onReschedule` | `(start) => Promise` | `required` | Move the booking. | | `onCancel` | `() => Promise` | `required` | Cancel it. | | `now` | `Date` | the clock | For stories and tests. | | `labels` | `Partial` | | Override any string. | ## Examples **The ticket alone** ```tsx import { BookingTicket } from "@fadymondy/nasaq/web"; ``` ## Accessibility - The QR has an accessible name and the code is also plain text. - Cancel names the fee before the patient confirms. - Buttons that the policy disables say why in text. ## RTL & i18n - Codes and phone numbers are left to right; the dialog and buttons mirror. - 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="booking-manage"]` 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 - [`booking-flow`](https://docs.nasaqui.com/components/booking-flow) - [`booking-slots`](https://docs.nasaqui.com/components/booking-slots) - [`booking-pipeline`](https://docs.nasaqui.com/components/booking-pipeline) - [`qr-code`](https://docs.nasaqui.com/components/qr-code) ## Lab https://docs.nasaqui.com/?path=/docs/components-bookings-booking-manage--docs ## Code ### React ```tsx import { BookingManage } from "@fadymondy/nasaq/web"; api.slots(booking)} onReschedule={(start) => api.reschedule(booking.id, start)} onCancel={() => api.cancel(booking.id)} /> ``` ### shadcn ```tsx import { BookingManage } from "@/components/ui/booking-manage"; api.slots(booking)} onReschedule={(start) => api.reschedule(booking.id, start)} onCancel={() => api.cancel(booking.id)} /> ``` ### Vue ```vue ``` ### Blade ```blade @php $start = now()->addDays(5)->setTime(10, 0); $booking = [ 'id' => 'b1', 'code' => 'NQ-4821', 'status' => 'confirmed', 'start' => $start->toIso8601String(), 'end' => $start->addMinutes(30)->toIso8601String(), 'service' => 'Dental check-up', 'provider' => 'Dr. Omar Nasser', 'location' => 'Riyadh clinic', 'patient' => 'Huda Salem', 'phone' => '+966 50 123 4567', 'price' => 60, 'payment' => 'visit', ]; $slots = collect([9, 10, 11, 13, 14])->map(fn ($h) => ['start' => $start->setTime($h, 0)->format('Y-m-d\TH:i'), 'state' => $h === 10 ? 'full' : 'available'])->all(); @endphp
``` ### HTML + Alpine ```html

Dental check-up

Confirmed
When
Sunday, October 4, 2026
10:00 AM – 10:30 AM
With
Dr. Omar Nasser
Where
Riyadh clinic
Patient
Huda Salem
Phone
+966 50 123 4567
Payment
Pay at the visit · $60.00
Booking code NQ-4821

Show this code at reception.

Download .ics Google Calendar

You can cancel for free up to 24 hours before the visit.

Dental check-up

Done
When
Sunday, October 4, 2026
10:00 AM – 10:30 AM
With
Dr. Omar Nasser
Where
Riyadh clinic
Patient
Huda Salem
Phone
+966 50 123 4567
Payment
Paid online · $60.00
Booking code NQ-9000

Show this code at reception.

```