import { Head } from '@inertiajs/react';
import { Trash2, Plus } from 'lucide-react';
import { DataTable } from '@/components/data-table';
import { DeleteConfirmation } from '@/components/modal/delete-confirmation';
import { ImagePreviewDialog } from '@/components/modal/image-preview';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import type { Expense } from '@/types';
import { useExpenseIndex } from './hooks/use-expense-index';
import { getColumns } from './partials/columns';
import { ExpenseFormModal } from './partials/expense-form-modal';
import { usePermission } from '@/hooks/use-permission';
export default function ExpenseIndex({ expenses }: { expenses: Expense[] }) {
const { hasPermission } = usePermission();
const {
selectedProof,
isFormOpen,
selectedExpense,
isDeleteDialogOpen,
isBulkDeleteDialogOpen,
expenseToDelete,
rowsToDelete,
rowSelection,
setRowSelection,
setRowsToDelete,
setIsDeleteDialogOpen,
setIsBulkDeleteDialogOpen,
onAdd,
onEdit,
onDelete,
confirmDelete,
confirmBulkDelete,
closeForm,
onPreviewImage,
closeImagePreview
} = useExpenseIndex();
const columns = getColumns({ onEdit, onDelete, onPreviewImage }).filter(
(col) => col.id !== 'actions' || hasPermission('Edit:Expense') || hasPermission('Delete:Expense')
);
return (
Pengeluaran
{hasPermission('Create:Expense') && (
)}
{
setRowsToDelete(rows);
setIsBulkDeleteDialogOpen(true);
},
icon: Trash2,
variant: 'destructive',
},
]
: []
}
/>
{/* Single Delete Confirmation */}
Tindakan ini tidak dapat dibatalkan. Pengeluaran {expenseToDelete?.name} akan dihapus secara permanen.
}
onDelete={confirmDelete}
/>
{/* Bulk Delete Confirmation */}
Tindakan ini tidak dapat dibatalkan. {rowsToDelete.length} item yang terpilih akan dihapus secara permanen.
}
onDelete={confirmBulkDelete}
/>
);
}
ExpenseIndex.layout = {
breadcrumbs: [
{
title: 'Keuangan',
},
],
};