dstpabuaran.com/resources/js/pages/admin/roles/index.tsx
Yoga Pangestu 4ac83c8e78 feat: add permission checks for various actions across admin pages
- Integrated permission checks using `can` function in payroll period management to control visibility of adjustment, pay, and cancel actions.
- Updated employee management to conditionally render edit, reset password, and delete actions based on permissions.
- Enhanced leave request management with permission checks for approve, reject, edit, and delete actions.
- Implemented permission checks in cutting management for edit and delete actions.
- Added permission checks for purchase management actions including create, edit, and delete.
- Integrated permission checks in restock management for create, edit, and delete actions.
- Updated transaction management to conditionally render create, edit, and delete actions based on permissions.
- Enhanced category management with permission checks for edit and delete actions.
- Integrated permission checks in customer management for edit and delete actions.
- Updated product management to conditionally render create, edit, and delete actions based on permissions.
- Enhanced raw material management with permission checks for edit and delete actions.
- Integrated permission checks in supplier management for edit and delete actions.
- Updated role management to conditionally render edit and delete actions based on permissions.
2026-08-05 22:52:35 +07:00

118 lines
3.6 KiB
TypeScript

import { Head, Link, router } from '@inertiajs/react';
import { Plus } from 'lucide-react';
import { useState } from 'react';
import type { PaginationState } from '@/components/data-table';
import { DataTable } from '@/components/data-table';
import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
import { PageHeader } from '@/components/page-header';
import { Button } from '@/components/ui/button';
import { useCan } from '@/hooks/use-can';
import { useServerTable } from '@/hooks/use-server-table';
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 { can } = useCan();
const [deleting, setDeleting] = useState<Role | null>(null);
const pagination: PaginationState = {
current_page: roles.current_page,
last_page: roles.last_page,
per_page: roles.per_page,
total: roles.total,
};
const {
search,
handlePageChange,
handlePerPageChange,
handleSearchChange,
} = useServerTable({
route: () => rolesIndex.url(),
pagination,
});
function handleDelete() {
if (!deleting) {
return;
}
router.delete(roleDestroy.url(deleting.id), {
onSuccess: () => setDeleting(null),
});
}
const columns = createRoleColumns({
handleEdit: (role) => {
router.visit(roleEdit.url(role.id));
},
handleDeleteClick: (role) => setDeleting(role),
can,
});
return (
<>
<Head title="Role & Permission" />
<div className="flex h-full flex-1 flex-col gap-6 overflow-x-auto p-4 md:p-6">
<PageHeader
title="Role & Permission"
actions={
can('roles.create') ? (
<Button asChild>
<Link href={roleCreate.url()}>
<Plus className="h-4 w-4" />
Tambah
</Link>
</Button>
) : undefined
}
/>
<DataTable
columns={columns}
data={roles.data}
searchKey="name"
searchPlaceholder="Cari role..."
emptyText="Belum ada data role."
pagination={pagination}
onPageChange={handlePageChange}
onPerPageChange={handlePerPageChange}
onSearchChange={handleSearchChange}
searchValue={search}
/>
<DeleteConfirmDialog
target={deleting}
onOpenChange={(open) => {
if (!open) {
setDeleting(null);
}
}}
title="Hapus Role"
description={(role) =>
`Apakah Anda yakin ingin menghapus role "${role.name}"? Semua user dengan role ini akan kehilangan permission terkait.`
}
onConfirm={handleDelete}
/>
</div>
</>
);
}