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

package/src/templates/angular/iam/screen-catalog.ts.ejs

@@ -0,0 +1,147 @@
+import { HttpClient } from '@angular/common/http';
+import { Observable, catchError, map, of } from 'rxjs';
+import { NAVIGATION, NavigationItem } from '@/app/domains/admin/layout/data/navigation';
+
+export type ManagedScreen = {
+  id: string;
+  label: string;
+};
+
+export type ScreenComponentRow = {
+  screenName: string;
+  screenId: string;
+  componentName: string;
+  componentId: string;
+  componentType: string;
+  description: string;
+};
+
+/** Generated at build time from entities + IAM screens (also written to public/assets/screen-components.csv). */
+export const GENERATED_MANAGED_SCREENS: ManagedScreen[] = <%- JSON.stringify(typeof managedScreens !== 'undefined' ? managedScreens : [], null, 2) %>;
+
+const configuredScreens: string[] = <%- JSON.stringify(iam.screens || []) %>;
+
+function collectRouteIds(items: NavigationItem[]): string[] {
+  const ids: string[] = [];
+  items.forEach((item) => {
+    if (item.route && item.id) {
+      ids.push(item.id);
+    }
+    if (item.children?.length) {
+      ids.push(...collectRouteIds(item.children));
+    }
+  });
+  return ids;
+}
+
+/** Sync fallback used before CSV loads (nav + generated entity/IAM screen ids). */
+export function listManagedScreens(): ManagedScreen[] {
+  if (GENERATED_MANAGED_SCREENS.length) {
+    return GENERATED_MANAGED_SCREENS.slice();
+  }
+  const fromNav = collectRouteIds(NAVIGATION);
+  const extra = configuredScreens.filter(Boolean);
+  const unique = Array.from(new Set([...fromNav, ...extra, 'user-management', 'role-management', 'role-permissions']));
+  return unique.map((id) => ({
+    id,
+    label: id.split('/').pop()?.replace(/-/g, ' ') || id,
+  }));
+}
+
+function parseCsvLine(line: string): string[] {
+  const cells: string[] = [];
+  let current = '';
+  let inQuotes = false;
+  for (let i = 0; i < line.length; i += 1) {
+    const ch = line[i];
+    if (inQuotes) {
+      if (ch === '"' && line[i + 1] === '"') {
+        current += '"';
+        i += 1;
+      } else if (ch === '"') {
+        inQuotes = false;
+      } else {
+        current += ch;
+      }
+      continue;
+    }
+    if (ch === '"') {
+      inQuotes = true;
+      continue;
+    }
+    if (ch === ',') {
+      cells.push(current);
+      current = '';
+      continue;
+    }
+    current += ch;
+  }
+  cells.push(current);
+  return cells;
+}
+
+export function parseScreenComponentsCsv(text: string): ScreenComponentRow[] {
+  const lines = String(text || '')
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .filter(Boolean);
+  if (lines.length < 2) {
+    return [];
+  }
+  const rows: ScreenComponentRow[] = [];
+  for (let i = 1; i < lines.length; i += 1) {
+    const cells = parseCsvLine(lines[i]);
+    if (cells.length < 5) {
+      continue;
+    }
+    rows.push({
+      screenName: cells[0] || '',
+      screenId: cells[1] || '',
+      componentName: cells[2] || '',
+      componentId: cells[3] || '',
+      componentType: cells[4] || '',
+      description: cells[5] || '',
+    });
+  }
+  return rows;
+}
+
+/** Unique SCREEN rows from the CSV registry (for permission matrices). */
+export function screensFromCsvRows(rows: ScreenComponentRow[]): ManagedScreen[] {
+  const seen = new Set<string>();
+  const screens: ManagedScreen[] = [];
+  for (const row of rows) {
+    const type = String(row.componentType || '').toUpperCase();
+    const isScreen = type === 'SCREEN' || row.componentId === row.screenId;
+    if (!isScreen || !row.screenId || seen.has(row.screenId)) {
+      continue;
+    }
+    seen.add(row.screenId);
+    screens.push({
+      id: row.screenId,
+      label: row.screenName || row.screenId.split('/').pop()?.replace(/-/g, ' ') || row.screenId,
+    });
+  }
+  return screens;
+}
+
+/**
+ * Load generated ACL catalog from public/assets/screen-components.csv (PMB-compatible path).
+ * Falls back to listManagedScreens() when the file is missing.
+ */
+export function loadManagedScreens(http: HttpClient): Observable<ManagedScreen[]> {
+  return http.get('assets/screen-components.csv', { responseType: 'text' }).pipe(
+    map((text) => {
+      const fromCsv = screensFromCsvRows(parseScreenComponentsCsv(text));
+      return fromCsv.length ? fromCsv : listManagedScreens();
+    }),
+    catchError(() => of(listManagedScreens()))
+  );
+}
+
+export function loadScreenComponentRows(http: HttpClient): Observable<ScreenComponentRow[]> {
+  return http.get('assets/screen-components.csv', { responseType: 'text' }).pipe(
+    map((text) => parseScreenComponentsCsv(text)),
+    catchError(() => of([]))
+  );
+}

