01 / 12
navigate  |  F fullscreen
BCA 6th Semester · Pre-Final Submission · RKDF University · Batch 2023–2026
Human Resource
Management
Information System
A fully client-side web prototype for automating employee records, attendance tracking, and payroll computation — built with pure HTML5, CSS3 & Vanilla JavaScript.
Project Code HRMIS-BCA6-2025
Institution RKDF University
Submission Type Pre-Final Project
Batch 2023 – 2026
Aditya Kr. Pandey
Team Lead & Developer
Harshita Rai
System Analyst
Md. Istiyaque Ansari
UI Designer & Tester
Problem Statement
Why Manual HR Processes Fail
Traditional HR departments rely on paper registers, spreadsheets, and manual calculators — a system riddled with inefficiencies, errors, and delays.

Manual Attendance Registers

Paper-based attendance is prone to proxy entries, illegible handwriting, and data loss. Calculating monthly percentages manually takes hours.

Error-Prone Payroll Calculation

Manual salary computation using calculators leads to arithmetic errors in PF deductions, tax calculations, and net pay — causing employee disputes.

Delayed Report Generation

Compiling department-wise headcount, salary distribution, and attendance summaries manually takes days, delaying critical HR decisions.

No Centralized Employee Directory

Employee records scattered across multiple files and folders make searching, updating, and auditing employee data extremely difficult.

Our Solution: HRMIS automates all of the above — zero manual calculations, instant reports, and a single centralized interface for all HR operations.
Proposed Solution
Introducing HRMIS
A modern, browser-based Human Resource Management Information System with 5 integrated modules that automate the entire HR workflow from employee onboarding to payroll disbursement.
Dashboard
Live KPI tracking with dynamic department charts
Employee Management
Centralized directory with auto-ID generation & live search
Attendance Module
Monthly input with auto-calculated % and performance badges
Payroll Engine
Automated PF (12%) + Tax (10%) deduction and net pay output
Analytics & Reports
Department-wise gross, deductions, and net distribution tables

🎯 Core Objective

Replace manual HR processes with a fast, accurate, and visually intuitive system that any HR professional can operate without technical training.

Key Differentiators
  • 100% client-side — no server required
  • In-memory data arrays for lightning-fast performance
  • Premium dark UI with pink accent design system
  • Single-click payroll computation for all employees
5
Modules
0
Manual Errors
1-Click
Payroll Run
Technologies Used
Pure Client-Side Web Stack
HRMIS is built exclusively with native browser technologies — no frameworks, no backend, no database. This ensures maximum portability and zero deployment overhead.
🌐
HTML5
Semantic Markup
Semantic elements for structured layout. Forms for data input. Tables for record display. Canvas-ready architecture for future chart integration.
🎨
Advanced CSS3
Custom Properties + Flexbox + Grid
CSS Variables for the design system. Flexbox & Grid for responsive layouts. Keyframe animations, transitions, and the premium dark minimal theme.
Vanilla JavaScript
ES6+ · No Frameworks
In-memory arrays as the data store. DOM manipulation for live UI updates. All business logic — payroll formulas, attendance %, badge assignment — written in pure JS.
⚠️ Important Note: This prototype uses no backend technologies (no PHP, Node.js, or SQL). All data is processed via in-memory JavaScript arrays for lightning-fast performance. Database integration is planned for the next phase (see Future Scope).
System Architecture
Architecture Overview
A single-tier, client-side architecture where the browser acts as both the presentation layer and the processing engine — all logic runs locally with zero network dependency.
User Layer
HR Manager / Admin
Presentation
HTML5 UI
CSS3 Styling
Responsive Layout
Dark Theme System
Logic Layer
Payroll Engine
Attendance Calculator
Badge Assigner
Analytics Aggregator
Data Layer
Employee Array [ ]
Attendance Array [ ]
Payroll Array [ ]
Presentation Layer HTML5 + CSS3 renders the UI. All forms, tables, and dashboards are built with semantic HTML and styled with CSS custom properties.
Business Logic Layer Vanilla JavaScript handles all computations — payroll formulas, attendance percentages, badge assignments, and report aggregation.
Data Layer JavaScript in-memory arrays store employee, attendance, and payroll records during the session. No external database required.
Module 1
Employee Management
A centralized employee directory that auto-generates unique Employee IDs and supports real-time live search across all records.
Employee Directory
Search employees...
Emp ID Name Department Designation Base Salary Status
EMP-001 Rahul Sharma Engineering Sr. Developer ₹65,000 Active
EMP-002 Priya Verma HR HR Manager ₹55,000 Active
EMP-003 Amit Gupta Finance Accountant ₹48,000 Active
EMP-004 Sneha Patel Marketing Brand Executive ₹42,000 On Leave
EMP-005 Vikram Singh Engineering QA Engineer ₹50,000 Active

