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

package/src/templates/angular/iam/role-management/role-header.component.html.ejs

@@ -0,0 +1,51 @@
+<div *ngIf="selectedRole" class="relative rounded-2xl border bg-white p-6 shadow-sm dark:bg-slate-900">
+  <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+    <div>
+      <div class="flex flex-wrap items-center gap-2.5">
+        <h2 class="text-2xl font-extrabold text-slate-900 dark:text-white">
+          {{ cleanRoleName(selectedRole.name || '') }}
+        </h2>
+        <span class="rounded-full border border-primary-100 bg-primary-50 px-2.5 py-1 text-xs font-semibold text-primary-800 dark:border-primary-900/40 dark:bg-primary-950/30 dark:text-primary-400">
+          Active
+        </span>
+        <span
+          *ngIf="isCoreSystemRole(selectedRole.name)"
+          class="inline-flex items-center gap-1.5 rounded-full border border-rose-200 bg-rose-50 px-3 py-1 text-xs font-extrabold text-rose-700 shadow-xs dark:border-rose-900/50 dark:bg-rose-950/40 dark:text-rose-300"
+        >
+          <mat-icon svgIcon="lock" class="size-3.5 animate-pulse text-rose-600 dark:text-rose-400"></mat-icon>
+          <span>Core Platform Role Required</span>
+        </span>
+      </div>
+      <p class="mt-1 text-sm text-slate-500">{{ selectedRole.description || 'No description provided.' }}</p>
+    </div>
+
+    <div class="flex items-center gap-2">
+      <button
+        *ngIf="showEditPermissions"
+        type="button"
+        (click)="onEditPermissions()"
+        class="inline-flex items-center justify-center rounded-xl border bg-primary-50 px-4 py-2 text-sm font-semibold text-primary-700 transition hover:bg-primary-100 dark:bg-primary-950/20 dark:text-primary-400"
+      >
+        <mat-icon svgIcon="square-pen" class="mr-1.5 size-4"></mat-icon>
+        <span>Edit Permissions</span>
+      </button>
+      <button
+        type="button"
+        (click)="onDuplicate()"
+        class="inline-flex items-center justify-center rounded-xl border bg-amber-50 px-4 py-2 text-sm font-semibold text-amber-700 transition hover:bg-amber-100 dark:bg-amber-950/20 dark:text-amber-400"
+      >
+        <mat-icon svgIcon="copy" class="mr-1.5 size-4"></mat-icon>
+        <span>Duplicate</span>
+      </button>
+    </div>
+  </div>
+
+  <div class="mt-4 flex flex-col gap-4 border-t pt-4 text-xs text-slate-500 dark:text-slate-400 sm:flex-row">
+    <div>
+      <span class="font-semibold text-slate-700 dark:text-slate-300">Role Label:</span>
+      <span class="ml-1 inline-flex items-center rounded-md bg-slate-100 px-2 py-0.5 text-indigo-700 dark:bg-slate-800 dark:text-indigo-300">
+        {{ cleanRoleName(selectedRole.name || '') }}
+      </span>
+    </div>
+  </div>
+</div>

package/src/templates/angular/iam/role-management/role-header.component.ts.ejs

@@ -0,0 +1,45 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { RoleRepresentation } from '@/app/core/auth';
+import { formatRoleDisplayName } from '@/app/core/user-management/shared/role-display.util';
+
+@Component({
+  selector: 'app-role-header',
+  standalone: true,
+  imports: [CommonModule, MatIconModule],
+  templateUrl: './role-header.component.html',
+})
+export class RoleHeaderComponent {
+  @Input() selectedRole: RoleRepresentation | null = null;
+  @Input() showEditPermissions = true;
+  @Output() editPermissions = new EventEmitter<RoleRepresentation>();
+  @Output() duplicate = new EventEmitter<RoleRepresentation>();
+
+  cleanRoleName(name: string | undefined): string {
+    return formatRoleDisplayName(name);
+  }
+
+  isCoreSystemRole(roleName?: string): boolean {
+    if (!roleName) return false;
+    const name = roleName.toLowerCase().trim();
+    return (
+      name === 'default-roles-pmb' ||
+      name === 'keycloak_admin_access' ||
+      name === 'role_super_admin' ||
+      name === 'role_super_admin_pmb'
+    );
+  }
+
+  onEditPermissions(): void {
+    if (this.selectedRole) {
+      this.editPermissions.emit(this.selectedRole);
+    }
+  }
+
+  onDuplicate(): void {
+    if (this.selectedRole) {
+      this.duplicate.emit(this.selectedRole);
+    }
+  }
+}

