Roster publishing

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

The week's roster before it goes out: areas down the side and days across, each shift a chip with who works it and its hours, its state its tone (not published, changed since published) keyed over the week with counts. Publishing leads with what goes out (shifts and people told) and its reach as one sentence, its controls opened on request: the areas chosen, changes only or the whole week, every part of a shift linked across areas pulled in with it (said in the panel and outlined on the grid), who will be told and whether they must confirm, and the count of shifts and people on the button. Published with messages still on their way is said apart from published, a shift your app refuses is named while the rest go out, and swap requests both people agreed to sit beside it with the roster after the swap in words; a stale swap changes nothing. Shifts chosen on the week open the tools: fill open shifts from your app's proposal (each person with why, gaps left open with theirs), link one person's shifts of a day into one (the time between them said), ask eligible people to cover a shift (first to claim gets it; an undelivered message named), and copy last week as unpublished shifts, skipping copies that clash. Nothing there publishes.

Use it for

A manager sending a week's shifts to staff: cafés, shops, warehouses, care homes, events.
Anywhere a publish must show its reach first (what goes, who is told) and a partial failure must name what didn't go.

Not for

Drawing and dragging shifts on a calendar (team-calendar).
Approving worked time (timesheet-review).
The worker's own shift (my-shift).

Anatomy

header: the product's mark, the title and the week
key over the week: Not published and Changed since published with their counts, and the outline for what goes out; grid: areas down, days across (the area column pinned when the week scrolls); each shift a chip with who (or Open shift) and hours, its state its tone (said in its name), linked parts marked n/N; what the publish carries outlined
tools (top of the side): how many shifts are chosen, Fill N open shifts, Link N shifts, Ask someone to cover, Copy last week, Clear; each opens its proposal or form in place with Cancel and its apply
publish panel: the count of shifts and people told, the linked parts pulled in, the reach as one sentence (what, where, who is told, confirm) with Change what goes out opening the areas (checkboxes), What to publish, Tell people and Ask people to confirm; Publish N shifts
the outcome: shifts published, messages on their way, confirmations outstanding, the shifts refused with why
requests: each swap with who agreed, the roster after it in words, Decline and Approve swap

States

no changes to publish; areas chosen; scope widened by linked shifts (said, outlined); nobody told (confirmation off); publishing
published with deliveries pending; confirmations outstanding; a partial failure naming each refused shift; nothing published (the reason)
swap waiting; approved (the grid shows it, marked changed); declined (nothing changed); stale (refused, nothing changed)
tools: chosen shifts filled (inverted plate); a fill proposal with people and reasons, shifts left open with theirs; a link preview with the time between parts; a cover form with ineligible people disabled and why; asked, with undelivered messages named; a copy preview with clashes skipped; applied, never published; a refusal changes nothing
look only: no panel controls, the permission said
loading: shaped skeletons; no shifts: an empty state
phone: the grid scrolls sideways under the pinned areas; the panel and requests below
right to left: the grid and panel mirror
reduced motion: through the tokens

Keyboard

Each shift chip is a toggle button (Enter or Space chooses it for the tools)
Tab through the area checkboxes, the two radio groups (arrows inside), the switch and Publish; then each request's Decline and Approve swap
Each shift chip is read with who, when, where and whether it is published

Motion

Nothing moves beyond the parts' own feedback. Nothing runs at rest.

Props

Prop	Type	Default	Description
`areas` (required)	`RosterArea[]`	—
`days` (required)	`string[]`	—	The seven days shown, ISO dates, Monday first (or your week's first day).
`shifts`	`RosterShift[]`	—
`defaultShifts`	`RosterShift[]`	—
`onShiftsChange`	`((shifts: RosterShift[]) => void)`	—
`requests`	`SwapRequest[]`	—
`onPublish`	`((draft: PublishDraft) => Promise<void \| PublishResult>)`	—	Publish the chosen shifts; resolve with what failed (the rest are published), or reject when nothing was.
`onSwap`	`((requestId: string, decision: "approve" \| "decline") => Promise<unknown>)`	—	Approve or decline a swap; reject (a changed shift) to change nothing.
`canPublish`	`boolean`	—
`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.
`onAutofill`	`((shiftIds: string[]) => Promise<AutofillProposal>)`	—	Propose people for chosen open shifts; your app applies its rules (availability, training, hours).
`onLink`	`((shiftIds: string[], linkId: string) => Promise<unknown>)`	—	Join one person's shifts into one linked shift; reject (a shift changed meanwhile) to keep them apart.
`eligibleFor`	`((shiftId: string) => { name: string; reason?: string \| undefined; }[])`	—	Who can be asked to cover a shift, and why someone can't.
`onAskCover`	`((shiftId: string, people: string[], message: string) => Promise<void \| { failed?: stri…`	—	Ask people to cover a shift (the first to claim gets it); resolve with any whose message failed.
`previousWeek`	`RosterShift[]`	—	Last week's shifts, offered as unpublished copies one week later.
`onCopy`	`((copies: RosterShift[]) => Promise<unknown>)`	—
`defaultSelected`	`string[]`	—	Shifts chosen for the tools when the screen opens.

Built from

Dependencies

lucide-react

Import

import { RosterPublish } from "@beamline/roster-publish";

Get it

Roster publishing 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

Roster publishingComplete system · $49

The week's roster before it goes out.

Publishing next week

Six shifts are new or changed. Untick Till and Kitchen prep: Ana's Tuesday still brings its till and kitchen parts, because it is one shift across three areas, and the panel says so. Choose who is told and whether they must confirm; the button counts what goes. Lena and Kofi agreed to swap Friday and Sunday; the request says who works what after it.

0 × 0full

Filling and covering

Thursday's open till shift is chosen: Fill asks Rota for someone and shows why Lena fits; Apply gives it to her without publishing. Choose Lena's two Friday shifts to link them into one (the half hour between them is said), or Kofi's Wednesday alone to ask Lena or Jonah to cover it (Ana is already working). Copy last week brings its shifts in as unpublished copies and names the one that clashes with Mei's Saturday.

0 × 0full

States

One state at a time: one shift your app refuses while the rest publish; a swap refused because a shift moved; looking without the permission; loading; no shifts.

0 × 0full

About Roster publishing

← Shift rotations My shift →

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.

Roster publishing

Use it for

Not for

Anatomy

States

Keyboard

Motion

Props

Built from

Dependencies

Import

Get it

More in HR & payroll