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

package/src/templates/angular/entity/service/_entity_.service.ts.ejs

@@ -0,0 +1,153 @@
+import { Injectable, inject } from '@angular/core';
+import { HttpClient, HttpResponse, HttpParams, HttpHeaders } from '@angular/common/http';
+import { Observable, of } from 'rxjs';
+import { map, delay } from 'rxjs/operators';
+import dayjs from 'dayjs/esm';
+import { normalizeInputFields } from '<%= preferences.fuse?.enabled ? '@/app/domains/admin/modules/apps/shared/base' : preferences.architecture?.centralizedSharedFolder ? '../../../shared/base' : '../shared/base' %>/input-format';
+
+import { <%= toCamelCase(entity.name) %>Settings } from '../settings/settings.config';
+<% if (preferences.mock?.enabled) { %>
+import { mockData } from '../mock/data';
+<% } %>
+
+import { <%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>, New<%= entity.name %> } from '../<%= toKebabCase(entity.name) %>.model';
+
+<% 
+const dateFields = entity.fields.filter(f => ['LocalDate', 'Instant', 'ZonedDateTime'].includes(f.fieldType));
+const hasDateFields = dateFields.length > 0;
+%>
+
+export type PartialUpdate<%= entity.name %> = Partial<<%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>> & Pick<<%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>, 'id'>;
+
+// --- Define REST-safe types by converting Dayjs objects to strings ---
+type RestOf<T extends <%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %> | New<%= entity.name %> | PartialUpdate<%= entity.name %>> = Omit<T, <%- hasDateFields ? dateFields.map(f => `'${f.fieldName}'`).join(' | ') : 'never' %>> & {
+  <% dateFields.forEach(field => { %>
+  <%= field.fieldName %>?: string | null;
+  <% }); %>
+};
+
+export type Rest<%= entity.name %> = RestOf<<%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>>;
+export type NewRest<%= entity.name %> = RestOf<New<%= entity.name %>>;
+export type PartialUpdateRest<%= entity.name %> = RestOf<PartialUpdate<%= entity.name %>>;
+
+export type EntityResponseType = HttpResponse<<%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>>;
+export type EntityArrayResponseType = HttpResponse<<%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>[]>;
+
+@Injectable({ providedIn: 'root' })
+export class <%= entity.name %>Service {
+  protected readonly http = inject(HttpClient);
+  protected resourceUrl = `<%= (entity.microservice || config.api?.microservice) ? '/services/' + (entity.microservice || config.api.microservice) : '' %><%= (config.api?.baseUrl || '/api').replace(/\/$/, '') %>/<%= toKebabCase(entity.name) %>s`;
+
+  create(payload: New<%= entity.name %>): Observable<EntityResponseType> {
+    const copy = this.convertDateFromClient(payload);
+<% if (preferences.mock?.enabled) { %>
+    if (<%= toCamelCase(entity.name) %>Settings.useMockData) {
+      return of(new HttpResponse({ status: 201, body: { ...copy, id: Math.floor(Math.random() * 1000) } as any })).pipe(delay(500), map(res => this.convertResponseFromServer(res)));
+    }
+<% } %>
+    return this.http.post<Rest<%= entity.name %>>(this.resourceUrl, copy, { observe: 'response' }).pipe(map(res => this.convertResponseFromServer(res)));
+  }
+
+  update(payload: <%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>): Observable<EntityResponseType> {
+    const copy = this.convertDateFromClient(payload);
+<% if (preferences.mock?.enabled) { %>
+    if (<%= toCamelCase(entity.name) %>Settings.useMockData) {
+      return of(new HttpResponse({ status: 200, body: copy as any })).pipe(delay(500), map(res => this.convertResponseFromServer(res)));
+    }
+<% } %>
+    return this.http.put<Rest<%= entity.name %>>(`${this.resourceUrl}/${payload.id}`, copy, { observe: 'response' }).pipe(map(res => this.convertResponseFromServer(res)));
+  }
+
+  find(id: number): Observable<EntityResponseType> {
+<% if (preferences.mock?.enabled) { %>
+    if (<%= toCamelCase(entity.name) %>Settings.useMockData) {
+      const found = mockData.find((item: any) => item.id === id) || mockData[0];
+      return of(new HttpResponse({ status: 200, body: found as any })).pipe(delay(500), map(res => this.convertResponseFromServer(res)));
+    }
+<% } %>
+    return this.http.get<Rest<%= entity.name %>>(`${this.resourceUrl}/${id}`, { observe: 'response' }).pipe(map(res => this.convertResponseFromServer(res)));
+  }
+
+  query(req?: any): Observable<EntityArrayResponseType> {
+<% if (preferences.mock?.enabled) { %>
+    if (<%= toCamelCase(entity.name) %>Settings.useMockData) {
+      const page = req?.page ?? 0;
+      const size = req?.size ?? 20;
+      let filtered = [...mockData];
+      if (req?.query) {
+        const query = String(req.query).toLowerCase();
+        filtered = filtered.filter(item =>
+          Object.values(item).some(value => String(value ?? '').toLowerCase().includes(query))
+        );
+      }
+      Object.keys(req || {}).forEach(key => {
+        if (!key.endsWith('.contains')) {
+          return;
+        }
+        const field = key.replace(/\.contains$/, '');
+        const query = String(req[key]).toLowerCase();
+        filtered = filtered.filter(item => String((item as any)[field] ?? '').toLowerCase().includes(query));
+      });
+      const start = page * size;
+      const paginatedData = filtered.slice(start, start + size);
+      return of(new HttpResponse({ 
+        status: 200, 
+        body: paginatedData as any,
+        headers: new HttpHeaders({ 'X-Total-Count': filtered.length.toString() })
+      })).pipe(delay(500), map(res => this.convertResponseArrayFromServer(res)));
+    }
+<% } %>
+    const options = this.createRequestOption(req);
+    return this.http.get<Rest<%= entity.name %>[]>(this.resourceUrl, { params: options, observe: 'response' }).pipe(map(res => this.convertResponseArrayFromServer(res)));
+  }
+
+  delete(id: number): Observable<HttpResponse<{}>> {
+<% if (preferences.mock?.enabled) { %>
+    if (<%= toCamelCase(entity.name) %>Settings.useMockData) {
+      return of(new HttpResponse<{}>({ status: 204 })).pipe(delay(500));
+    }
+<% } %>
+    return this.http.delete(`${this.resourceUrl}/${id}`, { observe: 'response' });
+  }
+
+  protected createRequestOption(req?: any): HttpParams {
+    let options: HttpParams = new HttpParams();
+    if (req) {
+      Object.keys(req).forEach(key => {
+        if (req[key] !== null && req[key] !== undefined) {
+          options = options.set(key, req[key]);
+        }
+      });
+    }
+    return options;
+  }
+
+  // --- Date Conversion Helpers ---
+  protected convertDateFromClient<T extends <%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %> | New<%= entity.name %> | PartialUpdate<%= entity.name %>>(entity: T): RestOf<T> {
+    const copy: any = normalizeInputFields(entity, <%= toCamelCase(entity.name) %>Settings.fields);
+    <% dateFields.forEach(field => { %>
+    if (dayjs.isDayjs(entity.<%= field.fieldName %>)) {
+      copy.<%= field.fieldName %> = entity.<%= field.fieldName %>.toJSON();
+    }
+    <% }); %>
+    return copy;
+  }
+
+  protected convertDateFromServer(restEntity: Rest<%= entity.name %>): <%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %> {
+    const entity: any = { ...restEntity };
+    <% dateFields.forEach(field => { %>
+    if (entity.<%= field.fieldName %>) {
+        entity.<%= field.fieldName %> = dayjs(entity.<%= field.fieldName %>);
+    }
+    <% }); %>
+    return entity;
+  }
+  
+  protected convertResponseFromServer(res: HttpResponse<Rest<%= entity.name %>>): HttpResponse<<%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>> {
+    return res.clone({ body: res.body ? this.convertDateFromServer(res.body) : null });
+  }
+
+  protected convertResponseArrayFromServer(res: HttpResponse<Rest<%= entity.name %>[]>): HttpResponse<<%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>[]> {
+    return res.clone({ body: res.body ? res.body.map(item => this.convertDateFromServer(item)) : null });
+  }
+}