package/src/templates/angular/iam/role-management/role-inheritance.component.html.ejs

@@ -0,0 +1,15 @@
+<div *ngIf="selectedRole" class="flex flex-col rounded-2xl border bg-white p-6 shadow-sm dark:bg-slate-900">
+  <h3 class="mb-4 text-sm font-bold uppercase tracking-wider text-slate-900 dark:text-white">Inheritance Flow</h3>
+
+  <div class="flex items-center gap-3">
+    <div *ngIf="selectedRole.attributes?.['parentRole']?.[0]" class="flex items-center gap-3">
+      <div class="rounded-xl border bg-slate-50 px-4 py-2 font-semibold text-slate-700 dark:bg-slate-800 dark:text-slate-300">
+        {{ cleanRoleName(selectedRole.attributes?.['parentRole']?.[0]) }}
+      </div>
+      <mat-icon svgIcon="arrow-right" class="size-5"></mat-icon>
+    </div>
+    <div class="rounded-xl border border-primary-200 bg-primary-50/50 px-4 py-2 font-bold text-primary-800 dark:border-primary-900/40 dark:bg-primary-950/20 dark:text-primary-400">
+      {{ cleanRoleName(selectedRole.name || '') }}
+    </div>
+  </div>
+</div>

package/src/templates/angular/iam/role-management/role-inheritance.component.ts.ejs

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { RoleRepresentation } from '@/app/core/auth';
+import { formatRoleDisplayName } from '@/app/core/user-management/shared/role-display.util';
+
+@Component({
+  selector: 'app-role-inheritance',
+  standalone: true,
+  imports: [CommonModule, MatIconModule],
+  templateUrl: './role-inheritance.component.html',
+})
+export class RoleInheritanceComponent {
+  @Input() selectedRole: RoleRepresentation | null = null;
+
+  cleanRoleName(name: string | undefined): string {
+    return formatRoleDisplayName(name);
+  }
+}

package/src/templates/angular/iam/role-management/role-permissions-panel.component.css.ejs

@@ -0,0 +1,24 @@
+.expandable-content {
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease-in-out, margin-top 0.25s ease;
+  margin-top: 0;
+}
+
+.expandable-content.expanded {
+  max-height: 500px;
+  opacity: 1;
+  margin-top: 0.625rem;
+}
+
+.scroll-container::-webkit-scrollbar {
+  display: none !important;
+}
+
+.scroll-container {
+  -ms-overflow-style: none !important;
+  scrollbar-width: none !important;
+  overflow-x: hidden !important;
+  overflow-y: auto !important;
+}

package/src/templates/angular/iam/role-management/role-permissions-panel.component.html.ejs