package/src/templates/angular/iam/shared/confirm-dialog.component.ts.ejs

@@ -0,0 +1,83 @@
+import { Component, Inject, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { FormsModule } from '@angular/forms';
+
+export interface ConfirmDialogData {
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  showInput?: boolean;
+  inputValue?: string;
+  inputPlaceholder?: string;
+}
+
+@Component({
+  selector: 'app-confirm-dialog',
+  standalone: true,
+  imports: [CommonModule, MatDialogModule, MatButtonModule, MatIconModule, FormsModule],
+  template: `
+    <div class="flex max-w-sm flex-col p-6">
+      <div class="mb-3 flex items-center gap-x-3 text-primary-700 dark:text-primary-400">
+        <mat-icon svgIcon="shield-alert" class="size-6 text-primary-600 dark:text-primary-400"></mat-icon>
+        <h3 class="text-lg font-bold leading-6 text-slate-900 dark:text-white">{{ data.title }}</h3>
+      </div>
+
+      <p class="mb-4 text-sm leading-relaxed text-slate-600 dark:text-slate-400">
+        {{ data.message }}
+      </p>
+
+      <div *ngIf="data.showInput" class="mb-6">
+        <input
+          type="text"
+          [(ngModel)]="inputValue"
+          [placeholder]="data.inputPlaceholder || ''"
+          class="w-full rounded-xl border bg-white px-4 py-2 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"
+        />
+      </div>
+
+      <div class="flex items-center justify-end gap-x-3">
+        <button
+          type="button"
+          (click)="onCancel()"
+          class="rounded-xl px-4 py-2 text-sm font-semibold text-slate-700 transition hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800"
+        >
+          {{ data.cancelLabel || 'Cancel' }}
+        </button>
+        <button
+          type="button"
+          (click)="onConfirm()"
+          class="rounded-xl bg-primary-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-primary-700"
+          [disabled]="data.showInput && !inputValue.trim()"
+        >
+          {{ data.confirmLabel || 'Confirm' }}
+        </button>
+      </div>
+    </div>
+  `,
+})
+export class ConfirmDialogComponent {
+  private dialogRef = inject(MatDialogRef<ConfirmDialogComponent>);
+  inputValue = '';
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: ConfirmDialogData) {
+    if (data.showInput) {
+      this.inputValue = data.inputValue || '';
+    }
+  }
+
+  onCancel(): void {
+    this.dialogRef.close(false);
+  }
+
+  onConfirm(): void {
+    if (this.data.showInput) {
+      this.dialogRef.close(this.inputValue.trim());
+    } else {
+      this.dialogRef.close(true);
+    }
+  }
+}

package/src/templates/angular/iam/shared/matrix-hierarchy.util.ts.ejs