Auto Employee ID Generation

System auto-assigns sequential IDs (EMP-001, EMP-002…) when a new employee is added — no manual ID management needed.

Live Search & Filter

Real-time search filters the employee table as you type — by name, department, or designation — with instant DOM updates.

In-Memory Data Store

All employee records are stored in a JavaScript array. Add, view, and search operations are O(n) — blazing fast for prototype scale.

Department Classification

Each employee is tagged to a department (Engineering, HR, Finance, Marketing) — enabling department-wise analytics downstream.

Module 2
Smart Attendance Tracking
HR inputs "Days Present" against a fixed monthly working day count (e.g., 26 days). The system auto-calculates attendance % and assigns color-coded performance badges.

📐 Attendance Calculation Formula

// Core Formula
Attendance % = (Days Present ÷ Working Days) × 100

// Example: 24 present out of 26 days
Attendance % = (24 ÷ 26) × 100 = 92.31%
Excellent
≥ 90%
🟢 Green
Average
75–89%
🟠 Orange
Poor
Below 75%
🔴 Red
SAMPLE OUTPUT — APRIL 2025 (26 Working Days)
Rahul Sharma
26 / 26
100%
🟢 Excellent
Priya Verma
24 / 26
92.3%
🟢 Excellent
Amit Gupta
21 / 26
80.7%
🟠 Average
Sneha Patel
18 / 26
69.2%
🔴 Poor
Vikram Singh
25 / 26
96.1%
🟢 Excellent
Module 3 · Core Logic
Automated Payroll Engine
The heart of HRMIS. Fetches base salary, adjusts for attendance, then deducts exactly 12% PF and 10% Tax to output the final Net Pay — in a single click.
COMPUTATION PIPELINE
1

Fetch Base Salary

Reads the employee's base salary from the Employee Management module

2

Attendance Adjustment

Gross Pay = Base Salary × (Attendance % ÷ 100)

3

PF Deduction — 12%

Provident Fund = Gross Pay × 0.12 (mandatory statutory deduction)

4

Tax Deduction — 10%

Income Tax = Gross Pay × 0.10 (simplified TDS for prototype)

5

Net Pay Output

Net Pay = Gross Pay − PF Deduction − Tax Deduction

LIVE CALCULATION — RAHUL SHARMA
Payslip Preview · April 2025
Employee ID EMP-001
Base Salary ₹ 65,000
Attendance 100% (26/26 days)
Gross Pay ₹ 65,000
PF Deduction (12%) − ₹ 7,800
Tax Deduction (10%) − ₹ 6,500
Total Deductions − ₹ 14,300
💰 NET PAY ₹ 50,700
// Formula Summary
Gross = Base × (Att% / 100)
PF = Gross × 0.12
Tax = Gross × 0.10
Net = Gross PF Tax
Module 4 & 5
Dashboard & Analytics Reports
The Dashboard provides live KPI cards and department headcount charts. Analytics & Reports generates summary tables showing gross pay, deductions, and net distribution by department.
DEPARTMENT-WISE HEADCOUNT DISTRIBUTION
Engineering
40%
HR
20%
Finance
20%
Marketing
20%
PAYROLL ANALYTICS TABLE — APRIL 2025
Department Employees Total Gross Total Deductions Net Payout
Engineering 2 ₹1,15,000 ₹26,450 ₹88,550
HR 1 ₹55,000 ₹12,650 ₹42,350
Finance 1 ₹38,769 ₹8,917 ₹29,852
Marketing 1 ₹29,077 ₹6,688 ₹22,389
LIVE KPI DASHBOARD CARDS
5
Total Employees
87.7%
Avg. Attendance
Total Gross Payroll ₹2,37,846
Total PF Deductions ₹28,542
Total Tax Deductions ₹23,785
💰 Total Net Payout ₹1,83,141
Dashboard Features
All KPI cards update dynamically as employees are added or attendance is recorded. Department charts reflect real-time headcount distribution.
Expected Outcomes
What HRMIS Delivers
By replacing manual HR processes with HRMIS, organizations gain measurable improvements in accuracy, speed, and operational efficiency.
0