@@ -0,0 +1,108 @@
+<div class="flex h-full select-none flex-col rounded-2xl border bg-white p-5 shadow-sm dark:bg-slate-900">
+  <div class="mb-4 flex items-center justify-between">
+    <div>
+      <h3 class="text-[12px] font-bold uppercase tracking-wider text-slate-900 dark:text-white">Screen Permissions</h3>
+      <p class="mt-0.5 text-[10px] text-slate-500">Assigned screens & action capabilities</p>
+    </div>
+    <button
+      type="button"
+      (click)="onConfigureMatrix()"
+      class="flex size-7 cursor-pointer items-center justify-center rounded-lg border border-primary-100/40 bg-primary-50 text-primary-700 shadow-sm transition hover:bg-primary-600 hover:text-white dark:border-primary-900/30 dark:bg-primary-950/30 dark:text-primary-400 dark:hover:bg-primary-600 dark:hover:text-white"
+      title="Configure Matrix"
+    >
+      <mat-icon svgIcon="layers" class="size-3.5"></mat-icon>
+    </button>
+  </div>
+
+  <div class="scroll-container max-h-[300px] flex-auto space-y-3 overflow-y-auto overflow-x-hidden pr-0.5">
+    <div
+      *ngFor="let screen of paginatedPermissions"
+      class="flex flex-col border-b border-slate-100 pb-2.5 last:border-0 last:pb-0 dark:border-slate-800/80"
+    >
+      <div
+        [class.cursor-pointer]="screen.components && screen.components.length > 0"
+        (click)="screen.components && screen.components.length > 0 ? toggleScreen(screen.name) : null"
+        class="-mx-1.5 flex items-center justify-between rounded-lg px-1.5 py-1 transition hover:bg-slate-50/40 dark:hover:bg-slate-800/20"
+      >
+        <div class="flex items-center gap-2">
+          <div class="flex size-7 items-center justify-center rounded-lg border border-indigo-100/40 bg-indigo-50 dark:border-indigo-900/30 dark:bg-indigo-950/30">
+            <mat-icon svgIcon="monitor" class="size-3.5 text-indigo-600 dark:text-indigo-400"></mat-icon>
+          </div>
+          <div class="flex flex-col">
+            <span class="text-xs font-bold leading-tight text-slate-900 dark:text-slate-100">{{ screen.name }}</span>
+            <span class="mt-0.5 text-[9px] text-slate-500">
+              {{
+                screen.components && screen.components.length > 0
+                  ? screen.components.length + (screen.components.length === 1 ? ' action' : ' actions') + ' enabled'
+                  : 'Access only (no custom actions)'
+              }}
+            </span>
+          </div>
+        </div>
+        <div class="flex items-center gap-1.5">
+          <span class="inline-flex items-center gap-1 text-[8px] font-bold text-primary-600 dark:text-primary-400">
+            <span class="size-1 animate-pulse rounded-full bg-primary-500"></span>
+            <span>Active</span>
+          </span>
+          <mat-icon
+            *ngIf="screen.components && screen.components.length > 0"
+            [svgIcon]="isExpanded(screen.name) ? 'chevron-down' : 'chevron-right'"
+            class="size-3.5 text-slate-400 transition-transform duration-200 dark:text-slate-500"
+          >
+          </mat-icon>
+        </div>
+      </div>
+
+      <div class="expandable-content" [class.expanded]="isExpanded(screen.name)">
+        <div *ngIf="screen.components && screen.components.length > 0" class="flex flex-wrap items-center gap-1 pb-1 pl-9">
+          <span
+            *ngFor="let comp of screen.components"
+            class="inline-flex items-center gap-1 rounded-full border border-slate-200 bg-slate-50 px-2 py-0.5 text-[9px] font-semibold text-slate-650 transition hover:bg-slate-100/50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300"
+          >
+            <span class="h-1 w-1 rounded-full bg-indigo-500"></span>
+            <span>{{ comp }}</span>
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div
+      *ngIf="selectedRolePermissions.length === 0"
+      class="flex flex-col items-center justify-center py-10 text-center text-slate-450 dark:text-slate-500"
+    >
+      <mat-icon svgIcon="shield" class="mb-2 size-8 text-slate-300 dark:text-slate-700"></mat-icon>
+      <div class="text-[11px] font-bold">No Screen Mappings</div>
+      <p class="mt-0.5 max-w-[180px] text-[10px]">Configure the permission matrix to assign capabilities.</p>
+    </div>
+  </div>
+
+  <div
+    *ngIf="totalPages > 1"
+    class="mt-2.5 flex items-center justify-between border-t border-slate-100 pt-2.5 dark:border-slate-800/80"
+  >
+    <span class="text-[9px] font-semibold text-slate-500">
+      {{ displayRangeStart }}-{{ displayRangeEnd }} of {{ selectedRolePermissions.length }}
+    </span>
+    <div class="flex items-center gap-1">
+      <button
+        type="button"
+        (click)="prevPage()"
+        [disabled]="currentPage === 0"
+        class="flex size-5 cursor-pointer items-center justify-center rounded-md border border-slate-200 text-slate-500 transition hover:bg-slate-50 focus:outline-none disabled:opacity-30 disabled:hover:bg-transparent dark:border-slate-800 dark:hover:bg-slate-800"
+      >
+        <mat-icon svgIcon="arrow-left" class="size-3"></mat-icon>
+      </button>
+      <span class="min-w-[24px] text-center text-[9px] font-bold text-slate-700 dark:text-slate-300">
+        {{ currentPage + 1 }} / {{ totalPages }}
+      </span>
+      <button
+        type="button"
+        (click)="nextPage()"
+        [disabled]="currentPage === totalPages - 1"
+        class="flex size-5 cursor-pointer items-center justify-center rounded-md border border-slate-200 text-slate-500 transition hover:bg-slate-50 focus:outline-none disabled:opacity-30 disabled:hover:bg-transparent dark:border-slate-800 dark:hover:bg-slate-800"
+      >
+        <mat-icon svgIcon="arrow-right" class="size-3"></mat-icon>
+      </button>
+    </div>
+  </div>
+</div>

