Angular 20 Enterprise HRMS & Employee Management System

Enterprise Human Resource Management Platform | Code With Jamshed

A production-inspired Human Resource Management System (HRMS) built with Angular 20 for managing employees, departments, attendance, leave, timesheets, payroll, performance, recruitment, documents, reports, and HR administration.

Built with Angular Signals, RxJS, Standalone Components, Reactive Forms, Angular CDK, Bootstrap, and SCSS, the application demonstrates scalable enterprise Angular architecture, reusable UI patterns, realistic HR workflows, and backend-ready frontend integration.

The platform covers the employee lifecycle from recruitment and employee management to attendance, leave, payroll, performance, and workforce analytics.

Demo Credentials

Email: admin@hrms.dev
Password: password

Screenshots

HR Dashboard

HR Dashboard - Dark Mode

Employee Directory

Employee Details

Organization

Attendance Dashboard

Leave Management

Leave Approval Workflow

Timesheets

Payroll Overview

Performance Dashboard

Recruitment Pipeline

Angular Recruitment Applicant Tracking System

Documents

Angular HRMS Employee Document Management

Reports

Administration

Settings

Project Overview

Angular Enterprise HRMS is an enterprise-style Angular 20 HRMS and Employee Management System designed to demonstrate maintainable, scalable, accessible, and responsive enterprise frontend architecture.

Instead of being a collection of unrelated CRUD screens, the application models connected HR workflows including employee lifecycle management, organization structure, attendance and attendance corrections, leave requests and approvals, weekly timesheets, payroll overview, performance reviews, recruitment/ATS, employee documents, reports, administration, notifications, and employee self-service.

This project is suitable for:

Angular portfolio demonstrations
Frontend developer interviews
Enterprise Angular architecture discussions
HRMS and employee-management project references
YouTube project walkthroughs
Freelance client showcases
Frontend system-design discussions

Tech Stack

Technology	Purpose
Angular 20	Primary frontend framework
TypeScript	Strongly typed application code
Standalone Components	Modern Angular component architecture
Angular Signals	Local and feature-level reactive state
RxJS	Async workflows and service streams
Angular Router	Navigation and lazy-loaded routes
Reactive Forms	Business forms and validation
Angular CDK	Drag-and-drop and interaction utilities
Bootstrap 5.3	Responsive layout utilities
SCSS	Application styling
CSS Variables	Theme and design tokens
Font Awesome	Application icons
ApexCharts / Charts	HR analytics visualization
Typed Mock Services	Frontend data-access layer
Local Storage	Demo session and preferences

User Roles

Role	Primary Responsibility
Super Admin	System configuration, users, roles and HR data
HR Admin / HR Manager	Employees, departments, attendance, leave, recruitment and reports
Manager	Team overview, approvals, timesheets and performance
Employee	Self-service profile, attendance, leave, timesheets and documents
Payroll / Finance Viewer	Payroll overview and selected reports

Frontend role checks are demonstration-only. Production authorization must also be enforced by a backend.

Angular HRMS Features

Authentication & Access

Login, forgot/reset password, OTP/verification UI, session-expired and access-denied pages, authentication guard, role-aware routes, current-user profile, and logout workflow.

HR Dashboard & Workforce Analytics

Workforce KPIs, active employees, employees on leave, new joiners, attendance, open positions, pending approvals, department distribution, employee growth, leave summary, people events, recent activity, and quick actions.

Employee Management System

Employee directory, add/edit employee, employee details, personal/employment/contact information, emergency contacts, department/manager information, compensation summary, documents, attendance/leave/performance summaries, activity timeline, search, filters, sorting, pagination, and employee status workflows.

Organization & Department Management

Departments, department details, job titles, teams, office locations, reporting hierarchy, department heads, and organization summaries.

Attendance Management System

Daily attendance, employee history, Clock In/Clock Out demo, date and department filters, attendance corrections, manager approval/rejection, and monthly summaries.

