From f408a9fbd20f213330634d509a066c35497cfd77 Mon Sep 17 00:00:00 2001 From: TenX PM Date: Sat, 9 May 2026 17:32:32 +0000 Subject: [PATCH] deploy: hr-portal-v4-designs --- 01-login.html | 267 +++++++++++++++++ 02-admin-dashboard.html | 536 ++++++++++++++++++++++++++++++++++ 03-employee-list.html | 348 ++++++++++++++++++++++ 04-leave-management.html | 278 ++++++++++++++++++ 05-payroll.html | 327 +++++++++++++++++++++ 06-attendance.html | 387 +++++++++++++++++++++++++ 07-recruitment.html | 385 +++++++++++++++++++++++++ 08-employee-dashboard.html | 356 +++++++++++++++++++++++ index.html | 574 +++++++++++++++++++++++++++++++++++++ 9 files changed, 3458 insertions(+) create mode 100644 01-login.html create mode 100644 02-admin-dashboard.html create mode 100644 03-employee-list.html create mode 100644 04-leave-management.html create mode 100644 05-payroll.html create mode 100644 06-attendance.html create mode 100644 07-recruitment.html create mode 100644 08-employee-dashboard.html create mode 100644 index.html diff --git a/01-login.html b/01-login.html new file mode 100644 index 0000000..6460313 --- /dev/null +++ b/01-login.html @@ -0,0 +1,267 @@ + + + + + +HR Portal v4 — Sign In + + + +
+
+
+ + + + + + +
+
HR Portal v4
+
Human Resource Management System
+
+ +
+
+ +
+ + + + + + + +
+
+ +
+ +
+ + + + + + + +
+
+ +
+ + Forgot password? +
+ + + +
or continue with
+ + +
+ +
+ Secured by HR Portal v4  •  © 2026 All rights reserved +
+ v4.2.1 +
+
+ + diff --git a/02-admin-dashboard.html b/02-admin-dashboard.html new file mode 100644 index 0000000..66286ae --- /dev/null +++ b/02-admin-dashboard.html @@ -0,0 +1,536 @@ + + + + + +HR Portal v4 — Admin Dashboard + + + + + + + + +
+
+
Dashboard
+
+ + +
+
+
+ + 5 +
+
+ +
+
AK
+
+
+ +
+
+

Good morning, Arun

+

Friday, 9 May 2026  •  Here's what's happening today

