feat(admin-cms): user detail page, profile menu, and permission fixes

- Rebuild user detail page: avatar with initials fallback, active/inactive
  status chip, country name resolved via API (locale-aware), translated
  knowledge level and locale preference, roles as translated chips
- Remove Assign Roles from detail page (no longer needed)
- Fix RTL back arrow: arrow_forward in Arabic, arrow_back in English
- Replace header username label with account_circle icon button that opens
  a mat-menu dropdown showing full name, email, and sign out action
- Scope UserDelete permission to SuperAdmin only; Admin keeps ALL_PERMISSIONS
  without delete; add UserDelete to contracts and SUPER_ADMIN_PERMISSIONS
- Fix paginator i18n: subscribe to translationLoadSuccess so labels update
  once the translation file finishes loading (not just on lang change)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: ayman-aboelabbas

frontend/apps/admin-cms/src/app/core/auth/auth.service.ts

@@ -37,8 +37,13 @@ const ALL_PERMISSIONS: readonly CcePermission[] = [
   CcePermission.SettingsManage,
 ];
 
+const SUPER_ADMIN_PERMISSIONS: readonly CcePermission[] = [
+  ...ALL_PERMISSIONS,
+  CcePermission.UserDelete,
+];
+
 const PERMISSIONS_BY_ROLE: Record<CceAdminRole, readonly CcePermission[]> = {
-  [CceAdminRole.SuperAdmin]: ALL_PERMISSIONS,
+  [CceAdminRole.SuperAdmin]: SUPER_ADMIN_PERMISSIONS,
   [CceAdminRole.Admin]:      ALL_PERMISSIONS,
   [CceAdminRole.ContentManager]: [
     CcePermission.ResourceCenterUpload,
@@ -104,11 +109,11 @@ export class AuthService {
     }
     this._accessToken.set(tokens.accessToken);
     localStorage.setItem(REFRESH_TOKEN_KEY, tokens.refreshToken);
-    // Fall back to ALL_PERMISSIONS when the API returns an empty roles array.
+    // Fall back to SUPER_ADMIN_PERMISSIONS when the API returns an empty roles array.
     // Remove once the backend includes roles in the login/refresh response.
     const permissions = tokens.user.roles.length > 0
       ? derivePermissions(tokens.user.roles)
-      : ALL_PERMISSIONS;
+      : SUPER_ADMIN_PERMISSIONS;
     this._currentUser.set({ ...tokens.user, permissions });
     const delay = new Date(tokens.accessTokenExpiresAtUtc).getTime() - Date.now() - 60_000;
     if (delay > 0) {

frontend/apps/admin-cms/src/app/core/layout/auth-toolbar.component.ts

@@ -1,33 +1,66 @@
 import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
 import { TranslocoModule } from '@jsverse/transloco';
 import { AuthService } from '../auth/auth.service';
 
 @Component({
   selector: 'cce-auth-toolbar',
   standalone: true,
-  imports: [MatButtonModule, MatIconModule, TranslocoModule],
+  imports: [MatButtonModule, MatDividerModule, MatIconModule, MatMenuModule, TranslocoModule],
   template: `
     @if (isAuthenticated()) {
-      <span class="cce-auth-toolbar__label">{{ userLabel() }}</span>
-      <button mat-icon-button shellHeaderEnd (click)="signOut()" [attr.aria-label]="'account.logout.button' | transloco">
-        <mat-icon>logout</mat-icon>
+      <button mat-icon-button shellHeaderEnd [matMenuTriggerFor]="profileMenu"
+              [attr.aria-label]="'account.profile' | transloco">
+        <mat-icon>account_circle</mat-icon>
       </button>
+
+      <mat-menu #profileMenu="matMenu" class="cce-profile-menu">
+        <div class="cce-profile-menu__header" (click)="$event.stopPropagation()">
+          <span class="cce-profile-menu__name">{{ fullName() }}</span>
+          <span class="cce-profile-menu__email">{{ email() }}</span>
+        </div>
+        <mat-divider />
+        <button mat-menu-item (click)="signOut()">
+          <mat-icon>logout</mat-icon>
+          {{ 'account.logout.button' | transloco }}
+        </button>
+      </mat-menu>
     }
   `,
-  styles: [`.cce-auth-toolbar__label { font-size: 0.875rem; opacity: 0.8; margin-inline-end: 0.25rem; }`],
+  styles: [`
+    .cce-profile-menu__header {
+      display: flex;
+      flex-direction: column;
+      padding: 12px 16px;
+      pointer-events: none;
+    }
+    .cce-profile-menu__name {
+      font-weight: 600;
+      font-size: 0.9rem;
+      line-height: 1.4;
+    }
+    .cce-profile-menu__email {
+      font-size: 0.8rem;
+      color: rgba(0,0,0,0.55);
+    }
+  `],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AuthToolbarComponent {
   private readonly auth = inject(AuthService);
 
   readonly isAuthenticated = this.auth.isAuthenticated;
-  readonly userLabel = computed(() => {
+
+  readonly fullName = computed(() => {
     const u = this.auth.currentUser();
     return u ? `${u.firstName} ${u.lastName}`.trim() : '';
   });
 
+  readonly email = computed(() => this.auth.currentUser()?.emailAddress ?? '');
+
   async signOut(): Promise<void> {
     await this.auth.signOut();
   }

frontend/apps/admin-cms/src/app/features/identity/user-detail.page.html

@@ -1,12 +1,12 @@
 <div class="cce-user-detail__header">
   <a mat-button routerLink="/users">
-    <mat-icon>arrow_back</mat-icon>
+    <mat-icon>{{ localeService.locale() === 'ar' ? 'arrow_forward' : 'arrow_back' }}</mat-icon>
     {{ 'users.detail.back' | transloco }}
   </a>
 </div>
 
 @if (loading()) {
-  <div class="cce-user-detail__status">{{ 'common.loading' | transloco }}</div>
+  <mat-progress-bar mode="indeterminate" />
 }
 
 @if (error(); as err) {
@@ -15,66 +15,80 @@
 
 @if (user(); as u) {
   <mat-card class="cce-user-detail__card">
-    <mat-card-header>
-      <mat-card-title>{{ u.userName ?? u.email ?? u.id }}</mat-card-title>
-      <mat-card-subtitle>{{ u.email ?? '—' }}</mat-card-subtitle>
-    </mat-card-header>
+
+    <!-- Profile header -->
+    <div class="cce-user-detail__profile">
+      <div class="cce-user-detail__avatar">
+        @if (u.avatarUrl) {
+          <img [src]="u.avatarUrl" [alt]="u.userName ?? ''" />
+        } @else {
+          {{ initials() }}
+        }
+      </div>
+      <div class="cce-user-detail__profile-info">
+        <h2 class="cce-user-detail__name">{{ u.userName ?? u.email ?? u.id }}</h2>
+        <p class="cce-user-detail__email">{{ u.email ?? '—' }}</p>
+        <mat-chip-set>
+          <mat-chip [class]="u.isActive ? 'cce-chip--active' : 'cce-chip--inactive'">
+            {{ (u.isActive ? 'users.detail.status.active' : 'users.detail.status.inactive') | transloco }}
+          </mat-chip>
+        </mat-chip-set>
+      </div>
+    </div>
+
+    <mat-divider />
+
     <mat-card-content>
       <dl class="cce-user-detail__list">
-        <dt>{{ 'users.detail.field.locale' | transloco }}</dt>
-        <dd>{{ u.localePreference }}</dd>
-        <dt>{{ 'users.detail.field.knowledgeLevel' | transloco }}</dt>
-        <dd>{{ u.knowledgeLevel }}</dd>
-        <dt>{{ 'users.detail.field.interests' | transloco }}</dt>
+
+        <dt>{{ 'users.detail.field.roles' | transloco }}</dt>
         <dd>
-          @if (u.interests.length) {
+          @if (u.roles.length) {
             <mat-chip-set>
-              @for (i of u.interests; track i) {
-                <mat-chip>{{ i }}</mat-chip>
+              @for (r of u.roles; track r) {
+                <mat-chip>{{ r | roleLabel | transloco }}</mat-chip>
               }
             </mat-chip-set>
-          } @else {
-            —
-          }
+          } @else { — }
         </dd>
+
         <dt>{{ 'users.detail.field.country' | transloco }}</dt>
-        <dd>{{ u.countryId ?? '—' }}</dd>
-        <dt>{{ 'users.detail.field.roles' | transloco }}</dt>
+        <dd>{{ countryName() }}</dd>
+
+        <dt>{{ 'users.detail.field.locale' | transloco }}</dt>
+        <dd>{{ ('common.locale.' + u.localePreference) | transloco }}</dd>
+
+        <dt>{{ 'users.detail.field.knowledgeLevel' | transloco }}</dt>
+        <dd>{{ knowledgeLevelKey(u.knowledgeLevel) | transloco }}</dd>
+
+        <dt>{{ 'users.detail.field.interests' | transloco }}</dt>
         <dd>
-          @if (u.roles.length) {
+          @if (u.interests.length) {
             <mat-chip-set>
-              @for (r of u.roles; track r) {
-                <mat-chip>{{ r | roleLabel | transloco }}</mat-chip>
+              @for (i of u.interests; track i) {
+                <mat-chip>{{ i }}</mat-chip>
               }
             </mat-chip-set>
-          } @else {
-            —
-          }
+          } @else { — }
         </dd>
-        <dt>{{ 'users.detail.field.isActive' | transloco }}</dt>
-        <dd>{{ u.isActive ? '✓' : '✗' }}</dd>
+
       </dl>
     </mat-card-content>
+
+    <mat-divider />
+
     <mat-card-actions align="end">
       <button
         type="button"
         mat-button
         color="warn"
-        *ccePermission="'User.Read'"
+        *ccePermission="Permission.UserDelete"
         (click)="deleteUser()"
       >
         <mat-icon>delete</mat-icon>
         {{ 'users.delete.button' | transloco }}
       </button>
-      <button
-        type="button"
-        mat-flat-button
-        color="primary"
-        *ccePermission="'Role.Assign'"
-        (click)="openRoleAssign()"
-      >
-        {{ 'roleAssign.openButton' | transloco }}
-      </button>
     </mat-card-actions>
+
   </mat-card>
 }

frontend/apps/admin-cms/src/app/features/identity/user-detail.page.scss

@@ -1,18 +1,13 @@
 :host {
   display: block;
   padding: 1.5rem;
-  max-width: 720px;
+  max-width: 760px;
 }
 
 .cce-user-detail__header {
   margin-bottom: 1rem;
 }
 
-.cce-user-detail__status {
-  padding: 1rem;
-  color: rgba(0, 0, 0, 0.6);
-}
-
 .cce-user-detail__error {
   background: #fdecea;
   color: #b00020;
@@ -25,20 +20,86 @@
   margin-top: 0.5rem;
 }
 
+// ── Profile header ───────────────────────────────────────────────────────────
+
+.cce-user-detail__profile {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 1.5rem 1.5rem 1.25rem;
+}
+
+.cce-user-detail__avatar {
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  background: #1565c0;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.75rem;
+  font-weight: 600;
+  flex-shrink: 0;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.cce-user-detail__profile-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.cce-user-detail__name {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.cce-user-detail__email {
+  margin: 0;
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 0.9rem;
+}
+
+// ── Fields list ──────────────────────────────────────────────────────────────
+
 .cce-user-detail__list {
   display: grid;
-  grid-template-columns: 200px 1fr;
-  row-gap: 0.75rem;
+  grid-template-columns: 180px 1fr;
+  row-gap: 1rem;
   column-gap: 1.5rem;
   margin: 0;
+  padding: 0.5rem 0;
 
   dt {
     font-weight: 600;
-    color: rgba(0, 0, 0, 0.7);
+    color: rgba(0, 0, 0, 0.6);
+    font-size: 0.875rem;
     margin: 0;
+    padding-top: 0.25rem;
   }
 
   dd {
     margin: 0;
   }
 }
+
+// ── Status chips ─────────────────────────────────────────────────────────────
+
+::ng-deep .cce-chip--active.mat-mdc-chip {
+  --mdc-chip-label-text-color: #1b5e20;
+  background-color: #e8f5e9;
+}
+
+::ng-deep .cce-chip--inactive.mat-mdc-chip {
+  --mdc-chip-label-text-color: #b71c1c;
+  background-color: #ffebee;
+}