import { Head, router } from '@inertiajs/react'; import { Plus } from 'lucide-react'; import { useState } from 'react'; import type { PaginationState } from '@/components/data-display'; import { DataTable } from '@/components/data-display'; import { DeleteConfirmDialog } from '@/components/dialogs'; import { FileUpload } from '@/components/inputs'; import { FormDialog } from '@/components/dialogs'; import { InputError } from '@/components/ui'; import { PageHeader } from '@/components/layout'; import { RupiahInput } from '@/components/inputs'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { useCan } from '@/hooks/use-can'; import { useServerTable } from '@/hooks/use-server-table'; import { destroy, index as expenseIndex, store, update, } from '@/routes/admin/finance/expenses'; import { createExpenseColumns } from './columns'; import type { Expense } from './columns'; type Props = { expenses: { data: Expense[]; current_page: number; last_page: number; per_page: number; total: number; }; }; export default function ExpenseIndex({ expenses }: Props) { const { can } = useCan(); const [createOpen, setCreateOpen] = useState(false); const [editing, setEditing] = useState(null); const [deleting, setDeleting] = useState(null); const [createReceiptKey, setCreateReceiptKey] = useState( null, ); const [editReceiptKey, setEditReceiptKey] = useState(null); const [createUploading, setCreateUploading] = useState(false); const [editUploading, setEditUploading] = useState(false); const [createFileMeta, setCreateFileMeta] = useState<{ size: number; type: string; } | null>(null); const [editFileMeta, setEditFileMeta] = useState<{ size: number; type: string; } | null>(null); const pagination: PaginationState = { current_page: expenses.current_page, last_page: expenses.last_page, per_page: expenses.per_page, total: expenses.total, }; const { search, handlePageChange, handlePerPageChange, handleSearchChange, } = useServerTable({ route: () => expenseIndex.url(), pagination, }); function handleDelete() { if (!deleting) { return; } router.delete(destroy(deleting.id), { onSuccess: () => setDeleting(null), }); } const columns = createExpenseColumns({ handleEdit: (expense) => { setEditing(expense); setEditReceiptKey(expense.receipt_key ?? null); }, handleDeleteClick: (expense) => setDeleting(expense), can, }); return ( <>
) : undefined } /> { setCreateOpen(open); if (!open) { setCreateReceiptKey(null); setCreateFileMeta(null); } }} title="Tambah Pengeluaran" action={store()} resetOnSuccess onSuccess={() => { setCreateOpen(false); setCreateReceiptKey(null); setCreateFileMeta(null); }} submitDisabled={createUploading} submitLabel={createUploading ? 'Mengunggah...' : 'Simpan'} > {({ errors }) => ( <>
)} { if (!open) { setEditing(null); setEditReceiptKey(null); setEditFileMeta(null); } }} title="Edit Pengeluaran" action={editing ? update(editing.id) : ''} resetOnSuccess onSuccess={() => { setEditing(null); setEditReceiptKey(null); setEditFileMeta(null); }} submitDisabled={editUploading} submitLabel={editUploading ? 'Mengunggah...' : 'Simpan'} > {({ errors }) => editing && ( <>
) } { if (!open) { setDeleting(null); } }} title="Hapus Pengeluaran" description={(expense) => `Apakah Anda yakin ingin menghapus pengeluaran "${expense.description}"? Tindakan ini tidak dapat dibatalkan.` } onConfirm={handleDelete} />
); }