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

package/src/templates/angular/iam/user-list.component.html.ejs

@@ -0,0 +1,369 @@
+<mat-drawer-container class="absolute h-full w-full bg-transparent">
+  <mat-drawer-content class="flex flex-col">
+    <div class="absolute inset-0 flex min-w-0 flex-col overflow-hidden">
+
+      <!-- Header (fixed, does not scroll) — PMB User Management layout -->
+      <div class="flex flex-0 flex-col border-b border-slate-200 bg-slate-100 p-6 pb-22 md:flex-row md:items-center md:justify-between md:px-10 md:pb-28 md:pt-12 dark:border-slate-800 dark:bg-slate-900/60">
+        <div class="min-w-0 flex-1">
+          <div class="flex flex-wrap items-center gap-3">
+            <h2 class="truncate text-3xl font-extrabold leading-7 tracking-tight sm:leading-10 md:text-4xl">
+              User Management <span class="text-2xl font-bold text-primary-800 tabular-nums dark:text-primary-400 md:text-3xl">({{ totalItems }})</span>
+            </h2>
+          </div>
+        </div>
+
+        <div class="mt-6 grid w-full grid-cols-2 gap-3 md:ml-4 md:mt-0 md:flex md:w-auto md:shrink-0 md:items-center">
+          <mat-form-field appearance="outline" subscriptSizing="dynamic" class="col-span-2 w-full md:w-64">
+            <mat-icon matPrefix svgIcon="search" class="mr-2 text-neutral-500"></mat-icon>
+            <input matInput placeholder="Search users..." [formControl]="searchControl" autocomplete="off" />
+            @if (searchControl.value) {
+              <button mat-icon-button matSuffix type="button" (click)="searchControl.setValue('')" aria-label="Clear search" class="flex h-8 w-8 min-w-0 items-center justify-center p-0">
+                <mat-icon svgIcon="x" class="text-neutral-500"></mat-icon>
+              </button>
+            }
+          </mat-form-field>
+
+          <button mat-stroked-button type="button" [matMenuTriggerFor]="columnPreferenceMenu" class="h-10 w-12 min-w-0 p-0" title="Column Preferences" matTooltip="Column Preferences" *ngIf="SCREEN | accessCtrl: 'open-columns'" data-screen-id="user-management" data-component-id="open-columns">
+            <span class="flex items-center justify-center">
+              <mat-icon svgIcon="menu" class="m-0"></mat-icon>
+            </span>
+          </button>
+
+          <button mat-stroked-button type="button" class="h-10 w-12 min-w-0 p-0" (click)="setViewMode(viewMode === 'table' ? 'card' : 'table')" [attr.aria-label]="viewMode === 'table' ? 'Switch to Card View' : 'Switch to Table View'" [matTooltip]="viewMode === 'table' ? 'Switch to Card View' : 'Switch to Table View'" *ngIf="SCREEN | accessCtrl: 'toggle-view'" data-screen-id="user-management" data-component-id="toggle-view">
+            <span class="flex items-center justify-center">
+              <mat-icon [svgIcon]="viewMode === 'table' ? 'credit-card' : 'table'" class="m-0"></mat-icon>
+            </span>
+          </button>
+
+          <% if (iam.roles !== false) { %>
+          <a mat-stroked-button class="flex h-10 w-12 min-w-0 items-center justify-center p-0" routerLink="roles" matTooltip="Role & Permission Matrix" *ngIf="SCREEN | accessCtrl: 'roles'" data-screen-id="user-management" data-component-id="roles">
+            <mat-icon svgIcon="shield-check" class="m-0"></mat-icon>
+          </a>
+          <% } %>
+
+          <button mat-flat-button color="primary" type="button" class="col-span-2 h-10 md:w-auto" (click)="openDrawer('create')" *ngIf="SCREEN | accessCtrl: 'create'" data-screen-id="user-management" data-component-id="create">
+            <mat-icon svgIcon="plus" class="mr-1"></mat-icon>
+            New
+          </button>
+        </div>
+      </div>
+
+      <!-- Main panel -->
+      <div class="-mt-16 flex min-h-0 flex-auto flex-col overflow-hidden rounded-t-2xl border border-slate-200 bg-white shadow dark:border-slate-800 dark:bg-neutral-950" cdkScrollable>
+        <div class="flex min-h-0 flex-1 flex-col p-6 sm:p-10">
+          @if (viewMode === 'table') {
+            <div class="-m-6 min-h-0 flex-auto overflow-auto pb-[100px] sm:-m-10" cdkScrollable>
+              <table mat-table [dataSource]="tableRows" matSort (matSortChange)="onSortChange($event)" class="min-w-full">
+
+                <ng-container matColumnDef="state">
+                  <th mat-header-cell *matHeaderCellDef class="w-28">State</th>
+                  <td mat-cell *matCellDef="let element">
+                    @if (isSearching) {
+                      <div class="flex items-center gap-1.5">
+                        <div class="h-8 w-8 animate-pulse rounded-full bg-slate-200 dark:bg-slate-700"></div>
+                        <div class="h-8 w-8 animate-pulse rounded-full bg-slate-200 dark:bg-slate-700"></div>
+                      </div>
+                    } @else {
+                      <div class="flex items-center gap-1.5">
+                        <button type="button" mat-icon-button class="h-8 w-8" title="Pin row" aria-label="Pin row" [matTooltip]="isPinned(element.id) ? 'Unpin row' : 'Pin row'" (click)="togglePin(element)">
+                          <mat-icon svgIcon="pin" [ngClass]="isPinned(element.id) ? 'text-red-500' : 'text-neutral-400'"></mat-icon>
+                        </button>
+                        <button type="button" mat-icon-button class="h-8 w-8" title="Set color flag" aria-label="Set color flag" matTooltip="Set color flag" [matMenuTriggerFor]="flagMenu" (click)="setFlagMenuRow(element)">
+                          <mat-icon svgIcon="flag" [ngClass]="getFlagClass(element.id)"></mat-icon>
+                        </button>
+                      </div>
+                    }
+                  </td>
+                </ng-container>
+
+                <ng-container matColumnDef="username">
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header>Username</th>
+                  <td mat-cell *matCellDef="let element">
+                    @if (isSearching) {
+                      <div class="h-4 w-3/4 animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
+                    } @else {
+                      <button type="button" class="cursor-pointer text-left text-sm font-semibold text-primary-800 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300" title="Copy username" matTooltip="Copy username" (click)="copyText(element.username)" [innerHTML]="highlightText(formatUsername(element.username), searchControl.value)" *ngIf="SCREEN | accessCtrl: 'copy-username'; else usernameText" data-screen-id="user-management" data-component-id="copy-username"></button>
+                      <ng-template #usernameText>
+                        <span class="text-sm font-semibold text-primary-800 dark:text-primary-400" [innerHTML]="highlightText(formatUsername(element.username), searchControl.value)"></span>
+                      </ng-template>
+                    }
+                  </td>
+                </ng-container>
+
+                <ng-container matColumnDef="email">
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header>Email</th>
+                  <td mat-cell *matCellDef="let element">
+                    @if (isSearching) {
+                      <div class="h-4 w-2/3 animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
+                    } @else {
+                      <button type="button" class="cursor-pointer text-left hover:text-primary" title="Copy email" matTooltip="Copy email" (click)="copyText(element.email)" [innerHTML]="highlightText(element.email, searchControl.value)" *ngIf="SCREEN | accessCtrl: 'copy-email'" data-screen-id="user-management" data-component-id="copy-email"></button>
+                    }
+                  </td>
+                </ng-container>
+
+                <ng-container matColumnDef="firstName">
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header>First Name</th>
+                  <td mat-cell *matCellDef="let element">
+                    @if (isSearching) {
+                      <div class="h-4 w-1/2 animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
+                    } @else {
+                      <span [innerHTML]="highlightText(element.firstName, searchControl.value)"></span>
+                    }
+                  </td>
+                </ng-container>
+
+                <ng-container matColumnDef="lastName">
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header>Last Name</th>
+                  <td mat-cell *matCellDef="let element">
+                    @if (isSearching) {
+                      <div class="h-4 w-1/2 animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
+                    } @else {
+                      <span [innerHTML]="highlightText(element.lastName, searchControl.value)"></span>
+                    }
+                  </td>
+                </ng-container>
+
+                <ng-container matColumnDef="enabled">
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header class="w-40">Enabled</th>
+                  <td mat-cell *matCellDef="let element">
+                    @if (isSearching) {
+                      <div class="h-8 w-14 animate-pulse rounded-md bg-slate-200 dark:bg-slate-700"></div>
+                    } @else {
+                      <div class="flex items-center gap-3" (click)="$event.stopPropagation()">
+                        <label class="rocker-switch" [class.opacity-70]="isTogglingEnabled[element.id!]" [matTooltip]="element.enabled !== false ? 'Click to disable user' : 'Click to enable user'">
+                          <input
+                            type="checkbox"
+                            title="Toggle user enabled state"
+                            aria-label="Toggle user enabled state"
+                            [checked]="element.enabled !== false"
+                            [disabled]="!!isTogglingEnabled[element.id!]"
+                            (click)="onToggleUserEnabled(element, element.enabled === false, $event)"
+                            *ngIf="SCREEN | accessCtrl: 'toggle-enabled'"
+                            data-screen-id="user-management"
+                            data-component-id="toggle-enabled"
+                          />
+                          <div class="rocker-button">
+                            <div class="rocker-light"></div>
+                            <div class="rocker-dots"></div>
+                            <div class="rocker-characters"></div>
+                            <div class="rocker-shine"></div>
+                            <div class="rocker-shadow"></div>
+                          </div>
+                        </label>
+                        @if (isTogglingEnabled[element.id!]) {
+                          <svg class="h-3.5 w-3.5 animate-spin text-amber-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                          </svg>
+                        }
+                      </div>
+                    }
+                  </td>
+                </ng-container>
+
+                <ng-container matColumnDef="actions" stickyEnd>
+                  <th mat-header-cell *matHeaderCellDef class="w-40">Actions</th>
+                  <td mat-cell *matCellDef="let element">
+                    @if (isSearching) {
+                      <div class="flex items-center gap-1">
+                        <div class="h-8 w-8 animate-pulse rounded-full bg-slate-200 dark:bg-slate-700"></div>
+                        <div class="h-8 w-8 animate-pulse rounded-full bg-slate-200 dark:bg-slate-700"></div>
+                        <div class="h-8 w-8 animate-pulse rounded-full bg-slate-200 dark:bg-slate-700"></div>
+                      </div>
+                    } @else {
+                      <div class="flex items-center gap-0.5">
+                        <button mat-icon-button type="button" class="flex h-8 w-8 items-center justify-center text-primary-700 hover:bg-primary-50 dark:text-primary-400 dark:hover:bg-primary-500/10" (click)="openDrawer('view', element)" matTooltip="View User" title="View user account" *ngIf="SCREEN | accessCtrl: 'view'" data-screen-id="user-management" data-component-id="view">
+                          <mat-icon svgIcon="eye"></mat-icon>
+                        </button>
+                        <button mat-icon-button type="button" class="flex h-8 w-8 items-center justify-center text-amber-600 hover:bg-amber-50 dark:text-amber-400 dark:hover:bg-amber-500/10" (click)="openDrawer('edit', element)" matTooltip="Edit User" title="Edit user" *ngIf="SCREEN | accessCtrl: 'edit'" data-screen-id="user-management" data-component-id="edit">
+                          <mat-icon svgIcon="square-pen"></mat-icon>
+                        </button>
+                        <button mat-icon-button type="button" class="flex h-8 w-8 items-center justify-center text-sky-600 hover:bg-sky-50 dark:text-sky-400 dark:hover:bg-sky-500/10" (click)="changePassword(element)" matTooltip="Reset Password" title="Reset user password" *ngIf="SCREEN | accessCtrl: 'change-password'" data-screen-id="user-management" data-component-id="change-password">
+                          <mat-icon svgIcon="key"></mat-icon>
+                        </button>
+                        <% if (iam.userAccess !== false) { %>
+                        <button mat-icon-button type="button" class="flex h-8 w-8 items-center justify-center text-primary-700 hover:bg-primary-50 dark:text-primary-400 dark:hover:bg-primary-500/10" (click)="assignRoleMatrix(element)" matTooltip="Assign Role Matrix" title="Open role matrix" *ngIf="SCREEN | accessCtrl: 'access'" data-screen-id="user-management" data-component-id="access">
+                          <mat-icon svgIcon="shield-check"></mat-icon>
+                        </button>
+                        <% } %>
+                        <% if (iam.userPermissions !== false) { %>
+                        <button mat-icon-button type="button" class="flex h-8 w-8 items-center justify-center text-indigo-600 hover:bg-indigo-50 dark:text-indigo-400 dark:hover:bg-indigo-500/10" (click)="assignUserMatrix(element)" matTooltip="Assign User Matrix" title="Open user permissions matrix" *ngIf="SCREEN | accessCtrl: 'permissions'" data-screen-id="user-management" data-component-id="permissions">
+                          <mat-icon svgIcon="lock-keyhole"></mat-icon>
+                        </button>
+                        <% } %>
+                        <button mat-icon-button type="button" class="flex h-8 w-8 items-center justify-center text-rose-600 hover:bg-rose-50 dark:text-rose-400 dark:hover:bg-rose-500/10" (click)="remove(element)" matTooltip="Delete User" title="Delete user" *ngIf="SCREEN | accessCtrl: 'delete'" data-screen-id="user-management" data-component-id="delete">
+                          <mat-icon svgIcon="trash"></mat-icon>
+                        </button>
+                      </div>
+                    }
+                  </td>
+                </ng-container>
+
+                <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedColumns" [ngClass]="isSearching ? '' : getRowClass(row)"></tr>
+                <tr class="mat-row" *matNoDataRow>
+                  <td class="mat-cell" [attr.colspan]="displayedColumns.length">No users found.</td>
+                </tr>
+              </table>
+            </div>
+          } @else {
+            <div class="-m-6 min-h-0 flex-auto overflow-y-auto pb-[100px] sm:-m-10">
+              <div class="grid grid-cols-1 gap-6 p-6 sm:grid-cols-2 sm:p-10 xl:grid-cols-3">
+                @if (isSearching) {
+                  @for (row of skeletonRows; track row) {
+                    <div class="rounded-2xl border border-slate-200 bg-white p-6 dark:border-slate-800 dark:bg-neutral-950">
+                      <div class="mb-4 h-5 w-1/2 animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
+                      <div class="mb-2 h-4 w-3/4 animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
+                      <div class="mb-6 h-4 w-2/3 animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
+                      <div class="flex gap-2">
+                        <div class="h-9 w-9 animate-pulse rounded-full bg-slate-200 dark:bg-slate-700"></div>
+                        <div class="h-9 w-9 animate-pulse rounded-full bg-slate-200 dark:bg-slate-700"></div>
+                        <div class="h-9 w-9 animate-pulse rounded-full bg-slate-200 dark:bg-slate-700"></div>
+                      </div>
+                    </div>
+                  }
+                } @else {
+                  @for (user of users; track user.id || user.username) {
+                    <article class="group flex h-full min-h-64 flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm transition duration-200 hover:-translate-y-0.5 hover:shadow-lg dark:border-slate-800 dark:bg-neutral-900">
+                      <div class="h-1 bg-gradient-to-r" [class.from-primary-500]="user.enabled !== false" [class.to-primary-400]="user.enabled !== false" [class.from-slate-400]="user.enabled === false" [class.to-slate-300]="user.enabled === false"></div>
+
+                      <div class="flex items-start gap-3 px-5 pb-4 pt-5">
+                        <div
+                          class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl text-lg font-bold ring-1 ring-inset"
+                          [class.bg-primary-50]="user.enabled !== false"
+                          [class.text-primary-700]="user.enabled !== false"
+                          [class.ring-primary-100]="user.enabled !== false"
+                          [class.bg-slate-100]="user.enabled === false"
+                          [class.text-slate-600]="user.enabled === false"
+                          [class.ring-slate-200]="user.enabled === false"
+                        >
+                          {{ displayName(user).charAt(0).toUpperCase() }}
+                        </div>
+                        <div class="min-w-0 flex-1">
+                          <h3 class="truncate text-base font-semibold text-slate-900 dark:text-white">{{ displayName(user) }}</h3>
+                          <p class="mt-0.5 truncate text-sm text-slate-500 dark:text-slate-400">{{ user.username || 'No username' }}</p>
+                        </div>
+                        <span
+                          class="inline-flex shrink-0 items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-semibold"
+                          [ngClass]="user.enabled !== false ? 'bg-primary-50 text-primary-700 dark:bg-primary-500/10 dark:text-primary-300' : 'bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300'"
+                        >
+                          <span class="h-1.5 w-1.5 rounded-full" [class.bg-primary-500]="user.enabled !== false" [class.bg-slate-400]="user.enabled === false"></span>
+                          {{ user.enabled !== false ? 'Enabled' : 'Disabled' }}
+                        </span>
+                      </div>
+
+                      <div class="mx-5 border-t border-slate-100 dark:border-slate-800"></div>
+
+                      <div class="grid flex-1 gap-3 px-5 py-4">
+                        <div class="flex min-w-0 items-center gap-3">
+                          <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-sky-50 text-sky-600 dark:bg-sky-500/10 dark:text-sky-400">
+                            <mat-icon svgIcon="mail" class="icon-size-4"></mat-icon>
+                          </div>
+                          <div class="min-w-0">
+                            <p class="text-xs font-medium uppercase tracking-wide text-slate-400">Email</p>
+                            @if (user.email) {
+                              <button type="button" class="block max-w-full truncate text-left text-sm font-medium text-slate-700 hover:text-primary dark:text-slate-200" title="Copy email" (click)="copyText(user.email)">{{ user.email }}</button>
+                            } @else {
+                              <p class="truncate text-sm text-slate-500">No email address</p>
+                            }
+                          </div>
+                        </div>
+                        <div class="flex min-w-0 items-center gap-3">
+                          <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-violet-50 text-violet-600 dark:bg-violet-500/10 dark:text-violet-400">
+                            <mat-icon svgIcon="phone" class="icon-size-4"></mat-icon>
+                          </div>
+                          <div class="min-w-0">
+                            <p class="text-xs font-medium uppercase tracking-wide text-slate-400">Username / phone</p>
+                            <p class="truncate text-sm font-medium text-slate-700 dark:text-slate-200">{{ user.username || 'Not provided' }}</p>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="flex items-center justify-between gap-3 border-t border-slate-100 bg-slate-50/70 px-3 py-2.5 dark:border-slate-800 dark:bg-slate-900/60">
+                        <button mat-button type="button" class="!min-w-0 !px-2.5 !text-primary-700 dark:!text-primary-400" (click)="openDrawer('view', user)" *ngIf="SCREEN | accessCtrl: 'view'" data-screen-id="user-management" data-component-id="view">
+                          <mat-icon svgIcon="eye" class="icon-size-4"></mat-icon>
+                          <span class="ml-1.5">View</span>
+                        </button>
+                        <div class="flex items-center gap-0.5">
+                          <button mat-icon-button type="button" class="h-8 w-8 text-amber-600" title="Edit" (click)="openDrawer('edit', user)" *ngIf="SCREEN | accessCtrl: 'edit'" data-screen-id="user-management" data-component-id="edit">
+                            <mat-icon svgIcon="square-pen" class="icon-size-4"></mat-icon>
+                          </button>
+                          <button mat-icon-button type="button" class="h-8 w-8 text-sky-600" title="Reset password" (click)="changePassword(user)" *ngIf="SCREEN | accessCtrl: 'change-password'" data-screen-id="user-management" data-component-id="change-password">
+                            <mat-icon svgIcon="key" class="icon-size-4"></mat-icon>
+                          </button>
+                          <% if (iam.userAccess !== false) { %>
+                          <button mat-icon-button type="button" class="h-8 w-8 text-primary-700 dark:text-primary-400" title="Assign roles" (click)="assignRoleMatrix(user)" *ngIf="SCREEN | accessCtrl: 'access'" data-screen-id="user-management" data-component-id="access">
+                            <mat-icon svgIcon="shield-check" class="icon-size-4"></mat-icon>
+                          </button>
+                          <% } %>
+                          <% if (iam.userPermissions !== false) { %>
+                          <button mat-icon-button type="button" class="h-8 w-8 text-indigo-600 dark:text-indigo-400" title="Assign permissions" (click)="assignUserMatrix(user)" *ngIf="SCREEN | accessCtrl: 'permissions'" data-screen-id="user-management" data-component-id="permissions">
+                            <mat-icon svgIcon="lock-keyhole" class="icon-size-4"></mat-icon>
+                          </button>
+                          <% } %>
+                          <button mat-icon-button type="button" class="h-8 w-8 text-rose-600" title="Delete user" (click)="remove(user)" *ngIf="SCREEN | accessCtrl: 'delete'" data-screen-id="user-management" data-component-id="delete">
+                            <mat-icon svgIcon="trash" class="icon-size-4"></mat-icon>
+                          </button>
+                        </div>
+                      </div>
+                    </article>
+                  } @empty {
+                    <div class="col-span-full rounded-2xl border border-dashed border-slate-300 bg-slate-50 px-6 py-16 text-center text-slate-500">No users found.</div>
+                  }
+                }
+              </div>
+            </div>
+          }
+        </div>
+
+        <mat-paginator
+          class="sticky bottom-0 z-10 flex-0 shrink-0 border-t border-slate-200 bg-white [&_.mat-mdc-paginator-container]:justify-start dark:border-slate-800 dark:bg-neutral-950"
+          [length]="totalItems"
+          [pageIndex]="pageIndex"
+          [pageSize]="pageSize"
+          [pageSizeOptions]="pageSizeOptions"
+          (page)="onPage($event)"
+        ></mat-paginator>
+      </div>
+    </div>
+  </mat-drawer-content>
+
+  <mat-menu #flagMenu="matMenu">
+    @for (option of rowFlagOptions; track option.key) {
+      <button mat-menu-item type="button" (click)="setFlagColor(option.key)">
+        <mat-icon svgIcon="flag" class="mr-3" [ngClass]="option.iconClass"></mat-icon>
+        <span>{{ option.label }}</span>
+      </button>
+    }
+    <button mat-menu-item type="button" (click)="setFlagColor(null)">
+      <mat-icon svgIcon="x" class="mr-3 text-neutral-500"></mat-icon>
+      <span>Clear Flag</span>
+    </button>
+  </mat-menu>
+
+  <mat-menu #columnPreferenceMenu="matMenu" class="min-w-72">
+    <div class="px-4 py-3">
+      <div class="text-sm font-semibold">Column Preferences</div>
+      <div class="text-secondary text-xs">Choose which columns appear in the table.</div>
+    </div>
+    <div class="max-h-80 overflow-y-auto px-2 pb-2">
+      @for (column of allColumns; track column.key) {
+        <div class="flex items-center justify-between gap-3 rounded-lg px-3 py-2 hover:bg-neutral-100 dark:hover:bg-white/5">
+          <span class="text-sm font-medium">{{ column.label }}</span>
+          <mat-slide-toggle [checked]="isColumnVisible(column.key)" (click)="$event.stopPropagation()" (change)="toggleColumn(column.key)"></mat-slide-toggle>
+        </div>
+      }
+    </div>
+  </mat-menu>
+
+  <mat-drawer #drawer mode="over" position="end" class="cforge-form-drawer w-full max-w-3xl">
+    <div class="flex h-full w-full min-w-0 flex-col bg-card" [class.p-0]="drawerMode === 'view'" [class.p-6]="drawerMode !== 'view'">
+      @if (drawer.opened && drawerMode !== 'view') {
+        <app-user-form class="block h-full w-full min-w-0 flex-1" [user]="selectedUser" [mode]="drawerMode === 'edit' ? 'edit' : 'create'" (saved)="onFormSaved()" (cancelled)="closeDrawer()"></app-user-form>
+      }
+      @if (drawer.opened && drawerMode === 'view') {
+        <app-user-detail class="block h-full w-full min-w-0 flex-1 overflow-auto" [userId]="selectedUser?.id || null" (closed)="closeDrawer()"></app-user-detail>
+      }
+    </div>
+  </mat-drawer>
+</mat-drawer-container>

