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

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

@@ -0,0 +1,107 @@
+:host {
+  display: flex;
+  flex: 1 1 auto;
+  width: 100%;
+}
+
+.mat-mdc-table {
+  background: transparent !important;
+}
+
+.mat-mdc-header-cell {
+  font-size: 0.75rem !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.05em !important;
+}
+
+.size-4 {
+  width: 16px !important;
+  height: 16px !important;
+  min-width: 16px !important;
+  min-height: 16px !important;
+}
+
+.size-5 {
+  width: 20px !important;
+  height: 20px !important;
+  min-width: 20px !important;
+  min-height: 20px !important;
+}
+
+.size-6 {
+  width: 24px !important;
+  height: 24px !important;
+  min-width: 24px !important;
+  min-height: 24px !important;
+}
+
+.size-8 {
+  width: 32px !important;
+  height: 32px !important;
+  min-width: 32px !important;
+  min-height: 32px !important;
+}
+
+.size-16 {
+  width: 64px !important;
+  height: 64px !important;
+  min-width: 64px !important;
+  min-height: 64px !important;
+}
+
+.main-content-layout {
+  height: calc(100vh - 185px) !important;
+  overflow: hidden !important;
+}
+
+@media (max-width: 1023px) {
+  .main-content-layout {
+    height: auto !important;
+    overflow: visible !important;
+  }
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none !important;
+}
+
+.no-scrollbar {
+  -ms-overflow-style: none !important;
+  scrollbar-width: none !important;
+}
+
+.details-container {
+  container-type: inline-size;
+  container-name: details;
+}
+
+.bento-grid {
+  display: flex;
+  flex-direction: column;
+}
+
+.bento-col-side {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1.5rem;
+}
+
+@container details (min-width: 600px) {
+  .bento-col-side {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@container details (min-width: 1024px) {
+  .bento-grid {
+    display: grid !important;
+    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
+  }
+  .bento-col-main {
+    grid-column: span 2 / span 2 !important;
+  }
+  .bento-col-side {
+    grid-column: span 1 / span 1 !important;
+    grid-template-columns: 1fr !important;
+  }
+}

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

@@ -0,0 +1,597 @@
+import { Component, OnInit, inject, signal, computed } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { Router, RouterLink } from '@angular/router';
+import { HttpClient } from '@angular/common/http';
+import { of } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import {
+  AccessCtrlPipe,
+  KeycloakAdminService,
+  RoleRepresentation,
+  UserRepresentation,
+} from '@/app/core/auth';
+import {
+  ConfirmDialogComponent,
+  ConfirmDialogData,
+} from '@/app/core/user-management/shared/confirm-dialog.component';
+import { formatRoleDisplayName } from '@/app/core/user-management/shared/role-display.util';
+import {
+  buildScreenComponentClusters,
+  getCleanScreenName,
+  GroupedScreenCluster,
+  IScreen,
+  parseCsvComponentToScreenMap,
+  parseCsvRegistry,
+} from '@/app/core/user-management/shared/screen-matrix.util';
+import { RoleHeaderComponent } from './components/role-header/role-header.component';
+import { RoleUsersComponent } from './components/role-users/role-users.component';
+<% if (iam.inheritance !== false) { %>
+import { RoleInheritanceComponent } from './components/role-inheritance/role-inheritance.component';
+<% } %>
+<% if (iam.rolePermissions !== false) { %>
+import { RolePermissionsPanelComponent } from './components/role-permissions-panel/role-permissions-panel.component';
+<% } %>
+import { UserSelectDialogComponent } from './components/user-select-dialog/user-select-dialog.component';
+
+@Component({
+  selector: 'app-role-list',
+  standalone: true,
+  imports: [
+    AccessCtrlPipe,
+    CommonModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatIconModule,
+    MatSnackBarModule,
+    MatDialogModule,
+    MatTooltipModule,
+    RouterLink,
+    RoleHeaderComponent,
+    RoleUsersComponent,
+<% if (iam.inheritance !== false) { %>
+    RoleInheritanceComponent,
+<% } %>
+<% if (iam.rolePermissions !== false) { %>
+    RolePermissionsPanelComponent,
+<% } %>
+    MatPaginatorModule,
+  ],
+  templateUrl: './role-list.component.html',
+  styleUrls: ['./role-list.component.scss'],
+  host: { class: 'flex h-full min-h-0 w-full min-w-0 flex-auto' },
+})
+export class RoleListComponent implements OnInit {
+  readonly SCREEN = 'role-management';
+  private fb = inject(FormBuilder);
+  private keycloakAdminService = inject(KeycloakAdminService);
+  private snackBar = inject(MatSnackBar);
+  private dialog = inject(MatDialog);
+  private router = inject(Router);
+  private http = inject(HttpClient);
+
+  roles = signal<RoleRepresentation[]>([]);
+  screenClusters = signal<GroupedScreenCluster[]>([]);
+  searchQuery = signal<string>('');
+  roleForm: FormGroup;
+  showCreateForm = signal<boolean>(false);
+  isSubmitting = signal<boolean>(false);
+
+  selectedRole = signal<RoleRepresentation | null>(null);
+  selectedRoleUsers = signal<UserRepresentation[]>([]);
+  selectedRoleUserCount = signal<number>(0);
+  selectedRolePermissions = signal<{ name: string; components: string[] }[]>([]);
+  isLoadingDetails = signal<boolean>(false);
+  isSyncingHolders = signal<boolean>(false);
+  isMobile = signal<boolean>(false);
+  showMobileDetails = signal<boolean>(false);
+
+  rolesPage = signal<number>(0);
+  rolesPageSize = 8;
+
+  selectedRoleUsersSearchQuery = signal<string>('');
+  selectedRoleUsersPage = signal<number>(0);
+  readonly userPageSize = 5;
+
+  readonly IGNORED_REALM_ROLES = new Set(
+    ['offline_access', 'default-roles-jhipster', 'uma_authorization', 'default-roles-siis-dev', 'role_user', 'role_admin', 'ghost_account'].map(
+      (s) => s.toLowerCase()
+    )
+  );
+
+  filteredRoles = computed(() => {
+    const query = this.searchQuery().toLowerCase().trim();
+    const filtered = this.roles().filter(
+      (role) => role.name && !this.IGNORED_REALM_ROLES.has(role.name.toLowerCase())
+    );
+    if (!query) return filtered;
+    return filtered.filter(
+      (role) =>
+        role.name?.toLowerCase().includes(query) || role.description?.toLowerCase().includes(query)
+    );
+  });
+
+  paginatedRoles = computed(() => {
+    const roles = this.filteredRoles();
+    const page = this.rolesPage();
+    const start = page * this.rolesPageSize;
+    return roles.slice(start, start + this.rolesPageSize);
+  });
+
+  filteredSelectedRoleUsers = computed(() => {
+    const query = this.selectedRoleUsersSearchQuery().toLowerCase().trim();
+    const users = this.selectedRoleUsers();
+    if (!query) return users;
+    return users.filter(
+      (u) =>
+        u.username?.toLowerCase().includes(query) ||
+        u.firstName?.toLowerCase().includes(query) ||
+        u.lastName?.toLowerCase().includes(query)
+    );
+  });
+
+  paginatedSelectedRoleUsers = computed(() => {
+    const users = this.filteredSelectedRoleUsers();
+    const page = this.selectedRoleUsersPage();
+    const start = page * this.userPageSize;
+    return users.slice(start, start + this.userPageSize);
+  });
+
+  totalSelectedRoleUsersPages = computed(() => {
+    const count = this.filteredSelectedRoleUsers().length;
+    return Math.ceil(count / this.userPageSize);
+  });
+
+  constructor() {
+    this.roleForm = this.fb.group({
+      name: ['', [Validators.required, Validators.pattern(/^[A-Z0-9_]+$/)]],
+      description: ['', Validators.required],
+    });
+    this.roleForm.get('name')?.valueChanges.subscribe((value) => {
+      if (typeof value !== 'string') {
+        return;
+      }
+      const normalized = value.toUpperCase().replace(/[^A-Z0-9_]/g, '');
+      if (normalized !== value) {
+        this.roleForm.get('name')?.setValue(normalized, { emitEvent: false });
+      }
+    });
+    this.checkScreenSize();
+    if (typeof window !== 'undefined') {
+      window.addEventListener('resize', () => this.checkScreenSize());
+    }
+  }
+
+  private checkScreenSize(): void {
+    if (typeof window !== 'undefined') {
+      this.isMobile.set(window.innerWidth < 1024);
+    }
+  }
+
+  ngOnInit(): void {
+    this.loadRoles();
+    this.loadScreensFromCsv();
+  }
+
+  onRolesPageChange(event: PageEvent): void {
+    this.rolesPage.set(event.pageIndex);
+    if (event.pageSize !== this.rolesPageSize) {
+      this.rolesPageSize = event.pageSize;
+    }
+  }
+
+  loadScreensFromCsv(): void {
+    this.http
+      .get('assets/screen-components.csv', { responseType: 'text' })
+      .pipe(catchError(() => of('')))
+      .subscribe({
+        next: (csv) => {
+          const csvRows = parseCsvRegistry(csv);
+          const csvMap = parseCsvComponentToScreenMap(csv);
+          this.screenClusters.set(buildScreenComponentClusters([], [], csvMap, csvRows));
+          const filtered = this.filteredRoles();
+          if (filtered.length > 0 && !this.isMobile() && !this.selectedRole()) {
+            this.selectRole(filtered[0]);
+          }
+        },
+        error: (err) => {
+          console.error('Failed to load screen catalog', err);
+        },
+      });
+  }
+
+  loadRoles(): void {
+    this.keycloakAdminService.getRealmRoles().subscribe({
+      next: (roles) => {
+        this.roles.set(roles || []);
+        const filtered = this.filteredRoles();
+        if (this.screenClusters().length > 0 && filtered.length > 0 && !this.isMobile() && !this.selectedRole()) {
+          this.selectRole(filtered[0]);
+        }
+      },
+      error: (err) => {
+        console.error(err);
+        this.snackBar.open('Failed to load roles from Keycloak', 'Close', { duration: 3000 });
+      },
+    });
+  }
+
+  toggleCreateForm(): void {
+    this.showCreateForm.update((val) => !val);
+    if (this.showCreateForm()) {
+      this.selectedRole.set(null);
+      this.showMobileDetails.set(false);
+    } else {
+      this.roleForm.reset();
+      const filtered = this.filteredRoles();
+      if (filtered.length > 0 && !this.isMobile()) {
+        this.selectRole(filtered[0]);
+      }
+    }
+  }
+
+  onSubmit(): void {
+    if (this.roleForm.invalid) return;
+
+    this.isSubmitting.set(true);
+    const { name, description } = this.roleForm.value;
+    const normalizedName = String(name || '')
+      .trim()
+      .toUpperCase()
+      .replace(/[^A-Z0-9_]/g, '');
+
+    this.keycloakAdminService.createRealmRoleOnly(normalizedName, description.trim()).subscribe({
+      next: () => {
+        this.snackBar.open(`Role "${normalizedName}" created successfully.`, 'Close', { duration: 3000 });
+        this.loadRoles();
+        this.toggleCreateForm();
+        this.isSubmitting.set(false);
+      },
+      error: (err) => {
+        console.error(err);
+        this.snackBar.open('Failed to create role. It may already exist.', 'Close', { duration: 3000 });
+        this.isSubmitting.set(false);
+      },
+    });
+  }
+
+  duplicateRole(role: RoleRepresentation): void {
+    const displayRoleName = this.cleanRoleName(role.name);
+    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+      width: '400px',
+      data: {
+        title: 'Duplicate Role',
+        message: `Enter the name of the new role to duplicate "${displayRoleName}" settings and permissions:`,
+        confirmLabel: 'Duplicate',
+        cancelLabel: 'Cancel',
+        showInput: true,
+        inputValue: `${displayRoleName.toUpperCase().replace(/[^A-Z0-9]+/g, '_')}_COPY`,
+        inputPlaceholder: 'ROLE_NAME',
+      },
+    });
+
+    dialogRef.afterClosed().subscribe((newName) => {
+      if (newName && typeof newName === 'string' && newName.trim()) {
+        const trimmedName = newName.trim().toUpperCase().replace(/[\s-]+/g, '_');
+        this.isSubmitting.set(true);
+        this.keycloakAdminService
+          .duplicateRole(role.name!, trimmedName, `Copy of ${displayRoleName}`)
+          .subscribe({
+            next: () => {
+              this.snackBar.open(
+                `Role duplicated to "${this.cleanRoleName(trimmedName)}" successfully.`,
+                'Close',
+                { duration: 3000 }
+              );
+              this.loadRoles();
+              this.isSubmitting.set(false);
+            },
+            error: (err) => {
+              console.error(err);
+              this.snackBar.open('Failed to duplicate role.', 'Close', { duration: 3000 });
+              this.isSubmitting.set(false);
+            },
+          });
+      }
+    });
+  }
+
+  editPermissions(role: RoleRepresentation): void {
+<% if (iam.rolePermissions === false) { %>
+    return;
+<% } else { %>
+    const displayRoleName = this.cleanRoleName(role.name);
+    const dialogData: ConfirmDialogData = {
+      title: 'Configure Permissions',
+      message: `Are you sure you want to configure access capabilities for the role "${displayRoleName}"?`,
+      confirmLabel: 'Proceed',
+      cancelLabel: 'Cancel',
+    };
+
+    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+      width: '400px',
+      data: dialogData,
+    });
+
+    dialogRef.afterClosed().subscribe((confirmed) => {
+      if (confirmed) {
+        this.router.navigate(['/admin/user-management/role-permissions'], {
+          queryParams: { role: role.name },
+        });
+      }
+    });
+<% } %>
+  }
+
+  syncSelectedRoleHolders(): void {
+    const role = this.selectedRole();
+    if (!role?.name || this.isSyncingHolders()) {
+      return;
+    }
+
+    const displayRoleName = this.cleanRoleName(role.name);
+    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+      width: '420px',
+      data: {
+        title: 'Sync role holders',
+        message: `Rebuild screen/button attributes for every user holding "${displayRoleName}" from their assigned Keycloak roles? Protected keys are kept. Affected users should refresh or re-login afterward.`,
+        confirmLabel: 'Sync holders',
+        cancelLabel: 'Cancel',
+      } as ConfirmDialogData,
+    });
+
+    dialogRef.afterClosed().subscribe((confirmed) => {
+      if (!confirmed || !role.name) {
+        return;
+      }
+      this.isSyncingHolders.set(true);
+      this.keycloakAdminService.syncAllRoleHoldersPermissions(role.name).subscribe({
+        next: (result) => {
+          this.isSyncingHolders.set(false);
+          if (result.total === 0) {
+            this.snackBar.open(`No holders to sync for "${displayRoleName}".`, 'Close', {
+              duration: 3000,
+            });
+            return;
+          }
+          const summary =
+            result.failed > 0
+              ? `Synced ${result.synced}/${result.total} holders (${result.failed} failed).`
+              : `Synced ${result.synced} holder${result.synced === 1 ? '' : 's'} for "${displayRoleName}".`;
+          this.snackBar.open(summary, 'Close', { duration: 3500 });
+        },
+        error: (err) => {
+          console.error('Failed to sync role holders', err);
+          this.isSyncingHolders.set(false);
+          this.snackBar.open(`Failed to sync holders for "${displayRoleName}".`, 'Close', {
+            duration: 3500,
+          });
+        },
+      });
+    });
+  }
+
+  selectRole(role: RoleRepresentation): void {
+    this.selectedRole.set(role);
+    this.showCreateForm.set(false);
+    this.isLoadingDetails.set(true);
+
+    this.selectedRoleUsersSearchQuery.set('');
+    this.selectedRoleUsersPage.set(0);
+
+    if (this.isMobile()) {
+      this.showMobileDetails.set(true);
+    }
+
+    this.keycloakAdminService.getUsersByRealmRole(role.name!, 0, 500).subscribe({
+      next: (page) => {
+        const ghostUsername = role.name!.toLowerCase();
+        const activeUsers = (page.users || []).filter((u) => u.username !== ghostUsername);
+        this.selectedRoleUsers.set(activeUsers);
+        this.selectedRoleUserCount.set(activeUsers.length);
+      },
+      error: () => {
+        this.selectedRoleUsers.set([]);
+        this.selectedRoleUserCount.set(0);
+      },
+    });
+
+    this.keycloakAdminService.resolveRoleAttributesRecursive(role.name!).subscribe({
+      next: (attrs) => {
+        const attrsMap = attrs as Record<string, string[]>;
+        const clusters = this.screenClusters();
+
+        const mappedData = clusters
+          .filter((group) => {
+            const ids = [String(group.screen.screenId || ''), ...(group.screenIds || [])].filter(Boolean);
+            return ids.some(
+              (sId) =>
+                attrsMap[sId] !== undefined || (attrsMap['screens'] || []).map(String).includes(sId)
+            );
+          })
+          .map((group) => {
+            const matchedComps = group.components
+              .filter((comp) => {
+                const compId = String(comp.componentId || '');
+                const compType = String(comp.componentType || '').toUpperCase();
+                const compName = String(comp.componentName || '').toLowerCase();
+                if (compType === 'SCREEN' || compName.includes('screen access')) return false;
+                return attrsMap[compId] !== undefined && attrsMap[compId].includes('true');
+              })
+              .map((comp) => String(comp.componentName || comp.componentId || ''));
+
+            return {
+              name: this.getCleanDisplayScreenName(group.screen),
+              components: matchedComps,
+            };
+          });
+
+        this.selectedRolePermissions.set(mappedData);
+        this.isLoadingDetails.set(false);
+      },
+      error: () => {
+        this.selectedRolePermissions.set([]);
+        this.isLoadingDetails.set(false);
+      },
+    });
+  }
+
+  openAssignUserDialog(): void {
+    const role = this.selectedRole();
+    if (!role || !role.name) return;
+
+    const assignedUserIds = new Set<string>(
+      this.selectedRoleUsers()
+        .map((u) => u.id)
+        .filter((id): id is string => !!id)
+    );
+
+    const dialogRef = this.dialog.open(UserSelectDialogComponent, {
+      width: '100%',
+      maxWidth: '900px',
+      position: { bottom: '0px' },
+      panelClass: 'bottom-sheet-dialog',
+      disableClose: true,
+      data: {
+        roleName: role.name,
+        alreadyAssignedUserIds: assignedUserIds,
+      },
+    });
+
+    dialogRef.afterClosed().subscribe((changed) => {
+      if (changed) {
+        this.selectRole(role);
+      }
+    });
+  }
+
+  unassignUser(user: UserRepresentation): void {
+    const role = this.selectedRole();
+    if (!role || !role.name || !user.id) return;
+
+    const dialogData: ConfirmDialogData = {
+      title: 'Remove User Assignment',
+      message: `Are you sure you want to revoke the role "${this.cleanRoleName(role.name)}" from user "${user.username}"?`,
+      confirmLabel: 'Revoke',
+      cancelLabel: 'Cancel',
+    };
+
+    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+      width: '400px',
+      data: dialogData,
+    });
+
+    dialogRef.afterClosed().subscribe((confirmed) => {
+      if (confirmed) {
+        this.isSubmitting.set(true);
+        this.keycloakAdminService.removeRealmRoleFromUser(user.id!, role.name!).subscribe({
+          next: () => {
+            this.snackBar.open(`Role assignment revoked from "${user.username}".`, 'Close', {
+              duration: 3000,
+            });
+            this.selectRole(role);
+            this.isSubmitting.set(false);
+          },
+          error: (err) => {
+            console.error(err);
+            this.snackBar.open(`Failed to revoke role assignment.`, 'Close', { duration: 3000 });
+            this.isSubmitting.set(false);
+          },
+        });
+      }
+    });
+  }
+
+  cleanRoleName(name: string | undefined): string {
+    return formatRoleDisplayName(name);
+  }
+
+  getRoleIcon(roleName?: string): string {
+    if (!roleName) return 'shield';
+    const name = roleName.toUpperCase();
+    if (name.includes('SUPER_ADMIN') || name.includes('ADMIN')) return 'shield-check';
+    if (name.includes('KEYCLOAK_ADMIN') || name.includes('KEYCLOAK')) return 'key';
+    if (name.includes('DEFAULT') || name.includes('USER')) return 'users';
+    if (name.includes('MILLER')) return 'factory';
+    if (name.includes('PMB') || name.includes('STAFF')) return 'briefcase';
+    return 'shield';
+  }
+
+  getRoleBadgeClass(roleName?: string): string {
+    if (!roleName) {
+      return 'bg-indigo-50 text-indigo-900 border-indigo-200 dark:bg-indigo-950/30 dark:text-indigo-400 dark:border-indigo-900/40 font-bold';
+    }
+    const name = roleName.toUpperCase();
+    if (name.includes('SUPER_ADMIN')) {
+      return 'bg-amber-50 text-amber-900 border-amber-200 dark:bg-amber-950/40 dark:text-amber-300 dark:border-amber-900/50 font-bold';
+    }
+    if (name.includes('KEYCLOAK_ADMIN')) {
+      return 'bg-sky-50 text-sky-900 border-sky-200 dark:bg-sky-950/40 dark:text-sky-300 dark:border-sky-900/50 font-bold';
+    }
+    if (name.includes('DEFAULT')) {
+      return 'bg-primary-50 text-primary-900 border-primary-200 dark:bg-primary-950/40 dark:text-primary-300 dark:border-primary-900/50 font-bold';
+    }
+    return 'bg-indigo-50 text-indigo-900 border-indigo-200 dark:bg-indigo-950/30 dark:text-indigo-400 dark:border-indigo-900/40 font-bold';
+  }
+
+  getRoleTooltip(roleName?: string): string {
+    if (!roleName) return 'Application Role';
+    const name = roleName.toUpperCase();
+    if (name.includes('SUPER_ADMIN')) {
+      return 'Industry-Standard Super Administrator Role — Unrestricted system access.';
+    }
+    if (name.includes('KEYCLOAK_ADMIN')) {
+      return 'Keycloak REST Admin API Role — Grants Keycloak user & realm administration API authority.';
+    }
+    if (name.includes('DEFAULT')) {
+      return 'Keycloak Composite Realm Role — Auto-assigned to every registered user upon account creation.';
+    }
+    return `Custom application role: ${this.cleanRoleName(roleName)}`;
+  }
+
+  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'
+    );
+  }
+
+  getCleanDisplayScreenName(screen: IScreen): string {
+    const screenId = screen.screenId ? String(screen.screenId) : '';
+    const screenName = screen.screenName ? String(screen.screenName) : '';
+
+    if (!screenId) return getCleanScreenName(screenName) || screenName;
+
+    const cleanScreenName = getCleanScreenName(screenName);
+    const suffix = '-' + cleanScreenName.toLowerCase().replace(/\s+/g, '-');
+
+    let baseId = screenId;
+    if (baseId.endsWith(suffix) && baseId !== suffix.substring(1)) {
+      baseId = baseId.slice(0, -suffix.length);
+    }
+
+    return baseId
+      .split(/[-_]+/)
+      .map((word) => {
+        if (word.toLowerCase() === 'caa') return 'CAA';
+        if (word.toLowerCase() === 'pmb') return 'PMB';
+        return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+      })
+      .join(' ');
+  }
+
+  goBackToList(): void {
+    this.showMobileDetails.set(false);
+    this.showCreateForm.set(false);
+  }
+}