import { Form, Head, router } from '@inertiajs/react'; import { Plus } from 'lucide-react'; import { useEffect, useState } from 'react'; import InputError from '@/components/input-error'; import { RupiahInput } from '@/components/rupiah-input'; import { DatePicker } from '@/components/date-picker'; import { Button } from '@/components/ui/button'; import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { destroy, index as employeeAdvanceIndex, store, update, approve, pay } from '@/routes/admin/finance/employee-advances'; import { createEmployeeAdvanceColumns } from './columns'; import type { EmployeeAdvance } from './columns'; import { ConfirmDialog } from '@/components/confirm-dialog'; import { DataTable } from '@/components/data-table'; type Props = { employeeAdvances: EmployeeAdvance[]; }; export default function EmployeeAdvanceIndex({ employeeAdvances }: Props) { const [createOpen, setCreateOpen] = useState(false); const [editing, setEditing] = useState(null); const [deleting, setDeleting] = useState(null); const [approving, setApproving] = useState(null); const [paying, setPaying] = useState(null); const [dueDate, setDueDate] = useState(undefined); const [editingDueDate, setEditingDueDate] = useState(undefined); useEffect(() => { if (editing) { setEditingDueDate(new Date(editing.due_date)); } else { setEditingDueDate(undefined); } }, [editing]); function handleDelete() { if (!deleting) { return; } router.delete(destroy(deleting.id), { onSuccess: () => setDeleting(null), }); } function handleApprove() { if (!approving) { return; } router.post(approve(approving.id), {}, { onSuccess: () => setApproving(null), }); } function handlePay() { if (!paying) { return; } router.post(pay(paying.id), {}, { onSuccess: () => setPaying(null), }); } const columns = createEmployeeAdvanceColumns({ handleEdit: (employeeAdvance) => setEditing(employeeAdvance), handleDeleteClick: (employeeAdvance) => setDeleting(employeeAdvance), handleApprove: (employeeAdvance) => setApproving(employeeAdvance), handlePay: (employeeAdvance) => setPaying(employeeAdvance), }); return ( <>

Kasbon

{ setCreateOpen(open); if (!open) { setDueDate(undefined); } }}>
setCreateOpen(false)}> {({ errors, processing }) => { return ( <> Tambah Kasbon
); }}
{ if (!open) { setEditing(null); setEditingDueDate(undefined); } }} > {editing && (
{ setEditing(null); setEditingDueDate(undefined); }}> {({ errors, processing }) => { return ( <> Edit Kasbon
); }}
)} { if (!open) { setDeleting(null); } }} title="Hapus Kasbon" description={`Apakah Anda yakin ingin menghapus kasbon "${deleting?.description}"? Tindakan ini tidak dapat dibatalkan.`} confirmLabel="Hapus" onConfirm={handleDelete} /> { if (!open) { setApproving(null); } }} title="Setujui Kasbon" description={`Apakah Anda yakin ingin menyetujui kasbon "${approving?.description}"?`} confirmLabel="Setujui" onConfirm={handleApprove} /> { if (!open) { setPaying(null); } }} title="Bayar Kasbon" description={`Apakah Anda yakin ingin membayar kasbon "${paying?.description}" sebesar ${paying?.amount}? Saldo kas akan dikembalikan.`} confirmLabel="Bayar" onConfirm={handlePay} />
); } EmployeeAdvanceIndex.layout = { breadcrumbs: [ { title: 'Keuangan', href: employeeAdvanceIndex(), }, { title: 'Kasbon', href: employeeAdvanceIndex(), }, ], };