feat: add permission-gated navigation and admin access

src/app/(modules)/roles/page.tsx

@@ -6,6 +6,8 @@ import { Plus, ShieldCheck } from 'lucide-react';
 import { PageHeader } from '@/components/page-header';
 import { PoweredBy } from '@/components/powered-by';
 import { Button } from '@/components/ui/button';
+import { PERMISSIONS } from '@/constants/permissions';
+import { PermissionGuard } from '@/guards';
 import { useAppStore } from '@/store/app.store';
 import type { Role } from '@/types';
 
@@ -41,7 +43,7 @@ export default function RolesPage() {
     searchTerm: debouncedSearchTerm,
     statusFilter,
   });
-  const permissionsQuery = usePermissionsTreeQuery();
+  const permissionsQuery = usePermissionsTreeQuery(isSheetOpen);
   const roleForm = useRoleForm({
     organizationId,
     permissionTree: permissionsQuery.permissionTree,
@@ -105,10 +107,12 @@ export default function RolesPage() {
           description="Manage roles and permission access"
           icon={ShieldCheck}
           actions={
-            <Button onClick={openCreate}>
-              <Plus className="mr-2 size-4" />
-              Add Role
-            </Button>
+            <PermissionGuard permissions={PERMISSIONS.ROLE.CREATE}>
+              <Button onClick={openCreate}>
+                <Plus className="mr-2 size-4" />
+                Add Role
+              </Button>
+            </PermissionGuard>
           }
         />