refactor: add reusable select controls and enhance data table columns

src/guards/PermissionGuard.tsx

@@ -5,18 +5,27 @@ import type { ReactNode } from 'react';
 
 type PermissionGuardProps = {
   children: ReactNode;
-  permissions?: PermissionInput;
+  permissions?: PermissionInput | PermissionInput[];
+  /** When `permissions` is an array: `any` (default) or `all` must pass. */
+  match?: 'any' | 'all';
   fallback?: ReactNode;
 };
 
 export function PermissionGuard({
   children,
   permissions,
+  match = 'any',
   fallback = null,
 }: PermissionGuardProps) {
-  const { hasPermission } = usePermissions();
+  const { hasPermission, hasAnyPermission } = usePermissions();
 
-  if (!hasPermission(permissions)) return fallback;
+  const allowed = Array.isArray(permissions)
+    ? match === 'all'
+      ? permissions.every((permission) => hasPermission(permission))
+      : hasAnyPermission(permissions)
+    : hasPermission(permissions);
+
+  if (!allowed) return fallback;
 
   return children;
 }