Payroll run

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

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 money scale, each bar split into hours, commission and tips, each part named on itself where its name fits, and said in words (clocked or scheduled hours × rate, commission on what), a name pressed opening that pay step by step (explainable-total); a worker taken out of the run with the reason, the totals and the debit on Submit rolling with it; a report changed since review drawing each changed worker's old pay as a mark and their new bar until recalculated, Submit waiting; taxes, take-home, employer contributions and the debit only once the provider has quoted (never $0: not quoted said, ask again); the cutoff in the provider's time zone, and here (with its weekday) only when the zones differ; Submit repeating account, pay date and debit; submitted, processing and paid kept apart as their own receipts. One more part travels with it: PayrollHistory, past runs as evidence: by pay date with period, status and total cost; a run's figures as one sum that adds up (gross, less tax withheld, take-home; plus employer contributions, the total cost), the bank's debit said apart when it doesn't match; a worker's statement with this run and the year to date, leave in words (Unlimited, 24 hours left), Back to the same row.

Use it for

Reviewing and submitting a pay run to a payroll provider: salons, spas, clinics, restaurants, studios, any hourly-and-commission team.
Checking how each worker's pay was reached, and that what is submitted is what was reviewed.
PayrollHistory: checking what past runs cost and reconciling them with the bank; answering a worker about their pay to date.

Not for

Time clock or schedule editing.
Invoices to contractors.

Anatomy

header: the product's mark, the title and the payroll account (one run each)
sheet head: the account, period and locations; the stages (stepper): Review, Submitted, Processing, Paid, each with its receipt's time
changed report (status): how many workers' pay changed, and Recalculate
workers: each a row with the name (a button opening the pay's steps), role and the other account they're also paid on, the gross (a rolling figure), the In this run switch, the bar on the run's one scale (hours, commission, tips, named where they fit; a dashed mark at the old pay when the report changed; hollow when out) and the basis in words (or Not in this run: the reason); a row changing height glides the rows below
a worker's pay opened: explainable-total with hours, commission, tips and tax withheld (the provider's quote)
totals (aside, sticky; first on a phone): workers, gross, tax withheld, take-home, employer contributions, the debit; Not quoted yet in place of any figure without a quote, with Ask again when the provider couldn't answer
dates: the pay date and the cutoff in the provider's time zone with its time here
Submit: repeats the account, pay date and debit; says what it waits for (the quote, the recalculation) instead
PayrollHistory: Past runs (pay date, period · status, total cost); the open run: Paid on …, account · period · status, the sum, the bank's debit (matches / more / less / not shown yet), its workers; a statement: Back to the run, the worker, This run and Year to date for gross, tax withheld, take-home, Leave in words

States

review: the run editable; Submit when quoted and recalculated
report changed: old pay marked, new bars drawn, Submit waits for Recalculate
quote pending or unavailable: Not quoted yet (never $0); Ask again; Submit waits
a worker out of the run: hollow bar and its reason; the totals and debit roll
submitted: the receipt's time and who; processing waits for the provider; paid lands on the pay date, each said apart
submit refused: nothing sent, said under Submit
look only (canRun false): switches and actions disabled, the permission said
loading: shaped skeletons; no run: an empty state
phone: the totals first, then the workers
right to left: bars fill from the right; words keep their order
reduced motion: bars and figures change at once
PayrollHistory: a bank debit that doesn't reconcile; not shown yet; no past runs; loading

Keyboard

Tab through the account, each worker's name (Enter opens the pay's steps) and switch, Recalculate, Ask again and Submit

Motion

Bars glide to new pay by translate (each layer reaching to where its part ends) when a report is recalculated or a worker is taken out; the figures roll (slot-text). Nothing runs at rest; reduced motion changes at once.

Props

Prop	Type	Default	Description
`runs`	`PayRun[]`	—	The runs, one per payroll account, controlled with onRunsChange; or defaultRuns. A provider's later news (processing, paid) arrives as new runs.
`defaultRuns`	`PayRun[]`	—	The starting runs when uncontrolled.
`onRunsChange`	`(runs: PayRun[]) => void`	—	After a worker is taken in or out, a recalculation, a new quote or a submit.
`account`	`string`	—	The open run's id (one per payroll account).
`defaultAccount`	`string`	—	The run open at first.
`onAccountChange`	`(id: string) => void`	—	Another account chosen.
`onRecalculate`	`(runId: string) => Promise<PayRun>`	—	Take the changed report into the run; resolve with the run recalculated (its new quote too).
`onRequote`	`(runId: string) => Promise<Record<string, WorkerQuote>>`	—	Ask the provider for the tax quote again; resolve with it, reject when it still can't answer.
`onSubmit`	`(runId: string) => Promise<unknown>`	—	Submit the run to the provider; resolve when it has it. Processing and paid arrive later as new runs.
`by`	`string`	—	Who is submitting, written on the receipt.
`timeZone` (required)	`string`	—	Where the salon is: receipts are said in its time, and the provider's cutoff in this time too when it differs.
`currency` (required)	`string`	—	ISO 4217 code ("USD").
`canRun`	`boolean`	—	false: the person may look but not change or submit the run.
`loading`	`boolean`	—	Shaped skeletons while the run loads.
`now`	`number`	—	The clock, for the receipt the block writes itself. Default the device's.
`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.
`PayrollHistory: runs / defaultOpen / currency`	`PastRun[] / string / string`	—	Past runs newest first, each with its workers' current and year-to-date pay, the employer's contributions and the bank's debit (null while not seen). history.ts has runFigures for your server.

Built from

Dependencies

lucide-react

Import

import { PayrollRun, PayrollHistory } from "@beamline/payroll-run";

Get it

Payroll run 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

Payroll runComplete system · $49

A pay period from report to submission, one payroll account at a time…

A pay run before the cutoff

Kingsway, 27 Oct – 9 Nov: the report changed after review (Mara clocked more, Ines sold more), so their bars show the old pay and Submit waits. Recalculate; press a name to see how the pay was reached; take someone out of the run and the totals and the debit on Submit follow. Submitted, processing and paid arrive as their own receipts.

0 × 0full

States

One state at a time: reviewed and ready; the provider couldn't quote taxes (never shown as $0; asked again, it fails once more, then answers); a run already paid; looking without the Payroll permission; loading; no run yet.

0 × 0full

Pay history

Kingsway's past runs by pay date with their total cost. A run's figures add up as one sum (gross, less tax withheld, take-home; plus employer contributions, the total cost); Oct 16's bank debit is $16.02 more than the run, said apart. A worker's statement has this run and the year to date, leave in words (Unlimited), and Back to the same row.

0 × 0full

About Payroll run

← Hours ledger Payroll cycles →

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.

Payroll run

Use it for

Not for

Anatomy

States

Keyboard

Motion

Props

Built from

Dependencies

Import

Get it

More in HR & payroll