cloud-ide-core 2.0.124 → 2.0.130

package/fesm2022/cloud-ide-core.mjs

@@ -1,6 +1,6 @@
 import { authGuard, SharedObjectIdService, CideSharedOrgStructureComponent } from 'cloud-ide-shared';
 import * as i0 from '@angular/core';
-import { Injectable, Component, inject, DestroyRef, viewChild, signal, computed, input, output, ChangeDetectorRef, ViewChild } from '@angular/core';
+import { Injectable, Component, inject, DestroyRef, viewChild, signal, computed, input, output, ChangeDetectorRef, effect, ViewChild } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$2 from '@angular/forms';
@@ -12,8 +12,8 @@ import { tap, catchError, map } from 'rxjs/operators';
 import { coreRoutesUrl, generateStringFromObject, cidePath, hostManagerRoutesUrl, MDepartment, MDesignationInsertUpdatePayload, MDesignation, MGradeLevel, generateObjectFromString, userRoutesUrl, AuthUserMstGetByIdPayload, customEncrypt, customDecrypt, AuthUserMstListPayload, academicsRoutesUrl } from 'cloud-ide-lms-model';
 import * as i1 from '@angular/common/http';
 import { HttpClient } from '@angular/common/http';
-import { NotificationService, CideEleDataGridComponent, CideEleButtonComponent, CideInputComponent, CideSelectComponent, CideTextareaComponent, CideIconComponent, CideEleDropdownComponent, ConfirmationService, CideEleGlobalNotificationsComponent, CideEleConfirmationModalComponent, CideEleJsonEditorComponent, CideEleFileInputComponent, CideEleFileImageDirective, CideFormFieldErrorComponent, CideEleFileManagerService, CideEleTabComponent, CideEleFloatingFeaturesService, CideEleToastNotificationComponent } from 'cloud-ide-element';
-import { RightsService, AppStateHelperService, CideLytSharedWrapperComponent, CideLytFloatingEntityRightsSharingService, CideLytSharedService } from 'cloud-ide-layout';
+import { NotificationService, CideEleDataGridComponent, CideEleButtonComponent, CideInputComponent, CideSelectComponent, CideTextareaComponent, CideIconComponent, CideEleDropdownComponent, ConfirmationService, CideEleGlobalNotificationsComponent, CideEleConfirmationModalComponent, CideEleJsonEditorComponent, CideEleFileInputComponent, CideEleFileImageDirective, CideFormFieldErrorComponent, CideEleFileManagerService, CideEleTabComponent, CideEleFloatingFeaturesService, CideEleToastNotificationComponent, CideEleCardComponent } from 'cloud-ide-element';
+import { RightsService, CideLytSharedWrapperComponent, AppStateHelperService, CideLytFloatingEntityRightsSharingService, CideLytSharedService } from 'cloud-ide-layout';
 
 const coreRoutes = [
     {
@@ -63,7 +63,7 @@ const coreRoutes = [
     },
     {
         path: 'page-form',
-        loadComponent: () => import('./cloud-ide-core-page-form.component-C3xTQLI3.mjs').then(c => c.CideCorePageFormComponent),
+        loadComponent: () => import('./cloud-ide-core-page-form.component-B9tSopSN.mjs').then(c => c.CideCorePageFormComponent),
         title: 'Page Form',
         canActivate: [authGuard],
         data: {
@@ -72,7 +72,7 @@ const coreRoutes = [
     },
     {
         path: 'page-form/:query',
-        loadComponent: () => import('./cloud-ide-core-page-form.component-C3xTQLI3.mjs').then(c => c.CideCorePageFormComponent),
+        loadComponent: () => import('./cloud-ide-core-page-form.component-B9tSopSN.mjs').then(c => c.CideCorePageFormComponent),
         title: 'Page Form',
         canActivate: [authGuard],
         data: {
@@ -979,6 +979,8 @@ class MenuListComponent {
     fb = inject(NonNullableFormBuilder);
     router = inject(Router);
     rightsService = inject(RightsService);
+    // Shared wrapper setup
+    shared_wrapper_setup_param = { sypg_page_code: 'core_menu_list' };
     // Modern ViewChild signals for template renderers (Angular 20 approach)
     menuDetailsRendererTemplate = viewChild.required('menuDetailsRendererTemplate');
     menuTypeRendererTemplate = viewChild.required('menuTypeRendererTemplate');
@@ -1202,24 +1204,12 @@ class MenuListComponent {
     // Action handlers for grid actions
     actionHandlers = {
         onEditMenuItem: (row) => {
-            if (!this.rightsService.hasRight('EDIT')) {
-                this.error.set('You do not have permission to edit menu items');
-                return;
-            }
             this.editMenuItem(row._id || '');
         },
         onToggleMenuItem: (row) => {
-            if (!this.rightsService.hasRight('EDIT')) {
-                this.error.set('You do not have permission to change menu item status');
-                return;
-            }
             this.toggleItemStatus(row._id || '');
         },
         onDeleteMenuItem: (row) => {
-            if (!this.rightsService.hasRight('DELETE')) {
-                this.error.set('You do not have permission to delete menu items');
-                return;
-            }
             this.deleteMenuItem(row._id || '');
         },
         onMenuItemRowClick: (row) => this.onMenuItemRowClick(row),
@@ -1229,6 +1219,11 @@ class MenuListComponent {
         saveOrder: () => this.saveMenuOrder()
     };
     hasSelection = computed(() => this.selectedItems().length > 0, ...(ngDevMode ? [{ debugName: "hasSelection" }] : []));
+    // Rights computed signals
+    canCreate = computed(() => this.rightsService.hasRight('CREATE'), ...(ngDevMode ? [{ debugName: "canCreate" }] : []));
+    canEdit = computed(() => this.rightsService.hasRight('EDIT'), ...(ngDevMode ? [{ debugName: "canEdit" }] : []));
+    canDelete = computed(() => this.rightsService.hasRight('DELETE'), ...(ngDevMode ? [{ debugName: "canDelete" }] : []));
+    canView = computed(() => this.rightsService.hasRight('VIEW'), ...(ngDevMode ? [{ debugName: "canView" }] : []));
     // Pagination computed properties
     totalPages = computed(() => Math.ceil(this.totalItems() / this.pageSize()), ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
     hasNextPage = computed(() => this.currentPage() < this.totalPages(), ...(ngDevMode ? [{ debugName: "hasNextPage" }] : []));
@@ -1697,10 +1692,6 @@ class MenuListComponent {
      * Navigate to edit menu form
      */
     editMenuItem(itemId) {
-        if (!this.rightsService.hasRight('EDIT')) {
-            this.error.set('You do not have permission to edit menu items');
-            return;
-        }
         console.log('🔵 editMenuItem called with:', itemId);
         // Set edit mode and get the menu item by ID
         this.isEditMode.set(true);
@@ -1774,10 +1765,6 @@ class MenuListComponent {
      * Delete menu item
      */
     deleteMenuItem(itemId) {
-        if (!this.rightsService.hasRight('DELETE')) {
-            this.error.set('You do not have permission to delete menu items');
-            return;
-        }
         console.log('🔵 deleteMenuItem called with:', itemId);
         if (confirm('Are you sure you want to delete this menu item?')) {
             this.loading.set(true);
@@ -1838,10 +1825,6 @@ class MenuListComponent {
      * Toggle menu item status
      */
     toggleItemStatus(itemId) {
-        if (!this.rightsService.hasRight('EDIT')) {
-            this.error.set('You do not have permission to change menu item status');
-            return;
-        }
         console.log('🔵 toggleItemStatus called with:', itemId);
         this.loading.set(true);
         this.menuService.toggleMenuItemStatus(itemId)
@@ -1944,11 +1927,6 @@ class MenuListComponent {
      * Quick add or update menu item using reactive form
      */
     quickAddMenuItem() {
-        const requiredRight = this.isEditMode() ? 'EDIT' : 'CREATE';
-        if (!this.rightsService.hasRight(requiredRight)) {
-            this.error.set(`You do not have permission to ${this.isEditMode() ? 'edit' : 'create'} menu items`);
-            return;
-        }
         if (this.quickAddForm.invalid)
             return;
         const formValue = this.quickAddForm.value;
@@ -2037,10 +2015,6 @@ class MenuListComponent {
      * Handle add child button click from row action
      */
     onAddChild(parentItem) {
-        if (!this.rightsService.hasRight('CREATE')) {
-            this.error.set('You do not have permission to create menu items');
-            return;
-        }
         console.log('🔵 onAddChild called with:', parentItem);
         console.log('🔵 Parent title:', parentItem.syme_title);
         // Clear edit mode and retrieved item when adding a child
@@ -2317,32 +2291,40 @@ class MenuListComponent {
      * Get dropdown items for menu actions
      */
     getDropdownItems(menuItem) {
-        return [
-            {
+        const items = [];
+        if (this.canCreate()) {
+            items.push({
                 id: 'addChild',
                 label: 'Add Child',
                 icon: 'add',
                 disabled: false
-            },
-            {
+            });
+        }
+        if (this.canEdit()) {
+            items.push({
                 id: 'edit',
                 label: 'Edit',
                 icon: 'edit',
                 disabled: false
-            },
-            {
+            });
+        }
+        if (this.canDelete()) {
+            items.push({
                 id: 'delete',
                 label: 'Delete',
                 icon: 'delete',
                 disabled: false
-            },
-            {
+            });
+        }
+        if (this.canEdit()) {
+            items.push({
                 id: 'toggle',
                 label: menuItem.syme_isactive ? 'Deactivate' : 'Activate',
                 icon: menuItem.syme_isactive ? 'block' : 'check_circle',
                 disabled: false
-            }
-        ];
+            });
+        }
+        return items;
     }
     /**
      * Handle dropdown item click
@@ -2364,7 +2346,7 @@ class MenuListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MenuListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: MenuListComponent, isStandalone: true, selector: "cide-core-app-menu-list", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuTypeRendererTemplate", first: true, predicate: ["menuTypeRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsRendererTemplate", first: true, predicate: ["permissionsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Menu List Container -->\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Quick Add Form Section -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Menu Item' : 'Quick Add Menu Item' }}</h6>\n      </div>\n      @if (selectedParentItem()) {\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-2 tw-rounded-lg\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentItem()?.syme_title }}</span>\n          </div>\n          <button \n            cideEleButton \n            variant=\"ghost\" \n            size=\"xs\" \n            type=\"button\" \n            (click)=\"clearSelectedParent()\" \n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n            </svg>\n          </button>\n        </div>\n      }\n    </div>\n    \n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddMenuItem()\">\n    <!-- First Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n      <!-- Menu Title -->\n      <div>\n        <cide-ele-input \n          id=\"syme_title\" \n          label=\"Title\" \n          formControlName=\"syme_title\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Menu Type -->\n      <div>\n        <cide-ele-select \n          label=\"Type\" \n          [options]=\"menuTypeOptions()\" \n          formControlName=\"syme_type\"\n          placeholder=\"Select type\"\n          size=\"sm\"\n          (ngModelChange)=\"onMenuTypeChange()\">\n        </cide-ele-select>\n      </div>\n      \n      <!-- Path -->\n      <div>\n        <cide-ele-input \n          id=\"quickPath\" \n          type=\"text\"\n          label=\"Path\" \n          formControlName=\"syme_path\"\n          placeholder=\"/path/to/route\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Icon -->\n      <div>\n        <cide-ele-input \n          id=\"quickIcon\" \n          type=\"text\"\n          label=\"Icon\" \n          formControlName=\"syme_icon\"\n          placeholder=\"Icon name\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Empty div for spacing -->\n      <div></div>\n    </div>\n    \n    <!-- Second Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n      <!-- Description -->\n      <div>\n        <cide-ele-textarea \n          id=\"syme_desc\" \n          label=\"Description\" \n          formControlName=\"syme_desc\"\n          placeholder=\"Menu description\"\n          rows=\"2\"\n          size=\"sm\">\n        </cide-ele-textarea>\n      </div>\n      \n      <!-- Permissions (only show for menu and title types) -->\n      @if (quickAddForm.get('syme_type')?.value === 'menu') {\n      <div>\n          <cide-ele-select \n            label=\"Permissions\" \n            [options]=\"permissionOptions()\" \n            formControlName=\"syme_permissions_id_sygms\"\n            placeholder=\"Select permissions for this menu\"\n            [multiple]=\"true\"\n            size=\"sm\">\n          </cide-ele-select>\n        </div>\n      }\n      \n      <!-- Pages (multiselect) -->\n      <div>\n        <cide-ele-select \n          label=\"Pages\" \n          [options]=\"pageOptions()\" \n          formControlName=\"syme_pages_id_sypg\"\n          placeholder=\"Select pages to connect\"\n          [multiple]=\"true\"\n          [loading]=\"pagesLoading()\"\n          [searchable]=\"true\"\n          size=\"sm\">\n        </cide-ele-select>\n      </div>\n      \n      <!-- Link -->\n      <div>\n        <cide-ele-input \n          id=\"quickLink\" \n          type=\"text\"\n          label=\"Link\" \n          formControlName=\"syme_link\"\n          placeholder=\"External link\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Active Status and Action Buttons -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\n          <!-- Active Checkbox -->\n          <cide-ele-input \n            id=\"quickIsActive\"\n            type=\"checkbox\"\n            label=\"Active\"\n            formControlName=\"syme_isactive\"\n            size=\"sm\">\n          </cide-ele-input>\n          \n          <!-- Action Buttons -->\n          <button \n            cideEleButton \n            variant=\"primary\" \n            size=\"sm\" \n            type=\"submit\"\n            [disabled]=\"quickAddForm.invalid\"\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            {{ isEditMode() ? 'Update' : 'Add' }}\n          </button>\n          <button \n            cideEleButton \n            variant=\"outline\" \n            size=\"sm\" \n            type=\"button\"\n            (click)=\"resetQuickAddForm()\"\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n            Reset\n          </button>\n        </div>\n      </div>\n    </div>\n    </form>\n    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative tw-p-0\">\n  <!-- Data Grid Component -->\n  <div class=\"tw-h-full tw-w-full tw-overflow-auto\">\n    \n    <cide-ele-data-grid \n      [config]=\"gridConfig()\" \n      [templateRenderers]=\"getTemplateRenderers()\"\n      [actionHandlers]=\"actionHandlers\"\n      [dragDropEnabled]=\"true\" \n      (gridEvent)=\"onGridEvent($event)\">\n    </cide-ele-data-grid>\n  </div>\n\n\n    </div>\n  </div>\n\n</div>\n\n<!-- \n  Angular Template References for Grid Renderers (Best Practice)\n  \n  These ng-template elements represent the Angular best practice for custom rendering.\n  They provide:\n  - Type safety with template context\n  - Component lifecycle integration\n  - Change detection optimization\n  - Proper event handling\n  - Accessibility features\n  \n  Note: Current data grid uses string renderers for compatibility.\n  Templates are maintained for future component enhancement.\n-->\n\n\n\n<!-- Menu Details Renderer Template -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        class=\"tw-text-gray-400\" \n        size=\"xs\">\n        {{ row.syme_icon || 'folder_open' }}\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.syme_title\">\n        {{ row.syme_title || 'Untitled' }}\n      </div>\n      @if (row.syme_desc) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.syme_desc\">\n          {{ row.syme_desc }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"getMenuTypeClass(row.syme_type)\">\n    {{ getMenuTypeLabel(row.syme_type) }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-max-w-full tw-items-center\">\n    @if (row.syme_type === 'menu') {\n      @if (row.syme_permissions_id_sygms && row.syme_permissions_id_sygms.length > 0) {\n        @for (permissionId of row.syme_permissions_id_sygms.slice(0, 3); track permissionId) {\n          <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800 tw-whitespace-nowrap tw-h-5\">\n            {{ getPermissionById(permissionId)?.sygms_title || getPermissionById(permissionId)?.sygms_code || 'Unknown' }}\n          </span>\n        }\n        @if (row.syme_permissions_id_sygms.length > 3) {\n          <span \n            class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-600 tw-whitespace-nowrap tw-cursor-help tw-h-5\"\n            [title]=\"getAllPermissionNames(row.syme_permissions_id_sygms)\">\n            +{{ row.syme_permissions_id_sygms.length - 3 }} more\n          </span>\n        }\n      } @else {\n        <span class=\"tw-text-xs tw-text-gray-500 tw-h-5 tw-flex tw-items-center\">No permissions</span>\n      }\n    } @else {\n      <!-- Show N/A for module, section, and title types -->\n      <span class=\"tw-text-xs tw-text-gray-400 tw-h-5 tw-flex tw-items-center\">N/A</span>\n    }\n  </div>\n</ng-template>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: MenuListComponent, isStandalone: true, selector: "cide-core-app-menu-list", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuTypeRendererTemplate", first: true, predicate: ["menuTypeRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsRendererTemplate", first: true, predicate: ["permissionsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Menu List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_menu_list' }\">\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Quick Add Form Section -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Menu Item' : 'Quick Add Menu Item' }}</h6>\n      </div>\n      @if (selectedParentItem()) {\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-2 tw-rounded-lg\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentItem()?.syme_title }}</span>\n          </div>\n          <button \n            cideEleButton \n            variant=\"ghost\" \n            size=\"xs\" \n            type=\"button\" \n            (click)=\"clearSelectedParent()\" \n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n            </svg>\n          </button>\n        </div>\n      }\n    </div>\n    \n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddMenuItem()\">\n    <!-- First Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n      <!-- Menu Title -->\n      <div>\n        <cide-ele-input \n          id=\"syme_title\" \n          label=\"Title\" \n          formControlName=\"syme_title\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Menu Type -->\n      <div>\n        <cide-ele-select \n          label=\"Type\" \n          [options]=\"menuTypeOptions()\" \n          formControlName=\"syme_type\"\n          placeholder=\"Select type\"\n          size=\"sm\"\n          (ngModelChange)=\"onMenuTypeChange()\">\n        </cide-ele-select>\n      </div>\n      \n      <!-- Path -->\n      <div>\n        <cide-ele-input \n          id=\"quickPath\" \n          type=\"text\"\n          label=\"Path\" \n          formControlName=\"syme_path\"\n          placeholder=\"/path/to/route\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Icon -->\n      <div>\n        <cide-ele-input \n          id=\"quickIcon\" \n          type=\"text\"\n          label=\"Icon\" \n          formControlName=\"syme_icon\"\n          placeholder=\"Icon name\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Empty div for spacing -->\n      <div></div>\n    </div>\n    \n    <!-- Second Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n      <!-- Description -->\n      <div>\n        <cide-ele-textarea \n          id=\"syme_desc\" \n          label=\"Description\" \n          formControlName=\"syme_desc\"\n          placeholder=\"Menu description\"\n          rows=\"2\"\n          size=\"sm\">\n        </cide-ele-textarea>\n      </div>\n      \n      <!-- Permissions (only show for menu and title types) -->\n      @if (quickAddForm.get('syme_type')?.value === 'menu') {\n      <div>\n          <cide-ele-select \n            label=\"Permissions\" \n            [options]=\"permissionOptions()\" \n            formControlName=\"syme_permissions_id_sygms\"\n            placeholder=\"Select permissions for this menu\"\n            [multiple]=\"true\"\n            size=\"sm\">\n          </cide-ele-select>\n        </div>\n      }\n      \n      <!-- Pages (multiselect) -->\n      <div>\n        <cide-ele-select \n          label=\"Pages\" \n          [options]=\"pageOptions()\" \n          formControlName=\"syme_pages_id_sypg\"\n          placeholder=\"Select pages to connect\"\n          [multiple]=\"true\"\n          [loading]=\"pagesLoading()\"\n          [searchable]=\"true\"\n          size=\"sm\">\n        </cide-ele-select>\n      </div>\n      \n      <!-- Link -->\n      <div>\n        <cide-ele-input \n          id=\"quickLink\" \n          type=\"text\"\n          label=\"Link\" \n          formControlName=\"syme_link\"\n          placeholder=\"External link\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Active Status and Action Buttons -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\n          <!-- Active Checkbox -->\n          <cide-ele-input \n            id=\"quickIsActive\"\n            type=\"checkbox\"\n            label=\"Active\"\n            formControlName=\"syme_isactive\"\n            size=\"sm\">\n          </cide-ele-input>\n          \n          <!-- Action Buttons -->\n          <button \n            cideEleButton \n            variant=\"primary\" \n            size=\"sm\" \n            type=\"submit\"\n            [disabled]=\"quickAddForm.invalid\"\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            {{ isEditMode() ? 'Update' : 'Add' }}\n          </button>\n          <button \n            cideEleButton \n            variant=\"outline\" \n            size=\"sm\" \n            type=\"button\"\n            (click)=\"resetQuickAddForm()\"\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n            Reset\n          </button>\n        </div>\n      </div>\n    </div>\n    </form>\n    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative tw-p-0\">\n  <!-- Data Grid Component -->\n  <div class=\"tw-h-full tw-w-full tw-overflow-auto\">\n    \n    <cide-ele-data-grid \n      [config]=\"gridConfig()\" \n      [templateRenderers]=\"getTemplateRenderers()\"\n      [actionHandlers]=\"actionHandlers\"\n      [dragDropEnabled]=\"true\" \n      (gridEvent)=\"onGridEvent($event)\">\n    </cide-ele-data-grid>\n  </div>\n\n\n    </div>\n  </div>\n\n</div>\n\n<!-- \n  Angular Template References for Grid Renderers (Best Practice)\n  \n  These ng-template elements represent the Angular best practice for custom rendering.\n  They provide:\n  - Type safety with template context\n  - Component lifecycle integration\n  - Change detection optimization\n  - Proper event handling\n  - Accessibility features\n  \n  Note: Current data grid uses string renderers for compatibility.\n  Templates are maintained for future component enhancement.\n-->\n\n\n\n<!-- Menu Details Renderer Template -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        class=\"tw-text-gray-400\" \n        size=\"xs\">\n        {{ row.syme_icon || 'folder_open' }}\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.syme_title\">\n        {{ row.syme_title || 'Untitled' }}\n      </div>\n      @if (row.syme_desc) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.syme_desc\">\n          {{ row.syme_desc }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"getMenuTypeClass(row.syme_type)\">\n    {{ getMenuTypeLabel(row.syme_type) }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-max-w-full tw-items-center\">\n    @if (row.syme_type === 'menu') {\n      @if (row.syme_permissions_id_sygms && row.syme_permissions_id_sygms.length > 0) {\n        @for (permissionId of row.syme_permissions_id_sygms.slice(0, 3); track permissionId) {\n          <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800 tw-whitespace-nowrap tw-h-5\">\n            {{ getPermissionById(permissionId)?.sygms_title || getPermissionById(permissionId)?.sygms_code || 'Unknown' }}\n          </span>\n        }\n        @if (row.syme_permissions_id_sygms.length > 3) {\n          <span \n            class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-600 tw-whitespace-nowrap tw-cursor-help tw-h-5\"\n            [title]=\"getAllPermissionNames(row.syme_permissions_id_sygms)\">\n            +{{ row.syme_permissions_id_sygms.length - 3 }} more\n          </span>\n        }\n      } @else {\n        <span class=\"tw-text-xs tw-text-gray-500 tw-h-5 tw-flex tw-items-center\">No permissions</span>\n      }\n    } @else {\n      <!-- Show N/A for module, section, and title types -->\n      <span class=\"tw-text-xs tw-text-gray-400 tw-h-5 tw-flex tw-items-center\">N/A</span>\n    }\n  </div>\n</ng-template>\n</cide-lyt-shared-wrapper>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MenuListComponent, decorators: [{
             type: Component,
@@ -2378,8 +2360,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideSelectComponent,
                         CideTextareaComponent,
                         CideIconComponent,
-                        CideEleDropdownComponent
-                    ], template: "<!-- Menu List Container -->\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Quick Add Form Section -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Menu Item' : 'Quick Add Menu Item' }}</h6>\n      </div>\n      @if (selectedParentItem()) {\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-2 tw-rounded-lg\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentItem()?.syme_title }}</span>\n          </div>\n          <button \n            cideEleButton \n            variant=\"ghost\" \n            size=\"xs\" \n            type=\"button\" \n            (click)=\"clearSelectedParent()\" \n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n            </svg>\n          </button>\n        </div>\n      }\n    </div>\n    \n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddMenuItem()\">\n    <!-- First Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n      <!-- Menu Title -->\n      <div>\n        <cide-ele-input \n          id=\"syme_title\" \n          label=\"Title\" \n          formControlName=\"syme_title\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Menu Type -->\n      <div>\n        <cide-ele-select \n          label=\"Type\" \n          [options]=\"menuTypeOptions()\" \n          formControlName=\"syme_type\"\n          placeholder=\"Select type\"\n          size=\"sm\"\n          (ngModelChange)=\"onMenuTypeChange()\">\n        </cide-ele-select>\n      </div>\n      \n      <!-- Path -->\n      <div>\n        <cide-ele-input \n          id=\"quickPath\" \n          type=\"text\"\n          label=\"Path\" \n          formControlName=\"syme_path\"\n          placeholder=\"/path/to/route\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Icon -->\n      <div>\n        <cide-ele-input \n          id=\"quickIcon\" \n          type=\"text\"\n          label=\"Icon\" \n          formControlName=\"syme_icon\"\n          placeholder=\"Icon name\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Empty div for spacing -->\n      <div></div>\n    </div>\n    \n    <!-- Second Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n      <!-- Description -->\n      <div>\n        <cide-ele-textarea \n          id=\"syme_desc\" \n          label=\"Description\" \n          formControlName=\"syme_desc\"\n          placeholder=\"Menu description\"\n          rows=\"2\"\n          size=\"sm\">\n        </cide-ele-textarea>\n      </div>\n      \n      <!-- Permissions (only show for menu and title types) -->\n      @if (quickAddForm.get('syme_type')?.value === 'menu') {\n      <div>\n          <cide-ele-select \n            label=\"Permissions\" \n            [options]=\"permissionOptions()\" \n            formControlName=\"syme_permissions_id_sygms\"\n            placeholder=\"Select permissions for this menu\"\n            [multiple]=\"true\"\n            size=\"sm\">\n          </cide-ele-select>\n        </div>\n      }\n      \n      <!-- Pages (multiselect) -->\n      <div>\n        <cide-ele-select \n          label=\"Pages\" \n          [options]=\"pageOptions()\" \n          formControlName=\"syme_pages_id_sypg\"\n          placeholder=\"Select pages to connect\"\n          [multiple]=\"true\"\n          [loading]=\"pagesLoading()\"\n          [searchable]=\"true\"\n          size=\"sm\">\n        </cide-ele-select>\n      </div>\n      \n      <!-- Link -->\n      <div>\n        <cide-ele-input \n          id=\"quickLink\" \n          type=\"text\"\n          label=\"Link\" \n          formControlName=\"syme_link\"\n          placeholder=\"External link\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Active Status and Action Buttons -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\n          <!-- Active Checkbox -->\n          <cide-ele-input \n            id=\"quickIsActive\"\n            type=\"checkbox\"\n            label=\"Active\"\n            formControlName=\"syme_isactive\"\n            size=\"sm\">\n          </cide-ele-input>\n          \n          <!-- Action Buttons -->\n          <button \n            cideEleButton \n            variant=\"primary\" \n            size=\"sm\" \n            type=\"submit\"\n            [disabled]=\"quickAddForm.invalid\"\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            {{ isEditMode() ? 'Update' : 'Add' }}\n          </button>\n          <button \n            cideEleButton \n            variant=\"outline\" \n            size=\"sm\" \n            type=\"button\"\n            (click)=\"resetQuickAddForm()\"\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n            Reset\n          </button>\n        </div>\n      </div>\n    </div>\n    </form>\n    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative tw-p-0\">\n  <!-- Data Grid Component -->\n  <div class=\"tw-h-full tw-w-full tw-overflow-auto\">\n    \n    <cide-ele-data-grid \n      [config]=\"gridConfig()\" \n      [templateRenderers]=\"getTemplateRenderers()\"\n      [actionHandlers]=\"actionHandlers\"\n      [dragDropEnabled]=\"true\" \n      (gridEvent)=\"onGridEvent($event)\">\n    </cide-ele-data-grid>\n  </div>\n\n\n    </div>\n  </div>\n\n</div>\n\n<!-- \n  Angular Template References for Grid Renderers (Best Practice)\n  \n  These ng-template elements represent the Angular best practice for custom rendering.\n  They provide:\n  - Type safety with template context\n  - Component lifecycle integration\n  - Change detection optimization\n  - Proper event handling\n  - Accessibility features\n  \n  Note: Current data grid uses string renderers for compatibility.\n  Templates are maintained for future component enhancement.\n-->\n\n\n\n<!-- Menu Details Renderer Template -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        class=\"tw-text-gray-400\" \n        size=\"xs\">\n        {{ row.syme_icon || 'folder_open' }}\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.syme_title\">\n        {{ row.syme_title || 'Untitled' }}\n      </div>\n      @if (row.syme_desc) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.syme_desc\">\n          {{ row.syme_desc }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"getMenuTypeClass(row.syme_type)\">\n    {{ getMenuTypeLabel(row.syme_type) }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-max-w-full tw-items-center\">\n    @if (row.syme_type === 'menu') {\n      @if (row.syme_permissions_id_sygms && row.syme_permissions_id_sygms.length > 0) {\n        @for (permissionId of row.syme_permissions_id_sygms.slice(0, 3); track permissionId) {\n          <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800 tw-whitespace-nowrap tw-h-5\">\n            {{ getPermissionById(permissionId)?.sygms_title || getPermissionById(permissionId)?.sygms_code || 'Unknown' }}\n          </span>\n        }\n        @if (row.syme_permissions_id_sygms.length > 3) {\n          <span \n            class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-600 tw-whitespace-nowrap tw-cursor-help tw-h-5\"\n            [title]=\"getAllPermissionNames(row.syme_permissions_id_sygms)\">\n            +{{ row.syme_permissions_id_sygms.length - 3 }} more\n          </span>\n        }\n      } @else {\n        <span class=\"tw-text-xs tw-text-gray-500 tw-h-5 tw-flex tw-items-center\">No permissions</span>\n      }\n    } @else {\n      <!-- Show N/A for module, section, and title types -->\n      <span class=\"tw-text-xs tw-text-gray-400 tw-h-5 tw-flex tw-items-center\">N/A</span>\n    }\n  </div>\n</ng-template>\n\n" }]
+                        CideEleDropdownComponent,
+                        CideLytSharedWrapperComponent
+                    ], template: "<!-- Menu List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_menu_list' }\">\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Quick Add Form Section -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Menu Item' : 'Quick Add Menu Item' }}</h6>\n      </div>\n      @if (selectedParentItem()) {\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-2 tw-rounded-lg\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentItem()?.syme_title }}</span>\n          </div>\n          <button \n            cideEleButton \n            variant=\"ghost\" \n            size=\"xs\" \n            type=\"button\" \n            (click)=\"clearSelectedParent()\" \n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n            </svg>\n          </button>\n        </div>\n      }\n    </div>\n    \n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddMenuItem()\">\n    <!-- First Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n      <!-- Menu Title -->\n      <div>\n        <cide-ele-input \n          id=\"syme_title\" \n          label=\"Title\" \n          formControlName=\"syme_title\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Menu Type -->\n      <div>\n        <cide-ele-select \n          label=\"Type\" \n          [options]=\"menuTypeOptions()\" \n          formControlName=\"syme_type\"\n          placeholder=\"Select type\"\n          size=\"sm\"\n          (ngModelChange)=\"onMenuTypeChange()\">\n        </cide-ele-select>\n      </div>\n      \n      <!-- Path -->\n      <div>\n        <cide-ele-input \n          id=\"quickPath\" \n          type=\"text\"\n          label=\"Path\" \n          formControlName=\"syme_path\"\n          placeholder=\"/path/to/route\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Icon -->\n      <div>\n        <cide-ele-input \n          id=\"quickIcon\" \n          type=\"text\"\n          label=\"Icon\" \n          formControlName=\"syme_icon\"\n          placeholder=\"Icon name\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Empty div for spacing -->\n      <div></div>\n    </div>\n    \n    <!-- Second Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n      <!-- Description -->\n      <div>\n        <cide-ele-textarea \n          id=\"syme_desc\" \n          label=\"Description\" \n          formControlName=\"syme_desc\"\n          placeholder=\"Menu description\"\n          rows=\"2\"\n          size=\"sm\">\n        </cide-ele-textarea>\n      </div>\n      \n      <!-- Permissions (only show for menu and title types) -->\n      @if (quickAddForm.get('syme_type')?.value === 'menu') {\n      <div>\n          <cide-ele-select \n            label=\"Permissions\" \n            [options]=\"permissionOptions()\" \n            formControlName=\"syme_permissions_id_sygms\"\n            placeholder=\"Select permissions for this menu\"\n            [multiple]=\"true\"\n            size=\"sm\">\n          </cide-ele-select>\n        </div>\n      }\n      \n      <!-- Pages (multiselect) -->\n      <div>\n        <cide-ele-select \n          label=\"Pages\" \n          [options]=\"pageOptions()\" \n          formControlName=\"syme_pages_id_sypg\"\n          placeholder=\"Select pages to connect\"\n          [multiple]=\"true\"\n          [loading]=\"pagesLoading()\"\n          [searchable]=\"true\"\n          size=\"sm\">\n        </cide-ele-select>\n      </div>\n      \n      <!-- Link -->\n      <div>\n        <cide-ele-input \n          id=\"quickLink\" \n          type=\"text\"\n          label=\"Link\" \n          formControlName=\"syme_link\"\n          placeholder=\"External link\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Active Status and Action Buttons -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\n          <!-- Active Checkbox -->\n          <cide-ele-input \n            id=\"quickIsActive\"\n            type=\"checkbox\"\n            label=\"Active\"\n            formControlName=\"syme_isactive\"\n            size=\"sm\">\n          </cide-ele-input>\n          \n          <!-- Action Buttons -->\n          <button \n            cideEleButton \n            variant=\"primary\" \n            size=\"sm\" \n            type=\"submit\"\n            [disabled]=\"quickAddForm.invalid\"\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            {{ isEditMode() ? 'Update' : 'Add' }}\n          </button>\n          <button \n            cideEleButton \n            variant=\"outline\" \n            size=\"sm\" \n            type=\"button\"\n            (click)=\"resetQuickAddForm()\"\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n            Reset\n          </button>\n        </div>\n      </div>\n    </div>\n    </form>\n    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative tw-p-0\">\n  <!-- Data Grid Component -->\n  <div class=\"tw-h-full tw-w-full tw-overflow-auto\">\n    \n    <cide-ele-data-grid \n      [config]=\"gridConfig()\" \n      [templateRenderers]=\"getTemplateRenderers()\"\n      [actionHandlers]=\"actionHandlers\"\n      [dragDropEnabled]=\"true\" \n      (gridEvent)=\"onGridEvent($event)\">\n    </cide-ele-data-grid>\n  </div>\n\n\n    </div>\n  </div>\n\n</div>\n\n<!-- \n  Angular Template References for Grid Renderers (Best Practice)\n  \n  These ng-template elements represent the Angular best practice for custom rendering.\n  They provide:\n  - Type safety with template context\n  - Component lifecycle integration\n  - Change detection optimization\n  - Proper event handling\n  - Accessibility features\n  \n  Note: Current data grid uses string renderers for compatibility.\n  Templates are maintained for future component enhancement.\n-->\n\n\n\n<!-- Menu Details Renderer Template -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        class=\"tw-text-gray-400\" \n        size=\"xs\">\n        {{ row.syme_icon || 'folder_open' }}\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.syme_title\">\n        {{ row.syme_title || 'Untitled' }}\n      </div>\n      @if (row.syme_desc) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.syme_desc\">\n          {{ row.syme_desc }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"getMenuTypeClass(row.syme_type)\">\n    {{ getMenuTypeLabel(row.syme_type) }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-max-w-full tw-items-center\">\n    @if (row.syme_type === 'menu') {\n      @if (row.syme_permissions_id_sygms && row.syme_permissions_id_sygms.length > 0) {\n        @for (permissionId of row.syme_permissions_id_sygms.slice(0, 3); track permissionId) {\n          <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800 tw-whitespace-nowrap tw-h-5\">\n            {{ getPermissionById(permissionId)?.sygms_title || getPermissionById(permissionId)?.sygms_code || 'Unknown' }}\n          </span>\n        }\n        @if (row.syme_permissions_id_sygms.length > 3) {\n          <span \n            class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-600 tw-whitespace-nowrap tw-cursor-help tw-h-5\"\n            [title]=\"getAllPermissionNames(row.syme_permissions_id_sygms)\">\n            +{{ row.syme_permissions_id_sygms.length - 3 }} more\n          </span>\n        }\n      } @else {\n        <span class=\"tw-text-xs tw-text-gray-500 tw-h-5 tw-flex tw-items-center\">No permissions</span>\n      }\n    } @else {\n      <!-- Show N/A for module, section, and title types -->\n      <span class=\"tw-text-xs tw-text-gray-400 tw-h-5 tw-flex tw-items-center\">N/A</span>\n    }\n  </div>\n</ng-template>\n</cide-lyt-shared-wrapper>\n" }]
         }], ctorParameters: () => [] });
 
 var menuList_component = /*#__PURE__*/Object.freeze({
@@ -5989,6 +5972,8 @@ var gradeLevelList_component = /*#__PURE__*/Object.freeze({
 // Grade Level Management Components
 
 class CideCorePageListComponent {
+    // Shared wrapper setup
+    shared_wrapper_setup_param = { sypg_page_code: 'core_page_list' };
     // Dependency injection
     destroyRef = inject(DestroyRef);
     pageService = inject(CideCorePageManagementService);
@@ -6095,38 +6080,18 @@ class CideCorePageListComponent {
     // Action handlers for grid
     actionHandlers = {
         onEdit: (item) => {
-            if (!this.rightsService.hasRight('EDIT')) {
-                this.error.set('You do not have permission to edit pages');
-                return;
-            }
             this.editPage(item);
         },
         onDelete: (item) => {
-            if (!this.rightsService.hasRight('DELETE')) {
-                this.error.set('You do not have permission to delete pages');
-                return;
-            }
             this.deletePage(item);
         },
         onToggleStatus: (item) => {
-            if (!this.rightsService.hasRight('EDIT')) {
-                this.error.set('You do not have permission to change page status');
-                return;
-            }
             this.togglePageStatus(item);
         },
         onManageThemes: (item) => {
-            if (!this.rightsService.hasRight('EDIT')) {
-                this.error.set('You do not have permission to manage themes');
-                return;
-            }
             this.manageThemes(item);
         },
         onManageControls: (item) => {
-            if (!this.rightsService.hasRight('EDIT')) {
-                this.error.set('You do not have permission to manage controls');
-                return;
-            }
             this.manageControls(item);
         }
     };
@@ -6242,20 +6207,12 @@ class CideCorePageListComponent {
      * Navigate to create page
      */
     createPage() {
-        if (!this.rightsService.hasRight('CREATE')) {
-            this.error.set('You do not have permission to create pages');
-            return;
-        }
         this.router.navigate(['/control-panel/page-form']);
     }
     /**
      * Edit page - navigate to edit page
      */
     editPage(page) {
-        if (!this.rightsService.hasRight('EDIT')) {
-            this.error.set('You do not have permission to edit pages');
-            return;
-        }
         const query = generateStringFromObject({
             sypg_id: page._id,
             sypg_title: page.sypg_title
@@ -6266,10 +6223,6 @@ class CideCorePageListComponent {
      * Delete page
      */
     deletePage(page) {
-        if (!this.rightsService.hasRight('DELETE')) {
-            this.error.set('You do not have permission to delete pages');
-            return;
-        }
         if (confirm(`Are you sure you want to delete the page "${page.sypg_title}"?`)) {
             this.loading.set(true);
             this.pageService.deletePage(page._id || '')
@@ -6297,10 +6250,6 @@ class CideCorePageListComponent {
      * Toggle page status
      */
     togglePageStatus(page) {
-        if (!this.rightsService.hasRight('EDIT')) {
-            this.error.set('You do not have permission to change page status');
-            return;
-        }
         this.loading.set(true);
         this.pageService.togglePageStatus({ sypg_id: page._id || '', sypg_isactive: !page.sypg_isactive })
             .pipe(takeUntilDestroyed(this.destroyRef))
@@ -6326,10 +6275,6 @@ class CideCorePageListComponent {
      * Manage themes for a page
      */
     manageThemes(page) {
-        if (!this.rightsService.hasRight('EDIT')) {
-            this.error.set('You do not have permission to manage themes');
-            return;
-        }
         const query = generateStringFromObject({ sypg_id: page._id, sypg_title: page.sypg_title });
         this.router.navigate(['control-panel', 'page-theme', query]);
     }
@@ -6337,10 +6282,6 @@ class CideCorePageListComponent {
      * Manage controls for a page
      */
     manageControls(page) {
-        if (!this.rightsService.hasRight('EDIT')) {
-            this.error.set('You do not have permission to manage controls');
-            return;
-        }
         const query = generateStringFromObject({ sypg_id: page._id, sypg_title: page.sypg_title });
         this.router.navigate(['control-panel', 'page-controls', query]);
     }
@@ -6433,7 +6374,7 @@ class CideCorePageListComponent {
         document.dispatchEvent(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePageListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCorePageListComponent, isStandalone: true, selector: "cide-core-page-list", viewQueries: [{ propertyName: "pageDetailsRendererTemplate", first: true, predicate: ["pageDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "pageStatusRendererTemplate", first: true, predicate: ["pageStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Page List Container -->\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Header Section with Filters -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n      <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n\n        <!-- Title -->\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">web</cide-ele-icon>\n          <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Page Management</h5>\n        </div>\n\n        <!-- Actions -->\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\n          <!-- Add Page Button -->\n          @if (canCreate()) {\n            <button\n              cideEleButton\n              variant=\"primary\"\n              size=\"sm\"\n              (click)=\"createPage()\"\n              leftIcon=\"add\"\n              class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n              Create New Page\n            </button>\n          }\n        </div>\n      </div>\n\n      <!-- Error Message -->\n      @if (error()) {\n        <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n          <div class=\"tw-flex tw-items-start\">\n            <cide-ele-icon class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\">error</cide-ele-icon>\n            <div class=\"tw-ml-3\">\n              <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n              <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n      \n      <!-- Data Grid Component -->\n      <div class=\"tw-h-full tw-overflow-auto\">\n        <cide-ele-data-grid\n          [config]=\"gridConfig()\"\n          [templateRenderers]=\"getTemplateRenderers()\"\n          [actionHandlers]=\"actionHandlers\"\n          [serverSidePagination]=\"true\"\n          [totalServerItems]=\"totalItems()\"\n          [currentServerPage]=\"currentPage()\"\n          [currentServerPageSize]=\"pageSize()\"\n          (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Page Details Renderer Template -->\n<ng-template #pageDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Page Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon class=\"tw-text-gray-400 tw-w-4 tw-h-4\">web</cide-ele-icon>\n    </div>\n    \n    <!-- Page Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.sypg_title\">\n        {{ row.sypg_title || 'Untitled' }}\n      </div>\n      @if (row.sypg_desc) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.sypg_desc\">\n          {{ row.sypg_desc }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Page Status Renderer Template -->\n<ng-template #pageStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"row.sypg_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n    {{ row.sypg_isactive ? 'Active' : 'Inactive' }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown\n    [items]=\"getActionDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCorePageListComponent, isStandalone: true, selector: "cide-core-page-list", viewQueries: [{ propertyName: "pageDetailsRendererTemplate", first: true, predicate: ["pageDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "pageStatusRendererTemplate", first: true, predicate: ["pageStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Page List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_page_list' }\">\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Header Section with Filters -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n      <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n\n        <!-- Title -->\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">web</cide-ele-icon>\n          <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Page Management</h5>\n        </div>\n\n        <!-- Actions -->\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\n          <!-- Add Page Button -->\n          @if (canCreate()) {\n            <button\n              cideEleButton\n              variant=\"primary\"\n              size=\"sm\"\n              (click)=\"createPage()\"\n              leftIcon=\"add\"\n              class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n              Create New Page\n            </button>\n          }\n        </div>\n      </div>\n\n      <!-- Error Message -->\n      @if (error()) {\n        <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n          <div class=\"tw-flex tw-items-start\">\n            <cide-ele-icon class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\">error</cide-ele-icon>\n            <div class=\"tw-ml-3\">\n              <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n              <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n      \n      <!-- Data Grid Component -->\n      <div class=\"tw-h-full tw-overflow-auto\">\n        <cide-ele-data-grid\n          [config]=\"gridConfig()\"\n          [templateRenderers]=\"getTemplateRenderers()\"\n          [actionHandlers]=\"actionHandlers\"\n          [serverSidePagination]=\"true\"\n          [totalServerItems]=\"totalItems()\"\n          [currentServerPage]=\"currentPage()\"\n          [currentServerPageSize]=\"pageSize()\"\n          (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Page Details Renderer Template -->\n<ng-template #pageDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Page Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon class=\"tw-text-gray-400 tw-w-4 tw-h-4\">web</cide-ele-icon>\n    </div>\n    \n    <!-- Page Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.sypg_title\">\n        {{ row.sypg_title || 'Untitled' }}\n      </div>\n      @if (row.sypg_desc) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.sypg_desc\">\n          {{ row.sypg_desc }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Page Status Renderer Template -->\n<ng-template #pageStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"row.sypg_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n    {{ row.sypg_isactive ? 'Active' : 'Inactive' }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown\n    [items]=\"getActionDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n</cide-lyt-shared-wrapper> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePageListComponent, decorators: [{
             type: Component,
@@ -6442,8 +6383,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideEleDataGridComponent,
                         CideEleButtonComponent,
                         CideIconComponent,
-                        CideEleDropdownComponent
-                    ], template: "<!-- Page List Container -->\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Header Section with Filters -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n      <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n\n        <!-- Title -->\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">web</cide-ele-icon>\n          <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Page Management</h5>\n        </div>\n\n        <!-- Actions -->\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\n          <!-- Add Page Button -->\n          @if (canCreate()) {\n            <button\n              cideEleButton\n              variant=\"primary\"\n              size=\"sm\"\n              (click)=\"createPage()\"\n              leftIcon=\"add\"\n              class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n              Create New Page\n            </button>\n          }\n        </div>\n      </div>\n\n      <!-- Error Message -->\n      @if (error()) {\n        <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n          <div class=\"tw-flex tw-items-start\">\n            <cide-ele-icon class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\">error</cide-ele-icon>\n            <div class=\"tw-ml-3\">\n              <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n              <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n      \n      <!-- Data Grid Component -->\n      <div class=\"tw-h-full tw-overflow-auto\">\n        <cide-ele-data-grid\n          [config]=\"gridConfig()\"\n          [templateRenderers]=\"getTemplateRenderers()\"\n          [actionHandlers]=\"actionHandlers\"\n          [serverSidePagination]=\"true\"\n          [totalServerItems]=\"totalItems()\"\n          [currentServerPage]=\"currentPage()\"\n          [currentServerPageSize]=\"pageSize()\"\n          (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Page Details Renderer Template -->\n<ng-template #pageDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Page Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon class=\"tw-text-gray-400 tw-w-4 tw-h-4\">web</cide-ele-icon>\n    </div>\n    \n    <!-- Page Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.sypg_title\">\n        {{ row.sypg_title || 'Untitled' }}\n      </div>\n      @if (row.sypg_desc) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.sypg_desc\">\n          {{ row.sypg_desc }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Page Status Renderer Template -->\n<ng-template #pageStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"row.sypg_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n    {{ row.sypg_isactive ? 'Active' : 'Inactive' }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown\n    [items]=\"getActionDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template> " }]
+                        CideEleDropdownComponent,
+                        CideLytSharedWrapperComponent
+                    ], template: "<!-- Page List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_page_list' }\">\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Header Section with Filters -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n      <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n\n        <!-- Title -->\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">web</cide-ele-icon>\n          <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Page Management</h5>\n        </div>\n\n        <!-- Actions -->\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\n          <!-- Add Page Button -->\n          @if (canCreate()) {\n            <button\n              cideEleButton\n              variant=\"primary\"\n              size=\"sm\"\n              (click)=\"createPage()\"\n              leftIcon=\"add\"\n              class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n              Create New Page\n            </button>\n          }\n        </div>\n      </div>\n\n      <!-- Error Message -->\n      @if (error()) {\n        <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n          <div class=\"tw-flex tw-items-start\">\n            <cide-ele-icon class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\">error</cide-ele-icon>\n            <div class=\"tw-ml-3\">\n              <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n              <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n      \n      <!-- Data Grid Component -->\n      <div class=\"tw-h-full tw-overflow-auto\">\n        <cide-ele-data-grid\n          [config]=\"gridConfig()\"\n          [templateRenderers]=\"getTemplateRenderers()\"\n          [actionHandlers]=\"actionHandlers\"\n          [serverSidePagination]=\"true\"\n          [totalServerItems]=\"totalItems()\"\n          [currentServerPage]=\"currentPage()\"\n          [currentServerPageSize]=\"pageSize()\"\n          (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Page Details Renderer Template -->\n<ng-template #pageDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Page Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon class=\"tw-text-gray-400 tw-w-4 tw-h-4\">web</cide-ele-icon>\n    </div>\n    \n    <!-- Page Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.sypg_title\">\n        {{ row.sypg_title || 'Untitled' }}\n      </div>\n      @if (row.sypg_desc) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.sypg_desc\">\n          {{ row.sypg_desc }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Page Status Renderer Template -->\n<ng-template #pageStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"row.sypg_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n    {{ row.sypg_isactive ? 'Active' : 'Inactive' }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown\n    [items]=\"getActionDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n</cide-lyt-shared-wrapper> " }]
         }], ctorParameters: () => [] });
 
 var pageList_component = /*#__PURE__*/Object.freeze({
@@ -11037,11 +10979,6 @@ class CideCoreEntityCreateComponent {
         }
     }
     onSubmit() {
-        const requiredRight = this.isEditMode() ? 'EDIT' : 'CREATE';
-        if (!this.rightsService.hasRight(requiredRight)) {
-            this.error.set(`You do not have permission to ${this.isEditMode() ? 'edit' : 'create'} entities`);
-            return;
-        }
         if (this.entityForm.valid) {
             this.loading.set(true);
             this.error.set(null);
@@ -11233,10 +11170,15 @@ var entityCreate_component = /*#__PURE__*/Object.freeze({
 });
 
 class CideCoreEntityListComponent {
+    // Shared wrapper setup
+    shared_wrapper_setup_param = { sypg_page_code: 'core_entity_list' };
     // Modern dependency injection using inject()
     router = inject(Router); // Made public for template access
     entityService = inject(CideCoreEntityManagementService);
+    generalMasterService = inject(CideCoreGeneralMasterService);
+    appState = inject(AppStateHelperService);
     rightsService = inject(RightsService);
+    destroyRef = inject(DestroyRef);
     // ViewChild reference to the grid component using modern signal approach
     gridComponent = viewChild(CideEleDataGridComponent, ...(ngDevMode ? [{ debugName: "gridComponent" }] : []));
     // Template references using modern viewChild signal approach with proper typing
@@ -11252,6 +11194,9 @@ class CideCoreEntityListComponent {
     pageSize = signal(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
     totalItems = signal(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
     selectedEntityType = signal('', ...(ngDevMode ? [{ debugName: "selectedEntityType" }] : []));
+    // Entity type lookup map (ID -> Name)
+    entityTypeMap = signal(new Map(), ...(ngDevMode ? [{ debugName: "entityTypeMap" }] : []));
+    entityTypesLoading = signal(false, ...(ngDevMode ? [{ debugName: "entityTypesLoading" }] : []));
     // Getter and setter for ngModel compatibility
     get selectedEntityTypeValue() {
         return this.selectedEntityType();
@@ -11373,21 +11318,64 @@ class CideCoreEntityListComponent {
     }), ...(ngDevMode ? [{ debugName: "templateRenderers" }] : []));
     // Helper method to get entity type name for template
     getEntityTypeName(row) {
-        const entityTypeId = row.syen_entity_type_sygms || 'N/A';
-        let entityTypeName = '';
-        // Check if entity_type_details exists in the row data (using any to bypass type checking)
+        const entityTypeId = row.syen_entity_type_sygms;
+        // If no entity type ID, return N/A
+        if (!entityTypeId) {
+            return 'N/A';
+        }
+        // Check if entity_type_details exists in the row data (populated from backend)
         const rowData = row;
         if (rowData.entity_type_details?.sygms_title) {
-            entityTypeName = rowData.entity_type_details.sygms_title;
+            return rowData.entity_type_details.sygms_title;
         }
         else if (rowData.syen_entity_type_details?.sygms_title) {
-            entityTypeName = rowData.syen_entity_type_details.sygms_title;
+            return rowData.syen_entity_type_details.sygms_title;
+        }
+        else if (rowData.syen_entity_type_sygms?.sygms_title) {
+            // If populated as object with title
+            return rowData.syen_entity_type_sygms.sygms_title;
+        }
+        // Convert to string for lookup (handle ObjectId, string, or object with _id)
+        // Since syen_entity_type_sygms is typed as string | undefined, but could be populated as object
+        let entityTypeIdStr = '';
+        // Type guard: if it's already a string, use it directly
+        if (typeof entityTypeId === 'string') {
+            entityTypeIdStr = entityTypeId;
+        }
+        // Handle case where it might be populated as an object (even though type says string)
+        else if (entityTypeId != null) {
+            // Type assertion to handle populated objects from backend
+            const entityTypeAny = entityTypeId;
+            // Check if it's an object with _id property (populated reference)
+            if (typeof entityTypeAny === 'object' && entityTypeAny !== null) {
+                const entityTypeObj = entityTypeAny;
+                // Use bracket notation for index signature access
+                const idValue = entityTypeObj?.['_id'];
+                if (idValue != null) {
+                    entityTypeIdStr = String(idValue);
+                }
+                else {
+                    // Try to convert the object itself to string
+                    entityTypeIdStr = String(entityTypeAny);
+                }
+            }
+            else {
+                // Fallback: convert to string
+                entityTypeIdStr = String(entityTypeAny);
+            }
         }
-        else {
-            // Fallback: try to make the entity type ID more readable
-            entityTypeName = entityTypeId.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+        // Use lookup map to get entity type name
+        const entityTypeMap = this.entityTypeMap();
+        const entityTypeName = entityTypeMap.get(entityTypeIdStr);
+        if (entityTypeName) {
+            return entityTypeName;
+        }
+        // If map is still loading, show loading state
+        if (this.entityTypesLoading()) {
+            return 'Loading...';
         }
-        return entityTypeName;
+        // Final fallback: return N/A if not found
+        return 'N/A';
     }
     // Type helper for templates - ensures proper typing in template context
     $any = (value) => value;
@@ -11397,40 +11385,48 @@ class CideCoreEntityListComponent {
     }
     // Dropdown methods
     getDropdownItems(entity) {
-        return [
-            {
+        const items = [];
+        if (this.canEdit()) {
+            items.push({
                 id: 'edit',
                 label: 'Edit',
                 icon: 'edit',
                 iconColor: 'tw-text-gray-400',
                 textColor: 'tw-text-gray-700',
                 hoverBgColor: 'hover:tw-bg-gray-100'
-            },
-            {
+            });
+        }
+        if (this.canCreate()) {
+            items.push({
                 id: 'addChild',
                 label: 'Add Child',
                 icon: 'add',
                 iconColor: 'tw-text-blue-400',
                 textColor: 'tw-text-blue-600',
                 hoverBgColor: 'hover:tw-bg-blue-50'
-            },
-            {
+            });
+        }
+        if (this.canEdit()) {
+            items.push({
                 id: 'toggle',
                 label: entity.syen_isactive ? 'Deactivate' : 'Activate',
                 icon: 'power_settings_new',
                 iconColor: 'tw-text-orange-400',
                 textColor: 'tw-text-orange-600',
                 hoverBgColor: 'hover:tw-bg-orange-50'
-            },
-            {
+            });
+        }
+        if (this.canDelete()) {
+            items.push({
                 id: 'delete',
                 label: 'Delete',
                 icon: 'delete',
                 iconColor: 'tw-text-red-400',
                 textColor: 'tw-text-red-600',
                 hoverBgColor: 'hover:tw-bg-red-50'
-            }
-        ];
+            });
+        }
+        return items;
     }
     onDropdownItemClick(item, entity) {
         switch (item.id) {
@@ -11451,20 +11447,12 @@ class CideCoreEntityListComponent {
         }
     }
     editEntity(entity) {
-        if (!this.rightsService.hasRight('EDIT')) {
-            this.error.set('You do not have permission to edit entities');
-            return;
-        }
         const query = generateStringFromObject({
             syen_id: entity._id
         });
         this.router.navigate(['control-panel', 'entity-create', query]);
     }
     addChildEntity(entity) {
-        if (!this.rightsService.hasRight('CREATE')) {
-            this.error.set('You do not have permission to create entities');
-            return;
-        }
         console.log('Adding child entity for:', entity.syen_name);
         // Navigate to entity create form with parent entity ID
         const query = generateStringFromObject({
@@ -11473,10 +11461,6 @@ class CideCoreEntityListComponent {
         this.router.navigate(['control-panel', 'entity-create', query]);
     }
     toggleEntityStatus(entity) {
-        if (!this.rightsService.hasRight('EDIT')) {
-            this.error.set('You do not have permission to change entity status');
-            return;
-        }
         console.log('Toggling entity status for:', entity.syen_name);
         const action = entity.syen_isactive ? 'deactivate' : 'activate';
         const entityName = entity.syen_name || 'this entity';
@@ -11488,10 +11472,6 @@ class CideCoreEntityListComponent {
         }
     }
     deleteEntity(entity) {
-        if (!this.rightsService.hasRight('DELETE')) {
-            this.error.set('You do not have permission to delete entities');
-            return;
-        }
         const entityName = entity.syen_name || 'this entity';
         if (confirm(`Are you sure you want to delete ${entityName}?`)) {
             this.onDeleteEntityConfirmed(entity._id || '');
@@ -11506,9 +11486,42 @@ class CideCoreEntityListComponent {
         this.updatePaginationState();
         // Set initial loading state to false to allow grid to render
         this.loading.set(false);
-        // Load entities from API
+        // Load entity types first, then load entities
+        this.loadEntityTypes();
         this.loadEntities();
     }
+    // Load entity types from general master
+    loadEntityTypes() {
+        this.entityTypesLoading.set(true);
+        // Get entity type master list with code 'core_entity_type'
+        const payload = {
+            sygmt_code: 'core_entity_type',
+            sygms_entity_id_syen: this.appState.getActiveEntityId() || undefined
+        };
+        this.generalMasterService.getMasterList(payload)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                if (response.success && response.data) {
+                    // Create a map of entity type ID -> Name
+                    const typeMap = new Map();
+                    response.data.forEach((type) => {
+                        if (type._id && type.sygms_title) {
+                            typeMap.set(type._id.toString(), type.sygms_title);
+                        }
+                    });
+                    this.entityTypeMap.set(typeMap);
+                    console.log('✅ Entity types loaded:', typeMap.size, 'types');
+                }
+                this.entityTypesLoading.set(false);
+            },
+            error: (error) => {
+                console.error('Error loading entity types:', error);
+                this.entityTypesLoading.set(false);
+                // Continue even if entity types fail to load
+            }
+        });
+    }
     // Grid event handler
     onGridEvent(event) {
         console.log('📡 GRID EVENT: Received grid event:', event.type, event);
@@ -11681,17 +11694,9 @@ class CideCoreEntityListComponent {
     }
     onAddEntity() {
         // Navigate to entity create form
-        if (!this.rightsService.hasRight('CREATE')) {
-            this.error.set('You do not have permission to create entities');
-            return;
-        }
         this.router.navigate(['/control-panel/entity-create']);
     }
     onEditEntity(entity) {
-        if (!this.rightsService.hasRight('EDIT')) {
-            this.error.set('You do not have permission to edit entities');
-            return;
-        }
         // TODO: Implement edit functionality - navigate to edit form with entity ID
         this.router.navigate(['/control-panel/entity-create'], {
             queryParams: { id: entity._id, mode: 'edit' }
@@ -11839,7 +11844,7 @@ class CideCoreEntityListComponent {
         this.router.navigate(['/control-panel/org-structure']);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreEntityListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreEntityListComponent, isStandalone: true, selector: "cide-core-entity-list", viewQueries: [{ propertyName: "gridComponent", first: true, predicate: CideEleDataGridComponent, descendants: true, isSignal: true }, { propertyName: "entityDetailsRenderer", first: true, predicate: ["entityDetailsRenderer"], descendants: true, isSignal: true }, { propertyName: "entityTypeRenderer", first: true, predicate: ["entityTypeRenderer"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRenderer", first: true, predicate: ["actionsDropdownRenderer"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Entity List Container -->\n<div class=\"entity-list-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-overflow-hidden\">\n  \n  <!-- Header Section with Filters -->\n  <div class=\"tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n    <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-4 sm:tw-space-y-0\">\n      \n      <!-- Title -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600\">apartment</cide-ele-icon>\n        <div>\n          <h5 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Entity Management</h5>\n        </div>\n      </div>\n\n      <!-- Actions -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <!-- Entity Type Filter -->\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <label for=\"entityTypeFilter\" class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Type:</label>\n          <cide-ele-select\n            id=\"entityTypeFilter\"\n            [options]=\"entityTypeOptions()\"\n            [ngModel]=\"selectedEntityTypeValue\"\n            (ngModelChange)=\"onEntityTypeChange($event)\"\n            class=\"tw-min-w-40\">\n          </cide-ele-select>\n        </div>\n\n        <!-- Org Structure Button -->\n        <button\n          cideEleButton\n          variant=\"secondary\"\n          size=\"sm\"\n          (click)=\"onOrgStructure()\"\n          class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n          <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">account_tree</cide-ele-icon>\n          Org Structure\n        </button>\n\n        <!-- Add Entity Button -->\n        <button\n          cideEleButton\n          variant=\"primary\"\n          size=\"sm\"\n          (click)=\"router.navigate(['control-panel', 'entity-create'])\"\n          class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n          <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">add</cide-ele-icon>\n          Add Entity\n        </button>\n      </div>\n    </div>\n\n    <!-- Error Message -->\n    @if (error()) {\n      <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n        <div class=\"tw-flex\">\n          <cide-ele-icon name=\"exclamation-triangle\" class=\"tw-text-red-400\"></cide-ele-icon>\n          <div class=\"tw-ml-3\">\n            <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800\">Error</h3>\n            <p class=\"tw-text-sm tw-text-red-700 tw-mt-1\">{{ error() }}</p>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Data Grid Component -->\n  <cide-ele-data-grid\n    [config]=\"gridConfig()\"\n    [templateRenderers]=\"templateRenderers()\"\n    [actionHandlers]=\"actionHandlers\"\n    (gridEvent)=\"onGridEvent($event)\">\n  </cide-ele-data-grid>\n\n</div>\n\n<!-- Custom Renderer Templates -->\n\n<!-- Entity Details Renderer Template -->\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n<ng-template #entityDetailsRenderer let-value=\"value\" let-entity=\"row\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3\">\n    <div class=\"tw-flex-shrink-0 tw-w-10 tw-h-10 tw-bg-blue-100 tw-rounded-full tw-flex tw-items-center tw-justify-center\">\n      <span class=\"tw-text-blue-600 tw-font-semibold tw-text-sm\">\n        {{ (entity.syen_entity_code || 'NA').substring(0, 2).toUpperCase() }}\n      </span>\n    </div>\n    <div class=\"tw-flex-1 tw-min-w-0\">\n      <p class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"entity.syen_name || 'Unknown Entity'\">\n        {{ entity.syen_name || 'Unknown Entity' }}\n      </p>\n      <p class=\"tw-text-sm tw-text-gray-500 tw-truncate\" [title]=\"entity.syen_entity_code || 'N/A'\">\n        Code: {{ entity.syen_entity_code || 'N/A' }}\n      </p>\n    </div>\n  </div>\n</ng-template>\n\n\n<!-- Entity Type Renderer Template -->\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n<ng-template #entityTypeRenderer let-value=\"value\" let-entity=\"row\">\n  <div class=\"tw-flex tw-flex-col tw-items-center tw-space-y-1\">\n    <span class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"getEntityTypeName(entity)\">\n      {{ getEntityTypeName(entity) }}\n    </span>\n  </div>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n<ng-template #actionsDropdownRenderer let-value=\"value\" let-entity=\"row\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(entity)\"\n    [config]=\"getDropdownConfig()\"\n    (itemClick)=\"onDropdownItemClick($event, entity)\">\n  </cide-ele-dropdown>\n</ng-template>\n\n", styles: ["", ":host{height:100%;display:flex;flex-direction:column}.entity-list-container{height:100%;display:flex;flex-direction:column;overflow:hidden}.tw-overflow-auto{flex:1;min-height:0}cide-ele-data-grid{flex:1;min-height:0;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreEntityListComponent, isStandalone: true, selector: "cide-core-entity-list", viewQueries: [{ propertyName: "gridComponent", first: true, predicate: CideEleDataGridComponent, descendants: true, isSignal: true }, { propertyName: "entityDetailsRenderer", first: true, predicate: ["entityDetailsRenderer"], descendants: true, isSignal: true }, { propertyName: "entityTypeRenderer", first: true, predicate: ["entityTypeRenderer"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRenderer", first: true, predicate: ["actionsDropdownRenderer"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Entity List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_entity_list' }\">\n<div class=\"entity-list-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-overflow-hidden\">\n  \n  <!-- Header Section with Filters -->\n  <div class=\"tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n    <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-4 sm:tw-space-y-0\">\n      \n      <!-- Title -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600\">apartment</cide-ele-icon>\n        <div>\n          <h5 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Entity Management</h5>\n        </div>\n      </div>\n\n      <!-- Actions -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <!-- Entity Type Filter -->\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <label for=\"entityTypeFilter\" class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Type:</label>\n          <cide-ele-select\n            id=\"entityTypeFilter\"\n            [options]=\"entityTypeOptions()\"\n            [ngModel]=\"selectedEntityTypeValue\"\n            (ngModelChange)=\"onEntityTypeChange($event)\"\n            class=\"tw-min-w-40\">\n          </cide-ele-select>\n        </div>\n\n        <!-- Org Structure Button -->\n        <button\n          cideEleButton\n          variant=\"secondary\"\n          size=\"sm\"\n          (click)=\"onOrgStructure()\"\n          class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n          <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">account_tree</cide-ele-icon>\n          Org Structure\n        </button>\n\n        <!-- Add Entity Button -->\n        @if (canCreate()) {\n          <button\n            cideEleButton\n            variant=\"primary\"\n            size=\"sm\"\n            (click)=\"router.navigate(['control-panel', 'entity-create'])\"\n            class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">add</cide-ele-icon>\n            Add Entity\n          </button>\n        }\n      </div>\n    </div>\n\n    <!-- Error Message -->\n    @if (error()) {\n      <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n        <div class=\"tw-flex\">\n          <cide-ele-icon name=\"exclamation-triangle\" class=\"tw-text-red-400\"></cide-ele-icon>\n          <div class=\"tw-ml-3\">\n            <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800\">Error</h3>\n            <p class=\"tw-text-sm tw-text-red-700 tw-mt-1\">{{ error() }}</p>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Data Grid Component -->\n  <cide-ele-data-grid\n    [config]=\"gridConfig()\"\n    [templateRenderers]=\"templateRenderers()\"\n    [actionHandlers]=\"actionHandlers\"\n    (gridEvent)=\"onGridEvent($event)\">\n  </cide-ele-data-grid>\n\n</div>\n\n<!-- Custom Renderer Templates -->\n\n<!-- Entity Details Renderer Template -->\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n<ng-template #entityDetailsRenderer let-value=\"value\" let-entity=\"row\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3\">\n    <div class=\"tw-flex-shrink-0 tw-w-10 tw-h-10 tw-bg-blue-100 tw-rounded-full tw-flex tw-items-center tw-justify-center\">\n      <span class=\"tw-text-blue-600 tw-font-semibold tw-text-sm\">\n        {{ (entity.syen_entity_code || 'NA').substring(0, 2).toUpperCase() }}\n      </span>\n    </div>\n    <div class=\"tw-flex-1 tw-min-w-0\">\n      <p class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"entity.syen_name || 'Unknown Entity'\">\n        {{ entity.syen_name || 'Unknown Entity' }}\n      </p>\n      <p class=\"tw-text-sm tw-text-gray-500 tw-truncate\" [title]=\"entity.syen_entity_code || 'N/A'\">\n        Code: {{ entity.syen_entity_code || 'N/A' }}\n      </p>\n    </div>\n  </div>\n</ng-template>\n\n\n<!-- Entity Type Renderer Template -->\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n<ng-template #entityTypeRenderer let-value=\"value\" let-entity=\"row\">\n  <div class=\"tw-flex tw-flex-col tw-items-center tw-space-y-1\">\n    <span class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"getEntityTypeName(entity)\">\n      {{ getEntityTypeName(entity) }}\n    </span>\n  </div>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n<ng-template #actionsDropdownRenderer let-value=\"value\" let-entity=\"row\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(entity)\"\n    [config]=\"getDropdownConfig()\"\n    (itemClick)=\"onDropdownItemClick($event, entity)\">\n  </cide-ele-dropdown>\n</ng-template>\n</cide-lyt-shared-wrapper>\n", styles: ["", ":host{height:100%;display:flex;flex-direction:column}.entity-list-container{height:100%;display:flex;flex-direction:column;overflow:hidden}.tw-overflow-auto{flex:1;min-height:0}cide-ele-data-grid{flex:1;min-height:0;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreEntityListComponent, decorators: [{
             type: Component,
@@ -11850,8 +11855,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideEleButtonComponent,
                         CideSelectComponent,
                         CideEleDataGridComponent,
-                        CideEleDropdownComponent
-                    ], template: "<!-- Entity List Container -->\n<div class=\"entity-list-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-overflow-hidden\">\n  \n  <!-- Header Section with Filters -->\n  <div class=\"tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n    <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-4 sm:tw-space-y-0\">\n      \n      <!-- Title -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600\">apartment</cide-ele-icon>\n        <div>\n          <h5 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Entity Management</h5>\n        </div>\n      </div>\n\n      <!-- Actions -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <!-- Entity Type Filter -->\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <label for=\"entityTypeFilter\" class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Type:</label>\n          <cide-ele-select\n            id=\"entityTypeFilter\"\n            [options]=\"entityTypeOptions()\"\n            [ngModel]=\"selectedEntityTypeValue\"\n            (ngModelChange)=\"onEntityTypeChange($event)\"\n            class=\"tw-min-w-40\">\n          </cide-ele-select>\n        </div>\n\n        <!-- Org Structure Button -->\n        <button\n          cideEleButton\n          variant=\"secondary\"\n          size=\"sm\"\n          (click)=\"onOrgStructure()\"\n          class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n          <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">account_tree</cide-ele-icon>\n          Org Structure\n        </button>\n\n        <!-- Add Entity Button -->\n        <button\n          cideEleButton\n          variant=\"primary\"\n          size=\"sm\"\n          (click)=\"router.navigate(['control-panel', 'entity-create'])\"\n          class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n          <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">add</cide-ele-icon>\n          Add Entity\n        </button>\n      </div>\n    </div>\n\n    <!-- Error Message -->\n    @if (error()) {\n      <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n        <div class=\"tw-flex\">\n          <cide-ele-icon name=\"exclamation-triangle\" class=\"tw-text-red-400\"></cide-ele-icon>\n          <div class=\"tw-ml-3\">\n            <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800\">Error</h3>\n            <p class=\"tw-text-sm tw-text-red-700 tw-mt-1\">{{ error() }}</p>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Data Grid Component -->\n  <cide-ele-data-grid\n    [config]=\"gridConfig()\"\n    [templateRenderers]=\"templateRenderers()\"\n    [actionHandlers]=\"actionHandlers\"\n    (gridEvent)=\"onGridEvent($event)\">\n  </cide-ele-data-grid>\n\n</div>\n\n<!-- Custom Renderer Templates -->\n\n<!-- Entity Details Renderer Template -->\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n<ng-template #entityDetailsRenderer let-value=\"value\" let-entity=\"row\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3\">\n    <div class=\"tw-flex-shrink-0 tw-w-10 tw-h-10 tw-bg-blue-100 tw-rounded-full tw-flex tw-items-center tw-justify-center\">\n      <span class=\"tw-text-blue-600 tw-font-semibold tw-text-sm\">\n        {{ (entity.syen_entity_code || 'NA').substring(0, 2).toUpperCase() }}\n      </span>\n    </div>\n    <div class=\"tw-flex-1 tw-min-w-0\">\n      <p class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"entity.syen_name || 'Unknown Entity'\">\n        {{ entity.syen_name || 'Unknown Entity' }}\n      </p>\n      <p class=\"tw-text-sm tw-text-gray-500 tw-truncate\" [title]=\"entity.syen_entity_code || 'N/A'\">\n        Code: {{ entity.syen_entity_code || 'N/A' }}\n      </p>\n    </div>\n  </div>\n</ng-template>\n\n\n<!-- Entity Type Renderer Template -->\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n<ng-template #entityTypeRenderer let-value=\"value\" let-entity=\"row\">\n  <div class=\"tw-flex tw-flex-col tw-items-center tw-space-y-1\">\n    <span class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"getEntityTypeName(entity)\">\n      {{ getEntityTypeName(entity) }}\n    </span>\n  </div>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n<ng-template #actionsDropdownRenderer let-value=\"value\" let-entity=\"row\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(entity)\"\n    [config]=\"getDropdownConfig()\"\n    (itemClick)=\"onDropdownItemClick($event, entity)\">\n  </cide-ele-dropdown>\n</ng-template>\n\n", styles: [":host{height:100%;display:flex;flex-direction:column}.entity-list-container{height:100%;display:flex;flex-direction:column;overflow:hidden}.tw-overflow-auto{flex:1;min-height:0}cide-ele-data-grid{flex:1;min-height:0;display:flex;flex-direction:column}\n"] }]
+                        CideEleDropdownComponent,
+                        CideLytSharedWrapperComponent
+                    ], template: "<!-- Entity List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_entity_list' }\">\n<div class=\"entity-list-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-overflow-hidden\">\n  \n  <!-- Header Section with Filters -->\n  <div class=\"tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n    <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-4 sm:tw-space-y-0\">\n      \n      <!-- Title -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600\">apartment</cide-ele-icon>\n        <div>\n          <h5 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Entity Management</h5>\n        </div>\n      </div>\n\n      <!-- Actions -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <!-- Entity Type Filter -->\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <label for=\"entityTypeFilter\" class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Type:</label>\n          <cide-ele-select\n            id=\"entityTypeFilter\"\n            [options]=\"entityTypeOptions()\"\n            [ngModel]=\"selectedEntityTypeValue\"\n            (ngModelChange)=\"onEntityTypeChange($event)\"\n            class=\"tw-min-w-40\">\n          </cide-ele-select>\n        </div>\n\n        <!-- Org Structure Button -->\n        <button\n          cideEleButton\n          variant=\"secondary\"\n          size=\"sm\"\n          (click)=\"onOrgStructure()\"\n          class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n          <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">account_tree</cide-ele-icon>\n          Org Structure\n        </button>\n\n        <!-- Add Entity Button -->\n        @if (canCreate()) {\n          <button\n            cideEleButton\n            variant=\"primary\"\n            size=\"sm\"\n            (click)=\"router.navigate(['control-panel', 'entity-create'])\"\n            class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">add</cide-ele-icon>\n            Add Entity\n          </button>\n        }\n      </div>\n    </div>\n\n    <!-- Error Message -->\n    @if (error()) {\n      <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n        <div class=\"tw-flex\">\n          <cide-ele-icon name=\"exclamation-triangle\" class=\"tw-text-red-400\"></cide-ele-icon>\n          <div class=\"tw-ml-3\">\n            <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800\">Error</h3>\n            <p class=\"tw-text-sm tw-text-red-700 tw-mt-1\">{{ error() }}</p>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Data Grid Component -->\n  <cide-ele-data-grid\n    [config]=\"gridConfig()\"\n    [templateRenderers]=\"templateRenderers()\"\n    [actionHandlers]=\"actionHandlers\"\n    (gridEvent)=\"onGridEvent($event)\">\n  </cide-ele-data-grid>\n\n</div>\n\n<!-- Custom Renderer Templates -->\n\n<!-- Entity Details Renderer Template -->\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n<ng-template #entityDetailsRenderer let-value=\"value\" let-entity=\"row\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3\">\n    <div class=\"tw-flex-shrink-0 tw-w-10 tw-h-10 tw-bg-blue-100 tw-rounded-full tw-flex tw-items-center tw-justify-center\">\n      <span class=\"tw-text-blue-600 tw-font-semibold tw-text-sm\">\n        {{ (entity.syen_entity_code || 'NA').substring(0, 2).toUpperCase() }}\n      </span>\n    </div>\n    <div class=\"tw-flex-1 tw-min-w-0\">\n      <p class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"entity.syen_name || 'Unknown Entity'\">\n        {{ entity.syen_name || 'Unknown Entity' }}\n      </p>\n      <p class=\"tw-text-sm tw-text-gray-500 tw-truncate\" [title]=\"entity.syen_entity_code || 'N/A'\">\n        Code: {{ entity.syen_entity_code || 'N/A' }}\n      </p>\n    </div>\n  </div>\n</ng-template>\n\n\n<!-- Entity Type Renderer Template -->\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n<ng-template #entityTypeRenderer let-value=\"value\" let-entity=\"row\">\n  <div class=\"tw-flex tw-flex-col tw-items-center tw-space-y-1\">\n    <span class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"getEntityTypeName(entity)\">\n      {{ getEntityTypeName(entity) }}\n    </span>\n  </div>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n<ng-template #actionsDropdownRenderer let-value=\"value\" let-entity=\"row\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(entity)\"\n    [config]=\"getDropdownConfig()\"\n    (itemClick)=\"onDropdownItemClick($event, entity)\">\n  </cide-ele-dropdown>\n</ng-template>\n</cide-lyt-shared-wrapper>\n", styles: [":host{height:100%;display:flex;flex-direction:column}.entity-list-container{height:100%;display:flex;flex-direction:column;overflow:hidden}.tw-overflow-auto{flex:1;min-height:0}cide-ele-data-grid{flex:1;min-height:0;display:flex;flex-direction:column}\n"] }]
         }] });
 
 var entityList_component = /*#__PURE__*/Object.freeze({
@@ -12561,12 +12567,12 @@ class CideCoreUserCreateComponent {
         const today = new Date().toISOString().split('T')[0];
         return this.fb.group({
             _id: [''],
-            syenm_entity_id_syen: ['', []],
-            syenm_role_id_syusrol: [''],
-            syenm_designation_id_sydsg: [''],
-            syenm_department_id_sydept: [''],
+            syenm_entity_id_syen: [undefined, []], // Use undefined for better dropdown handling
+            syenm_role_id_syusrol: [undefined],
+            syenm_designation_id_sydsg: [undefined],
+            syenm_department_id_sydept: [undefined],
             syenm_activefrom: [today, []],
-            syenm_activeupto: [''],
+            syenm_activeupto: [undefined],
             syenm_isdefault: [false],
             syenm_isactive: [true],
             syenm_isloggedin: [true],
@@ -13362,7 +13368,7 @@ class CideCoreUserCreateComponent {
         this.entityMappings.update(mappings => [...mappings, {
                 syenm_id_user: this.userId(),
                 syenm_id_logses: '',
-                syenm_entity_id_syen: { _id: '', syen_name: '' },
+                syenm_entity_id_syen: undefined, // Use undefined for new mappings
                 syenm_role_id_syusrol: { _id: '', syusrol_name: '' },
                 syenm_designation_id_sydsg: { _id: '', sydsg_name: '' },
                 syenm_department_id_sydept: { _id: '', sydept_name: '' },
@@ -13372,6 +13378,27 @@ class CideCoreUserCreateComponent {
                 syenm_isactive: true,
                 syenm_isloggedin: true
             }]);
+        // Mark form as dirty to ensure change detection
+        this.userMasterForm.markAsDirty();
+        // Ensure the new form control is properly enabled and initialized
+        const newIndex = this.entityMappingsFormArray.length - 1;
+        const entityControl = this.entityMappingsFormArray.at(newIndex)?.get('syenm_entity_id_syen');
+        if (entityControl) {
+            // Ensure control is enabled
+            if (entityControl.disabled) {
+                entityControl.enable();
+            }
+            // Set initial value to undefined/empty to ensure dropdown is selectable
+            if (!entityControl.value) {
+                entityControl.setValue(undefined);
+            }
+        }
+        // Trigger entity dropdown update to refresh options
+        this.triggerEntityDropdownUpdate();
+        // Force change detection to ensure UI updates
+        setTimeout(() => {
+            this.cdr.detectChanges();
+        }, 0);
     }
     removeEntityMapping(index) {
         // Remove menu rights first
@@ -13393,39 +13420,47 @@ class CideCoreUserCreateComponent {
     onEntityChange(mappingIndex, event) {
         // When entity changes, load departments and filter roles based on entity
         console.log(`🏢 Entity changed for mapping ${mappingIndex}:`, event);
-        // Extract entity ID from the event
-        // The event can be: string (ID), object with _id, or full AuthUserCoreEntityMapping
+        // First, get the actual form control value (ControlValueAccessor should have already set it)
+        const formControl = this.userMasterForm.get(`core_entity_mapping.${mappingIndex}.syenm_entity_id_syen`);
         let entityId = '';
         let entityObject = null;
-        if (typeof event === 'string') {
-            entityId = event;
-            // Find the entity object from options
-            entityObject = this.entityOptions().find(e => e._id === entityId) || null;
-        }
-        else if (event && typeof event === 'object') {
-            // Check if it's a CoreSystemEntityListResponse (has _id directly)
-            if ('_id' in event) {
-                entityId = event._id || '';
-                entityObject = event;
-            }
-            // Check if it's AuthUserCoreEntityMapping (has syenm_entity_id_syen)
-            else if ('syenm_entity_id_syen' in event) {
-                const entityValue = event.syenm_entity_id_syen;
-                if (typeof entityValue === 'object' && entityValue !== null && '_id' in entityValue) {
-                    entityId = entityValue._id || '';
-                    entityObject = this.entityOptions().find(e => e._id === entityId) || null;
-                }
-                else if (typeof entityValue === 'string') {
-                    entityId = entityValue;
-                    entityObject = this.entityOptions().find(e => e._id === entityId) || null;
+        // Prioritize the form control value since ControlValueAccessor should have set it
+        if (formControl && formControl.value) {
+            const formValue = formControl.value;
+            entityId = typeof formValue === 'string' ? formValue : (formValue?._id || '');
+            if (entityId) {
+                entityObject = this.entityOptions().find(e => e._id === entityId) || null;
+            }
+        }
+        // If form control doesn't have a value, extract from the event
+        if (!entityId && event) {
+            if (typeof event === 'string') {
+                entityId = event;
+                entityObject = this.entityOptions().find(e => e._id === entityId) || null;
+            }
+            else if (typeof event === 'object') {
+                // Check if it's a CoreSystemEntityListResponse (has _id directly)
+                if ('_id' in event) {
+                    entityId = event._id || '';
+                    entityObject = event;
+                }
+                // Check if it's AuthUserCoreEntityMapping (has syenm_entity_id_syen)
+                else if ('syenm_entity_id_syen' in event) {
+                    const entityValue = event.syenm_entity_id_syen;
+                    if (typeof entityValue === 'object' && entityValue !== null && '_id' in entityValue) {
+                        entityId = entityValue._id || '';
+                        entityObject = this.entityOptions().find(e => e._id === entityId) || null;
+                    }
+                    else if (typeof entityValue === 'string') {
+                        entityId = entityValue;
+                        entityObject = this.entityOptions().find(e => e._id === entityId) || null;
+                    }
                 }
             }
-        }
-        // Update the form control value to ensure it's set correctly
-        const formControl = this.userMasterForm.get(`core_entity_mapping.${mappingIndex}.syenm_entity_id_syen`);
-        if (formControl && entityId) {
-            // Set the value to just the ID string (as expected by cide-ele-select with valueKey="_id")
-            formControl.setValue(entityId, { emitEvent: false });
+            // If we extracted entityId from event but form control doesn't have it, set it
+            if (entityId && formControl && formControl.value !== entityId) {
+                formControl.setValue(entityId, { emitEvent: false });
+            }
         }
         // Update the signal for backward compatibility
         if (entityId && entityObject && entityObject._id) {
@@ -13442,6 +13477,8 @@ class CideCoreUserCreateComponent {
                 }
                 return updated;
             });
+            // Trigger change detection to update UI (especially user type mappings display)
+            this.cdr.detectChanges();
         }
         // Clear menu rights for this mapping when entity changes
         this.clearMenuRightsForMapping(mappingIndex);
@@ -13541,6 +13578,10 @@ class CideCoreUserCreateComponent {
      */
     getFilteredEntityOptions(currentMappingIndex) {
         const allEntities = this.entityOptions();
+        // Return empty array if no entities available
+        if (!allEntities || allEntities.length === 0) {
+            return [];
+        }
         const currentMappings = this.entityMappingsFormArray.getRawValue();
         // Get all selected entity IDs from other mappings (excluding current mapping)
         const selectedEntityIds = currentMappings
@@ -13549,9 +13590,12 @@ class CideCoreUserCreateComponent {
                 // Handle both object and string formats
                 const entityValue = mapping.syenm_entity_id_syen;
                 if (typeof entityValue === 'object' && entityValue !== null && '_id' in entityValue) {
-                    return entityValue._id;
+                    const entityId = entityValue._id;
+                    return entityId && entityId !== '' ? entityId : null;
+                }
+                if (typeof entityValue === 'string' && entityValue !== '') {
+                    return entityValue;
                 }
-                return entityValue;
             }
             return null;
         })
@@ -13561,14 +13605,10 @@ class CideCoreUserCreateComponent {
             selectedEntityIds,
             availableEntities: allEntities.length - selectedEntityIds.length
         });
-        console.log(`🏢 getFilteredEntityOptions selectedEntityIds:`, selectedEntityIds);
         // Return all entities with disabled state for already selected ones
         return allEntities.map((entity) => {
             const entityId = entity._id;
-            const isDisabled = selectedEntityIds.includes(entityId);
-            if (isDisabled) {
-                console.log(`🚫 Entity "${entity.syen_name}" (${entityId}) is already selected in another mapping - marking as disabled`);
-            }
+            const isDisabled = entityId ? selectedEntityIds.includes(entityId) : false;
             return {
                 ...entity,
                 disabled: isDisabled
@@ -15094,8 +15134,9 @@ class CideCoreUserCreateComponent {
     /**
      * Get user type label for display
      */
-    getUserTypeLabel() {
-        const type = this.userType()?.toUpperCase();
+    getUserTypeLabel(userTypeOverride) {
+        // Use override if provided, otherwise fall back to signal
+        const type = (userTypeOverride || this.userType())?.toString().toUpperCase();
         if (type === 'TEACHER' || type === 'FACULTY') {
             return 'Faculty';
         }
@@ -15524,11 +15565,6 @@ class CideCoreUserCreateComponent {
         this.applyFamilyDetailAccessControl();
     }
     onSubmit() {
-        const requiredRight = this.isEditMode() ? 'EDIT' : 'CREATE';
-        if (!this.rightsService.hasRight(requiredRight)) {
-            this.notificationService.error(`You do not have permission to ${this.isEditMode() ? 'edit' : 'create'} users`);
-            return;
-        }
         // Custom validation: ensure at least one entity mapping exists
         if (this.entityMappings().length === 0) {
             console.warn('At least one entity mapping is required for user access.');
@@ -15613,11 +15649,13 @@ class CideCoreUserCreateComponent {
                 next: (response) => {
                     console.log('✅ User master saved successfully:', response);
                     this.loading.set(false);
-                    const userTypeLabel = this.getUserTypeLabel();
-                    const userType = this.userType()?.toUpperCase();
                     const responseData = response;
                     const responseGeneratedId = responseData?.data?.syutm_type_specific_id;
                     const responseUserType = responseData?.data?.syutm_user_type || formUserType;
+                    // Get user type label from actual form/response value, not signal
+                    const actualUserType = responseUserType || formUserType || this.userType();
+                    const userTypeLabel = this.getUserTypeLabel(actualUserType);
+                    const userType = actualUserType?.toString().toUpperCase();
                     if (this.isEditMode()) {
                         // In edit mode, check if we received a reference ID that wasn't in the payload
                         const payloadTypeSpecificId = formTypeSpecificId || '';
@@ -15626,7 +15664,9 @@ class CideCoreUserCreateComponent {
                             payloadId: payloadTypeSpecificId,
                             responseId: responseGeneratedId,
                             hasIdInPayload,
-                            responseUserType
+                            responseUserType,
+                            actualUserType,
+                            userTypeLabel
                         });
                         // If we didn't have an ID in payload but received one in response, show popup
                         if (!hasIdInPayload && responseGeneratedId &&
@@ -16327,7 +16367,7 @@ class CideCoreUserCreateComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreUserCreateComponent, isStandalone: true, selector: "cide-core-user-create", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsCheckboxRendererTemplate", first: true, predicate: ["permissionsCheckboxRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuTypeRendererTemplate", first: true, predicate: ["menuTypeRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuRightsPermissionsRendererTemplate", first: true, predicate: ["menuRightsPermissionsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsRendererTemplate", first: true, predicate: ["permissionsRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \n  ENTERPRISE USER MASTER FORM\n  \n  Enterprise-Level Styling with Tailwind CSS\n  Features: Responsive grids, proper typography, enhanced user experience\n-->\n\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: pageCode() }\" [breadcrumb_data]=\"breadcrumbData()\">\n  <div class=\"tw-w-full tw-h-full tw-p-1 tw-pt-2\">\n    <!-- Toast Notifications -->\n    <cide-ele-toast-notification></cide-ele-toast-notification>\n    \n    <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\n      (ngSubmit)=\"onSubmit()\">\n\n\n    <!-- User Context Header -->\n    <div\n      class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-indigo-50 tw-border tw-border-blue-200 tw-rounded-md tw-p-1 tw-mb-2 tw-shadow-sm\">\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\n        <!-- User Basic Info Display -->\n        <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\n          <!-- Profile Photo Preview -->\n          <div class=\"tw-flex tw-items-center tw-gap-2\">\n            <div\n              class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-border tw-border-blue-200 tw-flex tw-items-center tw-justify-center tw-overflow-hidden\">\n              @if (userMasterForm.get('user_photo_id_cyfm')?.value) {\n              <img cideEleFileImage [fileId]=\"userMasterForm.get('user_photo_id_cyfm')?.value\"\n                [altText]=\"'Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover\">\n              } @else {\n              <cide-ele-icon name=\"person\" class=\"tw-w-5 tw-h-5 tw-text-blue-600\">\n              </cide-ele-icon>\n              }\n            </div>\n            <div class=\"tw-flex tw-flex-col\">\n              <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\n                {{ getUserFullName() || 'New User' }}\n              </span>\n              <span class=\"tw-text-xs tw-text-blue-600\">\n                {{ getUserUsername() || 'Username not set' }}\n              </span>\n            </div>\n          </div>\n\n          <!-- Contact Info -->\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">email</cide-ele-icon>\n              <span>{{ getUserEmail() || 'Email not set' }}</span>\n            </div>\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">phone</cide-ele-icon>\n              <span>{{ getUserMobile() || 'Mobile not set' }}</span>\n            </div>\n          </div>\n\n          <!-- Active Status -->\n          <div class=\"tw-flex tw-items-center tw-gap-1\">\n            @if (getUserActiveStatus()) {\n            <span\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-700\">\n              <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">check_circle</cide-ele-icon>\n              Active\n            </span>\n            } @else {\n            <span\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-700\">\n              <cide-ele-icon variant=\"red\" size=\"xs\" class=\"tw-mr-1\">cancel</cide-ele-icon>\n              Inactive\n            </span>\n            }\n          </div>\n        </div>\n\n        <!-- Entity Info -->\n        <div class=\"tw-flex tw-items-center tw-gap-2\">\n          @if (hasDefaultEntity()) {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-blue-700\">\n            <cide-ele-icon variant=\"blue\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-font-medium\">{{ getDefaultEntityName() }}</span>\n          </div>\n          } @else {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-500\">\n            <cide-ele-icon variant=\"gray\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-italic\">No entity</span>\n          </div>\n          }\n\n          <span class=\"tw-text-xs tw-text-gray-600 tw-px-2 tw-py-1 tw-bg-gray-100 tw-rounded\">\n            {{ getEntityMappingCount() }} mapping(s)\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Tab Navigation -->\n    <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\n      <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\n        (tabChange)=\"onTabChange($event)\">\n      </cide-ele-tab>\n    </div>\n\n    <!-- Tab Content -->\n    <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n      @switch (activeTab()) {\n\n      @case ('basic') {\n      <!-- User Basic Information Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n        <!-- Top Section: Form Fields on Left, Profile Photo on Right -->\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4 tw-mb-4\">\n          <!-- Left Side: Form Fields -->\n          <div class=\"tw-space-y-4\">\n            <!-- Name Fields - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\n              <cide-ele-input id=\"user_firstname\" label=\"First Name\" formControlName=\"user_firstname\"\n                placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\n                placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_lastname\" label=\"Last Name\" formControlName=\"user_lastname\"\n                placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_fullname\" label=\"Full Name (Auto-generated)\" formControlName=\"user_fullname\"\n                placeholder=\"Auto-generated from name fields or enter manually\" [maxlength]=\"62\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <!-- Contact Information - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\n              <cide-ele-input id=\"user_username\" label=\"Username\" formControlName=\"user_username\"\n                placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_emailid\" label=\"Email ID\" formControlName=\"user_emailid\" type=\"email\"\n                placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number\" formControlName=\"user_mobileno\" type=\"tel\"\n                placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <!-- User Type Mapping -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n              <cide-ele-select\n                id=\"syutm_user_type\"\n                label=\"User Type\"\n                placeholder=\"Select user type\"\n                [options]=\"userTypeOptions\"\n                valueKey=\"value\"\n                labelKey=\"label\"\n                formControlName=\"syutm_user_type\"\n                size=\"md\">\n              </cide-ele-select>\n\n              <cide-ele-input\n                id=\"syutm_type_specific_id\"\n                label=\"Type-Specific ID\"\n                placeholder=\"Enter type-specific ID (e.g., STU001, TCH001)\"\n                formControlName=\"syutm_type_specific_id\"\n                [maxlength]=\"50\"\n                size=\"md\">\n              </cide-ele-input>\n            </div>\n          </div>\n\n          <!-- Right Side: Profile Photo Upload -->\n          <div class=\"tw-flex tw-items-start tw-justify-center tw-p-0\">\n            <cide-ele-file-input id=\"user_photo_id_cyfm\" formControlName=\"user_photo_id_cyfm\" accept=\"image/*\"\n              [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\n              previewHeight=\"120px\" placeholderText=\"Upload Photo\" placeholderIcon=\"cloud_upload\" [autoUpload]=\"true\"\n              [uploadData]=\"getProfilePhotoUploadData()\" (uploadSuccess)=\"onProfilePhotoUploadSuccess($event)\"\n              (uploadError)=\"onProfilePhotoUploadError($event)\"\n              (uploadProgressChange)=\"onProfilePhotoUploadProgress($event)\">\n            </cide-ele-file-input>\n          </div>\n        </div>\n\n\n\n        <!-- Status Control -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-mb-2\">\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\n            <label\n              class=\"tw-flex tw-flex-col tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200 hover:tw-bg-blue-75\">\n              <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\n                class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\n                access and operations</span>\n            </label>\n          </div>\n        </div>\n      </div>\n      }\n\n      @case ('auth') {\n      <!-- Authentication Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <!-- Password Fields -->\n        @if (shouldShowPasswordFields()) {\n        <div class=\"tw-mb-4\">\n          <!-- Password Fields Header for Edit Mode -->\n          @if (isEditMode()) {\n          <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Update Password</h6>\n            <button type=\"button\"\n              class=\"tw-px-3 tw-py-1 tw-bg-gray-100 tw-text-gray-600 tw-border tw-border-gray-300 tw-rounded-md tw-text-xs tw-font-medium hover:tw-bg-gray-200 tw-transition-colors\"\n              (click)=\"cancelPasswordUpdate()\">\n              Cancel Password Update\n            </button>\n          </div>\n          }\n\n          <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6\">\n            <cide-ele-input id=\"user_password\" [label]=\"getPasswordFieldLabel()\" formControlName=\"user_password\"\n              type=\"password\" placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\n            </cide-ele-input>\n\n            <cide-ele-input id=\"user_confirm_password\" [label]=\"getPasswordConfirmLabel()\"\n              formControlName=\"user_confirm_password\" type=\"password\" placeholder=\"Confirm your password\" size=\"md\">\n            </cide-ele-input>\n          </div>\n        </div>\n        }\n\n        <!-- Password Update Option for Edit Mode -->\n        @if (isEditMode() && !shouldShowPasswordFields()) {\n        <div class=\"tw-mb-4\">\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-blue-800 tw-mb-2\">Password Update</h6>\n            <p class=\"tw-text-sm tw-text-blue-600 tw-mb-3\">Current password will be kept. Click below to change\n              password.</p>\n\n            @if (hasPasswordInput()) {\n            <div\n              class=\"tw-mb-3 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded tw-text-sm tw-text-yellow-700\">\n              <cide-ele-icon variant=\"yellow\" size=\"xs\" class=\"tw-mr-1\">warning</cide-ele-icon>\n              Password fields contain text. Click \"Change Password\" to manage existing input.\n            </div>\n            }\n\n            <button type=\"button\"\n              class=\"tw-px-4 tw-py-2 tw-bg-blue-100 tw-text-blue-700 tw-border tw-border-blue-300 tw-rounded-md tw-text-sm tw-font-medium hover:tw-bg-blue-200 tw-transition-colors\"\n              (click)=\"triggerPasswordUpdate()\">\n              @if (hasPasswordInput()) {\n              Manage Password Fields\n              } @else {\n              Change Password\n              }\n            </button>\n          </div>\n        </div>\n        }\n\n        <!-- Password Options -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-gap-4 tw-mb-4\">\n          <div class=\"tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\n            <label\n              class=\"tw-flex tw-flex-col tw-gap-2 tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200\">\n              <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\n                formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\n                password on next login</span>\n            </label>\n          </div>\n        </div>\n\n      </div>\n      }\n\n      @case ('roles') {\n      <!-- Entity, Roles & Permissions Mapping Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n\n\n        <!-- Important Note -->\n        <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-2 tw-mb-4\">\n          <div class=\"tw-flex tw-items-start tw-gap-3\">\n            <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\n            <div class=\"tw-flex-1\">\n              <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\n              <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role\n                mappings below. At least one entity mapping is required for user access.</p>\n              @if (hasDefaultEntity()) {\n              <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\n                <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\n                <span class=\"tw-text-sm tw-text-amber-800\">\n                  <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\n                </span>\n              </div>\n              } @else {\n              <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\n                \u26A0\uFE0F No default entity selected. Please set one entity as default.\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <!-- Entity-Role Mapping Section -->\n        <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\n          <div>\n            <h4 class=\"tw-text-sm tw-text-left tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\n            <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\n          </div>\n          <div class=\"tw-flex tw-flex-col tw-items-end\">\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\"\n              leftIcon=\"add\" [disabled]=\"isAllEntitiesMapped()\">\n              Add Entity Mapping\n            </button>\n\n            @if (isAllEntitiesMapped()) {\n            <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-md tw-max-w-xs\">\n              <p class=\"tw-text-xs tw-text-blue-700\">\n                <cide-ele-icon variant=\"info\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n                All available entities are already mapped.\n              </p>\n            </div>\n            }\n          </div>\n        </div>\n\n        <div formArrayName=\"core_entity_mapping\">\n            @for (mapping of entityMappings(); track $index; let i = $index) {\n            <div class=\"tw-bg-white tw-border tw-border-blue-200 tw-rounded-xl tw-mb-6 tw-overflow-hidden tw-shadow-sm\"\n              [formGroupName]=\"i\">\n              <div\n                class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-blue-100 tw-px-6 tw-py-3 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-blue-200\">\n                <div class=\"tw-flex tw-items-center tw-gap-2\">\n                  <h5 class=\"tw-m-0 tw-text-blue-800 tw-text-sm tw-font-semibold\">Entity Mapping {{ i + 1 }}</h5>\n                  @if (mapping.syenm_isdefault) {\n                  <span\n                    class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n                    <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">star</cide-ele-icon>\n                    Default\n                  </span>\n                  }\n                </div>\n                <div class=\"tw-flex tw-items-center tw-gap-2 tw-flex-wrap\">\n                  <!-- User Type Mappings Display -->\n                  @if (allUserTypeMappings().length > 0) {\n                    @for (typeMapping of allUserTypeMappings(); track typeMapping._id || typeMapping.syutm_type_specific_id) {\n                      <div class=\"tw-flex tw-items-center tw-gap-1.5\">\n                        <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n                          {{ typeMapping.syutm_user_type }}\n                        </span>\n                        @if (typeMapping.syutm_isactive) {\n                          <span class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-[10px] tw-font-medium tw-bg-green-100 tw-text-green-800\">\n                            Active\n                          </span>\n                        }\n                        @if (isUserTypeMappingForEntity(typeMapping, getEntityIdFromMapping(i))) {\n                          <span class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-[10px] tw-font-medium tw-bg-green-50 tw-text-green-700 tw-border tw-border-green-200\">\n                            This Entity\n                          </span>\n                        } @else {\n                          <span class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-[10px] tw-font-medium tw-bg-gray-100 tw-text-gray-600\">\n                            Other Entity\n                          </span>\n                        }\n                        @if (typeMapping.syutm_type_specific_id) {\n                          <span class=\"tw-text-[10px] tw-text-gray-600 tw-font-mono\" [title]=\"'ID: ' + typeMapping.syutm_type_specific_id\">\n                            ID: {{ typeMapping.syutm_type_specific_id }}\n                          </span>\n                        }\n                      </div>\n                    }\n                  }\n                  @if (!mapping?._id) {\n                    <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeEntityMapping(i)\"\n                      leftIcon=\"delete\">\n                      Remove\n                    </button>\n                  }\n                </div>\n              </div>\n\n              <div>\n                <!-- Entity and Role Selection -->\n                <div class=\"tw-grid tw-px-3 tw-py-1 tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-mb-4\">\n                  <div>\n                    <cide-ele-select label=\"Entity\" [options]=\"getFilteredEntityOptions(i)\"\n                      formControlName=\"syenm_entity_id_syen\" valueKey=\"_id\" labelKey=\"syen_name\"\n                      placeholder=\"Select entity\" size=\"md\" (change)=\"onEntityChange(i, $event)\">\n                    </cide-ele-select>\n\n                    @if (isAllEntitiesSelected(i)) {\n                    <div class=\"tw-mt-2 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded-md\">\n                      <p class=\"tw-text-xs tw-text-yellow-700\">\n                        <cide-ele-icon variant=\"warning\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n                        All entities are already mapped. Remove another mapping to add this one.\n                      </p>\n                    </div>\n                    }\n                  </div>\n                  <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\n                    formControlName=\"syenm_role_id_syusrol\" valueKey=\"_id\" labelKey=\"syusrol_role_name\"\n                    placeholder=\"Select role for this entity\" size=\"md\" (change)=\"onRoleChange(i, $event)\">\n                  </cide-ele-select>\n                </div>\n\n\n                <!-- Entity-Specific Details and Active Period - All in One Row -->\n                <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4 tw-mb-4\">\n                  <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\n                    formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\"\n                    labelKey=\"sydept_name\" placeholder=\"Select department\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-select label=\"Designation for this Entity\" [options]=\"getDesignationOptionsForEntity(i)\"\n                    valueKey=\"_id\" labelKey=\"sydsg_name\" formControlName=\"syenm_designation_id_sydsg\"\n                    placeholder=\"Select designation\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-input label=\"Active From\" [id]=\"'syenm_activefrom['+i+']'\"\n                    formControlName=\"syenm_activefrom\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n\n                  <cide-ele-input label=\"Active Until\" [id]=\"'syenm_activeupto['+i+']'\"\n                    formControlName=\"syenm_activeupto\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n                </div>\n\n                <!-- Mapping Settings -->\n                <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-mb-4\">\n                  <div class=\"tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded-lg\">\n                    <cide-ele-input type=\"checkbox\" label=\"Default Entity\" formControlName=\"syenm_isdefault\"\n                      (change)=\"onDefaultEntityChange(i, $event)\" class=\"tw-h-5 tw-accent-green-500\" />\n                    <span class=\"tw-text-xs tw-text-green-600 tw-block tw-mt-1\">Set as user's default entity (only one\n                      allowed)</span>\n                  </div>\n\n                  <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n                    <cide-ele-input type=\"checkbox\" label=\"Active Mapping\" formControlName=\"syenm_isactive\"\n                      class=\"tw-h-5 tw-accent-blue-500\" />\n                    <span class=\"tw-text-xs tw-text-blue-600 tw-block tw-mt-1\">Enable this entity mapping</span>\n                  </div>\n                </div>\n\n                <!-- Menu Rights Grid for this Entity-Role -->\n                <div class=\"tw-border-t tw-border-gray-200\">\n\n                  @if (getMenuRightsForMapping(i).length > 0) {\n                  <!-- Menu Rights Tree Grid -->\n\n                  <cide-ele-data-grid [config]=\"getMenuRightsGridConfig(i)\"\n                    [templateRenderers]=\"getMenuRightsTemplateRenderers(i)\"\n                    (gridEvent)=\"onMenuRightsGridEvent($event, i)\" class=\"tw-h-96 tw-w-full\">\n                  </cide-ele-data-grid>\n\n                  } @else {\n                  <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\n                    <div class=\"tw-text-gray-400 tw-mb-3\">\n                      <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\n                    </div>\n                    <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\n                    <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to\n                      automatically load\n                      menu rights for this mapping.</p>\n                  </div>\n                  }\n                </div>\n              </div>\n            </div>\n            }\n          </div>\n\n          @if (entityMappings().length === 0) {\n          <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\n            <div class=\"tw-text-blue-400 tw-mb-3\">\n              <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\n            </div>\n            <h4 class=\"tw-text-sm tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\n            <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and\n              permissions for different entities.</p>\n            <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\"\n              (click)=\"addEntityMapping()\" leftIcon=\"add\">\n              Add First Entity Mapping\n            </button>\n          </div>\n          }\n        </div>\n      }\n\n      @case ('addresses') {\n      <!-- Contact Addresses Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end\">\n          <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\n              leftIcon=\"add\" [disabled]=\"!hasAddContactAddressRights()\">\n              Add New Address\n            </button>\n          </div>\n        </div>\n\n        <div formArrayName=\"core_user_contact_addresses\">\n          @for (address of contactAddresses(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n            <div\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <!-- Use address type as header instead of generic \"Address X\" -->\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n                {{ getAddressTypeLabel(i) || ('Address ' + (i + 1)) }}\n              </h4>\n              <div class=\"tw-flex tw-items-center tw-gap-2\">\n                @if (isAddressOwner(i)) {\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareAddress(i)\"\n                  leftIcon=\"share\" class=\"tw-text-blue-600 hover:tw-text-blue-700\">\n                  Share\n                </button>\n                }\n                @if (!address?._id) {\n                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\n                  leftIcon=\"delete\">\n                  Remove\n                </button>\n                }\n              </div>\n            </div>\n            <div class=\"tw-p-4\">\n              <!-- Main Layout: Inputs on Left, Address Textarea on Right -->\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n                \n                <!-- Left Side: Input Fields (3/4 width) -->\n                <div class=\"lg:tw-col-span-3\">\n                  <!-- Row 1: Address Type, Contact Person -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mb-3\">\n                    <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\" id=\"sycad_address_type_id_sygms\"\n                      formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onAddressTypeChange(i)\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"Contact Person\" formControlName=\"sycad_contact_person_name\"\n                      placeholder=\"Enter contact person\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 2: Postal Code, City, State, Country -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\n                    <cide-ele-select label=\"Postal Code\" [options]=\"addressPostalCodes()[i] || []\"\n                      formControlName=\"sycad_contact_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\n                      [loading]=\"addressPostalCodesLoading()[i] || false\" (searchChange)=\"onPostalCodeSearch($event, i)\"\n                      (change)=\"onPostalCodeSelection($event, i)\" size=\"sm\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"City\" formControlName=\"sycad_contact_city_sypin\" placeholder=\"Enter city\"\n                      size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"State\" formControlName=\"sycad_contact_state_sypin\" placeholder=\"Enter state\"\n                      size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-select label=\"Country\" [options]=\"addressCountries()[i] || []\"\n                      formControlName=\"sycad_contact_country_syctr\" placeholder=\"Select country\" valueKey=\"_id\"\n                      labelKey=\"syctr_country_iso_name\" [searchable]=\"true\" (searchChange)=\"onCountrySearch($event, i)\"\n                      [loading]=\"addressCountriesLoading()[i] || false\" size=\"sm\">\n                    </cide-ele-select>\n                  </div>\n                </div>\n\n                <!-- Right Side: Address Textarea (1/4 width, spans 2 rows) -->\n                <div class=\"lg:tw-col-span-1 lg:tw-row-span-2 tw-flex tw-flex-col\">\n                  <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\n                    placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"4\" size=\"sm\"\n                    class=\"tw-h-full\">\n                  </cide-ele-textarea>\n                </div>\n              </div>\n\n              <!-- Contact Details: Primary Phone, Alt Phone, Fax, Primary Email in 4 columns -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Primary Phone\" formControlName=\"sycad_contact_phone\" type=\"tel\"\n                  placeholder=\"Primary phone\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Alternate Phone\" formControlName=\"sycad_contact_phone_alt\" type=\"tel\"\n                  placeholder=\"Alternate phone\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Fax Number\" formControlName=\"sycad_contact_fax\" placeholder=\"Fax number\"\n                  size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Primary Email\" formControlName=\"sycad_contact_email\" type=\"email\"\n                  placeholder=\"Primary email\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Alternate Email in single row -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                <cide-ele-input label=\"Alternate Email\" formControlName=\"sycad_contact_email_alt\" type=\"email\"\n                  placeholder=\"Alternate email address\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('documents') {\n      <!-- Documents Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\" [disabled]=\"!hasAddDocumentRights()\">\n            Add Document\n          </button>\n        </div>\n        <div formArrayName=\"core_user_documents\">\n          @for (doc of documents(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n            <div\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n                {{ getDocumentTypeLabel(i) || ('Document ' + (i + 1)) }}\n              </h4>\n              <div class=\"tw-flex tw-gap-2\">\n                @if (doc?._id) {\n                <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"shareDocumentRights(i)\"\n                  leftIcon=\"share\">\n                  Share\n                </button>\n                }\n              </div>\n            </div>\n            <div class=\"tw-p-4\">\n              <!-- Main Layout: Inputs on Left, File Upload on Right -->\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-3 tw-gap-4\">\n                \n                <!-- Left Side: Document Information (2/3 width) -->\n                <div class=\"lg:tw-col-span-2\">\n                  <!-- Row 1: Document Type, Document Number, Name as per Document -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                    <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\n                      formControlName=\"syusd_document_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onDocumentTypeChange(i)\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"Document Number\" formControlName=\"syusd_doc_number\"\n                      placeholder=\"Document number\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"Name as per Document\" formControlName=\"syusd_doc_name_as_per_doc\"\n                      placeholder=\"Name on document\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 2: Issue Date, Expiry Date, Photo Group -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                    <cide-ele-input label=\"Issue Date\" formControlName=\"syusd_doc_issue_date\"\n                      [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"Expiry Date\" formControlName=\"syusd_doc_expiry_date\"\n                      [id]=\"'syusd_doc_expiry_date['+i+']'\" type=\"date\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 3: Verification Status, KYC Status -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                    <cide-ele-select label=\"Verification Status\" [options]=\"documentVerificationStatusOptions()\"\n                      formControlName=\"syusd_doc_verification_status_id_sygms\" placeholder=\"Select status\"\n                      size=\"sm\" valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n\n                    <cide-ele-select label=\"KYC Status\" [options]=\"documentKycStatusOptions()\"\n                      formControlName=\"syusd_doc_kyc_status_id_sygms\" placeholder=\"Select KYC status\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n                  </div>\n                </div>\n\n                <!-- Right Side: File Upload (1/3 width) -->\n                <div class=\"lg:tw-col-span-1\">\n                  <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-3 tw-h-full\">\n                    \n                    <!-- File Upload Input -->\n                    <cide-ele-file-input\n                      [id]=\"'document-files-' + i\"\n                      [multiple]=\"true\"\n                      formControlName=\"syusd_photo_group_id_cyfm\"\n                      [accept]=\"'.pdf,.jpg,.jpeg,.png,.doc,.docx'\"\n                      [autoUpload]=\"true\"\n                      [uploadData]=\"getDocumentUploadData(i)\"\n                      (change)=\"onDocumentFilesSelected($event, i)\"\n                      (uploadSuccess)=\"onDocumentUploadSuccess($event, i)\"\n                      (uploadError)=\"onDocumentUploadError($event, i)\"\n                      (uploadProgressChange)=\"onDocumentUploadProgress($event, i)\"\n                      class=\"tw-mb-3\"\n                      size=\"sm\">\n                    </cide-ele-file-input>\n\n                    <!-- Upload Status -->\n                    <!-- Upload status is now handled by the file input component itself -->\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('family') {\n      <!-- Family Details Section - Compact Design -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-3 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\" [disabled]=\"!hasAddFamilyDetailRights()\">\n            Add Family Member\n          </button>\n        </div>\n\n        <div formArrayName=\"core_user_family_details\">\n          @for (family of familyDetails(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg tw-mb-4 tw-overflow-hidden tw-transition-all tw-duration-200 hover:tw-shadow-md tw-shadow-sm\">\n            \n            <!-- Compact Header -->\n            <div class=\"tw-bg-gray-50 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-medium\">Family Member {{ i + 1 }}</h4>\n              <div class=\"tw-flex tw-gap-2\">\n                @if (family?._id) {\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareFamilyDetailRights(i)\"\n                  leftIcon=\"share\">\n                  Share\n                </button>\n                }\n                @if (!family?._id) {\n                <button cideEleButton variant=\"danger\" size=\"xs\" type=\"button\" (click)=\"removeFamilyDetail(i)\" leftIcon=\"delete\">\n                  Remove\n                </button>\n                }\n              </div>\n            </div>\n            \n            <!-- Compact Form Content - 3 inputs per row -->\n            <div class=\"tw-p-4\">\n              <!-- Row 1: Name, User, and Combined Relationship/Active Status (33.33% each) -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Family Member Name\" formControlName=\"syfdl_family_member_name\"\n                  placeholder=\"Enter family member full name\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-select label=\"Family Member User\" [options]=\"userOptions(i)\"\n                  formControlName=\"syfdl_family_member_id_user\" placeholder=\"Select family member user\" size=\"sm\"\n                  valueKey=\"_id\" labelKey=\"user_fullname\" [searchable]=\"true\"\n                  [loading]=\"userSearchLoading()[i] || false\" (searchChange)=\"onUserSearchChange($event, i)\"\n                  (change)=\"onUserSelectionChange($event, i)\">\n                </cide-ele-select>\n\n                <!-- Combined Relationship and Active Status (33.33%) -->\n                <div class=\"tw-flex tw-flex-row tw-gap-2 tw-items-end\">\n                  <div class=\"tw-flex-1\">\n                    <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\n                      formControlName=\"syfdl_relationship_id_sygms\" placeholder=\"Select relationship\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n                  </div>\n\n                  <div class=\"tw-flex tw-items-center tw-pt-1 tw-flex-shrink-0\">\n                    <cide-ele-input formControlName=\"syfdl_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Row 2: Blood Group, DOB, and Phone -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\n                  formControlName=\"syfdl_blood_group_sygms\" placeholder=\"Select blood group\" size=\"sm\" valueKey=\"_id\"\n                  labelKey=\"sygms_title\">\n                </cide-ele-select>\n\n                <cide-ele-input label=\"Date of Birth\" formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"sm\"\n                  [id]=\"'syfdl_family_member_dob['+i+']'\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Phone\" formControlName=\"syfdl_contact_phone\" type=\"tel\"\n                  placeholder=\"Enter contact phone\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Row 3: Email, Email ID, and Contact Number -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\" type=\"email\"\n                  placeholder=\"Enter contact email\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\" type=\"email\"\n                  placeholder=\"Enter contact email ID\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\" type=\"tel\"\n                  placeholder=\"Enter contact number\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n      }\n    </div>\n\n    <!-- Form Actions -->\n    <div\n      class=\"tw-flex tw-justify-between tw-items-center tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\n      <!-- Error Display Component -->\n      <div class=\"tw-flex-1\">\n        <cide-form-field-error [formGroup]=\"userMasterForm\"></cide-form-field-error>\n      </div>\n\n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-gap-4\">\n      <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n        [disabled]=\"loading()\">\n        Reset Form\n      </button>\n\n      <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\n        [loading]=\"loading()\" leftIcon=\"save\">\n        Save User Master\n      </button>\n      </div>\n    </div>\n  </form>\n</div>\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers for Role Permissions Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3 tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      @if (row.syme_type === 'module') {\n      <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">folder</cide-ele-icon>\n      } @else if (row.syme_type === 'section') {\n      <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">folder_open</cide-ele-icon>\n      } @else if (row.syme_type === 'menu') {\n      <cide-ele-icon class=\"tw-text-purple-600 tw-w-4 tw-h-4\">menu</cide-ele-icon>\n      } @else {\n      <cide-ele-icon class=\"tw-text-gray-600 tw-w-4 tw-h-4\">description</cide-ele-icon>\n      }\n    </div>\n\n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.syme_title\">\n          {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n        </div>\n        <!-- Green pill indicator for parent menus with child permissions -->\n        @if (row.syme_type === 'module' || row.syme_type === 'section') {\n        @if (hasChildMenusWithPermissions(row._id)) {\n        <span\n          class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-whitespace-nowrap\">\n          Assigned\n        </span>\n        }\n        }\n      </div>\n      @if (row.permission?.sygms_name) {\n      <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" [title]=\"row.permission?.sygms_name\">\n        {{ row.permission?.sygms_name }}\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-justify-center\">\n    @if (row.syme_type === 'module') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n      Module\n    </span>\n    } @else if (row.syme_type === 'section') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n      Section\n    </span>\n    } @else if (row.syme_type === 'menu') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-purple-100 tw-text-purple-800\">\n      Menu\n    </span>\n    } @else {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800\">\n      {{ row.syme_type || 'Unknown' }}\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n    @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n    <div class=\"tw-flex tw-items-center tw-space-x-1\">\n      <div class=\"tw-flex tw-items-center tw-space-x-1\">\n        <input type=\"checkbox\" [checked]=\"isPermissionSelected(row._id, permissionId)\" [disabled]=\"true\"\n          class=\"tw-h-4 tw-w-4 tw-text-blue-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-blue-500\">\n        <label class=\"tw-text-xs tw-text-gray-700\">\n          {{ getPermissionById(permissionId)?.sygms_title || 'Unknown' }}\n        </label>\n      </div>\n    </div>\n    }\n    } @else {\n    <!-- Show green checkmark for parent menus with child permissions -->\n    @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n    @if (hasChildMenusWithPermissions(row._id)) {\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\">\n      <cide-ele-icon class=\"tw-text-green-600\" size=\"xs\">\n        check\n      </cide-ele-icon>\n    </div>\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n    }\n  </div>\n</ng-template>\n\n<!-- Menu Rights Permissions Renderer Template -->\n<ng-template #menuRightsPermissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    <!-- Role Rights Display -->\n    @if (row.role_rights && row.role_rights.length > 0) {\n    <div class=\"tw-mb-2\">\n      <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Role Rights:</div>\n      <div class=\"tw-flex tw-flex-wrap tw-gap-1\">\n        @for (right of row.role_rights; track $index) {\n        <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-blue-100 tw-text-blue-800 tw-rounded\">\n          {{ right }}\n        </span>\n        }\n      </div>\n    </div>\n    }\n\n\n    <!-- Exception Indicator -->\n    @if (row.hasException) {\n    <div class=\"tw-mt-2\">\n      <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-yellow-100 tw-text-yellow-800 tw-rounded\">\n        Override\n      </span>\n    </div>\n    } @else {\n    <div class=\"tw-mt-2\">\n      <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\n    </div>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row._permissionValues && Object.keys(row._permissionValues).length > 0) {\n    @for (permissionId of Object.keys(row._permissionValues); track permissionId) {\n    <div class=\"tw-flex tw-items-center tw-space-x-2\">\n      <cide-ele-input type=\"checkbox\" [ngModel]=\"row._permissionValues[permissionId].checked\"\n        (ngModelChange)=\"onPermissionChangeSafe($event, row, permissionId)\"\n        [id]=\"'permission-' + row._id + '-' + permissionId\" class=\"tw-h-4 tw-w-4\">\n      </cide-ele-input>\n      <label [for]=\"'permission-' + row._id + '-' + permissionId\" \n        class=\"tw-text-xs tw-cursor-pointer\"\n        [ngClass]=\"{\n          'tw-text-gray-700': row._permissionValues[permissionId].modified === row._permissionValues[permissionId].actual,\n          'tw-text-blue-600 tw-font-semibold': row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual\n        }\">\n        {{ row._permissionValues[permissionId].permission?.sygms_title }}\n        @if (row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual) {\n        <span class=\"tw-text-xs tw-text-orange-500 tw-ml-1\" title=\"Modified from role permission\">\n          ({{ row._permissionValues[permissionId].actual ? '\u2713' : '\u2717' }})\n        </span>\n        }\n      </label>\n    </div>\n    }\n    } @else {\n    <!-- No permissions to display - show N/A (permissions are already loaded, just empty) -->\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n  </div>\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleTabComponent, selector: "cide-ele-tab", inputs: ["tabs", "activeTabId", "size", "variant", "fullWidth", "disabled"], outputs: ["tabChange"] }, { kind: "component", type: CideEleFileInputComponent, selector: "cide-ele-file-input", inputs: ["label", "accept", "multiple", "disabled", "required", "helperText", "errorText", "showPreview", "previewWidth", "previewHeight", "previewBoxMode", "showFileName", "placeholderText", "placeholderIcon", "autoUpload", "uploadData", "showFloatingUploader", "floatingUploaderGroupId"], outputs: ["fileChange", "uploadSuccess", "uploadError", "uploadProgressChange"] }, { kind: "directive", type: CideEleFileImageDirective, selector: "[cideEleFileImage]", inputs: ["fileId", "altText"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleToastNotificationComponent, selector: "cide-ele-toast-notification" }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreUserCreateComponent, isStandalone: true, selector: "cide-core-user-create", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsCheckboxRendererTemplate", first: true, predicate: ["permissionsCheckboxRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuTypeRendererTemplate", first: true, predicate: ["menuTypeRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuRightsPermissionsRendererTemplate", first: true, predicate: ["menuRightsPermissionsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsRendererTemplate", first: true, predicate: ["permissionsRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \n  ENTERPRISE USER MASTER FORM\n  \n  Enterprise-Level Styling with Tailwind CSS\n  Features: Responsive grids, proper typography, enhanced user experience\n-->\n\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: pageCode() }\" [breadcrumb_data]=\"breadcrumbData()\">\n  <div class=\"tw-w-full tw-h-full tw-p-1 tw-pt-2\">\n    <!-- Toast Notifications -->\n    <cide-ele-toast-notification></cide-ele-toast-notification>\n    \n    <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\n      (ngSubmit)=\"onSubmit()\">\n\n\n    <!-- User Context Header -->\n    <div\n      class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-indigo-50 tw-border tw-border-blue-200 tw-rounded-md tw-p-1 tw-mb-2 tw-shadow-sm\">\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\n        <!-- User Basic Info Display -->\n        <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\n          <!-- Profile Photo Preview -->\n          <div class=\"tw-flex tw-items-center tw-gap-2\">\n            <div\n              class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-border tw-border-blue-200 tw-flex tw-items-center tw-justify-center tw-overflow-hidden\">\n              @if (userMasterForm.get('user_photo_id_cyfm')?.value) {\n              <img cideEleFileImage [fileId]=\"userMasterForm.get('user_photo_id_cyfm')?.value\"\n                [altText]=\"'Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover\">\n              } @else {\n              <cide-ele-icon name=\"person\" class=\"tw-w-5 tw-h-5 tw-text-blue-600\">\n              </cide-ele-icon>\n              }\n            </div>\n            <div class=\"tw-flex tw-flex-col\">\n              <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\n                {{ getUserFullName() || 'New User' }}\n              </span>\n              <span class=\"tw-text-xs tw-text-blue-600\">\n                {{ getUserUsername() || 'Username not set' }}\n              </span>\n            </div>\n          </div>\n\n          <!-- Contact Info -->\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">email</cide-ele-icon>\n              <span>{{ getUserEmail() || 'Email not set' }}</span>\n            </div>\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">phone</cide-ele-icon>\n              <span>{{ getUserMobile() || 'Mobile not set' }}</span>\n            </div>\n          </div>\n\n          <!-- Active Status -->\n          <div class=\"tw-flex tw-items-center tw-gap-1\">\n            @if (getUserActiveStatus()) {\n            <span\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-700\">\n              <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">check_circle</cide-ele-icon>\n              Active\n            </span>\n            } @else {\n            <span\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-700\">\n              <cide-ele-icon variant=\"red\" size=\"xs\" class=\"tw-mr-1\">cancel</cide-ele-icon>\n              Inactive\n            </span>\n            }\n          </div>\n        </div>\n\n        <!-- Entity Info -->\n        <div class=\"tw-flex tw-items-center tw-gap-2\">\n          @if (hasDefaultEntity()) {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-blue-700\">\n            <cide-ele-icon variant=\"blue\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-font-medium\">{{ getDefaultEntityName() }}</span>\n          </div>\n          } @else {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-500\">\n            <cide-ele-icon variant=\"gray\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-italic\">No entity</span>\n          </div>\n          }\n\n          <span class=\"tw-text-xs tw-text-gray-600 tw-px-2 tw-py-1 tw-bg-gray-100 tw-rounded\">\n            {{ getEntityMappingCount() }} mapping(s)\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Tab Navigation -->\n    <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\n      <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\n        (tabChange)=\"onTabChange($event)\">\n      </cide-ele-tab>\n    </div>\n\n    <!-- Tab Content -->\n    <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n      @switch (activeTab()) {\n\n      @case ('basic') {\n      <!-- User Basic Information Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n        <!-- Top Section: Form Fields on Left, Profile Photo on Right -->\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4 tw-mb-4\">\n          <!-- Left Side: Form Fields -->\n          <div class=\"tw-space-y-4\">\n            <!-- Name Fields - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\n              <cide-ele-input id=\"user_firstname\" label=\"First Name\" formControlName=\"user_firstname\"\n                placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\n                placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_lastname\" label=\"Last Name\" formControlName=\"user_lastname\"\n                placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_fullname\" label=\"Full Name (Auto-generated)\" formControlName=\"user_fullname\"\n                placeholder=\"Auto-generated from name fields or enter manually\" [maxlength]=\"62\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <!-- Contact Information - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\n              <cide-ele-input id=\"user_username\" label=\"Username\" formControlName=\"user_username\"\n                placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_emailid\" label=\"Email ID\" formControlName=\"user_emailid\" type=\"email\"\n                placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number\" formControlName=\"user_mobileno\" type=\"tel\"\n                placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <!-- User Type Mapping -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n              <cide-ele-select\n                id=\"syutm_user_type\"\n                label=\"User Type\"\n                placeholder=\"Select user type\"\n                [options]=\"userTypeOptions\"\n                valueKey=\"value\"\n                labelKey=\"label\"\n                formControlName=\"syutm_user_type\"\n                size=\"md\">\n              </cide-ele-select>\n\n              <cide-ele-input\n                id=\"syutm_type_specific_id\"\n                label=\"Type-Specific ID\"\n                placeholder=\"Enter type-specific ID (e.g., STU001, TCH001)\"\n                formControlName=\"syutm_type_specific_id\"\n                [maxlength]=\"50\"\n                size=\"md\">\n              </cide-ele-input>\n            </div>\n          </div>\n\n          <!-- Right Side: Profile Photo Upload -->\n          <div class=\"tw-flex tw-items-start tw-justify-center tw-p-0\">\n            <cide-ele-file-input id=\"user_photo_id_cyfm\" formControlName=\"user_photo_id_cyfm\" accept=\"image/*\"\n              [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\n              previewHeight=\"120px\" placeholderText=\"Upload Photo\" placeholderIcon=\"cloud_upload\" [autoUpload]=\"true\"\n              [uploadData]=\"getProfilePhotoUploadData()\" (uploadSuccess)=\"onProfilePhotoUploadSuccess($event)\"\n              (uploadError)=\"onProfilePhotoUploadError($event)\"\n              (uploadProgressChange)=\"onProfilePhotoUploadProgress($event)\">\n            </cide-ele-file-input>\n          </div>\n        </div>\n\n\n\n        <!-- Status Control -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-mb-2\">\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\n            <label\n              class=\"tw-flex tw-flex-col tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200 hover:tw-bg-blue-75\">\n              <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\n                class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\n                access and operations</span>\n            </label>\n          </div>\n        </div>\n      </div>\n      }\n\n      @case ('auth') {\n      <!-- Authentication Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <!-- Password Fields -->\n        @if (shouldShowPasswordFields()) {\n        <div class=\"tw-mb-4\">\n          <!-- Password Fields Header for Edit Mode -->\n          @if (isEditMode()) {\n          <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Update Password</h6>\n            <button type=\"button\"\n              class=\"tw-px-3 tw-py-1 tw-bg-gray-100 tw-text-gray-600 tw-border tw-border-gray-300 tw-rounded-md tw-text-xs tw-font-medium hover:tw-bg-gray-200 tw-transition-colors\"\n              (click)=\"cancelPasswordUpdate()\">\n              Cancel Password Update\n            </button>\n          </div>\n          }\n\n          <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6\">\n            <cide-ele-input id=\"user_password\" [label]=\"getPasswordFieldLabel()\" formControlName=\"user_password\"\n              type=\"password\" placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\n            </cide-ele-input>\n\n            <cide-ele-input id=\"user_confirm_password\" [label]=\"getPasswordConfirmLabel()\"\n              formControlName=\"user_confirm_password\" type=\"password\" placeholder=\"Confirm your password\" size=\"md\">\n            </cide-ele-input>\n          </div>\n        </div>\n        }\n\n        <!-- Password Update Option for Edit Mode -->\n        @if (isEditMode() && !shouldShowPasswordFields()) {\n        <div class=\"tw-mb-4\">\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-blue-800 tw-mb-2\">Password Update</h6>\n            <p class=\"tw-text-sm tw-text-blue-600 tw-mb-3\">Current password will be kept. Click below to change\n              password.</p>\n\n            @if (hasPasswordInput()) {\n            <div\n              class=\"tw-mb-3 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded tw-text-sm tw-text-yellow-700\">\n              <cide-ele-icon variant=\"yellow\" size=\"xs\" class=\"tw-mr-1\">warning</cide-ele-icon>\n              Password fields contain text. Click \"Change Password\" to manage existing input.\n            </div>\n            }\n\n            <button type=\"button\"\n              class=\"tw-px-4 tw-py-2 tw-bg-blue-100 tw-text-blue-700 tw-border tw-border-blue-300 tw-rounded-md tw-text-sm tw-font-medium hover:tw-bg-blue-200 tw-transition-colors\"\n              (click)=\"triggerPasswordUpdate()\">\n              @if (hasPasswordInput()) {\n              Manage Password Fields\n              } @else {\n              Change Password\n              }\n            </button>\n          </div>\n        </div>\n        }\n\n        <!-- Password Options -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-gap-4 tw-mb-4\">\n          <div class=\"tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\n            <label\n              class=\"tw-flex tw-flex-col tw-gap-2 tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200\">\n              <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\n                formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\n                password on next login</span>\n            </label>\n          </div>\n        </div>\n\n      </div>\n      }\n\n      @case ('roles') {\n      <!-- Entity, Roles & Permissions Mapping Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n\n\n        <!-- Important Note -->\n        <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-2 tw-mb-4\">\n          <div class=\"tw-flex tw-items-start tw-gap-3\">\n            <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\n            <div class=\"tw-flex-1\">\n              <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\n              <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role\n                mappings below. At least one entity mapping is required for user access.</p>\n              @if (hasDefaultEntity()) {\n              <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\n                <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\n                <span class=\"tw-text-sm tw-text-amber-800\">\n                  <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\n                </span>\n              </div>\n              } @else {\n              <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\n                \u26A0\uFE0F No default entity selected. Please set one entity as default.\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <!-- Entity-Role Mapping Section -->\n        <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\n          <div>\n            <h4 class=\"tw-text-sm tw-text-left tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\n            <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\n          </div>\n          <div class=\"tw-flex tw-flex-col tw-items-end\">\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\"\n              leftIcon=\"add\" [disabled]=\"isAllEntitiesMapped()\">\n              Add Entity Mapping\n            </button>\n\n            @if (isAllEntitiesMapped()) {\n            <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-md tw-max-w-xs\">\n              <p class=\"tw-text-xs tw-text-blue-700\">\n                <cide-ele-icon variant=\"info\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n                All available entities are already mapped.\n              </p>\n            </div>\n            }\n          </div>\n        </div>\n\n        <div formArrayName=\"core_entity_mapping\">\n            @for (mapping of entityMappings(); track $index; let i = $index) {\n            <cide-ele-card\n              [title]=\"'Entity Mapping ' + (i + 1)\"\n              [subtitle]=\"mapping.syenm_isdefault ? 'Default Entity' : ''\"\n              [cardConfig]=\"{\n                collapsible: true,\n                minimizable: false,\n                maximizable: false,\n                removable: !mapping?._id,\n                defaultState: 'expanded',\n                showHeader: true,\n                showFooter: false,\n                variant: 'default',\n                size: 'md',\n                shadow: true,\n                rounded: true,\n                bordered: true\n              }\"\n              (removed)=\"removeEntityMapping(i)\"\n              class=\"tw-mb-6 entity-mapping-card\">\n              \n              <div [formGroupName]=\"i\">\n              \n              <!-- Card Header Content -->\n              <div card-header class=\"tw-flex tw-items-center tw-gap-2 tw-flex-shrink-0\">\n                @if (mapping.syenm_isdefault) {\n                  <span class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-[10px] tw-font-medium tw-bg-green-100 tw-text-green-800\">\n                    <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-0.5\">star</cide-ele-icon>\n                    Default\n                  </span>\n                }\n              </div>\n\n              <!-- Card Actions (User Type Mappings) - Only show for selected entity -->\n              <div card-actions class=\"tw-flex tw-items-center tw-gap-1.5 tw-flex-wrap tw-max-w-full\">\n                @if (getEntityIdFromMapping(i)) {\n                  @if (getUserTypeMappingsForEntity(getEntityIdFromMapping(i)).length > 0) {\n                    @for (typeMapping of getUserTypeMappingsForEntity(getEntityIdFromMapping(i)); track typeMapping._id || typeMapping.syutm_type_specific_id) {\n                      <div class=\"tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0\">\n                        <span class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-[10px] tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n                          {{ typeMapping.syutm_user_type }}\n                        </span>\n                        @if (typeMapping.syutm_isactive) {\n                          <span class=\"tw-inline-flex tw-items-center tw-px-1 tw-py-0.5 tw-rounded-full tw-text-[9px] tw-font-medium tw-bg-green-100 tw-text-green-800\">\n                            Active\n                          </span>\n                        }\n                        @if (typeMapping.syutm_type_specific_id) {\n                          <span class=\"tw-text-[9px] tw-text-gray-600 tw-font-mono tw-truncate tw-max-w-[80px]\" [title]=\"'ID: ' + typeMapping.syutm_type_specific_id\">\n                          {{ typeMapping.syutm_type_specific_id }}\n                        </span>\n                        }\n                      </div>\n                    }\n                  }\n                }\n              </div>\n\n              <!-- Card Content -->\n              <div>\n                <!-- Entity and Role Selection -->\n                <div class=\"tw-grid tw-px-3 tw-py-1 tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-mb-4\">\n                  <div>\n                    <cide-ele-select label=\"Entity\" [options]=\"getFilteredEntityOptions(i)\"\n                      formControlName=\"syenm_entity_id_syen\" valueKey=\"_id\" labelKey=\"syen_name\"\n                      placeholder=\"Select entity\" size=\"md\" (change)=\"onEntityChange(i, $event)\">\n                    </cide-ele-select>\n\n                    @if (isAllEntitiesSelected(i)) {\n                    <div class=\"tw-mt-2 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded-md\">\n                      <p class=\"tw-text-xs tw-text-yellow-700\">\n                        <cide-ele-icon variant=\"warning\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n                        All entities are already mapped. Remove another mapping to add this one.\n                      </p>\n                    </div>\n                    }\n                  </div>\n                  <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\n                    formControlName=\"syenm_role_id_syusrol\" valueKey=\"_id\" labelKey=\"syusrol_role_name\"\n                    placeholder=\"Select role for this entity\" size=\"md\" (change)=\"onRoleChange(i, $event)\">\n                  </cide-ele-select>\n                </div>\n\n\n                <!-- Entity-Specific Details and Active Period - All in One Row -->\n                <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4 tw-mb-4\">\n                  <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\n                    formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\"\n                    labelKey=\"sydept_name\" placeholder=\"Select department\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-select label=\"Designation for this Entity\" [options]=\"getDesignationOptionsForEntity(i)\"\n                    valueKey=\"_id\" labelKey=\"sydsg_name\" formControlName=\"syenm_designation_id_sydsg\"\n                    placeholder=\"Select designation\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-input label=\"Active From\" [id]=\"'syenm_activefrom['+i+']'\"\n                    formControlName=\"syenm_activefrom\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n\n                  <cide-ele-input label=\"Active Until\" [id]=\"'syenm_activeupto['+i+']'\"\n                    formControlName=\"syenm_activeupto\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n                </div>\n\n                <!-- Mapping Settings -->\n                <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-mb-4\">\n                  <div class=\"tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded-lg\">\n                    <cide-ele-input type=\"checkbox\" label=\"Default Entity\" formControlName=\"syenm_isdefault\"\n                      (change)=\"onDefaultEntityChange(i, $event)\" class=\"tw-h-5 tw-accent-green-500\" />\n                    <span class=\"tw-text-xs tw-text-green-600 tw-block tw-mt-1\">Set as user's default entity (only one\n                      allowed)</span>\n                  </div>\n\n                  <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n                    <cide-ele-input type=\"checkbox\" label=\"Active Mapping\" formControlName=\"syenm_isactive\"\n                      class=\"tw-h-5 tw-accent-blue-500\" />\n                    <span class=\"tw-text-xs tw-text-blue-600 tw-block tw-mt-1\">Enable this entity mapping</span>\n                  </div>\n                </div>\n\n                <!-- Menu Rights Grid for this Entity-Role -->\n                <div class=\"tw-border-t tw-border-gray-200\">\n\n                  @if (getMenuRightsForMapping(i).length > 0) {\n                  <!-- Menu Rights Tree Grid -->\n\n                  <cide-ele-data-grid [config]=\"getMenuRightsGridConfig(i)\"\n                    [templateRenderers]=\"getMenuRightsTemplateRenderers(i)\"\n                    (gridEvent)=\"onMenuRightsGridEvent($event, i)\" class=\"tw-h-96 tw-w-full\">\n                  </cide-ele-data-grid>\n\n                  } @else {\n                  <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\n                    <div class=\"tw-text-gray-400 tw-mb-3\">\n                      <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\n                    </div>\n                    <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\n                    <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to\n                      automatically load\n                      menu rights for this mapping.</p>\n                  </div>\n                  }\n                </div>\n              </div>\n              </div>\n            </cide-ele-card>\n            }\n          </div>\n\n          @if (entityMappings().length === 0) {\n          <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\n            <div class=\"tw-text-blue-400 tw-mb-3\">\n              <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\n            </div>\n            <h4 class=\"tw-text-sm tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\n            <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and\n              permissions for different entities.</p>\n            <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\"\n              (click)=\"addEntityMapping()\" leftIcon=\"add\">\n              Add First Entity Mapping\n            </button>\n          </div>\n          }\n        </div>\n      }\n\n      @case ('addresses') {\n      <!-- Contact Addresses Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end\">\n          <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\n              leftIcon=\"add\" [disabled]=\"!hasAddContactAddressRights()\">\n              Add New Address\n            </button>\n          </div>\n        </div>\n\n        <div formArrayName=\"core_user_contact_addresses\">\n          @for (address of contactAddresses(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n            <div\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <!-- Use address type as header instead of generic \"Address X\" -->\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n                {{ getAddressTypeLabel(i) || ('Address ' + (i + 1)) }}\n              </h4>\n              <div class=\"tw-flex tw-items-center tw-gap-2\">\n                @if (isAddressOwner(i)) {\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareAddress(i)\"\n                  leftIcon=\"share\" class=\"tw-text-blue-600 hover:tw-text-blue-700\">\n                  Share\n                </button>\n                }\n                @if (!address?._id) {\n                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\n                  leftIcon=\"delete\">\n                  Remove\n                </button>\n                }\n              </div>\n            </div>\n            <div class=\"tw-p-4\">\n              <!-- Main Layout: Inputs on Left, Address Textarea on Right -->\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n                \n                <!-- Left Side: Input Fields (3/4 width) -->\n                <div class=\"lg:tw-col-span-3\">\n                  <!-- Row 1: Address Type, Contact Person -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mb-3\">\n                    <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\" id=\"sycad_address_type_id_sygms\"\n                      formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onAddressTypeChange(i)\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"Contact Person\" formControlName=\"sycad_contact_person_name\"\n                      placeholder=\"Enter contact person\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 2: Postal Code, City, State, Country -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\n                    <cide-ele-select label=\"Postal Code\" [options]=\"addressPostalCodes()[i] || []\"\n                      formControlName=\"sycad_contact_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\n                      [loading]=\"addressPostalCodesLoading()[i] || false\" (searchChange)=\"onPostalCodeSearch($event, i)\"\n                      (change)=\"onPostalCodeSelection($event, i)\" size=\"sm\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"City\" formControlName=\"sycad_contact_city_sypin\" placeholder=\"Enter city\"\n                      size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"State\" formControlName=\"sycad_contact_state_sypin\" placeholder=\"Enter state\"\n                      size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-select label=\"Country\" [options]=\"addressCountries()[i] || []\"\n                      formControlName=\"sycad_contact_country_syctr\" placeholder=\"Select country\" valueKey=\"_id\"\n                      labelKey=\"syctr_country_iso_name\" [searchable]=\"true\" (searchChange)=\"onCountrySearch($event, i)\"\n                      [loading]=\"addressCountriesLoading()[i] || false\" size=\"sm\">\n                    </cide-ele-select>\n                  </div>\n                </div>\n\n                <!-- Right Side: Address Textarea (1/4 width, spans 2 rows) -->\n                <div class=\"lg:tw-col-span-1 lg:tw-row-span-2 tw-flex tw-flex-col\">\n                  <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\n                    placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"4\" size=\"sm\"\n                    class=\"tw-h-full\">\n                  </cide-ele-textarea>\n                </div>\n              </div>\n\n              <!-- Contact Details: Primary Phone, Alt Phone, Fax, Primary Email in 4 columns -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Primary Phone\" formControlName=\"sycad_contact_phone\" type=\"tel\"\n                  placeholder=\"Primary phone\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Alternate Phone\" formControlName=\"sycad_contact_phone_alt\" type=\"tel\"\n                  placeholder=\"Alternate phone\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Fax Number\" formControlName=\"sycad_contact_fax\" placeholder=\"Fax number\"\n                  size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Primary Email\" formControlName=\"sycad_contact_email\" type=\"email\"\n                  placeholder=\"Primary email\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Alternate Email in single row -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                <cide-ele-input label=\"Alternate Email\" formControlName=\"sycad_contact_email_alt\" type=\"email\"\n                  placeholder=\"Alternate email address\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('documents') {\n      <!-- Documents Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\" [disabled]=\"!hasAddDocumentRights()\">\n            Add Document\n          </button>\n        </div>\n        <div formArrayName=\"core_user_documents\">\n          @for (doc of documents(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n            <div\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n                {{ getDocumentTypeLabel(i) || ('Document ' + (i + 1)) }}\n              </h4>\n              <div class=\"tw-flex tw-gap-2\">\n                @if (doc?._id) {\n                <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"shareDocumentRights(i)\"\n                  leftIcon=\"share\">\n                  Share\n                </button>\n                }\n              </div>\n            </div>\n            <div class=\"tw-p-4\">\n              <!-- Main Layout: Inputs on Left, File Upload on Right -->\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-3 tw-gap-4\">\n                \n                <!-- Left Side: Document Information (2/3 width) -->\n                <div class=\"lg:tw-col-span-2\">\n                  <!-- Row 1: Document Type, Document Number, Name as per Document -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                    <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\n                      formControlName=\"syusd_document_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onDocumentTypeChange(i)\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"Document Number\" formControlName=\"syusd_doc_number\"\n                      placeholder=\"Document number\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"Name as per Document\" formControlName=\"syusd_doc_name_as_per_doc\"\n                      placeholder=\"Name on document\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 2: Issue Date, Expiry Date, Photo Group -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                    <cide-ele-input label=\"Issue Date\" formControlName=\"syusd_doc_issue_date\"\n                      [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"Expiry Date\" formControlName=\"syusd_doc_expiry_date\"\n                      [id]=\"'syusd_doc_expiry_date['+i+']'\" type=\"date\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 3: Verification Status, KYC Status -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                    <cide-ele-select label=\"Verification Status\" [options]=\"documentVerificationStatusOptions()\"\n                      formControlName=\"syusd_doc_verification_status_id_sygms\" placeholder=\"Select status\"\n                      size=\"sm\" valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n\n                    <cide-ele-select label=\"KYC Status\" [options]=\"documentKycStatusOptions()\"\n                      formControlName=\"syusd_doc_kyc_status_id_sygms\" placeholder=\"Select KYC status\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n                  </div>\n                </div>\n\n                <!-- Right Side: File Upload (1/3 width) -->\n                <div class=\"lg:tw-col-span-1\">\n                  <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-3 tw-h-full\">\n                    \n                    <!-- File Upload Input -->\n                    <cide-ele-file-input\n                      [id]=\"'document-files-' + i\"\n                      [multiple]=\"true\"\n                      formControlName=\"syusd_photo_group_id_cyfm\"\n                      [accept]=\"'.pdf,.jpg,.jpeg,.png,.doc,.docx'\"\n                      [autoUpload]=\"true\"\n                      [uploadData]=\"getDocumentUploadData(i)\"\n                      (change)=\"onDocumentFilesSelected($event, i)\"\n                      (uploadSuccess)=\"onDocumentUploadSuccess($event, i)\"\n                      (uploadError)=\"onDocumentUploadError($event, i)\"\n                      (uploadProgressChange)=\"onDocumentUploadProgress($event, i)\"\n                      class=\"tw-mb-3\"\n                      size=\"sm\">\n                    </cide-ele-file-input>\n\n                    <!-- Upload Status -->\n                    <!-- Upload status is now handled by the file input component itself -->\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('family') {\n      <!-- Family Details Section - Compact Design -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-3 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\" [disabled]=\"!hasAddFamilyDetailRights()\">\n            Add Family Member\n          </button>\n        </div>\n\n        <div formArrayName=\"core_user_family_details\">\n          @for (family of familyDetails(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg tw-mb-4 tw-overflow-hidden tw-transition-all tw-duration-200 hover:tw-shadow-md tw-shadow-sm\">\n            \n            <!-- Compact Header -->\n            <div class=\"tw-bg-gray-50 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-medium\">Family Member {{ i + 1 }}</h4>\n              <div class=\"tw-flex tw-gap-2\">\n                @if (family?._id) {\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareFamilyDetailRights(i)\"\n                  leftIcon=\"share\">\n                  Share\n                </button>\n                }\n                @if (!family?._id) {\n                <button cideEleButton variant=\"danger\" size=\"xs\" type=\"button\" (click)=\"removeFamilyDetail(i)\" leftIcon=\"delete\">\n                  Remove\n                </button>\n                }\n              </div>\n            </div>\n            \n            <!-- Compact Form Content - 3 inputs per row -->\n            <div class=\"tw-p-4\">\n              <!-- Row 1: Name, User, and Combined Relationship/Active Status (33.33% each) -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Family Member Name\" formControlName=\"syfdl_family_member_name\"\n                  placeholder=\"Enter family member full name\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-select label=\"Family Member User\" [options]=\"userOptions(i)\"\n                  formControlName=\"syfdl_family_member_id_user\" placeholder=\"Select family member user\" size=\"sm\"\n                  valueKey=\"_id\" labelKey=\"user_fullname\" [searchable]=\"true\"\n                  [loading]=\"userSearchLoading()[i] || false\" (searchChange)=\"onUserSearchChange($event, i)\"\n                  (change)=\"onUserSelectionChange($event, i)\">\n                </cide-ele-select>\n\n                <!-- Combined Relationship and Active Status (33.33%) -->\n                <div class=\"tw-flex tw-flex-row tw-gap-2 tw-items-end\">\n                  <div class=\"tw-flex-1\">\n                    <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\n                      formControlName=\"syfdl_relationship_id_sygms\" placeholder=\"Select relationship\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n                  </div>\n\n                  <div class=\"tw-flex tw-items-center tw-pt-1 tw-flex-shrink-0\">\n                    <cide-ele-input formControlName=\"syfdl_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Row 2: Blood Group, DOB, and Phone -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\n                  formControlName=\"syfdl_blood_group_sygms\" placeholder=\"Select blood group\" size=\"sm\" valueKey=\"_id\"\n                  labelKey=\"sygms_title\">\n                </cide-ele-select>\n\n                <cide-ele-input label=\"Date of Birth\" formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"sm\"\n                  [id]=\"'syfdl_family_member_dob['+i+']'\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Phone\" formControlName=\"syfdl_contact_phone\" type=\"tel\"\n                  placeholder=\"Enter contact phone\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Row 3: Email, Email ID, and Contact Number -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\" type=\"email\"\n                  placeholder=\"Enter contact email\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\" type=\"email\"\n                  placeholder=\"Enter contact email ID\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\" type=\"tel\"\n                  placeholder=\"Enter contact number\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n      }\n    </div>\n\n    <!-- Form Actions -->\n    <div\n      class=\"tw-flex tw-justify-between tw-items-center tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\n      <!-- Error Display Component -->\n      <div class=\"tw-flex-1\">\n        <cide-form-field-error [formGroup]=\"userMasterForm\"></cide-form-field-error>\n      </div>\n\n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-gap-4\">\n      <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n        [disabled]=\"loading()\">\n        Reset Form\n      </button>\n\n      <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\n        [loading]=\"loading()\" leftIcon=\"save\">\n        Save User Master\n      </button>\n      </div>\n    </div>\n  </form>\n</div>\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers for Role Permissions Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3 tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      @if (row.syme_type === 'module') {\n      <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">folder</cide-ele-icon>\n      } @else if (row.syme_type === 'section') {\n      <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">folder_open</cide-ele-icon>\n      } @else if (row.syme_type === 'menu') {\n      <cide-ele-icon class=\"tw-text-purple-600 tw-w-4 tw-h-4\">menu</cide-ele-icon>\n      } @else {\n      <cide-ele-icon class=\"tw-text-gray-600 tw-w-4 tw-h-4\">description</cide-ele-icon>\n      }\n    </div>\n\n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.syme_title\">\n          {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n        </div>\n        <!-- Green pill indicator for parent menus with child permissions -->\n        @if (row.syme_type === 'module' || row.syme_type === 'section') {\n        @if (hasChildMenusWithPermissions(row._id)) {\n        <span\n          class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-whitespace-nowrap\">\n          Assigned\n        </span>\n        }\n        }\n      </div>\n      @if (row.permission?.sygms_name) {\n      <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" [title]=\"row.permission?.sygms_name\">\n        {{ row.permission?.sygms_name }}\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-justify-center\">\n    @if (row.syme_type === 'module') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n      Module\n    </span>\n    } @else if (row.syme_type === 'section') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n      Section\n    </span>\n    } @else if (row.syme_type === 'menu') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-purple-100 tw-text-purple-800\">\n      Menu\n    </span>\n    } @else {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800\">\n      {{ row.syme_type || 'Unknown' }}\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n    @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n    <div class=\"tw-flex tw-items-center tw-space-x-1\">\n      <div class=\"tw-flex tw-items-center tw-space-x-1\">\n        <input type=\"checkbox\" [checked]=\"isPermissionSelected(row._id, permissionId)\" [disabled]=\"true\"\n          class=\"tw-h-4 tw-w-4 tw-text-blue-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-blue-500\">\n        <label class=\"tw-text-xs tw-text-gray-700\">\n          {{ getPermissionById(permissionId)?.sygms_title || 'Unknown' }}\n        </label>\n      </div>\n    </div>\n    }\n    } @else {\n    <!-- Show green checkmark for parent menus with child permissions -->\n    @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n    @if (hasChildMenusWithPermissions(row._id)) {\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\">\n      <cide-ele-icon class=\"tw-text-green-600\" size=\"xs\">\n        check\n      </cide-ele-icon>\n    </div>\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n    }\n  </div>\n</ng-template>\n\n<!-- Menu Rights Permissions Renderer Template -->\n<ng-template #menuRightsPermissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    <!-- Role Rights Display -->\n    @if (row.role_rights && row.role_rights.length > 0) {\n    <div class=\"tw-mb-2\">\n      <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Role Rights:</div>\n      <div class=\"tw-flex tw-flex-wrap tw-gap-1\">\n        @for (right of row.role_rights; track $index) {\n        <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-blue-100 tw-text-blue-800 tw-rounded\">\n          {{ right }}\n        </span>\n        }\n      </div>\n    </div>\n    }\n\n\n    <!-- Exception Indicator -->\n    @if (row.hasException) {\n    <div class=\"tw-mt-2\">\n      <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-yellow-100 tw-text-yellow-800 tw-rounded\">\n        Override\n      </span>\n    </div>\n    } @else {\n    <div class=\"tw-mt-2\">\n      <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\n    </div>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row._permissionValues && Object.keys(row._permissionValues).length > 0) {\n    @for (permissionId of Object.keys(row._permissionValues); track permissionId) {\n    <div class=\"tw-flex tw-items-center tw-space-x-2\">\n      <cide-ele-input type=\"checkbox\" [ngModel]=\"row._permissionValues[permissionId].checked\"\n        (ngModelChange)=\"onPermissionChangeSafe($event, row, permissionId)\"\n        [id]=\"'permission-' + row._id + '-' + permissionId\" class=\"tw-h-4 tw-w-4\">\n      </cide-ele-input>\n      <label [for]=\"'permission-' + row._id + '-' + permissionId\" \n        class=\"tw-text-xs tw-cursor-pointer\"\n        [ngClass]=\"{\n          'tw-text-gray-700': row._permissionValues[permissionId].modified === row._permissionValues[permissionId].actual,\n          'tw-text-blue-600 tw-font-semibold': row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual\n        }\">\n        {{ row._permissionValues[permissionId].permission?.sygms_title }}\n        @if (row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual) {\n        <span class=\"tw-text-xs tw-text-orange-500 tw-ml-1\" title=\"Modified from role permission\">\n          ({{ row._permissionValues[permissionId].actual ? '\u2713' : '\u2717' }})\n        </span>\n        }\n      </label>\n    </div>\n    }\n    } @else {\n    <!-- No permissions to display - show N/A (permissions are already loaded, just empty) -->\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n  </div>\n</ng-template>", styles: [":host ::ng-deep .entity-mapping-card .cide-card-header{min-height:2.5rem!important;padding:.75rem 1rem!important}:host ::ng-deep .entity-mapping-card .cide-card-header-content{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}:host ::ng-deep .entity-mapping-card .cide-card-actions{max-width:60%;flex-wrap:wrap;gap:.375rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleTabComponent, selector: "cide-ele-tab", inputs: ["tabs", "activeTabId", "size", "variant", "fullWidth", "disabled"], outputs: ["tabChange"] }, { kind: "component", type: CideEleFileInputComponent, selector: "cide-ele-file-input", inputs: ["label", "accept", "multiple", "disabled", "required", "helperText", "errorText", "showPreview", "previewWidth", "previewHeight", "previewBoxMode", "showFileName", "placeholderText", "placeholderIcon", "autoUpload", "uploadData", "showFloatingUploader", "floatingUploaderGroupId"], outputs: ["fileChange", "uploadSuccess", "uploadError", "uploadProgressChange"] }, { kind: "directive", type: CideEleFileImageDirective, selector: "[cideEleFileImage]", inputs: ["fileId", "altText"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleToastNotificationComponent, selector: "cide-ele-toast-notification" }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: CideEleCardComponent, selector: "cide-ele-card", inputs: ["title", "subtitle", "cardConfig"], outputs: ["stateChange", "collapsed", "minimized", "maximized", "removed", "headerClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserCreateComponent, decorators: [{
             type: Component,
@@ -16346,8 +16386,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideEleDataGridComponent,
                         CideEleToastNotificationComponent,
                         CideFormFieldErrorComponent,
-                        CideLytSharedWrapperComponent
-                    ], template: "<!-- \n  ENTERPRISE USER MASTER FORM\n  \n  Enterprise-Level Styling with Tailwind CSS\n  Features: Responsive grids, proper typography, enhanced user experience\n-->\n\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: pageCode() }\" [breadcrumb_data]=\"breadcrumbData()\">\n  <div class=\"tw-w-full tw-h-full tw-p-1 tw-pt-2\">\n    <!-- Toast Notifications -->\n    <cide-ele-toast-notification></cide-ele-toast-notification>\n    \n    <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\n      (ngSubmit)=\"onSubmit()\">\n\n\n    <!-- User Context Header -->\n    <div\n      class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-indigo-50 tw-border tw-border-blue-200 tw-rounded-md tw-p-1 tw-mb-2 tw-shadow-sm\">\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\n        <!-- User Basic Info Display -->\n        <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\n          <!-- Profile Photo Preview -->\n          <div class=\"tw-flex tw-items-center tw-gap-2\">\n            <div\n              class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-border tw-border-blue-200 tw-flex tw-items-center tw-justify-center tw-overflow-hidden\">\n              @if (userMasterForm.get('user_photo_id_cyfm')?.value) {\n              <img cideEleFileImage [fileId]=\"userMasterForm.get('user_photo_id_cyfm')?.value\"\n                [altText]=\"'Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover\">\n              } @else {\n              <cide-ele-icon name=\"person\" class=\"tw-w-5 tw-h-5 tw-text-blue-600\">\n              </cide-ele-icon>\n              }\n            </div>\n            <div class=\"tw-flex tw-flex-col\">\n              <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\n                {{ getUserFullName() || 'New User' }}\n              </span>\n              <span class=\"tw-text-xs tw-text-blue-600\">\n                {{ getUserUsername() || 'Username not set' }}\n              </span>\n            </div>\n          </div>\n\n          <!-- Contact Info -->\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">email</cide-ele-icon>\n              <span>{{ getUserEmail() || 'Email not set' }}</span>\n            </div>\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">phone</cide-ele-icon>\n              <span>{{ getUserMobile() || 'Mobile not set' }}</span>\n            </div>\n          </div>\n\n          <!-- Active Status -->\n          <div class=\"tw-flex tw-items-center tw-gap-1\">\n            @if (getUserActiveStatus()) {\n            <span\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-700\">\n              <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">check_circle</cide-ele-icon>\n              Active\n            </span>\n            } @else {\n            <span\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-700\">\n              <cide-ele-icon variant=\"red\" size=\"xs\" class=\"tw-mr-1\">cancel</cide-ele-icon>\n              Inactive\n            </span>\n            }\n          </div>\n        </div>\n\n        <!-- Entity Info -->\n        <div class=\"tw-flex tw-items-center tw-gap-2\">\n          @if (hasDefaultEntity()) {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-blue-700\">\n            <cide-ele-icon variant=\"blue\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-font-medium\">{{ getDefaultEntityName() }}</span>\n          </div>\n          } @else {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-500\">\n            <cide-ele-icon variant=\"gray\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-italic\">No entity</span>\n          </div>\n          }\n\n          <span class=\"tw-text-xs tw-text-gray-600 tw-px-2 tw-py-1 tw-bg-gray-100 tw-rounded\">\n            {{ getEntityMappingCount() }} mapping(s)\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Tab Navigation -->\n    <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\n      <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\n        (tabChange)=\"onTabChange($event)\">\n      </cide-ele-tab>\n    </div>\n\n    <!-- Tab Content -->\n    <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n      @switch (activeTab()) {\n\n      @case ('basic') {\n      <!-- User Basic Information Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n        <!-- Top Section: Form Fields on Left, Profile Photo on Right -->\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4 tw-mb-4\">\n          <!-- Left Side: Form Fields -->\n          <div class=\"tw-space-y-4\">\n            <!-- Name Fields - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\n              <cide-ele-input id=\"user_firstname\" label=\"First Name\" formControlName=\"user_firstname\"\n                placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\n                placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_lastname\" label=\"Last Name\" formControlName=\"user_lastname\"\n                placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_fullname\" label=\"Full Name (Auto-generated)\" formControlName=\"user_fullname\"\n                placeholder=\"Auto-generated from name fields or enter manually\" [maxlength]=\"62\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <!-- Contact Information - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\n              <cide-ele-input id=\"user_username\" label=\"Username\" formControlName=\"user_username\"\n                placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_emailid\" label=\"Email ID\" formControlName=\"user_emailid\" type=\"email\"\n                placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number\" formControlName=\"user_mobileno\" type=\"tel\"\n                placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <!-- User Type Mapping -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n              <cide-ele-select\n                id=\"syutm_user_type\"\n                label=\"User Type\"\n                placeholder=\"Select user type\"\n                [options]=\"userTypeOptions\"\n                valueKey=\"value\"\n                labelKey=\"label\"\n                formControlName=\"syutm_user_type\"\n                size=\"md\">\n              </cide-ele-select>\n\n              <cide-ele-input\n                id=\"syutm_type_specific_id\"\n                label=\"Type-Specific ID\"\n                placeholder=\"Enter type-specific ID (e.g., STU001, TCH001)\"\n                formControlName=\"syutm_type_specific_id\"\n                [maxlength]=\"50\"\n                size=\"md\">\n              </cide-ele-input>\n            </div>\n          </div>\n\n          <!-- Right Side: Profile Photo Upload -->\n          <div class=\"tw-flex tw-items-start tw-justify-center tw-p-0\">\n            <cide-ele-file-input id=\"user_photo_id_cyfm\" formControlName=\"user_photo_id_cyfm\" accept=\"image/*\"\n              [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\n              previewHeight=\"120px\" placeholderText=\"Upload Photo\" placeholderIcon=\"cloud_upload\" [autoUpload]=\"true\"\n              [uploadData]=\"getProfilePhotoUploadData()\" (uploadSuccess)=\"onProfilePhotoUploadSuccess($event)\"\n              (uploadError)=\"onProfilePhotoUploadError($event)\"\n              (uploadProgressChange)=\"onProfilePhotoUploadProgress($event)\">\n            </cide-ele-file-input>\n          </div>\n        </div>\n\n\n\n        <!-- Status Control -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-mb-2\">\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\n            <label\n              class=\"tw-flex tw-flex-col tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200 hover:tw-bg-blue-75\">\n              <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\n                class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\n                access and operations</span>\n            </label>\n          </div>\n        </div>\n      </div>\n      }\n\n      @case ('auth') {\n      <!-- Authentication Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <!-- Password Fields -->\n        @if (shouldShowPasswordFields()) {\n        <div class=\"tw-mb-4\">\n          <!-- Password Fields Header for Edit Mode -->\n          @if (isEditMode()) {\n          <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Update Password</h6>\n            <button type=\"button\"\n              class=\"tw-px-3 tw-py-1 tw-bg-gray-100 tw-text-gray-600 tw-border tw-border-gray-300 tw-rounded-md tw-text-xs tw-font-medium hover:tw-bg-gray-200 tw-transition-colors\"\n              (click)=\"cancelPasswordUpdate()\">\n              Cancel Password Update\n            </button>\n          </div>\n          }\n\n          <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6\">\n            <cide-ele-input id=\"user_password\" [label]=\"getPasswordFieldLabel()\" formControlName=\"user_password\"\n              type=\"password\" placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\n            </cide-ele-input>\n\n            <cide-ele-input id=\"user_confirm_password\" [label]=\"getPasswordConfirmLabel()\"\n              formControlName=\"user_confirm_password\" type=\"password\" placeholder=\"Confirm your password\" size=\"md\">\n            </cide-ele-input>\n          </div>\n        </div>\n        }\n\n        <!-- Password Update Option for Edit Mode -->\n        @if (isEditMode() && !shouldShowPasswordFields()) {\n        <div class=\"tw-mb-4\">\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-blue-800 tw-mb-2\">Password Update</h6>\n            <p class=\"tw-text-sm tw-text-blue-600 tw-mb-3\">Current password will be kept. Click below to change\n              password.</p>\n\n            @if (hasPasswordInput()) {\n            <div\n              class=\"tw-mb-3 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded tw-text-sm tw-text-yellow-700\">\n              <cide-ele-icon variant=\"yellow\" size=\"xs\" class=\"tw-mr-1\">warning</cide-ele-icon>\n              Password fields contain text. Click \"Change Password\" to manage existing input.\n            </div>\n            }\n\n            <button type=\"button\"\n              class=\"tw-px-4 tw-py-2 tw-bg-blue-100 tw-text-blue-700 tw-border tw-border-blue-300 tw-rounded-md tw-text-sm tw-font-medium hover:tw-bg-blue-200 tw-transition-colors\"\n              (click)=\"triggerPasswordUpdate()\">\n              @if (hasPasswordInput()) {\n              Manage Password Fields\n              } @else {\n              Change Password\n              }\n            </button>\n          </div>\n        </div>\n        }\n\n        <!-- Password Options -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-gap-4 tw-mb-4\">\n          <div class=\"tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\n            <label\n              class=\"tw-flex tw-flex-col tw-gap-2 tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200\">\n              <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\n                formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\n                password on next login</span>\n            </label>\n          </div>\n        </div>\n\n      </div>\n      }\n\n      @case ('roles') {\n      <!-- Entity, Roles & Permissions Mapping Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n\n\n        <!-- Important Note -->\n        <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-2 tw-mb-4\">\n          <div class=\"tw-flex tw-items-start tw-gap-3\">\n            <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\n            <div class=\"tw-flex-1\">\n              <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\n              <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role\n                mappings below. At least one entity mapping is required for user access.</p>\n              @if (hasDefaultEntity()) {\n              <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\n                <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\n                <span class=\"tw-text-sm tw-text-amber-800\">\n                  <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\n                </span>\n              </div>\n              } @else {\n              <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\n                \u26A0\uFE0F No default entity selected. Please set one entity as default.\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <!-- Entity-Role Mapping Section -->\n        <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\n          <div>\n            <h4 class=\"tw-text-sm tw-text-left tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\n            <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\n          </div>\n          <div class=\"tw-flex tw-flex-col tw-items-end\">\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\"\n              leftIcon=\"add\" [disabled]=\"isAllEntitiesMapped()\">\n              Add Entity Mapping\n            </button>\n\n            @if (isAllEntitiesMapped()) {\n            <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-md tw-max-w-xs\">\n              <p class=\"tw-text-xs tw-text-blue-700\">\n                <cide-ele-icon variant=\"info\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n                All available entities are already mapped.\n              </p>\n            </div>\n            }\n          </div>\n        </div>\n\n        <div formArrayName=\"core_entity_mapping\">\n            @for (mapping of entityMappings(); track $index; let i = $index) {\n            <div class=\"tw-bg-white tw-border tw-border-blue-200 tw-rounded-xl tw-mb-6 tw-overflow-hidden tw-shadow-sm\"\n              [formGroupName]=\"i\">\n              <div\n                class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-blue-100 tw-px-6 tw-py-3 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-blue-200\">\n                <div class=\"tw-flex tw-items-center tw-gap-2\">\n                  <h5 class=\"tw-m-0 tw-text-blue-800 tw-text-sm tw-font-semibold\">Entity Mapping {{ i + 1 }}</h5>\n                  @if (mapping.syenm_isdefault) {\n                  <span\n                    class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n                    <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">star</cide-ele-icon>\n                    Default\n                  </span>\n                  }\n                </div>\n                <div class=\"tw-flex tw-items-center tw-gap-2 tw-flex-wrap\">\n                  <!-- User Type Mappings Display -->\n                  @if (allUserTypeMappings().length > 0) {\n                    @for (typeMapping of allUserTypeMappings(); track typeMapping._id || typeMapping.syutm_type_specific_id) {\n                      <div class=\"tw-flex tw-items-center tw-gap-1.5\">\n                        <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n                          {{ typeMapping.syutm_user_type }}\n                        </span>\n                        @if (typeMapping.syutm_isactive) {\n                          <span class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-[10px] tw-font-medium tw-bg-green-100 tw-text-green-800\">\n                            Active\n                          </span>\n                        }\n                        @if (isUserTypeMappingForEntity(typeMapping, getEntityIdFromMapping(i))) {\n                          <span class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-[10px] tw-font-medium tw-bg-green-50 tw-text-green-700 tw-border tw-border-green-200\">\n                            This Entity\n                          </span>\n                        } @else {\n                          <span class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-[10px] tw-font-medium tw-bg-gray-100 tw-text-gray-600\">\n                            Other Entity\n                          </span>\n                        }\n                        @if (typeMapping.syutm_type_specific_id) {\n                          <span class=\"tw-text-[10px] tw-text-gray-600 tw-font-mono\" [title]=\"'ID: ' + typeMapping.syutm_type_specific_id\">\n                            ID: {{ typeMapping.syutm_type_specific_id }}\n                          </span>\n                        }\n                      </div>\n                    }\n                  }\n                  @if (!mapping?._id) {\n                    <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeEntityMapping(i)\"\n                      leftIcon=\"delete\">\n                      Remove\n                    </button>\n                  }\n                </div>\n              </div>\n\n              <div>\n                <!-- Entity and Role Selection -->\n                <div class=\"tw-grid tw-px-3 tw-py-1 tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-mb-4\">\n                  <div>\n                    <cide-ele-select label=\"Entity\" [options]=\"getFilteredEntityOptions(i)\"\n                      formControlName=\"syenm_entity_id_syen\" valueKey=\"_id\" labelKey=\"syen_name\"\n                      placeholder=\"Select entity\" size=\"md\" (change)=\"onEntityChange(i, $event)\">\n                    </cide-ele-select>\n\n                    @if (isAllEntitiesSelected(i)) {\n                    <div class=\"tw-mt-2 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded-md\">\n                      <p class=\"tw-text-xs tw-text-yellow-700\">\n                        <cide-ele-icon variant=\"warning\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n                        All entities are already mapped. Remove another mapping to add this one.\n                      </p>\n                    </div>\n                    }\n                  </div>\n                  <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\n                    formControlName=\"syenm_role_id_syusrol\" valueKey=\"_id\" labelKey=\"syusrol_role_name\"\n                    placeholder=\"Select role for this entity\" size=\"md\" (change)=\"onRoleChange(i, $event)\">\n                  </cide-ele-select>\n                </div>\n\n\n                <!-- Entity-Specific Details and Active Period - All in One Row -->\n                <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4 tw-mb-4\">\n                  <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\n                    formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\"\n                    labelKey=\"sydept_name\" placeholder=\"Select department\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-select label=\"Designation for this Entity\" [options]=\"getDesignationOptionsForEntity(i)\"\n                    valueKey=\"_id\" labelKey=\"sydsg_name\" formControlName=\"syenm_designation_id_sydsg\"\n                    placeholder=\"Select designation\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-input label=\"Active From\" [id]=\"'syenm_activefrom['+i+']'\"\n                    formControlName=\"syenm_activefrom\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n\n                  <cide-ele-input label=\"Active Until\" [id]=\"'syenm_activeupto['+i+']'\"\n                    formControlName=\"syenm_activeupto\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n                </div>\n\n                <!-- Mapping Settings -->\n                <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-mb-4\">\n                  <div class=\"tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded-lg\">\n                    <cide-ele-input type=\"checkbox\" label=\"Default Entity\" formControlName=\"syenm_isdefault\"\n                      (change)=\"onDefaultEntityChange(i, $event)\" class=\"tw-h-5 tw-accent-green-500\" />\n                    <span class=\"tw-text-xs tw-text-green-600 tw-block tw-mt-1\">Set as user's default entity (only one\n                      allowed)</span>\n                  </div>\n\n                  <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n                    <cide-ele-input type=\"checkbox\" label=\"Active Mapping\" formControlName=\"syenm_isactive\"\n                      class=\"tw-h-5 tw-accent-blue-500\" />\n                    <span class=\"tw-text-xs tw-text-blue-600 tw-block tw-mt-1\">Enable this entity mapping</span>\n                  </div>\n                </div>\n\n                <!-- Menu Rights Grid for this Entity-Role -->\n                <div class=\"tw-border-t tw-border-gray-200\">\n\n                  @if (getMenuRightsForMapping(i).length > 0) {\n                  <!-- Menu Rights Tree Grid -->\n\n                  <cide-ele-data-grid [config]=\"getMenuRightsGridConfig(i)\"\n                    [templateRenderers]=\"getMenuRightsTemplateRenderers(i)\"\n                    (gridEvent)=\"onMenuRightsGridEvent($event, i)\" class=\"tw-h-96 tw-w-full\">\n                  </cide-ele-data-grid>\n\n                  } @else {\n                  <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\n                    <div class=\"tw-text-gray-400 tw-mb-3\">\n                      <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\n                    </div>\n                    <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\n                    <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to\n                      automatically load\n                      menu rights for this mapping.</p>\n                  </div>\n                  }\n                </div>\n              </div>\n            </div>\n            }\n          </div>\n\n          @if (entityMappings().length === 0) {\n          <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\n            <div class=\"tw-text-blue-400 tw-mb-3\">\n              <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\n            </div>\n            <h4 class=\"tw-text-sm tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\n            <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and\n              permissions for different entities.</p>\n            <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\"\n              (click)=\"addEntityMapping()\" leftIcon=\"add\">\n              Add First Entity Mapping\n            </button>\n          </div>\n          }\n        </div>\n      }\n\n      @case ('addresses') {\n      <!-- Contact Addresses Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end\">\n          <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\n              leftIcon=\"add\" [disabled]=\"!hasAddContactAddressRights()\">\n              Add New Address\n            </button>\n          </div>\n        </div>\n\n        <div formArrayName=\"core_user_contact_addresses\">\n          @for (address of contactAddresses(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n            <div\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <!-- Use address type as header instead of generic \"Address X\" -->\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n                {{ getAddressTypeLabel(i) || ('Address ' + (i + 1)) }}\n              </h4>\n              <div class=\"tw-flex tw-items-center tw-gap-2\">\n                @if (isAddressOwner(i)) {\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareAddress(i)\"\n                  leftIcon=\"share\" class=\"tw-text-blue-600 hover:tw-text-blue-700\">\n                  Share\n                </button>\n                }\n                @if (!address?._id) {\n                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\n                  leftIcon=\"delete\">\n                  Remove\n                </button>\n                }\n              </div>\n            </div>\n            <div class=\"tw-p-4\">\n              <!-- Main Layout: Inputs on Left, Address Textarea on Right -->\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n                \n                <!-- Left Side: Input Fields (3/4 width) -->\n                <div class=\"lg:tw-col-span-3\">\n                  <!-- Row 1: Address Type, Contact Person -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mb-3\">\n                    <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\" id=\"sycad_address_type_id_sygms\"\n                      formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onAddressTypeChange(i)\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"Contact Person\" formControlName=\"sycad_contact_person_name\"\n                      placeholder=\"Enter contact person\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 2: Postal Code, City, State, Country -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\n                    <cide-ele-select label=\"Postal Code\" [options]=\"addressPostalCodes()[i] || []\"\n                      formControlName=\"sycad_contact_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\n                      [loading]=\"addressPostalCodesLoading()[i] || false\" (searchChange)=\"onPostalCodeSearch($event, i)\"\n                      (change)=\"onPostalCodeSelection($event, i)\" size=\"sm\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"City\" formControlName=\"sycad_contact_city_sypin\" placeholder=\"Enter city\"\n                      size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"State\" formControlName=\"sycad_contact_state_sypin\" placeholder=\"Enter state\"\n                      size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-select label=\"Country\" [options]=\"addressCountries()[i] || []\"\n                      formControlName=\"sycad_contact_country_syctr\" placeholder=\"Select country\" valueKey=\"_id\"\n                      labelKey=\"syctr_country_iso_name\" [searchable]=\"true\" (searchChange)=\"onCountrySearch($event, i)\"\n                      [loading]=\"addressCountriesLoading()[i] || false\" size=\"sm\">\n                    </cide-ele-select>\n                  </div>\n                </div>\n\n                <!-- Right Side: Address Textarea (1/4 width, spans 2 rows) -->\n                <div class=\"lg:tw-col-span-1 lg:tw-row-span-2 tw-flex tw-flex-col\">\n                  <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\n                    placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"4\" size=\"sm\"\n                    class=\"tw-h-full\">\n                  </cide-ele-textarea>\n                </div>\n              </div>\n\n              <!-- Contact Details: Primary Phone, Alt Phone, Fax, Primary Email in 4 columns -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Primary Phone\" formControlName=\"sycad_contact_phone\" type=\"tel\"\n                  placeholder=\"Primary phone\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Alternate Phone\" formControlName=\"sycad_contact_phone_alt\" type=\"tel\"\n                  placeholder=\"Alternate phone\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Fax Number\" formControlName=\"sycad_contact_fax\" placeholder=\"Fax number\"\n                  size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Primary Email\" formControlName=\"sycad_contact_email\" type=\"email\"\n                  placeholder=\"Primary email\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Alternate Email in single row -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                <cide-ele-input label=\"Alternate Email\" formControlName=\"sycad_contact_email_alt\" type=\"email\"\n                  placeholder=\"Alternate email address\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('documents') {\n      <!-- Documents Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\" [disabled]=\"!hasAddDocumentRights()\">\n            Add Document\n          </button>\n        </div>\n        <div formArrayName=\"core_user_documents\">\n          @for (doc of documents(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n            <div\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n                {{ getDocumentTypeLabel(i) || ('Document ' + (i + 1)) }}\n              </h4>\n              <div class=\"tw-flex tw-gap-2\">\n                @if (doc?._id) {\n                <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"shareDocumentRights(i)\"\n                  leftIcon=\"share\">\n                  Share\n                </button>\n                }\n              </div>\n            </div>\n            <div class=\"tw-p-4\">\n              <!-- Main Layout: Inputs on Left, File Upload on Right -->\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-3 tw-gap-4\">\n                \n                <!-- Left Side: Document Information (2/3 width) -->\n                <div class=\"lg:tw-col-span-2\">\n                  <!-- Row 1: Document Type, Document Number, Name as per Document -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                    <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\n                      formControlName=\"syusd_document_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onDocumentTypeChange(i)\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"Document Number\" formControlName=\"syusd_doc_number\"\n                      placeholder=\"Document number\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"Name as per Document\" formControlName=\"syusd_doc_name_as_per_doc\"\n                      placeholder=\"Name on document\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 2: Issue Date, Expiry Date, Photo Group -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                    <cide-ele-input label=\"Issue Date\" formControlName=\"syusd_doc_issue_date\"\n                      [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"Expiry Date\" formControlName=\"syusd_doc_expiry_date\"\n                      [id]=\"'syusd_doc_expiry_date['+i+']'\" type=\"date\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 3: Verification Status, KYC Status -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                    <cide-ele-select label=\"Verification Status\" [options]=\"documentVerificationStatusOptions()\"\n                      formControlName=\"syusd_doc_verification_status_id_sygms\" placeholder=\"Select status\"\n                      size=\"sm\" valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n\n                    <cide-ele-select label=\"KYC Status\" [options]=\"documentKycStatusOptions()\"\n                      formControlName=\"syusd_doc_kyc_status_id_sygms\" placeholder=\"Select KYC status\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n                  </div>\n                </div>\n\n                <!-- Right Side: File Upload (1/3 width) -->\n                <div class=\"lg:tw-col-span-1\">\n                  <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-3 tw-h-full\">\n                    \n                    <!-- File Upload Input -->\n                    <cide-ele-file-input\n                      [id]=\"'document-files-' + i\"\n                      [multiple]=\"true\"\n                      formControlName=\"syusd_photo_group_id_cyfm\"\n                      [accept]=\"'.pdf,.jpg,.jpeg,.png,.doc,.docx'\"\n                      [autoUpload]=\"true\"\n                      [uploadData]=\"getDocumentUploadData(i)\"\n                      (change)=\"onDocumentFilesSelected($event, i)\"\n                      (uploadSuccess)=\"onDocumentUploadSuccess($event, i)\"\n                      (uploadError)=\"onDocumentUploadError($event, i)\"\n                      (uploadProgressChange)=\"onDocumentUploadProgress($event, i)\"\n                      class=\"tw-mb-3\"\n                      size=\"sm\">\n                    </cide-ele-file-input>\n\n                    <!-- Upload Status -->\n                    <!-- Upload status is now handled by the file input component itself -->\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('family') {\n      <!-- Family Details Section - Compact Design -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-3 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\" [disabled]=\"!hasAddFamilyDetailRights()\">\n            Add Family Member\n          </button>\n        </div>\n\n        <div formArrayName=\"core_user_family_details\">\n          @for (family of familyDetails(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg tw-mb-4 tw-overflow-hidden tw-transition-all tw-duration-200 hover:tw-shadow-md tw-shadow-sm\">\n            \n            <!-- Compact Header -->\n            <div class=\"tw-bg-gray-50 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-medium\">Family Member {{ i + 1 }}</h4>\n              <div class=\"tw-flex tw-gap-2\">\n                @if (family?._id) {\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareFamilyDetailRights(i)\"\n                  leftIcon=\"share\">\n                  Share\n                </button>\n                }\n                @if (!family?._id) {\n                <button cideEleButton variant=\"danger\" size=\"xs\" type=\"button\" (click)=\"removeFamilyDetail(i)\" leftIcon=\"delete\">\n                  Remove\n                </button>\n                }\n              </div>\n            </div>\n            \n            <!-- Compact Form Content - 3 inputs per row -->\n            <div class=\"tw-p-4\">\n              <!-- Row 1: Name, User, and Combined Relationship/Active Status (33.33% each) -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Family Member Name\" formControlName=\"syfdl_family_member_name\"\n                  placeholder=\"Enter family member full name\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-select label=\"Family Member User\" [options]=\"userOptions(i)\"\n                  formControlName=\"syfdl_family_member_id_user\" placeholder=\"Select family member user\" size=\"sm\"\n                  valueKey=\"_id\" labelKey=\"user_fullname\" [searchable]=\"true\"\n                  [loading]=\"userSearchLoading()[i] || false\" (searchChange)=\"onUserSearchChange($event, i)\"\n                  (change)=\"onUserSelectionChange($event, i)\">\n                </cide-ele-select>\n\n                <!-- Combined Relationship and Active Status (33.33%) -->\n                <div class=\"tw-flex tw-flex-row tw-gap-2 tw-items-end\">\n                  <div class=\"tw-flex-1\">\n                    <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\n                      formControlName=\"syfdl_relationship_id_sygms\" placeholder=\"Select relationship\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n                  </div>\n\n                  <div class=\"tw-flex tw-items-center tw-pt-1 tw-flex-shrink-0\">\n                    <cide-ele-input formControlName=\"syfdl_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Row 2: Blood Group, DOB, and Phone -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\n                  formControlName=\"syfdl_blood_group_sygms\" placeholder=\"Select blood group\" size=\"sm\" valueKey=\"_id\"\n                  labelKey=\"sygms_title\">\n                </cide-ele-select>\n\n                <cide-ele-input label=\"Date of Birth\" formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"sm\"\n                  [id]=\"'syfdl_family_member_dob['+i+']'\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Phone\" formControlName=\"syfdl_contact_phone\" type=\"tel\"\n                  placeholder=\"Enter contact phone\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Row 3: Email, Email ID, and Contact Number -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\" type=\"email\"\n                  placeholder=\"Enter contact email\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\" type=\"email\"\n                  placeholder=\"Enter contact email ID\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\" type=\"tel\"\n                  placeholder=\"Enter contact number\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n      }\n    </div>\n\n    <!-- Form Actions -->\n    <div\n      class=\"tw-flex tw-justify-between tw-items-center tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\n      <!-- Error Display Component -->\n      <div class=\"tw-flex-1\">\n        <cide-form-field-error [formGroup]=\"userMasterForm\"></cide-form-field-error>\n      </div>\n\n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-gap-4\">\n      <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n        [disabled]=\"loading()\">\n        Reset Form\n      </button>\n\n      <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\n        [loading]=\"loading()\" leftIcon=\"save\">\n        Save User Master\n      </button>\n      </div>\n    </div>\n  </form>\n</div>\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers for Role Permissions Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3 tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      @if (row.syme_type === 'module') {\n      <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">folder</cide-ele-icon>\n      } @else if (row.syme_type === 'section') {\n      <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">folder_open</cide-ele-icon>\n      } @else if (row.syme_type === 'menu') {\n      <cide-ele-icon class=\"tw-text-purple-600 tw-w-4 tw-h-4\">menu</cide-ele-icon>\n      } @else {\n      <cide-ele-icon class=\"tw-text-gray-600 tw-w-4 tw-h-4\">description</cide-ele-icon>\n      }\n    </div>\n\n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.syme_title\">\n          {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n        </div>\n        <!-- Green pill indicator for parent menus with child permissions -->\n        @if (row.syme_type === 'module' || row.syme_type === 'section') {\n        @if (hasChildMenusWithPermissions(row._id)) {\n        <span\n          class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-whitespace-nowrap\">\n          Assigned\n        </span>\n        }\n        }\n      </div>\n      @if (row.permission?.sygms_name) {\n      <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" [title]=\"row.permission?.sygms_name\">\n        {{ row.permission?.sygms_name }}\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-justify-center\">\n    @if (row.syme_type === 'module') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n      Module\n    </span>\n    } @else if (row.syme_type === 'section') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n      Section\n    </span>\n    } @else if (row.syme_type === 'menu') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-purple-100 tw-text-purple-800\">\n      Menu\n    </span>\n    } @else {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800\">\n      {{ row.syme_type || 'Unknown' }}\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n    @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n    <div class=\"tw-flex tw-items-center tw-space-x-1\">\n      <div class=\"tw-flex tw-items-center tw-space-x-1\">\n        <input type=\"checkbox\" [checked]=\"isPermissionSelected(row._id, permissionId)\" [disabled]=\"true\"\n          class=\"tw-h-4 tw-w-4 tw-text-blue-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-blue-500\">\n        <label class=\"tw-text-xs tw-text-gray-700\">\n          {{ getPermissionById(permissionId)?.sygms_title || 'Unknown' }}\n        </label>\n      </div>\n    </div>\n    }\n    } @else {\n    <!-- Show green checkmark for parent menus with child permissions -->\n    @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n    @if (hasChildMenusWithPermissions(row._id)) {\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\">\n      <cide-ele-icon class=\"tw-text-green-600\" size=\"xs\">\n        check\n      </cide-ele-icon>\n    </div>\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n    }\n  </div>\n</ng-template>\n\n<!-- Menu Rights Permissions Renderer Template -->\n<ng-template #menuRightsPermissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    <!-- Role Rights Display -->\n    @if (row.role_rights && row.role_rights.length > 0) {\n    <div class=\"tw-mb-2\">\n      <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Role Rights:</div>\n      <div class=\"tw-flex tw-flex-wrap tw-gap-1\">\n        @for (right of row.role_rights; track $index) {\n        <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-blue-100 tw-text-blue-800 tw-rounded\">\n          {{ right }}\n        </span>\n        }\n      </div>\n    </div>\n    }\n\n\n    <!-- Exception Indicator -->\n    @if (row.hasException) {\n    <div class=\"tw-mt-2\">\n      <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-yellow-100 tw-text-yellow-800 tw-rounded\">\n        Override\n      </span>\n    </div>\n    } @else {\n    <div class=\"tw-mt-2\">\n      <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\n    </div>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row._permissionValues && Object.keys(row._permissionValues).length > 0) {\n    @for (permissionId of Object.keys(row._permissionValues); track permissionId) {\n    <div class=\"tw-flex tw-items-center tw-space-x-2\">\n      <cide-ele-input type=\"checkbox\" [ngModel]=\"row._permissionValues[permissionId].checked\"\n        (ngModelChange)=\"onPermissionChangeSafe($event, row, permissionId)\"\n        [id]=\"'permission-' + row._id + '-' + permissionId\" class=\"tw-h-4 tw-w-4\">\n      </cide-ele-input>\n      <label [for]=\"'permission-' + row._id + '-' + permissionId\" \n        class=\"tw-text-xs tw-cursor-pointer\"\n        [ngClass]=\"{\n          'tw-text-gray-700': row._permissionValues[permissionId].modified === row._permissionValues[permissionId].actual,\n          'tw-text-blue-600 tw-font-semibold': row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual\n        }\">\n        {{ row._permissionValues[permissionId].permission?.sygms_title }}\n        @if (row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual) {\n        <span class=\"tw-text-xs tw-text-orange-500 tw-ml-1\" title=\"Modified from role permission\">\n          ({{ row._permissionValues[permissionId].actual ? '\u2713' : '\u2717' }})\n        </span>\n        }\n      </label>\n    </div>\n    }\n    } @else {\n    <!-- No permissions to display - show N/A (permissions are already loaded, just empty) -->\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n  </div>\n</ng-template>" }]
+                        CideLytSharedWrapperComponent,
+                        CideEleCardComponent
+                    ], template: "<!-- \n  ENTERPRISE USER MASTER FORM\n  \n  Enterprise-Level Styling with Tailwind CSS\n  Features: Responsive grids, proper typography, enhanced user experience\n-->\n\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: pageCode() }\" [breadcrumb_data]=\"breadcrumbData()\">\n  <div class=\"tw-w-full tw-h-full tw-p-1 tw-pt-2\">\n    <!-- Toast Notifications -->\n    <cide-ele-toast-notification></cide-ele-toast-notification>\n    \n    <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\n      (ngSubmit)=\"onSubmit()\">\n\n\n    <!-- User Context Header -->\n    <div\n      class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-indigo-50 tw-border tw-border-blue-200 tw-rounded-md tw-p-1 tw-mb-2 tw-shadow-sm\">\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\n        <!-- User Basic Info Display -->\n        <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\n          <!-- Profile Photo Preview -->\n          <div class=\"tw-flex tw-items-center tw-gap-2\">\n            <div\n              class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-border tw-border-blue-200 tw-flex tw-items-center tw-justify-center tw-overflow-hidden\">\n              @if (userMasterForm.get('user_photo_id_cyfm')?.value) {\n              <img cideEleFileImage [fileId]=\"userMasterForm.get('user_photo_id_cyfm')?.value\"\n                [altText]=\"'Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover\">\n              } @else {\n              <cide-ele-icon name=\"person\" class=\"tw-w-5 tw-h-5 tw-text-blue-600\">\n              </cide-ele-icon>\n              }\n            </div>\n            <div class=\"tw-flex tw-flex-col\">\n              <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\n                {{ getUserFullName() || 'New User' }}\n              </span>\n              <span class=\"tw-text-xs tw-text-blue-600\">\n                {{ getUserUsername() || 'Username not set' }}\n              </span>\n            </div>\n          </div>\n\n          <!-- Contact Info -->\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">email</cide-ele-icon>\n              <span>{{ getUserEmail() || 'Email not set' }}</span>\n            </div>\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">phone</cide-ele-icon>\n              <span>{{ getUserMobile() || 'Mobile not set' }}</span>\n            </div>\n          </div>\n\n          <!-- Active Status -->\n          <div class=\"tw-flex tw-items-center tw-gap-1\">\n            @if (getUserActiveStatus()) {\n            <span\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-700\">\n              <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">check_circle</cide-ele-icon>\n              Active\n            </span>\n            } @else {\n            <span\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-700\">\n              <cide-ele-icon variant=\"red\" size=\"xs\" class=\"tw-mr-1\">cancel</cide-ele-icon>\n              Inactive\n            </span>\n            }\n          </div>\n        </div>\n\n        <!-- Entity Info -->\n        <div class=\"tw-flex tw-items-center tw-gap-2\">\n          @if (hasDefaultEntity()) {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-blue-700\">\n            <cide-ele-icon variant=\"blue\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-font-medium\">{{ getDefaultEntityName() }}</span>\n          </div>\n          } @else {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-500\">\n            <cide-ele-icon variant=\"gray\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-italic\">No entity</span>\n          </div>\n          }\n\n          <span class=\"tw-text-xs tw-text-gray-600 tw-px-2 tw-py-1 tw-bg-gray-100 tw-rounded\">\n            {{ getEntityMappingCount() }} mapping(s)\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Tab Navigation -->\n    <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\n      <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\n        (tabChange)=\"onTabChange($event)\">\n      </cide-ele-tab>\n    </div>\n\n    <!-- Tab Content -->\n    <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n      @switch (activeTab()) {\n\n      @case ('basic') {\n      <!-- User Basic Information Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n        <!-- Top Section: Form Fields on Left, Profile Photo on Right -->\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4 tw-mb-4\">\n          <!-- Left Side: Form Fields -->\n          <div class=\"tw-space-y-4\">\n            <!-- Name Fields - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\n              <cide-ele-input id=\"user_firstname\" label=\"First Name\" formControlName=\"user_firstname\"\n                placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\n                placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_lastname\" label=\"Last Name\" formControlName=\"user_lastname\"\n                placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_fullname\" label=\"Full Name (Auto-generated)\" formControlName=\"user_fullname\"\n                placeholder=\"Auto-generated from name fields or enter manually\" [maxlength]=\"62\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <!-- Contact Information - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\n              <cide-ele-input id=\"user_username\" label=\"Username\" formControlName=\"user_username\"\n                placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_emailid\" label=\"Email ID\" formControlName=\"user_emailid\" type=\"email\"\n                placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number\" formControlName=\"user_mobileno\" type=\"tel\"\n                placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <!-- User Type Mapping -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n              <cide-ele-select\n                id=\"syutm_user_type\"\n                label=\"User Type\"\n                placeholder=\"Select user type\"\n                [options]=\"userTypeOptions\"\n                valueKey=\"value\"\n                labelKey=\"label\"\n                formControlName=\"syutm_user_type\"\n                size=\"md\">\n              </cide-ele-select>\n\n              <cide-ele-input\n                id=\"syutm_type_specific_id\"\n                label=\"Type-Specific ID\"\n                placeholder=\"Enter type-specific ID (e.g., STU001, TCH001)\"\n                formControlName=\"syutm_type_specific_id\"\n                [maxlength]=\"50\"\n                size=\"md\">\n              </cide-ele-input>\n            </div>\n          </div>\n\n          <!-- Right Side: Profile Photo Upload -->\n          <div class=\"tw-flex tw-items-start tw-justify-center tw-p-0\">\n            <cide-ele-file-input id=\"user_photo_id_cyfm\" formControlName=\"user_photo_id_cyfm\" accept=\"image/*\"\n              [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\n              previewHeight=\"120px\" placeholderText=\"Upload Photo\" placeholderIcon=\"cloud_upload\" [autoUpload]=\"true\"\n              [uploadData]=\"getProfilePhotoUploadData()\" (uploadSuccess)=\"onProfilePhotoUploadSuccess($event)\"\n              (uploadError)=\"onProfilePhotoUploadError($event)\"\n              (uploadProgressChange)=\"onProfilePhotoUploadProgress($event)\">\n            </cide-ele-file-input>\n          </div>\n        </div>\n\n\n\n        <!-- Status Control -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-mb-2\">\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\n            <label\n              class=\"tw-flex tw-flex-col tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200 hover:tw-bg-blue-75\">\n              <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\n                class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\n                access and operations</span>\n            </label>\n          </div>\n        </div>\n      </div>\n      }\n\n      @case ('auth') {\n      <!-- Authentication Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <!-- Password Fields -->\n        @if (shouldShowPasswordFields()) {\n        <div class=\"tw-mb-4\">\n          <!-- Password Fields Header for Edit Mode -->\n          @if (isEditMode()) {\n          <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Update Password</h6>\n            <button type=\"button\"\n              class=\"tw-px-3 tw-py-1 tw-bg-gray-100 tw-text-gray-600 tw-border tw-border-gray-300 tw-rounded-md tw-text-xs tw-font-medium hover:tw-bg-gray-200 tw-transition-colors\"\n              (click)=\"cancelPasswordUpdate()\">\n              Cancel Password Update\n            </button>\n          </div>\n          }\n\n          <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6\">\n            <cide-ele-input id=\"user_password\" [label]=\"getPasswordFieldLabel()\" formControlName=\"user_password\"\n              type=\"password\" placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\n            </cide-ele-input>\n\n            <cide-ele-input id=\"user_confirm_password\" [label]=\"getPasswordConfirmLabel()\"\n              formControlName=\"user_confirm_password\" type=\"password\" placeholder=\"Confirm your password\" size=\"md\">\n            </cide-ele-input>\n          </div>\n        </div>\n        }\n\n        <!-- Password Update Option for Edit Mode -->\n        @if (isEditMode() && !shouldShowPasswordFields()) {\n        <div class=\"tw-mb-4\">\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-blue-800 tw-mb-2\">Password Update</h6>\n            <p class=\"tw-text-sm tw-text-blue-600 tw-mb-3\">Current password will be kept. Click below to change\n              password.</p>\n\n            @if (hasPasswordInput()) {\n            <div\n              class=\"tw-mb-3 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded tw-text-sm tw-text-yellow-700\">\n              <cide-ele-icon variant=\"yellow\" size=\"xs\" class=\"tw-mr-1\">warning</cide-ele-icon>\n              Password fields contain text. Click \"Change Password\" to manage existing input.\n            </div>\n            }\n\n            <button type=\"button\"\n              class=\"tw-px-4 tw-py-2 tw-bg-blue-100 tw-text-blue-700 tw-border tw-border-blue-300 tw-rounded-md tw-text-sm tw-font-medium hover:tw-bg-blue-200 tw-transition-colors\"\n              (click)=\"triggerPasswordUpdate()\">\n              @if (hasPasswordInput()) {\n              Manage Password Fields\n              } @else {\n              Change Password\n              }\n            </button>\n          </div>\n        </div>\n        }\n\n        <!-- Password Options -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-gap-4 tw-mb-4\">\n          <div class=\"tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\n            <label\n              class=\"tw-flex tw-flex-col tw-gap-2 tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200\">\n              <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\n                formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\n                password on next login</span>\n            </label>\n          </div>\n        </div>\n\n      </div>\n      }\n\n      @case ('roles') {\n      <!-- Entity, Roles & Permissions Mapping Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n\n\n        <!-- Important Note -->\n        <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-2 tw-mb-4\">\n          <div class=\"tw-flex tw-items-start tw-gap-3\">\n            <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\n            <div class=\"tw-flex-1\">\n              <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\n              <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role\n                mappings below. At least one entity mapping is required for user access.</p>\n              @if (hasDefaultEntity()) {\n              <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\n                <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\n                <span class=\"tw-text-sm tw-text-amber-800\">\n                  <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\n                </span>\n              </div>\n              } @else {\n              <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\n                \u26A0\uFE0F No default entity selected. Please set one entity as default.\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <!-- Entity-Role Mapping Section -->\n        <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\n          <div>\n            <h4 class=\"tw-text-sm tw-text-left tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\n            <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\n          </div>\n          <div class=\"tw-flex tw-flex-col tw-items-end\">\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\"\n              leftIcon=\"add\" [disabled]=\"isAllEntitiesMapped()\">\n              Add Entity Mapping\n            </button>\n\n            @if (isAllEntitiesMapped()) {\n            <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-md tw-max-w-xs\">\n              <p class=\"tw-text-xs tw-text-blue-700\">\n                <cide-ele-icon variant=\"info\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n                All available entities are already mapped.\n              </p>\n            </div>\n            }\n          </div>\n        </div>\n\n        <div formArrayName=\"core_entity_mapping\">\n            @for (mapping of entityMappings(); track $index; let i = $index) {\n            <cide-ele-card\n              [title]=\"'Entity Mapping ' + (i + 1)\"\n              [subtitle]=\"mapping.syenm_isdefault ? 'Default Entity' : ''\"\n              [cardConfig]=\"{\n                collapsible: true,\n                minimizable: false,\n                maximizable: false,\n                removable: !mapping?._id,\n                defaultState: 'expanded',\n                showHeader: true,\n                showFooter: false,\n                variant: 'default',\n                size: 'md',\n                shadow: true,\n                rounded: true,\n                bordered: true\n              }\"\n              (removed)=\"removeEntityMapping(i)\"\n              class=\"tw-mb-6 entity-mapping-card\">\n              \n              <div [formGroupName]=\"i\">\n              \n              <!-- Card Header Content -->\n              <div card-header class=\"tw-flex tw-items-center tw-gap-2 tw-flex-shrink-0\">\n                @if (mapping.syenm_isdefault) {\n                  <span class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-[10px] tw-font-medium tw-bg-green-100 tw-text-green-800\">\n                    <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-0.5\">star</cide-ele-icon>\n                    Default\n                  </span>\n                }\n              </div>\n\n              <!-- Card Actions (User Type Mappings) - Only show for selected entity -->\n              <div card-actions class=\"tw-flex tw-items-center tw-gap-1.5 tw-flex-wrap tw-max-w-full\">\n                @if (getEntityIdFromMapping(i)) {\n                  @if (getUserTypeMappingsForEntity(getEntityIdFromMapping(i)).length > 0) {\n                    @for (typeMapping of getUserTypeMappingsForEntity(getEntityIdFromMapping(i)); track typeMapping._id || typeMapping.syutm_type_specific_id) {\n                      <div class=\"tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0\">\n                        <span class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-[10px] tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n                          {{ typeMapping.syutm_user_type }}\n                        </span>\n                        @if (typeMapping.syutm_isactive) {\n                          <span class=\"tw-inline-flex tw-items-center tw-px-1 tw-py-0.5 tw-rounded-full tw-text-[9px] tw-font-medium tw-bg-green-100 tw-text-green-800\">\n                            Active\n                          </span>\n                        }\n                        @if (typeMapping.syutm_type_specific_id) {\n                          <span class=\"tw-text-[9px] tw-text-gray-600 tw-font-mono tw-truncate tw-max-w-[80px]\" [title]=\"'ID: ' + typeMapping.syutm_type_specific_id\">\n                          {{ typeMapping.syutm_type_specific_id }}\n                        </span>\n                        }\n                      </div>\n                    }\n                  }\n                }\n              </div>\n\n              <!-- Card Content -->\n              <div>\n                <!-- Entity and Role Selection -->\n                <div class=\"tw-grid tw-px-3 tw-py-1 tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-mb-4\">\n                  <div>\n                    <cide-ele-select label=\"Entity\" [options]=\"getFilteredEntityOptions(i)\"\n                      formControlName=\"syenm_entity_id_syen\" valueKey=\"_id\" labelKey=\"syen_name\"\n                      placeholder=\"Select entity\" size=\"md\" (change)=\"onEntityChange(i, $event)\">\n                    </cide-ele-select>\n\n                    @if (isAllEntitiesSelected(i)) {\n                    <div class=\"tw-mt-2 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded-md\">\n                      <p class=\"tw-text-xs tw-text-yellow-700\">\n                        <cide-ele-icon variant=\"warning\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n                        All entities are already mapped. Remove another mapping to add this one.\n                      </p>\n                    </div>\n                    }\n                  </div>\n                  <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\n                    formControlName=\"syenm_role_id_syusrol\" valueKey=\"_id\" labelKey=\"syusrol_role_name\"\n                    placeholder=\"Select role for this entity\" size=\"md\" (change)=\"onRoleChange(i, $event)\">\n                  </cide-ele-select>\n                </div>\n\n\n                <!-- Entity-Specific Details and Active Period - All in One Row -->\n                <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4 tw-mb-4\">\n                  <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\n                    formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\"\n                    labelKey=\"sydept_name\" placeholder=\"Select department\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-select label=\"Designation for this Entity\" [options]=\"getDesignationOptionsForEntity(i)\"\n                    valueKey=\"_id\" labelKey=\"sydsg_name\" formControlName=\"syenm_designation_id_sydsg\"\n                    placeholder=\"Select designation\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-input label=\"Active From\" [id]=\"'syenm_activefrom['+i+']'\"\n                    formControlName=\"syenm_activefrom\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n\n                  <cide-ele-input label=\"Active Until\" [id]=\"'syenm_activeupto['+i+']'\"\n                    formControlName=\"syenm_activeupto\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n                </div>\n\n                <!-- Mapping Settings -->\n                <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-mb-4\">\n                  <div class=\"tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded-lg\">\n                    <cide-ele-input type=\"checkbox\" label=\"Default Entity\" formControlName=\"syenm_isdefault\"\n                      (change)=\"onDefaultEntityChange(i, $event)\" class=\"tw-h-5 tw-accent-green-500\" />\n                    <span class=\"tw-text-xs tw-text-green-600 tw-block tw-mt-1\">Set as user's default entity (only one\n                      allowed)</span>\n                  </div>\n\n                  <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n                    <cide-ele-input type=\"checkbox\" label=\"Active Mapping\" formControlName=\"syenm_isactive\"\n                      class=\"tw-h-5 tw-accent-blue-500\" />\n                    <span class=\"tw-text-xs tw-text-blue-600 tw-block tw-mt-1\">Enable this entity mapping</span>\n                  </div>\n                </div>\n\n                <!-- Menu Rights Grid for this Entity-Role -->\n                <div class=\"tw-border-t tw-border-gray-200\">\n\n                  @if (getMenuRightsForMapping(i).length > 0) {\n                  <!-- Menu Rights Tree Grid -->\n\n                  <cide-ele-data-grid [config]=\"getMenuRightsGridConfig(i)\"\n                    [templateRenderers]=\"getMenuRightsTemplateRenderers(i)\"\n                    (gridEvent)=\"onMenuRightsGridEvent($event, i)\" class=\"tw-h-96 tw-w-full\">\n                  </cide-ele-data-grid>\n\n                  } @else {\n                  <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\n                    <div class=\"tw-text-gray-400 tw-mb-3\">\n                      <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\n                    </div>\n                    <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\n                    <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to\n                      automatically load\n                      menu rights for this mapping.</p>\n                  </div>\n                  }\n                </div>\n              </div>\n              </div>\n            </cide-ele-card>\n            }\n          </div>\n\n          @if (entityMappings().length === 0) {\n          <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\n            <div class=\"tw-text-blue-400 tw-mb-3\">\n              <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\n            </div>\n            <h4 class=\"tw-text-sm tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\n            <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and\n              permissions for different entities.</p>\n            <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\"\n              (click)=\"addEntityMapping()\" leftIcon=\"add\">\n              Add First Entity Mapping\n            </button>\n          </div>\n          }\n        </div>\n      }\n\n      @case ('addresses') {\n      <!-- Contact Addresses Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end\">\n          <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\n              leftIcon=\"add\" [disabled]=\"!hasAddContactAddressRights()\">\n              Add New Address\n            </button>\n          </div>\n        </div>\n\n        <div formArrayName=\"core_user_contact_addresses\">\n          @for (address of contactAddresses(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n            <div\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <!-- Use address type as header instead of generic \"Address X\" -->\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n                {{ getAddressTypeLabel(i) || ('Address ' + (i + 1)) }}\n              </h4>\n              <div class=\"tw-flex tw-items-center tw-gap-2\">\n                @if (isAddressOwner(i)) {\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareAddress(i)\"\n                  leftIcon=\"share\" class=\"tw-text-blue-600 hover:tw-text-blue-700\">\n                  Share\n                </button>\n                }\n                @if (!address?._id) {\n                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\n                  leftIcon=\"delete\">\n                  Remove\n                </button>\n                }\n              </div>\n            </div>\n            <div class=\"tw-p-4\">\n              <!-- Main Layout: Inputs on Left, Address Textarea on Right -->\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n                \n                <!-- Left Side: Input Fields (3/4 width) -->\n                <div class=\"lg:tw-col-span-3\">\n                  <!-- Row 1: Address Type, Contact Person -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mb-3\">\n                    <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\" id=\"sycad_address_type_id_sygms\"\n                      formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onAddressTypeChange(i)\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"Contact Person\" formControlName=\"sycad_contact_person_name\"\n                      placeholder=\"Enter contact person\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 2: Postal Code, City, State, Country -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\n                    <cide-ele-select label=\"Postal Code\" [options]=\"addressPostalCodes()[i] || []\"\n                      formControlName=\"sycad_contact_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\n                      [loading]=\"addressPostalCodesLoading()[i] || false\" (searchChange)=\"onPostalCodeSearch($event, i)\"\n                      (change)=\"onPostalCodeSelection($event, i)\" size=\"sm\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"City\" formControlName=\"sycad_contact_city_sypin\" placeholder=\"Enter city\"\n                      size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"State\" formControlName=\"sycad_contact_state_sypin\" placeholder=\"Enter state\"\n                      size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-select label=\"Country\" [options]=\"addressCountries()[i] || []\"\n                      formControlName=\"sycad_contact_country_syctr\" placeholder=\"Select country\" valueKey=\"_id\"\n                      labelKey=\"syctr_country_iso_name\" [searchable]=\"true\" (searchChange)=\"onCountrySearch($event, i)\"\n                      [loading]=\"addressCountriesLoading()[i] || false\" size=\"sm\">\n                    </cide-ele-select>\n                  </div>\n                </div>\n\n                <!-- Right Side: Address Textarea (1/4 width, spans 2 rows) -->\n                <div class=\"lg:tw-col-span-1 lg:tw-row-span-2 tw-flex tw-flex-col\">\n                  <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\n                    placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"4\" size=\"sm\"\n                    class=\"tw-h-full\">\n                  </cide-ele-textarea>\n                </div>\n              </div>\n\n              <!-- Contact Details: Primary Phone, Alt Phone, Fax, Primary Email in 4 columns -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Primary Phone\" formControlName=\"sycad_contact_phone\" type=\"tel\"\n                  placeholder=\"Primary phone\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Alternate Phone\" formControlName=\"sycad_contact_phone_alt\" type=\"tel\"\n                  placeholder=\"Alternate phone\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Fax Number\" formControlName=\"sycad_contact_fax\" placeholder=\"Fax number\"\n                  size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Primary Email\" formControlName=\"sycad_contact_email\" type=\"email\"\n                  placeholder=\"Primary email\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Alternate Email in single row -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                <cide-ele-input label=\"Alternate Email\" formControlName=\"sycad_contact_email_alt\" type=\"email\"\n                  placeholder=\"Alternate email address\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('documents') {\n      <!-- Documents Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\" [disabled]=\"!hasAddDocumentRights()\">\n            Add Document\n          </button>\n        </div>\n        <div formArrayName=\"core_user_documents\">\n          @for (doc of documents(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n            <div\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n                {{ getDocumentTypeLabel(i) || ('Document ' + (i + 1)) }}\n              </h4>\n              <div class=\"tw-flex tw-gap-2\">\n                @if (doc?._id) {\n                <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"shareDocumentRights(i)\"\n                  leftIcon=\"share\">\n                  Share\n                </button>\n                }\n              </div>\n            </div>\n            <div class=\"tw-p-4\">\n              <!-- Main Layout: Inputs on Left, File Upload on Right -->\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-3 tw-gap-4\">\n                \n                <!-- Left Side: Document Information (2/3 width) -->\n                <div class=\"lg:tw-col-span-2\">\n                  <!-- Row 1: Document Type, Document Number, Name as per Document -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                    <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\n                      formControlName=\"syusd_document_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onDocumentTypeChange(i)\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"Document Number\" formControlName=\"syusd_doc_number\"\n                      placeholder=\"Document number\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"Name as per Document\" formControlName=\"syusd_doc_name_as_per_doc\"\n                      placeholder=\"Name on document\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 2: Issue Date, Expiry Date, Photo Group -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                    <cide-ele-input label=\"Issue Date\" formControlName=\"syusd_doc_issue_date\"\n                      [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"Expiry Date\" formControlName=\"syusd_doc_expiry_date\"\n                      [id]=\"'syusd_doc_expiry_date['+i+']'\" type=\"date\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 3: Verification Status, KYC Status -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                    <cide-ele-select label=\"Verification Status\" [options]=\"documentVerificationStatusOptions()\"\n                      formControlName=\"syusd_doc_verification_status_id_sygms\" placeholder=\"Select status\"\n                      size=\"sm\" valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n\n                    <cide-ele-select label=\"KYC Status\" [options]=\"documentKycStatusOptions()\"\n                      formControlName=\"syusd_doc_kyc_status_id_sygms\" placeholder=\"Select KYC status\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n                  </div>\n                </div>\n\n                <!-- Right Side: File Upload (1/3 width) -->\n                <div class=\"lg:tw-col-span-1\">\n                  <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-3 tw-h-full\">\n                    \n                    <!-- File Upload Input -->\n                    <cide-ele-file-input\n                      [id]=\"'document-files-' + i\"\n                      [multiple]=\"true\"\n                      formControlName=\"syusd_photo_group_id_cyfm\"\n                      [accept]=\"'.pdf,.jpg,.jpeg,.png,.doc,.docx'\"\n                      [autoUpload]=\"true\"\n                      [uploadData]=\"getDocumentUploadData(i)\"\n                      (change)=\"onDocumentFilesSelected($event, i)\"\n                      (uploadSuccess)=\"onDocumentUploadSuccess($event, i)\"\n                      (uploadError)=\"onDocumentUploadError($event, i)\"\n                      (uploadProgressChange)=\"onDocumentUploadProgress($event, i)\"\n                      class=\"tw-mb-3\"\n                      size=\"sm\">\n                    </cide-ele-file-input>\n\n                    <!-- Upload Status -->\n                    <!-- Upload status is now handled by the file input component itself -->\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('family') {\n      <!-- Family Details Section - Compact Design -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-3 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\" [disabled]=\"!hasAddFamilyDetailRights()\">\n            Add Family Member\n          </button>\n        </div>\n\n        <div formArrayName=\"core_user_family_details\">\n          @for (family of familyDetails(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg tw-mb-4 tw-overflow-hidden tw-transition-all tw-duration-200 hover:tw-shadow-md tw-shadow-sm\">\n            \n            <!-- Compact Header -->\n            <div class=\"tw-bg-gray-50 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-medium\">Family Member {{ i + 1 }}</h4>\n              <div class=\"tw-flex tw-gap-2\">\n                @if (family?._id) {\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareFamilyDetailRights(i)\"\n                  leftIcon=\"share\">\n                  Share\n                </button>\n                }\n                @if (!family?._id) {\n                <button cideEleButton variant=\"danger\" size=\"xs\" type=\"button\" (click)=\"removeFamilyDetail(i)\" leftIcon=\"delete\">\n                  Remove\n                </button>\n                }\n              </div>\n            </div>\n            \n            <!-- Compact Form Content - 3 inputs per row -->\n            <div class=\"tw-p-4\">\n              <!-- Row 1: Name, User, and Combined Relationship/Active Status (33.33% each) -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Family Member Name\" formControlName=\"syfdl_family_member_name\"\n                  placeholder=\"Enter family member full name\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-select label=\"Family Member User\" [options]=\"userOptions(i)\"\n                  formControlName=\"syfdl_family_member_id_user\" placeholder=\"Select family member user\" size=\"sm\"\n                  valueKey=\"_id\" labelKey=\"user_fullname\" [searchable]=\"true\"\n                  [loading]=\"userSearchLoading()[i] || false\" (searchChange)=\"onUserSearchChange($event, i)\"\n                  (change)=\"onUserSelectionChange($event, i)\">\n                </cide-ele-select>\n\n                <!-- Combined Relationship and Active Status (33.33%) -->\n                <div class=\"tw-flex tw-flex-row tw-gap-2 tw-items-end\">\n                  <div class=\"tw-flex-1\">\n                    <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\n                      formControlName=\"syfdl_relationship_id_sygms\" placeholder=\"Select relationship\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n                  </div>\n\n                  <div class=\"tw-flex tw-items-center tw-pt-1 tw-flex-shrink-0\">\n                    <cide-ele-input formControlName=\"syfdl_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Row 2: Blood Group, DOB, and Phone -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\n                  formControlName=\"syfdl_blood_group_sygms\" placeholder=\"Select blood group\" size=\"sm\" valueKey=\"_id\"\n                  labelKey=\"sygms_title\">\n                </cide-ele-select>\n\n                <cide-ele-input label=\"Date of Birth\" formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"sm\"\n                  [id]=\"'syfdl_family_member_dob['+i+']'\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Phone\" formControlName=\"syfdl_contact_phone\" type=\"tel\"\n                  placeholder=\"Enter contact phone\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Row 3: Email, Email ID, and Contact Number -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\" type=\"email\"\n                  placeholder=\"Enter contact email\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\" type=\"email\"\n                  placeholder=\"Enter contact email ID\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\" type=\"tel\"\n                  placeholder=\"Enter contact number\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n      }\n    </div>\n\n    <!-- Form Actions -->\n    <div\n      class=\"tw-flex tw-justify-between tw-items-center tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\n      <!-- Error Display Component -->\n      <div class=\"tw-flex-1\">\n        <cide-form-field-error [formGroup]=\"userMasterForm\"></cide-form-field-error>\n      </div>\n\n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-gap-4\">\n      <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n        [disabled]=\"loading()\">\n        Reset Form\n      </button>\n\n      <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\n        [loading]=\"loading()\" leftIcon=\"save\">\n        Save User Master\n      </button>\n      </div>\n    </div>\n  </form>\n</div>\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers for Role Permissions Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3 tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      @if (row.syme_type === 'module') {\n      <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">folder</cide-ele-icon>\n      } @else if (row.syme_type === 'section') {\n      <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">folder_open</cide-ele-icon>\n      } @else if (row.syme_type === 'menu') {\n      <cide-ele-icon class=\"tw-text-purple-600 tw-w-4 tw-h-4\">menu</cide-ele-icon>\n      } @else {\n      <cide-ele-icon class=\"tw-text-gray-600 tw-w-4 tw-h-4\">description</cide-ele-icon>\n      }\n    </div>\n\n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.syme_title\">\n          {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n        </div>\n        <!-- Green pill indicator for parent menus with child permissions -->\n        @if (row.syme_type === 'module' || row.syme_type === 'section') {\n        @if (hasChildMenusWithPermissions(row._id)) {\n        <span\n          class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-whitespace-nowrap\">\n          Assigned\n        </span>\n        }\n        }\n      </div>\n      @if (row.permission?.sygms_name) {\n      <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" [title]=\"row.permission?.sygms_name\">\n        {{ row.permission?.sygms_name }}\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-justify-center\">\n    @if (row.syme_type === 'module') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n      Module\n    </span>\n    } @else if (row.syme_type === 'section') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n      Section\n    </span>\n    } @else if (row.syme_type === 'menu') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-purple-100 tw-text-purple-800\">\n      Menu\n    </span>\n    } @else {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800\">\n      {{ row.syme_type || 'Unknown' }}\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n    @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n    <div class=\"tw-flex tw-items-center tw-space-x-1\">\n      <div class=\"tw-flex tw-items-center tw-space-x-1\">\n        <input type=\"checkbox\" [checked]=\"isPermissionSelected(row._id, permissionId)\" [disabled]=\"true\"\n          class=\"tw-h-4 tw-w-4 tw-text-blue-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-blue-500\">\n        <label class=\"tw-text-xs tw-text-gray-700\">\n          {{ getPermissionById(permissionId)?.sygms_title || 'Unknown' }}\n        </label>\n      </div>\n    </div>\n    }\n    } @else {\n    <!-- Show green checkmark for parent menus with child permissions -->\n    @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n    @if (hasChildMenusWithPermissions(row._id)) {\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\">\n      <cide-ele-icon class=\"tw-text-green-600\" size=\"xs\">\n        check\n      </cide-ele-icon>\n    </div>\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n    }\n  </div>\n</ng-template>\n\n<!-- Menu Rights Permissions Renderer Template -->\n<ng-template #menuRightsPermissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    <!-- Role Rights Display -->\n    @if (row.role_rights && row.role_rights.length > 0) {\n    <div class=\"tw-mb-2\">\n      <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Role Rights:</div>\n      <div class=\"tw-flex tw-flex-wrap tw-gap-1\">\n        @for (right of row.role_rights; track $index) {\n        <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-blue-100 tw-text-blue-800 tw-rounded\">\n          {{ right }}\n        </span>\n        }\n      </div>\n    </div>\n    }\n\n\n    <!-- Exception Indicator -->\n    @if (row.hasException) {\n    <div class=\"tw-mt-2\">\n      <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-yellow-100 tw-text-yellow-800 tw-rounded\">\n        Override\n      </span>\n    </div>\n    } @else {\n    <div class=\"tw-mt-2\">\n      <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\n    </div>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row._permissionValues && Object.keys(row._permissionValues).length > 0) {\n    @for (permissionId of Object.keys(row._permissionValues); track permissionId) {\n    <div class=\"tw-flex tw-items-center tw-space-x-2\">\n      <cide-ele-input type=\"checkbox\" [ngModel]=\"row._permissionValues[permissionId].checked\"\n        (ngModelChange)=\"onPermissionChangeSafe($event, row, permissionId)\"\n        [id]=\"'permission-' + row._id + '-' + permissionId\" class=\"tw-h-4 tw-w-4\">\n      </cide-ele-input>\n      <label [for]=\"'permission-' + row._id + '-' + permissionId\" \n        class=\"tw-text-xs tw-cursor-pointer\"\n        [ngClass]=\"{\n          'tw-text-gray-700': row._permissionValues[permissionId].modified === row._permissionValues[permissionId].actual,\n          'tw-text-blue-600 tw-font-semibold': row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual\n        }\">\n        {{ row._permissionValues[permissionId].permission?.sygms_title }}\n        @if (row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual) {\n        <span class=\"tw-text-xs tw-text-orange-500 tw-ml-1\" title=\"Modified from role permission\">\n          ({{ row._permissionValues[permissionId].actual ? '\u2713' : '\u2717' }})\n        </span>\n        }\n      </label>\n    </div>\n    }\n    } @else {\n    <!-- No permissions to display - show N/A (permissions are already loaded, just empty) -->\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n  </div>\n</ng-template>", styles: [":host ::ng-deep .entity-mapping-card .cide-card-header{min-height:2.5rem!important;padding:.75rem 1rem!important}:host ::ng-deep .entity-mapping-card .cide-card-header-content{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}:host ::ng-deep .entity-mapping-card .cide-card-actions{max-width:60%;flex-wrap:wrap;gap:.375rem}\n"] }]
         }], ctorParameters: () => [] });
 
 var userCreate_component = /*#__PURE__*/Object.freeze({
@@ -16363,6 +16404,7 @@ class CideCoreUserListComponent {
     userMasterService = inject(CideCoreUserMasterService);
     appState = inject(AppStateHelperService);
     sharedService = inject(CideLytSharedService);
+    rightsService = inject(RightsService);
     destroyRef = inject(DestroyRef);
     // ViewChild reference to the grid component
     gridComponent;
@@ -16386,6 +16428,41 @@ class CideCoreUserListComponent {
     pageTitle = signal('', ...(ngDevMode ? [{ debugName: "pageTitle" }] : []));
     pageSubtitle = signal('', ...(ngDevMode ? [{ debugName: "pageSubtitle" }] : []));
     pageCode = signal('auth_user_mst', ...(ngDevMode ? [{ debugName: "pageCode" }] : []));
+    // Shared wrapper setup
+    shared_wrapper_setup_param = { sypg_page_code: 'auth_user_mst' };
+    // Constructor to set up reactive effect for page data
+    constructor() {
+        // Watch for page data changes in cache and update title/subtitle reactively
+        effect(() => {
+            const currentPageCode = this.pageCode();
+            if (!currentPageCode)
+                return;
+            // Watch the page data cache signal from shared service
+            const pageDataCache = this.sharedService.pageDataStore();
+            const cachedData = pageDataCache[currentPageCode];
+            const page = cachedData?.data?.page;
+            if (page) {
+                // Try to parse configuration for title/subtitle
+                const cfgString = page?.sypg_configuration;
+                if (cfgString) {
+                    try {
+                        const cfg = JSON.parse(cfgString);
+                        this.pageTitle.set(cfg.title || page?.sypg_title || '');
+                        this.pageSubtitle.set(cfg.subTitle || page?.sypg_desc || '');
+                    }
+                    catch (e) {
+                        console.warn('Invalid page config JSON', e);
+                        this.pageTitle.set(page?.sypg_title || '');
+                        this.pageSubtitle.set(page?.sypg_desc || '');
+                    }
+                }
+                else {
+                    this.pageTitle.set(page?.sypg_title || '');
+                    this.pageSubtitle.set(page?.sypg_desc || '');
+                }
+            }
+        });
+    }
     // Server-side search state
     searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
     // Server-side sorting state
@@ -16393,6 +16470,11 @@ class CideCoreUserListComponent {
     sortDirection = signal('asc', ...(ngDevMode ? [{ debugName: "sortDirection" }] : []));
     // Server-side filtering state
     userType = signal(null, ...(ngDevMode ? [{ debugName: "userType" }] : [])); // STUDENT, TEACHER, etc. - Filter by user type
+    // Rights computed signals
+    canCreate = computed(() => this.rightsService.hasRight('CREATE'), ...(ngDevMode ? [{ debugName: "canCreate" }] : []));
+    canEdit = computed(() => this.rightsService.hasRight('EDIT'), ...(ngDevMode ? [{ debugName: "canEdit" }] : []));
+    canDelete = computed(() => this.rightsService.hasRight('DELETE'), ...(ngDevMode ? [{ debugName: "canDelete" }] : []));
+    canView = computed(() => this.rightsService.hasRight('VIEW'), ...(ngDevMode ? [{ debugName: "canView" }] : []));
     // Grid configuration signal for server-side pagination
     gridConfig = signal({
         id: 'user-master-list-grid',
@@ -16476,6 +16558,8 @@ class CideCoreUserListComponent {
     templateRenderers = {};
     ngOnInit() {
         console.log('🔧 USER MASTER LIST: Component initializing');
+        // Initialize rights for user management
+        this.rightsService.initializeRights(this.pageCode());
         // Pick up user type and page config from route data/cache (shared wrapper already loaded page API)
         this.route.data.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(data => {
             const routeUserType = data['userType'] || this.route.snapshot.queryParamMap.get('userType');
@@ -16488,17 +16572,17 @@ class CideCoreUserListComponent {
             const codeFromQuery = this.route.snapshot.queryParamMap.get('sypg_page_code');
             const finalCode = (codeFromRoute || codeFromQuery || this.pageCode()).toString();
             this.pageCode.set(finalCode);
-            // Try to read page config from cached page data (no extra API call)
-            const cachedStore = this.sharedService.pageDataStore();
-            const cached = finalCode ? (this.sharedService.getCachedPageData(finalCode) || cachedStore[finalCode]) : null;
+            // Page title/subtitle will be updated reactively by the effect when page data is loaded
+            // Also check immediately if data is already available
+            const cached = finalCode ? this.sharedService.getCachedPageData(finalCode) : null;
             const page = data['page'] || cached?.data?.page;
             if (page) {
                 const cfgString = page?.sypg_configuration;
                 if (cfgString) {
                     try {
                         const cfg = JSON.parse(cfgString);
-                        this.pageTitle.set(cfg.title || '');
-                        this.pageSubtitle.set(cfg.subTitle || '');
+                        this.pageTitle.set(cfg.title || page?.sypg_title || '');
+                        this.pageSubtitle.set(cfg.subTitle || page?.sypg_desc || '');
                     }
                     catch (e) {
                         console.warn('Invalid page config JSON', e);
@@ -16810,87 +16894,102 @@ class CideCoreUserListComponent {
     // Generate dropdown items for user actions
     getDropdownItems(user) {
         console.log('🔵 getDropdownItems called for user:', user);
-        const items = [
-            {
+        const items = [];
+        if (this.canView()) {
+            items.push({
                 id: 'view',
                 label: 'View Details',
                 icon: 'visibility',
                 iconColor: 'tw-text-gray-400',
                 textColor: 'tw-text-gray-700',
                 hoverBgColor: 'hover:tw-bg-gray-100'
-            },
-            {
+            });
+        }
+        if (this.canEdit()) {
+            items.push({
                 id: 'edit',
                 label: 'Edit User',
                 icon: 'edit',
                 iconColor: 'tw-text-gray-400',
                 textColor: 'tw-text-gray-700',
                 hoverBgColor: 'hover:tw-bg-gray-100'
-            },
-            {
-                id: 'divider1',
-                label: '',
-                divider: true
-            },
-            {
+            });
+        }
+        if (this.canEdit()) {
+            if (items.length > 0) {
+                items.push({
+                    id: 'divider1',
+                    label: '',
+                    divider: true
+                });
+            }
+            items.push({
                 id: 'addresses',
                 label: 'Manage Addresses',
                 icon: 'location_on',
                 iconColor: 'tw-text-gray-400',
                 textColor: 'tw-text-gray-700',
                 hoverBgColor: 'hover:tw-bg-gray-100'
-            },
-            {
+            });
+            items.push({
                 id: 'documents',
                 label: 'Manage Documents',
                 icon: 'description',
                 iconColor: 'tw-text-gray-400',
                 textColor: 'tw-text-gray-700',
                 hoverBgColor: 'hover:tw-bg-gray-100'
-            },
-            {
+            });
+            items.push({
                 id: 'family',
                 label: 'Manage Family',
                 icon: 'family_restroom',
                 iconColor: 'tw-text-gray-400',
                 textColor: 'tw-text-gray-700',
                 hoverBgColor: 'hover:tw-bg-gray-100'
-            },
-            {
-                id: 'divider2',
-                label: '',
-                divider: true
-            },
-            {
+            });
+        }
+        if (this.canEdit()) {
+            if (items.length > 0) {
+                items.push({
+                    id: 'divider2',
+                    label: '',
+                    divider: true
+                });
+            }
+            items.push({
                 id: 'reset-password',
                 label: 'Reset Password',
                 icon: 'key',
                 iconColor: 'tw-text-gray-400',
                 textColor: 'tw-text-gray-700',
                 hoverBgColor: 'hover:tw-bg-gray-100'
-            },
-            {
+            });
+            items.push({
                 id: 'toggle-status',
                 label: user.user_isactive ? 'Deactivate User' : 'Activate User',
                 icon: user.user_isactive ? 'block' : 'check_circle',
                 iconColor: 'tw-text-gray-400',
                 textColor: 'tw-text-gray-700',
                 hoverBgColor: 'hover:tw-bg-gray-100'
-            },
-            {
-                id: 'divider3',
-                label: '',
-                divider: true
-            },
-            {
+            });
+        }
+        if (this.canDelete()) {
+            if (items.length > 0) {
+                items.push({
+                    id: 'divider3',
+                    label: '',
+                    divider: true
+                });
+            }
+            items.push({
                 id: 'delete',
                 label: 'Delete User',
                 icon: 'delete',
                 iconColor: 'tw-text-red-400',
                 textColor: 'tw-text-red-600',
                 hoverBgColor: 'hover:tw-bg-red-50'
-            }
-        ];
+            });
+        }
         console.log('🔵 Returning dropdown items:', items);
         return items;
     }
@@ -16925,7 +17024,7 @@ class CideCoreUserListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreUserListComponent, isStandalone: true, selector: "cide-core-user-list", viewQueries: [{ propertyName: "gridComponent", first: true, predicate: CideEleDataGridComponent, descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true, static: true }, { propertyName: "userDetailsTemplate", first: true, predicate: ["userDetailsTemplate"], descendants: true, static: true }, { propertyName: "contactInfoTemplate", first: true, predicate: ["contactInfoTemplate"], descendants: true, static: true }, { propertyName: "organizationTemplate", first: true, predicate: ["organizationTemplate"], descendants: true, static: true }, { propertyName: "validityTemplate", first: true, predicate: ["validityTemplate"], descendants: true, static: true }, { propertyName: "statusTemplate", first: true, predicate: ["statusTemplate"], descendants: true, static: true }], ngImport: i0, template: "<!-- User Master List Container -->\n<div class=\"user-master-listing-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-table tw-h-full\">\n\n  <!-- Header Section with Filters -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n      <div\n        class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-4 sm:tw-space-y-0\">\n\n        <!-- Title -->\n        <div class=\"tw-flex tw-items-center tw-space-x-3\"> \n          <cide-ele-icon class=\"tw-text-blue-600\">people</cide-ele-icon>\n          <div>\n            <h5 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">\n              {{ pageTitle() || ' ' }}\n            </h5>\n            <p class=\"tw-text-sm tw-text-gray-600\">\n              {{ pageSubtitle() || '' }}\n            </p>\n          </div>\n        </div>\n\n        <!-- Actions -->\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\n          <!-- Add User Button -->\n          <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"onAddUser()\"\n            class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">add</cide-ele-icon>\n            Add User\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Error Message -->\n  @if (error()) {\n  <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n    <div class=\"tw-flex\">\n      <cide-ele-icon name=\"exclamation-triangle\" class=\"tw-text-red-400\"></cide-ele-icon>\n      <div class=\"tw-ml-3\">\n        <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800\">Error</h3>\n        <p class=\"tw-text-sm tw-text-red-700 tw-mt-1\">{{ error() }}</p>\n      </div>\n    </div>\n  </div>\n  }\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n      <div class=\"tw-h-full tw-overflow-auto\">\n        <!-- Data Grid Component -->\n        <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers\"\n          [serverSidePagination]=\"true\" [totalServerItems]=\"totalItems()\" [currentServerPage]=\"currentPage()\"\n          [currentServerPageSize]=\"pageSize()\" (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- Template Definitions for Grid Renderers -->\n\n<!-- User Details Template -->\n<ng-template #userDetailsTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3\">\n    <div\n      class=\"tw-flex-shrink-0 tw-w-12 tw-h-12 tw-bg-blue-100 tw-rounded-full tw-flex tw-items-center tw-justify-center\">\n      <span class=\"tw-text-blue-600 tw-font-semibold tw-text-sm\">\n        {{ getUserInitials(row.user_firstname, row.user_lastname) }}\n      </span>\n    </div>\n    <div class=\"tw-flex-1 tw-min-w-0\">\n      <p class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate\" [title]=\"row.user_fullname\">\n        {{ row.user_fullname || 'Unknown User' }}\n      </p>\n      <p class=\"tw-text-xs tw-text-blue-600 tw-truncate tw-font-medium\" [title]=\"'Username: ' + row.user_username\">\n        @{{ row.user_username || 'No username' }}\n      </p>\n      <p class=\"tw-text-xs tw-text-gray-400 tw-truncate\" [title]=\"'ID: ' + row._id\">\n        ID: {{ row._id?.substring(0, 8) }}...\n      </p>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Contact Info Template -->\n<ng-template #contactInfoTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-flex tw-items-center\" [title]=\"'Email: ' + row.user_emailid\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path d=\"M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z\" />\n        <path d=\"M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ row.user_emailid || 'No email' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600 tw-flex tw-items-center\" [title]=\"'Mobile: ' + row.user_mobileno\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path\n          d=\"M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ row.user_mobileno || 'No mobile' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-500 tw-flex tw-items-center\"\n      [title]=\"'Password Change: ' + getPasswordChangeText(row.user_passwordchangeonlogin)\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path fill-rule=\"evenodd\"\n          d=\"M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z\"\n          clip-rule=\"evenodd\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ getPasswordChangeText(row.user_passwordchangeonlogin) }}</span>\n    </p>\n  </div>\n</ng-template>\n\n\n\n<!-- Validity Template -->\n<ng-template #validityTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-text-center tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-font-medium\">\n      Validity managed per entity\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600\">\n      Check entity mappings for details\n    </p>\n  </div>\n</ng-template>\n\n<!-- Status Template -->\n<ng-template #statusTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-flex tw-justify-center\">\n    @if (row.user_isactive) {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n      <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n        <circle cx=\"4\" cy=\"4\" r=\"3\" />\n      </svg>\n      Active\n    </span>\n    } @else {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800\">\n      <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n        <circle cx=\"4\" cy=\"4\" r=\"3\" />\n      </svg>\n      Inactive\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Actions Template using cide-ele-dropdown -->\n<ng-template #actionsTemplate let-value let-row=\"row\" let-column=\"column\">\n  <cide-ele-dropdown [items]=\"getDropdownItems(row)\" [config]=\"{  triggerIcon: 'more_vert', triggerSize: 'sm', usePortal: true, minWidth: 200 }\" (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>", styles: [".user-master-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreUserListComponent, isStandalone: true, selector: "cide-core-user-list", viewQueries: [{ propertyName: "gridComponent", first: true, predicate: CideEleDataGridComponent, descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true, static: true }, { propertyName: "userDetailsTemplate", first: true, predicate: ["userDetailsTemplate"], descendants: true, static: true }, { propertyName: "contactInfoTemplate", first: true, predicate: ["contactInfoTemplate"], descendants: true, static: true }, { propertyName: "organizationTemplate", first: true, predicate: ["organizationTemplate"], descendants: true, static: true }, { propertyName: "validityTemplate", first: true, predicate: ["validityTemplate"], descendants: true, static: true }, { propertyName: "statusTemplate", first: true, predicate: ["statusTemplate"], descendants: true, static: true }], ngImport: i0, template: "<!-- User List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'auth_user_mst' }\">\n<div class=\"user-master-listing-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-table tw-h-full\">\n\n  <!-- Header Section with Filters -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n      <div\n        class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-4 sm:tw-space-y-0\">\n\n        <!-- Title -->\n        <div class=\"tw-flex tw-items-center tw-space-x-3\"> \n          <cide-ele-icon class=\"tw-text-blue-600\">people</cide-ele-icon>\n          <div>\n            <h5 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">\n              {{ pageTitle() || ' ' }}\n            </h5>\n            <p class=\"tw-text-sm tw-text-gray-600\">\n              {{ pageSubtitle() || '' }}\n            </p>\n          </div>\n        </div>\n\n        <!-- Actions -->\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\n          <!-- Add User Button -->\n          <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"onAddUser()\"\n            class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">add</cide-ele-icon>\n            Add User\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Error Message -->\n  @if (error()) {\n  <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n    <div class=\"tw-flex\">\n      <cide-ele-icon name=\"exclamation-triangle\" class=\"tw-text-red-400\"></cide-ele-icon>\n      <div class=\"tw-ml-3\">\n        <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800\">Error</h3>\n        <p class=\"tw-text-sm tw-text-red-700 tw-mt-1\">{{ error() }}</p>\n      </div>\n    </div>\n  </div>\n  }\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n      <div class=\"tw-h-full tw-overflow-auto\">\n        <!-- Data Grid Component -->\n        <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers\"\n          [serverSidePagination]=\"true\" [totalServerItems]=\"totalItems()\" [currentServerPage]=\"currentPage()\"\n          [currentServerPageSize]=\"pageSize()\" (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- Template Definitions for Grid Renderers -->\n\n<!-- User Details Template -->\n<ng-template #userDetailsTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3\">\n    <div\n      class=\"tw-flex-shrink-0 tw-w-12 tw-h-12 tw-bg-blue-100 tw-rounded-full tw-flex tw-items-center tw-justify-center\">\n      <span class=\"tw-text-blue-600 tw-font-semibold tw-text-sm\">\n        {{ getUserInitials(row.user_firstname, row.user_lastname) }}\n      </span>\n    </div>\n    <div class=\"tw-flex-1 tw-min-w-0\">\n      <p class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate\" [title]=\"row.user_fullname\">\n        {{ row.user_fullname || 'Unknown User' }}\n      </p>\n      <p class=\"tw-text-xs tw-text-blue-600 tw-truncate tw-font-medium\" [title]=\"'Username: ' + row.user_username\">\n        @{{ row.user_username || 'No username' }}\n      </p>\n      <p class=\"tw-text-xs tw-text-gray-400 tw-truncate\" [title]=\"'ID: ' + row._id\">\n        ID: {{ row._id?.substring(0, 8) }}...\n      </p>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Contact Info Template -->\n<ng-template #contactInfoTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-flex tw-items-center\" [title]=\"'Email: ' + row.user_emailid\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path d=\"M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z\" />\n        <path d=\"M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ row.user_emailid || 'No email' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600 tw-flex tw-items-center\" [title]=\"'Mobile: ' + row.user_mobileno\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path\n          d=\"M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ row.user_mobileno || 'No mobile' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-500 tw-flex tw-items-center\"\n      [title]=\"'Password Change: ' + getPasswordChangeText(row.user_passwordchangeonlogin)\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path fill-rule=\"evenodd\"\n          d=\"M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z\"\n          clip-rule=\"evenodd\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ getPasswordChangeText(row.user_passwordchangeonlogin) }}</span>\n    </p>\n  </div>\n</ng-template>\n\n\n\n<!-- Validity Template -->\n<ng-template #validityTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-text-center tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-font-medium\">\n      Validity managed per entity\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600\">\n      Check entity mappings for details\n    </p>\n  </div>\n</ng-template>\n\n<!-- Status Template -->\n<ng-template #statusTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-flex tw-justify-center\">\n    @if (row.user_isactive) {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n      <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n        <circle cx=\"4\" cy=\"4\" r=\"3\" />\n      </svg>\n      Active\n    </span>\n    } @else {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800\">\n      <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n        <circle cx=\"4\" cy=\"4\" r=\"3\" />\n      </svg>\n      Inactive\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Actions Template using cide-ele-dropdown -->\n<ng-template #actionsTemplate let-value let-row=\"row\" let-column=\"column\">\n  <cide-ele-dropdown [items]=\"getDropdownItems(row)\" [config]=\"{  triggerIcon: 'more_vert', triggerSize: 'sm', usePortal: true, minWidth: 200 }\" (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n</cide-lyt-shared-wrapper>", styles: [".user-master-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserListComponent, decorators: [{
             type: Component,
@@ -16934,11 +17033,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         FormsModule,
                         CideIconComponent,
                         CideEleButtonComponent,
-                        CideSelectComponent,
                         CideEleDataGridComponent,
-                        CideEleDropdownComponent
-                    ], template: "<!-- User Master List Container -->\n<div class=\"user-master-listing-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-table tw-h-full\">\n\n  <!-- Header Section with Filters -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n      <div\n        class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-4 sm:tw-space-y-0\">\n\n        <!-- Title -->\n        <div class=\"tw-flex tw-items-center tw-space-x-3\"> \n          <cide-ele-icon class=\"tw-text-blue-600\">people</cide-ele-icon>\n          <div>\n            <h5 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">\n              {{ pageTitle() || ' ' }}\n            </h5>\n            <p class=\"tw-text-sm tw-text-gray-600\">\n              {{ pageSubtitle() || '' }}\n            </p>\n          </div>\n        </div>\n\n        <!-- Actions -->\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\n          <!-- Add User Button -->\n          <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"onAddUser()\"\n            class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">add</cide-ele-icon>\n            Add User\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Error Message -->\n  @if (error()) {\n  <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n    <div class=\"tw-flex\">\n      <cide-ele-icon name=\"exclamation-triangle\" class=\"tw-text-red-400\"></cide-ele-icon>\n      <div class=\"tw-ml-3\">\n        <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800\">Error</h3>\n        <p class=\"tw-text-sm tw-text-red-700 tw-mt-1\">{{ error() }}</p>\n      </div>\n    </div>\n  </div>\n  }\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n      <div class=\"tw-h-full tw-overflow-auto\">\n        <!-- Data Grid Component -->\n        <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers\"\n          [serverSidePagination]=\"true\" [totalServerItems]=\"totalItems()\" [currentServerPage]=\"currentPage()\"\n          [currentServerPageSize]=\"pageSize()\" (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- Template Definitions for Grid Renderers -->\n\n<!-- User Details Template -->\n<ng-template #userDetailsTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3\">\n    <div\n      class=\"tw-flex-shrink-0 tw-w-12 tw-h-12 tw-bg-blue-100 tw-rounded-full tw-flex tw-items-center tw-justify-center\">\n      <span class=\"tw-text-blue-600 tw-font-semibold tw-text-sm\">\n        {{ getUserInitials(row.user_firstname, row.user_lastname) }}\n      </span>\n    </div>\n    <div class=\"tw-flex-1 tw-min-w-0\">\n      <p class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate\" [title]=\"row.user_fullname\">\n        {{ row.user_fullname || 'Unknown User' }}\n      </p>\n      <p class=\"tw-text-xs tw-text-blue-600 tw-truncate tw-font-medium\" [title]=\"'Username: ' + row.user_username\">\n        @{{ row.user_username || 'No username' }}\n      </p>\n      <p class=\"tw-text-xs tw-text-gray-400 tw-truncate\" [title]=\"'ID: ' + row._id\">\n        ID: {{ row._id?.substring(0, 8) }}...\n      </p>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Contact Info Template -->\n<ng-template #contactInfoTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-flex tw-items-center\" [title]=\"'Email: ' + row.user_emailid\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path d=\"M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z\" />\n        <path d=\"M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ row.user_emailid || 'No email' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600 tw-flex tw-items-center\" [title]=\"'Mobile: ' + row.user_mobileno\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path\n          d=\"M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ row.user_mobileno || 'No mobile' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-500 tw-flex tw-items-center\"\n      [title]=\"'Password Change: ' + getPasswordChangeText(row.user_passwordchangeonlogin)\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path fill-rule=\"evenodd\"\n          d=\"M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z\"\n          clip-rule=\"evenodd\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ getPasswordChangeText(row.user_passwordchangeonlogin) }}</span>\n    </p>\n  </div>\n</ng-template>\n\n\n\n<!-- Validity Template -->\n<ng-template #validityTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-text-center tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-font-medium\">\n      Validity managed per entity\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600\">\n      Check entity mappings for details\n    </p>\n  </div>\n</ng-template>\n\n<!-- Status Template -->\n<ng-template #statusTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-flex tw-justify-center\">\n    @if (row.user_isactive) {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n      <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n        <circle cx=\"4\" cy=\"4\" r=\"3\" />\n      </svg>\n      Active\n    </span>\n    } @else {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800\">\n      <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n        <circle cx=\"4\" cy=\"4\" r=\"3\" />\n      </svg>\n      Inactive\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Actions Template using cide-ele-dropdown -->\n<ng-template #actionsTemplate let-value let-row=\"row\" let-column=\"column\">\n  <cide-ele-dropdown [items]=\"getDropdownItems(row)\" [config]=\"{  triggerIcon: 'more_vert', triggerSize: 'sm', usePortal: true, minWidth: 200 }\" (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>", styles: [".user-master-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"] }]
-        }], propDecorators: { gridComponent: [{
+                        CideEleDropdownComponent,
+                        CideLytSharedWrapperComponent
+                    ], template: "<!-- User List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'auth_user_mst' }\">\n<div class=\"user-master-listing-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-table tw-h-full\">\n\n  <!-- Header Section with Filters -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n      <div\n        class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-4 sm:tw-space-y-0\">\n\n        <!-- Title -->\n        <div class=\"tw-flex tw-items-center tw-space-x-3\"> \n          <cide-ele-icon class=\"tw-text-blue-600\">people</cide-ele-icon>\n          <div>\n            <h5 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">\n              {{ pageTitle() || ' ' }}\n            </h5>\n            <p class=\"tw-text-sm tw-text-gray-600\">\n              {{ pageSubtitle() || '' }}\n            </p>\n          </div>\n        </div>\n\n        <!-- Actions -->\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\n          <!-- Add User Button -->\n          <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"onAddUser()\"\n            class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">add</cide-ele-icon>\n            Add User\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Error Message -->\n  @if (error()) {\n  <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n    <div class=\"tw-flex\">\n      <cide-ele-icon name=\"exclamation-triangle\" class=\"tw-text-red-400\"></cide-ele-icon>\n      <div class=\"tw-ml-3\">\n        <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800\">Error</h3>\n        <p class=\"tw-text-sm tw-text-red-700 tw-mt-1\">{{ error() }}</p>\n      </div>\n    </div>\n  </div>\n  }\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n      <div class=\"tw-h-full tw-overflow-auto\">\n        <!-- Data Grid Component -->\n        <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers\"\n          [serverSidePagination]=\"true\" [totalServerItems]=\"totalItems()\" [currentServerPage]=\"currentPage()\"\n          [currentServerPageSize]=\"pageSize()\" (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- Template Definitions for Grid Renderers -->\n\n<!-- User Details Template -->\n<ng-template #userDetailsTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3\">\n    <div\n      class=\"tw-flex-shrink-0 tw-w-12 tw-h-12 tw-bg-blue-100 tw-rounded-full tw-flex tw-items-center tw-justify-center\">\n      <span class=\"tw-text-blue-600 tw-font-semibold tw-text-sm\">\n        {{ getUserInitials(row.user_firstname, row.user_lastname) }}\n      </span>\n    </div>\n    <div class=\"tw-flex-1 tw-min-w-0\">\n      <p class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate\" [title]=\"row.user_fullname\">\n        {{ row.user_fullname || 'Unknown User' }}\n      </p>\n      <p class=\"tw-text-xs tw-text-blue-600 tw-truncate tw-font-medium\" [title]=\"'Username: ' + row.user_username\">\n        @{{ row.user_username || 'No username' }}\n      </p>\n      <p class=\"tw-text-xs tw-text-gray-400 tw-truncate\" [title]=\"'ID: ' + row._id\">\n        ID: {{ row._id?.substring(0, 8) }}...\n      </p>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Contact Info Template -->\n<ng-template #contactInfoTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-flex tw-items-center\" [title]=\"'Email: ' + row.user_emailid\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path d=\"M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z\" />\n        <path d=\"M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ row.user_emailid || 'No email' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600 tw-flex tw-items-center\" [title]=\"'Mobile: ' + row.user_mobileno\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path\n          d=\"M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ row.user_mobileno || 'No mobile' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-500 tw-flex tw-items-center\"\n      [title]=\"'Password Change: ' + getPasswordChangeText(row.user_passwordchangeonlogin)\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path fill-rule=\"evenodd\"\n          d=\"M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z\"\n          clip-rule=\"evenodd\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ getPasswordChangeText(row.user_passwordchangeonlogin) }}</span>\n    </p>\n  </div>\n</ng-template>\n\n\n\n<!-- Validity Template -->\n<ng-template #validityTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-text-center tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-font-medium\">\n      Validity managed per entity\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600\">\n      Check entity mappings for details\n    </p>\n  </div>\n</ng-template>\n\n<!-- Status Template -->\n<ng-template #statusTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-flex tw-justify-center\">\n    @if (row.user_isactive) {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n      <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n        <circle cx=\"4\" cy=\"4\" r=\"3\" />\n      </svg>\n      Active\n    </span>\n    } @else {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800\">\n      <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n        <circle cx=\"4\" cy=\"4\" r=\"3\" />\n      </svg>\n      Inactive\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Actions Template using cide-ele-dropdown -->\n<ng-template #actionsTemplate let-value let-row=\"row\" let-column=\"column\">\n  <cide-ele-dropdown [items]=\"getDropdownItems(row)\" [config]=\"{  triggerIcon: 'more_vert', triggerSize: 'sm', usePortal: true, minWidth: 200 }\" (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n</cide-lyt-shared-wrapper>", styles: [".user-master-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { gridComponent: [{
                 type: ViewChild,
                 args: [CideEleDataGridComponent]
             }], actionsTemplate: [{
@@ -19393,39 +19492,23 @@ class CideCoreUserRoleListComponent {
     }
     // User Role actions
     createUserRole() {
-        if (!this.rightsService.hasRight('CREATE')) {
-            this.notificationService.error('You do not have permission to create user roles');
-            return;
-        }
         console.log('➕ Navigating to create user role');
         this.notificationService.info('Opening user role creation form.');
         this.router.navigate(['/control-panel/user-role/create']);
     }
     viewUserRole(userRole) {
-        if (!this.rightsService.hasRight('VIEW')) {
-            this.notificationService.error('You do not have permission to view user roles');
-            return;
-        }
         console.log('👁️ Viewing user role:', userRole);
         this.notificationService.info(`Opening user role "${userRole.syusrol_role_name}" for viewing.`);
         const queryParams = generateStringFromObject({ syusrol_id: userRole._id });
         this.router.navigate(['/control-panel/user-role/view', queryParams]);
     }
     editUserRole(userRole) {
-        if (!this.rightsService.hasRight('EDIT')) {
-            this.notificationService.error('You do not have permission to edit user roles');
-            return;
-        }
         console.log('✏️ Editing user role:', userRole);
         this.notificationService.info(`Opening user role "${userRole.syusrol_role_name}" for editing.`);
         const queryParams = generateStringFromObject({ syusrol_id: userRole._id });
         this.router.navigate(['/control-panel/user-role/edit', queryParams]);
     }
     deleteUserRole(userRole) {
-        if (!this.rightsService.hasRight('DELETE')) {
-            this.notificationService.error('You do not have permission to delete user roles');
-            return;
-        }
         console.log('🗑️ DELETE METHOD CALLED - Deleting user role:', userRole);
         // Show confirmation dialog
         console.log('🔔 Showing confirmation dialog for delete');
@@ -19463,10 +19546,6 @@ class CideCoreUserRoleListComponent {
         });
     }
     toggleUserRoleStatus(userRole) {
-        if (!this.rightsService.hasRight('TOGGLE_STATUS')) {
-            this.notificationService.error('You do not have permission to toggle user role status');
-            return;
-        }
         console.log('🔄 Toggling user role status:', userRole);
         const action = userRole.syusrol_isactive ? 'deactivate' : 'activate';
         const actionText = userRole.syusrol_isactive ? 'Deactivate' : 'Activate';
@@ -19527,32 +19606,39 @@ class CideCoreUserRoleListComponent {
         console.log('🔽 User role data:', {
             isActive: userRole.syusrol_isactive
         });
-        const items = [
-            {
+        const items = [];
+        if (this.canView()) {
+            items.push({
                 id: 'view',
                 label: 'View Details',
                 icon: 'visibility',
                 iconColor: 'tw-text-gray-400',
                 textColor: 'tw-text-gray-700',
                 hoverBgColor: 'hover:tw-bg-gray-100'
-            },
-            {
+            });
+        }
+        if (this.canEdit()) {
+            items.push({
                 id: 'edit',
                 label: 'Edit',
                 icon: 'edit',
                 iconColor: 'tw-text-blue-400',
                 textColor: 'tw-text-blue-600',
                 hoverBgColor: 'hover:tw-bg-blue-50'
-            },
-            {
+            });
+        }
+        if (this.canToggleStatus()) {
+            items.push({
                 id: 'toggle-status',
                 label: userRole.syusrol_isactive ? 'Deactivate' : 'Activate',
                 icon: userRole.syusrol_isactive ? 'toggle_off' : 'toggle_on',
                 iconColor: 'tw-text-gray-400',
                 textColor: 'tw-text-gray-700',
                 hoverBgColor: 'hover:tw-bg-gray-100'
-            },
-            {
+            });
+        }
+        if (this.canDelete()) {
+            items.push({
                 id: 'delete',
                 label: 'Delete',
                 icon: 'delete',
@@ -19560,8 +19646,8 @@ class CideCoreUserRoleListComponent {
                 textColor: 'tw-text-red-600',
                 hoverBgColor: 'hover:tw-bg-red-50',
                 divider: true
-            }
-        ];
+            });
+        }
         return items;
     }
     /**
@@ -20164,11 +20250,6 @@ class CideCoreUserRoleFormComponent {
             this.router.navigate(['/control-panel/user-role']);
             return;
         }
-        const requiredRight = this.isEditMode() ? 'EDIT' : 'CREATE';
-        if (!this.rightsService.hasRight(requiredRight)) {
-            this.notificationService.error(`You do not have permission to ${this.isEditMode() ? 'edit' : 'create'} user roles`);
-            return;
-        }
         console.log("userRoleForm", this.userRoleForm);
         if (this.userRoleForm.invalid) {
             this.notificationService.error('Please fill in all required fields correctly.');