Route plan

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

A day's delivery routes in the service's zone. The day at a glance: routes, routes without a driver (warning), stops running late (danger), stops done. Each route: its colour named in words (matched to its pins on a map, never its identity), team, window, driver or Unassigned, how far it has got as one filling hue, its late stops and state. Opened, its stops pair the planned arrival with the actual time, or a forecast while it runs, and say on time, early or late in minutes, in words and tone; a stop done without a recorded time says so, never zero. Once a route starts its plan is fixed and said: moving a stop changes the order and forecasts, not the plan. A route from a hub starts with loading: hub, driver, team, window and history beside the packages, whose barcodes can be corrected until loading starts and are locked after; each package loaded or missing with a reason; finishing with one missing says so, apart from a complete load. A new route takes a name, a colour, the day, a start and an end in a zone (the end after the start), start and end places, a team, and a driver or none yet; a driver is assigned later from the route's menu.

Use it for

A day of routes or runs where each stop has a plan and an outcome, and late work must stand out.
Where a plan is fixed once work starts and a loading step precedes it.

Not for

A live map board (the signature list's dispatch board).
Booking appointments (appointment-book).

Anatomy

header: the tool's mark, Routes, the day, the zone, New route
summary: routes, without a driver, stops running late, stops done
route: toggle row (colour, name, team, window, driver, progress, late, state; a started route's fixed plan said on its state), menu (assign or change the driver, loading)
stops: number, place and who, planned and actual or forecast, on time or early or late, move earlier or later on attention
loading sheet: facts and history beside the packages with counts, barcodes, loaded or missing; start and finish
new route sheet: name, colour, day, start and end, zone, from and to, team, driver

States

no routes, planned, loading, on the road, done; unassigned; a stop late, early, on time, failed, done without a time
plan fixed after the start; loading list open, locked, finished with a package missing
an act refused (a duplicate name, loading without a driver): said where it was asked
phone: stops stack their times
right to left: mirrored
reduced motion: through the tokens

Keyboard

Tab through the day, New route, each route's toggle and menu, the stops' move buttons and the sheets' fields

Motion

Nothing runs at rest.

Props

Prop	Type	Default	Description
`routes`	`PlanRoute[]`	—	The day's routes (controlled).
`defaultRoutes`	`PlanRoute[]`	—
`onRoutesChange`	`((routes: PlanRoute[]) => void)`	—
`onAction` (required)	`(action: RouteAction) => Promise<PlanRoute[]>`	—	Does one act; resolve with the routes as they now stand, reject with why nothing changed.
`date` (required)	`string`	—	The day shown (YYYY-MM-DD).
`onDateChange`	`((date: string) => void)`	—
`timezone` (required)	`string`	—	The service's zone, said above the times.
`zones`	`string[]`	—
`hubs` (required)	`string[]`	—
`teams` (required)	`string[]`	—
`drivers` (required)	`string[]`	—
`defaultOpen`	`string \| null`	—	The route opened at first.
`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.
`maps`	`Record<string, RouteMap>`	—	A map per route (by route id): the open route is drawn beside its stops. Without one the stops stand alone.

Built from

Dependencies

lucide-react

Import

import { RoutePlan, ROUTE_COLOURS } from "@beamline/route-plan";

Get it

Route plan 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

Route planComplete system · $49

A day's delivery routes in the service's zone.

Monday's routes, mid-morning

The North loop is out. Each stop shows its planned time beside the actual one (or a forecast), and says early or late in words. Its plan was fixed when it left: moving a stop changes the order and the forecasts, never the plan. The Dales run is loading with a package missing. The Harrogate afternoon route has no driver yet.

0 × 0full

States

A day without routes, and a route without a driver (loading it is refused until one is assigned).