package/src/templates/angular/iam/user-list.component.scss.ejs

@@ -0,0 +1,242 @@
+:host {
+  display: flex;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+mat-drawer-container {
+  background: transparent;
+  min-height: 0;
+}
+
+mat-drawer {
+  background-color: var(--fuse-bg-card);
+  border-left: 1px solid var(--fuse-border);
+}
+
+.icon-size-4 {
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+}
+
+/* Table chrome — match PMB / auditor staff profile */
+.mat-mdc-header-row {
+  background: var(--mat-sys-surface-bright) !important;
+}
+
+.mat-mdc-header-cell {
+  background: var(--mat-sys-surface-bright) !important;
+  z-index: 10 !important;
+  border-bottom: 1px solid var(--mat-sys-outline-variant) !important;
+}
+
+tr:nth-child(even) {
+  background: var(--mat-sys-surface-container-low) !important;
+}
+
+tr:nth-child(odd) {
+  background: var(--mat-sys-surface-bright) !important;
+}
+
+table {
+  width: 100%;
+}
+
+td.mat-mdc-cell,
+th.mat-mdc-header-cell {
+  padding: 12px 16px;
+}
+
+th.mat-column-actions.mat-mdc-table-sticky,
+td.mat-column-actions.mat-mdc-table-sticky {
+  z-index: 11 !important;
+  border-left: 1px solid var(--mat-sys-outline-variant);
+}
+
+tr:nth-child(odd) th.mat-column-actions.mat-mdc-table-sticky,
+tr:nth-child(odd) td.mat-column-actions.mat-mdc-table-sticky {
+  background: var(--mat-sys-surface-bright) !important;
+}
+
+tr:nth-child(even) td.mat-column-actions.mat-mdc-table-sticky {
+  background: var(--mat-sys-surface-container-low) !important;
+}
+
+.mat-mdc-header-cell.mat-column-actions.mat-mdc-table-sticky {
+  z-index: 12 !important;
+}
+
+.bg-card {
+  background-color: var(--fuse-bg-card);
+}
+
+/* 3D rocker switch (Uiverse.io by Nawsome) — PMB enabled column */
+.rocker-switch {
+  display: inline-block;
+  background-color: black;
+  width: 32px;
+  height: 42px;
+  box-shadow:
+    0 0 4px 1px rgba(0, 0, 0, 0.3),
+    0 0 1px 1px black,
+    inset 0 1px 1px -1px white,
+    inset 0 0 1px 3px #47434c,
+    inset 0 0 1px 5px black;
+  border-radius: 5px;
+  padding: 4px;
+  perspective: 160px;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+}
+
+.rocker-switch input {
+  display: none;
+}
+
+.rocker-switch input:checked + .rocker-button {
+  transform: translateZ(5px) rotateX(25deg);
+  box-shadow: 0 -4px 10px #ff1818;
+  background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
+}
+
+.rocker-switch input:checked + .rocker-button .rocker-light {
+  animation: flicker 0.2s infinite 0.3s;
+  opacity: 1;
+}
+
+.rocker-switch input:checked + .rocker-button .rocker-shine {
+  opacity: 1;
+}
+
+.rocker-switch input:checked + .rocker-button .rocker-shadow {
+  opacity: 0;
+}
+
+.rocker-switch .rocker-button {
+  display: block;
+  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
+  transform-origin: center center -5px;
+  transform: translateZ(5px) rotateX(-25deg);
+  transform-style: preserve-3d;
+  height: 100%;
+  position: relative;
+  cursor: pointer;
+  background: linear-gradient(#3a3a3a 0%, #222222 30%, #222222 70%, #3a3a3a 100%);
+  background-repeat: no-repeat;
+  border-radius: 3px;
+}
+
+.rocker-switch .rocker-button::before {
+  content: "";
+  background:
+    linear-gradient(rgba(255, 255, 255, 0.6) 10%, rgba(255, 255, 255, 0.2) 30%, #444 75%, #111) 50% 50% / 97% 97%,
+    #333;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 10px;
+  transform-origin: top;
+  transform: rotateX(-90deg);
+  position: absolute;
+  top: 0;
+}
+
+.rocker-switch .rocker-button::after {
+  content: "";
+  background-image: linear-gradient(#333, #111);
+  width: 100%;
+  height: 10px;
+  transform-origin: top;
+  transform: translateY(10px) rotateX(-90deg);
+  position: absolute;
+  bottom: 0;
+  box-shadow:
+    0 10px 3px 0 black,
+    0 15px 5px 0 rgba(0, 0, 0, 0.5);
+}
+
+.rocker-switch input:checked + .rocker-button::before {
+  background:
+    linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50% / 97% 97%,
+    #b10000;
+}
+
+.rocker-switch input:checked + .rocker-button::after {
+  background-image: linear-gradient(#650000, #320000);
+}
+
+.rocker-switch .rocker-light {
+  opacity: 0;
+  animation: light-off 1s;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
+}
+
+.rocker-switch .rocker-dots {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-image: radial-gradient(transparent 30%, rgba(0, 0, 0, 0.5) 70%);
+  background-size: 3px 3px;
+}
+
+.rocker-switch .rocker-characters {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background:
+    linear-gradient(white, white) 50% 18% / 6% 22%,
+    radial-gradient(circle, transparent 48%, white 50%, white 68%, transparent 70%) 50% 80% / 34% 24%;
+  background-repeat: no-repeat;
+}
+
+.rocker-switch .rocker-shine {
+  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
+  opacity: 0.3;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background:
+    linear-gradient(white, transparent 3%) 50% 50% / 97% 97%,
+    linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50% / 97%
+      97%;
+  background-repeat: no-repeat;
+}
+
+.rocker-switch .rocker-shadow {
+  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
+  opacity: 1;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));
+  background-repeat: no-repeat;
+}
+
+@keyframes flicker {
+  0% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 0.8;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes light-off {
+  0% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 0;
+  }
+}