import { Head, router } from '@inertiajs/react'; import { useState } from 'react'; import type { PaginationState } from '@/components/data-display'; import { DataTable } from '@/components/data-display'; import { DeleteConfirmDialog } from '@/components/dialogs'; import { PageHeader } from '@/components/layout'; import { useCan } from '@/hooks/use-can'; import { useServerTable } from '@/hooks/use-server-table'; import { MONTH_NAMES } from '@/lib/constants'; import { index as payrollPeriodsIndex, show as payrollPeriodShow, close, reopen, } from '@/routes/admin/finance/payroll-periods'; import { createPayrollPeriodColumns } from './columns'; import type { PayrollPeriod } from './columns'; type Props = { payrollPeriods: { data: PayrollPeriod[]; current_page: number; last_page: number; per_page: number; total: number; }; highlight?: number; }; export default function PayrollPeriodIndex({ payrollPeriods, highlight }: Props) { const { can, hasAnyRole } = useCan(); const canViewAll = hasAnyRole(['developer', 'owner', 'direktur', 'admin-toko']); const [closing, setClosing] = useState(null); const [reopening, setReopening] = useState(null); const pagination: PaginationState = { current_page: payrollPeriods.current_page, last_page: payrollPeriods.last_page, per_page: payrollPeriods.per_page, total: payrollPeriods.total, }; const { search, handlePageChange, handlePerPageChange, handleSearchChange, } = useServerTable({ route: () => payrollPeriodsIndex.url(), pagination, }); function handleClose() { if (!closing) { return; } router.post( close(closing.id), {}, { onSuccess: () => setClosing(null), }, ); } function handleReopen() { if (!reopening) { return; } router.post( reopen(reopening.id), {}, { onSuccess: () => setReopening(null), }, ); } const columns = createPayrollPeriodColumns({ showUrl: (id) => payrollPeriodShow(id).url, handleClose: (period) => setClosing(period), handleReopen: (period) => setReopening(period), can, canViewAll, }); return ( <>

Menampilkan periode gaji dari notifikasi.

) } /> { if (!open) { setClosing(null); } }} title="Tutup Periode Gaji" description={(period) => `Apakah Anda yakin ingin menutup periode gaji ${MONTH_NAMES[period.month]} ${period.year}? Semua gaji harus sudah dibayar sebelum periode ditutup.` } confirmLabel="Tutup" onConfirm={handleClose} /> { if (!open) { setReopening(null); } }} title="Buka Periode Gaji" description={(period) => `Apakah Anda yakin ingin membuka kembali periode gaji ${MONTH_NAMES[period.month]} ${period.year}?` } confirmLabel="Buka" onConfirm={handleReopen} />

); }