Reservation desk
A React block (a whole screen) in Beamline's Hotel & restaurant app.
A front desk's bookings without a room for a night, beside the rooms that could take them: bookings grouped by room type with their stay, party and needs; choosing one or several lights the rooms that fit, each room's nights drawn against the stay (taken in ink, the stay outlined, a clash red) and a room taken over the stay or missing a need says so on the room; the one booking being placed is shown in full above the bar; the pairing is reviewed before Assign, and a room taken meanwhile keeps the booking unassigned with the conflict said. A booking can move to another room type: the two compared, then the quote with Keep old rate and Apply new rate as separate choices, an expired quote refreshed before anything changes.
Use it for
- Matching bookings to units before arrival: a hotel's or an inn's rooms, a hostel's beds, a vacation rental's units, a campsite's pitches.
- Changing what a booking is for (a room type, a pitch size) when the price decision must be made apart from the change.
Not for
- Dragging bookings across a calendar of rooms and nights (the time-axis signature).
- Waiting requests matched to an opening in a day (waitlist-desk).
- Appointments in a day's book (appointment-book).
Anatomy
- header: the product's mark, the title, the night
- queue (side): bookings by room type, each with a checkbox, the guest, the stay and nights, the party, needs as tags, and Change room type
- rooms: the nights around the stay (tonight marked); for the chosen bookings' types, each room with its place, its nights (taken, the stay, a clash) and either Free for the stay or why not (occupied until, booked from, no step-free access, taken meanwhile); a room pressed to pick it for one booking; one booking chosen: its guest and party, room type, stay, needs, rate plan and total over the bar
- bar (sticky): the proposed pairs (room → guest), Clear, Assign; or why assigning is not allowed
- room type change (in the rooms' place): now and the stay, Move to (select), the quote (total now, total at the new type, the difference, the rate plan), Keep old rate and Apply new rate each with what it means; an expired quote with Get a new quote
States
- empty queue
- selected booking
- multiple selection, paired in order
- no matching room
- assignment pending
- assigned (said)
- conflict: the room taken meanwhile, the booking unassigned
- assign failed
- privilege unavailable (assign, change type)
- type confirmation, quote loading, rate decision, expired quote, quote failed, commit failed, committed
- loading
- phone: the queue, then the rooms with Back
- right to left: the panes and arrows mirror
- reduced motion: through the tokens
Keyboard
- Tab through each booking's checkbox and Change room type, each room, Clear and Assign
- Space ticks a booking; Enter or Space picks a room
Motion
None of its own: choosing changes the rooms at once; the buttons' pending states come from Button.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
date (required) | string | — | The night the queue is for, an ISO date. |
roomTypes (required) | DeskRoomType[] | — | |
rooms (required) | DeskRoom[] | — | |
features | DeskFeature[] | — | |
defaultBookings | DeskBooking[] | — | The bookings without a room; the block removes one once its assignment or move is answered. |
defaultChosen | string[] | — | Bookings chosen at the start (a booking opened from elsewhere). |
onAssign | ((pairs: { bookingId: string; roomId: string; }[]) => Promise<unknown>) | — | Assign rooms. Reject with an Error named "ConflictError" whose `roomId` names a room taken meanwhile: the booking stays unassigned and the room is marked; any other rejection says nothing changed. |
onQuote | ((bookingId: string, toTypeId: string) => Promise<DeskQuote>) | — | A quote for moving a booking to another type. Reject to say no quote could be had. |
onChangeType | ((change: { bookingId: string; toTypeId: string; quoteId: string; decision: "apply" | "… | — | Commit the move with its rate decision; `keep` keeps the booked total. Reject to keep the booking as it was. |
canAssign | boolean | — | false: the queue can be read, nothing assigned (said where the action is). |
canChangeType | boolean | — | false: a room type can't be changed (said in the change panel). |
now | number | — | The clock, for a quote's expiry. Default the device's. |
currency | string | — | |
timeZone | string | — | Time zone a quote's expiry is said in. |
loading | boolean | — | |
product | string | — | Your product's name, shown as its mark. |
className | string | — | Classes on the documented visual root; no override by default. |
ref | Ref<HTMLDivElement> | — | Receives the documented native target or imperative handle; omitted by default. |
defaultChanging | { bookingId: string; toTypeId: string; } | null | — | A room type change open at the start: the booking and the type it moves to (its quote is asked for at once). |
Built from
- Avatar
- Bottom sheet
- Button
- Calendar
- Checkbox
- Copy button
- Description list
- Empty state
- Glow
- Kbd
- Label
- Number field
- Search field
- Segmented control
- Select
- Skeleton
- Spinner
- Text morph
- Tooltip
Dependencies
lucide-react
Import
import { ReservationDesk } from "@beamline/reservation-desk";Get it
Reservation desk is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent
More in Hotel & restaurant
- Table service: A restaurant table's service in three places sharing one order. The floor: tables placed on a plan by drag, arrow keys or typed numbers (Shift and an…
- Counter service: A counter and its kitchen. The counter: the order on the left (its name, eat here / takeaway / drive-through, each line with its options and quantity…
- Room readiness: Housekeeping's rooms for the day: condition, occupancy, the front desk's plan (arriving with its time or not known, departing, staying on), who is…
- Stay folio: A stay's folio: the chosen folio's lines filtered by kind, posted and pending said, voided lines on request, every row in the ledger's currency; beside…
- Guest messages: Conversations with guests beside the booking each is about, for a host stand, salon front desk or hotel. Guests waiting for an answer come first with how…
- Shift briefing: A team's pre-shift briefing for a restaurant service (or any shift with bookings): the venue, the service and when its reservation snapshot was read, an…
- Map explorer: A map with one operational layer over real ground (an optional map base: relief, lakes, streams, woods, roads), explored without losing your place; its…
- Page header: The top of a record or project page: breadcrumb, title with status, description and meta, a primary action with secondary actions that fold into a More…
- Turntable review: A 3D asset reviewed on a turntable. The object large at the angle in view with front, side and back said, standing on a plate whose rim shows the twelve…