Employee Management UI

Enterprise Angular 21 application built using Standalone Components, Angular Material, JWT Authentication, Route Guards, Interceptors, Reactive Forms, and REST API integration.

---

📖 Project Overview

Employee Management UI is a production-style Angular application developed using modern Angular practices.

The application communicates with the EmployeeManagementAPI backend and provides a clean, responsive, and secure user interface for managing employees, departments, designations, roles, and authentication.

The project follows feature-based architecture with reusable components, route guards, interceptors, reactive forms, and Angular Material UI components.

---

✨ Features

🔐 Authentication

• JWT Authentication
• Login
• Logout
• Remember Me
• Route Guards
• HTTP Interceptors
• User Session Handling

---

👨‍💼 Employee Management

• Employee Listing
• Create Employee
• Edit Employee
• Employee Details
• Soft Delete
• Search
• Filtering
• Pagination
• Sorting

---

🏢 Department Management

• Create Department
• Update Department
• Delete Department
• Search
• Pagination

---

💼 Designation Management

• Create Designation
• Update Designation
• Delete Designation
• Search
• Pagination

---

👤 Role Management

• Role CRUD
• User Role Assignment

---

🎨 UI Features

• Angular Material
• Standalone Components
• Responsive Layout
• Confirmation Dialogs
• Toast Notifications
• Reactive Forms
• Custom Validation
• Loading Indicator
• Reusable Components

---

🏗️ Project Architecture

src/
│
├── app/
│
├── core/
│   ├── guards
│   ├── interceptors
│   ├── services
│   ├── validators
│   ├── helpers
│   └── models
│
├── features/
│   ├── auth
│   ├── dashboard
│   ├── employees
│   ├── departments
│   ├── designations
│   ├── roles
│   └── account
│
├── layouts
│
├── shared/
│   ├── components
│   ├── dialogs
│   ├── models
│   └── services
│
└── environments

The application follows a feature-based architecture with clear separation of concerns, making it scalable and easy to maintain.

---

🛠 Tech Stack

Frontend

• Angular 21
• TypeScript
• Angular Material
• RxJS

State Management

• RxJS Observables
• Services

Forms

• Reactive Forms
• Custom Validators

Security

• JWT Authentication
• Route Guards
• HTTP Interceptors

API

• REST API Integration
• ASP.NET Core Web API Backend

---

📸 Application Screenshots

🔐 Login

---

📊 Dashboard

---

👨‍💼 Employee Management

---

➕ Create Employee

---

👁 Employee Details

---

🗑 Delete Confirmation

---

🚀 Getting Started

Clone Repository

git clone https://github.com/your-username/EmployeeManagementUI.git

Install Packages

npm install

Run Project

ng serve

Application will be available at:

http://localhost:4200

---

🔗 Backend API

This application works together with:

EmployeeManagementAPI

Backend Repository:

https://github.com/your-username/EmployeeManagementAPI

---

🎯 Future Enhancements

• Dashboard Analytics
• Dark Theme
• Export to Excel
• Advanced Filters
• Profile Management
• Audit Logs
• Charts & Reports

---

📄 License

Licensed under the MIT License.

---

👨‍💻 Author

Mahamadirfan Rathod

Senior .NET Developer

• ASP.NET Core
• Angular
• SQL Server
• Clean Architecture
• Web API
• Entity Framework Core

---

⭐ If you found this project helpful, consider giving it a Star.