Payroll cycles

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

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 stage asks of you, and the cutoff in the entity's own time zone with how long is left (a day away in the warning tint, passed in the danger tint). A cycle opens to its package: figures and files, each file downloaded on its own (downloading approves nothing), Approve bound to the revision on screen and confirmed with entity, period, headcount and total; a newer revision replaces it and approves nothing. Issues are reported several at once, each answered with its own request number or reason, and rejecting the package is a separate box. Who pays what keeps your funding and the provider's pay-out apart, your "I've paid" a declaration until confirmed, and an old status said until refreshed. The entity's record keeps identity, payroll facts and setup apart, each missing setup item saying what it holds up. A request to the provider stays scoped to an entity and a cycle.

Use it for

A company paying people in several countries through a payroll provider: what each entity's cycle needs from you, before its cutoff.
Approving a provider's payroll package, reporting issues on it, funding it, and keeping each legal entity's setup complete.

Not for

Running your own pay period from hours, commission and tips (payroll-run).
One request's approval route under a policy (approval-route).
Expenses and contractor submissions waiting for a decision (payroll-approvals).

Anatomy

header: the product's mark and title
board: All / Waiting on you, then a card per cycle: entity and period, the stage as five steps in one hue, the stage's name, the cutoff with time left (or the pay date), the next action
detail: entity and period, Ask the provider, the stages as a stepper, tabs Package, Who pays, Entity
package: revision and when prepared, its state, figures (people paid, gross, employer costs, total to fund), files each with Download, Report issues, Approve revision n with the confirmation
issues: each issue's where and what, Add another issue, Also reject this package, Send
who pays: the status's age with Refresh, You pay and the provider pays, each obligation's tick, amount, due date and state, I've paid
entity: identity with Edit (a sheet), payroll facts, setup with what each missing item holds up
support: entity and cycle, what it's about, details, general support apart, Send, the receipt

States

cycles: loading, none, none waiting on you
a cutoff more than two days away, under two days (warning), passed (danger)
stage: collecting changes, package to review, waiting for your funds, paying out, paid; setup missing puts Finish setup first
package: none yet; waiting for approval; confirming; approving; approved; refused with the reason; replaced by a newer revision (nothing approved); a new package asked for
file: downloading, downloaded, failed
issues: drafting, sending, each sent with its reference or refused with its reason, nothing sent, rejected with them
obligation: to do, late, declared (who and when), confirmed; declaring; declare failed; status old, refreshing, refresh failed
entity: setup complete or n of m done; editing; saving; refused (draft kept)
support: scope set, a cycle cleared by a new entity (said), sending, failed (draft kept), sent with its reference
phone: the board, then one cycle with Back
right to left: mirrors

Keyboard

Tab through the filter, each cycle and its next action, the tabs, the files, Report issues and Approve; the confirmation starts on Cancel

Motion

None of its own.

Props

Prop	Type	Default	Description
`entities` (required)	`PayrollEntity[]`	—
`cycles` (required)	`PayrollCycle[] \| null`	—	Each entity's current cycle; null while loading.
`packages`	`PayrollPackage[]`	—	The packages the provider prepared, one per cycle at its latest known revision.
`obligations`	`Obligation[]`	—
`statusAsOf`	`string`	—	When the payment statuses were last read (ISO instant). Older than 15 minutes is said until refreshed.
`onApprove`	`((cycleId: string, revision: number) => Promise<ApproveAnswer>)`	—	Approve exactly this revision. Resolve "replaced" with the newer package when one exists; nothing is approved.
`onDownload`	`((cycleId: string, deliverableId: string) => Promise<void>)`	—	Download one deliverable; downloading approves nothing. Reject to say it failed.
`onReportIssues`	`((cycleId: string, revision: number, issues: IssueDraft[], reject: boolean) => Promise<…`	—	Send issues on a revision, and reject the package only when `reject` is true.
`onDeclarePaid`	`((obligationId: string) => Promise<{ by: string; at: string; }>)`	—	Record that you paid an obligation: a declaration with who and when, not a receipt.
`onRefreshStatus`	`(() => Promise<{ obligations: Obligation[]; asOf: string; }>)`	—	Read the payment statuses again.
`onSaveEntity`	`((entity: PayrollEntity) => Promise<PayrollEntity>)`	—	Save an entity's identity; resolve with the entity as saved, reject to keep the draft (said).
`onSupportRequest`	`((request: SupportRequest) => Promise<{ reference: string; }>)`	—	Send a request to the provider; resolve with its reference.
`onGeneralSupport`	`(() => void)`	—	Not about a payroll cycle: your general support.
`now`	`string`	—	The moment the board is read at (ISO instant); defaults to now.
`defaultCycle`	`string \| null`	—
`defaultTab`	`Tab`	—
`defaultIssuesOpen`	`boolean`	—	Opens the issues form on the package at the start.
`defaultSupportOpen`	`boolean`	—	Opens the support request at the start, scoped to the chosen cycle.
`provider`	`string`	—	The provider's name, said where it acts.
`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.

Built from

Dependencies

lucide-react

Import

import { PayrollCycles, STAGES } from "@beamline/payroll-cycles";

Get it

Payroll cycles 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 cyclesComplete system · $49

The client's side of an outsourced payroll across countries.

October across four entities

Berlin's package waits for approval with the cutoff a day away; Porto waits for your funds; Austin can't be paid until its setup is done; London is paying out. Approving Berlin repeats the entity, period, headcount and total first.

0 × 0full

A newer revision arrives

Payline replaces revision 5 while you look: approving it approves nothing and puts revision 6 in front of you. The variance report fails to download, and says so.

0 × 0full

Reporting issues

Two issues go to Payline at once and come back on their own: one is taken with its request number, one is refused with the reason and stays to fix. Rejecting the package is a separate box, off until you tick it.

0 × 0full

Who pays what

Porto's net pay is late; the taxes are declared paid by Mira, not yet confirmed. The status is forty minutes old until refreshed, and the refresh shows Payline confirmed the taxes.

0 × 0full

About Payroll cycles

← Payroll run Payroll approvals →

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 cycles

Use it for

Not for

Anatomy

States

Keyboard

Motion

Props

Built from

Dependencies

Import

Get it

More in HR & payroll