Compare commits
2 Commits
190064a353
...
3d1e83cd1e
| Author | SHA1 | Date | |
|---|---|---|---|
| 3d1e83cd1e | |||
| 306585abcf |
@ -1,26 +0,0 @@
|
|||||||
[
|
|
||||||
{
|
|
||||||
"id": "SA001",
|
|
||||||
"employeeId": "ADM001",
|
|
||||||
"employeeName": "Alice Williams",
|
|
||||||
"leaveType": "Optional Holiday",
|
|
||||||
"applicationDate": "2026-07-10",
|
|
||||||
"fromDate": "2026-08-01",
|
|
||||||
"toDate": "2026-08-01",
|
|
||||||
"leaveDays": 1,
|
|
||||||
"status": "Pending",
|
|
||||||
"reason": "Festival observance."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "SA002",
|
|
||||||
"employeeId": "ADM002",
|
|
||||||
"employeeName": "Bob Smith",
|
|
||||||
"leaveType": "Casual Leave",
|
|
||||||
"applicationDate": "2026-07-12",
|
|
||||||
"fromDate": "2026-08-05",
|
|
||||||
"toDate": "2026-08-06",
|
|
||||||
"leaveDays": 2,
|
|
||||||
"status": "Pending",
|
|
||||||
"reason": "Personal work."
|
|
||||||
}
|
|
||||||
]
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
[
|
|
||||||
{
|
|
||||||
"id": "AA001",
|
|
||||||
"employeeId": "MGR001",
|
|
||||||
"employeeName": "Michael Scott",
|
|
||||||
"leaveType": "Casual Leave",
|
|
||||||
"applicationDate": "2026-07-15",
|
|
||||||
"fromDate": "2026-07-25",
|
|
||||||
"toDate": "2026-07-26",
|
|
||||||
"leaveDays": 2,
|
|
||||||
"status": "Pending",
|
|
||||||
"reason": "Family trip."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "AA002",
|
|
||||||
"employeeId": "MGR002",
|
|
||||||
"employeeName": "Jane Doe",
|
|
||||||
"leaveType": "Sick Leave",
|
|
||||||
"applicationDate": "2026-07-16",
|
|
||||||
"fromDate": "2026-07-22",
|
|
||||||
"toDate": "2026-07-22",
|
|
||||||
"leaveDays": 1,
|
|
||||||
"status": "Pending",
|
|
||||||
"reason": "Fever."
|
|
||||||
}
|
|
||||||
]
|
|
||||||
@ -1,242 +0,0 @@
|
|||||||
[
|
|
||||||
{
|
|
||||||
"id": "MA005",
|
|
||||||
"employeeId": "EMP005",
|
|
||||||
"employeeName": "Michael Brown",
|
|
||||||
"leaveType": "Casual Leave",
|
|
||||||
"applicationDate": "2026-07-16",
|
|
||||||
"fromDate": "2026-07-28",
|
|
||||||
"toDate": "2026-07-29",
|
|
||||||
"leaveDays": 2,
|
|
||||||
"status": "Pending",
|
|
||||||
"reason": "Attending a family wedding."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "MA006",
|
|
||||||
"employeeId": "EMP006",
|
|
||||||
"employeeName": "Emily Davis",
|
|
||||||
"leaveType": "Optional Holiday",
|
|
||||||
"applicationDate": "2026-07-17",
|
|
||||||
"fromDate": "2026-08-01",
|
|
||||||
"toDate": "2026-08-01",
|
|
||||||
"leaveDays": 1,
|
|
||||||
"status": "Pending",
|
|
||||||
"reason": "Festival celebration."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "MA007",
|
|
||||||
"employeeId": "EMP007",
|
|
||||||
"employeeName": "Chris Wilson",
|
|
||||||
"leaveType": "Casual Leave",
|
|
||||||
"applicationDate": "2026-07-18",
|
|
||||||
"fromDate": "2026-08-03",
|
|
||||||
"toDate": "2026-08-04",
|
|
||||||
"leaveDays": 2,
|
|
||||||
"status": "Approved",
|
|
||||||
"reason": "Personal commitments."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "MA008",
|
|
||||||
"employeeId": "EMP008",
|
|
||||||
"employeeName": "Sophia Johnson",
|
|
||||||
"leaveType": "Optional Holiday",
|
|
||||||
"applicationDate": "2026-07-19",
|
|
||||||
"fromDate": "2026-08-05",
|
|
||||||
"toDate": "2026-08-05",
|
|
||||||
"leaveDays": 1,
|
|
||||||
"status": "Rejected",
|
|
||||||
"reason": "Festival observance."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "MA009",
|
|
||||||
"employeeId": "EMP009",
|
|
||||||
"employeeName": "Daniel Lee",
|
|
||||||
"leaveType": "Casual Leave",
|
|
||||||
"applicationDate": "2026-07-20",
|
|
||||||
"fromDate": "2026-08-06",
|
|
||||||
"toDate": "2026-08-08",
|
|
||||||
"leaveDays": 3,
|
|
||||||
"status": "Pending",
|
|
||||||
"reason": "Family emergency."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "MA010",
|
|
||||||
"employeeId": "EMP010",
|
|
||||||
"employeeName": "Olivia Martin",
|
|
||||||
"leaveType": "Optional Holiday",
|
|
||||||
"applicationDate": "2026-07-21",
|
|
||||||
"fromDate": "2026-08-10",
|
|
||||||
"toDate": "2026-08-10",
|
|
||||||
"leaveDays": 1,
|
|
||||||
"status": "Approved",
|
|
||||||
"reason": "Cultural celebration."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "MA011",
|
|
||||||
"employeeId": "EMP011",
|
|
||||||
"employeeName": "James Taylor",
|
|
||||||
"leaveType": "Casual Leave",
|
|
||||||
"applicationDate": "2026-07-22",
|
|
||||||
"fromDate": "2026-08-12",
|
|
||||||
"toDate": "2026-08-13",
|
|
||||||
"leaveDays": 2,
|
|
||||||
"status": "Pending",
|
|
||||||
"reason": "Home relocation."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "MA012",
|
|
||||||
"employeeId": "EMP012",
|
|
||||||
"employeeName": "Emma Garcia",
|
|
||||||
"leaveType": "Optional Holiday",
|
|
||||||
"applicationDate": "2026-07-23",
|
|
||||||
"fromDate": "2026-08-14",
|
|
||||||
"toDate": "2026-08-14",
|
|
||||||
"leaveDays": 1,
|
|
||||||
"status": "Pending",
|
|
||||||
"reason": "Religious observance."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "MA013",
|
|
||||||
"employeeId": "EMP013",
|
|
||||||
"employeeName": "William Harris",
|
|
||||||
"leaveType": "Casual Leave",
|
|
||||||
"applicationDate": "2026-07-24",
|
|
||||||
"fromDate": "2026-08-17",
|
|
||||||
"toDate": "2026-08-18",
|
|
||||||
"leaveDays": 2,
|
|
||||||
"status": "Approved",
|
|
||||||
"reason": "Health checkup."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "MA014",
|
|
||||||
"employeeId": "EMP014",
|
|
||||||
"employeeName": "Ava Clark",
|
|
||||||
"leaveType": "Optional Holiday",
|
|
||||||
"applicationDate": "2026-07-25",
|
|
||||||
"fromDate": "2026-08-19",
|
|
||||||
"toDate": "2026-08-19",
|
|
||||||
"leaveDays": 1,
|
|
||||||
"status": "Pending",
|
|
||||||
"reason": "Community event."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "MA015",
|
|
||||||
"employeeId": "EMP015",
|
|
||||||
"employeeName": "Benjamin Lewis",
|
|
||||||
"leaveType": "Casual Leave",
|
|
||||||
"applicationDate": "2026-07-26",
|
|
||||||
"fromDate": "2026-08-20",
|
|
||||||
"toDate": "2026-08-22",
|
|
||||||
"leaveDays": 3,
|
|
||||||
"status": "Rejected",
|
|
||||||
"reason": "Vacation with family."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "MA016",
|
|
||||||
"employeeId": "EMP016",
|
|
||||||
"employeeName": "Mia Walker",
|
|
||||||
"leaveType": "Optional Holiday",
|
|
||||||
"applicationDate": "2026-07-27",
|
|
||||||
"fromDate": "2026-08-24",
|
|
||||||
"toDate": "2026-08-24",
|
|
||||||
"leaveDays": 1,
|
|
||||||
"status": "Approved",
|
|
||||||
"reason": "Festival celebration."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "MA017",
|
|
||||||
"employeeId": "EMP017",
|
|
||||||
"employeeName": "Ethan Hall",
|
|
||||||
"leaveType": "Casual Leave",
|
|
||||||
"applicationDate": "2026-07-28",
|
|
||||||
"fromDate": "2026-08-25",
|
|
||||||
"toDate": "2026-08-26",
|
|
||||||
"leaveDays": 2,
|
|
||||||
"status": "Pending",
|
|
||||||
"reason": "Personal travel."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "MA018",
|
|
||||||
"employeeId": "EMP018",
|
|
||||||
"employeeName": "Charlotte Allen",
|
|
||||||
"leaveType": "Optional Holiday",
|
|
||||||
"applicationDate": "2026-07-29",
|
|
||||||
"fromDate": "2026-08-27",
|
|
||||||
"toDate": "2026-08-27",
|
|
||||||
"leaveDays": 1,
|
|
||||||
"status": "Pending",
|
|
||||||
"reason": "Special occasion."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "MA019",
|
|
||||||
"employeeId": "EMP019",
|
|
||||||
"employeeName": "Alexander Young",
|
|
||||||
"leaveType": "Casual Leave",
|
|
||||||
"applicationDate": "2026-07-30",
|
|
||||||
"fromDate": "2026-08-28",
|
|
||||||
"toDate": "2026-08-30",
|
|
||||||
"leaveDays": 3,
|
|
||||||
"status": "Approved",
|
|
||||||
"reason": "Family gathering."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "MA020",
|
|
||||||
"employeeId": "EMP020",
|
|
||||||
"employeeName": "Amelia King",
|
|
||||||
"leaveType": "Optional Holiday",
|
|
||||||
"applicationDate": "2026-07-31",
|
|
||||||
"fromDate": "2026-09-01",
|
|
||||||
"toDate": "2026-09-01",
|
|
||||||
"leaveDays": 1,
|
|
||||||
"status": "Pending",
|
|
||||||
"reason": "Festival leave."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "MA021",
|
|
||||||
"employeeId": "EMP021",
|
|
||||||
"employeeName": "Matthew Scott",
|
|
||||||
"leaveType": "Casual Leave",
|
|
||||||
"applicationDate": "2026-08-01",
|
|
||||||
"fromDate": "2026-09-02",
|
|
||||||
"toDate": "2026-09-03",
|
|
||||||
"leaveDays": 2,
|
|
||||||
"status": "Rejected",
|
|
||||||
"reason": "Personal errands."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "MA022",
|
|
||||||
"employeeId": "EMP022",
|
|
||||||
"employeeName": "Harper Green",
|
|
||||||
"leaveType": "Optional Holiday",
|
|
||||||
"applicationDate": "2026-08-02",
|
|
||||||
"fromDate": "2026-09-04",
|
|
||||||
"toDate": "2026-09-04",
|
|
||||||
"leaveDays": 1,
|
|
||||||
"status": "Approved",
|
|
||||||
"reason": "Religious holiday."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "MA023",
|
|
||||||
"employeeId": "EMP023",
|
|
||||||
"employeeName": "David Baker",
|
|
||||||
"leaveType": "Casual Leave",
|
|
||||||
"applicationDate": "2026-08-03",
|
|
||||||
"fromDate": "2026-09-07",
|
|
||||||
"toDate": "2026-09-08",
|
|
||||||
"leaveDays": 2,
|
|
||||||
"status": "Pending",
|
|
||||||
"reason": "Attending a seminar."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "MA024",
|
|
||||||
"employeeId": "EMP024",
|
|
||||||
"employeeName": "Ella Adams",
|
|
||||||
"leaveType": "Optional Holiday",
|
|
||||||
"applicationDate": "2026-08-04",
|
|
||||||
"fromDate": "2026-09-09",
|
|
||||||
"toDate": "2026-09-09",
|
|
||||||
"leaveDays": 1,
|
|
||||||
"status": "Pending",
|
|
||||||
"reason": "Festival observance."
|
|
||||||
}
|
|
||||||
]
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
[
|
|
||||||
{
|
|
||||||
"id": "S001",
|
|
||||||
"leaveType": "Optional Holiday",
|
|
||||||
"applicationDate": "2026-06-22",
|
|
||||||
"fromDate": "2026-07-21",
|
|
||||||
"toDate": "2026-07-21",
|
|
||||||
"leaveDays": 1,
|
|
||||||
"status": "Pending",
|
|
||||||
"reason": "Festival."
|
|
||||||
}
|
|
||||||
]
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
[
|
|
||||||
{
|
|
||||||
"leaveType": "Casual Leave",
|
|
||||||
"credited": 20,
|
|
||||||
"utilized": 2,
|
|
||||||
"lapsed": 0,
|
|
||||||
"balance": 18
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"leaveType": "Optional Holiday",
|
|
||||||
"credited": 4,
|
|
||||||
"utilized": 2,
|
|
||||||
"lapsed": 0,
|
|
||||||
"balance": 2
|
|
||||||
}
|
|
||||||
]
|
|
||||||
@ -1,82 +0,0 @@
|
|||||||
[
|
|
||||||
{
|
|
||||||
"id": "L001",
|
|
||||||
"leaveType": "Casual Leave",
|
|
||||||
"applicationDate": "2026-07-10",
|
|
||||||
"fromDate": "2026-07-04",
|
|
||||||
"toDate": "2026-07-05",
|
|
||||||
"leaveDays": 2,
|
|
||||||
"status": "Approved",
|
|
||||||
"reason": "Family function out of town."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "L002",
|
|
||||||
"leaveType": "Optional Holiday",
|
|
||||||
"applicationDate": "2026-07-15",
|
|
||||||
"fromDate": "2026-07-14",
|
|
||||||
"toDate": "2026-07-14",
|
|
||||||
"leaveDays": 1,
|
|
||||||
"status": "Pending",
|
|
||||||
"reason": "Personal work."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "L003",
|
|
||||||
"leaveType": "Casual Leave",
|
|
||||||
"applicationDate": "2026-07-20",
|
|
||||||
"fromDate": "2026-06-10",
|
|
||||||
"toDate": "2026-06-11",
|
|
||||||
"leaveDays": 2,
|
|
||||||
"status": "Withdrawn",
|
|
||||||
"reason": "Changed plans."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "L004",
|
|
||||||
"leaveType": "Casual Leave",
|
|
||||||
"applicationDate": "2026-07-22",
|
|
||||||
"fromDate": "2026-06-20",
|
|
||||||
"toDate": "2026-06-20",
|
|
||||||
"leaveDays": 1,
|
|
||||||
"status": "Approved",
|
|
||||||
"reason": "Medical appointment."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "L005",
|
|
||||||
"leaveType": "Optional Holiday",
|
|
||||||
"applicationDate": "2026-07-18",
|
|
||||||
"fromDate": "2026-07-01",
|
|
||||||
"toDate": "2026-07-02",
|
|
||||||
"leaveDays": 2,
|
|
||||||
"status": "Pending",
|
|
||||||
"reason": "Religious festival."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "L006",
|
|
||||||
"leaveType": "Casual Leave",
|
|
||||||
"applicationDate": "2026-07-02",
|
|
||||||
"fromDate": "2026-05-15",
|
|
||||||
"toDate": "2026-05-16",
|
|
||||||
"leaveDays": 2,
|
|
||||||
"status": "Approved",
|
|
||||||
"reason": "Friend's wedding."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "L007",
|
|
||||||
"leaveType": "Casual Leave",
|
|
||||||
"applicationDate": "2026-07-10",
|
|
||||||
"fromDate": "2026-04-25",
|
|
||||||
"toDate": "2026-04-26",
|
|
||||||
"leaveDays": 2,
|
|
||||||
"status": "Approved",
|
|
||||||
"reason": "House shifting."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "L008",
|
|
||||||
"leaveType": "Optional Holiday",
|
|
||||||
"applicationDate": "2026-07-22",
|
|
||||||
"fromDate": "2026-07-21",
|
|
||||||
"toDate": "2026-07-21",
|
|
||||||
"leaveDays": 1,
|
|
||||||
"status": "Pending",
|
|
||||||
"reason": "Personal work."
|
|
||||||
}
|
|
||||||
]
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
[
|
|
||||||
{
|
|
||||||
"leaveType": "Casual Leave",
|
|
||||||
"credited": 10,
|
|
||||||
"utilized": 8,
|
|
||||||
"lapsed": 0,
|
|
||||||
"balance": 2
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"leaveType": "Optional Holiday",
|
|
||||||
"credited": 4,
|
|
||||||
"utilized": 3,
|
|
||||||
"lapsed": 0,
|
|
||||||
"balance": 1
|
|
||||||
}
|
|
||||||
]
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
[
|
|
||||||
{
|
|
||||||
"id": "A001",
|
|
||||||
"leaveType": "Casual Leave",
|
|
||||||
"applicationDate": "2026-05-10",
|
|
||||||
"fromDate": "2026-06-10",
|
|
||||||
"toDate": "2026-06-11",
|
|
||||||
"leaveDays": 2,
|
|
||||||
"status": "Approved",
|
|
||||||
"reason": "Medical appointment."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "A002",
|
|
||||||
"leaveType": "Casual Leave",
|
|
||||||
"applicationDate": "2026-06-20",
|
|
||||||
"fromDate": "2026-07-01",
|
|
||||||
"toDate": "2026-07-02",
|
|
||||||
"leaveDays": 2,
|
|
||||||
"status": "Withdrawn",
|
|
||||||
"reason": "Changed plans."
|
|
||||||
}
|
|
||||||
]
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
[
|
|
||||||
{
|
|
||||||
"leaveType": "Casual Leave",
|
|
||||||
"credited": 15,
|
|
||||||
"utilized": 5,
|
|
||||||
"lapsed": 0,
|
|
||||||
"balance": 10
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"leaveType": "Optional Holiday",
|
|
||||||
"credited": 4,
|
|
||||||
"utilized": 0,
|
|
||||||
"lapsed": 0,
|
|
||||||
"balance": 4
|
|
||||||
}
|
|
||||||
]
|
|
||||||
@ -1,134 +0,0 @@
|
|||||||
[
|
|
||||||
{
|
|
||||||
"id": "LA001",
|
|
||||||
"employeeId": "EMP001",
|
|
||||||
"employeeName": "Alice Williams",
|
|
||||||
"designation": "Software Engineer",
|
|
||||||
"department": "IT",
|
|
||||||
"managerName": "Bob Smith",
|
|
||||||
"leaveType": "Casual Leave",
|
|
||||||
"leaveDays": 2,
|
|
||||||
"status": "Approved"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "LA002",
|
|
||||||
"employeeId": "EMP002",
|
|
||||||
"employeeName": "Bob Smith",
|
|
||||||
"designation": "Senior Software Engineer",
|
|
||||||
"department": "IT",
|
|
||||||
"managerName": "Charlie Brown",
|
|
||||||
"leaveType": "Sick Leave",
|
|
||||||
"leaveDays": 1,
|
|
||||||
"status": "Pending"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "LA003",
|
|
||||||
"employeeId": "EMP003",
|
|
||||||
"employeeName": "Charlie Brown",
|
|
||||||
"designation": "Trainer",
|
|
||||||
"department": "Training",
|
|
||||||
"managerName": "Diana Prince",
|
|
||||||
"leaveType": "Optional Holiday",
|
|
||||||
"leaveDays": 1,
|
|
||||||
"status": "Rejected"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "LA004",
|
|
||||||
"employeeId": "EMP004",
|
|
||||||
"employeeName": "Diana Prince",
|
|
||||||
"designation": "Data Analyst",
|
|
||||||
"department": "Analytics",
|
|
||||||
"managerName": "Evan Wright",
|
|
||||||
"leaveType": "Casual Leave",
|
|
||||||
"leaveDays": 3,
|
|
||||||
"status": "Approved"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "LA005",
|
|
||||||
"employeeId": "EMP005",
|
|
||||||
"employeeName": "Evan Wright",
|
|
||||||
"designation": "QA Tester",
|
|
||||||
"department": "Software Dev",
|
|
||||||
"managerName": "Fiona Gallagher",
|
|
||||||
"leaveType": "Sick Leave",
|
|
||||||
"leaveDays": 2,
|
|
||||||
"status": "Pending"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "LA006",
|
|
||||||
"employeeId": "EMP006",
|
|
||||||
"employeeName": "Fiona Gallagher",
|
|
||||||
"designation": "HR Executive",
|
|
||||||
"department": "HR",
|
|
||||||
"managerName": "George Costanza",
|
|
||||||
"leaveType": "Casual Leave",
|
|
||||||
"leaveDays": 1,
|
|
||||||
"status": "Withdrawn"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "LA007",
|
|
||||||
"employeeId": "EMP007",
|
|
||||||
"employeeName": "George Costanza",
|
|
||||||
"designation": "Placement Officer",
|
|
||||||
"department": "Placement",
|
|
||||||
"managerName": "Hannah Abbott",
|
|
||||||
"leaveType": "Optional Holiday",
|
|
||||||
"leaveDays": 1,
|
|
||||||
"status": "Approved"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "LA008",
|
|
||||||
"employeeId": "EMP008",
|
|
||||||
"employeeName": "Hannah Abbott",
|
|
||||||
"designation": "Support Engineer",
|
|
||||||
"department": "Support",
|
|
||||||
"managerName": "Ian Malcolm",
|
|
||||||
"leaveType": "Sick Leave",
|
|
||||||
"leaveDays": 4,
|
|
||||||
"status": "Pending"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "LA009",
|
|
||||||
"employeeId": "EMP009",
|
|
||||||
"employeeName": "Ian Malcolm",
|
|
||||||
"designation": "Lead Trainer",
|
|
||||||
"department": "Training",
|
|
||||||
"managerName": "Jane Porter",
|
|
||||||
"leaveType": "Casual Leave",
|
|
||||||
"leaveDays": 2,
|
|
||||||
"status": "Approved"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "LA010",
|
|
||||||
"employeeId": "EMP010",
|
|
||||||
"employeeName": "Jane Porter",
|
|
||||||
"designation": "Project Manager",
|
|
||||||
"department": "Software Dev",
|
|
||||||
"managerName": "Kevin Hart",
|
|
||||||
"leaveType": "Optional Holiday",
|
|
||||||
"leaveDays": 1,
|
|
||||||
"status": "Rejected"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "LA011",
|
|
||||||
"employeeId": "EMP011",
|
|
||||||
"employeeName": "Kevin Hart",
|
|
||||||
"designation": "Software Engineer",
|
|
||||||
"department": "IT",
|
|
||||||
"managerName": "Laura Croft",
|
|
||||||
"leaveType": "Sick Leave",
|
|
||||||
"leaveDays": 1,
|
|
||||||
"status": "Pending"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "LA012",
|
|
||||||
"employeeId": "EMP012",
|
|
||||||
"employeeName": "Laura Croft",
|
|
||||||
"designation": "Data Analyst",
|
|
||||||
"department": "Analytics",
|
|
||||||
"managerName": "Alice Williams",
|
|
||||||
"leaveType": "Casual Leave",
|
|
||||||
"leaveDays": 2,
|
|
||||||
"status": "Approved"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
[
|
|
||||||
{
|
|
||||||
"employeeId": "EMP001",
|
|
||||||
"employeeName": "Alice Williams",
|
|
||||||
"month": 7,
|
|
||||||
"year": 2026,
|
|
||||||
"openingBalance": 12,
|
|
||||||
"closingBalance": 10,
|
|
||||||
"casualLeave": 8,
|
|
||||||
"optionalLeave": 2
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"employeeId": "EMP002",
|
|
||||||
"employeeName": "Bob Smith",
|
|
||||||
"month": 7,
|
|
||||||
"year": 2026,
|
|
||||||
"openingBalance": 15,
|
|
||||||
"closingBalance": 14,
|
|
||||||
"casualLeave": 10,
|
|
||||||
"optionalLeave": 4
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"employeeId": "EMP001",
|
|
||||||
"employeeName": "Alice Williams",
|
|
||||||
"month": 6,
|
|
||||||
"year": 2026,
|
|
||||||
"openingBalance": 15,
|
|
||||||
"closingBalance": 12,
|
|
||||||
"casualLeave": 10,
|
|
||||||
"optionalLeave": 2
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"employeeId": "EMP003",
|
|
||||||
"employeeName": "Charlie Brown",
|
|
||||||
"month": 7,
|
|
||||||
"year": 2026,
|
|
||||||
"openingBalance": 10,
|
|
||||||
"closingBalance": 8,
|
|
||||||
"casualLeave": 6,
|
|
||||||
"optionalLeave": 2
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"employeeId": "EMP004",
|
|
||||||
"employeeName": "Diana Prince",
|
|
||||||
"month": 7,
|
|
||||||
"year": 2026,
|
|
||||||
"openingBalance": 12,
|
|
||||||
"closingBalance": 12,
|
|
||||||
"casualLeave": 12,
|
|
||||||
"optionalLeave": 0
|
|
||||||
}
|
|
||||||
]
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
[
|
|
||||||
{
|
|
||||||
"id": "M001",
|
|
||||||
"leaveType": "Casual Leave",
|
|
||||||
"applicationDate": "2026-06-12",
|
|
||||||
"fromDate": "2026-07-04",
|
|
||||||
"toDate": "2026-07-05",
|
|
||||||
"leaveDays": 2,
|
|
||||||
"status": "Approved",
|
|
||||||
"reason": "Family function."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "M002",
|
|
||||||
"leaveType": "Optional Holiday",
|
|
||||||
"applicationDate": "2026-06-18",
|
|
||||||
"fromDate": "2026-07-14",
|
|
||||||
"toDate": "2026-07-14",
|
|
||||||
"leaveDays": 1,
|
|
||||||
"status": "Pending",
|
|
||||||
"reason": "Personal work."
|
|
||||||
}
|
|
||||||
]
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
[
|
|
||||||
{
|
|
||||||
"leaveType": "Casual Leave",
|
|
||||||
"credited": 12,
|
|
||||||
"utilized": 4,
|
|
||||||
"lapsed": 0,
|
|
||||||
"balance": 8
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"leaveType": "Optional Holiday",
|
|
||||||
"credited": 4,
|
|
||||||
"utilized": 1,
|
|
||||||
"lapsed": 0,
|
|
||||||
"balance": 3
|
|
||||||
}
|
|
||||||
]
|
|
||||||
@ -1,134 +0,0 @@
|
|||||||
[
|
|
||||||
{
|
|
||||||
"id": "EMP001",
|
|
||||||
"name": "Alice Williams",
|
|
||||||
"email": "alice@example.com",
|
|
||||||
"designationName": "Software Engineer",
|
|
||||||
"deptName": "IT",
|
|
||||||
"branchName": "Bengaluru",
|
|
||||||
"companyName": "CLRI",
|
|
||||||
"status": "Active",
|
|
||||||
"isHRManager": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "EMP002",
|
|
||||||
"name": "Bob Smith",
|
|
||||||
"email": "bob@example.com",
|
|
||||||
"designationName": "Senior Software Engineer",
|
|
||||||
"deptName": "IT",
|
|
||||||
"branchName": "Bengaluru",
|
|
||||||
"companyName": "CLRI",
|
|
||||||
"status": "Active",
|
|
||||||
"isHRManager": false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "EMP003",
|
|
||||||
"name": "Charlie Brown",
|
|
||||||
"email": "charlie@example.com",
|
|
||||||
"designationName": "Trainer",
|
|
||||||
"deptName": "Training",
|
|
||||||
"branchName": "Pune",
|
|
||||||
"companyName": "CLRI",
|
|
||||||
"status": "Disabled",
|
|
||||||
"isHRManager": false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "EMP004",
|
|
||||||
"name": "Diana Prince",
|
|
||||||
"email": "diana@example.com",
|
|
||||||
"designationName": "Data Analyst",
|
|
||||||
"deptName": "Analytics",
|
|
||||||
"branchName": "Bengaluru",
|
|
||||||
"companyName": "CLRI",
|
|
||||||
"status": "Active",
|
|
||||||
"isHRManager": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "EMP005",
|
|
||||||
"name": "Evan Wright",
|
|
||||||
"email": "evan@example.com",
|
|
||||||
"designationName": "QA Tester",
|
|
||||||
"deptName": "Software Dev",
|
|
||||||
"branchName": "Mumbai",
|
|
||||||
"companyName": "TechNova Solutions",
|
|
||||||
"status": "Active",
|
|
||||||
"isHRManager": false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "EMP006",
|
|
||||||
"name": "Fiona Gallagher",
|
|
||||||
"email": "fiona@example.com",
|
|
||||||
"designationName": "HR Executive",
|
|
||||||
"deptName": "HR",
|
|
||||||
"branchName": "Chennai",
|
|
||||||
"companyName": "Infotech Ltd",
|
|
||||||
"status": "Active",
|
|
||||||
"isHRManager": false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "EMP007",
|
|
||||||
"name": "George Costanza",
|
|
||||||
"email": "george@example.com",
|
|
||||||
"designationName": "Placement Officer",
|
|
||||||
"deptName": "Placement",
|
|
||||||
"branchName": "Bengaluru",
|
|
||||||
"companyName": "CLRI",
|
|
||||||
"status": "Active",
|
|
||||||
"isHRManager": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "EMP008",
|
|
||||||
"name": "Hannah Abbott",
|
|
||||||
"email": "hannah@example.com",
|
|
||||||
"designationName": "Support Engineer",
|
|
||||||
"deptName": "Support",
|
|
||||||
"branchName": "Ahmedabad",
|
|
||||||
"companyName": "Global Systems",
|
|
||||||
"status": "Disabled",
|
|
||||||
"isHRManager": false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "EMP009",
|
|
||||||
"name": "Ian Malcolm",
|
|
||||||
"email": "ian@example.com",
|
|
||||||
"designationName": "Lead Trainer",
|
|
||||||
"deptName": "Training",
|
|
||||||
"branchName": "Pune",
|
|
||||||
"companyName": "CLRI",
|
|
||||||
"status": "Active",
|
|
||||||
"isHRManager": false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "EMP010",
|
|
||||||
"name": "Jane Porter",
|
|
||||||
"email": "jane@example.com",
|
|
||||||
"designationName": "Project Manager",
|
|
||||||
"deptName": "Software Dev",
|
|
||||||
"branchName": "Mumbai",
|
|
||||||
"companyName": "TechNova Solutions",
|
|
||||||
"status": "Active",
|
|
||||||
"isHRManager": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "EMP011",
|
|
||||||
"name": "Kevin Hart",
|
|
||||||
"email": "kevin@example.com",
|
|
||||||
"designationName": "Software Engineer",
|
|
||||||
"deptName": "IT",
|
|
||||||
"branchName": "Bengaluru",
|
|
||||||
"companyName": "CLRI",
|
|
||||||
"status": "Active",
|
|
||||||
"isHRManager": false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "EMP012",
|
|
||||||
"name": "Laura Croft",
|
|
||||||
"email": "laura@example.com",
|
|
||||||
"designationName": "Data Analyst",
|
|
||||||
"deptName": "Analytics",
|
|
||||||
"branchName": "Bengaluru",
|
|
||||||
"companyName": "CLRI",
|
|
||||||
"status": "Active",
|
|
||||||
"isHRManager": false
|
|
||||||
}
|
|
||||||
]
|
|
||||||
@ -22,7 +22,6 @@ const routeNameMap: Record<string, string> = {
|
|||||||
departments: 'Manage Departments',
|
departments: 'Manage Departments',
|
||||||
'job-roles': 'Manage Job Roles',
|
'job-roles': 'Manage Job Roles',
|
||||||
employees: 'Manage Employees',
|
employees: 'Manage Employees',
|
||||||
'manage-hrmanagers': 'Manage HR Managers',
|
|
||||||
policies: 'Policy and Rules',
|
policies: 'Policy and Rules',
|
||||||
applications: 'Leave Applications',
|
applications: 'Leave Applications',
|
||||||
balance: 'Leave Balance Report'
|
balance: 'Leave Balance Report'
|
||||||
|
|||||||
@ -12,7 +12,6 @@ import AttendanceSummaryRouter from '../../features/attendance/routes/Attendance
|
|||||||
import LeaveSummaryRouter from '../../features/leave/routes/LeaveSummaryRouter';
|
import LeaveSummaryRouter from '../../features/leave/routes/LeaveSummaryRouter';
|
||||||
import MasterDataRouter from '../../features/masterData/routes/MasterDataRouter';
|
import MasterDataRouter from '../../features/masterData/routes/MasterDataRouter';
|
||||||
import PolicyRouter from '../../features/masterData/routes/PolicyRouter';
|
import PolicyRouter from '../../features/masterData/routes/PolicyRouter';
|
||||||
import ManageHRManagersRouter from '../../features/masterData/routes/ManageHRManagersRouter';
|
|
||||||
|
|
||||||
export default function MainLayout() {
|
export default function MainLayout() {
|
||||||
const [isCollapsed, setIsCollapsed] = useState(false);
|
const [isCollapsed, setIsCollapsed] = useState(false);
|
||||||
@ -40,7 +39,6 @@ export default function MainLayout() {
|
|||||||
<Route path="/attendance-summary/*" element={<AttendanceSummaryRouter />} />
|
<Route path="/attendance-summary/*" element={<AttendanceSummaryRouter />} />
|
||||||
<Route path="/leave-summary/*" element={<LeaveSummaryRouter />} />
|
<Route path="/leave-summary/*" element={<LeaveSummaryRouter />} />
|
||||||
<Route path="/master-data/*" element={<MasterDataRouter />} />
|
<Route path="/master-data/*" element={<MasterDataRouter />} />
|
||||||
<Route path="/manage-hrmanagers" element={<ManageHRManagersRouter />} />
|
|
||||||
<Route path="/policies" element={<PolicyRouter />} />
|
<Route path="/policies" element={<PolicyRouter />} />
|
||||||
<Route path="*" element={<Navigate to="/dashboard" replace />} />
|
<Route path="*" element={<Navigate to="/dashboard" replace />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
|
|||||||
@ -6,14 +6,15 @@ import { Link, useLocation } from 'react-router-dom';
|
|||||||
import {
|
import {
|
||||||
LayoutDashboard, CalendarCheck, Plane, CheckCircle, BarChart3, ClipboardList,
|
LayoutDashboard, CalendarCheck, Plane, CheckCircle, BarChart3, ClipboardList,
|
||||||
Menu, Users, ShieldUser, ScrollText, ChevronDown, FileText, CalendarDays, ClipboardCheck,
|
Menu, Users, ShieldUser, ScrollText, ChevronDown, FileText, CalendarDays, ClipboardCheck,
|
||||||
Database, Building, Network, Briefcase, Tag, ClipboardType, ClipboardMinus
|
Database, Building, Network, Briefcase, Tag, ClipboardType, ClipboardMinus, History
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
const iconMap: Record<string, any> = {
|
const iconMap: Record<string, any> = {
|
||||||
LayoutDashboard, CalendarCheck, Plane, CheckCircle, BarChart3, ClipboardList,
|
LayoutDashboard, CalendarCheck, Plane, CheckCircle, BarChart3, ClipboardList,
|
||||||
Users, ShieldUser, ScrollText, FileText, CalendarDays, ClipboardCheck,
|
Users, ShieldUser, ScrollText, FileText, CalendarDays, ClipboardCheck,
|
||||||
Database, Building, Network, Briefcase, Tag, ClipboardType, ClipboardMinus
|
Database, Building, Network, Briefcase, Tag, ClipboardType, ClipboardMinus, History // ADDED History
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function Sidebar({ isCollapsed, setIsCollapsed }: { isCollapsed: boolean; setIsCollapsed: (v: boolean) => void }) {
|
export default function Sidebar({ isCollapsed, setIsCollapsed }: { isCollapsed: boolean; setIsCollapsed: (v: boolean) => void }) {
|
||||||
|
|||||||
@ -41,6 +41,7 @@ export const getSidebarItems = (role: UserRole): NavItem[] => {
|
|||||||
{ name: 'Attendance Summary', icon: 'CalendarCheck', path: '/attendance' },
|
{ name: 'Attendance Summary', icon: 'CalendarCheck', path: '/attendance' },
|
||||||
{ name: 'Daily Report', icon: 'CalendarDays', path: '/attendance-summary/daily' },
|
{ name: 'Daily Report', icon: 'CalendarDays', path: '/attendance-summary/daily' },
|
||||||
{ name: 'Monthly Report', icon: 'FileText', path: '/attendance-summary/monthly' },
|
{ name: 'Monthly Report', icon: 'FileText', path: '/attendance-summary/monthly' },
|
||||||
|
{ name: 'Regularization History', icon: 'History', path: '/attendance-summary/regularization-history' } ,
|
||||||
...(role === 'hrmanager' ? [{ name: 'Regularization', icon: 'ClipboardCheck', path: '/attendance-summary/regularization' }] : [])
|
...(role === 'hrmanager' ? [{ name: 'Regularization', icon: 'ClipboardCheck', path: '/attendance-summary/regularization' }] : [])
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
@ -85,7 +86,6 @@ export const getSidebarItems = (role: UserRole): NavItem[] => {
|
|||||||
attendanceSummaryItems,
|
attendanceSummaryItems,
|
||||||
leaveSummaryItems,
|
leaveSummaryItems,
|
||||||
masterDataItems,
|
masterDataItems,
|
||||||
{ name: 'Manage HR Managers', icon: 'ShieldUser', path: '/manage-hrmanagers' },
|
|
||||||
{ name: 'Policy and Rules', icon: 'ScrollText', path: '/policies' },
|
{ name: 'Policy and Rules', icon: 'ScrollText', path: '/policies' },
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,8 +1,5 @@
|
|||||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
import { useSelector } from 'react-redux';
|
import { apiClient } from '../../../api/client';
|
||||||
import { apiClient, fetchMockData } from '../../../api/client';
|
|
||||||
import type { RootState } from '../../../store/store';
|
|
||||||
import type { UserRole } from '../../../store/roleSlice';
|
|
||||||
import type { AttendanceRecord, AttendanceStatus, AttendanceSummary, DashboardMetrics, DailyReportRecord, AdminReportRecord } from '../types/attendance';
|
import type { AttendanceRecord, AttendanceStatus, AttendanceSummary, DashboardMetrics, DailyReportRecord, AdminReportRecord } from '../types/attendance';
|
||||||
|
|
||||||
// Helper to map backend statuses to frontend statuses
|
// Helper to map backend statuses to frontend statuses
|
||||||
@ -10,9 +7,7 @@ const mapStatus = (backendStatus: string): AttendanceStatus => {
|
|||||||
switch (backendStatus) {
|
switch (backendStatus) {
|
||||||
case 'FULL_DAY': return 'Present';
|
case 'FULL_DAY': return 'Present';
|
||||||
case 'MISPUNCH': return 'Mispunch';
|
case 'MISPUNCH': return 'Mispunch';
|
||||||
case 'LATE': return 'Late';
|
|
||||||
case 'HALF_DAY': return 'Half Day';
|
case 'HALF_DAY': return 'Half Day';
|
||||||
case 'WFH': return 'WFH';
|
|
||||||
case 'ABSENT': return 'Absent';
|
case 'ABSENT': return 'Absent';
|
||||||
case 'LEAVE': return 'Leave';
|
case 'LEAVE': return 'Leave';
|
||||||
case 'HOLIDAY': return 'Holiday';
|
case 'HOLIDAY': return 'Holiday';
|
||||||
@ -31,9 +26,9 @@ export const useEmployeeRangeReport = (employeeId: number | null, fromDate: stri
|
|||||||
const history = response.data.history || [];
|
const history = response.data.history || [];
|
||||||
return history.map((h: any) => ({
|
return history.map((h: any) => ({
|
||||||
date: h.workDate,
|
date: h.workDate,
|
||||||
timeIn: h.checkIn ? h.checkIn.substring(0, 5) : '-',
|
checkIn: h.checkIn ? h.checkIn.substring(0, 5) : '-',
|
||||||
timeOut: h.checkOut ? h.checkOut.substring(0, 5) : '-',
|
checkOut: h.checkOut ? h.checkOut.substring(0, 5) : '-',
|
||||||
loggedHours: h.workedHours ? `${Math.floor(h.workedHours)}h ${Math.round((h.workedHours % 1) * 60)}m` : '-',
|
totalHours: h.workedHours ? `${Math.floor(h.workedHours)}h ${Math.round((h.workedHours % 1) * 60)}m` : '-',
|
||||||
status: mapStatus(h.finalStatus),
|
status: mapStatus(h.finalStatus),
|
||||||
attendanceId: h.attendanceId || 0
|
attendanceId: h.attendanceId || 0
|
||||||
}));
|
}));
|
||||||
@ -42,7 +37,7 @@ export const useEmployeeRangeReport = (employeeId: number | null, fromDate: stri
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// 2.Fetch Employee Summary
|
// 2. Fetch Employee Summary
|
||||||
export const useAttendanceSummary = (employeeId: number, startDate: string, endDate: string) => {
|
export const useAttendanceSummary = (employeeId: number, startDate: string, endDate: string) => {
|
||||||
return useQuery<AttendanceSummary>({
|
return useQuery<AttendanceSummary>({
|
||||||
queryKey: ['attendanceSummary', employeeId, startDate, endDate],
|
queryKey: ['attendanceSummary', employeeId, startDate, endDate],
|
||||||
@ -53,9 +48,9 @@ export const useAttendanceSummary = (employeeId: number, startDate: string, endD
|
|||||||
const data = response.data;
|
const data = response.data;
|
||||||
const history: AttendanceRecord[] = data.history.map((h: any) => ({
|
const history: AttendanceRecord[] = data.history.map((h: any) => ({
|
||||||
date: h.workDate,
|
date: h.workDate,
|
||||||
timeIn: h.checkIn ? h.checkIn.substring(0, 5) : '-',
|
checkIn: h.checkIn ? h.checkIn.substring(0, 5) : '-',
|
||||||
timeOut: h.checkOut ? h.checkOut.substring(0, 5) : '-',
|
checkOut: h.checkOut ? h.checkOut.substring(0, 5) : '-',
|
||||||
loggedHours: h.workedHours ? `${Math.floor(h.workedHours)}h ${Math.round((h.workedHours % 1) * 60)}m` : '-',
|
totalHours: h.workedHours ? `${Math.floor(h.workedHours)}h ${Math.round((h.workedHours % 1) * 60)}m` : '-',
|
||||||
status: mapStatus(h.finalStatus),
|
status: mapStatus(h.finalStatus),
|
||||||
attendanceId: h.attendanceId || 0
|
attendanceId: h.attendanceId || 0
|
||||||
}));
|
}));
|
||||||
@ -181,32 +176,19 @@ export const useCreateRegularization = () => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// 7. MOCK DATA: Fetch attendance records for other roles (Manager, HR, Director)
|
// 7. Fetch HR Manager Regularizations
|
||||||
const MOCK_ATTENDANCE_ENDPOINTS: Record<UserRole, string> = {
|
|
||||||
employee: 'attendance/employee_attendance.json',
|
|
||||||
manager: 'attendance/manager_attendance.json',
|
|
||||||
hrmanager: 'attendance/hrmanager_attendance.json',
|
|
||||||
director: 'attendance/director_attendance.json',
|
|
||||||
};
|
|
||||||
|
|
||||||
export const useAttendanceData = () => {
|
|
||||||
const role = useSelector((state: RootState) => state.role.currentRole);
|
|
||||||
return useQuery<AttendanceRecord[]>({
|
|
||||||
queryKey: ['attendance', role],
|
|
||||||
queryFn: () => fetchMockData<AttendanceRecord[]>(MOCK_ATTENDANCE_ENDPOINTS[role]),
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 8. Fetch HR Manager Regularizations
|
|
||||||
export interface RegularizationRecord {
|
export interface RegularizationRecord {
|
||||||
id: string;
|
id: string;
|
||||||
empId: string;
|
empId: string;
|
||||||
empName: string;
|
empName: string;
|
||||||
|
date: string;
|
||||||
|
regularizationType: string;
|
||||||
reqCheckIn: string;
|
reqCheckIn: string;
|
||||||
reqCheckOut: string;
|
reqCheckOut: string;
|
||||||
date: string;
|
|
||||||
reason: string;
|
reason: string;
|
||||||
status: 'Pending' | 'Approved' | 'Rejected';
|
status: 'Pending' | 'Approved' | 'Rejected';
|
||||||
|
branchName: string;
|
||||||
|
reviewerName?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const useHRManagerRegularizations = () => {
|
export const useHRManagerRegularizations = () => {
|
||||||
@ -229,13 +211,75 @@ export const useHRManagerRegularizations = () => {
|
|||||||
id: String(r.regularizationId),
|
id: String(r.regularizationId),
|
||||||
empId: r.employeeCode || String(r.employeeId),
|
empId: r.employeeCode || String(r.employeeId),
|
||||||
empName: `${r.firstName || ''} ${r.lastName || ''}`.trim(),
|
empName: `${r.firstName || ''} ${r.lastName || ''}`.trim(),
|
||||||
|
date: formattedDate,
|
||||||
|
regularizationType: r.regularizationType ? r.regularizationType.replace('_', ' ') : '-',
|
||||||
reqCheckIn: formatTime(reqCheckInDate),
|
reqCheckIn: formatTime(reqCheckInDate),
|
||||||
reqCheckOut: formatTime(reqCheckOutDate),
|
reqCheckOut: formatTime(reqCheckOutDate),
|
||||||
date: formattedDate,
|
|
||||||
reason: r.reason,
|
|
||||||
status: capitalizeStatus(r.status) as 'Pending' | 'Approved' | 'Rejected',
|
status: capitalizeStatus(r.status) as 'Pending' | 'Approved' | 'Rejected',
|
||||||
|
branchName: r.branchName || 'N/A',
|
||||||
|
reason: r.reason,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 8. Review Regularization Request (Approve/Reject)
|
||||||
|
export const useReviewRegularization = () => {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: async ({ id, status }: { id: string; status: 'Approved' | 'Rejected' }) => {
|
||||||
|
const action = status.toUpperCase();
|
||||||
|
const response = await apiClient.post('/api/ams/attendance/regularize/review', {
|
||||||
|
regularization_id: Number(id),
|
||||||
|
action: action
|
||||||
|
});
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['HRManagerRegularizations'] });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
export const useRegularizationHistory = () => {
|
||||||
|
return useQuery<RegularizationRecord[]>({
|
||||||
|
queryKey: ['regularizationHistory'],
|
||||||
|
queryFn: async () => {
|
||||||
|
const response = await apiClient.get('/api/ams/attendance/regularize/history');
|
||||||
|
const rawData = response.data.data || [];
|
||||||
|
|
||||||
|
return rawData.map((r: any) => {
|
||||||
|
const targetDate = r.targetDate ? new Date(r.targetDate) : new Date();
|
||||||
|
const reqCheckInDate = r.requestedCheckIn ? new Date(r.requestedCheckIn) : new Date();
|
||||||
|
const reqCheckOutDate = r.requestedCheckOut ? new Date(r.requestedCheckOut) : new Date();
|
||||||
|
|
||||||
|
const formattedDate = targetDate.toISOString().split('T')[0];
|
||||||
|
const formatTime = (date: Date) => date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });
|
||||||
|
const capitalizeStatus = (status: string) => status ? status.charAt(0).toUpperCase() + status.slice(1).toLowerCase() : 'Pending';
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: String(r.regularizationId),
|
||||||
|
empId: r.employeeCode || String(r.employeeId),
|
||||||
|
empName: `${r.firstName || ''} ${r.lastName || ''}`.trim(),
|
||||||
|
date: formattedDate,
|
||||||
|
regularizationType: r.regularizationType ? r.regularizationType.replace('_', ' ') : '-', // Format HALF_DAY to HALF DAY
|
||||||
|
reqCheckIn: formatTime(reqCheckInDate),
|
||||||
|
reqCheckOut: formatTime(reqCheckOutDate),
|
||||||
|
status: capitalizeStatus(r.status) as 'Pending' | 'Approved' | 'Rejected',
|
||||||
|
branchName: r.branchName || 'N/A',
|
||||||
|
reviewerName: r.reviewerName || '-',
|
||||||
|
reason: r.reason || '',
|
||||||
|
};
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Update the interface
|
||||||
|
|
||||||
|
|
||||||
|
// Update the useHRManagerRegularizations hook mapping
|
||||||
|
|||||||
@ -138,7 +138,7 @@ export default function AttendanceRecordsTable({
|
|||||||
<table className="min-w-full divide-y divide-app-border">
|
<table className="min-w-full divide-y divide-app-border">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
{(['date', 'timeIn', 'timeOut', 'loggedHours', 'status'] as SortKey[]).map((key) => (
|
{(['date', 'checkIn', 'checkOut', 'totalHours', 'status'] as SortKey[]).map((key) => (
|
||||||
<th key={key} onClick={() => requestSort(key)} className="px-6 py-3 text-left text-xs font-semibold text-text-muted uppercase tracking-wider cursor-pointer hover:bg-app-muted transition-colors">
|
<th key={key} onClick={() => requestSort(key)} className="px-6 py-3 text-left text-xs font-semibold text-text-muted uppercase tracking-wider cursor-pointer hover:bg-app-muted transition-colors">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
{key.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())} {getSortIcon(key)}
|
{key.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())} {getSortIcon(key)}
|
||||||
@ -163,9 +163,9 @@ export default function AttendanceRecordsTable({
|
|||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-text-primary">
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-text-primary">
|
||||||
{new Date(record.date + 'T00:00:00').toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' })}
|
{new Date(record.date + 'T00:00:00').toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' })}
|
||||||
</td>
|
</td>
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">{record.timeIn}</td>
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">{record.checkIn}</td>
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">{record.timeOut}</td>
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">{record.checkOut}</td>
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-text-primary">{record.loggedHours}</td>
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-text-primary">{record.totalHours}</td>
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm">
|
<td className="px-6 py-4 whitespace-nowrap text-sm">
|
||||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusClass(record.status)}`}>{record.status}</span>
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusClass(record.status)}`}>{record.status}</span>
|
||||||
</td>
|
</td>
|
||||||
|
|||||||
@ -48,9 +48,7 @@ export default function Calendar({ data, selectedDate, currentMonth, currentYear
|
|||||||
const dayData = data[dateStr];
|
const dayData = data[dateStr];
|
||||||
|
|
||||||
if (dayData?.status === 'Present') return 'bg-present-100 text-present-800 border-present-300 hover:bg-present-200';
|
if (dayData?.status === 'Present') return 'bg-present-100 text-present-800 border-present-300 hover:bg-present-200';
|
||||||
if (dayData?.status === 'Late') return 'bg-late-100 text-late-800 border-late-300 hover:bg-late-200';
|
|
||||||
if (dayData?.status === 'Half Day') return 'bg-halfday-100 text-halfday-800 border-halfday-300 hover:bg-halfday-200';
|
if (dayData?.status === 'Half Day') return 'bg-halfday-100 text-halfday-800 border-halfday-300 hover:bg-halfday-200';
|
||||||
if (dayData?.status === 'WFH') return 'bg-wfh-100 text-wfh-800 border-wfh-300 hover:bg-wfh-200';
|
|
||||||
if (dayData?.status === 'Absent') return 'bg-absent-100 text-absent-800 border-absent-300 hover:bg-absent-200';
|
if (dayData?.status === 'Absent') return 'bg-absent-100 text-absent-800 border-absent-300 hover:bg-absent-200';
|
||||||
if (dayData?.status === 'Leave') return 'bg-leave-100 text-leave-800 border-leave-300 hover:bg-leave-200';
|
if (dayData?.status === 'Leave') return 'bg-leave-100 text-leave-800 border-leave-300 hover:bg-leave-200';
|
||||||
if (dayData?.status === 'Mispunch') return 'bg-mispunch-100 text-mispunch-800 border-mispunch-300 hover:bg-mispunch-200';
|
if (dayData?.status === 'Mispunch') return 'bg-mispunch-100 text-mispunch-800 border-mispunch-300 hover:bg-mispunch-200';
|
||||||
@ -102,9 +100,7 @@ export default function Calendar({ data, selectedDate, currentMonth, currentYear
|
|||||||
|
|
||||||
<div className="mt-8 pt-6 border-t border-app-border flex flex-wrap gap-4">
|
<div className="mt-8 pt-6 border-t border-app-border flex flex-wrap gap-4">
|
||||||
<div className="flex items-center space-x-2"><div className="w-4 h-4 rounded bg-present-100 border border-present-300"></div><span className="text-xs text-text-secondary">Present</span></div>
|
<div className="flex items-center space-x-2"><div className="w-4 h-4 rounded bg-present-100 border border-present-300"></div><span className="text-xs text-text-secondary">Present</span></div>
|
||||||
<div className="flex items-center space-x-2"><div className="w-4 h-4 rounded bg-late-100 border border-late-300"></div><span className="text-xs text-text-secondary">Late Arrival</span></div>
|
|
||||||
<div className="flex items-center space-x-2"><div className="w-4 h-4 rounded bg-halfday-100 border border-halfday-300"></div><span className="text-xs text-text-secondary">Half Day</span></div>
|
<div className="flex items-center space-x-2"><div className="w-4 h-4 rounded bg-halfday-100 border border-halfday-300"></div><span className="text-xs text-text-secondary">Half Day</span></div>
|
||||||
<div className="flex items-center space-x-2"><div className="w-4 h-4 rounded bg-wfh-100 border border-wfh-300"></div><span className="text-xs text-text-secondary">Work From Home</span></div>
|
|
||||||
<div className="flex items-center space-x-2"><div className="w-4 h-4 rounded bg-absent-100 border border-absent-300"></div><span className="text-xs text-text-secondary">Absent</span></div>
|
<div className="flex items-center space-x-2"><div className="w-4 h-4 rounded bg-absent-100 border border-absent-300"></div><span className="text-xs text-text-secondary">Absent</span></div>
|
||||||
<div className="flex items-center space-x-2"><div className="w-4 h-4 rounded bg-leave-100 border border-leave-300"></div><span className="text-xs text-text-secondary">Leave</span></div>
|
<div className="flex items-center space-x-2"><div className="w-4 h-4 rounded bg-leave-100 border border-leave-300"></div><span className="text-xs text-text-secondary">Leave</span></div>
|
||||||
<div className="flex items-center space-x-2"><div className="w-4 h-4 rounded bg-mispunch-100 border border-mispunch-300"></div><span className="text-xs text-text-secondary">Mispunch</span></div>
|
<div className="flex items-center space-x-2"><div className="w-4 h-4 rounded bg-mispunch-100 border border-mispunch-300"></div><span className="text-xs text-text-secondary">Mispunch</span></div>
|
||||||
|
|||||||
@ -18,7 +18,9 @@ interface DailySummaryProps {
|
|||||||
|
|
||||||
export default function DailySummary({ selectedDate, data, employeeId }: DailySummaryProps) {
|
export default function DailySummary({ selectedDate, data, employeeId }: DailySummaryProps) {
|
||||||
const selectedData = data || { status: 'No Data', login: '-', logout: '-', hours: '-', attendanceId: 0 };
|
const selectedData = data || { status: 'No Data', login: '-', logout: '-', hours: '-', attendanceId: 0 };
|
||||||
const isMispunch = selectedData.status === 'Mispunch';
|
|
||||||
|
// Updated condition to include Half Day
|
||||||
|
const canRegularize = selectedData.status === 'Mispunch' || selectedData.status === 'Half Day';
|
||||||
|
|
||||||
const [isApplied, setIsApplied] = useState(false);
|
const [isApplied, setIsApplied] = useState(false);
|
||||||
const [showModal, setShowModal] = useState(false);
|
const [showModal, setShowModal] = useState(false);
|
||||||
@ -88,7 +90,7 @@ export default function DailySummary({ selectedDate, data, employeeId }: DailySu
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Conditional Regularization Button */}
|
{/* Conditional Regularization Button */}
|
||||||
{isMispunch && (
|
{canRegularize && (
|
||||||
<div className="mt-6">
|
<div className="mt-6">
|
||||||
{isApplied ? (
|
{isApplied ? (
|
||||||
<button
|
<button
|
||||||
@ -115,6 +117,7 @@ export default function DailySummary({ selectedDate, data, employeeId }: DailySu
|
|||||||
selectedDate={selectedDate}
|
selectedDate={selectedDate}
|
||||||
attendanceId={selectedData.attendanceId}
|
attendanceId={selectedData.attendanceId}
|
||||||
employeeId={employeeId}
|
employeeId={employeeId}
|
||||||
|
status={selectedData.status} // Pass the status to the modal
|
||||||
onClose={() => setShowModal(false)}
|
onClose={() => setShowModal(false)}
|
||||||
onApply={handleApplyRegularization}
|
onApply={handleApplyRegularization}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -5,11 +5,12 @@ interface RegularizationModalProps {
|
|||||||
selectedDate: string;
|
selectedDate: string;
|
||||||
attendanceId: number;
|
attendanceId: number;
|
||||||
employeeId: number;
|
employeeId: number;
|
||||||
|
status: string; // Added status prop
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
onApply: (payload: any) => void;
|
onApply: (payload: any) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function RegularizationModal({ selectedDate, attendanceId, employeeId, onClose, onApply }: RegularizationModalProps) {
|
export default function RegularizationModal({ selectedDate, attendanceId, employeeId, status, onClose, onApply }: RegularizationModalProps) {
|
||||||
const [regData, setRegData] = useState({ checkIn: '', checkOut: '', reason: '' });
|
const [regData, setRegData] = useState({ checkIn: '', checkOut: '', reason: '' });
|
||||||
|
|
||||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||||
@ -19,11 +20,14 @@ export default function RegularizationModal({ selectedDate, attendanceId, employ
|
|||||||
const handleSubmit = (e: React.FormEvent) => {
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Map frontend status to backend enum
|
||||||
|
const backendType = status === 'Half Day' ? 'HALF_DAY' : 'MISPUNCH';
|
||||||
|
|
||||||
// Format dates to "YYYY-MM-DD HH:mm:ss" for backend
|
// Format dates to "YYYY-MM-DD HH:mm:ss" for backend
|
||||||
const payload = {
|
const payload = {
|
||||||
attendance_id: attendanceId,
|
attendance_id: attendanceId,
|
||||||
employee_id: employeeId,
|
employee_id: employeeId,
|
||||||
regularization_type: "MISPUNCH",
|
regularization_type: backendType, // Dynamic type
|
||||||
target_date: selectedDate,
|
target_date: selectedDate,
|
||||||
requested_check_in: `${selectedDate} ${regData.checkIn}:00`,
|
requested_check_in: `${selectedDate} ${regData.checkIn}:00`,
|
||||||
requested_check_out: `${selectedDate} ${regData.checkOut}:00`,
|
requested_check_out: `${selectedDate} ${regData.checkOut}:00`,
|
||||||
@ -78,7 +82,7 @@ export default function RegularizationModal({ selectedDate, attendanceId, employ
|
|||||||
required
|
required
|
||||||
rows={3}
|
rows={3}
|
||||||
className="w-full px-3 py-2 border border-app-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary text-text-secondary bg-app-card resize-none"
|
className="w-full px-3 py-2 border border-app-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary text-text-secondary bg-app-card resize-none"
|
||||||
placeholder="Brief reason for mispunch..."
|
placeholder={`Brief reason for ${status.toLowerCase()}...`}
|
||||||
></textarea>
|
></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-end space-x-3 mt-6">
|
<div className="flex justify-end space-x-3 mt-6">
|
||||||
|
|||||||
@ -73,10 +73,10 @@ export default function DailyReportFilters({ filters, onFilterChange }: DailyRep
|
|||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<label className={labelClass}>Designation</label>
|
<label className={labelClass}>Job Role</label>
|
||||||
<select name="designationId" value={filters.designationId} onChange={handleChange} className={inputClass}>
|
<select name="designationId" value={filters.designationId} onChange={handleChange} className={inputClass}>
|
||||||
<option value="">All Designations</option>
|
<option value="">All Job Roles</option>
|
||||||
{designations?.map(d => <option key={d.id} value={String(d.id)}>{d.name}</option>)}
|
{designations?.map(d => <option key={d.id} value={d.name}>{d.name}</option>)}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
|
|||||||
@ -77,10 +77,10 @@ export default function MonthlyReportFilters({ filters, onFilterChange }: Monthl
|
|||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<label className={labelClass}>Designation</label>
|
<label className={labelClass}>Job Role</label>
|
||||||
<select name="designation" value={filters.designation} onChange={handleChange} className={inputClass}>
|
<select name="designation" value={filters.designation} onChange={handleChange} className={inputClass}>
|
||||||
<option value="">All Designations</option>
|
<option value="">All Job Roles</option>
|
||||||
{designations?.map(d => <option key={d.id} value={String(d.id)}>{d.name}</option>)}
|
{designations?.map(d => <option key={d.id} value={d.name}>{d.name}</option>)}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
|
|||||||
@ -0,0 +1,79 @@
|
|||||||
|
import { X } from 'lucide-react';
|
||||||
|
import type { RegularizationRecord } from '../../api/useAttendanceData';
|
||||||
|
|
||||||
|
interface RegularizationHistoryModalProps {
|
||||||
|
record: RegularizationRecord;
|
||||||
|
onClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const getStatusClass = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'Approved': return 'bg-present-100 text-present-700';
|
||||||
|
case 'Pending': return 'bg-late-100 text-late-700';
|
||||||
|
case 'Rejected': return 'bg-absent-100 text-absent-700';
|
||||||
|
default: return 'bg-app-muted text-text-secondary';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function RegularizationHistoryModal({ record, onClose }: RegularizationHistoryModalProps) {
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||||
|
<div className="bg-app-card rounded-lg shadow-xl w-full max-w-md p-6 relative max-h-[90vh] overflow-y-auto">
|
||||||
|
<button onClick={onClose} className="absolute top-4 right-4 text-text-muted hover:text-text-primary">
|
||||||
|
<X size={24} />
|
||||||
|
</button>
|
||||||
|
<h3 className="text-xl font-bold text-text-primary mb-1">Regularization Details</h3>
|
||||||
|
<p className="text-sm text-text-muted mb-6">Request ID: {record.id}</p>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex justify-between border-b border-app-border pb-2">
|
||||||
|
<span className="text-sm text-text-muted">Emp Id</span>
|
||||||
|
<span className="text-sm font-medium text-text-primary">{record.empId}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between border-b border-app-border pb-2">
|
||||||
|
<span className="text-sm text-text-muted">Emp Name</span>
|
||||||
|
<span className="text-sm font-medium text-text-primary">{record.empName}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between border-b border-app-border pb-2">
|
||||||
|
<span className="text-sm text-text-muted">Branch</span>
|
||||||
|
<span className="text-sm font-medium text-text-primary">{record.branchName}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between border-b border-app-border pb-2">
|
||||||
|
<span className="text-sm text-text-muted">Date</span>
|
||||||
|
<span className="text-sm font-medium text-text-primary">{new Date(record.date + 'T00:00:00').toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between border-b border-app-border pb-2">
|
||||||
|
<span className="text-sm text-text-muted">Type</span>
|
||||||
|
<span className="text-sm font-medium text-text-primary">{record.regularizationType}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between border-b border-app-border pb-2">
|
||||||
|
<span className="text-sm text-text-muted">Req Check In</span>
|
||||||
|
<span className="text-sm font-medium text-text-primary">{record.reqCheckIn}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between border-b border-app-border pb-2">
|
||||||
|
<span className="text-sm text-text-muted">Req Check Out</span>
|
||||||
|
<span className="text-sm font-medium text-text-primary">{record.reqCheckOut}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between border-b border-app-border pb-2">
|
||||||
|
<span className="text-sm text-text-muted">Status</span>
|
||||||
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusClass(record.status)}`}>{record.status}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between border-b border-app-border pb-2">
|
||||||
|
<span className="text-sm text-text-muted">Reviewed By</span>
|
||||||
|
<span className="text-sm font-medium text-text-primary">{record.reviewerName || 'Pending Review'}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-sm text-text-muted block mb-1">Reason</span>
|
||||||
|
<p className="text-sm text-text-secondary bg-app-muted p-3 rounded-lg">{record.reason}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-end mt-6">
|
||||||
|
<button onClick={onClose} className="px-4 py-2 bg-app-muted text-text-primary rounded-lg hover:bg-app-border transition-colors text-sm font-medium">
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,43 +1,40 @@
|
|||||||
import { useState, useMemo } from 'react';
|
import { useState, useMemo } from 'react';
|
||||||
import { ArrowUpDown, ArrowUp, ArrowDown, Search, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Trash2 } from 'lucide-react';
|
import { ArrowUpDown, ArrowUp, ArrowDown, Eye, Search, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
|
||||||
import type { HRManagerEmployee } from '../../api/useHRManagerData';
|
import type { RegularizationRecord } from '../../api/useAttendanceData';
|
||||||
|
import RegularizationHistoryModal from './RegularizationHistoryModal'; // NEW IMPORT
|
||||||
|
|
||||||
interface HRManagerTableProps {
|
interface RegularizationHistoryTableProps {
|
||||||
records: HRManagerEmployee[];
|
records: RegularizationRecord[];
|
||||||
onToggleHRManager: (id: string) => void;
|
|
||||||
onDelete: (id: string) => void;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
type SortKey = 'id' | 'email' | 'name' | 'designationName' | 'deptName' | 'branchName' | 'companyName' | 'status' | 'isHRManager';
|
type SortKey = 'empId' | 'empName' | 'branchName' | 'date' | 'regularizationType' | 'reqCheckIn' | 'reqCheckOut' | 'status' | 'reviewerName';
|
||||||
type SortDirection = 'ascending' | 'descending';
|
type SortDirection = 'ascending' | 'descending';
|
||||||
|
|
||||||
const getStatusClass = (status: string) => {
|
const getStatusClass = (status: string) => {
|
||||||
switch (status) {
|
switch (status) {
|
||||||
case 'Active': return 'bg-present-100 text-present-700';
|
case 'Approved': return 'bg-present-100 text-present-700';
|
||||||
case 'Disabled': return 'bg-absent-100 text-absent-700';
|
case 'Pending': return 'bg-late-100 text-late-700';
|
||||||
|
case 'Rejected': return 'bg-absent-100 text-absent-700';
|
||||||
default: return 'bg-app-muted text-text-secondary';
|
default: return 'bg-app-muted text-text-secondary';
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function HRManagerTable({ records, onToggleHRManager, onDelete }: HRManagerTableProps) {
|
export default function RegularizationHistoryTable({ records }: RegularizationHistoryTableProps) {
|
||||||
|
const [viewRecord, setViewRecord] = useState<RegularizationRecord | null>(null);
|
||||||
const [searchQuery, setSearchQuery] = useState('');
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
const [pageSize, setPageSize] = useState(10);
|
const [pageSize, setPageSize] = useState(10);
|
||||||
|
|
||||||
const [sortConfig, setSortConfig] = useState<{ key: SortKey; direction: SortDirection }>({
|
const [sortConfig, setSortConfig] = useState<{ key: SortKey; direction: SortDirection }>({
|
||||||
key: 'name', direction: 'ascending'
|
key: 'date',
|
||||||
|
direction: 'descending'
|
||||||
});
|
});
|
||||||
|
|
||||||
const filteredData = useMemo(() => {
|
const filteredData = useMemo(() => {
|
||||||
if (!searchQuery) return records;
|
if (!searchQuery) return records;
|
||||||
return records.filter(record =>
|
return records.filter(record =>
|
||||||
record.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
record.empId.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
record.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
record.empName.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
record.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
||||||
record.designationName.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
||||||
record.deptName.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
||||||
record.branchName.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
||||||
record.companyName.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
||||||
record.status.toLowerCase().includes(searchQuery.toLowerCase())
|
record.status.toLowerCase().includes(searchQuery.toLowerCase())
|
||||||
);
|
);
|
||||||
}, [records, searchQuery]);
|
}, [records, searchQuery]);
|
||||||
@ -45,12 +42,6 @@ export default function HRManagerTable({ records, onToggleHRManager, onDelete }:
|
|||||||
const sortedData = useMemo(() => {
|
const sortedData = useMemo(() => {
|
||||||
const sortableData = [...filteredData];
|
const sortableData = [...filteredData];
|
||||||
sortableData.sort((a, b) => {
|
sortableData.sort((a, b) => {
|
||||||
if (sortConfig.key === 'isHRManager') {
|
|
||||||
const valA = a.isHRManager ? 1 : 0;
|
|
||||||
const valB = b.isHRManager ? 1 : 0;
|
|
||||||
return sortConfig.direction === 'ascending' ? valA - valB : valB - valA;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (a[sortConfig.key] < b[sortConfig.key]) return sortConfig.direction === 'ascending' ? -1 : 1;
|
if (a[sortConfig.key] < b[sortConfig.key]) return sortConfig.direction === 'ascending' ? -1 : 1;
|
||||||
if (a[sortConfig.key] > b[sortConfig.key]) return sortConfig.direction === 'ascending' ? 1 : -1;
|
if (a[sortConfig.key] > b[sortConfig.key]) return sortConfig.direction === 'ascending' ? 1 : -1;
|
||||||
return 0;
|
return 0;
|
||||||
@ -98,26 +89,25 @@ export default function HRManagerTable({ records, onToggleHRManager, onDelete }:
|
|||||||
};
|
};
|
||||||
|
|
||||||
const formatHeader = (key: string) => {
|
const formatHeader = (key: string) => {
|
||||||
if (key === 'id') return 'Emp CODE';
|
if (key === 'empId') return 'Emp Id';
|
||||||
if (key === 'name') return 'Employee Name';
|
if (key === 'empName') return 'Emp Name';
|
||||||
if (key === 'email') return 'Employee Email';
|
|
||||||
if (key === 'designationName') return 'Designation';
|
|
||||||
if (key === 'deptName') return 'Department';
|
|
||||||
if (key === 'branchName') return 'Branch';
|
if (key === 'branchName') return 'Branch';
|
||||||
if (key === 'companyName') return 'Company';
|
if (key === 'regularizationType') return 'Type';
|
||||||
if (key === 'isHRManager') return 'HRManager Role';
|
if (key === 'reqCheckIn') return 'Req Check In';
|
||||||
|
if (key === 'reqCheckOut') return 'Req Check Out';
|
||||||
|
if (key === 'reviewerName') return 'Reviewed By';
|
||||||
return key.charAt(0).toUpperCase() + key.slice(1);
|
return key.charAt(0).toUpperCase() + key.slice(1);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bg-app-card p-6 rounded-lg shadow-sm">
|
<div className="bg-app-card p-6 rounded-lg shadow-sm overflow-x-auto">
|
||||||
<div className="flex flex-col md:flex-row md:items-center justify-between mb-6 gap-4">
|
<div className="flex flex-col md:flex-row md:items-center justify-between mb-6 gap-4">
|
||||||
<h2 className="text-lg font-semibold text-text-primary">HRManagers List</h2>
|
<h2 className="text-lg font-semibold text-text-primary">All Regularization Requests</h2>
|
||||||
<div className="relative w-full md:w-64">
|
<div className="relative w-full md:w-64">
|
||||||
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-light" />
|
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-light" />
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Search id, name, role..."
|
placeholder="Search id, name, status..."
|
||||||
value={searchQuery}
|
value={searchQuery}
|
||||||
onChange={(e) => { setSearchQuery(e.target.value); setCurrentPage(1); }}
|
onChange={(e) => { setSearchQuery(e.target.value); setCurrentPage(1); }}
|
||||||
className="pl-9 pr-3 py-2 border border-app-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary text-text-secondary bg-app-card w-full"
|
className="pl-9 pr-3 py-2 border border-app-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary text-text-secondary bg-app-card w-full"
|
||||||
@ -125,58 +115,52 @@ export default function HRManagerTable({ records, onToggleHRManager, onDelete }:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="overflow-x-auto">
|
|
||||||
<table className="min-w-full divide-y divide-app-border">
|
<table className="min-w-full divide-y divide-app-border">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
{(['id', 'name', 'email', 'designationName', 'deptName', 'branchName', 'companyName', 'status', 'isHRManager'] as SortKey[]).map((key) => (
|
{(['empId', 'empName', 'branchName', 'date', 'regularizationType', 'reqCheckIn', 'reqCheckOut', 'status', 'reviewerName'] as SortKey[]).map((key) => (
|
||||||
<th key={key} onClick={() => requestSort(key)} className="px-6 py-3 text-left text-xs font-semibold text-text-muted uppercase tracking-wider cursor-pointer hover:bg-app-muted transition-colors">
|
<th
|
||||||
|
key={key}
|
||||||
|
onClick={() => requestSort(key)}
|
||||||
|
className="px-4 py-3 text-left text-xs font-semibold text-text-muted uppercase tracking-wider cursor-pointer hover:bg-app-muted transition-colors"
|
||||||
|
>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
{formatHeader(key)} {getSortIcon(key)}
|
{formatHeader(key)} {getSortIcon(key)}
|
||||||
</div>
|
</div>
|
||||||
</th>
|
</th>
|
||||||
))}
|
))}
|
||||||
<th className="px-6 py-3 text-left text-xs font-semibold text-text-muted uppercase tracking-wider">Action</th>
|
<th className="px-4 py-3 text-left text-xs font-semibold text-text-muted uppercase tracking-wider">Action</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody className="divide-y divide-app-border">
|
<tbody className="divide-y divide-app-border">
|
||||||
{paginatedData.length > 0 ? (
|
{paginatedData.length > 0 ? (
|
||||||
paginatedData.map((record) => (
|
paginatedData.map((record) => (
|
||||||
<tr key={record.id} className="hover:bg-app-muted transition-colors">
|
<tr key={record.id} className="hover:bg-app-muted transition-colors">
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-text-primary">{record.id}</td>
|
<td className="px-4 py-3 text-sm text-text-primary">{record.empId}</td>
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">{record.name}</td>
|
<td className="px-4 py-3 text-sm text-text-primary">{record.empName}</td>
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">{record.email}</td>
|
<td className="px-4 py-3 text-sm text-text-secondary">{record.branchName}</td>
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">{record.designationName}</td>
|
<td className="px-4 py-3 text-sm text-text-secondary">{new Date(record.date + 'T00:00:00').toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })}</td>
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">{record.deptName}</td>
|
<td className="px-4 py-3 text-sm text-text-secondary">{record.regularizationType}</td>
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">{record.branchName}</td>
|
<td className="px-4 py-3 text-sm text-text-secondary">{record.reqCheckIn}</td>
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">{record.companyName}</td>
|
<td className="px-4 py-3 text-sm text-text-secondary">{record.reqCheckOut}</td>
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm">
|
<td className="px-4 py-3 text-sm">
|
||||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusClass(record.status)}`}>{record.status}</span>
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusClass(record.status)}`}>{record.status}</span>
|
||||||
</td>
|
</td>
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm">
|
<td className="px-4 py-3 text-sm text-text-secondary">{record.reviewerName || 'Pending Review'}</td>
|
||||||
<button
|
<td className="px-4 py-3 text-sm">
|
||||||
onClick={() => onToggleHRManager(record.id)}
|
<button onClick={() => setViewRecord(record)} className="text-primary hover:text-primary-hover flex items-center">
|
||||||
className={`relative inline-flex items-center h-6 w-11 rounded-full transition-colors ${record.isHRManager ? 'bg-primary' : 'bg-app-border'}`}
|
<Eye size={16} className="mr-1" /> View
|
||||||
title={record.isHRManager ? "Revoke HRManager" : "Make HRManager"}
|
|
||||||
>
|
|
||||||
<span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${record.isHRManager ? 'translate-x-6' : 'translate-x-1'}`} />
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm">
|
|
||||||
<button onClick={() => onDelete(record.id)} className="text-absent-500 hover:text-absent-700 flex items-center">
|
|
||||||
<Trash2 size={16} className="mr-1" /> Delete
|
|
||||||
</button>
|
</button>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
))
|
))
|
||||||
) : (
|
) : (
|
||||||
<tr>
|
<tr>
|
||||||
<td colSpan={10} className="px-6 py-8 text-center text-sm text-text-muted">No employees found.</td>
|
<td colSpan={10} className="px-4 py-8 text-center text-sm text-text-muted">No regularization records found.</td>
|
||||||
</tr>
|
</tr>
|
||||||
)}
|
)}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-col md:flex-row md:items-center justify-between mt-4 pt-4 border-t border-app-border gap-4">
|
<div className="flex flex-col md:flex-row md:items-center justify-between mt-4 pt-4 border-t border-app-border gap-4">
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
@ -202,6 +186,13 @@ export default function HRManagerTable({ records, onToggleHRManager, onDelete }:
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{viewRecord && (
|
||||||
|
<RegularizationHistoryModal
|
||||||
|
record={viewRecord}
|
||||||
|
onClose={() => setViewRecord(null)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -28,11 +28,11 @@ export default function RegularizationModal({ record, onClose, onAction }: Regul
|
|||||||
|
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div className="flex justify-between border-b border-app-border pb-2">
|
<div className="flex justify-between border-b border-app-border pb-2">
|
||||||
<span className="text-sm text-text-muted">Employee ID</span>
|
<span className="text-sm text-text-muted">Emp Id</span>
|
||||||
<span className="text-sm font-medium text-text-primary">{record.empId}</span>
|
<span className="text-sm font-medium text-text-primary">{record.empId}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between border-b border-app-border pb-2">
|
<div className="flex justify-between border-b border-app-border pb-2">
|
||||||
<span className="text-sm text-text-muted">Employee Name</span>
|
<span className="text-sm text-text-muted">Emp Name</span>
|
||||||
<span className="text-sm font-medium text-text-primary">{record.empName}</span>
|
<span className="text-sm font-medium text-text-primary">{record.empName}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between border-b border-app-border pb-2">
|
<div className="flex justify-between border-b border-app-border pb-2">
|
||||||
@ -40,15 +40,15 @@ export default function RegularizationModal({ record, onClose, onAction }: Regul
|
|||||||
<span className="text-sm font-medium text-text-primary">{new Date(record.date + 'T00:00:00').toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })}</span>
|
<span className="text-sm font-medium text-text-primary">{new Date(record.date + 'T00:00:00').toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between border-b border-app-border pb-2">
|
<div className="flex justify-between border-b border-app-border pb-2">
|
||||||
<span className="text-sm text-text-muted">Requested Check-In</span>
|
<span className="text-sm text-text-muted">Req Check In</span>
|
||||||
<span className="text-sm font-medium text-text-primary">{record.reqCheckIn}</span>
|
<span className="text-sm font-medium text-text-primary">{record.reqCheckIn}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between border-b border-app-border pb-2">
|
<div className="flex justify-between border-b border-app-border pb-2">
|
||||||
<span className="text-sm text-text-muted">Requested Check-Out</span>
|
<span className="text-sm text-text-muted">Req Check Out</span>
|
||||||
<span className="text-sm font-medium text-text-primary">{record.reqCheckOut}</span>
|
<span className="text-sm font-medium text-text-primary">{record.reqCheckOut}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between border-b border-app-border pb-2">
|
<div className="flex justify-between border-b border-app-border pb-2">
|
||||||
<span className="text-sm text-text-muted">Current Status</span>
|
<span className="text-sm text-text-muted">Status</span>
|
||||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusClass(record.status)}`}>{record.status}</span>
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusClass(record.status)}`}>{record.status}</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@ -8,7 +8,8 @@ interface RegularizationTableProps {
|
|||||||
onAction: (id: string, status: 'Approved' | 'Rejected') => void;
|
onAction: (id: string, status: 'Approved' | 'Rejected') => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
type SortKey = 'empId' | 'empName' | 'date' | 'reqCheckIn' | 'reqCheckOut' | 'reason' | 'status';
|
// Updated SortKey to include branchName and regularizationType
|
||||||
|
type SortKey = 'empId' | 'empName' | 'branchName' | 'date' | 'regularizationType' | 'reqCheckIn' | 'reqCheckOut' | 'reason' | 'status';
|
||||||
type SortDirection = 'ascending' | 'descending';
|
type SortDirection = 'ascending' | 'descending';
|
||||||
|
|
||||||
const getStatusClass = (status: string) => {
|
const getStatusClass = (status: string) => {
|
||||||
@ -26,13 +27,11 @@ export default function RegularizationTable({ records, onAction }: Regularizatio
|
|||||||
const [currentPage, setCurrentPage] = useState(1);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
const [pageSize, setPageSize] = useState(10);
|
const [pageSize, setPageSize] = useState(10);
|
||||||
|
|
||||||
// Default sort: date descending
|
|
||||||
const [sortConfig, setSortConfig] = useState<{ key: SortKey; direction: SortDirection }>({
|
const [sortConfig, setSortConfig] = useState<{ key: SortKey; direction: SortDirection }>({
|
||||||
key: 'date',
|
key: 'date',
|
||||||
direction: 'descending'
|
direction: 'descending'
|
||||||
});
|
});
|
||||||
|
|
||||||
// Filter data based on search query
|
|
||||||
const filteredData = useMemo(() => {
|
const filteredData = useMemo(() => {
|
||||||
if (!searchQuery) return records;
|
if (!searchQuery) return records;
|
||||||
return records.filter(record =>
|
return records.filter(record =>
|
||||||
@ -42,7 +41,6 @@ export default function RegularizationTable({ records, onAction }: Regularizatio
|
|||||||
);
|
);
|
||||||
}, [records, searchQuery]);
|
}, [records, searchQuery]);
|
||||||
|
|
||||||
// Sort filtered data
|
|
||||||
const sortedData = useMemo(() => {
|
const sortedData = useMemo(() => {
|
||||||
const sortableData = [...filteredData];
|
const sortableData = [...filteredData];
|
||||||
sortableData.sort((a, b) => {
|
sortableData.sort((a, b) => {
|
||||||
@ -53,7 +51,6 @@ export default function RegularizationTable({ records, onAction }: Regularizatio
|
|||||||
return sortableData;
|
return sortableData;
|
||||||
}, [filteredData, sortConfig]);
|
}, [filteredData, sortConfig]);
|
||||||
|
|
||||||
// Pagination Logic
|
|
||||||
const totalPages = Math.ceil(sortedData.length / pageSize);
|
const totalPages = Math.ceil(sortedData.length / pageSize);
|
||||||
const isPaginationEnabled = sortedData.length > pageSize;
|
const isPaginationEnabled = sortedData.length > pageSize;
|
||||||
|
|
||||||
@ -93,6 +90,16 @@ export default function RegularizationTable({ records, onAction }: Regularizatio
|
|||||||
return <ArrowDown size={14} className="ml-1 text-primary" />;
|
return <ArrowDown size={14} className="ml-1 text-primary" />;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const formatHeader = (key: string) => {
|
||||||
|
if (key === 'empId') return 'Emp Id';
|
||||||
|
if (key === 'empName') return 'Emp Name';
|
||||||
|
if (key === 'branchName') return 'Branch';
|
||||||
|
if (key === 'regularizationType') return 'Type';
|
||||||
|
if (key === 'reqCheckIn') return 'Req Check In';
|
||||||
|
if (key === 'reqCheckOut') return 'Req Check Out';
|
||||||
|
return key.charAt(0).toUpperCase() + key.slice(1);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bg-app-card p-6 rounded-lg shadow-sm overflow-x-auto">
|
<div className="bg-app-card p-6 rounded-lg shadow-sm overflow-x-auto">
|
||||||
<div className="flex flex-col md:flex-row md:items-center justify-between mb-6 gap-4">
|
<div className="flex flex-col md:flex-row md:items-center justify-between mb-6 gap-4">
|
||||||
@ -112,14 +119,14 @@ export default function RegularizationTable({ records, onAction }: Regularizatio
|
|||||||
<table className="min-w-full divide-y divide-app-border">
|
<table className="min-w-full divide-y divide-app-border">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
{(['empId', 'empName', 'date', 'reqCheckIn', 'reqCheckOut', 'reason', 'status'] as SortKey[]).map((key) => (
|
{(['empId', 'empName', 'branchName', 'date', 'regularizationType', 'reqCheckIn', 'reqCheckOut', 'reason', 'status'] as SortKey[]).map((key) => (
|
||||||
<th
|
<th
|
||||||
key={key}
|
key={key}
|
||||||
onClick={() => requestSort(key)}
|
onClick={() => requestSort(key)}
|
||||||
className="px-4 py-3 text-left text-xs font-semibold text-text-muted uppercase tracking-wider cursor-pointer hover:bg-app-muted transition-colors"
|
className="px-4 py-3 text-left text-xs font-semibold text-text-muted uppercase tracking-wider cursor-pointer hover:bg-app-muted transition-colors"
|
||||||
>
|
>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
{key.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())} {getSortIcon(key)}
|
{formatHeader(key)} {getSortIcon(key)}
|
||||||
</div>
|
</div>
|
||||||
</th>
|
</th>
|
||||||
))}
|
))}
|
||||||
@ -132,7 +139,9 @@ export default function RegularizationTable({ records, onAction }: Regularizatio
|
|||||||
<tr key={record.id} className="hover:bg-app-muted transition-colors">
|
<tr key={record.id} className="hover:bg-app-muted transition-colors">
|
||||||
<td className="px-4 py-3 text-sm text-text-primary">{record.empId}</td>
|
<td className="px-4 py-3 text-sm text-text-primary">{record.empId}</td>
|
||||||
<td className="px-4 py-3 text-sm text-text-primary">{record.empName}</td>
|
<td className="px-4 py-3 text-sm text-text-primary">{record.empName}</td>
|
||||||
|
<td className="px-4 py-3 text-sm text-text-secondary">{record.branchName}</td>
|
||||||
<td className="px-4 py-3 text-sm text-text-secondary">{new Date(record.date + 'T00:00:00').toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })}</td>
|
<td className="px-4 py-3 text-sm text-text-secondary">{new Date(record.date + 'T00:00:00').toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })}</td>
|
||||||
|
<td className="px-4 py-3 text-sm text-text-secondary">{record.regularizationType}</td>
|
||||||
<td className="px-4 py-3 text-sm text-text-secondary">{record.reqCheckIn}</td>
|
<td className="px-4 py-3 text-sm text-text-secondary">{record.reqCheckIn}</td>
|
||||||
<td className="px-4 py-3 text-sm text-text-secondary">{record.reqCheckOut}</td>
|
<td className="px-4 py-3 text-sm text-text-secondary">{record.reqCheckOut}</td>
|
||||||
<td className="px-4 py-3 text-sm text-text-secondary max-w-xs truncate">{record.reason}</td>
|
<td className="px-4 py-3 text-sm text-text-secondary max-w-xs truncate">{record.reason}</td>
|
||||||
@ -148,13 +157,12 @@ export default function RegularizationTable({ records, onAction }: Regularizatio
|
|||||||
))
|
))
|
||||||
) : (
|
) : (
|
||||||
<tr>
|
<tr>
|
||||||
<td colSpan={8} className="px-4 py-8 text-center text-sm text-text-muted">No matching regularization requests found.</td>
|
<td colSpan={10} className="px-4 py-8 text-center text-sm text-text-muted">No matching regularization requests found.</td>
|
||||||
</tr>
|
</tr>
|
||||||
)}
|
)}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
{/* Footer: Pagination & Page Size */}
|
|
||||||
<div className="flex flex-col md:flex-row md:items-center justify-between mt-4 pt-4 border-t border-app-border gap-4">
|
<div className="flex flex-col md:flex-row md:items-center justify-between mt-4 pt-4 border-t border-app-border gap-4">
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
<span className="text-sm text-text-muted">Show</span>
|
<span className="text-sm text-text-muted">Show</span>
|
||||||
|
|||||||
@ -3,6 +3,8 @@ import { FileText, Download, Loader2 } from 'lucide-react';
|
|||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import DailyReportFilters from '../components/summary/DailyReportFilters';
|
import DailyReportFilters from '../components/summary/DailyReportFilters';
|
||||||
import { useDailyReport, type DailyReportFilters as FilterValues } from '../api/useAttendanceData';
|
import { useDailyReport, type DailyReportFilters as FilterValues } from '../api/useAttendanceData';
|
||||||
|
import { useSelector } from 'react-redux';
|
||||||
|
import type { RootState } from '../../../store/store';
|
||||||
|
|
||||||
const getTodayDate = () => {
|
const getTodayDate = () => {
|
||||||
const today = new Date();
|
const today = new Date();
|
||||||
@ -20,10 +22,52 @@ export default function DailyReport() {
|
|||||||
employeeCode: '',
|
employeeCode: '',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const [downloadFormat, setDownloadFormat] = useState<'excel' | 'pdf'>('excel');
|
||||||
|
const roleState = useSelector((state: RootState) => state.role);
|
||||||
|
|
||||||
const { data: reportData, isLoading, isFetching } = useDailyReport(filters);
|
const { data: reportData, isLoading, isFetching } = useDailyReport(filters);
|
||||||
|
|
||||||
const handleDownload = () => {
|
const handleDownload = async () => {
|
||||||
toast.success(`Preparing daily report for ${filters.date}...`);
|
try {
|
||||||
|
const queryParams = new URLSearchParams({
|
||||||
|
date: filters.date,
|
||||||
|
company_id: filters.companyId,
|
||||||
|
branch_id: filters.branchId,
|
||||||
|
department_id: filters.departmentId,
|
||||||
|
designation: filters.designationId,
|
||||||
|
employee_name: filters.employeeName,
|
||||||
|
employee_code: filters.employeeCode,
|
||||||
|
file_type: downloadFormat, // Pass format to backend
|
||||||
|
}).toString();
|
||||||
|
|
||||||
|
const response = await fetch(`/api/ams/attendance/daily-report/export?${queryParams}`, {
|
||||||
|
headers: {
|
||||||
|
'X-Mock-User-Id': roleState.mockUserId,
|
||||||
|
'X-Mock-User-Role': roleState.mockUserRole,
|
||||||
|
'X-Mock-Branches': roleState.mockBranches
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) throw new Error('Failed to download report');
|
||||||
|
|
||||||
|
const blob = await response.blob();
|
||||||
|
const url = window.URL.createObjectURL(blob);
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = url;
|
||||||
|
|
||||||
|
const contentDisposition = response.headers.get('Content-Disposition');
|
||||||
|
const fileName = contentDisposition ? contentDisposition.split('filename=')[1].replace(/"/g, '') : `Daily_Report.${downloadFormat === 'excel' ? 'xlsx' : 'pdf'}`;
|
||||||
|
a.download = fileName;
|
||||||
|
|
||||||
|
document.body.appendChild(a);
|
||||||
|
a.click();
|
||||||
|
document.body.removeChild(a);
|
||||||
|
window.URL.revokeObjectURL(url);
|
||||||
|
|
||||||
|
toast.success('Report downloaded successfully.');
|
||||||
|
} catch (error) {
|
||||||
|
toast.error('Failed to download report.');
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const getStatusClass = (status: string) => {
|
const getStatusClass = (status: string) => {
|
||||||
@ -49,15 +93,27 @@ export default function DailyReport() {
|
|||||||
<p className="text-sm text-text-muted">View daily attendance logs based on filters.</p>
|
<p className="text-sm text-text-muted">View daily attendance logs based on filters.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Download Controls */}
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<select
|
||||||
|
value={downloadFormat}
|
||||||
|
onChange={(e) => setDownloadFormat(e.target.value as 'excel' | 'pdf')}
|
||||||
|
className="px-3 py-2 border border-app-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary text-text-secondary bg-app-card h-[38px]"
|
||||||
|
>
|
||||||
|
<option value="excel">Excel (.xlsx)</option>
|
||||||
|
<option value="pdf">PDF (.pdf)</option>
|
||||||
|
</select>
|
||||||
<button
|
<button
|
||||||
onClick={handleDownload}
|
onClick={handleDownload}
|
||||||
disabled={isLoading || isFetching}
|
disabled={isLoading || isFetching}
|
||||||
className="flex items-center justify-center px-4 py-2 bg-action text-white rounded-lg hover:bg-action-hover transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed"
|
className="flex items-center justify-center px-4 py-2 bg-action text-white rounded-lg hover:bg-action-hover transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed h-[38px]"
|
||||||
>
|
>
|
||||||
{isLoading || isFetching ? <Loader2 size={18} className="mr-2 animate-spin" /> : <Download size={18} className="mr-2" />}
|
{isLoading || isFetching ? <Loader2 size={18} className="mr-2 animate-spin" /> : <Download size={18} className="mr-2" />}
|
||||||
Download Report
|
Download
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<DailyReportFilters filters={filters} onFilterChange={setFilters} />
|
<DailyReportFilters filters={filters} onFilterChange={setFilters} />
|
||||||
|
|
||||||
@ -78,7 +134,7 @@ export default function DailyReport() {
|
|||||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-muted uppercase">Company</th>
|
<th className="px-4 py-3 text-left text-xs font-semibold text-text-muted uppercase">Company</th>
|
||||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-muted uppercase">Branch</th>
|
<th className="px-4 py-3 text-left text-xs font-semibold text-text-muted uppercase">Branch</th>
|
||||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-muted uppercase">Department</th>
|
<th className="px-4 py-3 text-left text-xs font-semibold text-text-muted uppercase">Department</th>
|
||||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-muted uppercase">Designation</th>
|
<th className="px-4 py-3 text-left text-xs font-semibold text-text-muted uppercase">Job Role</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody className="divide-y divide-app-border">
|
<tbody className="divide-y divide-app-border">
|
||||||
@ -117,7 +173,6 @@ export default function DailyReport() {
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -1,29 +1,23 @@
|
|||||||
import { useState, useMemo } from 'react';
|
|
||||||
import { Check } from 'lucide-react';
|
import { Check } from 'lucide-react';
|
||||||
import Loader from '../../../components/ui/Loader';
|
import Loader from '../../../components/ui/Loader';
|
||||||
import ErrorState from '../../../components/ui/ErrorState';
|
import ErrorState from '../../../components/ui/ErrorState';
|
||||||
import RegularizationTable from '../components/summary/RegularizationTable';
|
import RegularizationTable from '../components/summary/RegularizationTable';
|
||||||
import { useHRManagerRegularizations, type RegularizationRecord } from '../api/useAttendanceData';
|
import { toast } from 'sonner';
|
||||||
|
import { useHRManagerRegularizations, useReviewRegularization } from '../api/useAttendanceData';
|
||||||
const mockReviewAction = (records: RegularizationRecord[], id: string, newStatus: 'Approved' | 'Rejected') => {
|
|
||||||
return records.map(r => r.id === id ? { ...r, status: newStatus } : r);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function HRManagerRegularization() {
|
export default function HRManagerRegularization() {
|
||||||
const { data: initialRecords, isLoading, isError } = useHRManagerRegularizations();
|
const { data: records, isLoading, isError } = useHRManagerRegularizations();
|
||||||
const [localRecords, setLocalRecords] = useState<RegularizationRecord[]>([]);
|
const { mutate } = useReviewRegularization();
|
||||||
|
|
||||||
// Once data is loaded, sync it to local state so we can update statuses without refetching immediately
|
|
||||||
useMemo(() => {
|
|
||||||
if (initialRecords) {
|
|
||||||
// eslint-disable-next-line react-hooks/set-state-in-render
|
|
||||||
setLocalRecords(initialRecords);
|
|
||||||
}
|
|
||||||
}, [initialRecords]);
|
|
||||||
|
|
||||||
const handleAction = (id: string, status: 'Approved' | 'Rejected') => {
|
const handleAction = (id: string, status: 'Approved' | 'Rejected') => {
|
||||||
// TODO: Replace with real API call to POST /api/ams/attendance/regularize/review
|
mutate({ id, status }, {
|
||||||
setLocalRecords(prev => mockReviewAction(prev, id, status));
|
onSuccess: () => {
|
||||||
|
toast.success(`Regularization request ${status.toLowerCase()} successfully.`);
|
||||||
|
},
|
||||||
|
onError: (error: any) => {
|
||||||
|
toast.error(error?.response?.data?.error || "Failed to update regularization status.");
|
||||||
|
}
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
if (isLoading) return <Loader message="Loading Regularizations..." />;
|
if (isLoading) return <Loader message="Loading Regularizations..." />;
|
||||||
@ -41,7 +35,7 @@ export default function HRManagerRegularization() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RegularizationTable records={localRecords} onAction={handleAction} />
|
<RegularizationTable records={records || []} onAction={handleAction} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -3,6 +3,8 @@ import { Download, FileText, Loader2 } from 'lucide-react';
|
|||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import MonthlyReportFilters from '../components/summary/MonthlyReportFilters';
|
import MonthlyReportFilters from '../components/summary/MonthlyReportFilters';
|
||||||
import { useAdminReport, type AdminReportFilters } from '../api/useAttendanceData';
|
import { useAdminReport, type AdminReportFilters } from '../api/useAttendanceData';
|
||||||
|
import { useSelector } from 'react-redux';
|
||||||
|
import type { RootState } from '../../../store/store';
|
||||||
|
|
||||||
const getTodayDate = () => {
|
const getTodayDate = () => {
|
||||||
const today = new Date();
|
const today = new Date();
|
||||||
@ -26,10 +28,53 @@ export default function MonthlyReport() {
|
|||||||
employeeCode: '',
|
employeeCode: '',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const [downloadFormat, setDownloadFormat] = useState<'excel' | 'pdf'>('excel');
|
||||||
|
const roleState = useSelector((state: RootState) => state.role);
|
||||||
|
|
||||||
const { data: reportData, isLoading, isFetching } = useAdminReport(filters);
|
const { data: reportData, isLoading, isFetching } = useAdminReport(filters);
|
||||||
|
|
||||||
const handleDownload = () => {
|
const handleDownload = async () => {
|
||||||
toast.success("Preparing report for download...");
|
try {
|
||||||
|
const queryParams = new URLSearchParams({
|
||||||
|
from_date: filters.fromDate,
|
||||||
|
to_date: filters.toDate,
|
||||||
|
company_id: filters.companyId,
|
||||||
|
branch_id: filters.branchId,
|
||||||
|
department_id: filters.departmentId,
|
||||||
|
designation: filters.designation,
|
||||||
|
employee_name: filters.employeeName,
|
||||||
|
employee_code: filters.employeeCode,
|
||||||
|
file_type: downloadFormat,
|
||||||
|
}).toString();
|
||||||
|
|
||||||
|
const response = await fetch(`/api/ams/attendance/admin-report/export?${queryParams}`, {
|
||||||
|
headers: {
|
||||||
|
'X-Mock-User-Id': roleState.mockUserId,
|
||||||
|
'X-Mock-User-Role': roleState.mockUserRole,
|
||||||
|
'X-Mock-Branches': roleState.mockBranches
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) throw new Error('Failed to download report');
|
||||||
|
|
||||||
|
const blob = await response.blob();
|
||||||
|
const url = window.URL.createObjectURL(blob);
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = url;
|
||||||
|
|
||||||
|
const contentDisposition = response.headers.get('Content-Disposition');
|
||||||
|
const fileName = contentDisposition ? contentDisposition.split('filename=')[1].replace(/"/g, '') : `Monthly_Report.${downloadFormat === 'excel' ? 'xlsx' : 'pdf'}`;
|
||||||
|
a.download = fileName;
|
||||||
|
|
||||||
|
document.body.appendChild(a);
|
||||||
|
a.click();
|
||||||
|
document.body.removeChild(a);
|
||||||
|
window.URL.revokeObjectURL(url);
|
||||||
|
|
||||||
|
toast.success('Report downloaded successfully.');
|
||||||
|
} catch (error) {
|
||||||
|
toast.error('Failed to download report.');
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -44,15 +89,26 @@ export default function MonthlyReport() {
|
|||||||
<p className="text-sm text-text-muted">View monthly attendance metrics based on filters.</p>
|
<p className="text-sm text-text-muted">View monthly attendance metrics based on filters.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<select
|
||||||
|
value={downloadFormat}
|
||||||
|
onChange={(e) => setDownloadFormat(e.target.value as 'excel' | 'pdf')}
|
||||||
|
className="px-3 py-2 border border-app-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary text-text-secondary bg-app-card h-[38px]"
|
||||||
|
>
|
||||||
|
<option value="excel">Excel (.xlsx)</option>
|
||||||
|
<option value="pdf">PDF (.pdf)</option>
|
||||||
|
</select>
|
||||||
<button
|
<button
|
||||||
onClick={handleDownload}
|
onClick={handleDownload}
|
||||||
disabled={isLoading || isFetching}
|
disabled={isLoading || isFetching}
|
||||||
className="flex items-center justify-center px-4 py-2 bg-action text-white rounded-lg hover:bg-action-hover transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed"
|
className="flex items-center justify-center px-4 py-2 bg-action text-white rounded-lg hover:bg-action-hover transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed h-[38px]"
|
||||||
>
|
>
|
||||||
{isLoading || isFetching ? <Loader2 size={18} className="mr-2 animate-spin" /> : <Download size={18} className="mr-2" />}
|
{isLoading || isFetching ? <Loader2 size={18} className="mr-2 animate-spin" /> : <Download size={18} className="mr-2" />}
|
||||||
Download Report
|
Download
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<MonthlyReportFilters filters={filters} onFilterChange={setFilters} />
|
<MonthlyReportFilters filters={filters} onFilterChange={setFilters} />
|
||||||
|
|
||||||
@ -103,7 +159,6 @@ export default function MonthlyReport() {
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -44,9 +44,9 @@ export default function MyAttendance() {
|
|||||||
calendarRecords.forEach(record => {
|
calendarRecords.forEach(record => {
|
||||||
map[record.date] = {
|
map[record.date] = {
|
||||||
status: record.status,
|
status: record.status,
|
||||||
login: record.timeIn,
|
login: record.checkIn,
|
||||||
logout: record.timeOut,
|
logout: record.checkOut,
|
||||||
hours: record.loggedHours,
|
hours: record.totalHours,
|
||||||
attendanceId: record.attendanceId
|
attendanceId: record.attendanceId
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|||||||
28
src/features/attendance/pages/RegularizationHistory.tsx
Normal file
28
src/features/attendance/pages/RegularizationHistory.tsx
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import { History } from 'lucide-react';
|
||||||
|
import Loader from '../../../components/ui/Loader';
|
||||||
|
import ErrorState from '../../../components/ui/ErrorState';
|
||||||
|
import RegularizationHistoryTable from '../components/summary/RegularizationHistoryTable';
|
||||||
|
import { useRegularizationHistory } from '../api/useAttendanceData';
|
||||||
|
|
||||||
|
export default function RegularizationHistory() {
|
||||||
|
const { data: records, isLoading, isError } = useRegularizationHistory();
|
||||||
|
|
||||||
|
if (isLoading) return <Loader message="Loading Regularization History..." />;
|
||||||
|
if (isError) return <ErrorState message="Failed to load regularization history." />;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="bg-app-card p-6 rounded-lg shadow-sm flex items-center space-x-3">
|
||||||
|
<div className="p-3 bg-primary/10 rounded-full">
|
||||||
|
<History className="text-primary" size={28} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="text-xl font-bold text-text-primary">Regularization History</h2>
|
||||||
|
<p className="text-sm text-text-muted">View all past and pending regularization requests.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<RegularizationHistoryTable records={records || []} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -3,6 +3,7 @@ import AttendanceDashboard from '../pages/AttendanceDashboard';
|
|||||||
import MonthlyReport from '../pages/MonthlyReport';
|
import MonthlyReport from '../pages/MonthlyReport';
|
||||||
import DailyReport from '../pages/DailyReport';
|
import DailyReport from '../pages/DailyReport';
|
||||||
import HRManagerRegularization from '../pages/HRManagerRegularization';
|
import HRManagerRegularization from '../pages/HRManagerRegularization';
|
||||||
|
import RegularizationHistory from '../pages/RegularizationHistory';
|
||||||
|
|
||||||
export default function AttendanceSummaryRouter() {
|
export default function AttendanceSummaryRouter() {
|
||||||
return (
|
return (
|
||||||
@ -12,6 +13,7 @@ export default function AttendanceSummaryRouter() {
|
|||||||
<Route path="/monthly" element={<MonthlyReport />} />
|
<Route path="/monthly" element={<MonthlyReport />} />
|
||||||
<Route path="/daily" element={<DailyReport />} />
|
<Route path="/daily" element={<DailyReport />} />
|
||||||
<Route path="/regularization" element={<HRManagerRegularization />} />
|
<Route path="/regularization" element={<HRManagerRegularization />} />
|
||||||
|
<Route path="/regularization-history" element={<RegularizationHistory />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -1,10 +1,10 @@
|
|||||||
export type AttendanceStatus = 'Present' | 'WFH' | 'Absent' | 'Leave' | 'Mispunch' | 'Holiday' | 'Late' | 'Half Day';
|
export type AttendanceStatus = 'Present' | 'Absent' | 'Leave' | 'Mispunch' | 'Holiday' | 'Half Day';
|
||||||
|
|
||||||
export interface AttendanceRecord {
|
export interface AttendanceRecord {
|
||||||
date: string;
|
date: string;
|
||||||
timeIn: string;
|
checkIn: string;
|
||||||
timeOut: string;
|
checkOut: string;
|
||||||
loggedHours: string;
|
totalHours: string;
|
||||||
status: AttendanceStatus;
|
status: AttendanceStatus;
|
||||||
attendanceId: number;
|
attendanceId: number;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,108 +1,308 @@
|
|||||||
|
// src/features/leave/api/useLeaveData.ts
|
||||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
import { useSelector } from 'react-redux';
|
import { useSelector } from 'react-redux';
|
||||||
import { fetchMockData, postMockData } from '../../../api/client';
|
import { apiClient, fetchMockData } from '../../../api/client';
|
||||||
import type { RootState } from '../../../store/store';
|
import type { RootState } from '../../../store/store';
|
||||||
import type { UserRole } from '../../../store/roleSlice';
|
import type {
|
||||||
import type { LeaveSummary, LeaveRequestPayload, LeaveHistoryRecord, ManagerLeaveApproval, ApprovalStatus } from '../types/leave';
|
LeaveSummary,
|
||||||
import type { LeaveApplicationSummary } from '../types/leave';
|
LeaveRequestPayload,
|
||||||
import type { LeaveBalanceRecord } from '../types/leave';
|
LeaveHistoryRecord,
|
||||||
|
ManagerLeaveApproval,
|
||||||
|
ApprovalStatus,
|
||||||
|
LeaveApplicationSummary,
|
||||||
|
LeaveBalanceRecord
|
||||||
|
} from '../types/leave';
|
||||||
|
// Add this import at the top of the file
|
||||||
|
import { useEmployeeById } from '../../masterData/api/useEmployeeData';
|
||||||
|
|
||||||
const LEAVE_ENDPOINTS: Record<UserRole, { summary: string, history: string }> = {
|
|
||||||
employee: {
|
|
||||||
summary: 'leave/employee_leave_summary.json',
|
|
||||||
history: 'leave/employee_leave_history.json',
|
|
||||||
},
|
|
||||||
manager: {
|
|
||||||
summary: 'leave/manager_leave_summary.json',
|
|
||||||
history: 'leave/manager_leave_history.json',
|
|
||||||
},
|
|
||||||
hrmanager: {
|
|
||||||
summary: 'leave/hrmanager_leave_summary.json',
|
|
||||||
history: 'leave/hrmanager_leave_history.json',
|
|
||||||
},
|
|
||||||
director: {
|
|
||||||
summary: 'leave/director_leave_summary.json',
|
|
||||||
history: 'leave/director_leave_history.json',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const useLeaveSummary = () => {
|
// ==========================================
|
||||||
const role = useSelector((state: RootState) => state.role.currentRole);
|
// 1. ADMIN SETUP & CONFIGURATION
|
||||||
|
// ==========================================
|
||||||
|
|
||||||
return useQuery<LeaveSummary[]>({
|
// Create Leave Type
|
||||||
queryKey: ['leaveSummary', role],
|
export const useCreateLeaveType = () => {
|
||||||
queryFn: () => fetchMockData<LeaveSummary[]>(LEAVE_ENDPOINTS[role].summary),
|
const queryClient = useQueryClient();
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: async (data: { company_id: number; name: string; requires_allocation: boolean; carry_over_allowed: boolean; max_carry_over_days: number }) => {
|
||||||
|
const response = await apiClient.post('/api/lms/config/types', data);
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['leaveTypes'] });
|
||||||
|
},
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
export const useApplyLeave = () => {
|
// Get Leave Types
|
||||||
const role = useSelector((state: RootState) => state.role.currentRole);
|
export const useLeaveTypes = (companyId: number = 1) => {
|
||||||
|
return useQuery<any[]>({
|
||||||
|
queryKey: ['leaveTypes', companyId],
|
||||||
|
queryFn: async () => {
|
||||||
|
const response = await apiClient.get(`/api/lms/config/types?company_id=${companyId}`);
|
||||||
|
return response.data.data || [];
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Create Policy Rule
|
||||||
|
export const useCreatePolicyRule = () => {
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: async (data: any) => {
|
||||||
|
const response = await apiClient.post('/api/lms/config/rules', data);
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['policyRules'] });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Create Company Holiday (Bulk)
|
||||||
|
export const useCreateCompanyHoliday = () => {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: async (holidays: any[]) => {
|
||||||
|
const response = await apiClient.post('/api/lms/config/holidays', holidays);
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['holidays'] });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Update Work Settings
|
||||||
|
export const useUpdateWorkSettings = () => {
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: async (data: { company_id: number; branch_id: number; weekly_off_days: number[]; effective_from: string }) => {
|
||||||
|
const response = await apiClient.put('/api/lms/config/work-settings', data);
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// ==========================================
|
||||||
|
// 2. EMPLOYEE ACTIONS
|
||||||
|
// ==========================================
|
||||||
|
|
||||||
|
// Get Leave Balances (Summary)
|
||||||
|
export const useLeaveSummary = () => {
|
||||||
|
return useQuery<LeaveSummary[]>({
|
||||||
|
queryKey: ['leaveSummary'],
|
||||||
|
queryFn: async () => {
|
||||||
|
const response = await apiClient.get('/api/lms/leaves/balances', {
|
||||||
|
params: { year: new Date().getFullYear() }
|
||||||
|
});
|
||||||
|
|
||||||
|
// Map backend response to frontend LeaveSummary interface
|
||||||
|
// Inside useLeaveSummary
|
||||||
|
return (response.data.balances || []).map((b: any) => ({
|
||||||
|
leaveTypeId: b.leaveTypeId, // Ensure this is mapped!
|
||||||
|
leaveType: b.leaveTypeName,
|
||||||
|
credited: b.grantedDays,
|
||||||
|
utilized: b.usedDays,
|
||||||
|
lapsed: 0,
|
||||||
|
balance: b.availableBalance
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// ... (keep other hooks)
|
||||||
|
|
||||||
|
// Apply for Leave
|
||||||
|
export const useApplyLeave = () => {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const employeeId = useSelector((state: RootState) => Number(state.role.mockUserId));
|
||||||
|
|
||||||
|
// Dynamically fetch the logged-in user's profile to get companyId and branchId
|
||||||
|
const { data: empDetail } = useEmployeeById(employeeId);
|
||||||
|
|
||||||
return useMutation({
|
return useMutation({
|
||||||
mutationFn: (payload: LeaveRequestPayload) => postMockData(`leave/${role}_leave_requests`, payload),
|
mutationFn: async (payload: LeaveRequestPayload) => {
|
||||||
|
if (!empDetail) {
|
||||||
|
throw new Error("User profile is still loading. Please try again in a moment.");
|
||||||
|
}
|
||||||
|
|
||||||
|
// All values are now fully dynamic based on the user's real data
|
||||||
|
const reqPayload = {
|
||||||
|
employee_id: employeeId,
|
||||||
|
leave_type_id: payload.leaveTypeId,
|
||||||
|
company_id: empDetail.companyId, // Dynamic from EMS
|
||||||
|
branch_id: empDetail.branchId, // Dynamic from EMS
|
||||||
|
date_from: payload.fromDate,
|
||||||
|
date_to: payload.toDate,
|
||||||
|
is_half_day: payload.leaveDays === 0.5,
|
||||||
|
reason: payload.reason,
|
||||||
|
};
|
||||||
|
const response = await apiClient.post('/api/lms/leaves/apply', reqPayload);
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
queryClient.invalidateQueries({ queryKey: ['leaveSummary', role] });
|
queryClient.invalidateQueries({ queryKey: ['leaveSummary'] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['leaveHistory'] });
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// ... (keep the rest of the file)
|
||||||
|
|
||||||
|
// Get Leave History
|
||||||
export const useLeaveHistory = () => {
|
export const useLeaveHistory = () => {
|
||||||
const role = useSelector((state: RootState) => state.role.currentRole);
|
|
||||||
|
|
||||||
return useQuery<LeaveHistoryRecord[]>({
|
return useQuery<LeaveHistoryRecord[]>({
|
||||||
queryKey: ['leaveHistory', role],
|
queryKey: ['leaveHistory'],
|
||||||
queryFn: () => fetchMockData<LeaveHistoryRecord[]>(LEAVE_ENDPOINTS[role].history),
|
queryFn: async () => {
|
||||||
|
const response = await apiClient.get('/api/lms/leaves/history', {
|
||||||
|
params: { year: new Date().getFullYear() }
|
||||||
|
});
|
||||||
|
|
||||||
|
// Map backend response to frontend LeaveHistoryRecord interface
|
||||||
|
return (response.data.history || []).map((h: any) => ({
|
||||||
|
id: String(h.applicationId),
|
||||||
|
leaveType: h.leaveTypeName,
|
||||||
|
applicationDate: new Date().toISOString().split('T')[0], // Backend doesn't return applicationDate yet
|
||||||
|
fromDate: h.dateFrom,
|
||||||
|
toDate: h.dateTo,
|
||||||
|
leaveDays: h.numberOfDays,
|
||||||
|
status: h.status,
|
||||||
|
reason: h.reason
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get Valid Optional Holidays
|
||||||
|
export const useValidOptionalHolidays = () => {
|
||||||
|
return useQuery<any[]>({
|
||||||
|
queryKey: ['optionalHolidays'],
|
||||||
|
queryFn: async () => {
|
||||||
|
const response = await apiClient.get('/api/lms/holidays/valid-optional');
|
||||||
|
return response.data.holidays || [];
|
||||||
|
},
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
export const useManagerApprovals = () => {
|
// ==========================================
|
||||||
|
// 3. MANAGER ACTIONS
|
||||||
|
// ==========================================
|
||||||
|
|
||||||
|
// Get Pending Leaves for Team (Generic for Manager, HR, Director)
|
||||||
|
export const usePendingApprovals = () => {
|
||||||
return useQuery<ManagerLeaveApproval[]>({
|
return useQuery<ManagerLeaveApproval[]>({
|
||||||
queryKey: ['leaveApprovals', 'manager'],
|
queryKey: ['pendingApprovals'],
|
||||||
queryFn: () => fetchMockData<ManagerLeaveApproval[]>('approvals/manager_pending_leaves.json'),
|
queryFn: async () => {
|
||||||
|
const response = await apiClient.get('/api/lms/manager/pending');
|
||||||
|
|
||||||
|
// Map backend response to frontend ManagerLeaveApproval interface
|
||||||
|
return (response.data.data || []).map((p: any) => ({
|
||||||
|
id: String(p.applicationId),
|
||||||
|
employeeId: p.employeeCode || String(p.employeeId),
|
||||||
|
employeeName: `${p.firstName} ${p.lastName}`.trim(),
|
||||||
|
leaveType: p.leaveType,
|
||||||
|
applicationDate: new Date().toISOString().split('T')[0],
|
||||||
|
fromDate: p.dateFrom,
|
||||||
|
toDate: p.dateTo,
|
||||||
|
leaveDays: p.numberOfDays,
|
||||||
|
status: p.status,
|
||||||
|
reason: p.reason
|
||||||
|
}));
|
||||||
|
},
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
export const useLeaveApplications = () => {
|
// Aliases for role-specific hooks to keep existing components working
|
||||||
return useQuery<LeaveApplicationSummary[]>({
|
export const useManagerApprovals = usePendingApprovals;
|
||||||
queryKey: ['leaveApplications'],
|
export const useHRManagerApprovals = usePendingApprovals;
|
||||||
queryFn: () => fetchMockData<LeaveApplicationSummary[]>('leave/leave_applications.json'),
|
export const useDirectorApprovals = usePendingApprovals;
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
export const useLeaveBalance = () => {
|
|
||||||
return useQuery<LeaveBalanceRecord[]>({
|
|
||||||
queryKey: ['leaveBalance'],
|
|
||||||
queryFn: () => fetchMockData<LeaveBalanceRecord[]>('leave/leave_balance.json'),
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
export const useHRManagerApprovals = () => {
|
|
||||||
return useQuery<ManagerLeaveApproval[]>({
|
|
||||||
queryKey: ['leaveApprovals', 'hrmanager'],
|
|
||||||
queryFn: () => fetchMockData<ManagerLeaveApproval[]>('approvals/hrmanager_pending_leaves.json'),
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
export const useDirectorApprovals = () => {
|
|
||||||
return useQuery<ManagerLeaveApproval[]>({
|
|
||||||
queryKey: ['leaveApprovals', 'director'],
|
|
||||||
queryFn: () => fetchMockData<ManagerLeaveApproval[]>('approvals/director_pending_leaves.json'),
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
|
// Approve / Reject Leave
|
||||||
export const useUpdateLeaveApproval = () => {
|
export const useUpdateLeaveApproval = () => {
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
return useMutation({
|
return useMutation({
|
||||||
mutationFn: async ({ id, status }: { id: string; status: ApprovalStatus }) => {
|
mutationFn: async ({ id, status }: { id: string; status: ApprovalStatus }) => {
|
||||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
const endpoint = status === 'Approved' ? 'approve' : 'reject';
|
||||||
console.log(`[Mock PUT] Updated leave ${id} to ${status}`);
|
const payload = status === 'Rejected' ? { reason: "Rejected by approver" } : {};
|
||||||
return { id, status };
|
const response = await apiClient.post(`/api/lms/manager/leaves/${id}/${endpoint}`, payload);
|
||||||
|
return response.data;
|
||||||
},
|
},
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
queryClient.invalidateQueries({ queryKey: ['leaveApprovals'] });
|
queryClient.invalidateQueries({ queryKey: ['pendingApprovals'] });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// ==========================================
|
||||||
|
// 4. REPORTS & MOCK FALLBACKS
|
||||||
|
// ==========================================
|
||||||
|
|
||||||
|
// Get Ledger Report (OB-CB)
|
||||||
|
export const useLeaveBalance = (params: { month: number; year: number; companyId: number }, enabled: boolean) => {
|
||||||
|
return useQuery<LeaveBalanceRecord[]>({
|
||||||
|
queryKey: ['leaveBalance', params],
|
||||||
|
queryFn: async () => {
|
||||||
|
const response = await apiClient.get('/api/lms/admin/reports/ob-cb', {
|
||||||
|
params: { month: params.month, year: params.year, company_id: params.companyId }
|
||||||
|
});
|
||||||
|
|
||||||
|
const rawData = response.data.data || [];
|
||||||
|
const employeeMap: Record<string, LeaveBalanceRecord> = {};
|
||||||
|
|
||||||
|
// Group raw data by employeeId
|
||||||
|
rawData.forEach((item: any) => {
|
||||||
|
if (!employeeMap[item.employeeId]) {
|
||||||
|
employeeMap[item.employeeId] = {
|
||||||
|
employeeId: item.employeeCode || String(item.employeeId),
|
||||||
|
employeeName: item.employeeName,
|
||||||
|
casualOpening: 0,
|
||||||
|
casualClosing: 0,
|
||||||
|
optionalOpening: 0,
|
||||||
|
optionalClosing: 0,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Assign values based on leave type
|
||||||
|
if (item.leaveType === 'Casual Leave') {
|
||||||
|
employeeMap[item.employeeId].casualOpening = item.openingBalance;
|
||||||
|
employeeMap[item.employeeId].casualClosing = item.closingBalance;
|
||||||
|
} else if (item.leaveType === 'Optional Leave') {
|
||||||
|
employeeMap[item.employeeId].optionalOpening = item.openingBalance;
|
||||||
|
employeeMap[item.employeeId].optionalClosing = item.closingBalance;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return Object.values(employeeMap);
|
||||||
|
},
|
||||||
|
enabled: enabled, // Only fetch when the user clicks search
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get Leave Applications (Real API for HR/Director)
|
||||||
|
export const useLeaveApplications = () => {
|
||||||
|
return useQuery<LeaveApplicationSummary[]>({
|
||||||
|
queryKey: ['leaveApplications'],
|
||||||
|
queryFn: async () => {
|
||||||
|
const response = await apiClient.get('/api/lms/hr/applications');
|
||||||
|
|
||||||
|
return (response.data.data || []).map((p: any) => ({
|
||||||
|
id: String(p.applicationId),
|
||||||
|
employeeId: p.employeeCode,
|
||||||
|
employeeName: `${p.firstName} ${p.lastName}`.trim(),
|
||||||
|
jobRole: p.jobTitle, // Mapped from jobTitle
|
||||||
|
department: p.departmentName,
|
||||||
|
managerName: p.managerName, // Mapped from backend
|
||||||
|
leaveType: p.leaveType,
|
||||||
|
fromDate: p.dateFrom,
|
||||||
|
toDate: p.dateTo,
|
||||||
|
leaveDays: p.numberOfDays,
|
||||||
|
status: p.status,
|
||||||
|
reason: p.reason, // Mapped from backend
|
||||||
|
}));
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
@ -7,13 +7,13 @@ interface ApprovalModalProps {
|
|||||||
onAction: (id: string, status: ApprovalStatus) => void;
|
onAction: (id: string, status: ApprovalStatus) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Updated to handle backend uppercase statuses
|
||||||
const getStatusClass = (status: string) => {
|
const getStatusClass = (status: string) => {
|
||||||
switch (status) {
|
const normalizedStatus = status.toUpperCase();
|
||||||
case 'Approved': return 'bg-present-100 text-present-700';
|
if (normalizedStatus.includes('APPROVED')) return 'bg-present-100 text-present-700';
|
||||||
case 'Pending': return 'bg-late-100 text-late-700';
|
if (normalizedStatus.includes('PENDING')) return 'bg-late-100 text-late-700';
|
||||||
case 'Rejected': return 'bg-absent-100 text-absent-700';
|
if (normalizedStatus.includes('REJECTED')) return 'bg-absent-100 text-absent-700';
|
||||||
default: return 'bg-app-muted text-text-secondary';
|
return 'bg-app-muted text-text-secondary';
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function ApprovalModal({ record, onClose, onAction }: ApprovalModalProps) {
|
export default function ApprovalModal({ record, onClose, onAction }: ApprovalModalProps) {
|
||||||
@ -21,6 +21,9 @@ export default function ApprovalModal({ record, onClose, onAction }: ApprovalMod
|
|||||||
return new Date(dateStr + 'T00:00:00').toLocaleDateString('en-US', { day: '2-digit', month: 'short', year: 'numeric' });
|
return new Date(dateStr + 'T00:00:00').toLocaleDateString('en-US', { day: '2-digit', month: 'short', year: 'numeric' });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Check if the status is pending (case-insensitive)
|
||||||
|
const isPending = record.status.toUpperCase().includes('PENDING');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||||
<div className="bg-app-card rounded-lg shadow-xl w-full max-w-md p-6 relative">
|
<div className="bg-app-card rounded-lg shadow-xl w-full max-w-md p-6 relative">
|
||||||
@ -67,7 +70,8 @@ export default function ApprovalModal({ record, onClose, onAction }: ApprovalMod
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex justify-end space-x-3 mt-6">
|
<div className="flex justify-end space-x-3 mt-6">
|
||||||
{record.status === 'Pending' ? (
|
{/* Render buttons if the status is PENDING */}
|
||||||
|
{isPending ? (
|
||||||
<>
|
<>
|
||||||
<button
|
<button
|
||||||
onClick={() => onAction(record.id, 'Rejected')}
|
onClick={() => onAction(record.id, 'Rejected')}
|
||||||
|
|||||||
@ -11,13 +11,13 @@ interface ApprovalTableProps {
|
|||||||
type SortKey = 'employeeId' | 'employeeName' | 'leaveType' | 'applicationDate' | 'leaveDays' | 'status';
|
type SortKey = 'employeeId' | 'employeeName' | 'leaveType' | 'applicationDate' | 'leaveDays' | 'status';
|
||||||
type SortDirection = 'ascending' | 'descending';
|
type SortDirection = 'ascending' | 'descending';
|
||||||
|
|
||||||
|
// Updated to handle backend uppercase statuses
|
||||||
const getStatusClass = (status: string) => {
|
const getStatusClass = (status: string) => {
|
||||||
switch (status) {
|
const normalizedStatus = status.toUpperCase();
|
||||||
case 'Approved': return 'bg-present-100 text-present-700';
|
if (normalizedStatus.includes('APPROVED')) return 'bg-present-100 text-present-700';
|
||||||
case 'Pending': return 'bg-late-100 text-late-700';
|
if (normalizedStatus.includes('PENDING')) return 'bg-late-100 text-late-700';
|
||||||
case 'Rejected': return 'bg-absent-100 text-absent-700';
|
if (normalizedStatus.includes('REJECTED')) return 'bg-absent-100 text-absent-700';
|
||||||
default: return 'bg-app-muted text-text-secondary';
|
return 'bg-app-muted text-text-secondary';
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function ApprovalTable({ records, onAction }: ApprovalTableProps) {
|
export default function ApprovalTable({ records, onAction }: ApprovalTableProps) {
|
||||||
@ -26,13 +26,11 @@ export default function ApprovalTable({ records, onAction }: ApprovalTableProps)
|
|||||||
const [currentPage, setCurrentPage] = useState(1);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
const [pageSize, setPageSize] = useState(10);
|
const [pageSize, setPageSize] = useState(10);
|
||||||
|
|
||||||
// Default sort: applicationDate descending (last applied first)
|
|
||||||
const [sortConfig, setSortConfig] = useState<{ key: SortKey; direction: SortDirection }>({
|
const [sortConfig, setSortConfig] = useState<{ key: SortKey; direction: SortDirection }>({
|
||||||
key: 'applicationDate',
|
key: 'applicationDate',
|
||||||
direction: 'descending'
|
direction: 'descending'
|
||||||
});
|
});
|
||||||
|
|
||||||
// Filter data based on search query
|
|
||||||
const filteredData = useMemo(() => {
|
const filteredData = useMemo(() => {
|
||||||
if (!searchQuery) return records;
|
if (!searchQuery) return records;
|
||||||
return records.filter(record =>
|
return records.filter(record =>
|
||||||
@ -43,7 +41,6 @@ export default function ApprovalTable({ records, onAction }: ApprovalTableProps)
|
|||||||
);
|
);
|
||||||
}, [records, searchQuery]);
|
}, [records, searchQuery]);
|
||||||
|
|
||||||
// Sort filtered data
|
|
||||||
const sortedData = useMemo(() => {
|
const sortedData = useMemo(() => {
|
||||||
const sortableData = [...filteredData];
|
const sortableData = [...filteredData];
|
||||||
sortableData.sort((a, b) => {
|
sortableData.sort((a, b) => {
|
||||||
@ -54,7 +51,6 @@ export default function ApprovalTable({ records, onAction }: ApprovalTableProps)
|
|||||||
return sortableData;
|
return sortableData;
|
||||||
}, [filteredData, sortConfig]);
|
}, [filteredData, sortConfig]);
|
||||||
|
|
||||||
// Pagination Logic
|
|
||||||
const totalPages = Math.ceil(sortedData.length / pageSize);
|
const totalPages = Math.ceil(sortedData.length / pageSize);
|
||||||
const isPaginationEnabled = sortedData.length > pageSize;
|
const isPaginationEnabled = sortedData.length > pageSize;
|
||||||
|
|
||||||
@ -98,8 +94,6 @@ export default function ApprovalTable({ records, onAction }: ApprovalTableProps)
|
|||||||
<div className="bg-app-card p-6 rounded-lg shadow-sm mt-6">
|
<div className="bg-app-card p-6 rounded-lg shadow-sm mt-6">
|
||||||
<div className="flex flex-col md:flex-row md:items-center justify-between mb-6 gap-4">
|
<div className="flex flex-col md:flex-row md:items-center justify-between mb-6 gap-4">
|
||||||
<h2 className="text-lg font-semibold text-text-primary">Pending Leave Approvals</h2>
|
<h2 className="text-lg font-semibold text-text-primary">Pending Leave Approvals</h2>
|
||||||
|
|
||||||
{/* Search Input */}
|
|
||||||
<div className="relative w-full md:w-64">
|
<div className="relative w-full md:w-64">
|
||||||
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-light" />
|
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-light" />
|
||||||
<input
|
<input
|
||||||
@ -158,7 +152,6 @@ export default function ApprovalTable({ records, onAction }: ApprovalTableProps)
|
|||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Footer: Pagination & Page Size */}
|
|
||||||
<div className="flex flex-col md:flex-row md:items-center justify-between mt-4 pt-4 border-t border-app-border gap-4">
|
<div className="flex flex-col md:flex-row md:items-center justify-between mt-4 pt-4 border-t border-app-border gap-4">
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
<span className="text-sm text-text-muted">Show</span>
|
<span className="text-sm text-text-muted">Show</span>
|
||||||
|
|||||||
@ -19,17 +19,11 @@ const calculateLeaveDays = (from: string, fromMode: DayMode, to: string, toMode:
|
|||||||
return days;
|
return days;
|
||||||
};
|
};
|
||||||
|
|
||||||
// logic: +1 day, if Sunday -> Monday, with safe local formatting
|
|
||||||
const calculateResumptionDate = (to: string) => {
|
const calculateResumptionDate = (to: string) => {
|
||||||
if (!to) return '';
|
if (!to) return '';
|
||||||
const date = new Date(to + 'T00:00:00');
|
const date = new Date(to + 'T00:00:00');
|
||||||
date.setDate(date.getDate() + 1); // Add 1 day
|
date.setDate(date.getDate() + 1);
|
||||||
|
if (date.getDay() === 0) date.setDate(date.getDate() + 1);
|
||||||
if (date.getDay() === 0) { // 0 is Sunday
|
|
||||||
date.setDate(date.getDate() + 1); // Make it Monday
|
|
||||||
}
|
|
||||||
|
|
||||||
// Format safely in local time
|
|
||||||
const year = date.getFullYear();
|
const year = date.getFullYear();
|
||||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||||
const day = String(date.getDate()).padStart(2, '0');
|
const day = String(date.getDate()).padStart(2, '0');
|
||||||
@ -39,18 +33,22 @@ const calculateResumptionDate = (to: string) => {
|
|||||||
export default function ApplyLeaveForm({ summaryData }: ApplyLeaveFormProps) {
|
export default function ApplyLeaveForm({ summaryData }: ApplyLeaveFormProps) {
|
||||||
const { mutate, isPending } = useApplyLeave();
|
const { mutate, isPending } = useApplyLeave();
|
||||||
const [showForm, setShowForm] = useState(false);
|
const [showForm, setShowForm] = useState(false);
|
||||||
const [selectedLeaveType, setSelectedLeaveType] = useState('');
|
|
||||||
|
// Track both ID (for API) and Name (for UI display)
|
||||||
|
const [selectedLeaveTypeId, setSelectedLeaveTypeId] = useState<number | ''>('');
|
||||||
|
const [selectedLeaveTypeName, setSelectedLeaveTypeName] = useState('');
|
||||||
|
|
||||||
const [formData, setFormData] = useState<LeaveRequestPayload>({
|
const [formData, setFormData] = useState<LeaveRequestPayload>({
|
||||||
leaveType: '', fromDate: '', fromDayMode: 'Full Day', toDate: '', toDayMode: 'Full Day', leaveDays: 0, resumptionDate: '', reason: '',
|
leaveTypeId: 0, leaveType: '', fromDate: '', fromDayMode: 'Full Day', toDate: '', toDayMode: 'Full Day', leaveDays: 0, resumptionDate: '', reason: '',
|
||||||
});
|
});
|
||||||
|
|
||||||
const calculatedDays = useMemo(() => calculateLeaveDays(formData.fromDate, formData.fromDayMode, formData.toDate, formData.toDayMode), [formData.fromDate, formData.fromDayMode, formData.toDate, formData.toDayMode]);
|
const calculatedDays = useMemo(() => calculateLeaveDays(formData.fromDate, formData.fromDayMode, formData.toDate, formData.toDayMode), [formData.fromDate, formData.fromDayMode, formData.toDate, formData.toDayMode]);
|
||||||
const calculatedResumption = useMemo(() => calculateResumptionDate(formData.toDate), [formData.toDate]);
|
const calculatedResumption = useMemo(() => calculateResumptionDate(formData.toDate), [formData.toDate]);
|
||||||
|
|
||||||
const handleProceed = () => {
|
const handleProceed = () => {
|
||||||
if (!selectedLeaveType) { toast.error("Please select a leave type first."); return; }
|
if (!selectedLeaveTypeId) { toast.error("Please select a leave type first."); return; }
|
||||||
setShowForm(true);
|
setShowForm(true);
|
||||||
setFormData(prev => ({ ...prev, leaveType: selectedLeaveType }));
|
setFormData(prev => ({ ...prev, leaveTypeId: Number(selectedLeaveTypeId), leaveType: selectedLeaveTypeName }));
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
|
||||||
@ -64,8 +62,9 @@ export default function ApplyLeaveForm({ summaryData }: ApplyLeaveFormProps) {
|
|||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
toast.success("Leave applied successfully!");
|
toast.success("Leave applied successfully!");
|
||||||
setShowForm(false);
|
setShowForm(false);
|
||||||
setSelectedLeaveType('');
|
setSelectedLeaveTypeId('');
|
||||||
setFormData({ leaveType: '', fromDate: '', fromDayMode: 'Full Day', toDate: '', toDayMode: 'Full Day', leaveDays: 0, resumptionDate: '', reason: '' });
|
setSelectedLeaveTypeName('');
|
||||||
|
setFormData({ leaveTypeId: 0, leaveType: '', fromDate: '', fromDayMode: 'Full Day', toDate: '', toDayMode: 'Full Day', leaveDays: 0, resumptionDate: '', reason: '' });
|
||||||
},
|
},
|
||||||
onError: () => toast.error("Failed to apply leave."),
|
onError: () => toast.error("Failed to apply leave."),
|
||||||
});
|
});
|
||||||
@ -78,9 +77,20 @@ export default function ApplyLeaveForm({ summaryData }: ApplyLeaveFormProps) {
|
|||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-text-secondary mb-1">Leave Type</label>
|
<label className="block text-sm font-medium text-text-secondary mb-1">Leave Type</label>
|
||||||
<select value={selectedLeaveType} onChange={(e) => setSelectedLeaveType(e.target.value)} className="w-full px-3 py-2 border border-app-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary text-text-secondary bg-app-card">
|
<select
|
||||||
|
value={selectedLeaveTypeId}
|
||||||
|
onChange={(e) => {
|
||||||
|
const id = Number(e.target.value);
|
||||||
|
setSelectedLeaveTypeId(id);
|
||||||
|
const selected = summaryData.find(l => l.leaveTypeId === id);
|
||||||
|
setSelectedLeaveTypeName(selected?.leaveType || '');
|
||||||
|
}}
|
||||||
|
className="w-full px-3 py-2 border border-app-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary text-text-secondary bg-app-card"
|
||||||
|
>
|
||||||
<option value="">Select Leave Type</option>
|
<option value="">Select Leave Type</option>
|
||||||
{summaryData.map((leave, idx) => (<option key={idx} value={leave.leaveType}>{leave.leaveType}</option>))}
|
{summaryData.map((leave) => (
|
||||||
|
<option key={leave.leaveTypeId} value={leave.leaveTypeId}>{leave.leaveType}</option>
|
||||||
|
))}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<button onClick={handleProceed} className="w-full px-4 py-2 bg-action text-white rounded-lg hover:bg-action-hover transition-colors font-medium">Proceed to Apply Leave</button>
|
<button onClick={handleProceed} className="w-full px-4 py-2 bg-action text-white rounded-lg hover:bg-action-hover transition-colors font-medium">Proceed to Apply Leave</button>
|
||||||
@ -88,7 +98,7 @@ export default function ApplyLeaveForm({ summaryData }: ApplyLeaveFormProps) {
|
|||||||
) : (
|
) : (
|
||||||
<form onSubmit={handleSubmit} className="space-y-4">
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<span className="text-sm font-medium text-primary bg-primary/10 px-3 py-1 rounded-full">{selectedLeaveType}</span>
|
<span className="text-sm font-medium text-primary bg-primary/10 px-3 py-1 rounded-full">{selectedLeaveTypeName}</span>
|
||||||
<button type="button" onClick={() => setShowForm(false)} className="flex items-center px-4 py-1 bg-absent-500 text-white rounded-lg hover:bg-absent-600 transition-colors text-sm ">Cancel</button>
|
<button type="button" onClick={() => setShowForm(false)} className="flex items-center px-4 py-1 bg-absent-500 text-white rounded-lg hover:bg-absent-600 transition-colors text-sm ">Cancel</button>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@ -1,14 +1,14 @@
|
|||||||
import { Search } from 'lucide-react';
|
import { Search } from 'lucide-react';
|
||||||
|
|
||||||
export interface BalanceFilterValues {
|
export interface BalanceFilterValues {
|
||||||
empId: string;
|
companyId: string;
|
||||||
empName: string;
|
|
||||||
month: number;
|
month: number;
|
||||||
year: number;
|
year: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface BalanceFiltersProps {
|
interface BalanceFiltersProps {
|
||||||
filters: BalanceFilterValues;
|
filters: BalanceFilterValues;
|
||||||
|
companies: { id: number; name: string }[];
|
||||||
onFilterChange: (newFilters: BalanceFilterValues) => void;
|
onFilterChange: (newFilters: BalanceFilterValues) => void;
|
||||||
onSearch: (e: React.FormEvent) => void;
|
onSearch: (e: React.FormEvent) => void;
|
||||||
}
|
}
|
||||||
@ -23,34 +23,23 @@ const monthsArray = [
|
|||||||
const currentYear = new Date().getFullYear();
|
const currentYear = new Date().getFullYear();
|
||||||
const yearsArray = Array.from({ length: 5 }, (_, i) => currentYear - 2 + i);
|
const yearsArray = Array.from({ length: 5 }, (_, i) => currentYear - 2 + i);
|
||||||
|
|
||||||
export default function BalanceFilters({ filters, onFilterChange, onSearch }: BalanceFiltersProps) {
|
export default function BalanceFilters({ filters, companies, onFilterChange, onSearch }: BalanceFiltersProps) {
|
||||||
const inputClass = "w-full px-3 py-2 border border-app-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary text-text-secondary bg-app-card";
|
const inputClass = "w-full px-3 py-2 border border-app-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary text-text-secondary bg-app-card";
|
||||||
const labelClass = "text-xs text-text-muted mb-1";
|
const labelClass = "text-xs text-text-muted mb-1";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form onSubmit={onSearch} className="bg-app-card p-4 rounded-lg shadow-sm grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 items-end">
|
<form onSubmit={onSearch} className="bg-app-card p-4 rounded-lg shadow-sm grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 items-end">
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<label className={labelClass}>Employee ID</label>
|
<label className={labelClass}>Company Name</label>
|
||||||
<input
|
<select
|
||||||
type="text"
|
value={filters.companyId}
|
||||||
name="empId"
|
onChange={(e) => onFilterChange({ ...filters, companyId: e.target.value })}
|
||||||
value={filters.empId}
|
|
||||||
onChange={(e) => onFilterChange({ ...filters, empId: e.target.value })}
|
|
||||||
className={inputClass}
|
className={inputClass}
|
||||||
placeholder="e.g. EMP001"
|
required
|
||||||
/>
|
>
|
||||||
</div>
|
<option value="">Select Company</option>
|
||||||
|
{companies.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
|
||||||
<div className="flex flex-col">
|
</select>
|
||||||
<label className={labelClass}>Employee Name</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="empName"
|
|
||||||
value={filters.empName}
|
|
||||||
onChange={(e) => onFilterChange({ ...filters, empName: e.target.value })}
|
|
||||||
className={inputClass}
|
|
||||||
placeholder="e.g. Alice"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
|
|||||||
@ -13,7 +13,6 @@ export default function BalanceTable({ records, isSearched, month, year }: Balan
|
|||||||
return `${monthName} ${year}`;
|
return `${monthName} ${year}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
// Only render if the search button has been clicked
|
|
||||||
if (!isSearched) return null;
|
if (!isSearched) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -27,13 +26,17 @@ export default function BalanceTable({ records, isSearched, month, year }: Balan
|
|||||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-muted uppercase">Emp CODE</th>
|
<th className="px-4 py-3 text-left text-xs font-semibold text-text-muted uppercase">Emp CODE</th>
|
||||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-muted uppercase">Employee Name</th>
|
<th className="px-4 py-3 text-left text-xs font-semibold text-text-muted uppercase">Employee Name</th>
|
||||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-muted uppercase">
|
<th className="px-4 py-3 text-left text-xs font-semibold text-text-muted uppercase">
|
||||||
Opening Balance ({formatMonthYear()})
|
Casual Opening ({formatMonthYear()})
|
||||||
</th>
|
</th>
|
||||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-muted uppercase">
|
<th className="px-4 py-3 text-left text-xs font-semibold text-text-muted uppercase">
|
||||||
Closing Balance ({formatMonthYear()})
|
Casual Closing ({formatMonthYear()})
|
||||||
|
</th>
|
||||||
|
<th className="px-4 py-3 text-left text-xs font-semibold text-text-muted uppercase">
|
||||||
|
Optional Opening ({formatMonthYear()})
|
||||||
|
</th>
|
||||||
|
<th className="px-4 py-3 text-left text-xs font-semibold text-text-muted uppercase">
|
||||||
|
Optional Closing ({formatMonthYear()})
|
||||||
</th>
|
</th>
|
||||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-muted uppercase">Remaining Casual Leaves</th>
|
|
||||||
<th className="px-4 py-3 text-left text-xs font-semibold text-text-muted uppercase">Remaining Optional Leaves</th>
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody className="divide-y divide-app-border">
|
<tbody className="divide-y divide-app-border">
|
||||||
@ -42,10 +45,10 @@ export default function BalanceTable({ records, isSearched, month, year }: Balan
|
|||||||
<tr key={index} className="hover:bg-app-muted transition-colors">
|
<tr key={index} className="hover:bg-app-muted transition-colors">
|
||||||
<td className="px-4 py-3 text-sm text-text-primary">{record.employeeId}</td>
|
<td className="px-4 py-3 text-sm text-text-primary">{record.employeeId}</td>
|
||||||
<td className="px-4 py-3 text-sm text-text-secondary">{record.employeeName}</td>
|
<td className="px-4 py-3 text-sm text-text-secondary">{record.employeeName}</td>
|
||||||
<td className="px-4 py-3 text-sm text-text-secondary">{record.openingBalance}</td>
|
<td className="px-4 py-3 text-sm text-text-secondary">{record.casualOpening}</td>
|
||||||
<td className="px-4 py-3 text-sm text-text-secondary">{record.closingBalance}</td>
|
<td className="px-4 py-3 text-sm text-text-secondary">{record.casualClosing}</td>
|
||||||
<td className="px-4 py-3 text-sm text-text-secondary">{record.casualLeave}</td>
|
<td className="px-4 py-3 text-sm text-text-secondary">{record.optionalOpening}</td>
|
||||||
<td className="px-4 py-3 text-sm text-text-secondary">{record.optionalLeave}</td>
|
<td className="px-4 py-3 text-sm text-text-secondary">{record.optionalClosing}</td>
|
||||||
</tr>
|
</tr>
|
||||||
))
|
))
|
||||||
) : (
|
) : (
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import { X } from 'lucide-react';
|
import { X } from 'lucide-react';
|
||||||
import type { LeaveApplicationSummary } from '../../types/leave';
|
import type { LeaveApplicationSummary } from '../../../types/leave';
|
||||||
|
|
||||||
interface LeaveApplicationModalProps {
|
interface LeaveApplicationModalProps {
|
||||||
record: LeaveApplicationSummary;
|
record: LeaveApplicationSummary;
|
||||||
@ -7,13 +7,17 @@ interface LeaveApplicationModalProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const getStatusClass = (status: string) => {
|
const getStatusClass = (status: string) => {
|
||||||
switch (status) {
|
const normalizedStatus = status.toUpperCase();
|
||||||
case 'Approved': return 'bg-present-100 text-present-700';
|
if (normalizedStatus.includes('APPROVED')) return 'bg-present-100 text-present-700';
|
||||||
case 'Pending': return 'bg-late-100 text-late-700';
|
if (normalizedStatus.includes('PENDING')) return 'bg-late-100 text-late-700';
|
||||||
case 'Rejected': return 'bg-absent-100 text-absent-700';
|
if (normalizedStatus.includes('REJECTED')) return 'bg-absent-100 text-absent-700';
|
||||||
case 'Withdrawn': return 'bg-app-muted text-text-secondary';
|
if (normalizedStatus.includes('WITHDRAWN') || normalizedStatus.includes('CANCELLED')) return 'bg-app-muted text-text-secondary';
|
||||||
default: return 'bg-app-muted text-text-secondary';
|
return 'bg-app-muted text-text-secondary';
|
||||||
}
|
};
|
||||||
|
|
||||||
|
const formatReadableDate = (dateStr: string) => {
|
||||||
|
if (!dateStr) return '-';
|
||||||
|
return new Date(dateStr + 'T00:00:00').toLocaleDateString('en-US', { day: '2-digit', month: 'short', year: 'numeric' });
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function LeaveApplicationModal({ record, onClose }: LeaveApplicationModalProps) {
|
export default function LeaveApplicationModal({ record, onClose }: LeaveApplicationModalProps) {
|
||||||
@ -39,8 +43,8 @@ export default function LeaveApplicationModal({ record, onClose }: LeaveApplicat
|
|||||||
<span className="text-sm font-medium text-text-primary">{record.employeeName}</span>
|
<span className="text-sm font-medium text-text-primary">{record.employeeName}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between border-b border-app-border pb-2">
|
<div className="flex justify-between border-b border-app-border pb-2">
|
||||||
<span className="text-sm text-text-muted">Designation</span>
|
<span className="text-sm text-text-muted">Job Role</span> {/* Changed */}
|
||||||
<span className="text-sm font-medium text-text-primary">{record.designation}</span>
|
<span className="text-sm font-medium text-text-primary">{record.jobRole}</span> {/* Changed */}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between border-b border-app-border pb-2">
|
<div className="flex justify-between border-b border-app-border pb-2">
|
||||||
<span className="text-sm text-text-muted">Department</span>
|
<span className="text-sm text-text-muted">Department</span>
|
||||||
@ -55,13 +59,21 @@ export default function LeaveApplicationModal({ record, onClose }: LeaveApplicat
|
|||||||
<span className="text-sm font-medium text-text-primary">{record.leaveType}</span>
|
<span className="text-sm font-medium text-text-primary">{record.leaveType}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between border-b border-app-border pb-2">
|
<div className="flex justify-between border-b border-app-border pb-2">
|
||||||
<span className="text-sm text-text-muted">Leave Days</span>
|
<span className="text-sm text-text-muted">Duration</span>
|
||||||
<span className="text-sm font-medium text-text-primary">{record.leaveDays}</span>
|
<span className="text-sm font-medium text-text-primary text-right">
|
||||||
|
{formatReadableDate(record.fromDate)} to {formatReadableDate(record.toDate)}<br />
|
||||||
|
<span className="text-text-muted">({record.leaveDays} Days)</span>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between border-b border-app-border pb-2">
|
<div className="flex justify-between border-b border-app-border pb-2">
|
||||||
<span className="text-sm text-text-muted">Status</span>
|
<span className="text-sm text-text-muted">Status</span>
|
||||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusClass(record.status)}`}>{record.status}</span>
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusClass(record.status)}`}>{record.status}</span>
|
||||||
</div>
|
</div>
|
||||||
|
{/* Added Reason Field */}
|
||||||
|
<div className="border-b border-app-border pb-2">
|
||||||
|
<span className="text-sm text-text-muted block mb-1">Reason</span>
|
||||||
|
<p className="text-sm text-text-secondary bg-app-muted p-3 rounded-lg">{record.reason || 'No reason provided.'}</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex justify-end mt-6">
|
<div className="flex justify-end mt-6">
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { X } from 'lucide-react';
|
import { X } from 'lucide-react';
|
||||||
import type { LeaveHistoryRecord } from '../../types/leave';
|
import type { LeaveHistoryRecord } from '../../../types/leave';
|
||||||
|
|
||||||
interface ViewLeaveModalProps {
|
interface ViewLeaveModalProps {
|
||||||
record: LeaveHistoryRecord;
|
record: LeaveHistoryRecord;
|
||||||
@ -7,13 +7,15 @@ interface ViewLeaveModalProps {
|
|||||||
onWithdraw: (record: LeaveHistoryRecord) => void;
|
onWithdraw: (record: LeaveHistoryRecord) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Inside ViewLeaveModal.tsx
|
||||||
|
|
||||||
const getStatusClass = (status: string) => {
|
const getStatusClass = (status: string) => {
|
||||||
switch (status) {
|
const normalizedStatus = status.toUpperCase();
|
||||||
case 'Approved': return 'bg-present-100 text-present-700';
|
if (normalizedStatus.includes('APPROVED')) return 'bg-present-100 text-present-700';
|
||||||
case 'Pending': return 'bg-late-100 text-late-700';
|
if (normalizedStatus.includes('PENDING')) return 'bg-late-100 text-late-700';
|
||||||
case 'Withdrawn': return 'bg-absent-100 text-absent-700';
|
if (normalizedStatus.includes('REJECTED')) return 'bg-absent-100 text-absent-700';
|
||||||
default: return 'bg-app-muted text-text-secondary';
|
if (normalizedStatus.includes('WITHDRAWN') || normalizedStatus.includes('CANCELLED')) return 'bg-app-muted text-text-secondary';
|
||||||
}
|
return 'bg-app-muted text-text-secondary';
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function ViewLeaveModal({ record, onClose, onWithdraw }: ViewLeaveModalProps) {
|
export default function ViewLeaveModal({ record, onClose, onWithdraw }: ViewLeaveModalProps) {
|
||||||
@ -50,7 +52,8 @@ export default function ViewLeaveModal({ record, onClose, onWithdraw }: ViewLeav
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex justify-end space-x-3 mt-6">
|
<div className="flex justify-end space-x-3 mt-6">
|
||||||
{record.status === 'Pending' && (
|
{/* Update this condition to check uppercase PENDING */}
|
||||||
|
{record.status.toUpperCase() === 'PENDING' && (
|
||||||
<button onClick={() => onWithdraw(record)} className="px-4 py-2 bg-absent-500 text-white rounded-lg hover:bg-absent-600 transition-colors text-sm font-medium">
|
<button onClick={() => onWithdraw(record)} className="px-4 py-2 bg-absent-500 text-white rounded-lg hover:bg-absent-600 transition-colors text-sm font-medium">
|
||||||
Withdraw Application
|
Withdraw Application
|
||||||
</button>
|
</button>
|
||||||
@ -59,6 +62,7 @@ export default function ViewLeaveModal({ record, onClose, onWithdraw }: ViewLeav
|
|||||||
Close
|
Close
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { AlertTriangle } from 'lucide-react';
|
import { AlertTriangle } from 'lucide-react';
|
||||||
import type { LeaveHistoryRecord } from '../../types/leave';
|
import type { LeaveHistoryRecord } from '../../../types/leave';
|
||||||
|
|
||||||
interface WithdrawLeaveModalProps {
|
interface WithdrawLeaveModalProps {
|
||||||
record: LeaveHistoryRecord;
|
record: LeaveHistoryRecord;
|
||||||
@ -1,23 +1,23 @@
|
|||||||
import { useState, useMemo } from 'react';
|
import { useState, useMemo } from 'react';
|
||||||
import { ArrowUpDown, ArrowUp, ArrowDown, Eye, Search, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
|
import { ArrowUpDown, ArrowUp, ArrowDown, Eye, Search, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
|
||||||
import type { LeaveApplicationSummary } from '../../types/leave';
|
import type { LeaveApplicationSummary } from '../../../types/leave';
|
||||||
import LeaveApplicationModal from './LeaveApplicationModal';
|
import LeaveApplicationModal from '../modal/LeaveApplicationModal';
|
||||||
|
|
||||||
interface LeaveApplicationsTableProps {
|
interface LeaveApplicationsTableProps {
|
||||||
records: LeaveApplicationSummary[];
|
records: LeaveApplicationSummary[];
|
||||||
}
|
}
|
||||||
|
|
||||||
type SortKey = 'id' | 'employeeId' | 'employeeName' | 'designation' | 'department' | 'managerName' | 'leaveType' | 'leaveDays' | 'status';
|
// Updated to use jobRole instead of designation
|
||||||
|
type SortKey = 'id' | 'employeeId' | 'employeeName' | 'jobRole' | 'department' | 'managerName' | 'leaveType' | 'leaveDays' | 'status';
|
||||||
type SortDirection = 'ascending' | 'descending';
|
type SortDirection = 'ascending' | 'descending';
|
||||||
|
|
||||||
const getStatusClass = (status: string) => {
|
const getStatusClass = (status: string) => {
|
||||||
switch (status) {
|
const normalizedStatus = status.toUpperCase();
|
||||||
case 'Approved': return 'bg-present-100 text-present-700';
|
if (normalizedStatus.includes('APPROVED')) return 'bg-present-100 text-present-700';
|
||||||
case 'Pending': return 'bg-late-100 text-late-700';
|
if (normalizedStatus.includes('PENDING')) return 'bg-late-100 text-late-700';
|
||||||
case 'Rejected': return 'bg-absent-100 text-absent-700';
|
if (normalizedStatus.includes('REJECTED')) return 'bg-absent-100 text-absent-700';
|
||||||
case 'Withdrawn': return 'bg-app-muted text-text-secondary';
|
if (normalizedStatus.includes('WITHDRAWN') || normalizedStatus.includes('CANCELLED')) return 'bg-app-muted text-text-secondary';
|
||||||
default: return 'bg-app-muted text-text-secondary';
|
return 'bg-app-muted text-text-secondary';
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function LeaveApplicationsTable({ records }: LeaveApplicationsTableProps) {
|
export default function LeaveApplicationsTable({ records }: LeaveApplicationsTableProps) {
|
||||||
@ -36,7 +36,7 @@ export default function LeaveApplicationsTable({ records }: LeaveApplicationsTab
|
|||||||
record.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
record.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
record.employeeId.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
record.employeeId.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
record.employeeName.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
record.employeeName.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
record.designation.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
record.jobRole.toLowerCase().includes(searchQuery.toLowerCase()) || // Changed
|
||||||
record.department.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
record.department.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
record.managerName.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
record.managerName.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
record.leaveType.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
record.leaveType.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
@ -97,6 +97,7 @@ export default function LeaveApplicationsTable({ records }: LeaveApplicationsTab
|
|||||||
if (key === 'id') return 'App ID';
|
if (key === 'id') return 'App ID';
|
||||||
if (key === 'employeeId') return 'Emp CODE';
|
if (key === 'employeeId') return 'Emp CODE';
|
||||||
if (key === 'employeeName') return 'Employee Name';
|
if (key === 'employeeName') return 'Employee Name';
|
||||||
|
if (key === 'jobRole') return 'Job Role'; // Changed
|
||||||
if (key === 'managerName') return 'Manager Name';
|
if (key === 'managerName') return 'Manager Name';
|
||||||
if (key === 'leaveType') return 'Leave Type';
|
if (key === 'leaveType') return 'Leave Type';
|
||||||
if (key === 'leaveDays') return 'Leave Days';
|
if (key === 'leaveDays') return 'Leave Days';
|
||||||
@ -123,7 +124,7 @@ export default function LeaveApplicationsTable({ records }: LeaveApplicationsTab
|
|||||||
<table className="min-w-full divide-y divide-app-border">
|
<table className="min-w-full divide-y divide-app-border">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
{(['id', 'employeeId', 'employeeName', 'designation', 'department', 'managerName', 'leaveType', 'leaveDays', 'status'] as SortKey[]).map((key) => (
|
{(['id', 'employeeId', 'employeeName', 'jobRole', 'department', 'managerName', 'leaveType', 'leaveDays', 'status'] as SortKey[]).map((key) => (
|
||||||
<th key={key} onClick={() => requestSort(key)} className="px-6 py-3 text-left text-xs font-semibold text-text-muted uppercase tracking-wider cursor-pointer hover:bg-app-muted transition-colors">
|
<th key={key} onClick={() => requestSort(key)} className="px-6 py-3 text-left text-xs font-semibold text-text-muted uppercase tracking-wider cursor-pointer hover:bg-app-muted transition-colors">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
{formatHeader(key)} {getSortIcon(key)}
|
{formatHeader(key)} {getSortIcon(key)}
|
||||||
@ -140,7 +141,7 @@ export default function LeaveApplicationsTable({ records }: LeaveApplicationsTab
|
|||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-text-primary">{record.id}</td>
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-text-primary">{record.id}</td>
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">{record.employeeId}</td>
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">{record.employeeId}</td>
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">{record.employeeName}</td>
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">{record.employeeName}</td>
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">{record.designation}</td>
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">{record.jobRole}</td> {/* Changed */}
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">{record.department}</td>
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">{record.department}</td>
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">{record.managerName}</td>
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">{record.managerName}</td>
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">{record.leaveType}</td>
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">{record.leaveType}</td>
|
||||||
@ -1,9 +1,9 @@
|
|||||||
import { useState, useMemo } from 'react';
|
import { useState, useMemo } from 'react';
|
||||||
import { ArrowUpDown, ArrowUp, ArrowDown, Calendar, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Eye, Ban } from 'lucide-react';
|
import { ArrowUpDown, ArrowUp, ArrowDown, Calendar, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Eye, Ban } from 'lucide-react';
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import type { LeaveHistoryRecord, LeaveSortKey } from '../../types/leave';
|
import type { LeaveHistoryRecord, LeaveSortKey } from '../../../types/leave';
|
||||||
import ViewLeaveModal from './ViewLeaveModal';
|
import ViewLeaveModal from '../modal/ViewLeaveModal';
|
||||||
import WithdrawLeaveModal from './WithdrawLeaveModal';
|
import WithdrawLeaveModal from '../modal/WithdrawLeaveModal';
|
||||||
|
|
||||||
interface LeaveHistoryTableProps {
|
interface LeaveHistoryTableProps {
|
||||||
records: LeaveHistoryRecord[];
|
records: LeaveHistoryRecord[];
|
||||||
@ -40,17 +40,34 @@ export default function LeaveHistoryTable({ records }: LeaveHistoryTableProps) {
|
|||||||
|
|
||||||
const filteredData = useMemo(() => {
|
const filteredData = useMemo(() => {
|
||||||
return combinedRecords.filter((record) => {
|
return combinedRecords.filter((record) => {
|
||||||
const isAfterFrom = fromDate ? record.applicationDate >= fromDate : true;
|
// Filter based on the actual Leave Dates (fromDate and toDate)
|
||||||
const isBeforeTo = toDate ? record.applicationDate <= toDate : true;
|
// If a filter date is selected, check if the leave period overlaps with the selected range
|
||||||
return isAfterFrom && isBeforeTo;
|
const matchesFrom = fromDate ? record.toDate >= fromDate : true;
|
||||||
|
const matchesTo = toDate ? record.fromDate <= toDate : true;
|
||||||
|
|
||||||
|
return matchesFrom && matchesTo;
|
||||||
});
|
});
|
||||||
}, [combinedRecords, fromDate, toDate]);
|
}, [combinedRecords, fromDate, toDate]);
|
||||||
|
|
||||||
const sortedData = useMemo(() => {
|
const sortedData = useMemo(() => {
|
||||||
const sortableData = [...filteredData];
|
const sortableData = [...filteredData];
|
||||||
|
// Handle sorting for dates properly
|
||||||
sortableData.sort((a, b) => {
|
sortableData.sort((a, b) => {
|
||||||
if (a[sortConfig.key] < b[sortConfig.key]) return sortConfig.direction === 'ascending' ? -1 : 1;
|
const valA = a[sortConfig.key];
|
||||||
if (a[sortConfig.key] > b[sortConfig.key]) return sortConfig.direction === 'ascending' ? 1 : -1;
|
const valB = b[sortConfig.key];
|
||||||
|
|
||||||
|
// If sorting by dates, convert to Date objects for accurate comparison
|
||||||
|
if (['applicationDate', 'fromDate', 'toDate'].includes(sortConfig.key)) {
|
||||||
|
const dateA = new Date(valA + 'T00:00:00').getTime();
|
||||||
|
const dateB = new Date(valB + 'T00:00:00').getTime();
|
||||||
|
if (dateA < dateB) return sortConfig.direction === 'ascending' ? -1 : 1;
|
||||||
|
if (dateA > dateB) return sortConfig.direction === 'ascending' ? 1 : -1;
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default string/number comparison
|
||||||
|
if (valA < valB) return sortConfig.direction === 'ascending' ? -1 : 1;
|
||||||
|
if (valA > valB) return sortConfig.direction === 'ascending' ? 1 : -1;
|
||||||
return 0;
|
return 0;
|
||||||
});
|
});
|
||||||
return sortableData;
|
return sortableData;
|
||||||
@ -122,12 +139,12 @@ export default function LeaveHistoryTable({ records }: LeaveHistoryTableProps) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const getStatusClass = (status: string) => {
|
const getStatusClass = (status: string) => {
|
||||||
switch (status) {
|
const normalizedStatus = status.toUpperCase();
|
||||||
case 'Approved': return 'bg-present-100 text-present-700';
|
if (normalizedStatus.includes('APPROVED')) return 'bg-present-100 text-present-700';
|
||||||
case 'Pending': return 'bg-late-100 text-late-700';
|
if (normalizedStatus.includes('PENDING')) return 'bg-late-100 text-late-700';
|
||||||
case 'Withdrawn': return 'bg-absent-100 text-absent-700';
|
if (normalizedStatus.includes('REJECTED')) return 'bg-absent-100 text-absent-700';
|
||||||
default: return 'bg-app-muted text-text-secondary';
|
if (normalizedStatus.includes('WITHDRAWN') || normalizedStatus.includes('CANCELLED')) return 'bg-app-muted text-text-secondary';
|
||||||
}
|
return 'bg-app-muted text-text-secondary';
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -178,7 +195,7 @@ export default function LeaveHistoryTable({ records }: LeaveHistoryTableProps) {
|
|||||||
<button onClick={() => setViewRecord(record)} className="text-primary hover:text-primary-hover flex items-center">
|
<button onClick={() => setViewRecord(record)} className="text-primary hover:text-primary-hover flex items-center">
|
||||||
<Eye size={16} className="mr-1" /> View
|
<Eye size={16} className="mr-1" /> View
|
||||||
</button>
|
</button>
|
||||||
{record.status === 'Pending' && (
|
{record.status.toUpperCase() === 'PENDING' && (
|
||||||
<button onClick={() => setWithdrawRecord(record)} className="text-absent-500 hover:text-absent-700 flex items-center">
|
<button onClick={() => setWithdrawRecord(record)} className="text-absent-500 hover:text-absent-700 flex items-center">
|
||||||
<Ban size={16} className="mr-1" /> Withdraw
|
<Ban size={16} className="mr-1" /> Withdraw
|
||||||
</button>
|
</button>
|
||||||
@ -1,4 +1,4 @@
|
|||||||
import type { LeaveSummary } from '../../types/leave';
|
import type { LeaveSummary } from '../../../types/leave';
|
||||||
|
|
||||||
interface LeaveSummaryTableProps {
|
interface LeaveSummaryTableProps {
|
||||||
data: LeaveSummary[];
|
data: LeaveSummary[];
|
||||||
71
src/features/leave/pages/BalanceReport.tsx
Normal file
71
src/features/leave/pages/BalanceReport.tsx
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { FileText } from 'lucide-react';
|
||||||
|
import Loader from '../../../components/ui/Loader';
|
||||||
|
import ErrorState from '../../../components/ui/ErrorState';
|
||||||
|
import { useLeaveBalance } from '../api/useLeaveData';
|
||||||
|
import BalanceFilters, { type BalanceFilterValues } from '../components/leave/balance/BalanceFilters';
|
||||||
|
import BalanceTable from '../components/leave/balance/BalanceTable';
|
||||||
|
import { useCompanies } from '../../masterData/api/useCompanyData';
|
||||||
|
|
||||||
|
|
||||||
|
export default function BalanceReport() {
|
||||||
|
const today = new Date();
|
||||||
|
const [filters, setFilters] = useState<BalanceFilterValues>({
|
||||||
|
companyId: '1', // Default to company 1
|
||||||
|
month: today.getMonth() + 1,
|
||||||
|
year: today.getFullYear(),
|
||||||
|
});
|
||||||
|
|
||||||
|
const [isSearched, setIsSearched] = useState(false);
|
||||||
|
|
||||||
|
// Fetch companies for the dropdown
|
||||||
|
const { data: companiesData, isLoading: compLoading, isError: compError } = useCompanies();
|
||||||
|
const companies = companiesData?.filter(c => c.status === 'Active') || [];
|
||||||
|
|
||||||
|
// Fetch data from backend using month, year, and company_id.
|
||||||
|
// It only triggers when isSearched is true.
|
||||||
|
const { data: balanceData, isLoading: balanceLoading, isError: balanceError } = useLeaveBalance(
|
||||||
|
{ month: filters.month, year: filters.year, companyId: Number(filters.companyId) },
|
||||||
|
isSearched
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleSearch = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!filters.companyId) {
|
||||||
|
alert("Please select a company");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setIsSearched(true); // Triggers the fetch
|
||||||
|
};
|
||||||
|
|
||||||
|
if (compLoading || balanceLoading) return <Loader message="Loading Leave Balance data..." />;
|
||||||
|
if (compError || balanceError) return <ErrorState message="Failed to load Leave Balance data." />;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="bg-app-card p-6 rounded-lg shadow-sm flex items-center space-x-3">
|
||||||
|
<div className="p-3 bg-primary/10 rounded-full">
|
||||||
|
<FileText className="text-primary" size={28} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="text-xl font-bold text-text-primary">Leave Balance Report</h2>
|
||||||
|
<p className="text-sm text-text-muted">Filter by company and month to view leave balances.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<BalanceFilters
|
||||||
|
filters={filters}
|
||||||
|
companies={companies}
|
||||||
|
onFilterChange={setFilters}
|
||||||
|
onSearch={handleSearch}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<BalanceTable
|
||||||
|
records={balanceData || []}
|
||||||
|
isSearched={isSearched}
|
||||||
|
month={filters.month}
|
||||||
|
year={filters.year}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,7 +1,7 @@
|
|||||||
import Loader from '../../../../components/ui/Loader';
|
import Loader from '../../../components/ui/Loader';
|
||||||
import ErrorState from '../../../../components/ui/ErrorState';
|
import ErrorState from '../../../components/ui/ErrorState';
|
||||||
import LeaveApplicationsTable from '../../components/leave/LeaveApplicationsTable';
|
import LeaveApplicationsTable from '../components/leave/table/LeaveApplicationsTable';
|
||||||
import { useLeaveApplications } from '../../api/useLeaveData';
|
import { useLeaveApplications } from '../api/useLeaveData';
|
||||||
|
|
||||||
export default function LeaveApplications() {
|
export default function LeaveApplications() {
|
||||||
const { data: records, isLoading, isError } = useLeaveApplications();
|
const { data: records, isLoading, isError } = useLeaveApplications();
|
||||||
@ -1,11 +1,13 @@
|
|||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import Loader from '../../../../components/ui/Loader';
|
import Loader from '../../../components/ui/Loader';
|
||||||
import ErrorState from '../../../../components/ui/ErrorState';
|
import ErrorState from '../../../components/ui/ErrorState';
|
||||||
import ApprovalTable from '../../components/approval/ApprovalTable';
|
import ApprovalTable from '../components/approval/ApprovalTable';
|
||||||
import { useManagerApprovals, useUpdateLeaveApproval } from '../../api/useLeaveData';
|
import { usePendingApprovals, useUpdateLeaveApproval } from '../api/useLeaveData';
|
||||||
|
|
||||||
export default function ManagerApproval() {
|
export default function MyApprovals() {
|
||||||
const { data: approvals, isLoading, isError } = useManagerApprovals();
|
// This hook automatically fetches the correct pending leaves
|
||||||
|
// based on the logged-in user's role via the Mock SSO headers.
|
||||||
|
const { data: approvals, isLoading, isError } = usePendingApprovals();
|
||||||
const { mutate } = useUpdateLeaveApproval();
|
const { mutate } = useUpdateLeaveApproval();
|
||||||
|
|
||||||
const handleAction = (id: string, status: 'Approved' | 'Rejected') => {
|
const handleAction = (id: string, status: 'Approved' | 'Rejected') => {
|
||||||
@ -1,11 +1,13 @@
|
|||||||
import Loader from '../../../../components/ui/Loader';
|
// src/features/leave/pages/leave/MyLeave.tsx
|
||||||
import ErrorState from '../../../../components/ui/ErrorState';
|
import Loader from '../../../components/ui/Loader';
|
||||||
import LeaveSummaryTable from '../../components/leave/LeaveSummaryTable';
|
import ErrorState from '../../../components/ui/ErrorState';
|
||||||
import ApplyLeaveForm from '../../components/leave/ApplyLeaveForm';
|
import LeaveSummaryTable from '../components/leave/table/LeaveSummaryTable';
|
||||||
import LeaveHistoryTable from '../../components/leave/LeaveHistoryTable';
|
import ApplyLeaveForm from '../components/leave/ApplyLeaveForm';
|
||||||
import { useLeaveSummary, useLeaveHistory } from '../../api/useLeaveData';
|
import LeaveHistoryTable from '../components/leave/table/LeaveHistoryTable';
|
||||||
|
import { useLeaveSummary, useLeaveHistory } from '../api/useLeaveData';
|
||||||
|
|
||||||
export default function EmployeeLeave() {
|
export default function MyLeave() {
|
||||||
|
// The hooks automatically use the Mock SSO headers injected by the Axios interceptor!
|
||||||
const { data: summaryData, isLoading: summaryLoading, isError: summaryError } = useLeaveSummary();
|
const { data: summaryData, isLoading: summaryLoading, isError: summaryError } = useLeaveSummary();
|
||||||
const { data: historyData, isLoading: historyLoading, isError: historyError } = useLeaveHistory();
|
const { data: historyData, isLoading: historyLoading, isError: historyError } = useLeaveHistory();
|
||||||
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
import { toast } from 'sonner';
|
|
||||||
import Loader from '../../../../components/ui/Loader';
|
|
||||||
import ErrorState from '../../../../components/ui/ErrorState';
|
|
||||||
import ApprovalTable from '../../components/approval/ApprovalTable';
|
|
||||||
import { useDirectorApprovals, useUpdateLeaveApproval } from '../../api/useLeaveData';
|
|
||||||
|
|
||||||
export default function DirectorApproval() {
|
|
||||||
const { data: approvals, isLoading, isError } = useDirectorApprovals();
|
|
||||||
const { mutate } = useUpdateLeaveApproval();
|
|
||||||
|
|
||||||
const handleAction = (id: string, status: 'Approved' | 'Rejected') => {
|
|
||||||
mutate({ id, status }, {
|
|
||||||
onSuccess: () => {
|
|
||||||
toast.success(`Leave request ${status.toLowerCase()} successfully.`);
|
|
||||||
},
|
|
||||||
onError: () => {
|
|
||||||
toast.error("Failed to update leave status. Please try again.");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isLoading) return <Loader message="Loading HR Manager leave requests..." />;
|
|
||||||
if (isError) return <ErrorState message="Failed to load leave requests." />;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{approvals && <ApprovalTable records={approvals} onAction={handleAction} />}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
import { toast } from 'sonner';
|
|
||||||
import Loader from '../../../../components/ui/Loader';
|
|
||||||
import ErrorState from '../../../../components/ui/ErrorState';
|
|
||||||
import ApprovalTable from '../../components/approval/ApprovalTable';
|
|
||||||
import { useHRManagerApprovals, useUpdateLeaveApproval } from '../../api/useLeaveData';
|
|
||||||
|
|
||||||
export default function HRManagerApproval() {
|
|
||||||
const { data: approvals, isLoading, isError } = useHRManagerApprovals();
|
|
||||||
const { mutate } = useUpdateLeaveApproval();
|
|
||||||
|
|
||||||
const handleAction = (id: string, status: 'Approved' | 'Rejected') => {
|
|
||||||
mutate({ id, status }, {
|
|
||||||
onSuccess: () => {
|
|
||||||
toast.success(`Leave request ${status.toLowerCase()} successfully.`);
|
|
||||||
},
|
|
||||||
onError: () => {
|
|
||||||
toast.error("Failed to update leave status. Please try again.");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isLoading) return <Loader message="Loading manager leave requests..." />;
|
|
||||||
if (isError) return <ErrorState message="Failed to load leave requests." />;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{approvals && <ApprovalTable records={approvals} onAction={handleAction} />}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,72 +0,0 @@
|
|||||||
import { useState } from 'react';
|
|
||||||
import { FileText } from 'lucide-react';
|
|
||||||
import Loader from '../../../../components/ui/Loader';
|
|
||||||
import ErrorState from '../../../../components/ui/ErrorState';
|
|
||||||
import { useLeaveBalance } from '../../api/useLeaveData';
|
|
||||||
import type { LeaveBalanceRecord } from '../../types/leave';
|
|
||||||
import BalanceFilters, { type BalanceFilterValues } from '../../components/leave/balance/BalanceFilters';
|
|
||||||
import BalanceTable from '../../components/leave/balance/BalanceTable';
|
|
||||||
|
|
||||||
export default function BalanceReport() {
|
|
||||||
const { data: balanceData, isLoading, isError } = useLeaveBalance();
|
|
||||||
|
|
||||||
// Initialize filters with current month and year
|
|
||||||
const today = new Date();
|
|
||||||
const [filters, setFilters] = useState<BalanceFilterValues>({
|
|
||||||
empId: '',
|
|
||||||
empName: '',
|
|
||||||
month: today.getMonth() + 1,
|
|
||||||
year: today.getFullYear(),
|
|
||||||
});
|
|
||||||
|
|
||||||
// Search Trigger State
|
|
||||||
const [isSearched, setIsSearched] = useState(false);
|
|
||||||
const [searchResults, setSearchResults] = useState<LeaveBalanceRecord[]>([]);
|
|
||||||
|
|
||||||
const handleSearch = (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!balanceData) return;
|
|
||||||
|
|
||||||
const results = balanceData.filter(record => {
|
|
||||||
const matchesEmpId = filters.empId ? record.employeeId.toLowerCase().includes(filters.empId.toLowerCase()) : true;
|
|
||||||
const matchesEmpName = filters.empName ? record.employeeName.toLowerCase().includes(filters.empName.toLowerCase()) : true;
|
|
||||||
const matchesMonth = record.month === Number(filters.month);
|
|
||||||
const matchesYear = record.year === Number(filters.year);
|
|
||||||
|
|
||||||
return matchesEmpId && matchesEmpName && matchesMonth && matchesYear;
|
|
||||||
});
|
|
||||||
|
|
||||||
setSearchResults(results);
|
|
||||||
setIsSearched(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isLoading) return <Loader message="Loading Leave Balance data..." />;
|
|
||||||
if (isError) return <ErrorState message="Failed to load Leave Balance data." />;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-6">
|
|
||||||
<div className="bg-app-card p-6 rounded-lg shadow-sm flex items-center space-x-3">
|
|
||||||
<div className="p-3 bg-primary/10 rounded-full">
|
|
||||||
<FileText className="text-primary" size={28} />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h2 className="text-xl font-bold text-text-primary">Leave Balance Report</h2>
|
|
||||||
<p className="text-sm text-text-muted">Filter by employee and month to view leave balances.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<BalanceFilters
|
|
||||||
filters={filters}
|
|
||||||
onFilterChange={setFilters}
|
|
||||||
onSearch={handleSearch}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<BalanceTable
|
|
||||||
records={searchResults}
|
|
||||||
isSearched={isSearched}
|
|
||||||
month={filters.month}
|
|
||||||
year={filters.year}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
import Loader from '../../../../components/ui/Loader';
|
|
||||||
import ErrorState from '../../../../components/ui/ErrorState';
|
|
||||||
import LeaveSummaryTable from '../../components/leave/LeaveSummaryTable';
|
|
||||||
import ApplyLeaveForm from '../../components/leave/ApplyLeaveForm';
|
|
||||||
import LeaveHistoryTable from '../../components/leave/LeaveHistoryTable';
|
|
||||||
import { useLeaveSummary, useLeaveHistory } from '../../api/useLeaveData';
|
|
||||||
|
|
||||||
export default function DirectorLeaveLeave() {
|
|
||||||
const { data: summaryData, isLoading: summaryLoading, isError: summaryError } = useLeaveSummary();
|
|
||||||
const { data: historyData, isLoading: historyLoading, isError: historyError } = useLeaveHistory();
|
|
||||||
|
|
||||||
if (summaryLoading || historyLoading) return <Loader message="Loading leave data..." />;
|
|
||||||
if (summaryError || historyError) return <ErrorState message="Failed to load leave data." />;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col gap-6">
|
|
||||||
<div className="flex flex-col lg:flex-row gap-6">
|
|
||||||
{summaryData && <LeaveSummaryTable data={summaryData} />}
|
|
||||||
{summaryData && <ApplyLeaveForm summaryData={summaryData} />}
|
|
||||||
</div>
|
|
||||||
{historyData && <LeaveHistoryTable records={historyData} />}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
import Loader from '../../../../components/ui/Loader';
|
|
||||||
import ErrorState from '../../../../components/ui/ErrorState';
|
|
||||||
import LeaveSummaryTable from '../../components/leave/LeaveSummaryTable';
|
|
||||||
import ApplyLeaveForm from '../../components/leave/ApplyLeaveForm';
|
|
||||||
import LeaveHistoryTable from '../../components/leave/LeaveHistoryTable';
|
|
||||||
import { useLeaveSummary, useLeaveHistory } from '../../api/useLeaveData';
|
|
||||||
|
|
||||||
export default function HRManagerLeave() {
|
|
||||||
const { data: summaryData, isLoading: summaryLoading, isError: summaryError } = useLeaveSummary();
|
|
||||||
const { data: historyData, isLoading: historyLoading, isError: historyError } = useLeaveHistory();
|
|
||||||
|
|
||||||
if (summaryLoading || historyLoading) return <Loader message="Loading leave data..." />;
|
|
||||||
if (summaryError || historyError) return <ErrorState message="Failed to load leave data." />;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col gap-6">
|
|
||||||
<div className="flex flex-col lg:flex-row gap-6">
|
|
||||||
{summaryData && <LeaveSummaryTable data={summaryData} />}
|
|
||||||
{summaryData && <ApplyLeaveForm summaryData={summaryData} />}
|
|
||||||
</div>
|
|
||||||
{historyData && <LeaveHistoryTable records={historyData} />}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
import Loader from '../../../../components/ui/Loader';
|
|
||||||
import ErrorState from '../../../../components/ui/ErrorState';
|
|
||||||
import LeaveSummaryTable from '../../components/leave/LeaveSummaryTable';
|
|
||||||
import ApplyLeaveForm from '../../components/leave/ApplyLeaveForm';
|
|
||||||
import LeaveHistoryTable from '../../components/leave/LeaveHistoryTable';
|
|
||||||
import { useLeaveSummary, useLeaveHistory } from '../../api/useLeaveData';
|
|
||||||
|
|
||||||
export default function ManagerLeave() {
|
|
||||||
const { data: summaryData, isLoading: summaryLoading, isError: summaryError } = useLeaveSummary();
|
|
||||||
const { data: historyData, isLoading: historyLoading, isError: historyError } = useLeaveHistory();
|
|
||||||
|
|
||||||
if (summaryLoading || historyLoading) return <Loader message="Loading leave data..." />;
|
|
||||||
if (summaryError || historyError) return <ErrorState message="Failed to load leave data." />;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col gap-6">
|
|
||||||
<div className="flex flex-col lg:flex-row gap-6">
|
|
||||||
{summaryData && <LeaveSummaryTable data={summaryData} />}
|
|
||||||
{summaryData && <ApplyLeaveForm summaryData={summaryData} />}
|
|
||||||
</div>
|
|
||||||
{historyData && <LeaveHistoryTable records={historyData} />}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,15 +1,14 @@
|
|||||||
import { useSelector } from 'react-redux';
|
import { useSelector } from 'react-redux';
|
||||||
import type { RootState } from '../../../store/store';
|
import type { RootState } from '../../../store/store';
|
||||||
import ManagerApproval from '../pages/approval/ManagerApproval';
|
import MyApprovals from '../pages/MyApprovals';
|
||||||
import HRManagerApproval from '../pages/approval/HRManagerApproval';
|
|
||||||
import DirectorApproval from '../pages/approval/DirectorApproval';
|
|
||||||
|
|
||||||
export default function ApprovalRouter() {
|
export default function ApprovalRouter() {
|
||||||
const role = useSelector((state: RootState) => state.role.currentRole);
|
const role = useSelector((state: RootState) => state.role.currentRole);
|
||||||
|
|
||||||
if (role === 'manager') return <ManagerApproval />;
|
// Employees do not have approval access, so we block them at the router level.
|
||||||
if (role === 'hrmanager') return <HRManagerApproval />;
|
if (role === 'manager' || role === 'hrmanager' || role === 'director') {
|
||||||
if (role === 'director') return <DirectorApproval />;
|
return <MyApprovals />;
|
||||||
|
}
|
||||||
|
|
||||||
return <div className="bg-app-card p-6 rounded-lg shadow text-absent-500">Access Denied: Managers and HRManagers only.</div>;
|
return <div className="bg-app-card p-6 rounded-lg shadow text-absent-500">Access Denied: Managers, HR Managers, and Directors only.</div>;
|
||||||
}
|
}
|
||||||
@ -1,17 +1,20 @@
|
|||||||
import { useSelector } from 'react-redux';
|
import { useSelector } from 'react-redux';
|
||||||
import type { RootState } from '../../../store/store';
|
import type { RootState } from '../../../store/store';
|
||||||
import EmployeeLeave from '../pages/leave/EmployeeLeave';
|
import MyLeave from '../pages/MyLeave';
|
||||||
import ManagerLeave from '../pages/leave/ManagerLeave';
|
|
||||||
import HRManagerLeave from '../pages/leave/HRManagerLeave';
|
|
||||||
import DirectorLeave from '../pages/leave/DirectorLeave';
|
|
||||||
|
|
||||||
export default function LeaveRouter() {
|
export default function LeaveRouter() {
|
||||||
const role = useSelector((state: RootState) => state.role.currentRole);
|
const role = useSelector((state: RootState) => state.role.currentRole);
|
||||||
|
|
||||||
|
// The Leave page layout is identical for all roles.
|
||||||
|
// The backend LMS service automatically handles role-based logic (like approval chains)
|
||||||
|
// based on the X-Mock-User-Role header sent from Redux.
|
||||||
switch (role) {
|
switch (role) {
|
||||||
case 'employee': return <EmployeeLeave />;
|
case 'employee':
|
||||||
case 'manager': return <ManagerLeave />;
|
case 'manager':
|
||||||
case 'hrmanager': return <HRManagerLeave />;
|
case 'hrmanager':
|
||||||
case 'director': return <DirectorLeave />;
|
case 'director':
|
||||||
default: return <div>Unauthorized</div>;
|
return <MyLeave />;
|
||||||
|
default:
|
||||||
|
return <div>Unauthorized</div>;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,6 +1,6 @@
|
|||||||
import { Routes, Route, Navigate } from 'react-router-dom';
|
import { Routes, Route, Navigate } from 'react-router-dom';
|
||||||
import LeaveApplications from '../pages/leave/LeaveApplications';
|
import LeaveApplications from '../pages/LeaveApplications';
|
||||||
import BalanceReport from '../pages/leave/BalanceReport';
|
import BalanceReport from '../pages/BalanceReport';
|
||||||
|
|
||||||
export default function LeaveSummaryRouter() {
|
export default function LeaveSummaryRouter() {
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
export interface LeaveSummary {
|
export interface LeaveSummary {
|
||||||
|
leaveTypeId: number;
|
||||||
leaveType: string;
|
leaveType: string;
|
||||||
credited: number;
|
credited: number;
|
||||||
utilized: number;
|
utilized: number;
|
||||||
@ -9,6 +10,7 @@ export interface LeaveSummary {
|
|||||||
export type DayMode = 'Full Day' | 'First Half' | 'Second Half';
|
export type DayMode = 'Full Day' | 'First Half' | 'Second Half';
|
||||||
|
|
||||||
export interface LeaveRequestPayload {
|
export interface LeaveRequestPayload {
|
||||||
|
leaveTypeId: number;
|
||||||
leaveType: string;
|
leaveType: string;
|
||||||
fromDate: string;
|
fromDate: string;
|
||||||
fromDayMode: DayMode;
|
fromDayMode: DayMode;
|
||||||
@ -19,6 +21,7 @@ export interface LeaveRequestPayload {
|
|||||||
reason: string;
|
reason: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export type LeaveStatus = 'Approved' | 'Pending' | 'Withdrawn';
|
export type LeaveStatus = 'Approved' | 'Pending' | 'Withdrawn';
|
||||||
|
|
||||||
export interface LeaveHistoryRecord {
|
export interface LeaveHistoryRecord {
|
||||||
@ -53,21 +56,22 @@ export interface LeaveApplicationSummary {
|
|||||||
id: string;
|
id: string;
|
||||||
employeeId: string;
|
employeeId: string;
|
||||||
employeeName: string;
|
employeeName: string;
|
||||||
designation: string;
|
jobRole: string; // Changed from designation
|
||||||
department: string;
|
department: string;
|
||||||
managerName: string;
|
managerName: string;
|
||||||
leaveType: string;
|
leaveType: string;
|
||||||
|
fromDate: string;
|
||||||
|
toDate: string;
|
||||||
leaveDays: number;
|
leaveDays: number;
|
||||||
status: 'Approved' | 'Pending' | 'Rejected' | 'Withdrawn';
|
status: string;
|
||||||
|
reason: string; // Added reason
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface LeaveBalanceRecord {
|
export interface LeaveBalanceRecord {
|
||||||
employeeId: string;
|
employeeId: string;
|
||||||
employeeName: string;
|
employeeName: string;
|
||||||
month: number;
|
casualOpening: number;
|
||||||
year: number;
|
casualClosing: number;
|
||||||
openingBalance: number;
|
optionalOpening: number;
|
||||||
closingBalance: number;
|
optionalClosing: number;
|
||||||
casualLeave: number;
|
|
||||||
optionalLeave: number;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,118 +0,0 @@
|
|||||||
import { useState, useMemo } from 'react';
|
|
||||||
import { ShieldUser, Plus } from 'lucide-react';
|
|
||||||
import { toast } from 'sonner';
|
|
||||||
import Loader from '../../../components/ui/Loader';
|
|
||||||
import ErrorState from '../../../components/ui/ErrorState';
|
|
||||||
import ConfirmationModal from '../../../components/ui/ConfirmationModal';
|
|
||||||
import HRManagerTable from '../components/manage-hrmanager/hrmanagerTable';
|
|
||||||
import EmployeeFormModal from '../components/employee/EmployeeFormModal';
|
|
||||||
import { useHRManagerEmployees, type HRManagerEmployee } from '../api/useHRManagerData';
|
|
||||||
import { useCompanies } from '../api/useCompanyData';
|
|
||||||
import { useBranches } from '../api/useBranchData';
|
|
||||||
import { useDepartments } from '../api/useDepartmentData';
|
|
||||||
import { useJobRoles } from '../api/useJobRoleData';
|
|
||||||
|
|
||||||
export default function ManageHRManagers() {
|
|
||||||
const { data: apiRecords, isLoading: empLoading, isError: empError } = useHRManagerEmployees();
|
|
||||||
const { data: companies, isLoading: compLoading, isError: compError } = useCompanies();
|
|
||||||
const { data: branches, isLoading: branchLoading, isError: branchError } = useBranches();
|
|
||||||
const { data: departments, isLoading: depLoading, isError: depError } = useDepartments();
|
|
||||||
const { data: designations, isLoading: dsgLoading, isError: dsgError } = useJobRoles();
|
|
||||||
|
|
||||||
const [localRecords, setLocalRecords] = useState<HRManagerEmployee[]>([]);
|
|
||||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
||||||
const [deleteId, setDeleteId] = useState<string | null>(null);
|
|
||||||
|
|
||||||
useMemo(() => {
|
|
||||||
// eslint-disable-next-line react-hooks/set-state-in-render
|
|
||||||
if (apiRecords) setLocalRecords(apiRecords);
|
|
||||||
}, [apiRecords]);
|
|
||||||
|
|
||||||
const handleToggleHRManager = (id: string) => {
|
|
||||||
setLocalRecords(prev => prev.map(e => e.id === id ? { ...e, isHRManager: !e.isHRManager } : e));
|
|
||||||
const emp = localRecords.find(e => e.id === id);
|
|
||||||
if (emp) {
|
|
||||||
toast.success(`${emp.name} is ${emp.isHRManager ? 'no longer an HRManager' : 'now an HRManager'}.`);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDeleteClick = (id: string) => {
|
|
||||||
setDeleteId(id);
|
|
||||||
};
|
|
||||||
|
|
||||||
const confirmDelete = () => {
|
|
||||||
if (deleteId) {
|
|
||||||
setLocalRecords(prev => prev.filter(e => e.id !== deleteId));
|
|
||||||
toast.success("Employee deleted successfully.");
|
|
||||||
setDeleteId(null);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleAddClick = () => {
|
|
||||||
setIsModalOpen(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSave = (data: Omit<HRManagerEmployee, 'id' | 'isHRManager'>) => {
|
|
||||||
const newId = `EMP${String(localRecords.length + 1).padStart(3, '0')}`;
|
|
||||||
// New employees are not HRManagers by default
|
|
||||||
setLocalRecords(prev => [...prev, { id: newId, isHRManager: false, ...data }]);
|
|
||||||
toast.success("Employee added successfully.");
|
|
||||||
setIsModalOpen(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const isLoading = empLoading || compLoading || branchLoading || depLoading || dsgLoading;
|
|
||||||
const isError = empError || compError || branchError || depError || dsgError;
|
|
||||||
|
|
||||||
if (isLoading) return <Loader message="Loading HRManagers data..." />;
|
|
||||||
if (isError) return <ErrorState message="Failed to load HRManagers data." />;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-6">
|
|
||||||
<div className="bg-app-card p-6 rounded-lg shadow-sm flex flex-col md:flex-row md:items-center justify-between gap-4">
|
|
||||||
<div className="flex items-center space-x-3">
|
|
||||||
<div className="p-3 bg-primary/10 rounded-full">
|
|
||||||
<ShieldUser className="text-primary" size={28} />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h2 className="text-xl font-bold text-text-primary">Manage HR Managers</h2>
|
|
||||||
<p className="text-sm text-text-muted">Toggle HRManager privileges or remove employees.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={handleAddClick}
|
|
||||||
className="flex items-center justify-center px-4 py-2 bg-action text-white rounded-lg hover:bg-action-hover transition-colors font-medium"
|
|
||||||
>
|
|
||||||
<Plus size={18} className="mr-2" />
|
|
||||||
Add HR Manager
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<HRManagerTable
|
|
||||||
records={localRecords}
|
|
||||||
onToggleHRManager={handleToggleHRManager}
|
|
||||||
onDelete={handleDeleteClick}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{isModalOpen && (
|
|
||||||
<EmployeeFormModal
|
|
||||||
employee={null}
|
|
||||||
companies={companies || []}
|
|
||||||
branches={branches || []}
|
|
||||||
departments={departments || []}
|
|
||||||
designations={designations || []}
|
|
||||||
onClose={() => setIsModalOpen(false)}
|
|
||||||
onSave={handleSave}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{deleteId && (
|
|
||||||
<ConfirmationModal
|
|
||||||
title="Delete Employee?"
|
|
||||||
message="Are you sure you want to delete this employee? This action cannot be undone."
|
|
||||||
onConfirm={confirmDelete}
|
|
||||||
onClose={() => setDeleteId(null)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
import { useSelector } from 'react-redux';
|
|
||||||
import type { RootState } from '../../../store/store';
|
|
||||||
import ManageHRManagers from '../pages/ManageHRManager';
|
|
||||||
|
|
||||||
export default function ManageHRManagersRouter() {
|
|
||||||
const role = useSelector((state: RootState) => state.role.currentRole);
|
|
||||||
|
|
||||||
if (role === 'director') {
|
|
||||||
return <ManageHRManagers />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return <div className="bg-app-card p-6 rounded-lg shadow text-absent-500">Access Denied: Directors only.</div>;
|
|
||||||
}
|
|
||||||
@ -25,10 +25,10 @@ export interface RoleState {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const initialState: RoleState = {
|
const initialState: RoleState = {
|
||||||
currentRole: 'hrmanager', // Default to hrmanager
|
currentRole: 'employee',
|
||||||
mockUserId: MOCK_USERS.hrmanager.userId,
|
mockUserId: MOCK_USERS.employee.userId,
|
||||||
mockUserRole: MOCK_ROLE_MAP.hrmanager,
|
mockUserRole: MOCK_ROLE_MAP.employee,
|
||||||
mockBranches: MOCK_USERS.hrmanager.branches,
|
mockBranches: MOCK_USERS.employee.branches,
|
||||||
};
|
};
|
||||||
|
|
||||||
const roleSlice = createSlice({
|
const roleSlice = createSlice({
|
||||||
|
|||||||
@ -7,7 +7,7 @@ export default defineConfig({
|
|||||||
server: {
|
server: {
|
||||||
proxy: {
|
proxy: {
|
||||||
'/api': {
|
'/api': {
|
||||||
target: 'http://192.168.60.237:8000',
|
target: 'http://192.168.60.238:8000',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user