# My shift A React block (a whole screen) in [Beamline](https://beamline.io/)'s [HR & payroll](https://beamline.io/components/apps/hr-payroll) app. Live demo: https://beamline.io/components/my-shift 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](https://beamline.io/components/timesheet-review)). - Publishing the roster ([roster-publish](https://beamline.io/components/roster-publish)). - A team's calendar of events ([team-calendar](https://beamline.io/components/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 Promise)` | — | 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)` | — | | | `onConfirmRead` | `((postId: string, revision: number) => Promise)` | — | | | `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` | — | 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 - [Avatar](https://beamline.io/components/avatar.md) - [Badge](https://beamline.io/components/badge.md) - [Button](https://beamline.io/components/button.md) - [Empty state](https://beamline.io/components/empty-state.md) - [Label](https://beamline.io/components/label.md) - [Rating](https://beamline.io/components/rating.md) - [Select](https://beamline.io/components/select.md) - [Skeleton](https://beamline.io/components/skeleton.md) - [Spinner](https://beamline.io/components/spinner.md) - [Text morph](https://beamline.io/components/text-morph.md) - [Textarea](https://beamline.io/components/textarea.md) - [Time picker](https://beamline.io/components/time-picker.md) ## Dependencies `lucide-react` ## Import ```tsx 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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in HR & payroll - [Shift planner](https://beamline.io/components/shift-planner): 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… - [Shift rotations](https://beamline.io/components/shift-rotations): Rotating shift patterns from pattern to people: a pattern of one to four weeks painted day by day with a shift template, a rest day or nothing (pick the… - [Roster publishing](https://beamline.io/components/roster-publish): 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… - [Timesheet review](https://beamline.io/components/timesheet-review): Timesheets for a manager: the day's counts at the head (scheduled, on shift, late, on break, to approve), the ones that filter being buttons, an… - [Hours ledger](https://beamline.io/components/hours-ledger): One worker's pay cycle of shifts, for the worker or their payroll admin: the wall-clock span and the paid hours as separate columns, a night shift… - [Payroll run](https://beamline.io/components/payroll-run): A pay period from report to submission, one payroll account at a time (a worker on two accounts is on both runs, never combined): the workers on one… - [Payroll cycles](https://beamline.io/components/payroll-cycles): The client's side of an outsourced payroll across countries: every entity's current cycle on one board, its stage drawn as steps, the one thing that… - [Payroll approvals](https://beamline.io/components/payroll-approvals): Payroll approvals for a company paying through a payroll provider. Expenses are split by whose move it is (you, another approver, the employee answering… - [Benefit changes](https://beamline.io/components/benefit-changes): An employee's benefit changes after a life event. The centre puts their turn first: each task (a proof to upload, with its deadline in the warning tint… - [Hiring pipeline](https://beamline.io/components/hiring-pipeline): A recruiting team's pipeline across every open job. Stage groups (reviewing, interviewing, closing) are counted across jobs above job sections that fold… - [Recruiter home](https://beamline.io/components/recruiter-home): A recruiter's own work, in one place. Upcoming interviews with who sits in, today's first; feedback owed, overdue first and on the danger tone, written… - [Stage reports](https://beamline.io/components/stage-reports): Reports on how applications move through stages, built from each application's stage intervals. By week: applications present in each stage (or from each… - [Link booking](https://beamline.io/components/link-booking): A candidate's booking link for one stage of one job: a column with the job, the stage's length, who they meet (each with their role), where and what the… - [Team & members](https://beamline.io/components/team-members): The people page of a workspace: seats used against the plan, members and pending invitations in one list with search and a role filter, role changes that… Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).