A full-stack platform that runs payroll end to end, from biometric attendance to approved pay runs and payslips, alongside employee records, leave, announcements, reports and audit history.
Role
Full-stack development
Platform
Responsive web application
Core stack
Vue 3 · Express · PostgreSQL
// 01 / THE STORY
Why this was built.
01
The challenge
Payroll depends on attendance, leave, schedules and government rules, and a single mistake reaches every employee. HR was working from a spreadsheet workbook and needed a system that could follow it exactly while making every decision traceable.
02
The approach
I modelled payroll as a pay run per payday and shift: import attendance, review only the days that need a decision, calculate, approve, mark paid, then release payslips. Formulas were reconciled line by line against the company workbook, and a labelled practice mode lets HR rehearse on real data without touching real pay.
03
What it delivers
Joyno HR now covers the full employee cycle in one place: records, attendance, leave, Day and Night payroll, workbook-format payslips, government contributions, 13th-month and SIL reports, and announcements, backed by more than 150 automated tests.
// 02
Key capabilities
Built around the real HR and payroll cycle, not isolated admin screens.
Pay runs per payday and shift: employees, attendance, review pay, approve and pay, payslips
Separate Day and Night shift payroll, with automatic night differential
Biometric attendance CSV import with a read-only preview and audited HR review
First and last scan of the day from any reader, with late and undertime in minutes
Approved overtime and special-holiday / rest-day pay calculated from attendance
One adjust-pay panel for loans, cash advances, allowances and basic-pay corrections
SSS, PhilHealth, Pag-IBIG and withholding tax from an editable BIR table
Payslip PDFs in the company's workbook format, with print, save and email
Practice payroll on selected employees, clearly labelled and kept out of real pay
13th-month, SIL cash conversion, remittance, payroll and attendance reports
One profile per employee for records, compensation history, schedules and government IDs
Configurable leave policies, Philippine holiday-aware credits and a shared leave calendar
Leave approvals, rescheduling, cancellations with credit refunds, and calendar date changes
Announcements targeted by shift, department or person, with read receipts
Tasks and meetings, notifications, workspace search and email preferences
Role-based Employee, HR, Admin and CEO workspaces with full audit history
// 03
Technology
Built across the frontend, API, database, reporting, and communication layers.
Frontend
Vue 3, Composition API, Pinia, Vue Router, Vite and Tailwind CSS
Backend
Node.js, Express and REST APIs, with payroll rules versioned per run
Data & authentication
PostgreSQL with row-level security, migrations and JWT authorization
Payroll documents
Workbook-format payslip PDFs, payroll registers and contribution exports
Communication
Payslip and announcement email, plus in-app notifications
Quality
150+ backend tests, isolated database integration tests and Playwright checks
