Payroll Processing & Calculations

Calculate net pay, generate payslips, and approve payroll runs.

Overview

This payroll processing app helps HR and finance teams calculate employee net pay for a selected period, review tax and benefit withholdings, generate payslips, and simulate an approval workflow. Everything runs in the browser with an editable grid, summary totals, charts, and Excel/PDF export—no payroll server required.

Key features

Payroll grid

AG Grid shows Employee, Base Salary, Overtime, Deductions, Tax, Net Pay, and Status for each row in the selected period. Base salary, overtime, and deductions are editable; tax and net pay recalculate automatically. A pinned total row sums the period. Eight sample employees preload across two periods.

Tax and benefits settings

Global inputs control tax rate (%) and benefits per employee ($). Changing either value instantly recalculates every row:

Net pay = (Base + Overtime) − tax − deductions − benefits

A helper line under the settings summarizes the formula.

Period and import

Choose Monthly or Bi-weekly pay period type, then pick a specific period from the dropdown. Import Payroll accepts Excel/CSV with Employee, Base Salary, Overtime, Deductions, and optional Period columns.

Summary totals

KPI cards display period Gross Pay, Taxes, Deductions + Benefits, and Net Pay.

Payslip PDFs

• Payslip PDF — generate a single employee payslip from the dropdown
• All Payslips PDF — multi-page PDF for every employee in the period

Each payslip itemizes base, overtime, gross, tax, deductions, benefits, and net pay.

Charts and approval

• Payroll breakdown doughnut chart — base, overtime, taxes, deductions/benefits, net
• Net pay by employee bar chart

Submit for Approval and Approve Payroll buttons simulate a Draft → Submitted → Approved workflow with status banner and per-row status coloring.

Export, persistence, and appearance

• Export Full Report — Excel workbook with detail sheet and summary sheet
• Save / Load — persist rows, settings, period, and approval status in localStorage
• Dark mode toggle with remembered preference and chart theme updates

Data & persistence

Sample payroll rows cover six employees in Mar 2026 and two in Feb 2026. Full state saves to localStorage in the same browser.

Built with

Tailwind CSS, AG Grid Community, Alpine.js, Chart.js, SheetJS, jsPDF, and jspdf-autotable.

Try the interactive walkthrough below. Click Walk through features and use Next / Back (or arrow keys) to explore every feature.