import { Head, Link, 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 { PageHeader } from '@/components/layout';
import { Button } from '@/components/ui/button';
import { useCan } from '@/hooks/use-can';
import { useServerTable } from '@/hooks/use-server-table';
import {
create as invoiceCreate,
destroy,
index as invoiceIndex,
} from '@/routes/admin/manage/invoices';
import type { Invoice } from './columns';
import { createInvoiceColumns } from './columns';
type Props = {
invoices: {
data: Invoice[];
current_page: number;
last_page: number;
per_page: number;
total: number;
};
};
export default function InvoiceIndex({ invoices }: Props) {
const { can } = useCan();
const [deleting, setDeleting] = useState(null);
const pagination: PaginationState = {
current_page: invoices.current_page,
last_page: invoices.last_page,
per_page: invoices.per_page,
total: invoices.total,
};
const {
search,
handlePageChange,
handlePerPageChange,
handleSearchChange,
} = useServerTable({
route: () => invoiceIndex.url(),
pagination,
});
function handleDelete() {
if (!deleting) {
return;
}
router.delete(destroy(deleting.id), {
onSuccess: () => setDeleting(null),
});
}
const columns = createInvoiceColumns({
handleDeleteClick: (invoice) => setDeleting(invoice),
can,
});
return (
<>
Tambah
) : undefined
}
/>
{
if (!open) {
setDeleting(null);
}
}}
title="Hapus Invoice"
description={(invoice) =>
`Apakah Anda yakin ingin menghapus invoice "${invoice.invoice_number}"? Tindakan ini tidak dapat dibatalkan.`
}
onConfirm={handleDelete}
/>