feat: enhance AttendanceIndex component by adding 'Belum Pulang' badge and improving check-out display logic

This commit is contained in:
Yoga Pangestu 2026-08-15 16:15:40 +07:00
parent 17273c9479
commit bac9f79087
2 changed files with 23 additions and 5 deletions

View File

@ -37,7 +37,7 @@ public function getIndexData(int $year, int $month): array
return [
'attendances' => $this->getByMonth($year, $month, $employeeId),
'leaves' => $this->getLeavesByMonth($year, $month, $employeeId),
'employees' => $isAdmin ? $this->employeeService->getAll() : [],
'employees' => $isAdmin ? $this->getEmployeesWithAttendancePermission() : [],
'todayAttendance' => $isAdmin ? null : $this->getToday(),
'currentYear' => $year,
'currentMonth' => $month,
@ -79,7 +79,7 @@ public function getByMonthData(int $year, int $month): array
return [
'attendances' => $this->getByMonth($year, $month, $employeeId),
'leaves' => $this->getLeavesByMonth($year, $month, $employeeId),
'employees' => $this->employeeService->getAll(),
'employees' => $this->getEmployeesWithAttendancePermission(),
'monthStats' => $this->getMonthStats($year, $month, $employeeId),
];
}
@ -341,4 +341,16 @@ private function formatAttendance(Attendance $attendance): array
return $toArray;
}
private function getEmployeesWithAttendancePermission(): Collection
{
return Employee::with(['user.userProfile', 'user.roles'])
->whereHas('user', fn ($q) => $q->where('is_active', true)
->whereHas('roles', fn ($rq) => $rq->whereHas('permissions', fn ($pq) => $pq->where('name', 'attendances.view'))))
->get()
->map(fn (Employee $employee) => [
'id' => $employee->id,
'name' => $employee->user?->userProfile?->full_name ?? '-',
]);
}
}

View File

@ -452,6 +452,7 @@ export default function AttendanceIndex({
<div className="flex items-center gap-3 border-b px-6 py-2 text-xs text-muted-foreground">
<Badge variant="default" className="text-[10px]">Hadir</Badge>
<Badge variant="destructive" className="text-[10px]">Terlambat</Badge>
<Badge variant="outline" className="text-[10px] border-orange-300 bg-orange-50 text-orange-700">Belum Pulang</Badge>
<Badge className="text-[10px] bg-purple-100 text-purple-700 hover:bg-purple-100">Cuti</Badge>
</div>
)}
@ -608,6 +609,11 @@ export default function AttendanceIndex({
? 'Terlambat'
: 'Hadir'}
</span>
{!att.check_out_at && (
<span className="inline-flex items-center justify-center rounded-full bg-orange-100 px-1.5 py-0.5 text-[10px] font-semibold text-orange-700">
Belum Pulang
</span>
)}
<span className="text-[10px] text-muted-foreground">
Masuk :{' '}
{formatTime(
@ -616,9 +622,9 @@ export default function AttendanceIndex({
</span>
<span className="text-[10px] text-muted-foreground">
Pulang :{' '}
{formatTime(
att.check_out_at,
)}
{att.check_out_at
? formatTime(att.check_out_at)
: '-'}
</span>
{late && (
<span className="text-[10px] text-yellow-600">