package/src/templates/angular/entity/settings/_entity_.settings.ts.ejs

@@ -0,0 +1,49 @@
+/**
+ * settings.config.ts — runtime UI settings for <%= entity.name %>
+ *
+ * Edit these values to change list/form behavior without re-running the generator.
+ * Prefer changing `config/config.yml` (or `fields.entities`) and regenerating when
+ * you want the defaults to stick for the whole project.
+ *
+ * ---------------------------------------------------------------------------
+ * Keywords (accepted values)
+ * ---------------------------------------------------------------------------
+ * fields.<fieldName>.inputFormat  → 'uppercase' | 'lowercase' | 'none'
+ * viewMode                        → 'table' | 'card'
+ * formMode                        → 'sidebar' | 'page'   (new + edit share one mode)
+ * searchMode                      → 'field' | 'global'  (global only if API accepts `query`)
+ * useMockData                     → true | false
+ * snackbarPositionTop             → true | false
+ * snackbarSuccessColor / Error    → CSS color string, e.g. '#16a34a'
+ * searchable                      → true | false  (from GDL/JDL @Searchable)
+ * activeStatus                    → true | false  (from GDL/JDL @ActiveStatus)
+ *
+ * ---------------------------------------------------------------------------
+ * Samples
+ * ---------------------------------------------------------------------------
+ * fields: {
+ *   regionCode: { inputFormat: 'uppercase' },
+ *   email: { inputFormat: 'lowercase' },
+ *   notes: { inputFormat: 'none' },
+ * }
+ * viewMode: 'card'
+ * formMode: 'page'
+ * searchMode: 'field'
+ * useMockData: true
+ * snackbarPositionTop: false
+ * snackbarSuccessColor: '#16a34a'
+ * snackbarErrorColor: '#dc2626'
+ */
+
+export const <%= toCamelCase(entity.name) %>Settings = {
+  fields: <%- JSON.stringify(typeof fieldSettings === 'undefined' ? {} : fieldSettings, null, 2) %> as const,
+  useMockData: <%= preferences.mock?.enabled === true %>,
+  snackbarPositionTop: <%= preferences.ui?.snackbarPositionTop === true %>,
+  snackbarSuccessColor: '<%= preferences.ui?.styling?.snackbarSuccessColor || "#16a34a" %>',
+  snackbarErrorColor: '<%= preferences.ui?.styling?.snackbarErrorColor || "#dc2626" %>',
+  viewMode: '<%= preferences.ui?.viewMode || "table" %>',
+  formMode: '<%= preferences.ui?.formMode || "sidebar" %>',
+  searchMode: '<%= preferences.ui?.searchMode || "field" %>',
+  searchable: <%= entity.searchable === true %>,
+  activeStatus: <%= entity.activeStatus === true %>
+};

