@team-codeme/crud-forge 1.0.0 → 1.0.2

package/src/generator/auth-pack.js

@@ -347,6 +347,76 @@ function buildScreenAccessCatalog({ entities = [], folderName = 'micro-functions
   return { csv: `${csv}\n`, screens, rows };
 }
 
+function parseCsvLine(line) {
+  const cells = [];
+  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;
+}
+
+function parseScreenComponentsCsv(text) {
+  const lines = String(text || '')
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .filter(Boolean);
+  if (lines.length < 2) return [];
+  const rows = [];
+  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;
+}
+
+function screensFromCsvRows(rows) {
+  const seen = new Set();
+  const screens = [];
+  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;
+}
+
 async function generateIamModule({ outputDir, templatesDir, locals, writeOrPreview, folderName, config, entities = [] }) {
   const iamRoot = path.join(outputDir, 'src/app/core/user-management');
   const catalog = buildScreenAccessCatalog({
@@ -354,10 +424,40 @@ async function generateIamModule({ outputDir, templatesDir, locals, writeOrPrevi
     folderName: folderName || 'micro-functions',
     iam: locals.iam || {},
   });
-  locals = { ...locals, managedScreens: catalog.screens };
+
+  const csvPath = path.join(outputDir, 'public/assets/screen-components.csv');
+  let finalRows = catalog.rows;
+  let finalScreens = catalog.screens;
+
+  if (fs.existsSync(csvPath)) {
+    try {
+      const existingCsvText = fs.readFileSync(csvPath, 'utf8');
+      const existingRows = parseScreenComponentsCsv(existingCsvText);
+      const newScreenIds = new Set(catalog.screens.map((s) => s.id));
+      const preservedRows = existingRows.filter((r) => !newScreenIds.has(r.screenId));
+      if (preservedRows.length > 0) {
+        finalRows = [...preservedRows, ...catalog.rows];
+        finalScreens = screensFromCsvRows(finalRows);
+      }
+    } catch {
+      /* ignore and use fresh catalog */
+    }
+  }
+
+  const header = 'screenName,screenId,componentName,componentId,componentType,description';
+  const mergedCsv = [
+    header,
+    ...finalRows.map((row) =>
+      [row.screenName, row.screenId, row.componentName, row.componentId, row.componentType, row.description]
+        .map(csvEscape)
+        .join(',')
+    ),
+  ].join('\n') + '\n';
+
+  locals = { ...locals, managedScreens: finalScreens };
 
   // PMB-style ACL registry — matrices load this CSV at runtime.
-  writeOrPreview(path.join(outputDir, 'public/assets/screen-components.csv'), catalog.csv);
+  writeOrPreview(csvPath, mergedCsv, { bypassMerge: true });
 
   /** Flat template name → foldered output under src/app/core/user-management */
   const iamLayout = [
@@ -531,7 +631,11 @@ async function generateIamModule({ outputDir, templatesDir, locals, writeOrPrevi
 
   for (const entry of iamLayout) {
     const rendered = await renderTemplate(path.join(templatesDir, 'iam', `${entry.template}.ejs`), locals);
-    writeOrPreview(path.join(iamRoot, entry.out), rendered);
+    writeOrPreview(
+      path.join(iamRoot, entry.out),
+      rendered,
+      entry.template === 'screen-catalog.ts' ? { bypassMerge: true } : {}
+    );
     generatedFiles += 1;
     if (entry.html) {
       const htmlRendered = await renderTemplate(path.join(templatesDir, 'iam', `${entry.html}.ejs`), locals);
@@ -668,7 +772,7 @@ function registerIamRoutes(outputDir, config, folderName, writeOrPreview) {
       legacyImport,
       "loadChildren: () => import('@/app/core/user-management/user-management.routes')"
     );
-    writeOrPreview(routesFilePath, content);
+    writeOrPreview(routesFilePath, content, { bypassMerge: true });
     return;
   }
 
@@ -680,7 +784,7 @@ function registerIamRoutes(outputDir, config, folderName, writeOrPreview) {
   } else {
     content = content.replace('children: [', `children: [\n${iamRoute}`);
   }
-  writeOrPreview(routesFilePath, content);
+  writeOrPreview(routesFilePath, content, { bypassMerge: true });
 }
 
 function registerIamNavigation(outputDir, config, folderName, writeOrPreview) {
@@ -705,7 +809,7 @@ function registerIamNavigation(outputDir, config, folderName, writeOrPreview) {
       /id: 'identity-group',\n\s*label: '[^']*',(?:\n\s*description: '[^']*',)?\n\s*icon: '[^']*'/,
       `id: 'identity-group',\n      label: 'User Management',\n      icon: 'users'`
     );
-    writeOrPreview(navFilePath, content);
+    writeOrPreview(navFilePath, content, { bypassMerge: true });
     return;
   }
 
@@ -717,7 +821,7 @@ function registerIamNavigation(outputDir, config, folderName, writeOrPreview) {
       `export const NAVIGATION: NavigationItem[] = [\n${block}`
     );
   }
-  writeOrPreview(navFilePath, content);
+  writeOrPreview(navFilePath, content, { bypassMerge: true });
 }
 
 function patchAppConfig(outputDir, writeOrPreview) {

package/src/generator/entity-layout.js

@@ -2,14 +2,18 @@ const path = require('path');
 const { kebabCase } = require('lodash');
 
 // Source folders name service modules; the common container is always micro-functions.
-function serviceFolder(entity, config) {
-  const multiSource = Array.isArray(config.input?.sources) && config.input.sources.length > 0;
-  const module = multiSource
-    ? entity.folderName || kebabCase(entity.sourceName || entity.microservice)
-    : kebabCase(entity.microservice || config.api?.microservice || 'microservice');
+function serviceFolder(entity, config = {}) {
+  const multiSource = Array.isArray(config?.input?.sources) && config.input.sources.length > 0;
+  const folder = entity.folderName && entity.folderName !== 'micro-functions' ? entity.folderName : null;
+  let module = multiSource
+    ? (folder || kebabCase(entity.sourceName || entity.microservice || 'microservice'))
+    : kebabCase(folder || entity.microservice || config?.api?.microservice || 'microservice');
   if (!module || /[\\/]/.test(module) || ['.', '..'].includes(module)) {
     throw new Error('Microservice module must be a single folder name.');
   }
+  if (module === 'micro-functions') {
+    return 'micro-functions';
+  }
   return `micro-functions/${module}`;
 }
 

package/src/generator/index.js

@@ -77,7 +77,7 @@ async function generate(parsedData, config) {
         }
         return true;
       };
-      fs.copySync(starterPackPath, outputDir, { filter: filterFn });
+      fs.copySync(starterPackPath, outputDir, { filter: filterFn, overwrite: false });
       cleanupStaleKeycloakArtifacts(outputDir, config);
     }
   }
@@ -95,7 +95,7 @@ async function generate(parsedData, config) {
   const conflicts = [];
   const { stampGeneratedBanner } = require('./generated-banner');
 
-  const writeOrPreview = (filePath, rawContent) => {
+  const writeOrPreview = (filePath, rawContent, writeOpts = {}) => {
     const content = stampGeneratedBanner(filePath, rawContent);
     const relativePath = path.relative(outputDir, filePath);
     const exists = fs.existsSync(filePath);
@@ -138,6 +138,12 @@ async function generate(parsedData, config) {
       }
 
       if (policy === 'merge') {
+        if (writeOpts.bypassMerge) {
+          fs.ensureDirSync(path.dirname(filePath));
+          fs.writeFileSync(filePath, content);
+          fileCount++;
+          return;
+        }
         const { mergeContent } = require('../utils/merger');
         const merged = mergeContent(existingContent, content);
         if (merged !== existingContent) {
@@ -451,23 +457,50 @@ async function generate(parsedData, config) {
         content = content.replace(/\s*\/\/\s*-+\n\s*\/\/\s*(Dashboards|General|Documentation)\n\s*\/\/\s*-+\n(?:[\s\S]*?(?=\s*\/\/\s*-+|\s*\/\/\s*404|\]))/g, '\n');
       }
 
-      const routesBlock = entities.map(entity => {
+      // Merge with existing routes between // cforge-routes-start and // cforge-routes-end
+      const existingRoutesMap = new Map();
+      const cforgeRoutesMatch = content.match(/\/\/ cforge-routes-start\s*([\s\S]*?)\/\/ cforge-routes-end/);
+      if (cforgeRoutesMatch && cforgeRoutesMatch[1]) {
+        const routeRegex = /\{\s*path:\s*['"]([^'"]+)['"][\s\S]*?\n\s*\},?/g;
+        let m;
+        while ((m = routeRegex.exec(cforgeRoutesMatch[1])) !== null) {
+          const p = m[1];
+          if (p && p !== 'user-management') {
+            existingRoutesMap.set(p, m[0].trim().replace(/,$/, ''));
+          }
+        }
+      }
+
+      for (const entity of entities) {
         const kebabName = helpers.toKebabCase(entity.name);
-        return `      {\n        path: '${kebabName}',\n        loadChildren: () => import('./modules/apps/${outputEntityFolder(entity, config)}/${kebabName}/${kebabName}.routes'),\n      },`;
-      }).join('\n');
+        const routeStr = `{\n        path: '${kebabName}',\n        loadChildren: () => import('./modules/apps/${outputEntityFolder(entity, config)}/${kebabName}/${kebabName}.routes'),\n      }`;
+        existingRoutesMap.set(kebabName, routeStr);
+      }
+
+      const mergedRoutes = Array.from(existingRoutesMap.values())
+        .map(r => `      ${r},`)
+        .join('\n');
 
       if (config.fuse.cleanLayout) {
         let content = fs.readFileSync(routesFilePath, 'utf8').replace(/\r\n/g, '\n');
         const childrenMatch = /children:\s*\[/.exec(content);
         if (childrenMatch) {
-        const cleanChildrenBlock = `children: [
+          // Preserve IAM user-management route added by auth-pack; cleanLayout rewrites children.
+          const iamRouteMatch = content.match(
+            /\{\s*path:\s*['"]user-management['"][\s\S]*?loadChildren:\s*\(\)\s*=>\s*import\(['"][^'"]+user-management\.routes['"]\)\s*,?\s*\},?/,
+          );
+          const iamRouteBlock = iamRouteMatch
+            ? `        ${iamRouteMatch[0].replace(/,\s*$/, '')},\n`
+            : '';
+
+          const cleanChildrenBlock = `children: [
         { path: '', pathMatch: 'full', redirectTo: '/auth/sign-in' },
         {
           path: 'welcome',
           loadComponent: () => import('./modules/extras/welcome/welcome.component')
         },
-        // cforge-routes-start
-${routesBlock}
+${iamRouteBlock}        // cforge-routes-start
+${mergedRoutes}
         // cforge-routes-end
         {
           path: '404',
@@ -478,16 +511,29 @@ ${routesBlock}
         { 
           path: '**', 
           loadComponent: () => import('./modules/extras/error/features/error-page'),
-          data: { errorCode: 404, title: 'Page not found' }
+          data: { errorCode: 404, title: 'Page not found' } 
         },
       ]`;
-          const routesArrayEnd = content.indexOf('    ],\n  },\n];');
-          if (routesArrayEnd !== -1) {
-            const newContent = content.slice(0, childrenMatch.index) + cleanChildrenBlock + content.slice(routesArrayEnd + 6);
-            writeOrPreview(routesFilePath, newContent);
+          let depth = 1;
+          let childrenEndIdx = -1;
+          const searchStart = childrenMatch.index + childrenMatch[0].length;
+          for (let i = searchStart; i < content.length; i++) {
+            if (content[i] === '[') depth++;
+            else if (content[i] === ']') {
+              depth--;
+              if (depth === 0) {
+                childrenEndIdx = i;
+                break;
+              }
+            }
+          }
+          if (childrenEndIdx !== -1) {
+            const newContent = content.slice(0, childrenMatch.index) + cleanChildrenBlock + content.slice(childrenEndIdx + 1);
+            writeOrPreview(routesFilePath, newContent, { bypassMerge: true });
           }
         }
       } else {
+        let content = fs.readFileSync(routesFilePath, 'utf8').replace(/\r\n/g, '\n');
         // Ensure markers exist
         if (!content.includes('// cforge-routes-start') || !content.includes('// cforge-routes-end')) {
           const childrenMatch = /children:\s*\[/.exec(content);
@@ -502,23 +548,55 @@ ${routesBlock}
 
         if (startIdx !== -1 && endIdx !== -1) {
           const startMarker = '// cforge-routes-start';
-          const endMarker = '// cforge-routes-end';
-          const newContent = content.slice(0, startIdx + startMarker.length) + '\n' + routesBlock + '\n      ' + content.slice(endIdx);
-          writeOrPreview(routesFilePath, newContent);
+          const newContent = content.slice(0, startIdx + startMarker.length) + '\n' + mergedRoutes + '\n      ' + content.slice(endIdx);
+          writeOrPreview(routesFilePath, newContent, { bypassMerge: true });
         }
       }
     }
 
     // 2. Update Navigation File
     if (config.generate.registrations?.navigation !== false && fs.existsSync(navFilePath)) {
-
-
       let content = fs.readFileSync(navFilePath, 'utf8');
 
       if (config.fuse?.includePrebuilt === false && !config.fuse?.cleanLayout) {
         content = content.replace(/\s*{\s*id:\s*'(dashboards|general|extras|documentation)'[\s\S]*?(?=\s*{\s*id:\s*'(dashboards|general|extras|documentation)'|\s*\];)/g, '');
       }
 
+      // Extract existing navigation groups from NAVIGATION array
+      const existingNavGroupsMap = new Map();
+      const navArrayStart = content.indexOf('export const NAVIGATION: NavigationItem[] = [');
+      if (navArrayStart !== -1) {
+        const afterStart = content.slice(navArrayStart + 'export const NAVIGATION: NavigationItem[] = ['.length);
+        const navArrayEnd = afterStart.lastIndexOf('];');
+        const arrayBody = navArrayEnd !== -1 ? afterStart.slice(0, navArrayEnd) : afterStart;
+
+        let depth = 0;
+        let currentGroupStart = -1;
+        for (let i = 0; i < arrayBody.length; i++) {
+          const ch = arrayBody[i];
+          if (ch === '{') {
+            if (depth === 0) currentGroupStart = i;
+            depth++;
+          } else if (ch === '}') {
+            depth--;
+            if (depth === 0 && currentGroupStart !== -1) {
+              const rawGroup = arrayBody.slice(currentGroupStart, i + 1);
+              const idMatch = rawGroup.match(/id:\s*['"]([^'"]+)['"]/);
+              if (idMatch) {
+                const groupId = idMatch[1];
+                if (
+                  !config.fuse.cleanLayout ||
+                  !['dashboards', 'general', 'extras', 'documentation'].includes(groupId)
+                ) {
+                  existingNavGroupsMap.set(groupId, rawGroup.trim().replace(/,$/, ''));
+                }
+              }
+              currentGroupStart = -1;
+            }
+          }
+        }
+      }
+
       const groups = new Map();
       for (const entity of entities) {
         const entityFolder = entity.folderName || folderName;
@@ -547,28 +625,31 @@ ${routesBlock}
         });
       }
 
-      const navigationBlock = Array.from(groups.values())
-        .map((group) => {
-          group.items.sort((a, b) => {
-            if (a.order !== b.order) return a.order - b.order;
-            return a.label.localeCompare(b.label);
-          });
-          const formattedItems = group.items
-            .map((item) => {
-              let str = `        {\n`;
-              str += `          id: '${item.id}',\n`;
-              str += `          label: '${item.label}',\n`;
-              str += `          icon: '${item.icon}',\n`;
-              str += `          route: '${item.route}'`;
-              if (item.permissions) {
-                str += `,\n          meta: { permissions: ${JSON.stringify(item.permissions)} }`;
-              }
-              str += `\n        }`;
-              return str;
-            })
-            .join(',\n');
-          return `    {\n      id: '${group.folder}-group',\n      label: '${group.label}',\n      description: 'Generated CRUD Modules',\n      icon: 'database',\n      children: [\n${formattedItems}\n      ]\n    },`;
-        })
+      for (const group of groups.values()) {
+        group.items.sort((a, b) => {
+          if (a.order !== b.order) return a.order - b.order;
+          return a.label.localeCompare(b.label);
+        });
+        const formattedItems = group.items
+          .map((item) => {
+            let str = `        {\n`;
+            str += `          id: '${item.id}',\n`;
+            str += `          label: '${item.label}',\n`;
+            str += `          icon: '${item.icon}',\n`;
+            str += `          route: '${item.route}'`;
+            if (item.permissions) {
+              str += `,\n          meta: { permissions: ${JSON.stringify(item.permissions)} }`;
+            }
+            str += `\n        }`;
+            return str;
+          })
+          .join(',\n');
+        const groupBlock = `    {\n      id: '${group.folder}-group',\n      label: '${group.label}',\n      description: 'Generated CRUD Modules',\n      icon: 'database',\n      children: [\n${formattedItems}\n      ]\n    }`;
+        existingNavGroupsMap.set(`${group.folder}-group`, groupBlock.trim());
+      }
+
+      const mergedNavigationBlock = Array.from(existingNavGroupsMap.values())
+        .map((g) => (g.startsWith('    ') ? `${g},` : `    ${g},`))
         .join('\n');
 
       if (config.fuse.cleanLayout) {
@@ -577,8 +658,8 @@ ${routesBlock}
         if (startArrayIdx !== -1) {
           const arrayEndIdx = normalized.lastIndexOf('];');
           if (arrayEndIdx !== -1) {
-            const newContent = content.slice(0, startArrayIdx) + 'export const NAVIGATION: NavigationItem[] = [\n' + navigationBlock + '\n];' + content.slice(arrayEndIdx + 2);
-            writeOrPreview(navFilePath, newContent);
+            const newContent = content.slice(0, startArrayIdx) + 'export const NAVIGATION: NavigationItem[] = [\n' + mergedNavigationBlock + '\n];' + content.slice(arrayEndIdx + 2);
+            writeOrPreview(navFilePath, newContent, { bypassMerge: true });
           }
         }
       } else {
@@ -596,9 +677,8 @@ ${routesBlock}
 
         if (startIdx !== -1 && endIdx !== -1) {
           const startMarker = '// cforge-navigation-start';
-          const endMarker = '// cforge-navigation-end';
-          const newContent = content.slice(0, startIdx + startMarker.length) + '\n' + navigationBlock + '\n    ' + content.slice(endIdx);
-          writeOrPreview(navFilePath, newContent);
+          const newContent = content.slice(0, startIdx + startMarker.length) + '\n' + mergedNavigationBlock + '\n    ' + content.slice(endIdx);
+          writeOrPreview(navFilePath, newContent, { bypassMerge: true });
         }
       }
     }

package/src/generator/project-output.js

@@ -104,8 +104,9 @@ async function generateProject(parsed, config, { configPath, inputPath, options
         action = answer.action;
       }
       if (action === 'skip') { change.skip = true; continue; }
-      // Merge cannot patch binaries (logos, sounds, fonts) — keep the existing file.
-      if (action === 'merge' && binary) { change.skip = true; continue; }
+      if (action === 'merge' && binary) {
+        throw new Error(`Cannot merge binary file "${change.target}". Use skip, ask, or overwrite. No project files were changed.`);
+      }
       if (action === 'merge') change.content = Buffer.from(mergeContent(change.old.toString('utf8'), change.content.toString('utf8')));
     }
     if (!config.dryRun) {

package/src/templates/angular/entity/components/interaction/actions/_entity_-actions.component.ts.ejs

@@ -16,7 +16,7 @@ import { AccessCtrlPipe } from '@/app/core/auth';
   selector: 'app-<%= toKebabCase(entity.name) %>-actions',
   templateUrl: './<%= toKebabCase(entity.name) %>-actions.component.html',
   host: {
-    class: 'block w-full xl:w-auto',
+    class: 'block w-full sm:w-auto md:shrink-0',
   },
   standalone: true,
   imports: [
@@ -50,7 +50,8 @@ export class <%= entity.name %>ActionsComponent {
   @Output() newClick = new EventEmitter<void>();
 
   onSearchByChange(value: string): void {
-    this.searchChange.emit({ searchBy: value, searchTerm: this.searchTerm });
+    this.searchTerm = '';
+    this.searchChange.emit({ searchBy: value, searchTerm: '' });
   }
 
   onSearchTermChange(value: string): void {

package/src/templates/angular/entity/components/presentation/list/_entity_-list.component.html.ejs

@@ -31,9 +31,9 @@ const estimateHeaderWidth = (label) => {
     <div #listViewport class="absolute inset-0 flex min-w-0 flex-col overflow-hidden">
 
       <!-- Header (fixed) -->
-      <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">
-          <h2 class="truncate text-3xl font-extrabold leading-7 tracking-tight sm:leading-10 md:text-4xl">
+      <div class="flex flex-0 flex-col border-b border-slate-200 bg-slate-100 p-6 pb-20 sm:flex-row sm:items-center sm:justify-between sm:flex-wrap 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 shrink-0">
+          <h2 class="text-3xl font-extrabold leading-7 tracking-tight sm:leading-10 md:text-4xl">
             <%= entity.name.replace(/([A-Z])/g, ' $1').trim() %> Management
           </h2>
         </div>

package/src/templates/angular/entity/components/presentation/list/_entity_-list.component.ts.ejs

@@ -220,12 +220,6 @@ export class <%= entity.name %>ListComponent extends BaseListComponent<<%= prefe
     this.restoreViewMode();
     this.restoreColumnPreferences();
     this.loadSearchState();
-    if (typeof localStorage !== 'undefined') {
-      const savedPageSize = localStorage.getItem(this.storageKeyPageSize);
-      if (savedPageSize) {
-        this.itemsPerPage = Number(savedPageSize);
-      }
-    }
     if (this.dialogData?.parentFilters) {
       this.baseParentFilters = { ...this.dialogData.parentFilters };
     }
@@ -287,13 +281,13 @@ export class <%= entity.name %>ListComponent extends BaseListComponent<<%= prefe
       return;
     }
 
-    if (typeof localStorage !== 'undefined' && this.paginator.pageSize !== this.itemsPerPage) {
+    if (this.paginator && this.paginator.pageSize !== this.itemsPerPage) {
       this.itemsPerPage = this.paginator.pageSize;
-      localStorage.setItem(this.storageKeyPageSize, String(this.itemsPerPage));
     }
 
     this.listRequest?.unsubscribe();
     this.isLoading = true;
+    this.cdr.markForCheck();
     const req = {
       page: this.paginator.pageIndex,
       size: this.paginator.pageSize,
@@ -307,12 +301,15 @@ export class <%= entity.name %>ListComponent extends BaseListComponent<<%= prefe
       tap(res => {
         this.isLoading = false;
         this.totalItems = Number(res.headers.get('X-Total-Count') ?? 0);
-        this.dataSource.data = this.sortRowsForDisplay(res.body ?? []);
+        this.rawRows = res.body ?? [];
+        this.dataSource.data = this.sortRowsForDisplay(this.rawRows);
+        this.cdr.markForCheck();
         this.cdr.detectChanges();
         setTimeout(() => { if (!this.destroyRef.destroyed) this.onTableScroll(); }, 0);
       }),
       catchError(() => {
         this.isLoading = false;
+        this.cdr.markForCheck();
         this.cdr.detectChanges();
         return of(null);
       })
@@ -528,8 +525,13 @@ export class <%= entity.name %>ListComponent extends BaseListComponent<<%= prefe
   <% }); %>
 
   handleSearchChanged(event: { searchBy: string; searchTerm: string }): void {
-    this.searchBy = event.searchBy;
-    this.searchTerm = event.searchTerm;
+    if (event.searchBy !== this.searchBy) {
+      this.searchBy = event.searchBy;
+      this.searchTerm = '';
+    } else {
+      this.searchBy = event.searchBy;
+      this.searchTerm = event.searchTerm;
+    }
 
     if (typeof localStorage !== 'undefined') {
       localStorage.setItem(this.storageKeySearchTerm, this.searchTerm);

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

@@ -3,16 +3,16 @@
     <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-0 flex-col border-b border-slate-200 bg-slate-100 p-6 pb-20 sm:flex-row sm:items-center sm:justify-between sm:flex-wrap 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 shrink-0">
           <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">
+            <h2 class="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">
+        <div class="mt-6 grid w-full grid-cols-2 gap-3 sm:mt-0 sm:w-auto sm:flex sm:shrink-0 sm:items-center md:ml-4">
           <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" />

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

@@ -1,6 +1,6 @@
 import { CdkScrollable } from '@angular/cdk/scrolling';
 import { CommonModule } from '@angular/common';
-import { Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
@@ -50,14 +50,16 @@ type ColumnPref = { key: string; label: string; alwaysVisible?: boolean };
     UserDetailComponent,
     UserFormComponent,
   ],
-  host: { class: 'relative flex h-full min-h-0 w-full min-w-0 flex-auto flex-col' },
+  host: { class: 'cforge-iam-list relative flex h-full min-h-0 w-full min-w-0 flex-auto flex-col' },
   templateUrl: './user-list.component.html',
   styleUrl: './user-list.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class UserListComponent implements OnInit, OnDestroy {
   readonly SCREEN = 'user-management';
   @ViewChild('drawer') drawer?: MatSidenav;
 
+  private readonly cdr = inject(ChangeDetectorRef);
   private readonly keycloak = inject(KeycloakAdminService);
   private readonly dialog = inject(MatDialog);
   private readonly router = inject(Router);
@@ -135,6 +137,7 @@ export class UserListComponent implements OnInit, OnDestroy {
 
   onSortChange(sort: Sort): void {
     this.sortState = sort;
+    this.cdr.markForCheck();
   }
 
   setViewMode(mode: 'table' | 'card'): void {
@@ -144,21 +147,25 @@ export class UserListComponent implements OnInit, OnDestroy {
     } catch {
       /* ignore */
     }
+    this.cdr.markForCheck();
   }
 
   load(): void {
     this.isSearching = true;
+    this.cdr.markForCheck();
     const term = (this.searchControl.value || '').trim();
     this.keycloak.searchUsers(term, this.pageIndex, this.pageSize).subscribe({
       next: (page) => {
         this.users = page.users;
         this.totalItems = page.totalCount;
         this.isSearching = false;
+        this.cdr.markForCheck();
       },
       error: () => {
         this.users = [];
         this.totalItems = 0;
         this.isSearching = false;
+        this.cdr.markForCheck();
       },
     });
   }
@@ -312,6 +319,7 @@ export class UserListComponent implements OnInit, OnDestroy {
     } catch {
       /* ignore */
     }
+    this.cdr.markForCheck();
   }
 
   isPinned(id?: string): boolean {
@@ -337,6 +345,7 @@ export class UserListComponent implements OnInit, OnDestroy {
       /* ignore */
     }
     this.activeFlagUserId = null;
+    this.cdr.markForCheck();
   }
 
   getFlagClass(id?: string): string {