Stage reports
A React block (a whole screen) in Beamline's HR & payroll app.
Reports on how applications move through stages, built from each application's stage intervals. By week: applications present in each stage (or from each source) per week, stacked with a legend; an application counts in every stage it was in during the week while the week's total counts it once, said beside the chart and shown in the table as the sum of groups against the applications; weeks before the stage history starts are marked partial; grouping by source says it uses today's source, a current field. Time in stage: average or longest days in each stage against a target line, from how many applications, stages still open counted up to now or left out; a stage nobody has been through says it has no history, apart from zero days; stages past the target on the warning tone.
Use it for
- Any staged process reported over time: candidates, tickets, deals, orders, where one item can pass several stages in one period.
- Where time in a stage is the bottleneck to find, against a target.
Not for
- A conversion funnel of a single period (funnel-chart).
- Building arbitrary reports (report-builder).
Anatomy
- header: the product's mark, the report's title, By week or Time in stage
- by week: Group by stage or source; the counting rule said; today's source said when grouping by it; partial weeks said; a stacked bar per week with a legend; a table of weeks with each group, the sum of groups and the applications (partial weeks tinted)
- time in stage: Average or Longest; Count stages still open; bars per stage with the target line; each stage with its days and how many applications, no history said; what open stages do
States
- no history, complete weeks, partial weeks, an application in several stages in a week, grouped by a current field, query failed, loading
- duration: average, longest, open counted or not, past target, no observation
- phone: chart then table, the table scrolls sideways
- right to left: mirrored
- reduced motion: through the tokens
Keyboard
- Tab through the report switch, the grouping and measure, the switch, and the chart's data table
Motion
Nothing runs at rest.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
stages (required) | ReportStage[] | — | |
intervals (required) | StageInterval[] | — | |
from (required) | string | — | The first Monday shown and how many weeks. |
weeks (required) | number | — | |
historyFrom | string | null | — | Stage history is recorded from this date on; weeks before it are partial. |
targetDays | number | null | — | The target for time in a stage, in days. |
now | string | — | |
defaultView | "duration" | "presence" | — | |
error | string | null | — | The query failed: the reason. |
loading | boolean | — | |
product | string | — | |
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
- Alert
- Avatar
- Bar chart
- Button
- Checkbox
- Chip group
- Dropdown menu
- Empty state
- Glow
- Kbd
- Label
- Pagination
- Search field
- Segmented control
- Select
- Skeleton
- Slot text
- Spinner
- Switch
- Table
- Text morph
- Tooltip
Dependencies
lucide-react
Import
import { StageReports } from "@beamline/stage-reports";Get it
Stage reports 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
More in HR & payroll
- 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: 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: 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…
- 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…
- 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: 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: 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: 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: 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: 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: 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: 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…
- 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: 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…