package/src/templates/angular/iam/role-management/role-permissions-panel.component.ts.ejs

@@ -0,0 +1,122 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+
+export type RolePermissionScreenSummary = {
+  name: string;
+  components: string[];
+};
+
+@Component({
+  selector: 'app-role-permissions-panel',
+  standalone: true,
+  imports: [CommonModule, MatIconModule],
+  templateUrl: './role-permissions-panel.component.html',
+  styleUrl: './role-permissions-panel.component.css',
+})
+export class RolePermissionsPanelComponent {
+  private _selectedRolePermissions: RolePermissionScreenSummary[] = [];
+  private _roleName = '';
+  collapsedScreens = new Set<string>();
+
+  currentPage = 0;
+  pageSize = 5;
+
+  @Input()
+  set roleName(val: string) {
+    this._roleName = val || '';
+    this.loadCollapsedState();
+  }
+  get roleName(): string {
+    return this._roleName;
+  }
+
+  @Input()
+  set selectedRolePermissions(val: RolePermissionScreenSummary[]) {
+    this._selectedRolePermissions = val || [];
+    this.currentPage = 0;
+    this.loadCollapsedState();
+  }
+
+  get selectedRolePermissions(): RolePermissionScreenSummary[] {
+    return this._selectedRolePermissions;
+  }
+
+  @Output() configureMatrix = new EventEmitter<void>();
+
+  onConfigureMatrix(): void {
+    this.configureMatrix.emit();
+  }
+
+  private getStorageKey(): string {
+    return `role-permissions-collapsed_${this.roleName}`;
+  }
+
+  private loadCollapsedState(): void {
+    this.collapsedScreens.clear();
+    if (!this.roleName) return;
+    try {
+      const raw = localStorage.getItem(this.getStorageKey());
+      if (raw) {
+        const arr = JSON.parse(raw);
+        if (Array.isArray(arr)) {
+          this.collapsedScreens = new Set(arr);
+        }
+      }
+    } catch (e) {
+      console.error('Failed to load collapsed state', e);
+    }
+  }
+
+  private saveCollapsedState(): void {
+    if (!this.roleName) return;
+    try {
+      localStorage.setItem(this.getStorageKey(), JSON.stringify(Array.from(this.collapsedScreens)));
+    } catch (e) {
+      console.error('Failed to save collapsed state', e);
+    }
+  }
+
+  toggleScreen(screenName: string): void {
+    if (this.collapsedScreens.has(screenName)) {
+      this.collapsedScreens.delete(screenName);
+    } else {
+      this.collapsedScreens.add(screenName);
+    }
+    this.saveCollapsedState();
+  }
+
+  isExpanded(screenName: string): boolean {
+    return !this.collapsedScreens.has(screenName);
+  }
+
+  get paginatedPermissions(): RolePermissionScreenSummary[] {
+    const start = this.currentPage * this.pageSize;
+    return this.selectedRolePermissions.slice(start, start + this.pageSize);
+  }
+
+  get totalPages(): number {
+    return Math.ceil(this.selectedRolePermissions.length / this.pageSize);
+  }
+
+  get displayRangeStart(): number {
+    if (this.selectedRolePermissions.length === 0) return 0;
+    return this.currentPage * this.pageSize + 1;
+  }
+
+  get displayRangeEnd(): number {
+    return Math.min((this.currentPage + 1) * this.pageSize, this.selectedRolePermissions.length);
+  }
+
+  nextPage(): void {
+    if (this.currentPage < this.totalPages - 1) {
+      this.currentPage++;
+    }
+  }
+
+  prevPage(): void {
+    if (this.currentPage > 0) {
+      this.currentPage--;
+    }
+  }
+}

package/src/templates/angular/iam/role-management/role-users.component.html.ejs