@@ -0,0 +1,196 @@
+import { getScreenBaseId, screenIdsMatch } from '@/app/core/auth';
+import { GroupedScreenCluster } from './screen-matrix.util';
+import {
+    EMPTY_SCREEN_NAVIGATION_MAP,
+    PageNavigationEntry,
+    getMappedScreenIds,
+} from './screen-navigation-map';
+
+export interface MatrixPageGroup {
+    kind: 'page';
+    page: PageNavigationEntry;
+    host: GroupedScreenCluster;
+    embeds: GroupedScreenCluster[];
+}
+
+export interface MatrixFlatGroup {
+    kind: 'flat';
+    group: GroupedScreenCluster;
+}
+
+export type MatrixHierarchyItem = MatrixPageGroup | MatrixFlatGroup;
+
+function clusterMatchesScreenId(cluster: GroupedScreenCluster, screenId: string): boolean {
+    const target = String(screenId || '').trim().toLowerCase();
+    if (!target) {
+        return false;
+    }
+    if (String(cluster.cleanScreenId || '').toLowerCase() === target) {
+        return true;
+    }
+    if (getScreenBaseId(target) === String(cluster.cleanScreenId || '').toLowerCase()) {
+        return true;
+    }
+    return (cluster.screenIds || []).some(
+        (id) => String(id).toLowerCase() === target || screenIdsMatch(id, target)
+    );
+}
+
+function findClusterForScreenId(
+    clusters: GroupedScreenCluster[],
+    screenId: string
+): GroupedScreenCluster | undefined {
+    return clusters.find((cluster) => clusterMatchesScreenId(cluster, screenId));
+}
+
+function syntheticCluster(screenId: string, title: string): GroupedScreenCluster {
+    return {
+        cleanScreenId: getScreenBaseId(screenId) || screenId,
+        screen: {
+            screenId,
+            screenName: title,
+            description: null,
+        },
+        screenIds: [screenId],
+        screenNames: [title],
+        components: [],
+    };
+}
+
+/**
+ * Build page-grouped matrix rows from flat clusters + navigation map.
+ * Clusters claimed as hosts/embeds appear under pages; remaining stay flat A–Z.
+ */
+export function buildMatrixHierarchy(
+    clusters: GroupedScreenCluster[],
+    map: readonly PageNavigationEntry[] = EMPTY_SCREEN_NAVIGATION_MAP
+): MatrixHierarchyItem[] {
+    const claimed = getMappedScreenIds(map);
+    const usedClusterKeys = new Set<string>();
+
+    const markUsed = (cluster: GroupedScreenCluster | undefined) => {
+        if (!cluster) {
+            return;
+        }
+        usedClusterKeys.add(cluster.cleanScreenId);
+        (cluster.screenIds || []).forEach((id) => usedClusterKeys.add(String(id).toLowerCase()));
+    };
+
+    const pages: MatrixPageGroup[] = [];
+
+    map.forEach((page) => {
+        const hostIds = [page.hostScreenId, ...(page.hostScreenAliases || [])];
+        let host = hostIds.map((id) => findClusterForScreenId(clusters, id)).find(Boolean);
+        if (!host) {
+            host = syntheticCluster(page.hostScreenId, page.navTitle);
+        }
+        markUsed(host);
+
+        const embeds: GroupedScreenCluster[] = [];
+        page.embeddedScreens.forEach((embedded) => {
+            let child = findClusterForScreenId(clusters, embedded.screenId);
+            if (!child) {
+                child = syntheticCluster(embedded.screenId, embedded.title);
+            }
+            // Same physical cluster (e.g. sampling-details-form) can nest under multiple pages.
+            embeds.push(child);
+            markUsed(child);
+        });
+
+        pages.push({ kind: 'page', page, host, embeds });
+    });
+
+    const flat: MatrixFlatGroup[] = clusters
+        .filter((cluster) => {
+            if (usedClusterKeys.has(cluster.cleanScreenId)) {
+                return false;
+            }
+            const ids = (cluster.screenIds || []).map((id) => String(id).toLowerCase());
+            if (ids.some((id) => claimed.has(id) || usedClusterKeys.has(id))) {
+                return false;
+            }
+            return true;
+        })
+        .map((group) => ({ kind: 'flat' as const, group }));
+
+    pages.sort((a, b) => {
+        const domain = a.page.domain.localeCompare(b.page.domain);
+        if (domain !== 0) {
+            return domain;
+        }
+        return a.page.navTitle.localeCompare(b.page.navTitle);
+    });
+
+    flat.sort((a, b) =>
+        String(a.group.cleanScreenId || '').localeCompare(String(b.group.cleanScreenId || ''))
+    );
+
+    return [...pages, ...flat];
+}
+
+export function filterMatrixHierarchy(
+    items: MatrixHierarchyItem[],
+    searchTerm: string,
+    scope: 'ALL' | 'SCREEN',
+    clusterMatches: (group: GroupedScreenCluster, search: string, scope: 'ALL' | 'SCREEN') => GroupedScreenCluster | null
+): MatrixHierarchyItem[] {
+    const search = searchTerm.trim();
+    if (!search) {
+        return items;
+    }
+
+    const result: MatrixHierarchyItem[] = [];
+
+    items.forEach((item) => {
+        if (item.kind === 'flat') {
+            const matched = clusterMatches(item.group, search, scope);
+            if (matched) {
+                result.push({ kind: 'flat', group: matched });
+            }
+            return;
+        }
+
+        const pageHaystack = [
+            item.page.domain,
+            item.page.navTitle,
+            item.page.route,
+            item.page.hostScreenId,
+            ...(item.page.hostScreenAliases || []),
+            ...item.page.embeddedScreens.map((e) => `${e.screenId} ${e.title}`),
+        ]
+            .join(' ')
+            .toLowerCase();
+        const pageMatches = pageHaystack.includes(search.toLowerCase());
+
+        const hostMatched = clusterMatches(item.host, search, scope);
+        const embedMatched = item.embeds
+            .map((embed) => clusterMatches(embed, search, scope))
+            .filter((g): g is GroupedScreenCluster => g !== null);
+
+        if (pageMatches || hostMatched || embedMatched.length > 0) {
+            result.push({
+                kind: 'page',
+                page: item.page,
+                host: hostMatched || item.host,
+                embeds: pageMatches || hostMatched ? item.embeds : embedMatched,
+            });
+        }
+    });
+
+    return result;
+}
+
+/** Adapt filterMatrixClusters-style matching for a single cluster. */
+export function matchClusterForHierarchySearch(
+    group: GroupedScreenCluster,
+    search: string,
+    scope: 'ALL' | 'SCREEN',
+    filterFn: (
+        data: GroupedScreenCluster[],
+        searchTerm: string,
+        scope: 'ALL' | 'SCREEN'
+    ) => GroupedScreenCluster[]
+): GroupedScreenCluster | null {
+    const filtered = filterFn([group], search, scope);
+    return filtered[0] || null;
+}

