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 { FormDialog } from '@/components/dialogs'; import { InputError } from '@/components/ui'; import { PageHeader } from '@/components/layout'; import { PhoneNumberInput } 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 customerIndex, store, update, } from '@/routes/admin/master/customers'; import type { Customer } from './columns'; import { createCustomerColumns } from './columns'; type Props = { customers: { data: Customer[]; current_page: number; last_page: number; per_page: number; total: number; }; }; export default function CustomerIndex({ customers }: Props) { const { can } = useCan(); const [createOpen, setCreateOpen] = useState(false); const [editing, setEditing] = useState(null); const [deleting, setDeleting] = useState(null); const pagination: PaginationState = { current_page: customers.current_page, last_page: customers.last_page, per_page: customers.per_page, total: customers.total, }; const { search, handlePageChange, handlePerPageChange, handleSearchChange, } = useServerTable({ route: () => customerIndex.url(), pagination, }); function handleDelete() { if (!deleting) { return; } router.delete(destroy(deleting.id), { onSuccess: () => setDeleting(null), }); } const columns = createCustomerColumns({ handleEdit: (customer) => setEditing(customer), handleDeleteClick: (customer) => setDeleting(customer), can, }); return ( <>
) : undefined } /> setCreateOpen(false)} > {({ errors }) => (
)} { if (!open) { setEditing(null); } }} title="Edit Customer" action={editing ? update(editing.id) : ''} resetOnSuccess onSuccess={() => setEditing(null)} > {({ errors }) => editing && (
) } { if (!open) { setDeleting(null); } }} title="Hapus Customer" description={(customer) => `Apakah Anda yakin ingin menghapus customer "${customer.name}"? Tindakan ini tidak dapat dibatalkan.` } onConfirm={handleDelete} />
); }