Payrun

A payroll preparation and approval workspace for a fictional 64-person company. Editable sheet cells, traceable calculations, variance review and workforce budgets share the same run totals.

• Best forDevelopers building payroll review interfaces, HR suites and workforce-budget tools.

• Prepare

  Edit the payroll sheet with spreadsheet-style keys, inspect a cell formula, resolve blockers and watch changes cascade through employee, department and run totals.

• Review

  Compare the submitted snapshot with recomputed totals, explain significant variances and use a four-eyes demonstration approval to lock and schedule the run.

• Pay runs

  Search and filter historical runs, export CSV records, inspect read-only employee and approval details, and mark a scheduled run paid in the local simulation.

• Workforce budget

  Compare employer cost with monthly or cumulative budgets, inspect department usage and see the current run counted once after approval, alongside future projections.

• A payroll sheet you can trace

  Editable cells, a sticky employee column and total row, department subtotals and a formula bar expose the calculation path. Changes highlight dependencies from overtime through gross, deductions, net and employer cost.

• Blockers, explanations and undo

  Demonstration checks cover overtime caps, regular hours, missing payment-detail flags and negative net. Draft edits can be undone; large variances require an explanation before approval.

• A consistent approval snapshot

  Review compares submitted and recomputed totals with a fingerprint check. An eligible demonstration approver must differ from the preparer; approved runs are locked and cannot be approved or scheduled twice.

• History and workforce budgets

  Pay-run records, employee drawers, a pay calendar and CSV exports use the shared model. Approved cost enters the budget once, while later months are explicitly projected from the current headcount.

• Accessible controls and clear scope

  Keyboard grid editing, live edit announcements, phone employee cards and reduced-motion states are included. The example covers one company, one EUR currency and monthly runs; surrounding suite modules are contextual shortcuts only.

Responsive layouts, keyboard-accessible navigation and reduced-motion support.

Salaries, employees, hours and budgets are fictional. Rates are illustrative, with no country-specific tax, pension or social-security engine. Approvals and Paid are local states: no bank transfer, payment file, payslip or filing is produced. There is no backend, login or persistence.

• IncludedFictional demonstration data and local interactions, ready to edit. The included README identifies the data files and model.
• Not includedBackend, database, authentication, payments or AI services. Features that look connected are simulated; connect your own services when you adapt the code.

• Complete Next.js project
• 4 animated views
• Source files and project assets
• README with setup and customization
• LICENSE.md

Stack and requirements

• StackNext.js 16, React 19, TypeScript, Tailwind CSS v4, Framer Motion, Lucide icons
• FontsPlus Jakarta Sans, Geist Mono
• RequiresNode.js 20.9 or later, npm, and working knowledge of React and Next.js

Run it locally

Extract the ZIP, open a terminal in the project folder, then run:

npm install
npm run dev

Open localhost:3000. The README covers the data, colors, fonts and animations.

• Price$9 USD, one-time payment. No subscription or renewal.
• TaxesApplicable VAT and sales tax are included in the price. The total is shown before you pay.
• LicenseUnlimited personal and client projects. No resale or redistribution of the source. Read the license
• DeliveryAfter payment, Polar emails your receipt and a download link for the ZIP.
• RefundsIf the files don’t install or run as described and can’t be fixed within 7 days, you get a full refund. Refund policy
• Supporthello@buildindex.dev for the template as delivered.

Secure checkout by Polar. More answers in the questions.