+
+ + +
+
+
+
+ +
+ + + +3 + +
+
247
+
Total Employees
+
+ +
+
+
+ +
+ + + 96% + +
+
198
+
Present Today
+
+ +
+
+
+ +
+ + + -2 + +
+
12
+
On Leave
+
+ +
+
+
+ +
+ + + +2 + +
+
8
+
Open Positions
+
+
+ + +
+ +
+
+
Recent Leave Requests
+ View all +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EmployeeTypeDatesStatus
Priya SharmaAnnual LeaveMay 12–14Pending
Rahul VermaSick LeaveMay 9Approved
Anjali PatelCasual LeaveMay 15–16Pending
Vikram SinghAnnual LeaveMay 20–24Approved
Meena IyerMaternityMay 1–Jun 30Approved
Deepak NairSick LeaveMay 8–9Rejected
+
+ + +
+
+
Attendance This Week
+ View detail +
+
+
+
+
201
+
+
Mon
+
+
+
215
+
+
Tue
+
+
+
207
+
+
Wed
+
+
+
219
+
+
Thu
+
+
+
198
+
+
Today
+
+
+
+
Present
+
Today (live)
+
+
+
+
+ + +
+
+
Recent Hires
+ View all employees +
+
+
+
PS
+
+
Pooja Subramaniam
+
Software Engineer • Engineering
+
+
+
May 6, 2026
+ NEW +
+
+
+
RB
+
+
Rohan Bhatia
+
Product Manager • Product
+
+
+
May 2, 2026
+ NEW +
+
+
+
NK
+
+
Nisha Kulkarni
+
HR Executive • Human Resources
+
+
+
Apr 28, 2026
+
+
+
+
AM
+
+
Arjun Mehta
+
Sales Executive • Sales
+
+
+
Apr 22, 2026
+
+
+
+
SK
+
+
Shalini Krishnamurthy
+
Data Analyst • Analytics
+
+
+
Apr 18, 2026
+
+
+
+
+
+
+ + diff --git a/03-employee-list.html b/03-employee-list.html new file mode 100644 index 0000000..a30e1c3 --- /dev/null +++ b/03-employee-list.html @@ -0,0 +1,348 @@ + + + + + +HR Portal v4 — Employee Directory + + + + + + +
+
+
Employee Directory
+
+ + +
+
+
5
+
AK
+
+
+ +
+
+
+
Employees
+
247 total employees • 8 departments
+
+ +
+ +
+
+ + +
+ + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EmployeeDepartmentDesignationJoining DateTypeStatusActions
+
+
PS
+
Priya Sharma
EMP-0041
+
+
Engineering
Senior Software Engineer
Mar 12, 2023Full-TimeActive
ViewEdit
+
+
RV
+
Rahul Verma
EMP-0028
+
+
Product
Product Manager
Jan 5, 2022Full-TimeActive
ViewEdit
+
+
AP
+
Anjali Patel
EMP-0055
+
+
Human Resources
HR Executive
Jun 1, 2024Full-TimeProbation
ViewEdit
+
+
VS
+
Vikram Singh
EMP-0012
+
+
Sales
Regional Sales Head
Aug 14, 2020Full-TimeActive
ViewEdit
+
+
MI
+
Meena Iyer
EMP-0033
+
+
Finance
Finance Analyst
Sep 20, 2022Full-TimeActive
ViewEdit
+
+
DN
+
Deepak Nair
EMP-0019
+
+
Engineering
DevOps Engineer
Nov 3, 2021Full-TimeInactive
ViewEdit
+
+
NK
+
Neha Kapoor
EMP-0067
+
+
Marketing
Marketing Manager
Feb 14, 2023Full-TimeActive
ViewEdit
+
+
SG
+
Suresh Gupta
EMP-0008
+
+
Engineering
Engineering Manager
Apr 10, 2019Full-TimeActive
ViewEdit
+
+
TR
+
Tanvi Rao
EMP-0081
+
+
Design
UI/UX Designer
Jan 17, 2025ContractProbation
ViewEdit
+
+
AM
+
Arjun Mehta
EMP-0092
+
+
Sales
Sales Executive
Apr 22, 2026Full-TimeProbation
ViewEdit
+ +
+
+
+ + diff --git a/04-leave-management.html b/04-leave-management.html new file mode 100644 index 0000000..5e11964 --- /dev/null +++ b/04-leave-management.html @@ -0,0 +1,278 @@ + + + + + +HR Portal v4 — Leave Management + + + + + +
+
+
Leave Management
+
+
+
5
+
AK
+
+
+ +
+
+
+
Leave Requests
+
Manage and review employee leave applications
+
+
+ + +
+
+ +
+ Pending 5 + Approved 18 + Rejected 3 + All Requests 26 +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EmployeeLeave TypeFromToDaysReasonStatusActions
PS
Priya Sharma
Engineering
AnnualMay 12, 2026May 14, 20263
Family function in Jaipur, need to travel
Pending
AP
Anjali Patel
HR
CasualMay 15, 2026May 16, 20262
Personal medical appointment scheduled
Pending
NK
Neha Kapoor
Marketing
SickMay 9, 2026May 10, 20262
Fever and flu, doctor advised rest
Pending
VS
Vikram Singh
Sales
AnnualMay 20, 2026May 24, 20265
Family vacation planned to Goa
Approved
MI
Meena Iyer
Finance
MaternityMay 1, 2026Jun 30, 202660
Maternity leave as per company policy
Approved
DN
Deepak Nair
Engineering
SickMay 8, 2026May 9, 20262
No medical certificate provided as required
Rejected
+
+ + +
+
+
Request Details
+
Leave Application #LV-2026-041
+
+
+
+
PS
+
+
Priya Sharma
+
Senior Software Engineer • Engineering
+
+
+
Leave TypeAnnual Leave
+
From DateMay 12, 2026
+
To DateMay 14, 2026
+
Duration3 Working Days
+
Balance Left9 days remaining
+
Applied OnMay 7, 2026
+
StatusPending Review
+
Reason
+
Family function in Jaipur — need to travel for a relative's wedding. Will ensure all deliverables are completed before leaving.
+
+ + +
+
+
+
+
+
+ + diff --git a/05-payroll.html b/05-payroll.html new file mode 100644 index 0000000..90ddcff --- /dev/null +++ b/05-payroll.html @@ -0,0 +1,327 @@ + + + + + +HR Portal v4 — Payroll Processing + + + + + +
+
+
Payroll Processing
+
+
5
+
AK
+
+
+ +
+
+
+
Payroll Processing
+
Manage monthly salaries, deductions, and payslips
+
+
+ +
+
+ +
+
+
+
May 2026
+
+
+
+ + Indian Compliance Mode: PF + ESI + TDS Active +
+
+ + +
+ + + +
+ + +
+
+
+ + Total Employees +
+
247
+
Eligible for May payroll
+
+
+
+ + Processed +
+
0
+
Pending processing
+
+
+
+ + Total Gross +
+
₹18.4L
+
Before deductions
+
+
+
+ + Total Net Pay +
+
₹15.6L
+
After all deductions
+
+
+ + +
+
+
Employee Payroll — May 2026
+
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EmployeeDesignationDays WorkedGross PayPF (12%)ESI (0.75%)TDSNet PayAction
PS
Priya Sharma
EMP-0041
Sr. Software Engineer25₹1,20,000₹14,400₹900₹8,500₹96,200
RV
Rahul Verma
EMP-0028
Product Manager26₹1,45,000₹17,400₹1,088₹12,000₹1,14,512
AP
Anjali Patel
EMP-0055
HR Executive24₹55,000₹6,600₹413₹1,200₹46,787
VS
Vikram Singh
EMP-0012
Regional Sales Head21₹1,80,000₹21,600Exempt₹18,500₹1,39,900
NK
Neha Kapoor
EMP-0067
Marketing Manager25₹95,000₹11,400₹713₹5,200₹77,687
SG
Suresh Gupta
EMP-0008
Engineering Manager26₹2,20,000₹21,600Exempt₹28,000₹1,70,400
MI
Meena Iyer
EMP-0033
Finance Analyst0₹75,000₹9,000₹563₹3,000₹62,437
AM
Arjun Mehta
EMP-0092
Sales Executive7₹28,000₹3,360₹210₹0₹24,430
TOTAL (8 shown / 247 employees)₹9,18,000₹1,05,360₹3,887₹76,400₹7,32,353
+
+
+
+
+ + diff --git a/06-attendance.html b/06-attendance.html new file mode 100644 index 0000000..fdcc4a0 --- /dev/null +++ b/06-attendance.html @@ -0,0 +1,387 @@ + + + + + +HR Portal v4 — Attendance Dashboard + + + + + +
+
+
Attendance
+
+
5
+
AK
+
+
+ +
+
+
+
Attendance Dashboard
+
Real-time attendance tracking and management
+
+
+ +
+
+ + +
+
+ + Friday, May 9, 2026 +
+ + +
+
+ Live — Last updated 2 min ago +
+
+ + +
+
+
+ +
+
+
198
+
Present Today
+
+
+
+
+ +
+
+
32
+
Absent
+
+
+
+
+ +
+
+
12
+
On Leave
+
+
+
+
+ +
+
+
5
+
Half Day
+
+
+
+ + +
+
+
Today's Attendance Log
+
Showing 8 of 247 employees
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EmployeeClock InClock OutHours WorkedGPS LocationStatus
PS
Priya Sharma
Engineering
09:02 AM—7h 32mMumbai OfficePresent
RV
Rahul Verma
Product
09:18 AM—7h 16mWFHPresent
AP
Anjali Patel
HR
09:45 AM01:30 PM3h 45mMumbai OfficeHalf Day
VS
Vikram Singh
Sales
——0h 0mNo dataOn Leave
MI
Meena Iyer
Finance
——0h 0mNo dataOn Leave
DN
Deepak Nair
Engineering
———No dataAbsent
NK
Neha Kapoor
Marketing
08:52 AM—7h 42mBangalore OfficePresent
SG
Suresh Gupta
Engineering
09:01 AM—7h 33mMumbai OfficePresent
+
+ + +
+
+
Monthly Attendance Heatmap — May 2026
+
Priya Sharma • Engineering
+
+
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+
1
+
2
+
3
+
4
+ +
5
+
6
+
7
+
8
+
9
+
10
+
11
+ +
12
+
13
+
14
+
15
+
16
+
17
+
18
+ +
19
+
20
+
21
+
22
+
23
+
24
+
25
+ +
26
+
27
+
28
+
29
+
30
+
31
+
+
+
+
+ Less +
+
+
+
+
+
+
+
+ More + Today outlined in blue + Weekends in grey +
+
+
+
+ + diff --git a/07-recruitment.html b/07-recruitment.html new file mode 100644 index 0000000..906c515 --- /dev/null +++ b/07-recruitment.html @@ -0,0 +1,385 @@ + + + + + +HR Portal v4 — Recruitment Pipeline + + + + + +
+
+
Recruitment
+
+
5
+
AK
+
+
+ +
+
+
+
Applicant Pipeline
+
Track and manage candidates across hiring stages
+
+
+ + +
+
+ + +
+ Job Posting: + +
+ + + 8 Applicants + + + + Active + + Posted Apr 15, 2026 +
+
+ + +
+ + +
+
+ Applied + 3 +
+ +
+
Kiran Reddy
+
kiran.reddy@gmail.com
+
+ + May 7, 2026 +
+
+ LinkedIn +
+ + +
+
+
+ +
+
Pooja Menon
+
pooja.m@outlook.com
+
+ + May 8, 2026 +
+
+ Naukri +
+ + +
+
+
+ +
+
Ravi Shankar
+
ravi.s@protonmail.com
+
+ + May 9, 2026 +
+
+ Referral +
+ + +
+
+
+ +
+ + Add applicant +
+
+ + +
+
+ Screening + 2 +
+ +
+
Sanjay Krishnan
+
sanjay.k@gmail.com
+
+ + Apr 28, 2026 +
+
+ LinkedIn +
+ + +
+
+
+ +
+
Lakshmi Iyer
+
lakshmi.i@yahoo.com
+
+ + Apr 30, 2026 +
+
+ Naukri +
+ + +
+
+
+ +
+ + Add applicant +
+
+ + +
+
+ Interview + 1 +
+ +
+
Ananya Bose
+
ananya.b@gmail.com
+
+ + Interview: May 11, 10AM +
+
+ + Apr 22, 2026 +
+
+ Referral +
+ + +
+
+
+ +
+ + Add applicant +
+
+ + +
+
+ Offer + 1 +
+ +
+
Rajesh Nambiar
+
rajesh.n@gmail.com
+
+ ₹1,40,000/mo offered +
+
+ + Apr 10, 2026 +
+
+ LinkedIn +
+ + +
+
+
+ +
+ + Add applicant +
+
+ + +
+
+ Hired + 1 +
+ +
+
Divya Suresh
+
divya.s@gmail.com
+
+ Joining: Jun 1, 2026 +
+
+ + Apr 1, 2026 +
+
+ Referral +
+ +
+
+
+
+ + +
+
+ Rejected + 0 +
+ +
+
No rejected candidates for this position yet.
+
+
+ +
+
+
+ + diff --git a/08-employee-dashboard.html b/08-employee-dashboard.html new file mode 100644 index 0000000..3e198fe --- /dev/null +++ b/08-employee-dashboard.html @@ -0,0 +1,356 @@ + + + + + +HR Portal v4 — Employee Self-Service + + + + + + +
+
+
My Dashboard
+
+
+ + 2 +
+
+
PS
+
Priya Sharma
+ +
+
+
+ +
+ +
+
+
+

