import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout"; import { Head, router } from "@inertiajs/react"; import { useMemo, useState } from "react"; import { CalendarIcon, FunnelIcon, ChevronLeftIcon, ChevronRightIcon, BuildingOfficeIcon, UserIcon, CheckCircleIcon, XCircleIcon, InformationCircleIcon } from '@heroicons/react/24/solid'; const statusLabelMap = { hadir: "Hadir", izin: "Izin", sakit: "Sakit", cuti: "Cuti", alpa: "Alpa", }; const statusCellClassMap = { hadir: "bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-300", izin: "bg-yellow-100 text-yellow-700 dark:bg-yellow-500/20 dark:text-yellow-300", sakit: "bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300", cuti: "bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300", alpa: "bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-300", none: "bg-gray-100 text-gray-500 dark:bg-gray-700/40 dark:text-gray-400", }; const statusShortMap = { hadir: "H", izin: "I", sakit: "S", cuti: "C", alpa: "A", none: "-", }; export default function Index({ rows = [], filters, bulanList = [], tahunList = [], isGlobal, kampusList = [], calendar, auth }) { const [kampusId, setKampusId] = useState(filters?.kampus_id || ""); const [bulan, setBulan] = useState(filters?.bulan || ""); const [tahun, setTahun] = useState(filters?.tahun || ""); const days = calendar?.days || []; const selectedMonthLabel = useMemo(() => { const hit = bulanList.find((b) => String(b.id) === String(bulan)); return hit?.nama || "Bulan"; }, [bulanList, bulan]); const selectedMonthYear = useMemo(() => { return `${tahun}-${String(bulan).padStart(2, "0")}`; }, [tahun, bulan]); const applyFilter = () => { router.get( route("keuangan.hris.rekap-absensi.index"), { kampus_id: kampusId, bulan, tahun }, { preserveState: true, replace: true }, ); }; const navigateMonth = (step) => { const currentMonth = Number.parseInt(String(bulan), 10) || 1; const currentYear = Number.parseInt(String(tahun), 10) || new Date().getFullYear(); const baseDate = new Date(currentYear, currentMonth - 1, 1); baseDate.setMonth(baseDate.getMonth() + step); const nextMonth = String(baseDate.getMonth() + 1).padStart(2, "0"); const nextYear = String(baseDate.getFullYear()); setBulan(nextMonth); setTahun(nextYear); router.get( route("keuangan.hris.rekap-absensi.index"), { kampus_id: kampusId, bulan: nextMonth, tahun: nextYear }, { preserveState: true, replace: true }, ); }; const handleMonthPickerChange = (e) => { const value = e.target.value; if (!value) return; const [nextYear, nextMonth] = value.split("-"); if (!nextYear || !nextMonth) return; setBulan(nextMonth); setTahun(nextYear); router.get( route("keuangan.hris.rekap-absensi.index"), { kampus_id: kampusId, bulan: nextMonth, tahun: nextYear }, { preserveState: true, replace: true }, ); }; const getStatusKey = (row, date) => row?.attendance_by_date?.[date] || "none"; const hasActiveFilters = kampusId; return ( HRIS - Rekap Absensi Karyawan } >
{/* Filter Section */}

Filter Rekap Absensi

{hasActiveFilters && ( Filter Aktif )}
{/* Navigasi Bulan */}
{selectedMonthLabel} {tahun}
{/* Filter dan Picker */}
{isGlobal && ( <> )}
{/* Status Legend */}
Keterangan Status: {Object.keys(statusLabelMap).map((status) => ( {statusShortMap[status]} {statusLabelMap[status]} ))} - Tidak Ada Data
{/* Tabel Rekap */}

Kalender Absensi: {selectedMonthLabel} {tahun}

Data kehadiran karyawan per tanggal

Total Karyawan: {rows.length}
{days.map((day) => ( ))} {rows.map((row) => ( {days.map((day) => { const status = getStatusKey(row, day.date); const short = statusShortMap[status] || statusShortMap.none; const statusClass = statusCellClassMap[status] || statusCellClassMap.none; const label = statusLabelMap[status] || "Tidak Ada Data"; return ( ); })} ))} {rows.length === 0 && ( )}
Karyawan
{day.dow}
{day.day}
 Masuk Tidak Masuk

{row.name}

{row.role || "-"}

{short} {row.hadir_date_count} {row.tidak_masuk_date_count}

Belum ada data rekap absensi

{hasActiveFilters ? "Tidak ada data yang sesuai dengan filter yang dipilih." : "Belum ada data untuk periode ini."}

{/* Footer Info */} {rows.length > 0 && (
Klik pada badge status untuk melihat detail kehadiran karyawan.
)}
); }