Manual Calculation Errors

Automated payroll formulas eliminate arithmetic mistakes in PF, tax, and net pay computation entirely.

< 1s

Payroll Processing Time

Single-click payroll run processes all employees instantly — what took hours now takes under a second.

Instant

Report Generation

Department-wise analytics and payroll summaries are generated in real-time — no manual compilation needed.

Live

Employee Search

Real-time search across the entire employee directory — find any record in milliseconds.

Auto

Performance Badges

Attendance-based Green/Orange/Red badges are assigned automatically — no manual HR review required.

100%

Browser-Based Access

No installation, no server setup. HRMIS runs entirely in the browser — accessible on any device instantly.

Future Scope
Planned Enhancements
The current prototype establishes the core HR workflow. The following features are planned for future development phases to transform HRMIS into a production-ready system.

MySQL Database Integration

Replace in-memory arrays with a persistent MySQL database to store employee, attendance, and payroll records permanently across sessions.

Biometric Attendance Integration

Connect HRMIS to biometric devices (fingerprint/face recognition) to auto-populate attendance data — eliminating manual HR input entirely.

Employee Login Portal

A dedicated employee-facing portal where staff can view their own payslips, attendance records, and performance badges securely.

Leave Request Management

A structured leave application and approval workflow — employees submit requests, managers approve/reject, and attendance auto-adjusts.

PDF Payslip Export

Generate and download individual employee payslips as formatted PDF documents directly from the payroll module.

Email & SMS Notifications

Automated payslip delivery via email and attendance alerts via SMS — keeping employees informed without manual communication.

Phase 1
Current Prototype
Phase 2
MySQL + Backend
Phase 3
Biometric + Login
Phase 4
Full Production
Conclusion
Project Summary
KEY ACHIEVEMENTS
Successfully designed and implemented a fully functional HRMIS prototype using only HTML5, CSS3, and Vanilla JavaScript — demonstrating that complex business logic can be achieved without a backend.
The Payroll Engine accurately computes gross pay, applies 12% PF and 10% Tax deductions, and outputs net pay — eliminating all manual calculation errors.
The Attendance Module automates percentage calculation and assigns performance badges, replacing error-prone manual registers.
All 5 modules — Dashboard, Employee Management, Attendance, Payroll, and Analytics — are fully integrated and operational in the prototype.
The system is deployed as a live web application, accessible at the project GitHub Pages URL, demonstrating real-world deployment capability.
"HRMIS proves that a well-architected client-side application can automate critical HR workflows — from employee onboarding to payroll disbursement — with zero manual intervention and zero errors."
— Team HRMIS, BCA 6th Semester, RKDF University
5
Modules Built
3
Team Members
0
Backend Needed
22%
Auto Deductions
✓ Payroll Automated ✓ Attendance Tracked ✓ Reports Generated 🚀 Live Deployed
RKDF University · BCA 6th Semester · Batch 2023–2026
Thank
You
We welcome your questions, feedback, and suggestions on the HRMIS project.
Aditya Kr. Pandey
Team Lead & Developer
Harshita Rai
System Analyst
Md. Istiyaque Ansari
UI Designer & Tester
HRMIS · Human Resource Management Information System · Built with HTML5, CSS3 & Vanilla JavaScript