Files
road-monitoring-ui/src/app/(modules)/roles/components/RoleTable.tsx

85 lines
2.0 KiB
TypeScript

'use client';
import type { ColumnDef, SortingState } from '@tanstack/react-table';
import type { ReactNode } from 'react';
import { Edit, ShieldCheck, ShieldX } from 'lucide-react';
import { DataTable } from '@/components/data-table';
import { PERMISSIONS } from '@/constants/permissions';
import type { Role } from '@/types';
interface RoleTableProps {
columns: ColumnDef<Role>[];
roles: Role[];
isLoading: boolean;
toolbar: ReactNode;
skip: number;
limit: number;
total: number;
sorting: SortingState;
onPageChange: (skip: number) => void;
onLimitChange: (limit: number) => void;
onSortingChange: (sorting: SortingState) => void;
onEdit: (role: Role) => void;
onToggleStatus: (role: Role) => void;
isStatusPending: boolean;
}
export function RoleTable({
columns,
roles,
isLoading,
toolbar,
skip,
limit,
total,
sorting,
onPageChange,
onLimitChange,
onSortingChange,
onEdit,
onToggleStatus,
isStatusPending,
}: RoleTableProps) {
return (
<DataTable
title="Roles"
columns={columns}
data={roles}
isLoading={isLoading}
toolbar={toolbar}
emptyTitle="No roles found."
actions={[
{
label: 'Edit',
icon: <Edit className="size-4" />,
permission: PERMISSIONS.ROLE.UPDATE,
onClick: onEdit,
},
{
label: (role) => (role.effective_status ? 'Deactivate' : 'Activate'),
icon: (role) =>
role.effective_status ? (
<ShieldX className="size-4 text-destructive" />
) : (
<ShieldCheck className="size-4 text-emerald-600" />
),
permission: PERMISSIONS.ROLE.DELETE,
disabled: () => isStatusPending,
onClick: onToggleStatus,
},
]}
pagination={{
skip,
limit,
totalItems: total,
onPageChange,
onLimitChange,
}}
sorting={sorting}
onSortingChange={onSortingChange}
actionsSticky
/>
);
}