@team-codeme/crud-forge 0.0.0-stage → 1.0.1

package/src/templates/angular/iam/role-management/user-select-dialog.component.ts.ejs

@@ -0,0 +1,157 @@
+import { Component, inject, signal, computed, OnInit, ViewEncapsulation } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { AccessCtrlPipe, KeycloakAdminService, UserRepresentation } from '@/app/core/auth';
+
+export interface UserSelectDialogData {
+  roleName: string;
+  alreadyAssignedUserIds: Set<string>;
+}
+
+@Component({
+  selector: 'app-user-select-dialog',
+  standalone: true,
+  imports: [AccessCtrlPipe, CommonModule, FormsModule, MatDialogModule, MatButtonModule, MatIconModule],
+  encapsulation: ViewEncapsulation.None,
+  styles: [
+    `
+      @keyframes slideUp {
+        from {
+          transform: translateY(100%);
+        }
+        to {
+          transform: translateY(0);
+        }
+      }
+
+      @keyframes slideDown {
+        from {
+          transform: translateY(0);
+        }
+        to {
+          transform: translateY(100%);
+        }
+      }
+
+      .bottom-sheet-dialog {
+        animation: slideUp 280ms cubic-bezier(0, 0, 0.2, 1) forwards !important;
+        margin-bottom: 0 !important;
+        vertical-align: bottom !important;
+      }
+
+      .bottom-sheet-dialog .mat-mdc-dialog-container {
+        border-bottom-left-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
+        border-top-left-radius: 24px !important;
+        border-top-right-radius: 24px !important;
+        padding: 0 !important;
+        overflow: hidden !important;
+      }
+
+      .bottom-sheet-dialog .mdc-dialog__surface {
+        border-bottom-left-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
+        border-top-left-radius: 24px !important;
+        border-top-right-radius: 24px !important;
+        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
+      }
+
+      .slide-down-anim {
+        animation: slideDown 240ms cubic-bezier(0.4, 0, 1, 1) forwards !important;
+      }
+
+      .no-scrollbar::-webkit-scrollbar {
+        display: none !important;
+      }
+
+      .no-scrollbar {
+        -ms-overflow-style: none !important;
+        scrollbar-width: none !important;
+      }
+    `,
+  ],
+  templateUrl: './user-select-dialog.component.html',
+})
+export class UserSelectDialogComponent implements OnInit {
+  readonly SCREEN = 'user-select-dialog';
+  private dialogRef = inject(MatDialogRef<UserSelectDialogComponent>);
+  private data = inject<UserSelectDialogData>(MAT_DIALOG_DATA);
+  private keycloakAdminService = inject(KeycloakAdminService);
+
+  searchQuery = '';
+  searchQuerySignal = signal<string>('');
+  allUsers = signal<UserRepresentation[]>([]);
+  isLoading = signal<boolean>(false);
+  isClosing = signal<boolean>(false);
+
+  users = computed(() => {
+    const query = this.searchQuerySignal().trim().toLowerCase();
+    const list = this.allUsers();
+    if (!query) {
+      return list;
+    }
+    return list.filter((user) => {
+      const username = (user.username || '').toLowerCase();
+      const email = (user.email || '').toLowerCase();
+      const firstName = (user.firstName || '').toLowerCase();
+      const lastName = (user.lastName || '').toLowerCase();
+      const fullName = `${firstName} ${lastName}`.trim();
+
+      return (
+        username.includes(query) || email.includes(query) || fullName.includes(query)
+      );
+    });
+  });
+
+  ngOnInit(): void {
+    this.isLoading.set(true);
+    this.keycloakAdminService.searchUsers('', 0, 1000).subscribe({
+      next: (res) => {
+        this.allUsers.set(res.users || []);
+        this.isLoading.set(false);
+      },
+      error: (err) => {
+        console.error('Failed loading users for bottom-sheet select', err);
+        this.isLoading.set(false);
+      },
+    });
+  }
+
+  onSearchChange(val: string): void {
+    this.searchQuerySignal.set(val);
+  }
+
+  clearSearch(): void {
+    this.searchQuery = '';
+    this.searchQuerySignal.set('');
+  }
+
+  isAssigned(user: UserRepresentation): boolean {
+    return !!user.id && this.data.alreadyAssignedUserIds.has(user.id);
+  }
+
+  assignUser(user: UserRepresentation): void {
+    if (!user.id) return;
+    this.isLoading.set(true);
+    this.keycloakAdminService.assignRealmRoleToUser(user.id, this.data.roleName).subscribe({
+      next: () => {
+        this.data.alreadyAssignedUserIds.add(user.id!);
+        this.isLoading.set(false);
+      },
+      error: (err) => {
+        console.error(err);
+        this.isLoading.set(false);
+      },
+    });
+  }
+
+  onClose(): void {
+    this.isClosing.set(true);
+    setTimeout(() => {
+      this.dialogRef.close(true);
+    }, 240);
+  }
+}

