Building a Robust Salary Slip Generation System for School ERP
A full‑stack recap on delivering an end‑to‑end payroll workflow — from batch generation to branded print templates and employee self‑service.
Introduction
In a growing School ERP ecosystem, the HRMS (Human Resource Management System) plays a pivotal role in ensuring payroll accuracy, employee satisfaction, and compliance. Today I implemented a complete Salary Slip Generation System that integrates with our existing React.js frontend and .NET Core backend. This post summarizes the business value, technical challenges, and real‑world impact of that work.
Project Context
Stack: React.js (frontend) + .NET Core (backend). Focus module: Payroll Management inside HRMS.
The objective was to ship a production‑ready salary slip workflow: generate slips in bulk, allow employee self‑service, support branded printing/PDF export, and ensure secure distribution via email.
What I Delivered Today
Key Deliverables
- 7 fully functional React components (~3,200 lines of code)
- 1 HTML print template (A4, brandable)
- 4 documentation files (frontend README, install guide, implementation summary, print guide)
- Complete integration with 7 backend API endpoints
Major Components
- SalarySlips.js
- EmployeeSalarySlips.js
- SalarySlipViewDialog.js
- SalarySlipPrintTemplate.js
- EmailSalarySlipDialog.js
- BatchStatusDialog.js
- BatchEmployeeListDialog.js
Business Value
This implementation reduces manual intervention for HR, speeds up monthly payroll cycles, and provides employees with immediate access to their salary history. Key benefits include:
- Bulk generation and distribution of salary slips
- Employee self‑service for downloads and printing
- Automated email queueing and tracking for compliance
- Masked banking data to protect sensitive information
Technical Highlights & Challenges
Print Template Architecture
To deliver stable, printable salary slips, I built a dedicated SalarySlip.html template and implemented a lightweight variable replacement system using {{VariableName}} tokens. This removed the need for the previous react-to-print dependency and produced consistent, brandable A4 PDFs across browsers.
Number‑to‑Words for Indian Currency
Payroll requires amounts in words for formal payslips. I implemented an Indian currency number‑to‑words converter that handles lakhs and crores formatting, ensuring legal and regional correctness.
Asynchronous Batch Processing
Processing large batches required careful state management and UX feedback. I added contextual loading messages (for example: “Fetching attendance of July 2024…”), batch status dialogs, and resilient retry/error handling to avoid partial failures.
Security and Compliance
Implemented JWT authentication and role‑based access control. Bank account numbers are masked in the UI and full values are only accessible to authorized roles. Email sending is queued and logged for audit.
Fixes & UX Improvements
- Fixed API integration issues in BatchEmployeeListDialog
- Prevented event propagation in Chip components
- Added minimum width rules to select/dropdown controls
- Styled table headers to use the primary theme color
- Resolved callback ordering problems in advance dialogs
Developer Notes & Technologies
The implementation follows component‑based React patterns and keeps dialogs reusable and decoupled from business logic. The stack and technologies used:
React (Hooks)Material‑UI v7.NET Core APIsMoment.jsHTML/CSS Print TemplateCustom API Wrapper
Documentation
I added four documentation files to the repo to help future contributors onboard quickly:
- FRONTEND_README.md
- INSTALLATION_GUIDE.md
- IMPLEMENTATION_SUMMARY.md
- PRINT_IMPLEMENTATION.md
Real‑World Impact
Quantifiable improvements you can expect:
- Time saved: HR reduces manual slip generation and distribution time by hours each month.
- Accuracy: Automated slips reduce calculation errors and formatting issues.
- Transparency: Audit logs and email tracking increase trust and compliance.
Summary — Key Achievements
- 7 production React components (3,200+ LOC)
- 1 branded, A4 HTML print template with token replacement
- Full backend integration and robust error handling
- 4 documentation artifacts for maintainability
- Improved UX and accessibility for HR and employees
Interested in a trimmed LinkedIn version, a slide summary, or a component diagram? I can prepare any of those — just say the word.