package/src/templates/angular/iam/shared/permission-matrix-sound.ts.ejs

@@ -0,0 +1,59 @@
+/** Grant / revoke cue sounds for IAM permission matrices (PMB-style). */
+
+export function playPermissionGrantSound(): void {
+  playSoundFile('assets/sound/apple-play.mp3', () => playSynthGrantBeep());
+}
+
+export function playPermissionRevokeSound(): void {
+  playSoundFile('assets/sound/remove.mp3', () => playSynthRevokeBeep());
+}
+
+function playSoundFile(src: string, fallback: () => void): void {
+  try {
+    const audio = new Audio(`${src}?t=${Date.now()}`);
+    audio.play().catch(() => fallback());
+  } catch {
+    fallback();
+  }
+}
+
+function playSynthGrantBeep(): void {
+  playSynthChime([
+    { frequency: 880, offset: 0, duration: 0.15 },
+    { frequency: 1108.73, offset: 0.08, duration: 0.25 },
+  ]);
+}
+
+function playSynthRevokeBeep(): void {
+  playSynthChime([
+    { frequency: 1108.73, offset: 0, duration: 0.15 },
+    { frequency: 830.61, offset: 0.08, duration: 0.25 },
+  ]);
+}
+
+function playSynthChime(notes: Array<{ frequency: number; offset: number; duration: number }>): void {
+  try {
+    const AudioContextClass = window.AudioContext || (window as unknown as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;
+    if (!AudioContextClass) {
+      return;
+    }
+    const ctx = new AudioContextClass();
+    const now = ctx.currentTime;
+    for (const note of notes) {
+      const osc = ctx.createOscillator();
+      const gain = ctx.createGain();
+      const start = now + note.offset;
+      osc.type = 'sine';
+      osc.frequency.setValueAtTime(note.frequency, start);
+      gain.gain.setValueAtTime(0, start);
+      gain.gain.linearRampToValueAtTime(0.15, start + 0.02);
+      gain.gain.exponentialRampToValueAtTime(0.001, start + note.duration);
+      osc.connect(gain);
+      gain.connect(ctx.destination);
+      osc.start(start);
+      osc.stop(start + note.duration);
+    }
+  } catch {
+    // Audio optional — never block permission writes.
+  }
+}

package/src/templates/angular/iam/shared/role-display.util.ts.ejs

@@ -0,0 +1,43 @@
+export function formatRoleDisplayName(roleName: unknown): string {
+  const normalized = String(roleName ?? '').trim();
+  if (!normalized) {
+    return '';
+  }
+  const lowerRoleName = normalized.toLowerCase();
+
+  if (lowerRoleName === 'role_super_admin' || lowerRoleName === 'role_super_admin_pmb') {
+    return 'ROLE SUPER ADMIN';
+  }
+
+  // Keep full stakeholder labels — generic ROLE_*_ strip would turn this into just "STAFF".
+  if (lowerRoleName === 'role_stakeholder_staff') {
+    return 'Stakeholder Staff';
+  }
+  if (lowerRoleName === 'role_stakeholder' || lowerRoleName === 'stakeholder') {
+    return 'Stakeholder';
+  }
+
+  const regionRoleMatch = /^REG_([^_]+)__(.+?)__(MGR|STAFF)$/i.exec(normalized);
+  if (regionRoleMatch) {
+    const regionCode = regionRoleMatch[1].toUpperCase();
+    const regionName = regionRoleMatch[2].replace(/_/g, ' ').trim();
+    const roleLabel = regionRoleMatch[3].toUpperCase() === 'MGR' ? 'Regional Manager' : 'Regional Officer';
+    return `${roleLabel} - ${regionName} (${regionCode})`;
+  }
+
+  const regionParentMatch = /^REG_([^_]+)__(.+)$/i.exec(normalized);
+  if (regionParentMatch) {
+    const regionCode = regionParentMatch[1].toUpperCase();
+    const regionName = regionParentMatch[2].replace(/_/g, ' ').trim();
+    return `Region Access - ${regionName} (${regionCode})`;
+  }
+
+  const legacyRegionRoleMatch = /^REG_([^_]+)_(MGR|STAFF)$/i.exec(normalized);
+  if (legacyRegionRoleMatch) {
+    const regionCode = legacyRegionRoleMatch[1].toUpperCase();
+    const roleLabel = legacyRegionRoleMatch[2].toUpperCase() === 'MGR' ? 'Regional Manager' : 'Regional Officer';
+    return `${roleLabel} (${regionCode})`;
+  }
+
+  return normalized.replace(/^ROLE_[A-Z0-9]+_/i, '').replace(/_/g, ' ');
+}

package/src/templates/angular/iam/shared/role-permission-skeleton.component.ts.ejs

@@ -0,0 +1,54 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+    selector: 'tbody[app-role-permission-skeleton]',
+    standalone: true,
+    imports: [CommonModule],
+    template: `
+        @for (sIdx of [1, 2, 3, 4, 5]; track sIdx) {
+            <!-- Mock Screen Header Row -->
+            <tr class="bg-slate-100/50 dark:bg-slate-800/50 select-none">
+                <td [attr.colspan]="colspan" class="sticky left-0 px-6 py-3 border-b border-slate-200 dark:border-slate-800 text-slate-800 dark:text-slate-100 text-sm">
+                    <div class="flex items-center gap-x-2 animate-pulse">
+                        <div class="h-4 w-4 rounded bg-slate-200 dark:bg-slate-700"></div>
+                        <div class="h-4 w-4 rounded-full bg-slate-200 dark:bg-slate-700"></div>
+                        <div class="h-4 w-40 rounded bg-slate-200 dark:bg-slate-700"></div>
+                        <div class="h-4 w-24 rounded bg-slate-200 dark:bg-slate-700"></div>
+                    </div>
+                </td>
+            </tr>
+            <!-- Mock Component Rows (2 per screen) -->
+            @for (cIdx of [1, 2]; track cIdx) {
+                <tr class="hover:bg-slate-50/30 dark:hover:bg-slate-800/10">
+                    <!-- Mock Component details -->
+                    <td class="sticky left-0 z-10 px-8 py-3.5 border-r border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900">
+                        <div class="flex items-center gap-x-2 animate-pulse">
+                            <div class="h-5 w-14 rounded bg-slate-200 dark:bg-slate-700"></div>
+                            <div class="h-4 w-48 rounded bg-slate-200 dark:bg-slate-700"></div>
+                        </div>
+                        <div class="h-3 w-32 rounded bg-slate-200 dark:bg-slate-700 mt-2 pl-2 animate-pulse"></div>
+                    </td>
+                    <!-- Mock Checkboxes -->
+                    @for (rIdx of rolesArray; track rIdx) {
+                        <td class="px-6 py-3.5 text-center border-b border-slate-200 dark:border-slate-800">
+                            <div class="inline-flex justify-center items-center h-5 w-5 rounded bg-slate-200 dark:bg-slate-700 animate-pulse"></div>
+                        </td>
+                    }
+                </tr>
+            }
+        }
+    `
+})
+export class RolePermissionSkeletonComponent {
+    readonly SCREEN = 'role-permission-skeleton';
+    @Input() rolesCount: number = 6;
+
+    get colspan(): number {
+        return this.rolesCount + 1;
+    }
+
+    get rolesArray(): number[] {
+        return Array.from({ length: this.rolesCount }, (_, i) => i);
+    }
+}