Job booking setup

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

Online booking for a field-service company, set up from three sides that feed one booking form. Services: each priced and timed per unit with whether it reaches the form (or why not: online booking off, nobody can be booked, can't be saved); the editor sets price, duration per unit (15 minutes to 12 hours), a quantity range and who can be booked, with a live customer preview at a chosen quantity (the units drawn as one bar, the exact total time and price, the people it shows with); a newer save by someone else is said and the draft kept. Booking rules: how soon (business days), how often slots start and what's kept between visits (a fixed gap, the estimated drive, or nothing), previewed on one person's real day with visits, calendar events (never blocking) and every start offered or hidden with its reason in words; drive times are labelled estimates, and no address, an address outside the area and a form that never asks for an address each say what they do. Team hours: who can be booked online and each person's week on availability-rule-editor (reversed or overlapping ranges named by day keep Save off), beside the people who could take each start of a day.

Use it for

A home or field-service company deciding what customers can book online, when, and with whom.
Judging a booking rule by the slots it offers and hides on a real day.

Not for

The customer's own booking flow (job-booking).
A clinic's appointments and practitioners (booking-setup).

Anatomy

bar: the company, the time zone in words, Services, Booking rules or Team hours
services: the list with time and price per unit and a state chip; the editor (name, unit price, description, online booking, duration per unit, quantity range, who can be booked, Cancel and Save); what a customer sees (quantity, the units as one bar, the math, the total, whether it shows on the form)
booking rules: earliest bookable day, slot interval, between visits (gap, drive time or none) with its value, Save rules; a preview of one person's day for a new visit at an address: hours, visits and events on a lane, a tick per start (offered or hidden), the estimated drive for the pointed start, offered starts and hidden runs with their reasons
team hours: people with their week and whether they can be booked online; the chosen person's hours on availability-rule-editor with problems named by day; who could take each start of a day and what's on their calendars (blocks or doesn't)

States

service: on the form, not bookable online, nobody can be booked, invalid duration, invalid quantity range, longer than a day, unsaved, saving, saved, conflict (load theirs or save over), failed
rules: fixed gap, drive time, no gap, before the first bookable day, outside the area, no address, no estimate, the form doesn't ask for an address (Save off), first visit of the day (drive from the yard), after an overnight job, saved, failed
team: day off, time off, invalid range (Save off), nobody can take a start, saving, saved, conflict
empty: no bookable services yet
narrow room: columns stack

Keyboard

Tab reaches each service, person, day and start; Enter or Space picks it; focusing a start shows why it's offered or hidden

Motion

A unit grows into the customer's bar as the quantity rises; the pointed start's ghost and its estimated drive fade in. Nothing runs at rest.

Props

Prop	Type	Default	Description
`company` (required)	`string`	—	The company's name, shown in the bar.
`zone` (required)	`string`	—	The time zone the business runs in, in words ("London time").
`currency` (required)	`string`	—	ISO 4217 code prices are in.
`services`	`BookableService[]`	—
`defaultServices`	`BookableService[]`	—
`onServicesChange`	`((services: BookableService[]) => void)`	—
`staff`	`StaffMember[]`	—
`defaultStaff`	`StaffMember[]`	—
`onStaffChange`	`((staff: StaffMember[]) => void)`	—
`policy`	`BookingPolicy`	—
`defaultPolicy`	`BookingPolicy`	—
`onPolicyChange`	`((policy: BookingPolicy) => void)`	—
`items` (required)	`DayItem[]`	—	Visits, tasks and calendar events on the team's days (the host's; events never block booking).
`areas` (required)	`ServiceArea[]`	—
`driveTimes` (required)	`DriveTimes`	—	Estimated drive minutes between areas, "base" being the yard.
`today` (required)	`string`	—	Today, ISO yyyy-mm-dd.
`opening` (required)	`{ start: string; end: string; }`	—	Opening hours, "HH:mm".
`formAsksAddress`	`boolean`	—	Whether the booking form asks for the customer's address (drive time needs it). Default true.
`previewLength`	`number`	—	Length of the visit the previews book, in minutes. Default 60.
`defaultView`	`JobBookingSetupView`	—
`defaultService`	`string`	—
`defaultServiceDraft`	`Partial<BookableService>`	—	Unsaved edits already made to the open service (a change in progress).
`defaultPreviewQuantity`	`number`	—
`defaultPolicyDraft`	`Partial<BookingPolicy>`	—
`defaultRulesPreview`	`{ person?: string \| undefined; area?: string \| null \| undefined; date?: string \| undefi…`	—
`defaultPerson`	`string`	—
`defaultHoursDraft`	`Availability`	—
`defaultTeamDate`	`string`	—
`onSaveService`	`SaveService`	—	Saves a service; reject with `{ conflict, theirs }` when someone saved a newer revision (`force` overwrites).
`onSavePolicy`	`((policy: BookingPolicy) => Promise<BookingPolicy>)`	—
`onSaveStaff`	`((person: StaffMember) => Promise<StaffMember>)`	—	Saves a person's hours; reject with `{ conflict }` when they changed meanwhile.
`locale`	`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

segmented-control
number-field
switch
checkbox
input
textarea
radio-cards
select
availability-rule-editor
button

Dependencies

lucide-react

Import

import { JobBookingSetup } from "@beamline/job-booking-setup";

Get it

Job booking setup 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