┌─────────────────────────────────────────────────────────────┐
│ │
│ DAYFLOW HRMS │
│ Every workday, perfectly aligned │
│ │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ FRONTEND │
│ (React + CSS) │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ Authentication│ │ Employee │ │ Admin │ │
│ │ Pages │ │ Dashboard │ │ Dashboard │ │
│ │ • Sign In │ │ • Stats │ │ • Org Stats │ │
│ │ • Sign Up │ │ • Check-in │ │ • Approvals │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ Profile │ │ Attendance │ │ Leave │ │
│ │ Management │ │ Tracking │ │ Management │ │
│ │ • View/Edit │ │ • Calendar │ │ • Apply │ │
│ │ • Personal │ │ • History │ │ • Approve │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ Payroll │ │ Employees │ │
│ │ Display │ │ List │ │
│ │ • Breakdown │ │ • Directory │ │
│ │ • History │ │ • Search │ │
│ └──────────────┘ └──────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
▼
┌───────────────┐
│ Axios API │
│ Client │
└───────────────┘
▼
┌─────────────────────────────────────────────────────────────┐
│ BACKEND │
│ (Node.js + Express) │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ Middleware Layer │ │
│ │ • JWT Authentication │ │
│ │ • Role Authorization (Admin/HR/Employee) │ │
│ │ • Input Validation │ │
│ │ • Error Handling │ │
│ └──────────────────────────────────────────────────┘ │
│ ▼ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ API Routes Layer │ │
│ ├──────────────────────────────────────────────────┤ │
│ │ /api/auth - Authentication │ │
│ │ /api/employees - Employee Management │ │
│ │ /api/attendance - Attendance Tracking │ │
│ │ /api/leave - Leave Management │ │
│ │ /api/payroll - Payroll Information │ │
│ └──────────────────────────────────────────────────┘ │
│ ▼ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ Business Logic Layer │ │
│ │ • User registration & login │ │
│ │ • Password hashing (bcrypt) │ │
│ │ • Token generation (JWT) │ │
│ │ • Leave balance calculation │ │
│ │ • Attendance validation │ │
│ │ • Salary calculations │ │
│ └──────────────────────────────────────────────────┘ │
│ ▼ │
└─────────────────────────────────────────────────────────────┘
▼
┌───────────────┐
│ Mongoose │
│ ODM │
└───────────────┘
▼
┌─────────────────────────────────────────────────────────────┐
│ DATABASE │
│ (MongoDB) │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ Employees │ │ Attendance │ │ Leave │ │
│ │ Collection │ │ Collection │ │ Collection │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │
│ ┌──────────────┐ │
│ │ Payroll │ │
│ │ Collection │ │
│ └──────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
1. Employee clicks "Check In Now" button
↓
2. Frontend sends POST request to /api/attendance/checkin
↓
3. Backend validates JWT token (Middleware)
↓
4. Checks if already checked in today
↓
5. Creates attendance record in MongoDB
↓
6. Returns success response
↓
7. Frontend updates UI and shows success notification
┌──────────────┐
│ Sign Up │
└──────┬───────┘
│ 1. User submits registration form
↓
┌──────────────────────────────────────┐
│ Backend validates & hashes password │
└──────┬───────────────────────────────┘
│ 2. Creates user in database
↓
┌──────────────────────────────────────┐
│ Generates JWT token │
└──────┬───────────────────────────────┘
│ 3. Returns token + user data
↓
┌──────────────────────────────────────┐
│ Frontend stores token in localStorage│
└──────┬───────────────────────────────┘
│ 4. Redirects to dashboard
↓
┌──────────────────────────────────────┐
│ All future requests include token │
│ in Authorization header │
└───────────────────────────────────────┘
┌─────────────────────────────────────────────────────┐
│ ADMIN / HR │
├─────────────────────────────────────────────────────┤
│ ✅ All Employee permissions │
│ ✅ View all employees │
│ ✅ Edit any employee profile │
│ ✅ View all attendance records │
│ ✅ Create/Edit/Delete attendance │
│ ✅ View all leave requests │
│ ✅ Approve/Reject leave requests │
│ ✅ View all payroll records │
│ ✅ Create/Edit/Delete payroll │
│ ✅ Access admin dashboard │
│ ✅ Manage organization settings │
└─────────────────────────────────────────────────────┘
▼
┌─────────────────────────────────────────────────────┐
│ EMPLOYEE │
├─────────────────────────────────────────────────────┤
│ ✅ View personal dashboard │
│ ✅ Check-in / Check-out │
│ ✅ View own attendance │
│ ✅ Apply for leave │
│ ✅ View own leave history │
│ ✅ View own payroll │
│ ✅ Edit limited profile fields │
│ ❌ Cannot view other employees' data │
│ ❌ Cannot approve leave requests │
│ ❌ Cannot manage payroll │
└─────────────────────────────────────────────────────┘
┌──────────────────┐
│ Employee │
│ ─────────────── │
│ _id │◄──────┐
│ employeeId │ │
│ email │ │ Referenced in
│ password │ │ other collections
│ role │ │
│ firstName │ │
│ lastName │ │
│ leaveBalance │ │
└──────────────────┘ │
│
┌──────────────────┼──────────────────┐
│ │ │
▼ ▼ ▼
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Attendance │ │ Leave │ │ Payroll │
│ ──────────── │ │ ──────────── │ │ ──────────── │
│ employee_id │ │ employee_id │ │ employee_id │
│ date │ │ leaveType │ │ month │
│ status │ │ startDate │ │ year │
│ checkIn │ │ endDate │ │ basicSalary │
│ checkOut │ │ reason │ │ allowances │
│ workHours │ │ status │ │ deductions │
└──────────────┘ │ reviewedBy │ │ netSalary │
└──────────────┘ └──────────────┘
App.js
│
├── AuthProvider (Context)
│ │
│ ├── SignIn
│ ├── SignUp
│ │
│ └── PrivateRoute
│ │
│ └── Layout
│ │
│ ├── Sidebar Navigation
│ ├── Top Bar
│ │
│ └── Content Area
│ │
│ ├── EmployeeDashboard
│ ├── AdminDashboard
│ ├── Profile
│ ├── Attendance
│ ├── LeaveManagement
│ ├── PayrollManagement
│ └── EmployeeList
┌────────────────────────────────────────┐
│ Context API │
│ ┌──────────────────────────────────┐ │
│ │ AuthContext │ │
│ │ • employee (current user) │ │
│ │ • login() │ │
│ │ • signup() │ │
│ │ • logout() │ │
│ │ • updateEmployee() │ │
│ │ • isAuthenticated │ │
│ │ • isAdmin, isHR, isEmployee │ │
│ └──────────────────────────────────┘ │
└────────────────────────────────────────┘
│
├──► Used by all components
│
└──► Persisted in localStorage
{
"success": true,
"message": "Operation successful",
"data": {
// Response data here
}
}
// Or on error:
{
"success": false,
"message": "Error description",
"errors": [] // Optional validation errors
}This architecture ensures:
- ✅ Scalability - Easy to add new features
- ✅ Security - JWT authentication & role-based access
- ✅ Maintainability - Clean separation of concerns
- ✅ Performance - Efficient database queries
- ✅ User Experience - Fast, responsive UI