package/src/templates/angular/iam/role-permission-matrix.component.html.ejs

@@ -0,0 +1,355 @@
+<div class="flex flex-col flex-1 min-h-0 min-w-0 h-full w-full overflow-hidden bg-slate-50 dark:bg-[#0D1E3A]">
+    <!-- Header -->
+    <div class="flex flex-col sm:flex-row flex-0 shrink-0 sm:items-center sm:justify-between p-6 sm:py-6 border-b bg-card dark:bg-[#0D1E3A] z-10">
+        <div class="flex-1 min-w-0">
+            <!-- Breadcrumbs -->
+            <div class="flex items-center gap-x-2 text-xs font-semibold uppercase tracking-wider text-slate-500">
+                <a *ngIf="SCREEN | accessCtrl: 'admin-user-management'" id="qa-role-permission-matrix__admin-user-management" data-qa-id="qa-role-permission-matrix__admin-user-management" data-component-id="admin-user-management" data-screen-id="role-permission-matrix" routerLink="/admin/user-management" class="hover:underline text-primary-600 dark:text-primary-400">Users</a>
+                <span class="text-slate-400">/</span>
+                <a *ngIf="SCREEN | accessCtrl: 'admin-user-management-roles'" id="qa-role-permission-matrix__admin-user-management-roles" data-qa-id="qa-role-permission-matrix__admin-user-management-roles" data-component-id="admin-user-management-roles" data-screen-id="role-permission-matrix" routerLink="/admin/user-management/roles" class="hover:underline text-primary-600 dark:text-primary-400">Role Management</a>
+                <span class="text-slate-400">/</span>
+                <span>Permission Matrix</span>
+            </div>
+            <!-- Title -->
+            <div class="mt-2 text-3xl font-extrabold tracking-tight leading-none text-slate-900 dark:text-white flex items-center gap-x-3">
+                <span>Role Permission Matrix</span>
+                @if (isAnyToggleProcessing()) {
+                    <span class="inline-flex items-center gap-x-1.5 rounded-lg bg-amber-50 dark:bg-amber-950/30 px-2.5 py-1 text-xs font-semibold text-amber-800 dark:text-amber-400 ring-1 ring-inset ring-amber-600/20 dark:ring-amber-500/20 animate-pulse">
+                        <mat-icon svgIcon="refresh-cw" class="size-3.5 animate-spin text-amber-600 dark:text-amber-400"></mat-icon>
+                        Syncing Permissions...
+                    </span>
+                }
+            </div>
+            @if (filteredRoleName()) {
+            <div class="mt-1 text-sm text-slate-500 flex flex-wrap items-center gap-x-3 gap-y-2">
+                    <span class="inline-flex items-center gap-x-1.5 rounded-lg bg-primary-50 dark:bg-primary-950/30 px-2.5 py-1 text-xs font-semibold text-primary-800 dark:text-primary-400 ring-1 ring-inset ring-primary-600/20 dark:ring-primary-500/20">
+                        <span class="size-1.5 rounded-full bg-primary-500"></span>
+                        Filtering Role: {{ formatRoleName(filteredRoleName()) }}
+                    </span>
+                    <button id="qa-role-permission-matrix__clear-role-filter" data-qa-id="qa-role-permission-matrix__clear-role-filter" data-component-id="clear-role-filter" data-screen-id="role-permission-matrix" *ngIf="SCREEN | accessCtrl: 'clear-role-filter'" (click)="clearRoleFilter()" [disabled]="isUiLocked()" class="inline-flex items-center text-xs text-primary-600 hover:text-primary-800 dark:text-primary-400 dark:hover:text-primary-200 underline font-semibold focus:outline-none transition disabled:opacity-50 disabled:cursor-not-allowed">
+                        Show All Roles
+                    </button>
+            </div>
+            }
+        </div>
+        <!-- Actions & Search -->
+        <div class="flex flex-col sm:flex-row items-center gap-3 mt-6 sm:mt-0">
+            <!-- Search Group -->
+            <div class="flex items-center w-full sm:w-[460px] rounded-xl border border-slate-300 dark:border-slate-700 bg-white dark:bg-[#0D1E3A] shadow-sm transition-all focus-within:ring-1 focus-within:ring-primary-500 focus-within:border-primary-500 overflow-hidden h-10">
+                <!-- Dropdown -->
+                <div class="relative flex items-center border-r border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 h-full">
+                    <select [value]="searchScope()" (change)="onSearchScopeChange($event, searchInput)" 
+                            class="h-full py-0 pl-3 pr-7 bg-transparent border-0 text-sm font-medium text-slate-600 dark:text-slate-300 focus:ring-0 cursor-pointer appearance-none outline-none">
+                        <option value="ALL">All Levels</option>
+                        <option value="SCREEN">Screens Only</option>
+                    </select>
+                    <mat-icon class="absolute right-1.5 size-4 text-slate-400 pointer-events-none" svgIcon="chevron-down"></mat-icon>
+                </div>
+                <!-- Input -->
+                <div class="relative flex-1 flex items-center h-full">
+                    <mat-icon class="absolute left-3 size-4.5 text-slate-400 pointer-events-none" svgIcon="search"></mat-icon>
+                    <input #searchInput [value]="searchTerm()" (input)="onSearchTermChange($event)" type="text"
+                           class="w-full h-full pl-9 pr-10 bg-transparent border-0 text-sm text-slate-900 dark:text-white placeholder-slate-400 focus:ring-0 outline-none"
+                           [placeholder]="searchScope() === 'ALL' ? 'Search screens, components, descriptions…' : 'Search screens only…'">
+                    @if (searchTerm()) {
+                        <button id="qa-role-permission-matrix__clear-search" data-qa-id="qa-role-permission-matrix__clear-search" data-component-id="clear-search" data-screen-id="role-permission-matrix" *ngIf="SCREEN | accessCtrl: 'clear-search'" (click)="clearSearch()" class="absolute right-2 p-1 rounded-full text-slate-400 hover:text-slate-600 hover:bg-slate-200 dark:hover:text-slate-200 dark:hover:bg-slate-700 transition-colors focus:outline-none flex items-center justify-center">
+                            <mat-icon class="size-4" svgIcon="x"></mat-icon>
+                        </button>
+                    }
+                </div>
+            </div>
+
+            <button *ngIf="SCREEN | accessCtrl: 'load-data'" id="qa-role-permission-matrix__load-data" data-qa-id="qa-role-permission-matrix__load-data" data-component-id="load-data" data-screen-id="role-permission-matrix" (click)="loadRolesAndMappings()" [disabled]="isUiLocked()"
+                    class="inline-flex items-center justify-center px-4 h-10 bg-white dark:bg-[#0D1E3A] border border-slate-300 dark:border-slate-800 rounded-xl text-sm font-semibold text-slate-700 dark:text-slate-200 shadow-sm hover:bg-slate-50 dark:hover:bg-slate-800 transition disabled:opacity-50 disabled:cursor-not-allowed">
+                <mat-icon class="mr-2 text-slate-500 dark:text-slate-400 size-5" [class.animate-spin]="isUiLocked()" svgIcon="refresh-cw"></mat-icon>
+                <span>Refresh Grid</span>
+            </button>
+        </div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="flex flex-col flex-1 min-h-0 min-w-0 overflow-hidden">
+        <!-- Matrix Table -->
+        <div class="bg-card dark:bg-[#0D1E3A]/50 flex flex-col flex-1 min-h-0 min-w-0 overflow-hidden border-t">
+            <!-- Scrollable Grid -->
+            <div class="matrix-scroll overflow-auto flex-1 min-h-0 min-w-0 w-full bg-white dark:bg-[#0D1E3A]">
+                <table class="matrix-table border-separate border-spacing-0">
+                    <thead>
+                        <tr class="border-b bg-slate-50 dark:bg-slate-800/20">
+                            <!-- Sticky Top-Left Corner Header -->
+                            <th class="sticky left-0 top-0 z-30 px-6 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 bg-slate-50 dark:bg-slate-800/60 border-r border-b border-slate-200 dark:border-slate-800 min-w-[380px]">
+                                System Screens & Components
+                            </th>
+                            <!-- Sticky Role Columns -->
+                            @if (isLoading()) {
+                                @for (i of [1,2,3,4,5,6]; track i) {
+                                    <th class="sticky top-0 z-20 px-6 py-4 text-center text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-300 min-w-[170px] bg-slate-50 dark:bg-slate-800/60 border-b border-slate-200 dark:border-slate-800">
+                                        <div class="flex flex-col items-center">
+                                            <div class="h-6 w-24 animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
+                                        </div>
+                                    </th>
+                                }
+                            } @else {
+                                @for (role of roles(); track role.name) {
+                                    <th class="sticky top-0 z-20 px-6 py-4 text-center text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-300 min-w-[170px] bg-slate-50 dark:bg-slate-800/60 border-b border-slate-200 dark:border-slate-800">
+                                        <div class="flex flex-col items-center">
+                                            <span class="text-blue-700 dark:text-blue-400 font-bold bg-blue-50/80 dark:bg-blue-950/20 px-2.5 py-1 rounded-lg border border-blue-100 dark:border-blue-900/40" [title]="role.name">
+                                                {{ formatRoleName(role.name) }}
+                                            </span>
+                                        </div>
+                                    </th>
+                                }
+                            }
+                        </tr>
+                    </thead>
+                    @if (isLoading()) {
+                        <tbody app-role-permission-skeleton [rolesCount]="roles().length || 6"></tbody>
+                    } @else {
+                        <tbody>
+                            @for (item of paginatedHierarchyData(); track trackHierarchyItem(item)) {
+                                @if (item.kind === 'page') {
+                                    <tr class="bg-teal-50/90 dark:bg-teal-950/40 font-bold transition-colors select-none">
+                                        <td *ngIf="SCREEN | accessCtrl: 'toggle-screen-collapse'"
+                                            id="qa-role-permission-matrix__toggle-page-collapse"
+                                            data-qa-id="qa-role-permission-matrix__toggle-page-collapse"
+                                            data-component-id="toggle-screen-collapse"
+                                            data-screen-id="role-permission-matrix"
+                                            (click)="togglePageCollapse(item)"
+                                            class="sticky left-0 z-10 px-6 py-3.5 border-r border-b border-teal-200/80 dark:border-teal-900/50 bg-teal-50 dark:bg-teal-950/50 cursor-pointer hover:bg-teal-100/80 dark:hover:bg-teal-900/40">
+                                            <div class="flex items-start gap-x-2 min-w-0">
+                                                <mat-icon svgIcon="chevron-right" class="text-teal-700 dark:text-teal-300 size-4 mt-0.5 shrink-0 transition-transform duration-300 ease-in-out" [class.rotate-90]="!isPageCollapsed(item)"></mat-icon>
+                                                <mat-icon svgIcon="layout-dashboard" class="text-teal-700 dark:text-teal-300 size-4 mt-0.5 shrink-0"></mat-icon>
+                                                <div class="min-w-0 flex flex-col gap-1">
+                                                    <div class="flex flex-wrap items-center gap-2">
+                                                        <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wide bg-teal-700 text-white dark:bg-teal-500 dark:text-teal-950">Page</span>
+                                                        <span class="text-[10px] font-semibold uppercase tracking-wider text-teal-800/80 dark:text-teal-200/80">{{ item.page.domain }}</span>
+                                                    </div>
+                                                    <span class="text-sm font-bold text-slate-900 dark:text-white" [innerHTML]="highlightText(item.page.navTitle)"></span>
+                                                    <p class="text-[11px] font-mono text-teal-900/70 dark:text-teal-100/70" [innerHTML]="highlightText(item.page.route)"></p>
+                                                    <p class="text-[10px] font-normal text-slate-500 dark:text-slate-400">
+                                                        Includes {{ item.embeds.length }} embedded screen{{ item.embeds.length === 1 ? '' : 's' }} · host
+                                                        <span class="font-mono" [innerHTML]="highlightText(item.page.hostScreenId)"></span>
+                                                    </p>
+                                                </div>
+                                            </div>
+                                        </td>
+                                        @for (role of roles(); track role.name) {
+                                            <td (click)="$event.stopPropagation()" class="px-4 py-3 border-b border-teal-200/80 dark:border-teal-900/50 text-center bg-teal-50/60 dark:bg-teal-950/30">
+                                                <div class="flex flex-col items-center gap-2">
+                                                    @if (isPageEssentialsProcessing(role.name || '', item)) {
+                                                        <div class="animate-spin rounded-full h-5 w-5 border-t-2 border-teal-600"></div>
+                                                    }
+                                                    <button type="button"
+                                                            *ngIf="SCREEN | accessCtrl: 'toggle-screen-permission'"
+                                                            id="qa-role-permission-matrix__grant-page-essentials"
+                                                            data-qa-id="qa-role-permission-matrix__grant-page-essentials"
+                                                            data-component-id="toggle-screen-permission"
+                                                            data-screen-id="role-permission-matrix"
+                                                            class="inline-flex items-center justify-center rounded-lg border border-teal-600/40 bg-white dark:bg-slate-900 px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide text-teal-800 dark:text-teal-200 hover:bg-teal-100 dark:hover:bg-teal-900/40 disabled:opacity-50 disabled:cursor-not-allowed"
+                                                            [disabled]="isUiLocked() || isPageEssentialsProcessing(role.name || '', item)"
+                                                            [attr.title]="'Grant ' + item.page.navTitle + ' essentials for ' + formatRoleName(role.name) + ' (excludes Delete/Approve/Reject/Finalize)'"
+                                                            (click)="grantPageEssentials(role.name || '', item)">
+                                                        Grant essentials
+                                                    </button>
+                                                    <div id="qa-role-permission-matrix__toggle-screen-permission"
+                                                         data-qa-id="qa-role-permission-matrix__toggle-screen-permission"
+                                                         data-component-id="toggle-screen-permission"
+                                                         data-screen-id="role-permission-matrix"
+                                                         *ngIf="SCREEN | accessCtrl: 'toggle-screen-permission'"
+                                                         class="role-access-toggle-trigger"
+                                                         [class.role-access-toggle-trigger--disabled]="isScreenToggleDisabled(role.name || '', item.host)"
+                                                         role="button"
+                                                         [attr.tabindex]="isScreenToggleDisabled(role.name || '', item.host) ? -1 : 0"
+                                                         (click)="toggleScreenPermission(role.name || '', item.host)"
+                                                         (keydown.enter)="toggleScreenPermission(role.name || '', item.host)"
+                                                         (keydown.space)="$event.preventDefault(); toggleScreenPermission(role.name || '', item.host)">
+                                                        <div class="permission-toggle-visual"
+                                                             [class.permission-toggle-visual--checked]="isClusterScreenPermissionMapped(role.name || '', item.host)">
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </td>
+                                        }
+                                    </tr>
+
+                                    @if (!isPageCollapsed(item)) {
+                                        <ng-container *ngTemplateOutlet="screenBlock; context: { $implicit: item.host }"></ng-container>
+                                        @for (embed of item.embeds; track embed.cleanScreenId) {
+                                            <tr class="bg-slate-100/70 dark:bg-slate-800/70 font-bold transition-colors select-none">
+                                                <td *ngIf="SCREEN | accessCtrl: 'toggle-screen-collapse'"
+                                                    (click)="toggleEmbedCollapse(item, embed)"
+                                                    class="sticky left-0 z-10 pl-10 pr-6 py-3 border-r border-b border-slate-200 dark:border-slate-800 bg-slate-100 dark:bg-slate-800 cursor-pointer hover:bg-slate-200/50 dark:hover:bg-slate-700/50">
+                                                    <div class="flex items-start gap-x-2 min-w-0">
+                                                        <mat-icon svgIcon="chevron-right" class="text-slate-500 size-4 mt-0.5 shrink-0 transition-transform duration-300 ease-in-out" [class.rotate-90]="!isEmbedCollapsed(item, embed)"></mat-icon>
+                                                        <mat-icon svgIcon="layers" class="text-violet-600 dark:text-violet-400 size-4 mt-0.5 shrink-0"></mat-icon>
+                                                        <div class="min-w-0 flex flex-col gap-1">
+                                                            <div class="flex flex-wrap items-center gap-2">
+                                                                <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wide bg-violet-100 text-violet-800 dark:bg-violet-950/40 dark:text-violet-300">Embedded</span>
+                                                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-violet-50 text-violet-700 dark:bg-violet-950/30 dark:text-violet-400 border border-violet-200/50 dark:border-violet-900/40" [innerHTML]="highlightText(embed.cleanScreenId)"></span>
+                                                                <span class="text-sm font-semibold text-slate-800 dark:text-slate-100" [innerHTML]="highlightText(getCleanScreenName(embed.screen.screenName))"></span>
+                                                            </div>
+                                                            <p class="text-[10px] font-normal text-slate-400 dark:text-slate-500">
+                                                                {{ embed.components.length }} component{{ embed.components.length === 1 ? '' : 's' }}
+                                                            </p>
+                                                        </div>
+                                                    </div>
+                                                </td>
+                                                @for (role of roles(); track role.name) {
+                                                    <td (click)="$event.stopPropagation()" class="px-6 py-3 border-b border-slate-200 dark:border-slate-800 text-center bg-slate-100/40 dark:bg-slate-800/40">
+                                                        <div class="flex items-center justify-center gap-2">
+                                                            <div *ngIf="SCREEN | accessCtrl: 'toggle-screen-permission'"
+                                                                 class="role-access-toggle-trigger"
+                                                                 [class.role-access-toggle-trigger--disabled]="isScreenToggleDisabled(role.name || '', embed)"
+                                                                 role="button"
+                                                                 (click)="toggleScreenPermission(role.name || '', embed)">
+                                                                <div class="permission-toggle-visual"
+                                                                     [class.permission-toggle-visual--checked]="isClusterScreenPermissionMapped(role.name || '', embed)">
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </td>
+                                                }
+                                            </tr>
+                                            @if (!isEmbedCollapsed(item, embed)) {
+                                                <ng-container *ngTemplateOutlet="componentRows; context: { $implicit: embed }"></ng-container>
+                                            }
+                                        }
+                                    }
+                                } @else {
+                                    <ng-container *ngTemplateOutlet="screenBlock; context: { $implicit: item.group }"></ng-container>
+                                }
+                            }
+                        </tbody>
+
+                    }
+                </table>
+            </div>
+        </div>
+
+        <!-- Paginator & Footer Info Hint — pinned at bottom of viewport -->
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between border-t bg-card dark:bg-[#0D1E3A] shrink-0 px-6 z-20">
+            <mat-paginator
+                class="bg-transparent [&_.mat-mdc-paginator-container]:justify-start"
+                [length]="isLoading() ? 0 : filteredHierarchyData().length"
+                [pageSize]="pageSize()"
+                [pageIndex]="currentPage()"
+                [pageSizeOptions]="[10, 25, 50, 100]"
+                [disabled]="isUiLocked()"
+                (page)="onPageChange($event)">
+            </mat-paginator>
+
+            <div class="py-3 text-xs text-slate-400 flex items-center gap-x-2">
+                <mat-icon svgIcon="info" class="size-4 shrink-0"></mat-icon>
+                <span>Any change will apply immediately. Permissions are stored on Keycloak role attributes and synced to assigned users.</span>
+            </div>
+        </div>
+    </div>
+
+
+<ng-template #screenBlock let-group>
+    <tr class="bg-slate-100/80 dark:bg-slate-800/80 font-bold transition-colors select-none">
+        <td *ngIf="SCREEN | accessCtrl: 'toggle-screen-collapse'" (click)="toggleScreenCollapse(group.cleanScreenId)"
+            class="sticky left-0 z-10 px-6 py-3 border-r border-b border-slate-200 dark:border-slate-800 bg-slate-100 dark:bg-slate-800 cursor-pointer hover:bg-slate-200/50 dark:hover:bg-slate-700/50">
+            <div class="flex items-start gap-x-2 min-w-0">
+                <mat-icon svgIcon="chevron-right" class="text-slate-500 size-4 mt-0.5 shrink-0 transition-transform duration-300 ease-in-out" [class.rotate-90]="!isScreenCollapsed(group.cleanScreenId)"></mat-icon>
+                <mat-icon svgIcon="monitor" class="text-indigo-600 dark:text-indigo-400 size-4 mt-0.5 shrink-0"></mat-icon>
+                <div class="min-w-0 flex flex-col gap-1">
+                    <div class="flex flex-wrap items-center gap-2">
+                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-indigo-50 text-indigo-700 dark:bg-indigo-950/30 dark:text-indigo-400 border border-indigo-200/50 dark:border-indigo-900/40" [innerHTML]="highlightText(group.cleanScreenId)"></span>
+                        <span class="text-sm font-semibold text-slate-800 dark:text-slate-100" [innerHTML]="highlightText(getCleanScreenName(group.screen.screenName))"></span>
+                    </div>
+                    @if (group.screen.description) {
+                        <p class="text-xs font-normal text-slate-500 dark:text-slate-400 leading-relaxed" [innerHTML]="highlightText(group.screen.description)"></p>
+                    }
+                    <p class="text-[10px] font-normal text-slate-400 dark:text-slate-500">
+                        {{ group.components.length }} component{{ group.components.length === 1 ? '' : 's' }}
+                    </p>
+                </div>
+            </div>
+        </td>
+        @for (role of roles(); track role.name) {
+            <td (click)="$event.stopPropagation()" class="px-6 py-3 border-b border-slate-200 dark:border-slate-800 text-center bg-slate-100/40 dark:bg-slate-800/40">
+                <div class="flex items-center justify-center gap-2">
+                    <div *ngIf="SCREEN | accessCtrl: 'toggle-screen-permission'" class="role-access-toggle-trigger"
+                         [class.role-access-toggle-trigger--disabled]="isScreenToggleDisabled(role.name || '', group)"
+                         role="button"
+                         (click)="toggleScreenPermission(role.name || '', group)">
+                        <div class="permission-toggle-visual"
+                             [class.permission-toggle-visual--checked]="isClusterScreenPermissionMapped(role.name || '', group)">
+                        </div>
+                    </div>
+                </div>
+            </td>
+        }
+    </tr>
+    @if (!isScreenCollapsed(group.cleanScreenId)) {
+        <ng-container *ngTemplateOutlet="componentRows; context: { $implicit: group }"></ng-container>
+    }
+</ng-template>
+
+<ng-template #componentRows let-group>
+    @for (comp of group.components; track comp.componentId) {
+        <tr class="hover:bg-slate-50/30 dark:hover:bg-slate-800/10 transition-colors">
+            <td class="sticky left-0 z-10 px-8 py-3.5 border-r border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-[#0D1E3A]">
+                <div class="flex items-center gap-x-2 flex-wrap">
+                    <span class="text-xs font-semibold px-2.5 py-0.5 rounded-full bg-blue-50 text-blue-700 dark:bg-blue-950/30 dark:text-blue-400 border border-blue-100 dark:border-blue-900/30">
+                        {{ comp.componentType }}
+                    </span>
+                    @if (isSensitiveComponent(comp.componentId)) {
+                        <span class="text-[10px] font-bold uppercase tracking-wide text-rose-700 dark:text-rose-300 bg-rose-50 dark:bg-rose-950/40 px-2 py-0.5 rounded border border-rose-200/60 dark:border-rose-900/40">Sensitive</span>
+                    }
+                    <div class="font-semibold text-slate-850 dark:text-slate-200 text-sm" [innerHTML]="highlightText(comp.componentName)"></div>
+                </div>
+                @if (comp.description) {
+                    <div class="text-xs text-slate-500 dark:text-slate-400 mt-1 pl-2 leading-relaxed" [innerHTML]="highlightText(comp.description)"></div>
+                }
+                <div class="text-xs text-slate-400 dark:text-slate-500 mt-1 pl-2 font-mono" [innerHTML]="highlightText(comp.componentId)"></div>
+            </td>
+            @for (role of roles(); track role.name) {
+                <td class="px-6 py-3.5 text-center border-b border-slate-200 dark:border-slate-800">
+                    <div class="flex items-center justify-center gap-2">
+                        <div *ngIf="SCREEN | accessCtrl: 'toggle-permission'" class="role-access-toggle-trigger"
+                             [class.role-access-toggle-trigger--disabled]="isComponentToggleDisabled(role.name || '', comp.componentId || '', group)"
+                             role="button"
+                             [attr.title]="(isSensitiveComponent(comp.componentId) ? 'Sensitive action — ' : '') + 'Toggle component access'"
+                             (click)="togglePermission(role.name || '', comp.componentId || '', group)">
+                            <div class="permission-toggle-visual"
+                                 [class.permission-toggle-visual--checked]="isClusterComponentPermissionMapped(role.name || '', group, comp.componentId || '')">
+                            </div>
+                        </div>
+                    </div>
+                </td>
+            }
+        </tr>
+    }
+    @if (group.components.length === 0) {
+        <tr class="bg-slate-50/50 dark:bg-slate-800/30">
+            <td [attr.colspan]="roles().length + 1" class="px-8 py-6 border-b border-slate-200 dark:border-slate-800 text-sm text-slate-500 dark:text-slate-400 italic text-center">
+                No sub-components found for this screen.
+            </td>
+        </tr>
+    }
+</ng-template>
+
+    <!-- Floating: show only enabled screens for this role filter -->
+    <button *ngIf="SCREEN | accessCtrl: 'show-enabled-only'"
+        type="button"
+        id="qa-role-permission-matrix__show-enabled-only"
+        data-qa-id="qa-role-permission-matrix__show-enabled-only"
+        data-component-id="show-enabled-only"
+        data-screen-id="role-permission-matrix"
+        class="matrix-enabled-fab"
+        [class.matrix-enabled-fab--active]="showEnabledOnly()"
+        [disabled]="isLoading()"
+        (click)="toggleShowEnabledOnly()"
+        [attr.aria-pressed]="showEnabledOnly()"
+        title="Show only screens already enabled for the visible role(s)">
+        <div class="matrix-enabled-fab__text">
+            <span class="matrix-enabled-fab__label">{{ showEnabledOnly() ? 'Enabled only' : 'Show enabled' }}</span>
+            <span class="matrix-enabled-fab__count">{{ enabledScreenCount() }} enabled</span>
+        </div>
+        <div class="permission-toggle-visual"
+             [class.permission-toggle-visual--checked]="showEnabledOnly()"
+             aria-hidden="true"></div>
+    </button>
+</div>