Statuses: Present, Absent, Late, Half Day, Work From Home.

Leave Management & Approval Workflow

Leave dashboard, balances, leave types, apply leave, employee requests, approvals, rejection comments, leave calendar, and date/employee filters.

Statuses: Pending, Approved, Rejected, Cancelled.

Employee Timesheet Management

Weekly timesheets, project/task association, billable/non-billable hours, submission, manager approval/rejection, and timesheet status summaries.

Payroll Management Overview

Employee payroll list, salary structure summary, earnings, deductions, net pay, month filters, payroll status, payslip preview UI, and payroll analytics.

Version 1 is a presentation/demo implementation and does not contain a real statutory payroll, tax, banking, or payment engine.

Employee Performance Management

Review cycles, employee reviews, goals/objectives, goal progress, ratings, manager feedback, performance distribution, and top-performer summaries.

Recruitment & Applicant Tracking System (ATS)

Job openings, candidate management, application pipeline, interview scheduling UI, notes, offer status, recruitment analytics, and Angular CDK drag-and-drop.

Candidate stages: Applied → Screening → Interview → Offer → Hired / Rejected.

Employee Document Management

Document center, categories, employee documents, upload placeholder, expiry tracking, expiring-document widgets, search, filters, and view/download placeholders.

HR Reports & Workforce Analytics

Workforce, headcount, department, attendance, leave, timesheet, payroll, performance, and recruitment reports with date/department filters, charts, summary cards, and export-ready UI.

Administration & RBAC UI

User management, roles, permissions, role-permission matrix, approval configuration placeholder, audit log, system notifications, and master-data configuration.

Settings & Employee Self-Service

Profile, preferences, Light/Dark/System theme, notifications, security, company settings, working hours, holiday calendar, and leave-policy placeholder.

Angular Enterprise HRMS Architecture

src/
├── app/
│   ├── core/
│   │   ├── guards/
│   │   ├── interceptors/
│   │   ├── services/
│   │   ├── models/
│   │   ├── constants/
│   │   ├── enums/
│   │   └── utils/
│   ├── shared/
│   │   ├── components/
│   │   ├── ui/
│   │   ├── directives/
│   │   ├── pipes/
│   │   └── validators/
│   ├── layout/
│   │   ├── auth-layout/
│   │   └── main-layout/
│   ├── features/
│   │   ├── auth/
│   │   ├── dashboard/
│   │   ├── employees/
│   │   ├── organization/
│   │   ├── attendance/
│   │   ├── leave/
│   │   ├── timesheets/
│   │   ├── payroll/
│   │   ├── performance/
│   │   ├── recruitment/
│   │   ├── documents/
│   │   ├── reports/
│   │   ├── administration/
│   │   └── settings/
│   ├── app.component.ts
│   ├── app.config.ts
│   └── app.routes.ts
├── assets/
├── environments/
└── styles/

Angular Signals & State Management

Angular Signals are used for local and feature-level state, while RxJS is used where asynchronous service workflows and stream semantics are more appropriate.

readonly employees = signal<Employee[]>([]);

readonly activeEmployees = computed(() =>
  this.employees().filter(employee => employee.status === 'Active')
);

Reactive Forms

readonly employeeForm = this.fb.nonNullable.group({
  firstName: ['', Validators.required],
  lastName: ['', Validators.required],
  email: ['', [Validators.required, Validators.email]],
  departmentId: ['', Validators.required],
  designation: ['', Validators.required],
  joiningDate: ['', Validators.required]
});

Lazy-Loaded Angular Routes

{
  path: 'employees',
  loadChildren: () =>
    import('./features/employees/employee.routes')
      .then(routes => routes.EMPLOYEE_ROUTES)
}

Major HR domains are lazy-loaded to keep the application modular and reduce the initial bundle size.

Responsive Angular HRMS Design

Designed for desktop, laptop, tablet, and mobile with:

Collapsible sidebar
Mobile navigation
Responsive data tables
Adaptive KPI cards
Mobile-friendly forms
Scrollable recruitment pipeline
Responsive notification and profile dropdowns

Light / Dark / System Theme

The application supports Light, Dark, and System preferences using CSS variables.

:root {
  --app-bg: #f8fafc;
  --surface: #ffffff;
  --text: #0f172a;
}

html.dark {
  --app-bg: #0f172a;
  --surface: #111827;
  --text: #f8fafc;
}

Backend-Ready Mock Data Architecture

Component
   ↓
Feature Store / Data Access
   ↓
Domain Service
   ↓
Mock Database
   ↓
Future REST API

Version 1.0.0 uses typed frontend mock services. The data-access layer can later be replaced by Spring Boot, Node/Express, NestJS, .NET, Firebase, or another REST backend without redesigning feature components.

Getting Started

Prerequisites

Node.js 20+
npm
Angular CLI 20

node -v
npm -v
ng version

Clone & Install

git clone https://github.com/Jamshed7664/angular-enterprise-hrms.git
cd angular-enterprise-hrms
npm install

Run

npm start

or:

ng serve

Open http://localhost:4200.

Production Build

npm run build

Suggested Portfolio / YouTube Demo Flow

Login as HR Admin.
Review workforce KPIs.
Browse the Employee Directory.
Add/edit an employee and inspect Employee Details.
Review organization and departments.
View attendance and demonstrate Clock In/Clock Out.
Submit an attendance correction.
Apply for leave and demonstrate approval/rejection.
Review and approve weekly timesheets.
Review payroll.
Open performance reviews and goals.
Demonstrate the recruitment pipeline and CDK drag-and-drop.
Review employee documents.
Open HR reports.
Review the role-permission matrix and administration.
Switch between Light/Dark/System themes.
Demonstrate responsive/mobile behavior.

Development Roadmap

v1.0.0

v1.1

v2.0

Security & Privacy

Use synthetic HR data only. Never commit real employee PII, payroll information, passwords, API keys, secrets, or private company data. Frontend role guards are for demonstration; production authorization must be enforced by the backend.

Project Goals

This project demonstrates:

Enterprise Angular architecture
Feature-based application design
Standalone Components
Angular Signals and RxJS
Reactive Forms
Lazy-loaded routes
Approval workflows
Role-aware UI
HR domain modeling
Responsive SaaS design
Angular CDK interactions
Backend-ready frontend architecture

GitHub SEO & Repository Metadata

Recommended Repository Description

Enterprise HRMS built with Angular 20 featuring employee management, attendance, leave, payroll, recruitment, performance, timesheets and HR analytics.

Release

Tag: v1.0.0
Release Title: Angular Enterprise HRMS v1.0.0

First stable portfolio release featuring employee management, organization structure, attendance, leave, timesheets, payroll overview, performance management, recruitment/ATS, documents, reports, administration, and responsive Light/Dark/System themes.

Repository

angular-enterprise-hrms

Author

Jamshed Ahmad
Software Engineer | Frontend Developer

Brand: Code With Jamshed

Connect

GitHub:   https://github.com/Jamshed7664
LinkedIn: www.linkedin.com/in/jamshed-ahmad7664
YouTube:  https://www.youtube.com/@CodeWithJamshed

Support

If you find this project useful:

Star the repository
Fork the project
Share it with other developers
Follow Code With Jamshed
Subscribe for more Angular and full-stack projects

License

This project is intended for learning, portfolio presentation, demonstrations, and personal development. Add an MIT License if you want the repository to be publicly reusable.

Built with Angular 20 ❤️ by Code With Jamshed

Angular HRMS • Employee Management • Attendance • Leave • Payroll • Recruitment • Angular Signals

Name		Name	Last commit message	Last commit date
README.md		README.md

Latest commit

History

Folders and files

Repository files navigation