@@ -0,0 +1,104 @@
+<div class="flex flex-col gap-6 rounded-2xl border bg-white p-6 shadow-sm dark:bg-slate-900">
+  <div class="flex items-center justify-between gap-4">
+    <div>
+      <h3 class="text-base font-bold uppercase tracking-wider text-slate-900 dark:text-white">
+        Assigned Users
+      </h3>
+    </div>
+
+    <button
+      type="button"
+      (click)="onOpenAssign()"
+      class="inline-flex items-center justify-center rounded-xl bg-primary-600 px-4 py-2 text-xs font-semibold text-white shadow-sm transition hover:bg-primary-700"
+    >
+      <mat-icon svgIcon="plus" class="mr-1.5 size-4"></mat-icon>
+      <span>Assign User</span>
+    </button>
+  </div>
+
+  <div class="flex flex-col justify-between gap-4 pt-2 sm:flex-row sm:items-center">
+    <div class="relative flex max-w-md flex-1 items-center">
+      <mat-icon svgIcon="search" class="pointer-events-none absolute left-3 size-4 text-slate-400"></mat-icon>
+      <input
+        type="text"
+        [value]="searchQuery"
+        (input)="onSearchChange($event)"
+        placeholder="Filter assigned users..."
+        class="w-full rounded-xl border border-slate-200 bg-white py-1.5 pl-9 pr-9 text-xs shadow-sm outline-none transition focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 dark:border-slate-800 dark:bg-slate-900"
+      />
+      <button
+        *ngIf="searchQuery"
+        type="button"
+        (click)="clearSearch()"
+        class="absolute right-3 flex items-center justify-center text-slate-400 hover:text-slate-600 focus:outline-none"
+      >
+        <mat-icon svgIcon="x" class="size-4"></mat-icon>
+      </button>
+    </div>
+
+    <div class="flex shrink-0 items-center gap-1.5 text-xs font-semibold text-slate-500">
+      <span class="inline-block size-2 rounded-full bg-primary-500"></span>
+      <span>Total: {{ filteredUsersCount }}</span>
+    </div>
+  </div>
+
+  <div class="overflow-hidden rounded-xl border border-slate-100 dark:border-slate-800">
+    <div class="divide-y divide-slate-100 bg-slate-50/50 dark:divide-slate-800 dark:bg-slate-900/30">
+      <div
+        *ngFor="let user of paginatedUsers"
+        class="flex items-center justify-between bg-white p-3 transition hover:bg-slate-50 dark:bg-slate-900 dark:hover:bg-slate-800/40"
+      >
+        <div class="flex items-center gap-3">
+          <div class="flex size-8 items-center justify-center rounded-full bg-slate-100 text-xs font-bold uppercase text-slate-600 dark:bg-slate-800 dark:text-slate-300">
+            {{ (user.username || '?').slice(0, 2) }}
+          </div>
+          <div>
+            <div class="text-sm font-bold text-slate-800 dark:text-slate-200">{{ user.username }}</div>
+            <div class="text-xs text-slate-400 dark:text-slate-500">
+              {{ user.firstName || '' }} {{ user.lastName || '' }}
+              <span *ngIf="user.email" class="mx-1">•</span> {{ user.email }}
+            </div>
+          </div>
+        </div>
+        <button
+          type="button"
+          (click)="onUnassign(user)"
+          matTooltip="Revoke Role Assignment"
+          class="flex items-center justify-center rounded-lg p-1.5 text-slate-400 transition hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-950/20 dark:hover:text-red-400"
+        >
+          <mat-icon svgIcon="trash" class="size-4"></mat-icon>
+        </button>
+      </div>
+      <div *ngIf="paginatedUsers.length === 0" class="bg-white py-8 text-center text-xs text-slate-400 dark:bg-slate-900 dark:text-slate-500">
+        No users matching filter criteria.
+      </div>
+    </div>
+  </div>
+
+  <div
+    *ngIf="totalPages > 1"
+    class="flex items-center justify-between border-t border-slate-100 pt-2 text-xs dark:border-slate-800"
+  >
+    <button
+      type="button"
+      [disabled]="currentPage === 0"
+      (click)="onPreviousPage()"
+      class="inline-flex items-center gap-1 rounded-lg border px-3 py-1.5 font-semibold text-slate-600 transition hover:bg-slate-50 disabled:opacity-40 dark:border-slate-800 dark:text-slate-300 dark:hover:bg-slate-800"
+    >
+      <mat-icon svgIcon="arrow-left" class="size-3.5"></mat-icon>
+      <span>Previous</span>
+    </button>
+    <span class="font-medium text-slate-500">
+      Page {{ currentPage + 1 }} of {{ totalPages }}
+    </span>
+    <button
+      type="button"
+      [disabled]="currentPage >= totalPages - 1"
+      (click)="onNextPage()"
+      class="inline-flex items-center gap-1 rounded-lg border px-3 py-1.5 font-semibold text-slate-600 transition hover:bg-slate-50 disabled:opacity-40 dark:border-slate-800 dark:text-slate-300 dark:hover:bg-slate-800"
+    >
+      <span>Next</span>
+      <mat-icon svgIcon="arrow-right" class="size-3.5"></mat-icon>
+    </button>
+  </div>
+</div>