package/src/templates/angular/enums/_enum_.model.ts.ejs

@@ -0,0 +1,11 @@
+// This is a generated enum file.
+export enum <%= enumDef.name %> {
+  <% enumDef.values.forEach((value, index) => { %>
+  <% 
+    let valName = value.name;
+    if (preferences.namingConventions?.enumValueCasing === 'uppercase') valName = valName.toUpperCase();
+    if (preferences.namingConventions?.enumValueCasing === 'lowercase') valName = valName.toLowerCase();
+  %>
+  <%= value.name.toUpperCase() %> = '<%= valName %>'<%= index < enumDef.values.length - 1 ? ',' : '' %>
+  <% }); %>
+}

package/src/templates/angular/iam/change-password.component.html.ejs

@@ -0,0 +1,39 @@
+<div class="overflow-hidden">
+  <div class="border-b border-slate-200 px-6 py-5 dark:border-slate-800">
+    <div class="flex items-start gap-4">
+      <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+        <mat-icon svgIcon="key"></mat-icon>
+      </div>
+      <div class="min-w-0 flex-1">
+        <h2 mat-dialog-title class="!p-0 text-xl font-semibold tracking-tight">Change password</h2>
+        <p class="mt-2 text-sm leading-6 text-slate-600 dark:text-slate-300">
+          Set a new password for this user. They can sign in immediately with the updated credentials.
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <form [formGroup]="form" (ngSubmit)="save()" class="px-6 py-5">
+    <mat-form-field appearance="outline" subscriptSizing="dynamic" class="w-full">
+      <mat-label>New password</mat-label>
+      <mat-icon matPrefix svgIcon="lock-keyhole" class="mr-2 text-slate-500"></mat-icon>
+      <input matInput formControlName="password" [type]="hidePassword ? 'password' : 'text'" autocomplete="new-password" />
+      <button mat-icon-button matSuffix type="button" (click)="hidePassword = !hidePassword" [attr.aria-label]="hidePassword ? 'Show password' : 'Hide password'">
+        <mat-icon [svgIcon]="hidePassword ? 'eye-off' : 'eye'"></mat-icon>
+      </button>
+    </mat-form-field>
+
+    <div class="mt-4 flex items-center justify-between rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 dark:border-slate-800 dark:bg-slate-900">
+      <div>
+        <div class="text-sm font-semibold">Temporary password</div>
+        <div class="text-xs text-slate-500">Require the user to reset this password on next login</div>
+      </div>
+      <mat-slide-toggle formControlName="temporary" color="primary"></mat-slide-toggle>
+    </div>
+
+    <div class="mt-5 flex items-center justify-end gap-3">
+      <button mat-stroked-button type="button" (click)="dialogRef.close(false)">Cancel</button>
+      <button mat-flat-button color="primary" type="submit" [disabled]="form.invalid">Save</button>
+    </div>
+  </form>
+</div>

