Shift planner

A React block (a whole screen) in Beamline's HR & payroll app.

A workplace's week of staff shifts against what it needs: a row per person with their week's hours against their contract, each day a 24-hour track with its shifts drawn from start to end (an overnight shift running into the next morning, its hours counted on the start day or split at midnight, said); above, each need's people against its count, short ones marked; a shift made or changed in place with its break as any time, in a window or at a set time, checked against the shift; conflicts that block publishing (overlaps, impossible breaks) apart from warnings (short rest, weekly hours over contract), filterable; automatic filling that proposes shifts drawn as proposals and says the needs no one could fill, waiting for accept or discard; and Publish, asked in place, with who was told.

Use it for

Scheduling hourly staff for a shop, café, clinic or warehouse week by week against staffing needs.
Publishing a schedule only when nothing blocks it, with proposals reviewed before they count.

Not for

A repeating pattern and who it applies to (shift-rotations).
Meetings and events on a calendar (team-calendar).

Anatomy

header: the mark, <workplace> shifts, the week
needs: per day each need (role, window) with assigned of required and proposed, short ones marked
week: a row per person (name, role, hours this week against the contract), a cell per day with a 24-hour track (shifts as bars, yesterday's overnight spill lighter, proposals outlined, conflicts red), each shift as a button (start–end, next day), add a shift on an empty day
editor: who and which day, From and To, the hours worked or the overnight attribution in words, A break (any time, in a window, at a set time; minutes, at, between and; paid), the break in words or what's wrong, Remove, Cancel, Save shift
conflicts: the count and how many block, All/Blocking, each with Blocks or Warning; Overnight hours count (start day · split at midnight)
publishing: open needs, Fill open needs, Accept n proposals / Discard, the needs no one could fill with why; the publish state and Publish the week (asked in place), who was told

States

loading
an overnight shift (start day or split)
a break outside the shift, too long, window too short
overlap (blocks), short rest (warning), over weekly hours (warning)
needs short; proposals pending (publish waits); unfilled with reasons
published (who was told, who couldn't be reached)

Keyboard

Tab through the shifts and the add buttons; Enter opens the editor
Publish asks in place: Enter confirms, Escape backs out

Motion

Words and the editor fade in; nothing moves at rest.

Props

Prop	Type	Default	Description
`people / weekStart / needs / workplace`	`Person[] / string / Need[] / string`	—	People with role, weekly limit and least rest; the week's first day; the needs (role, window, how many).
`shifts / defaultShifts / onShiftsChange`	`Shift[]`	—	Each shift's person, start day, start and end (an end at or before the start is the next day), role, break, and whether it is only proposed.
`attribution / defaultAttribution / onAttributionChange`	`"startDay" \| "calendarDay"`	—	Which day owns overnight hours.
`onAutoFill / onPublish`	`(open) => Promise<{ proposals, unfilled }> / (shifts) => Promise<{ notified, failed }>`	—	onAutoFill: Propose shifts for the needs not covered; resolve with the proposals and the needs no one could fill. onPublish: Publish the week; resolve with who was told. Reject: still a draft, said.
`people` (required)	`Person[]`	—
`weekStart` (required)	`string`	—	The week's first day (ISO date).
`shifts`	`Shift[]`	—
`defaultShifts`	`Shift[]`	—
`onShiftsChange`	`((s: Shift[]) => void)`	—
`needs` (required)	`Need[]`	—	What the workplace needs this week.
`attribution`	`Attribution`	—
`defaultAttribution`	`Attribution`	—
`onAttributionChange`	`((a: Attribution) => void)`	—
`onAutoFill`	`((openNeeds: Need[]) => Promise<{ proposals: Shift[]; unfilled: { needId: string; reaso…`	—	Propose shifts for the needs not covered; resolve with the proposals and the needs no one could fill.
`onPublish`	`((shifts: Shift[]) => Promise<{ notified: number; failed: number; }>)`	—	Publish the week; resolve with who was told. Reject: still a draft, said.
`workplace` (required)	`string`	—	The workplace's name.
`canManage`	`boolean`	—
`loading`	`boolean`	—
`product`	`string`	—
`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.

Built from

Dependencies

lucide-react

Import

import { ShiftPlanner } from "@beamline/shift-planner";

Get it

Shift planner 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

Shift plannerComplete system · $49

A workplace's week of staff shifts against what it needs.

A week of shifts

Crumb & Co.'s week: each day's shifts on its own 24-hour track (the night bakers' shifts run into the next morning, their hours counted on the start day or split at midnight). Above, each need's people against its count. Dev's two Monday shifts overlap and block publishing; Ada's rest between Thursday and Friday is a warning. Fill open needs proposes shifts for review; Publish asks in place.

0 × 0full

About Shift planner

Shift rotations →

Part of Beamline UI: polished, editable React components and complete screens for custom applications. Build your own style from any look; tokens, fonts, radii, motion; not only colours.