Good morning, Priya

+

Friday, May 9, 2026  •  Senior Software Engineer • Engineering • EMP-0041

+
+
+ + Clocked in at 09:02 AM today +
+
+
+ + +
+
+
+ +
+
12
+
Annual Leave Balance
+
3 used • 15 total
+
+
+
+ +
+
96%
+
Attendance Rate
+
May 2026 • 25 days present
+
+
+
+ +
+
May 31
+
Next Payslip
+
₹96,200 net expected
+
+
+
+ +
+
₹2,400
+
Pending Expenses
+
2 claims awaiting approval
+
+
+ + +
Quick Actions
+
+
+
+ +
+
Apply Leave
+
+
+
+ +
+
Clock Out
+
+
+
+ +
+
Submit Expense
+
+
+
+ +
+
View Payslip
+
+
+ + +
+ +
+
+
Recent Leave History
+ View all +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Leave TypeDatesDaysStatus
Annual Leave
Family function		May 12–14, 20263Pending
Sick Leave
Viral fever		Mar 3, 20261Approved
Annual Leave
Festival holidays		Jan 14–15, 20262Approved
+
+ + +
+
Performance Score
+
Q1 2026 — Mid-Year Review
+
+ + + + +
+
4.2
+
out of 5.0
+
+
+
+ Exceeds Expectations +
+
+
+ Technical Skills +
+ 4.5 +
+
+ Collaboration +
+ 4.0 +
+
+ Delivery +
+ 4.2 +
+
+ Communication +
+ 3.8 +
+
+
+
+ + +
+
+
Upcoming Holidays
+ Full calendar +
+
+
+
26
+
May
+
+
+
Maharashtra Day
+
State Holiday • Restricted
+
+
17 days away
+
+
+
+
15
+
Aug
+
+
+
Independence Day
+
National Holiday • Mandatory
+
+
98 days away
+
+
+
+
2
+
Oct
+
+
+
Gandhi Jayanti
+
National Holiday • Mandatory
+
+
146 days away
+
+
+
+
+ + diff --git a/index.html b/index.html new file mode 100644 index 0000000..861ca22 --- /dev/null +++ b/index.html @@ -0,0 +1,574 @@ + + + + + +HR Portal v4 — Design Mockups + + + + + +
+ +

