Rooms & equipment

A React block (a whole screen) in Beamline's Construction app.

A salon's or clinic's rooms and equipment and what its services need of them: resources by group at each location, how many appointments each holds at once (one, a number set on its row of places, or no limit) kept apart from when it can be used (always, or hours), and the services that need it; each service's requirements (a group, any member including later ones or chosen ones, whether a booking takes the whole resource); and a time trial: drag a booking along the day and every requirement says which member would take it, or why none can (full until, closed until), with what online booking and the desk do then.

Use it for

Setting up what a booking needs beyond a person: treatment rooms, machines, a lounge with several places, a steam room with hours; salons, spas, clinics, studios, rental desks.
Checking why a service can't be booked at a time: which room or machine is the one in the way.

Not for

Explaining every closed time of one service across a week (availability-layers).
A person's own bookable hours (availability-rule-editor).
Fitting jobs into days of station capacity (capacity-terrain).

Anatomy

side list: the location, then each group's resources at it with how many they hold at once, then the services with how many requirements each
resource: name, group and location; Appointments at once (One, A number, No limit) drawn as a row of places whose end is a grip (the number field its twin), No limit drawn as a row running off its end, capacity not known said; When it can be used (Always, or specific days and times in the availability rule editor), apart from capacity; the services that need it; Save with Unsaved
service: its requirements joined by and, each a group with Any of N (members added later too) or Chosen ones, and Takes the whole resource; Add a requirement; no requirements said
time trial: the verdict (Bookable at 3:00 PM: Room 3 and Diode laser, or Not bookable at 2:15 PM: no Laser free), what online booking does then and the salon's own policy for the desk (Book at the desk anyway, or Can't be booked at this time, or nothing when the app gives none); the booking as a card held and dragged along the day with its times on it, a bracket under it at its true length; every member's lane across the card's width (closed hours labelled, appointments as quiet tiles that name who and when on hover and focus), the tried booking drawn on each lane (the taker in the success tone, a clash in the danger tone); each lane's name with its state under it (Free, Full until, Closed until); each requirement's taker (Room 3 takes it) or None free

States

single capacity
limited capacity (places)
no limit with its hours kept (a schedule gate)
restricted hours
capacity not known (never read as free)
no services need it
permission denied (look, don't change)
unsaved change, save refused with the edit kept, saved
any member (dynamic) and chosen members
exclusive reservation
missing resource (no members: Save waits)
online booking blocked; the desk's override from your app, or said as unknown
loading

Keyboard

the side list: Tab and Enter
places: the grip is a slider, ←/→ by one place; the number field types it
the trial's booking is a slider: ←/→ by 15 minutes, Shift by an hour, Home and End; held, Escape puts it back; appointments in the lanes take focus and say who and when

Motion

Places fill and empty in the fast duration as the count changes; the tried booking, its bracket and its span on every lane slide to a new start by translate in the fast duration (held, they follow the hand by quarter hours); nothing moves at rest; reduced motion places at once.

Props

Prop	Type	Default	Description
`locations / groups` (required)	`SetupLocation[] / ResourceGroup[]`	—	The business's locations and its kinds of resource (a group spans locations; each resource belongs to one).
`resources / defaultResources / onResourcesChange`	`SetupResource[]`	—	Each with its group, location, capacity ({ mode: "single" }, { mode: "limited", count }, { mode: "unlimited" }, or null while not known) and hours (an Availability, or null for always).
`services / defaultServices / onServicesChange`	`SetupService[]`	—	Each with its minutes, location and requirements ({ groupId, selection: "all" \| "explicit", resourceIds, exclusive }); a service needs every requirement, each met by one member.
`open / defaultOpen / onOpenChange`	`string`	—	open: What is open: "resource:<id>" or "service:<id>". defaultOpen: Initial open state when uncontrolled; defaults to false. onOpenChange: Reports an open-state change; no callback by default.
`onSaveResource / onSaveService`	`(item) => Promise`	—	onSaveResource: Save a resource (its capacity, hours, location); a rejection keeps the edit with the reason. onSaveService: Save a service's requirements; a rejection keeps them with the reason.
`busy / trialDate` (required)	`Busy[] / string`	—	busy: The appointments already using resources on `trialDate`, for the time trial. trialDate: The day the time trial is drawn for ("2026-11-06").
`deskOverride / onDeskBooking`	`boolean \| null / (serviceId, start) => void`	—	deskOverride: Your booking policy for a time a requirement can't meet; online booking never offers it. true: the desk may book it anyway (the trial offers "Book at the desk anyway", calling `onDeskBooking`); false: it can't be booked at all (said); null or left out: the trial says nothing about the desk. onDeskBooking: The desk books the tried time anyway (offered only when `deskOverride` is true).
`canManage / loading / product`	`boolean / boolean / string`	—	Look without changing; loading skeletons; your product's mark.
`locations` (required)	`SetupLocation[]`	—
`groups` (required)	`ResourceGroup[]`	—
`resources`	`SetupResource[]`	—
`defaultResources`	`SetupResource[]`	—
`onResourcesChange`	`((resources: SetupResource[]) => void)`	—
`services`	`SetupService[]`	—
`defaultServices`	`SetupService[]`	—
`onServicesChange`	`((services: SetupService[]) => void)`	—
`open`	`string`	—	What is open: "resource:<id>" or "service:<id>".
`defaultOpen`	`string`	—	Initial open state when uncontrolled; defaults to false.
`onOpenChange`	`((open: string) => void)`	—	Reports an open-state change; no callback by default.
`onSaveResource`	`((resource: SetupResource) => Promise<unknown>)`	—	Save a resource (its capacity, hours, location); a rejection keeps the edit with the reason.
`onSaveService`	`((service: SetupService) => Promise<unknown>)`	—	Save a service's requirements; a rejection keeps them with the reason.
`busy`	`Busy[]`	—	The appointments already using resources on `trialDate`, for the time trial.
`trialDate` (required)	`string`	—	The day the time trial is drawn for ("2026-11-06").
`canManage`	`boolean`	—	false: the person may look but not change resources (managing them needs its own permission).
`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.
`deskOverride`	`boolean \| null`	—	Your booking policy for a time a requirement can't meet; online booking never offers it. true: the desk may book it anyway (the trial offers "Book at the desk anyway", calling `onDeskBooking`); false: it can't be booked at all (said); null or left out: the trial says nothing about the desk.
`onDeskBooking`	`((serviceId: string, start: number) => void)`	—	The desk books the tried time anyway (offered only when `deskOverride` is true).

Built from

Dependencies

lucide-react

Import

import { ResourceSetup } from "@beamline/resource-setup";

Get it

Rooms & equipment 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