Mini HRMS (Employee Management System)

A React.js-based web application for managing employee data, built as part of a frontend developer (SDE-1) assessment. This project demonstrates reusable UI components, state management with Redux, form handling with validations, and data visualization with charts, all styled with Tailwind CSS for a responsive and modern UI.

Project Overview

The Mini HRMS is a web application designed to manage employee records. It includes an employee list page, a form to add/edit employees, search/filter functionality, a dashboard with data visualizations, and an employee details page. The project showcases React best practices, global state management with Redux, and a responsive UI with Tailwind CSS.

Features

Core Requirements

1. Employee List Page
   • Displays employees in a table with columns: Employee ID, Name, Department, Role, Status.
   • Data is sourced from a predefined dummy dataset (static JSON in Redux store).
2. Add Employee
   • Form with fields: Name, Email, Department, Role, Date of Joining, Status (Active/Inactive).
   • Basic validations: required fields and valid email format.
   • Adds new employee to the Redux store, updating the list instantly.
3. Edit/Update Employee
   • Edit form pre-filled with employee data.
   • Updates reflect immediately in the employee list.
4. Search & Filter
   • Search employees by Name or Email.
   • Filter by Department or Status.

Advanced Features

1. Employee Detail Page
   • Displays full employee profile (ID, Name, Email, Department, Role, Date of Joining, Status).
   • Includes a bar chart showing mock task completion data for the employee.
2. Global State Management
   • Uses Redux Toolkit for centralized employee data management.
3. UI Enhancements
   • Responsive design with Tailwind CSS, ensuring usability on mobile and desktop.
   • Modern dashboard with bar and pie charts visualizing employee distribution and status.
4. Data Visualization
   • Dashboard includes:
     • Bar chart for employee distribution by department.
     • Pie chart for active vs. inactive employee breakdown.
   • Employee details page includes a bar chart for task completion trends.

Technologies Used

• React.js: Frontend framework for building UI components.
• Redux Toolkit: For global state management.
• React Router: For navigation between pages (Dashboard, Employee List, Employee Details, Add/Edit forms).
• Tailwind CSS: For responsive and modern styling.
• Chart.js & react-chartjs-2: For data visualizations (bar and pie charts).
• React Icons: For icons in UI components.
• Vite: Build tool for faster development and production builds.