import { Head, router } from '@inertiajs/react'; import { Plus } from 'lucide-react'; import { useCallback, useState } from 'react'; import { ConfirmDialog } from '@/components/confirm-dialog'; import { DataTable } from '@/components/data-table'; import type { PaginationState } from '@/components/data-table'; import { Button } from '@/components/ui/button'; import { index as rolesIndex, create as roleCreate, edit as roleEdit, destroy as roleDestroy, } from '@/routes/admin/settings/roles'; import { createRoleColumns } from './columns'; import type { Role } from './columns'; type Props = { roles: { data: Role[]; current_page: number; last_page: number; per_page: number; total: number; }; }; export default function RoleIndex({ roles }: Props) { const [deleting, setDeleting] = useState(null); const [search, setSearch] = useState(''); const pagination: PaginationState = { current_page: roles.current_page, last_page: roles.last_page, per_page: roles.per_page, total: roles.total, }; function handlePageChange(page: number) { router.get( rolesIndex.url(), { page, per_page: pagination.per_page, search, }, { preserveState: true, replace: true }, ); } function handlePerPageChange(perPage: number) { router.get( rolesIndex.url(), { page: 1, per_page: perPage, search, }, { preserveState: true, replace: true }, ); } const handleSearchChange = useCallback( (value: string) => { setSearch(value); router.get( rolesIndex.url(), { page: 1, per_page: pagination.per_page, search: value, }, { preserveState: true, replace: true }, ); }, [pagination.per_page], ); function handleDelete() { if (!deleting) { return; } router.delete(roleDestroy.url(deleting.id), { onSuccess: () => setDeleting(null), }); } const columns = createRoleColumns({ handleEdit: (role) => { window.location.href = roleEdit.url(role.id); }, handleDeleteClick: (role) => setDeleting(role), }); return ( <>

Role & Permission

{ if (!open) { setDeleting(null); } }} title="Hapus Role" description={`Apakah Anda yakin ingin menghapus role "${deleting?.name}"? Semua user dengan role ini akan kehilangan permission terkait.`} confirmLabel="Hapus" onConfirm={handleDelete} />
); }