package/src/templates/angular/iam/change-password.component.ts.ejs

@@ -0,0 +1,44 @@
+import { Component, inject } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { KeycloakAdminService } from '@/app/core/auth';
+
+@Component({
+  selector: 'app-change-password',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatSlideToggleModule,
+  ],
+  templateUrl: './change-password.component.html',
+})
+export class ChangePasswordComponent {
+  private readonly fb = inject(FormBuilder);
+  private readonly keycloak = inject(KeycloakAdminService);
+  readonly dialogRef = inject(MatDialogRef<ChangePasswordComponent, boolean>);
+  readonly userId = inject(MAT_DIALOG_DATA) as string;
+  hidePassword = true;
+  readonly form = this.fb.nonNullable.group({
+    password: ['', Validators.required],
+    temporary: [true],
+  });
+
+  save(): void {
+    const value = this.form.getRawValue();
+    this.keycloak.resetPassword(this.userId, {
+      type: 'password',
+      value: value.password,
+      temporary: value.temporary,
+    }).subscribe(() => this.dialogRef.close(true));
+  }
+}

package/src/templates/angular/iam/no-access.component.ts.ejs

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-no-access',
+  standalone: true,
+  template: `
+    <div class="flex flex-col flex-auto items-center justify-center p-6 sm:p-10">
+      <div class="text-4xl font-extrabold tracking-tight text-center sm:text-5xl">
+        No screens assigned
+      </div>
+      <div class="mt-4 max-w-lg text-lg text-center text-secondary">
+        Your account is signed in, but no screens are available yet. Ask an administrator to grant access.
+      </div>
+    </div>
+  `,
+})
+export default class NoAccessComponent {}

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

