Timesheet review

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

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 unavailable count said, never 0. A sheet draws its planned areas above what was worked on one time scale with breaks between; the changeover between two worked areas is dragged, or stepped by five minutes with the arrows, and a segment is split without moving the shift's start or end; gaps and overlaps are said in words and hold back approval, the net paid time follows every edit, and the original clock events stay as they were, each with its location against the site in words (inside or outside only when the fix's accuracy allows it). Edits and approval are one save; a sheet changed elsewhere keeps the edits and says so. Time is added by hand for past shifts only, per person, with each person's result said. The payroll file is set up beside it: columns in order, each a field and its heading, the sheet id and line id both required so every area line stays tied to its sheet, a preview with the total paid time, and the file made once with its download apart, so a failed download is retried without making another.

Use it for

A manager approving staff timesheets against the planned shift: cafés, shops, warehouses, care teams, events.
Anywhere worked time spans several areas or roles in one shift and the original clock evidence must stay apart from corrections.

Not for

The worker's own shift: clocking in, breaks and the review before clocking out (my-shift).
Paying the period's workers (payroll-run).
Planning and publishing the roster (roster-publish).

Anatomy

header: the product's mark, the title and Add time by hand
counts as one quiet line, a figure then its word: Scheduled, On shift, Late (a filter), On break, To approve (a filter), Late and To approve in their tone when there are some; Unavailable in place of a count the feed didn't give
list (nav): each sheet's person, day, net time and its flag (Started late, Differs from the plan, Times to fix), Approved
sheet head: person and day, net paid against planned, Added by hand, the status
time scale: Planned and Worked rows on one scale, each block naming its area where drawn, breaks as dashed plates, the changeover between touching worked segments as a grip
worked segments: each area with its times as text and its length, a pencil opening its start and end, Split and Remove; gaps and overlaps in words; under them the paid time's sum (worked, less unpaid breaks, paid, against the plan with the difference)
clock events: each with its time and its location in words
bar: Edited, not saved with Undo edits; Approve and Approve and next
by hand (sheet): area, people, date, start, end, unpaid break, reason, the net each person gets, Add N timesheets
payroll file (sheet): template name, file type, columns (field, heading, move, remove), Add a column, the missing key said, the first lines and the total paid time, Make the file, then Download

States

submitted; approved (by whom); added by hand
late start said with minutes and the planned time; differs from the plan; times to fix
edited: the net follows; a gap, an overlap or a segment that ends before it starts holds back approval
approving; approved and the next submitted sheet opened; stale (the edits kept, said); refused with the reason
clock location: inside, outside by how far, accuracy unknown, permission denied, no location
counts unavailable; a filter on (said, Show all)
by hand: a future time, an end before the start, a break longer than the time refused in place; adding; all added; some refused per person
look only: no edits or approval, the permission said
loading: shaped skeletons; nothing to review: an empty state
payroll file: a required id missing (refused, said); made; downloading; a failed download (the file kept, Try the download again); downloaded
phone: the counts wrap, the list, then the sheet with Back
right to left: the scale and the grip mirror (← moves later in time)
reduced motion: through the tokens

Keyboard

Tab through the counts that filter, the list, each changeover grip (←/→ by 5 minutes), each segment's times, Split and Remove, then the bar
Escape closes the by-hand sheet

Motion

The changeover grip follows the pointer in 5-minute steps; nothing else moves. Nothing runs at rest.

Props

Prop	Type	Default	Description
`sheets`	`Timesheet[]`	—
`defaultSheets`	`Timesheet[]`	—
`onSheetsChange`	`((sheets: Timesheet[]) => void)`	—
`areas` (required)	`WorkArea[]`	—
`siteRadius`	`number`	—	The site's radius, for the clock location's words.
`counts`	`DayCounts`	—
`workers`	`string[]`	—	People who can be given time by hand.
`defaultSheetId`	`string`	—
`me`	`string`	—	Who is approving, written on the sheets the block approves.
`today`	`string`	—	Today, ISO date, for refusing time by hand that hasn't happened.
`nowTime`	`string`	—	The time now, "HH:MM", with `today`.
`onApprove`	`((sheet: Timesheet, edited: boolean) => Promise<unknown>)`	—	Approve a sheet with any edits (one save). Reject with an Error named "StaleError" when your record moved on: the edits stay, said.
`onAddManual`	`((entry: ManualEntry) => Promise<void \| { worker: string; error?: string \| undefined; }…`	—	Add time by hand; resolve with each person's result (a person missing from the answer counts as added).
`canApprove`	`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.
`exportTemplate`	`ExportTemplate`	—	The payroll file's starting template; with onExport, the header offers the file.
`onExport`	`((template: ExportTemplate) => Promise<{ fileName: string; }>)`	—	Make the payroll file from the approved sheets' lines; resolve with its name.
`onDownload`	`((fileName: string) => Promise<unknown>)`	—	Download a made file; reject to say why (Try again downloads, it doesn't make another).
`defaultExportOpen`	`boolean`	—	Open the payroll file sheet when the screen opens.

Built from

Dependencies

lucide-react

Import

import { TimesheetReview } from "@beamline/timesheet-review";

Get it

Timesheet review 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

Timesheet reviewComplete system · $49

Timesheets for a manager.

Saturday's sheets

Ana was planned on the bar until 11:00 and the till after; she changed over at 11:30. Drag the changeover (or focus it and use ←/→) and the net follows; Split cuts a segment in two without moving her start or end. Her clock-out location is too imprecise to call inside or outside, and is said so. Jonah's sheet has a 15-minute gap to fix before it can be approved. Late filters the list to who started late.

0 × 0full

States

One state at a time: a sheet someone else changed (the edits stay, said); time added by hand where one person already has a sheet; counts whose feed didn't answer; the payroll file from the approved sheets (one line per area, each with its sheet id; the first download fails and is retried without making the file again); an approved sheet; looking without the permission; loading; nothing to review.