import { Head, router } from '@inertiajs/react'; import { useState } from 'react'; import { ConfirmDialog } from '@/components/confirm-dialog'; import { DataTable } from '@/components/data-table'; import { Button } from '@/components/ui/button'; import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { index as payrollPeriodsIndex } from '@/routes/admin/finance/payroll-periods'; import { show as payrollPeriodShow } from '@/routes/admin/finance/payroll-periods'; import { close, reopen } from '@/routes/admin/finance/payroll-periods'; import { createPayrollPeriodColumns } from './columns'; import type { PayrollPeriod } from './columns'; type Props = { payrollPeriods: PayrollPeriod[]; }; const MONTH_NAMES = [ '', 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember', ]; export default function PayrollPeriodIndex({ payrollPeriods }: Props) { const [closing, setClosing] = useState(null); const [reopening, setReopening] = useState(null); 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), }); return ( <>

Gaji

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

); } PayrollPeriodIndex.layout = { breadcrumbs: [ { title: 'Keuangan', href: payrollPeriodsIndex(), }, { title: 'Gaji', href: payrollPeriodsIndex(), }, ], };