+ High-fidelity UI/UX design mockups for the HR Portal v4 system — a comprehensive enterprise-grade Human Resource Management platform built for Indian organizations. +

+
+
+ + 8 Screen Mockups +
+
+ + Corporate Blue Theme +
+
+ + Indian Compliance Ready +
+
+ + Pure HTML + CSS +
+
+
+ + +
+
+
+
All Screen Mockups
+
Click any card to open the full-screen mockup in your browser
+
+
+ + 8 of 35 screens +
+
+ +
+ + +
+ +
+
Login Page
+
Secure sign-in screen with email/password authentication and Microsoft SSO option for enterprise users.
+
+ Email Auth + SSO Support + Remember Me + Forgot Password +
+ + + View Mockup + +
+
+ + +
+
+
02
+
+ + + + + + +
+
+
+
Admin Dashboard
+
Central command center for admins with KPI cards, leave request overview, attendance chart, and recent hires.
+
+ KPI Cards + Attendance Chart + Leave Summary + Recent Hires +
+ + + View Mockup + +
+
+ + +
+
+
03
+
+ + + + + + +
+
+
+
Employee Directory
+
Searchable and filterable employee table with avatar initials, status badges, department, and role data.
+
+ Filter & Search + Status Badges + Pagination + Add Employee +
+ + + View Mockup + +
+
+ + +
+
+
04
+
+ + + + + + +
+
+
+
Leave Management
+
Admin view for reviewing, approving, or rejecting leave requests with a detail side panel and status tabs.
+
+ Approve/Reject + Detail Panel + Status Tabs + Leave Types +
+ + + View Mockup + +
+
+ + +
+
+
05
+
+ + + + +
+
+
+
Payroll Processing
+
Monthly payroll with Indian compliance — PF, ESI, TDS breakdowns, gross/net calculations, and payslip generation.
+
+ PF Deductions + ESI Compliance + TDS Calculation + Payslip Gen +
+ + + View Mockup + +
+
+ + +
+
+
06
+
+ + + + +
+
+
+
Attendance Dashboard
+
Real-time clock-in/out tracking, GPS location data, color-coded status grid, and monthly heatmap calendar.
+
+ Live Tracking + GPS Location + Heatmap Calendar + Status Grid +
+ + + View Mockup + +
+
+ + +
+
+
07
+
+ + + +
+
+
+
Recruitment Kanban
+
Visual applicant pipeline board with 6 stages — Applied, Screening, Interview, Offer, Hired, Rejected — with drag-and-drop cards.
+
+ Kanban Board + 6 Stages + Applicant Cards + Job Selector +
+ + + View Mockup + +
+
+ + +
+
+
08
+
+ + + + +
+
+
+
Employee Self-Service
+
Personalized employee portal with leave balance, attendance stats, upcoming payslip, quick actions, and performance score ring.
+
+ Quick Actions + Performance Ring + Leave History + Holidays +
+ + + View Mockup + +
+
+ + +
+
+
+ +
27 more screens
+
+
+
+
More Screens
+
Profile editor, performance reviews, expense claims, document manager, reports, settings, and 20+ more screens to be designed during development.
+
+ + Coming in development phase +
+
+
+ +
+
+ + + + + +