import { Form, Head, router } from '@inertiajs/react'; import { Plus } from 'lucide-react'; import { useCallback, useState } from 'react'; import { ConfirmDialog } from '@/components/confirm-dialog'; import type { PaginationState, SortState } from '@/components/data-table'; import { DataTable } from '@/components/data-table'; import { FileUpload } from '@/components/file-upload'; import InputError from '@/components/input-error'; import { RupiahInput } from '@/components/rupiah-input'; 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 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 [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 [search, setSearch] = useState(''); const [sort, setSort] = useState({ column: 'created_at', direction: 'desc' }); const pagination: PaginationState = { current_page: expenses.current_page, last_page: expenses.last_page, per_page: expenses.per_page, total: expenses.total, }; function handlePageChange(page: number) { router.get(expenseIndex.url(), { page, per_page: pagination.per_page, search, sort: sort.column, direction: sort.direction, }, { preserveState: true, replace: true }); } function handlePerPageChange(perPage: number) { router.get(expenseIndex.url(), { page: 1, per_page: perPage, search, sort: sort.column, direction: sort.direction, }, { preserveState: true, replace: true }); } const handleSearchChange = useCallback((value: string) => { setSearch(value); router.get(expenseIndex.url(), { page: 1, per_page: pagination.per_page, search: value, sort: sort.column, direction: sort.direction, }, { preserveState: true, replace: true }); }, [pagination.per_page, sort]); function handleSortChange(column: string, direction: 'asc' | 'desc') { setSort({ column, direction }); router.get(expenseIndex.url(), { page: 1, per_page: pagination.per_page, search, sort: column, direction, }, { preserveState: true, replace: true }); } 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), }); return ( <>

Pengeluaran

{ setCreateOpen(open); if (!open) { setCreateReceiptKey(null); setCreateFileMeta(null); } }}>
{ setCreateOpen(false); setCreateReceiptKey(null); setCreateFileMeta(null); }}> {({ errors, processing }) => { return ( <> Tambah Pengeluaran
); }}
{ if (!open) { setEditing(null); setEditReceiptKey(null); setEditFileMeta(null); } }} > {editing && (
{ setEditing(null); setEditReceiptKey(null); setEditFileMeta(null); }}> {({ errors, processing }) => { return ( <> Edit Pengeluaran
); }}
)} { if (!open) { setDeleting(null); } }} title="Hapus Pengeluaran" description={`Apakah Anda yakin ingin menghapus pengeluaran "${deleting?.description}"? Tindakan ini tidak dapat dibatalkan.`} confirmLabel="Hapus" onConfirm={handleDelete} />
); } ExpenseIndex.layout = { breadcrumbs: [ { title: 'Keuangan', href: expenseIndex(), }, { title: 'Pengeluaran', href: expenseIndex(), }, ], };