My shift

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

The worker's own shift on their phone: today drawn to scale (the plan's areas as blocks on an hour axis, under them what was worked: on-plan time in green, an area not on the plan in orange, a late start hatched up to the clock-in, each break, and now as a line), today's plan confirmed for the version they read and asked again when it changes; clocking in with lateness said in minutes; moving between areas, where one not on the plan is said; breaks; and the review before clocking out (where they worked, each break, a correction that keeps what was recorded, the paid time and a note), sent for approval and never called paid. After it, an optional pulse that can be skipped without touching the timesheet. Beside it, open shifts to claim, first-come ones shown as yours only on the server's answer and requests left waiting for a manager, and news that asks to be confirmed, where reading is not confirming. Under today, the worker's week (optional week prop): each shift's day, times, areas and hours, today marked and one still to confirm flagged, with the week's planned total.

Use it for

The staff side of a scheduling app, mostly on a phone: cafés, shops, warehouses, care and cleaning teams.
Anywhere a worker's own record must keep the original clock taps apart from corrections, and a confirmation must belong to the version read.

Not for

A manager approving sheets (timesheet-review).
Publishing the roster (roster-publish).
A team's calendar of events (team-calendar).

Anatomy

header: the product's mark and the title
today: the day to scale (Plan lane with the areas as blocks and their times, Worked lane with segments, the late start, breaks and a now line, an hour axis) and the planned break
confirmation: the ask (or that the plan changed since), Decline and Confirm shift; then Confirmed or Declined
clock: Clock in; then Clocked in with On time or minutes late, Now in an area (not on your plan said), Move to another area, Start break or End break, Clock out
review: where you worked, breaks with Correct (what was recorded kept beside it), paid time, a note, Keep working and Clock out and send
sent: when it was sent and that it's paid once approved; the optional pulse with Skip
open shifts: each with day, time, area, first-come or by request, why it isn't open to you, Claim or Request, then Yours, Requested or Taken by someone else
news: each post's title and author, Asks you to confirm, Read, then I've read it and Confirmed with the date
week: This week with the planned total; each shift's day, times, areas, hours and Today, Confirmed or To confirm

States

confirmation asked; confirming; confirmed; declined; plan changed since confirming (asked again)
before the shift; on time or late; working in a planned area or one not on the plan; on a break
reviewing; a break corrected; sending; sent for approval; a send that failed (kept, Try again)
pulse asked, sent, skipped
open shift: open, not open to you, claiming, yours, requested, taken by someone else, a failed claim
news: unread, read not confirmed, confirmed, updated since you confirmed
no shift today; loading
phone: one column, the shift first
right to left: the layout and the clock icons mirror
reduced motion: through the tokens

Keyboard

Tab through the confirmation, the clock buttons, the area select, the review's corrections and note, then open shifts and news
Space or Enter on each button; arrows in the pulse

Motion

Nothing moves beyond the parts' own feedback (buttons, the rating). Nothing runs at rest.

Props

Prop	Type	Default	Description
`areas` (required)	`ShiftArea[]`	—
`shift`	`PlannedShift \| null`	—
`defaultSession`	`ShiftSession`	—	The session as it stands (restored after the app was away); default not clocked in.
`openShifts`	`OpenShift[]`	—
`news`	`NewsPost[]`	—
`clock`	`(() => string)`	—	The clock, read at each tap; default the device's.
`onRespond`	`((shiftId: string, revision: number, decision: "accepted" \| "declined") => Promise<unkn…`	—
`onClock`	`((event: { kind: "area" \| "in" \| "out" \| "breakStart" \| "breakEnd"; at: string; areaId?…`	—	Each clock event as it happens; reject to keep the tap and say it wasn't sent.
`onSend`	`((session: ShiftSession, comment: string) => Promise<unknown>)`	—	Send the reviewed session for approval.
`onClaim`	`((shiftId: string) => Promise<"pending" \| "yours" \| "taken">)`	—	Resolve with the server's answer for the claim: yours, pending (a request) or taken.
`onPulse`	`((score: number \| null) => Promise<unknown>)`	—
`onConfirmRead`	`((postId: string, revision: number) => Promise<unknown>)`	—
`loading`	`boolean`	—
`today`	`string`	—	Today, ISO date, written on confirmations the block records itself.
`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.
`week`	`PlannedShift[]`	—	The worker's shifts this week (today's included), listed under today's with their hours; omitted: no week.

Built from

Dependencies

lucide-react

Import

import { MyShift } from "@beamline/my-shift";

Get it

My shift 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

My shiftComplete system · $49

The worker's own shift on their phone.

Ana's Sunday

Ana confirms the bar-then-till plan, clocks in at 07:12 (12 min late, said), moves to the kitchen at 10:50 (not on her plan, said), takes a break 12:05–12:40 and clocks out at 15:05: the review shows where she worked, the break (Correct keeps what was recorded) and her paid time, then sends it for approval. The pulse after it can be skipped. Reading the milk post doesn't confirm it; I've read it does.

0 × 0full

States

One state at a time: a plan changed after Ana confirmed (asked again); on a break; a send that fails once (everything kept, Try again); an open shift someone else claimed first; no shift today; loading.