package/src/templates/angular/iam/role-management/role-users.component.ts.ejs

@@ -0,0 +1,53 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { UserRepresentation } from '@/app/core/auth';
+
+@Component({
+  selector: 'app-role-users',
+  standalone: true,
+  imports: [CommonModule, MatIconModule, MatTooltipModule],
+  templateUrl: './role-users.component.html',
+})
+export class RoleUsersComponent {
+  @Input() searchQuery = '';
+  @Input() filteredUsersCount = 0;
+  @Input() paginatedUsers: UserRepresentation[] = [];
+  @Input() currentPage = 0;
+  @Input() totalPages = 0;
+
+  @Output() searchQueryChange = new EventEmitter<string>();
+  @Output() pageChange = new EventEmitter<number>();
+  @Output() openAssignUser = new EventEmitter<void>();
+  @Output() unassignUser = new EventEmitter<UserRepresentation>();
+
+  onSearchChange(event: Event): void {
+    const value = (event.target as HTMLInputElement).value;
+    this.searchQueryChange.emit(value);
+  }
+
+  clearSearch(): void {
+    this.searchQueryChange.emit('');
+  }
+
+  onPreviousPage(): void {
+    if (this.currentPage > 0) {
+      this.pageChange.emit(this.currentPage - 1);
+    }
+  }
+
+  onNextPage(): void {
+    if (this.currentPage < this.totalPages - 1) {
+      this.pageChange.emit(this.currentPage + 1);
+    }
+  }
+
+  onOpenAssign(): void {
+    this.openAssignUser.emit();
+  }
+
+  onUnassign(user: UserRepresentation): void {
+    this.unassignUser.emit(user);
+  }
+}

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

