feat: add permission-gated navigation and admin access

src/app/(modules)/roles/components/RoleColumns.tsx

@@ -6,6 +6,8 @@ import { Edit, RotateCcw } from 'lucide-react';
 
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import { PERMISSIONS } from '@/constants/permissions';
+import { usePermissions } from '@/hooks/usePermissions';
 import type { Role } from '@/types';
 
 interface UseRoleColumnsParams {
@@ -19,8 +21,12 @@ export function useRoleColumns({
   onToggleStatus,
   isStatusPending,
 }: UseRoleColumnsParams): ColumnDef<Role>[] {
-  return useMemo(
-    () => [
+  const { hasPermission } = usePermissions();
+  const canEdit = hasPermission(PERMISSIONS.ROLE.UPDATE);
+  const canDelete = hasPermission(PERMISSIONS.ROLE.DELETE);
+
+  return useMemo(() => {
+    const columns: ColumnDef<Role>[] = [
       {
         accessorKey: 'name',
         header: 'Name',
@@ -53,16 +59,23 @@ export function useRoleColumns({
           </Badge>
         ),
       },
-      {
-        id: 'actions',
-        header: () => <div className="text-right">Actions</div>,
-        cell: ({ row }) => {
-          const role = row.original;
-          return (
-            <div className="flex justify-end gap-2">
+    ];
+
+    if (!canEdit && !canDelete) return columns;
+
+    columns.push({
+      id: 'actions',
+      header: () => <div className="text-right">Actions</div>,
+      cell: ({ row }) => {
+        const role = row.original;
+        return (
+          <div className="flex justify-end gap-2">
+            {canEdit ? (
               <Button variant="outline" size="sm" onClick={() => onEdit(role)}>
                 <Edit className="size-4" />
               </Button>
+            ) : null}
+            {canDelete ? (
               <Button
                 variant="outline"
                 size="sm"
@@ -72,11 +85,12 @@ export function useRoleColumns({
                 <RotateCcw className="mr-2 size-4" />
                 {role.effective_status ? 'Deactivate' : 'Activate'}
               </Button>
-            </div>
-          );
-        },
+            ) : null}
+          </div>
+        );
       },
-    ],
-    [isStatusPending, onEdit, onToggleStatus],
-  );
+    });
+
+    return columns;
+  }, [canDelete, canEdit, isStatusPending, onEdit, onToggleStatus]);
 }