Payroll Run Summary React component
A payroll run review screen: status steps from draft to scheduled, counting totals for gross, net, taxes and deductions with a split bar and change vs last month, departments that expand to employees with prorations and commissions flagged, pre-run checks you resolve in place, and an approve → confirm → processing → scheduled flow.
About the Payroll Run Summary component
Payroll Run Summary is the screen a finance or people lead checks before money leaves the account. It shows the whole run at a glance: totals, how they split into net pay, taxes and deductions, and how the run compares with last month.
Departments open up to show each employee, with prorations, leave and commissions called out. Blocking problems like missing bank details must be fixed before approval, and approving goes through a confirm step, a processing bar and a clear scheduled state.
When to use it
Use it in payroll, HR or finance products for the monthly or bi-weekly run review and approval.
For a list of past runs use a data table; for a single employee's payslip use an invoice-style block.
Installation
Add the Payroll Run Summary component to your project with the shadcn CLI. It lands in components/payroll-run-summary.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/payroll-run-summaryOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<PayrollRunSummary /> accepts 12 props, all optional.
| Prop | Type | Default |
|---|---|---|
| period | string | "November 2026" |
| payDate | string | "Nov 27" |
| daysUntilPay | number | 4 |
| departments | { id: string; name: string; employees: Employee[] }[] | DEPARTMENTS |
| lastRunGross | number | 153000 |
| taxRate | number | 0.24 |
| deductionRate | number | 0.09 |
| issues | { id: string; level: "warn" | "error"; title: string; detail: string; action: string }[] | ISSUES |
| currency | string | "€" |
| onApprove Return a Promise; the run shows Processing until it resolves. | () => void | Promise<void> | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- periodstringDefault: "November 2026"
- payDatestringDefault: "Nov 27"
- daysUntilPaynumberDefault: 4
- departments{ id: string; name: string; employees: Employee[] }[]Default: DEPARTMENTS
- lastRunGrossnumberDefault: 153000
- taxRatenumberDefault: 0.24
- deductionRatenumberDefault: 0.09
- issues{ id: string; level: "warn" | "error"; title: string; detail: string; action: string }[]Default: ISSUES
- currencystringDefault: "€"
- onApprove
Return a Promise; the run shows Processing until it resolves.
() => void | Promise<void> - theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Payroll Run Summary FAQ
- How are taxes and deductions calculated?
- The demo applies taxRate and deductionRate to gross. In production, pass real totals: compute them on your server and adapt the split array to use those numbers directly.
- What blocks approval?
- Any issue with level error. Warnings can stay. Each issue's action button resolves it in the demo; wire it to your own fix flow and remove the issue when done.
- How do I connect approval?
- onApprove runs after Confirm. Return a Promise; the processing bar runs at least until it resolves, then the run shows Scheduled.
- Can I show another currency?
- Pass currency (€, $, £ …). Amounts are formatted with en-US grouping so server and browser render the same text.
- Is it accessible?
- Status is an ordered list with aria-current, department rows are buttons with aria-expanded, the split bar has a text label, check counts and processing progress are announced, and the confirm is an alertdialog that focuses its main button.