@@ -0,0 +1,113 @@
+<div
+  [class.slide-down-anim]="isClosing()"
+  class="flex h-[750px] w-full max-w-full select-none flex-col overflow-hidden rounded-b-none rounded-t-3xl bg-white p-6 dark:bg-slate-900"
+>
+  <div class="mx-auto mb-3 h-1.5 w-12 shrink-0 cursor-pointer rounded-full bg-slate-200 dark:bg-slate-700"></div>
+
+  <div class="flex shrink-0 items-center justify-between border-b border-slate-100 pb-4 dark:border-slate-800">
+    <div>
+      <h3 class="flex items-center gap-2 text-xl font-bold text-slate-900 dark:text-white">
+        <mat-icon svgIcon="users" class="size-6 text-primary-600 dark:text-primary-400"></mat-icon>
+        <span>Assign Users to Role</span>
+      </h3>
+      <p class="mt-1 text-xs text-slate-500">Search, browse, and add active users to this identity role</p>
+    </div>
+    <button
+      *ngIf="SCREEN | accessCtrl: 'on-close'"
+      id="qa-user-select-dialog__on-close"
+      data-qa-id="qa-user-select-dialog__on-close"
+      data-component-id="on-close"
+      data-screen-id="user-select-dialog"
+      type="button"
+      (click)="onClose()"
+      class="flex items-center justify-center rounded-xl p-2 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-slate-800 dark:hover:text-slate-200"
+    >
+      <mat-icon svgIcon="x" class="size-5"></mat-icon>
+    </button>
+  </div>
+
+  <div class="relative flex shrink-0 items-center py-4">
+    <mat-icon svgIcon="search" class="pointer-events-none absolute left-3.5 size-5 text-slate-400"></mat-icon>
+    <input
+      type="text"
+      [(ngModel)]="searchQuery"
+      (ngModelChange)="onSearchChange($event)"
+      placeholder="Search users by username, first/last name, or email address..."
+      class="w-full rounded-xl border border-slate-200 bg-white py-3 pl-10 pr-10 text-sm shadow-sm outline-none transition placeholder:text-slate-400 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 dark:border-slate-800 dark:bg-slate-900 dark:text-white"
+    />
+    <button
+      id="qa-user-select-dialog__clear-search"
+      data-qa-id="qa-user-select-dialog__clear-search"
+      data-component-id="clear-search"
+      data-screen-id="user-select-dialog"
+      *ngIf="searchQuery && (SCREEN | accessCtrl: 'clear-search')"
+      type="button"
+      (click)="clearSearch()"
+      class="absolute right-3.5 flex items-center justify-center rounded-lg p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600 focus:outline-none dark:hover:bg-slate-800 dark:hover:text-slate-200"
+    >
+      <mat-icon svgIcon="x" class="size-4"></mat-icon>
+    </button>
+  </div>
+
+  <div class="no-scrollbar min-h-0 flex-auto overflow-y-auto pr-1.5">
+    <div *ngIf="isLoading()" class="flex flex-col items-center justify-center gap-3 py-24 text-sm text-slate-400">
+      <span class="size-8 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"></span>
+      <span class="font-medium text-slate-500 dark:text-slate-400">Searching user directory...</span>
+    </div>
+
+    <ng-container *ngIf="!isLoading()">
+      <div *ngIf="users().length > 0" class="grid grid-cols-1 gap-4 pb-4 md:grid-cols-2">
+        <div
+          *ngFor="let user of users()"
+          class="flex items-center justify-between rounded-2xl border border-slate-150/60 bg-slate-50/40 p-4 transition duration-200 hover:bg-slate-50 dark:border-slate-800/60 dark:bg-slate-900/20 dark:hover:bg-slate-800/40"
+        >
+          <div class="flex min-w-0 items-center gap-4">
+            <div class="flex size-11 shrink-0 items-center justify-center rounded-xl border border-primary-100/50 bg-primary-50 text-sm font-bold uppercase text-primary-700 dark:border-primary-900/30 dark:bg-primary-950/30 dark:text-primary-400">
+              <mat-icon svgIcon="circle-user" class="size-6 text-primary-600 dark:text-primary-400"></mat-icon>
+            </div>
+            <div class="min-w-0">
+              <div class="truncate text-sm font-bold text-slate-800 dark:text-slate-100">
+                {{ user.username }}
+              </div>
+              <div class="mt-0.5 truncate text-xs text-slate-500 dark:text-slate-400">
+                <span class="font-medium text-slate-700 dark:text-slate-300">
+                  {{ user.firstName || '' }} {{ user.lastName || '' }}
+                </span>
+                <span *ngIf="user.email" class="mx-1 text-slate-300 dark:text-slate-700">•</span>
+                <span>{{ user.email }}</span>
+              </div>
+            </div>
+          </div>
+
+          <button
+            id="qa-user-select-dialog__assign-user"
+            data-qa-id="qa-user-select-dialog__assign-user"
+            data-component-id="assign-user"
+            data-screen-id="user-select-dialog"
+            *ngIf="!isAssigned(user) && (SCREEN | accessCtrl: 'assign-user')"
+            type="button"
+            (click)="assignUser(user)"
+            class="ml-3 shrink-0 rounded-xl bg-primary-600 px-4 py-2 text-xs font-bold text-white shadow-sm transition duration-150 hover:bg-primary-700 hover:shadow"
+          >
+            Assign
+          </button>
+          <span
+            *ngIf="isAssigned(user)"
+            class="ml-3 flex shrink-0 select-none items-center gap-1.5 rounded-xl border border-slate-200/50 bg-slate-100 px-3 py-1.5 text-[11px] font-semibold text-slate-500 dark:border-slate-700/50 dark:bg-slate-800 dark:text-slate-400"
+          >
+            <mat-icon svgIcon="circle-check" class="size-4 text-primary-600 dark:text-primary-400"></mat-icon>
+            <span>Assigned</span>
+          </span>
+        </div>
+      </div>
+
+      <div *ngIf="users().length === 0" class="flex flex-col items-center justify-center py-32 text-center">
+        <mat-icon svgIcon="users" class="mb-3 size-16 text-slate-300 dark:text-slate-700"></mat-icon>
+        <div class="text-sm font-bold text-slate-700 dark:text-slate-300">No users found</div>
+        <div class="mx-auto mt-1 max-w-xs text-xs text-slate-500">
+          We couldn't find any matching profiles. Try checking the username spelling or using another query.
+        </div>
+      </div>
+    </ng-container>
+  </div>
+</div>