@@ -0,0 +1,331 @@
+<div class="flex h-full min-w-0 flex-auto flex-col overflow-hidden bg-slate-50 dark:bg-slate-900">
+  <div class="z-10 flex flex-0 flex-col border-b bg-white p-6 shadow-sm sm:flex-row sm:items-center sm:justify-between sm:py-8 dark:bg-slate-900">
+    <div class="min-w-0 flex-1">
+      <div class="flex items-center gap-x-2 text-xs font-semibold uppercase tracking-wider text-slate-500">
+        <a
+          routerLink=".."
+          class="text-primary-600 hover:underline dark:text-primary-400"
+        >Users</a>
+        <span class="text-slate-400">/</span>
+        <span>Role Management</span>
+      </div>
+      <div class="mt-2 text-3xl font-extrabold leading-none tracking-tight text-slate-900 dark:text-white">
+        Roles & Access Management
+      </div>
+    </div>
+    <div class="mt-6 flex shrink-0 items-center gap-4 sm:mt-0">
+      <button
+        *ngIf="selectedRole()?.name && (SCREEN | accessCtrl: 'sync-holders')"
+        id="qa-role-management__sync-holders"
+        data-qa-id="qa-role-management__sync-holders"
+        data-component-id="sync-holders"
+        data-screen-id="role-management"
+        type="button"
+        (click)="syncSelectedRoleHolders()"
+        [disabled]="isSyncingHolders()"
+        class="inline-flex items-center justify-center rounded-xl border border-amber-200 bg-amber-50 px-4 py-2 text-sm font-semibold text-amber-900 shadow-sm transition hover:bg-amber-100 focus:outline-none disabled:opacity-50 dark:border-amber-900/50 dark:bg-amber-950/30 dark:text-amber-200 dark:hover:bg-amber-950/50"
+        title="Rebuild user attributes from assigned roles for everyone holding this role"
+      >
+        <mat-icon class="mr-2" [class.animate-spin]="isSyncingHolders()" svgIcon="refresh-cw"></mat-icon>
+        <span>{{ isSyncingHolders() ? 'Syncing…' : 'Sync holders' }}</span>
+      </button>
+      <% if (iam.rolePermissions !== false) { %>
+      <a
+        *ngIf="SCREEN | accessCtrl: 'role-permissions'"
+        id="qa-role-management__role-permissions"
+        data-qa-id="qa-role-management__role-permissions"
+        data-component-id="role-permissions"
+        data-screen-id="role-management"
+        routerLink="../role-permissions"
+        class="inline-flex items-center justify-center rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50 focus:outline-none dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700"
+      >
+        <mat-icon class="mr-2 text-slate-500 dark:text-slate-400" svgIcon="layers"></mat-icon>
+        <span>Permission Matrix</span>
+      </a>
+      <% } %>
+      <button
+        id="qa-role-management__toggle-create-form"
+        data-qa-id="qa-role-management__toggle-create-form"
+        data-component-id="toggle-create-form"
+        data-screen-id="role-management"
+        *ngIf="SCREEN | accessCtrl: 'toggle-create-form'"
+        type="button"
+        (click)="toggleCreateForm()"
+        class="inline-flex items-center justify-center rounded-xl bg-primary-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-primary-700 focus:outline-none"
+      >
+        <mat-icon class="mr-2" [svgIcon]="showCreateForm() ? 'x' : 'plus'"></mat-icon>
+        <span>{{ showCreateForm() ? 'Cancel' : 'Create Role' }}</span>
+      </button>
+    </div>
+  </div>
+
+  <div class="main-content-layout relative flex min-h-0 flex-auto flex-row overflow-hidden">
+    <div
+      class="flex min-w-0 flex-auto flex-col border-r bg-white transition-all duration-300 md:w-80 md:flex-initial lg:w-96 dark:bg-slate-900"
+      [class.hidden]="isMobile() && showMobileDetails() && selectedRole()"
+    >
+      <div class="flex flex-col gap-3 border-b p-4">
+        <div class="text-sm font-bold uppercase tracking-wide text-slate-900 dark:text-white">Roles</div>
+        <div class="relative flex 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)="searchQuery.set($any($event.target).value); rolesPage.set(0)"
+            placeholder="Search roles..."
+            class="w-full rounded-xl border border-slate-200 bg-white py-2 pl-9 pr-9 text-sm 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"
+          />
+          @if (searchQuery()) {
+            <button
+              id="qa-role-management__search-clear"
+              data-qa-id="qa-role-management__search-clear"
+              data-component-id="search-clear"
+              data-screen-id="role-management"
+              *ngIf="SCREEN | accessCtrl: 'search-clear'"
+              type="button"
+              (click)="searchQuery.set(''); rolesPage.set(0)"
+              title="Clear role search"
+              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>
+
+      <div class="no-scrollbar flex-auto space-y-3 overflow-y-auto p-4">
+        <div
+          id="qa-role-management__select-role"
+          data-qa-id="qa-role-management__select-role"
+          data-component-id="select-role"
+          data-screen-id="role-management"
+          *ngFor="let role of paginatedRoles()"
+          (click)="selectRole(role)"
+          [matTooltip]="getRoleTooltip(role.name)"
+          matTooltipPosition="above"
+          [class.border-primary-500]="selectedRole()?.name === role.name"
+          [class.bg-primary-50]="selectedRole()?.name === role.name"
+          [class.dark:bg-primary-900/20]="selectedRole()?.name === role.name"
+          [class.bg-white]="selectedRole()?.name !== role.name"
+          [class.dark:bg-slate-900]="selectedRole()?.name !== role.name"
+          [class.border-slate-200]="selectedRole()?.name !== role.name"
+          [class.dark:border-slate-800]="selectedRole()?.name !== role.name"
+          class="group relative flex cursor-pointer flex-col overflow-hidden rounded-xl border p-4 shadow-sm transition hover:bg-slate-50 dark:hover:bg-slate-800/40"
+        >
+          <div class="flex items-start justify-between gap-2">
+            <div class="flex items-center gap-2.5">
+              <div class="flex size-8 shrink-0 items-center justify-center rounded-lg shadow-xs" [ngClass]="getRoleBadgeClass(role.name)">
+                <mat-icon [svgIcon]="getRoleIcon(role.name)" class="size-4"></mat-icon>
+              </div>
+              <div class="text-sm font-bold text-slate-900 dark:text-white">
+                {{ cleanRoleName(role.name || '') }}
+              </div>
+            </div>
+            <mat-icon
+              *ngIf="selectedRole()?.name === role.name"
+              svgIcon="circle-check"
+              class="size-5 shrink-0 text-primary-600 dark:text-primary-400"
+            ></mat-icon>
+          </div>
+
+          <div class="mt-2 truncate pr-24 text-xs text-slate-500 dark:text-slate-400">
+            {{ role.description || 'No description provided.' }}
+          </div>
+
+          <div class="mt-3 flex flex-wrap items-center gap-2">
+            <span [ngClass]="getRoleBadgeClass(role.name)" class="rounded-lg border px-2.5 py-0.5 font-mono text-xs font-bold shadow-2xs">
+              {{ cleanRoleName(role.name || '') }}
+            </span>
+            <% if (iam.inheritance !== false) { %>
+            <span
+              *ngIf="role.attributes?.['parentRole']?.[0]"
+              class="rounded-lg border border-indigo-200 bg-indigo-50 px-2.5 py-0.5 text-xs font-bold text-indigo-900 dark:border-indigo-900/40 dark:bg-indigo-950/30 dark:text-indigo-400"
+            >
+              Inherits: {{ cleanRoleName(role.attributes?.['parentRole']?.[0]) }}
+            </span>
+            <% } %>
+          </div>
+
+          <div
+            *ngIf="isCoreSystemRole(role.name)"
+            class="absolute bottom-0 right-0 z-10 inline-flex items-center gap-1.5 rounded-tl-xl border-l border-t border-rose-200 bg-rose-50 px-3 py-1 text-xs font-extrabold text-rose-900 shadow-xs dark:border-rose-900/60 dark:bg-rose-950/80 dark:text-rose-300"
+            matTooltip="Core Platform Role — Mandatory for system operation & security"
+            matTooltipPosition="above"
+          >
+            <mat-icon svgIcon="lock" class="size-4 animate-pulse text-rose-600 dark:text-rose-400"></mat-icon>
+            <span>Core Required</span>
+          </div>
+        </div>
+
+        <div *ngIf="paginatedRoles().length === 0" class="p-8 text-center text-sm text-slate-500 dark:text-slate-400">
+          No matching custom roles found.
+        </div>
+      </div>
+
+      <div class="flex h-14 flex-0 shrink-0 items-center border-t border-neutral-200 bg-white px-4 dark:border-slate-800 dark:bg-slate-900">
+        <mat-paginator
+          class="w-full bg-transparent [&_.mat-mdc-paginator-container]:justify-between [&_.mat-mdc-paginator-page-size]:hidden"
+          [length]="filteredRoles().length"
+          [pageSize]="rolesPageSize"
+          [pageIndex]="rolesPage()"
+          [hidePageSize]="true"
+          [showFirstLastButtons]="false"
+          (page)="onRolesPageChange($event)"
+        >
+        </mat-paginator>
+      </div>
+    </div>
+
+    <div
+      class="flex min-w-0 flex-auto flex-col overflow-y-auto bg-slate-50 dark:bg-slate-950"
+      [class.hidden]="isMobile() && !showMobileDetails() && !showCreateForm()"
+    >
+      <div
+        *ngIf="isMobile() && (showMobileDetails() || showCreateForm())"
+        class="z-10 flex items-center justify-between border-b bg-white p-4 shadow-sm dark:bg-slate-900"
+      >
+        <button
+          id="qa-role-management__go-back-to-list"
+          data-qa-id="qa-role-management__go-back-to-list"
+          data-component-id="go-back-to-list"
+          data-screen-id="role-management"
+          *ngIf="SCREEN | accessCtrl: 'go-back-to-list'"
+          type="button"
+          (click)="goBackToList()"
+          class="inline-flex items-center text-sm font-semibold text-primary-600 hover:text-primary-700 focus:outline-none"
+        >
+          <mat-icon svgIcon="arrow-left" class="mr-1 size-5"></mat-icon>
+          <span>Back to Roles</span>
+        </button>
+      </div>
+
+      <div *ngIf="showCreateForm()" class="mx-auto w-full max-w-2xl p-6 md:p-10">
+        <div class="flex flex-col rounded-2xl border bg-white p-6 shadow-sm dark:bg-slate-900">
+          <div class="mb-2 flex items-center gap-2 text-xl font-extrabold text-slate-900 dark:text-white">
+            <mat-icon svgIcon="plus" class="size-5 text-primary-600"></mat-icon>
+            <span>New Identity Role</span>
+          </div>
+          <p class="mb-6 text-sm text-slate-500 dark:text-slate-400">
+            Create a standalone role with its own permissions. Configure screens and components in the Permission Matrix after creation.
+          </p>
+
+          <form [formGroup]="roleForm" (ngSubmit)="onSubmit()" class="flex flex-col gap-y-5">
+            <div>
+              <label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-700 dark:text-slate-300">
+                Role Name
+              </label>
+              <input
+                type="text"
+                formControlName="name"
+                placeholder="e.g. CAA_STAFF"
+                class="w-full rounded-xl border bg-white px-4 py-2.5 text-sm uppercase shadow-sm outline-none transition focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 dark:border-slate-700 dark:bg-slate-800"
+              />
+              @if (roleForm.get('name')?.invalid && roleForm.get('name')?.touched) {
+                <div class="mt-1 text-xs text-red-500">
+                  @if (roleForm.get('name')?.hasError('required')) {
+                    Role name is required.
+                  } @else {
+                    Use only letters, numbers, and underscores (e.g. CAA_STAFF).
+                  }
+                </div>
+              }
+            </div>
+
+            <div>
+              <label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-700 dark:text-slate-300">
+                Description
+              </label>
+              <textarea
+                formControlName="description"
+                rows="3"
+                placeholder="Define the role purpose..."
+                class="w-full rounded-xl border bg-white px-4 py-2.5 text-sm shadow-sm outline-none transition focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 dark:border-slate-700 dark:bg-slate-800"
+              ></textarea>
+              @if (roleForm.get('description')?.invalid && roleForm.get('description')?.touched) {
+                <div class="mt-1 text-xs text-red-500">
+                  Description is required.
+                </div>
+              }
+            </div>
+
+            <div class="mt-4 flex items-center justify-end gap-x-3 border-t pt-4">
+              <button
+                id="qa-role-management__toggle-create-form-2"
+                data-qa-id="qa-role-management__toggle-create-form-2"
+                data-component-id="toggle-create-form-2"
+                data-screen-id="role-management"
+                *ngIf="SCREEN | accessCtrl: 'toggle-create-form-2'"
+                type="button"
+                (click)="toggleCreateForm()"
+                class="rounded-xl px-4 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800"
+              >
+                Cancel
+              </button>
+              <button
+                id="qa-role-management__submit"
+                data-qa-id="qa-role-management__submit"
+                data-component-id="submit"
+                data-screen-id="role-management"
+                *ngIf="SCREEN | accessCtrl: 'submit'"
+                type="submit"
+                [disabled]="roleForm.invalid || isSubmitting()"
+                class="rounded-xl bg-primary-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-primary-700 disabled:opacity-50"
+              >
+                {{ isSubmitting() ? 'Saving...' : 'Create' }}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <div *ngIf="selectedRole() && !showCreateForm()" class="details-container w-full max-w-full space-y-6 p-6 md:p-8">
+        <app-role-header
+          [selectedRole]="selectedRole()"
+          [showEditPermissions]="<%= iam.rolePermissions !== false %>"
+          (editPermissions)="editPermissions($event)"
+          (duplicate)="duplicateRole($event)"
+        >
+        </app-role-header>
+
+        <div class="bento-grid mt-10 gap-6">
+          <div class="bento-col-main space-y-6">
+            <app-role-users
+              [searchQuery]="selectedRoleUsersSearchQuery()"
+              [filteredUsersCount]="filteredSelectedRoleUsers().length"
+              [paginatedUsers]="paginatedSelectedRoleUsers()"
+              [currentPage]="selectedRoleUsersPage()"
+              [totalPages]="totalSelectedRoleUsersPages()"
+              (searchQueryChange)="selectedRoleUsersSearchQuery.set($event); selectedRoleUsersPage.set(0)"
+              (pageChange)="selectedRoleUsersPage.set($event)"
+              (openAssignUser)="openAssignUserDialog()"
+              (unassignUser)="unassignUser($event)"
+            >
+            </app-role-users>
+          </div>
+
+          <div class="bento-col-side gap-6">
+            <% if (iam.inheritance !== false) { %>
+            <app-role-inheritance [selectedRole]="selectedRole()"></app-role-inheritance>
+            <% } %>
+            <% if (iam.rolePermissions !== false) { %>
+            <app-role-permissions-panel
+              [selectedRolePermissions]="selectedRolePermissions()"
+              [roleName]="selectedRole()?.name || ''"
+              (configureMatrix)="editPermissions(selectedRole()!)"
+            >
+            </app-role-permissions-panel>
+            <% } %>
+          </div>
+        </div>
+      </div>
+
+      <div *ngIf="!selectedRole() && !showCreateForm()" class="flex flex-auto flex-col items-center justify-center p-6 text-center">
+        <mat-icon svgIcon="shield" class="mb-4 size-16 text-slate-300 dark:text-slate-700"></mat-icon>
+        <div class="text-lg font-bold text-slate-700 dark:text-slate-300">Select a Role</div>
+        <div class="mt-1 max-w-xs text-sm text-slate-500">
+          Choose a role from the left list to review its inheritance details, screen permissions, and active users.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>