Linked appointments

A React block (a whole screen) in Beamline's Events & bookings app.

A drop-off and a pickup kept as one linked pair on the week's calendar (the shared event calendar, day view on a phone), with the car's stay drawn between them as an all-day band. Moving either one asks whether the other follows by the same amount (Move both, Only this one, Put it back); a pickup before its drop-off, or a drop-off after its pickup, is refused with the time it would cross; the system's refusals undo the move and are said. The chosen pair's drop-off, pickup and nights in the shop, and where the customer goes meanwhile: a bay, a loaner or the lounge, a loaner already out with someone else on those days said with who and until when; bookings needing attention counted and drawn on warning.

Use it for

Two appointments that belong together (drop-off and pickup, check-in and check-out) moved as a pair.
Bookings that hold a resource (a loaner, a bay) for the time between them.

Not for

A practice's day of appointments (appointment-book).
Customers booking a job themselves (job-booking).

Anatomy

header: the tool's mark, title, bookings needing attention, what saved or was refused
calendar: stays as all-day bands, drop-offs and pickups as events, flagged ones on warning
side: vehicle, customer and order, drop-off, pickup, nights; the move question; where the customer goes; a loaner taken

States

pair same day or over nights; loaner, bay, lounge or not decided; loaner taken
moved and asked, both moved, only one, put back, refused (crossing or by the system)
nothing chosen
phone: day view, details below
right to left: mirrored, arrow keys follow
reduced motion: through the shared calendar

Keyboard

Space picks up an event, arrows move it by a step or a day, Space drops; Enter opens its pair; Tab through the question and the place

Motion

Events move through the shared calendar; nothing runs at rest.

Props

Prop	Type	Default	Description
`pairs`	`LinkedPair[]`	—
`defaultPairs`	`LinkedPair[]`	—
`onPairsChange`	`((pairs: LinkedPair[]) => void)`	—
`bays` (required)	`string[]`	—
`loaners` (required)	`string[]`	—
`onSave` (required)	`(pair: LinkedPair) => Promise<{ ok: true; } \| { refused: string; }>`	—
`week` (required)	`string`	—	The week shown; "now" for the calendar.
`now` (required)	`string`	—
`defaultSelected`	`string`	—
`product`	`string`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Dependencies

lucide-react

Import

import { LinkedAppointments } from "@beamline/linked-appointments";

Get it

Linked appointments 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