cloud-ide-core 2.0.3 → 2.0.5

package/fesm2022/cloud-ide-core.mjs

@@ -1,3 +1,4 @@
+import { authGuard } from 'cloud-ide-auth';
 import * as i0 from '@angular/core';
 import { Injectable, Component, inject, DestroyRef, viewChild, signal, computed, ViewChild } from '@angular/core';
 import * as i1$1 from '@angular/common';
@@ -19,6 +20,7 @@ const coreRoutes = [
         path: 'menu-management',
         loadComponent: () => Promise.resolve().then(function () { return menuList_component; }).then(c => c.CideCoreMenuListComponent),
         title: 'Menu Management',
+        canActivate: [authGuard],
         data: {
             reuseTab: true,
             sypg_page_code: "core_menu_list"
@@ -27,6 +29,7 @@ const coreRoutes = [
         path: 'department',
         loadComponent: () => Promise.resolve().then(function () { return departmentList_component; }).then(c => c.CideCoreDepartmentListComponent),
         title: 'Department Management',
+        canActivate: [authGuard],
         data: {
             reuseTab: true,
             sypg_page_code: "core_department_list"
@@ -36,6 +39,7 @@ const coreRoutes = [
         path: 'designation',
         loadComponent: () => Promise.resolve().then(function () { return designationList_component; }).then(c => c.CideCoreDesignationListComponent),
         title: 'Designation Management',
+        canActivate: [authGuard],
         data: {
             reuseTab: true,
             sypg_page_code: "core_designation_list"
@@ -45,6 +49,7 @@ const coreRoutes = [
         path: 'grade-level',
         loadComponent: () => Promise.resolve().then(function () { return gradeLevelList_component; }).then(c => c.CideCoreGradeLevelListComponent),
         title: 'Grade Level Management',
+        canActivate: [authGuard],
         data: {
             reuseTab: true,
             sypg_page_code: "core_grade_level_list"
@@ -54,6 +59,7 @@ const coreRoutes = [
         path: 'page',
         loadComponent: () => Promise.resolve().then(function () { return pageList_component; }).then(c => c.CideCorePageListComponent),
         title: 'Page Management',
+        canActivate: [authGuard],
         data: {
             reuseTab: true,
             sypg_page_code: "core_page_management"
@@ -63,6 +69,7 @@ const coreRoutes = [
         path: 'page-form',
         loadComponent: () => import('./cloud-ide-core-page-form.component-DzBvQ1kV.mjs').then(c => c.CideCorePageFormComponent),
         title: 'Page Form',
+        canActivate: [authGuard],
         data: {
             reuseTab: true,
             sypg_page_code: "core_page_management"
@@ -72,6 +79,7 @@ const coreRoutes = [
         path: 'page-form/:query',
         loadComponent: () => import('./cloud-ide-core-page-form.component-DzBvQ1kV.mjs').then(c => c.CideCorePageFormComponent),
         title: 'Page Form',
+        canActivate: [authGuard],
         data: {
             reuseTab: true,
             sypg_page_code: "core_page_management"
@@ -81,6 +89,7 @@ const coreRoutes = [
         path: 'page-theme',
         loadComponent: () => Promise.resolve().then(function () { return pageTheme_component; }).then(c => c.CideCorePageThemeComponent),
         title: 'Page Theme Management',
+        canActivate: [authGuard],
         data: {
             reuseTab: true,
             sypg_page_code: "core_page_theme"
@@ -90,6 +99,7 @@ const coreRoutes = [
         path: 'page-theme/:query',
         loadComponent: () => Promise.resolve().then(function () { return pageTheme_component; }).then(c => c.CideCorePageThemeComponent),
         title: 'Page Theme Management',
+        canActivate: [authGuard],
         data: {
             reuseTab: true,
             sypg_page_code: "core_page_theme"
@@ -99,6 +109,7 @@ const coreRoutes = [
         path: 'page-controls',
         loadComponent: () => Promise.resolve().then(function () { return pageControls_component; }).then(c => c.CideCorePageControlsComponent),
         title: 'Page Controls Management',
+        canActivate: [authGuard],
         data: {
             reuseTab: true,
             sypg_page_code: "core_page_controls"
@@ -108,6 +119,7 @@ const coreRoutes = [
         path: 'page-controls/:query',
         loadComponent: () => Promise.resolve().then(function () { return pageControls_component; }).then(c => c.CideCorePageControlsComponent),
         title: 'Page Controls Management',
+        canActivate: [authGuard],
         data: {
             reuseTab: true,
             sypg_page_code: "core_page_controls"
@@ -117,6 +129,7 @@ const coreRoutes = [
         path: 'general_master_entry',
         loadComponent: () => Promise.resolve().then(function () { return generalMaster_component; }).then(c => c.CideCoreGeneralMasterComponent),
         title: 'General Master Entry',
+        canActivate: [authGuard],
         data: {
             reuseTab: true,
             sypg_page_code: "core_general_master"
@@ -126,6 +139,7 @@ const coreRoutes = [
         path: 'general_master_entry/:query',
         loadComponent: () => Promise.resolve().then(function () { return generalMaster_component; }).then(c => c.CideCoreGeneralMasterComponent),
         title: 'General Master Entry',
+        canActivate: [authGuard],
         data: {
             reuseTab: true,
             sypg_page_code: "core_general_master"
@@ -135,6 +149,7 @@ const coreRoutes = [
         path: 'general_type_entry',
         loadComponent: () => Promise.resolve().then(function () { return generalMasterType_component; }).then(c => c.CideCoreGeneralMasterTypeComponent),
         title: 'General Type Entry',
+        canActivate: [authGuard],
         data: {
             reuseTab: true,
             sypg_page_code: "core_general_master_type"
@@ -144,6 +159,7 @@ const coreRoutes = [
         path: 'general_type_entry/:query',
         loadComponent: () => Promise.resolve().then(function () { return generalMasterType_component; }).then(c => c.CideCoreGeneralMasterTypeComponent),
         title: 'General Type Entry',
+        canActivate: [authGuard],
         data: {
             reuseTab: true,
             sypg_page_code: "core_general_master_type"
@@ -154,6 +170,7 @@ const coreRoutes = [
         path: 'user-master',
         loadComponent: () => Promise.resolve().then(function () { return userList_component; }).then(c => c.CideCoreUserListComponent),
         title: 'User Management',
+        canActivate: [authGuard],
         data: {
             reuseTab: true,
             sypg_page_code: "auth_user_mst"
@@ -163,6 +180,7 @@ const coreRoutes = [
         path: 'user-master/create',
         loadComponent: () => Promise.resolve().then(function () { return userCreate_component; }).then(c => c.CideCoreUserCreateComponent),
         title: 'Create User',
+        canActivate: [authGuard],
         data: {
             reuseTab: true,
             sypg_page_code: "core_user_management_create"
@@ -172,6 +190,7 @@ const coreRoutes = [
         path: 'user-master/edit/:query',
         loadComponent: () => Promise.resolve().then(function () { return userCreate_component; }).then(c => c.CideCoreUserCreateComponent),
         title: 'Edit User',
+        canActivate: [authGuard],
         data: {
             reuseTab: true,
             sypg_page_code: "core_user_management_create"
@@ -181,6 +200,7 @@ const coreRoutes = [
         path: 'user-master/view/:query',
         loadComponent: () => Promise.resolve().then(function () { return userCreate_component; }).then(c => c.CideCoreUserCreateComponent),
         title: 'View User',
+        canActivate: [authGuard],
         data: {
             reuseTab: true,
             sypg_page_code: "core_user_management_create"
@@ -189,7 +209,7 @@ const coreRoutes = [
     {
         path: "entity-list",
         loadComponent: () => Promise.resolve().then(function () { return entityList_component; }).then(c => c.CideCoreEntityListComponent),
-        // canActivate: [authGuard],
+        canActivate: [authGuard],
         data: {
             reuseTab: true,
             sypg_page_code: "admin_entity_list"
@@ -198,7 +218,7 @@ const coreRoutes = [
     {
         path: "entity-create",
         loadComponent: () => Promise.resolve().then(function () { return entityCreate_component; }).then(c => c.CideCoreEntityCreateComponent),
-        // canActivate: [authGuard],
+        canActivate: [authGuard],
         data: {
             reuseTab: true,
             sypg_page_code: "core_entity_form"
@@ -207,11 +227,52 @@ const coreRoutes = [
     {
         path: "entity-create/:query",
         loadComponent: () => Promise.resolve().then(function () { return entityCreate_component; }).then(c => c.CideCoreEntityCreateComponent),
-        // canActivate: [authGuard],
+        canActivate: [authGuard],
         data: {
             reuseTab: true,
             sypg_page_code: "core_entity_form"
         }
+    },
+    // User Role Management Routes
+    {
+        path: 'user-role',
+        loadComponent: () => import('./cloud-ide-core-user-role-list.component-C6h9Zcyp.mjs').then(c => c.CideCoreUserRoleListComponent),
+        title: 'User Role Management',
+        canActivate: [authGuard],
+        data: {
+            reuseTab: true,
+            sypg_page_code: "core_user_role_list"
+        }
+    },
+    {
+        path: 'user-role/create',
+        loadComponent: () => import('./cloud-ide-core-user-role-form.component-CjoX7xmg.mjs').then(c => c.CideCoreUserRoleFormComponent),
+        title: 'Create User Role',
+        canActivate: [authGuard],
+        data: {
+            reuseTab: true,
+            sypg_page_code: "core_user_role_create"
+        }
+    },
+    {
+        path: 'user-role/edit/:query',
+        loadComponent: () => import('./cloud-ide-core-user-role-form.component-CjoX7xmg.mjs').then(c => c.CideCoreUserRoleFormComponent),
+        title: 'Edit User Role',
+        canActivate: [authGuard],
+        data: {
+            reuseTab: true,
+            sypg_page_code: "core_user_role_edit"
+        }
+    },
+    {
+        path: 'user-role/view/:query',
+        loadComponent: () => import('./cloud-ide-core-user-role-form.component-CjoX7xmg.mjs').then(c => c.CideCoreUserRoleFormComponent),
+        title: 'View User Role',
+        canActivate: [authGuard],
+        data: {
+            reuseTab: true,
+            sypg_page_code: "core_user_role_view"
+        }
     }
 ];
 
@@ -576,7 +637,7 @@ class CideCoreMenuListComponent {
         data: [],
         trackBy: '_id',
         pagination: {
-            enabled: true,
+            enabled: false,
             pageSize: 10,
             pageSizeOptions: [10, 25, 50, 100],
             showQuickJump: true,
@@ -723,10 +784,7 @@ class CideCoreMenuListComponent {
         this.error.set(null);
         console.log('📞 Calling menuService.getMenuList()...');
         const requestBody = {
-            total: this.totalItems(),
-            pageIndex: this.currentPage(),
-            pageSize: this.pageSize(),
-            query: this.searchTerm(),
+            pagination: false,
             sort: { order: 'asc', key: 'syme_order_by' }
         };
         console.log('📋 Request body:', requestBody);
@@ -1555,7 +1613,7 @@ class CideCoreMenuListComponent {
         console.log('✅ Test data loaded successfully');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreMenuListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreMenuListComponent, isStandalone: true, selector: "cide-core-menu-list", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuTypeRendererTemplate", first: true, predicate: ["menuTypeRendererTemplate"], 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        </cide-ele-select>\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      <!-- Active Status -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\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      </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      <!-- 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      <!-- 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      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <div class=\"tw-flex tw-space-x-2\">\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  <!-- 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\n      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\">menu</cide-ele-icon>\n        <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Menu Management</h5>\n      </div>\n\n      <!-- Actions -->\n      <div\n        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        <!-- Actions can be added here if needed -->\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 name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></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  <!-- Debug Information: Uncomment for development -->\n  <!--\n  <div class=\"tw-p-2 tw-bg-yellow-100 tw-text-xs tw-border-b tw-flex tw-justify-between tw-items-center\">\n    <span>Debug: Loading: {{ loading() }} | Items Count: {{ menuItems().length }} | Total: {{ totalItems() }} | Error: {{ error() }}</span>\n    <button cideEleButton variant=\"outline\" size=\"xs\" (click)=\"loadTestData()\" class=\"tw-ml-2\">\n      Load Test Data\n    </button>\n  </div>\n  -->\n  \n  <!-- Data Grid Component -->\n  <div class=\"tw-h-full tw-overflow-auto\">\n    \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      [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", 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]", 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", "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"], 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: CideCoreMenuListComponent, isStandalone: true, selector: "cide-core-menu-list", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuTypeRendererTemplate", first: true, predicate: ["menuTypeRendererTemplate"], 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        </cide-ele-select>\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      <!-- Active Status -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\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      </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      <!-- 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      <!-- 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      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <div class=\"tw-flex tw-space-x-2\">\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  <!-- 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\n      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\">menu</cide-ele-icon>\n        <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Menu Management</h5>\n      </div>\n\n      <!-- Actions -->\n      <div\n        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        <!-- Actions can be added here if needed -->\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 name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></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  <!-- Debug Information: Uncomment for development -->\n  <!--\n  <div class=\"tw-p-2 tw-bg-yellow-100 tw-text-xs tw-border-b tw-flex tw-justify-between tw-items-center\">\n    <span>Debug: Loading: {{ loading() }} | Items Count: {{ menuItems().length }} | Total: {{ totalItems() }} | Error: {{ error() }}</span>\n    <button cideEleButton variant=\"outline\" size=\"xs\" (click)=\"loadTestData()\" class=\"tw-ml-2\">\n      Load Test Data\n    </button>\n  </div>\n  -->\n  \n  <!-- Data Grid Component -->\n  <div class=\"tw-h-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", 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]", 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", "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"], 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreMenuListComponent, decorators: [{
             type: Component,
@@ -1570,7 +1628,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         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        </cide-ele-select>\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      <!-- Active Status -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\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      </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      <!-- 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      <!-- 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      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <div class=\"tw-flex tw-space-x-2\">\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  <!-- 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\n      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\">menu</cide-ele-icon>\n        <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Menu Management</h5>\n      </div>\n\n      <!-- Actions -->\n      <div\n        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        <!-- Actions can be added here if needed -->\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 name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></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  <!-- Debug Information: Uncomment for development -->\n  <!--\n  <div class=\"tw-p-2 tw-bg-yellow-100 tw-text-xs tw-border-b tw-flex tw-justify-between tw-items-center\">\n    <span>Debug: Loading: {{ loading() }} | Items Count: {{ menuItems().length }} | Total: {{ totalItems() }} | Error: {{ error() }}</span>\n    <button cideEleButton variant=\"outline\" size=\"xs\" (click)=\"loadTestData()\" class=\"tw-ml-2\">\n      Load Test Data\n    </button>\n  </div>\n  -->\n  \n  <!-- Data Grid Component -->\n  <div class=\"tw-h-full tw-overflow-auto\">\n    \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      [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" }]
+                    ], 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        </cide-ele-select>\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      <!-- Active Status -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\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      </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      <!-- 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      <!-- 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      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <div class=\"tw-flex tw-space-x-2\">\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  <!-- 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\n      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\">menu</cide-ele-icon>\n        <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Menu Management</h5>\n      </div>\n\n      <!-- Actions -->\n      <div\n        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        <!-- Actions can be added here if needed -->\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 name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></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  <!-- Debug Information: Uncomment for development -->\n  <!--\n  <div class=\"tw-p-2 tw-bg-yellow-100 tw-text-xs tw-border-b tw-flex tw-justify-between tw-items-center\">\n    <span>Debug: Loading: {{ loading() }} | Items Count: {{ menuItems().length }} | Total: {{ totalItems() }} | Error: {{ error() }}</span>\n    <button cideEleButton variant=\"outline\" size=\"xs\" (click)=\"loadTestData()\" class=\"tw-ml-2\">\n      Load Test Data\n    </button>\n  </div>\n  -->\n  \n  <!-- Data Grid Component -->\n  <div class=\"tw-h-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" }]
         }], ctorParameters: () => [] });
 
 var menuList_component = /*#__PURE__*/Object.freeze({
@@ -7769,7 +7827,7 @@ class CideCoreGeneralMasterTypeComponent {
         document.dispatchEvent(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreGeneralMasterTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreGeneralMasterTypeComponent, isStandalone: true, selector: "cide-core-general-master-type", viewQueries: [{ propertyName: "typeDetailsRendererTemplate", first: true, predicate: ["typeDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "typeStatusRendererTemplate", first: true, predicate: ["typeStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- General Master Type 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-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-white\">\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n          <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Type' : 'Quick Add Type' }}</h6>\n        </div>\n        \n        <!-- Parent Type Info (shown when adding child) -->\n        @if (typeForm.get('sygmt_id_sygmt')?.value) {\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-1 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\">{{ getParentTypeDisplay() }}</span>\n            </div>\n            <button \n              cideEleButton \n              variant=\"ghost\" \n              size=\"xs\" \n              type=\"button\" \n              (click)=\"clearParentType()\" \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]=\"typeForm\" (ngSubmit)=\"onSubmit($event)\" class=\"tw-space-y-2 tw-relative\">\n        <!-- Hidden field for parent type ID -->\n        <input type=\"hidden\" formControlName=\"sygmt_id_sygmt\">\n        \n        <!-- First Row - Basic fields -->\n        <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-6 tw-gap-2\">\n          <!-- Type Code -->\n          <div class=\"lg:tw-col-span-1\">\n            <cide-ele-input \n              formControlName=\"sygmt_code\" \n              label=\"Type Code*\" \n              placeholder=\"Enter type code\"\n              size=\"sm\"\n              [maxlength]=\"40\">\n            </cide-ele-input>\n          </div>\n          \n          <!-- Type Title -->\n          <div class=\"lg:tw-col-span-2\">\n            <cide-ele-input \n              formControlName=\"sygmt_title\" \n              label=\"Type Title*\" \n              placeholder=\"Enter type title\"\n              size=\"sm\"\n              [maxlength]=\"100\">\n            </cide-ele-input>\n          </div>\n          \n          <!-- Active Status -->\n          <div class=\"lg:tw-col-span-1 tw-flex tw-items-center tw-pt-0\">\n            <cide-ele-input \n              formControlName=\"sygmt_isactive\"\n              type=\"checkbox\"\n              label=\"Active\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n        </div>\n        <!-- Second Row - JSON Configuration and Description/Save side by side -->\n        <div class=\"tw-flex tw-gap-4\">\n          <!-- JSON Configuration (60% width) -->\n          <div class=\"tw-w-3/5\">\n            <cide-ele-json-editor \n              formControlName=\"sygmt_configuration\" \n              label=\"Configuration*\" \n              size=\"sm\">\n            </cide-ele-json-editor>\n          </div>\n          \n          <!-- Description and Save Button (40% width) -->\n          <div class=\"tw-w-2/5 tw-flex tw-flex-col tw-space-y-4\">\n            <!-- Description -->\n            <div class=\"tw-flex-1\">\n              <cide-ele-textarea \n                formControlName=\"sygmt_desc\" \n                label=\"Description\" \n                placeholder=\"Enter description\"\n                size=\"sm\"\n                [maxlength]=\"255\" \n                [rows]=\"4\">\n              </cide-ele-textarea>\n            </div>\n            \n            <!-- Action Buttons -->\n            <div class=\"tw-flex tw-justify-end tw-space-x-2\">\n              <button \n                cideEleButton \n                variant=\"outline\" \n                size=\"sm\" \n                type=\"button\" \n                (click)=\"cancelForm()\"\n                [disabled]=\"loading()\"\n                class=\"tw-px-4 tw-py-2\">\n                Cancel\n              </button>\n              <button \n                cideEleButton \n                variant=\"primary\" \n                size=\"sm\" \n                type=\"submit\"\n                [disabled]=\"loading()\"\n                class=\"tw-px-4 tw-py-2\" [leftIcon]=\"isEditMode() ? 'edit' : 'add'\">\n                {{ isEditMode() ? 'Update' : 'Save' }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n\n  <!-- Header Section with Filters -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-4 tw-py-2 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-2 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-4 tw-h-4\">category</cide-ele-icon>\n          <h5 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">General Master Type 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-2 sm:tw-space-y-0 sm:tw-space-x-3\">\n\n        </div>\n      </div>\n\n      <!-- Error Message -->\n      @if (error()) {\n        <div class=\"tw-mt-3 tw-p-3 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 name=\"error\" class=\"tw-text-red-400 tw-w-4 tw-h-4 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n            <div class=\"tw-ml-2\">\n              <h3 class=\"tw-text-xs tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n              <p class=\"tw-text-xs 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]=\"templateRenderers()\"\n          (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Template Renderers -->\n<ng-template #typeDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-flex-col\">\n    <div class=\"tw-font-medium tw-text-gray-900\">{{ row.sygmt_title || 'N/A' }}</div>\n    <div class=\"tw-text-sm tw-text-gray-500 tw-truncate tw-max-w-xs\" title=\"{{ row.sygmt_desc || 'No description' }}\">{{ row.sygmt_desc || 'No description' }}</div>\n  </div>\n</ng-template>\n\n<ng-template #typeStatusRendererTemplate let-row=\"row\">\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\"\n        [class.tw-bg-green-100]=\"row.sygmt_isactive\"\n        [class.tw-text-green-800]=\"row.sygmt_isactive\"\n        [class.tw-bg-red-100]=\"!row.sygmt_isactive\"\n        [class.tw-text-red-800]=\"!row.sygmt_isactive\">\n    {{ row.sygmt_isactive ? 'Active' : 'Inactive' }}\n  </span>\n</ng-template>\n\n\n\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\">\n  <cide-ele-dropdown\n    [items]=\"getActionDropdownItems(row)\"\n    [config]=\"getDropdownConfig()\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "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]", 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", "size"], outputs: ["ngModelChange"] }, { 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: CideEleJsonEditorComponent, selector: "cide-ele-json-editor", inputs: ["label", "helperText", "required", "disabled", "showCharacterCount", "config"], outputs: ["valueChange", "objectChange", "errorsChange", "validChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreGeneralMasterTypeComponent, isStandalone: true, selector: "cide-core-general-master-type", viewQueries: [{ propertyName: "typeDetailsRendererTemplate", first: true, predicate: ["typeDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "typeStatusRendererTemplate", first: true, predicate: ["typeStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- General Master Type 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-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-white\">\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n          <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Type' : 'General Master Type Management' }}</h6>\n        </div>\n\n        <!-- Parent Type Info (shown when adding child) -->\n        @if (typeForm.get('sygmt_id_sygmt')?.value) {\n        <div\n          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-1 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\">{{ getParentTypeDisplay() }}</span>\n          </div>\n          <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearParentType()\"\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]=\"typeForm\" (ngSubmit)=\"onSubmit($event)\" class=\"tw-space-y-2 tw-relative\">\n        <!-- Hidden field for parent type ID -->\n        <input type=\"hidden\" formControlName=\"sygmt_id_sygmt\">\n\n        <!-- First Row - Basic fields -->\n        <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-6 tw-gap-2\">\n          <!-- Type Code -->\n          <div class=\"lg:tw-col-span-1\">\n            <cide-ele-input formControlName=\"sygmt_code\" label=\"Type Code*\" placeholder=\"Enter type code\" size=\"sm\"\n              [maxlength]=\"40\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Type Title -->\n          <div class=\"lg:tw-col-span-2\">\n            <cide-ele-input formControlName=\"sygmt_title\" label=\"Type Title*\" placeholder=\"Enter type title\" size=\"sm\"\n              [maxlength]=\"100\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Active Status -->\n          <div class=\"lg:tw-col-span-1 tw-flex tw-items-center tw-pt-0\">\n            <cide-ele-input formControlName=\"sygmt_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\n            </cide-ele-input>\n          </div>\n        </div>\n        <!-- Second Row - JSON Configuration and Description/Save side by side -->\n        <div class=\"tw-flex tw-gap-4\">\n          <!-- JSON Configuration (60% width) -->\n          <div class=\"tw-w-3/5\">\n            <cide-ele-json-editor formControlName=\"sygmt_configuration\" label=\"Configuration*\" size=\"sm\">\n            </cide-ele-json-editor>\n          </div>\n\n          <!-- Description and Save Button (40% width) -->\n          <div class=\"tw-w-2/5 tw-flex tw-flex-col tw-space-y-4\">\n            <!-- Description -->\n            <div class=\"tw-flex-1\">\n              <cide-ele-textarea formControlName=\"sygmt_desc\" label=\"Description\" placeholder=\"Enter description\"\n                size=\"sm\" [maxlength]=\"255\" [rows]=\"4\">\n              </cide-ele-textarea>\n            </div>\n\n            <!-- Action Buttons -->\n            <div class=\"tw-flex tw-justify-end tw-space-x-2\">\n              <button cideEleButton variant=\"outline\" size=\"sm\" type=\"button\" (click)=\"cancelForm()\"\n                [disabled]=\"loading()\" class=\"tw-px-4 tw-py-2\">\n                Cancel\n              </button>\n              <button cideEleButton variant=\"primary\" size=\"sm\" type=\"submit\" [disabled]=\"loading()\"\n                class=\"tw-px-4 tw-py-2\" [leftIcon]=\"isEditMode() ? 'edit' : 'add'\">\n                {{ isEditMode() ? 'Update' : 'Save' }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n\n  <!-- Header Section with Filters -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n\n      <!-- Error Message -->\n      @if (error()) {\n      <div class=\"tw-mt-3 tw-p-3 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 name=\"error\" class=\"tw-text-red-400 tw-w-4 tw-h-4 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n          <div class=\"tw-ml-2\">\n            <h3 class=\"tw-text-xs tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n            <p class=\"tw-text-xs 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 [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\"\n          (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Template Renderers -->\n<ng-template #typeDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-flex-col\">\n    <div class=\"tw-font-medium tw-text-gray-900\">{{ row.sygmt_title || 'N/A' }}</div>\n    <div class=\"tw-text-sm tw-text-gray-500 tw-truncate tw-max-w-xs\" title=\"{{ row.sygmt_desc || 'No description' }}\">{{\n      row.sygmt_desc || 'No description' }}</div>\n  </div>\n</ng-template>\n\n<ng-template #typeStatusRendererTemplate let-row=\"row\">\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\"\n    [class.tw-bg-green-100]=\"row.sygmt_isactive\" [class.tw-text-green-800]=\"row.sygmt_isactive\"\n    [class.tw-bg-red-100]=\"!row.sygmt_isactive\" [class.tw-text-red-800]=\"!row.sygmt_isactive\">\n    {{ row.sygmt_isactive ? 'Active' : 'Inactive' }}\n  </span>\n</ng-template>\n\n\n\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\">\n  <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"getDropdownConfig()\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "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]", 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", "size"], outputs: ["ngModelChange"] }, { 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: CideEleJsonEditorComponent, selector: "cide-ele-json-editor", inputs: ["label", "helperText", "required", "disabled", "showCharacterCount", "config"], outputs: ["valueChange", "objectChange", "errorsChange", "validChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreGeneralMasterTypeComponent, decorators: [{
             type: Component,
@@ -7784,7 +7842,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideIconComponent,
                         CideEleDropdownComponent,
                         CideEleJsonEditorComponent
-                    ], template: "<!-- General Master Type 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-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-white\">\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n          <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Type' : 'Quick Add Type' }}</h6>\n        </div>\n        \n        <!-- Parent Type Info (shown when adding child) -->\n        @if (typeForm.get('sygmt_id_sygmt')?.value) {\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-1 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\">{{ getParentTypeDisplay() }}</span>\n            </div>\n            <button \n              cideEleButton \n              variant=\"ghost\" \n              size=\"xs\" \n              type=\"button\" \n              (click)=\"clearParentType()\" \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]=\"typeForm\" (ngSubmit)=\"onSubmit($event)\" class=\"tw-space-y-2 tw-relative\">\n        <!-- Hidden field for parent type ID -->\n        <input type=\"hidden\" formControlName=\"sygmt_id_sygmt\">\n        \n        <!-- First Row - Basic fields -->\n        <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-6 tw-gap-2\">\n          <!-- Type Code -->\n          <div class=\"lg:tw-col-span-1\">\n            <cide-ele-input \n              formControlName=\"sygmt_code\" \n              label=\"Type Code*\" \n              placeholder=\"Enter type code\"\n              size=\"sm\"\n              [maxlength]=\"40\">\n            </cide-ele-input>\n          </div>\n          \n          <!-- Type Title -->\n          <div class=\"lg:tw-col-span-2\">\n            <cide-ele-input \n              formControlName=\"sygmt_title\" \n              label=\"Type Title*\" \n              placeholder=\"Enter type title\"\n              size=\"sm\"\n              [maxlength]=\"100\">\n            </cide-ele-input>\n          </div>\n          \n          <!-- Active Status -->\n          <div class=\"lg:tw-col-span-1 tw-flex tw-items-center tw-pt-0\">\n            <cide-ele-input \n              formControlName=\"sygmt_isactive\"\n              type=\"checkbox\"\n              label=\"Active\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n        </div>\n        <!-- Second Row - JSON Configuration and Description/Save side by side -->\n        <div class=\"tw-flex tw-gap-4\">\n          <!-- JSON Configuration (60% width) -->\n          <div class=\"tw-w-3/5\">\n            <cide-ele-json-editor \n              formControlName=\"sygmt_configuration\" \n              label=\"Configuration*\" \n              size=\"sm\">\n            </cide-ele-json-editor>\n          </div>\n          \n          <!-- Description and Save Button (40% width) -->\n          <div class=\"tw-w-2/5 tw-flex tw-flex-col tw-space-y-4\">\n            <!-- Description -->\n            <div class=\"tw-flex-1\">\n              <cide-ele-textarea \n                formControlName=\"sygmt_desc\" \n                label=\"Description\" \n                placeholder=\"Enter description\"\n                size=\"sm\"\n                [maxlength]=\"255\" \n                [rows]=\"4\">\n              </cide-ele-textarea>\n            </div>\n            \n            <!-- Action Buttons -->\n            <div class=\"tw-flex tw-justify-end tw-space-x-2\">\n              <button \n                cideEleButton \n                variant=\"outline\" \n                size=\"sm\" \n                type=\"button\" \n                (click)=\"cancelForm()\"\n                [disabled]=\"loading()\"\n                class=\"tw-px-4 tw-py-2\">\n                Cancel\n              </button>\n              <button \n                cideEleButton \n                variant=\"primary\" \n                size=\"sm\" \n                type=\"submit\"\n                [disabled]=\"loading()\"\n                class=\"tw-px-4 tw-py-2\" [leftIcon]=\"isEditMode() ? 'edit' : 'add'\">\n                {{ isEditMode() ? 'Update' : 'Save' }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n\n  <!-- Header Section with Filters -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-4 tw-py-2 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-2 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-4 tw-h-4\">category</cide-ele-icon>\n          <h5 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">General Master Type 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-2 sm:tw-space-y-0 sm:tw-space-x-3\">\n\n        </div>\n      </div>\n\n      <!-- Error Message -->\n      @if (error()) {\n        <div class=\"tw-mt-3 tw-p-3 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 name=\"error\" class=\"tw-text-red-400 tw-w-4 tw-h-4 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n            <div class=\"tw-ml-2\">\n              <h3 class=\"tw-text-xs tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n              <p class=\"tw-text-xs 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]=\"templateRenderers()\"\n          (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Template Renderers -->\n<ng-template #typeDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-flex-col\">\n    <div class=\"tw-font-medium tw-text-gray-900\">{{ row.sygmt_title || 'N/A' }}</div>\n    <div class=\"tw-text-sm tw-text-gray-500 tw-truncate tw-max-w-xs\" title=\"{{ row.sygmt_desc || 'No description' }}\">{{ row.sygmt_desc || 'No description' }}</div>\n  </div>\n</ng-template>\n\n<ng-template #typeStatusRendererTemplate let-row=\"row\">\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\"\n        [class.tw-bg-green-100]=\"row.sygmt_isactive\"\n        [class.tw-text-green-800]=\"row.sygmt_isactive\"\n        [class.tw-bg-red-100]=\"!row.sygmt_isactive\"\n        [class.tw-text-red-800]=\"!row.sygmt_isactive\">\n    {{ row.sygmt_isactive ? 'Active' : 'Inactive' }}\n  </span>\n</ng-template>\n\n\n\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\">\n  <cide-ele-dropdown\n    [items]=\"getActionDropdownItems(row)\"\n    [config]=\"getDropdownConfig()\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>" }]
+                    ], template: "<!-- General Master Type 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-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-white\">\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n          <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Type' : 'General Master Type Management' }}</h6>\n        </div>\n\n        <!-- Parent Type Info (shown when adding child) -->\n        @if (typeForm.get('sygmt_id_sygmt')?.value) {\n        <div\n          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-1 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\">{{ getParentTypeDisplay() }}</span>\n          </div>\n          <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearParentType()\"\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]=\"typeForm\" (ngSubmit)=\"onSubmit($event)\" class=\"tw-space-y-2 tw-relative\">\n        <!-- Hidden field for parent type ID -->\n        <input type=\"hidden\" formControlName=\"sygmt_id_sygmt\">\n\n        <!-- First Row - Basic fields -->\n        <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-6 tw-gap-2\">\n          <!-- Type Code -->\n          <div class=\"lg:tw-col-span-1\">\n            <cide-ele-input formControlName=\"sygmt_code\" label=\"Type Code*\" placeholder=\"Enter type code\" size=\"sm\"\n              [maxlength]=\"40\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Type Title -->\n          <div class=\"lg:tw-col-span-2\">\n            <cide-ele-input formControlName=\"sygmt_title\" label=\"Type Title*\" placeholder=\"Enter type title\" size=\"sm\"\n              [maxlength]=\"100\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Active Status -->\n          <div class=\"lg:tw-col-span-1 tw-flex tw-items-center tw-pt-0\">\n            <cide-ele-input formControlName=\"sygmt_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\n            </cide-ele-input>\n          </div>\n        </div>\n        <!-- Second Row - JSON Configuration and Description/Save side by side -->\n        <div class=\"tw-flex tw-gap-4\">\n          <!-- JSON Configuration (60% width) -->\n          <div class=\"tw-w-3/5\">\n            <cide-ele-json-editor formControlName=\"sygmt_configuration\" label=\"Configuration*\" size=\"sm\">\n            </cide-ele-json-editor>\n          </div>\n\n          <!-- Description and Save Button (40% width) -->\n          <div class=\"tw-w-2/5 tw-flex tw-flex-col tw-space-y-4\">\n            <!-- Description -->\n            <div class=\"tw-flex-1\">\n              <cide-ele-textarea formControlName=\"sygmt_desc\" label=\"Description\" placeholder=\"Enter description\"\n                size=\"sm\" [maxlength]=\"255\" [rows]=\"4\">\n              </cide-ele-textarea>\n            </div>\n\n            <!-- Action Buttons -->\n            <div class=\"tw-flex tw-justify-end tw-space-x-2\">\n              <button cideEleButton variant=\"outline\" size=\"sm\" type=\"button\" (click)=\"cancelForm()\"\n                [disabled]=\"loading()\" class=\"tw-px-4 tw-py-2\">\n                Cancel\n              </button>\n              <button cideEleButton variant=\"primary\" size=\"sm\" type=\"submit\" [disabled]=\"loading()\"\n                class=\"tw-px-4 tw-py-2\" [leftIcon]=\"isEditMode() ? 'edit' : 'add'\">\n                {{ isEditMode() ? 'Update' : 'Save' }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n\n  <!-- Header Section with Filters -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n\n      <!-- Error Message -->\n      @if (error()) {\n      <div class=\"tw-mt-3 tw-p-3 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 name=\"error\" class=\"tw-text-red-400 tw-w-4 tw-h-4 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n          <div class=\"tw-ml-2\">\n            <h3 class=\"tw-text-xs tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n            <p class=\"tw-text-xs 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 [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\"\n          (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Template Renderers -->\n<ng-template #typeDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-flex-col\">\n    <div class=\"tw-font-medium tw-text-gray-900\">{{ row.sygmt_title || 'N/A' }}</div>\n    <div class=\"tw-text-sm tw-text-gray-500 tw-truncate tw-max-w-xs\" title=\"{{ row.sygmt_desc || 'No description' }}\">{{\n      row.sygmt_desc || 'No description' }}</div>\n  </div>\n</ng-template>\n\n<ng-template #typeStatusRendererTemplate let-row=\"row\">\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\"\n    [class.tw-bg-green-100]=\"row.sygmt_isactive\" [class.tw-text-green-800]=\"row.sygmt_isactive\"\n    [class.tw-bg-red-100]=\"!row.sygmt_isactive\" [class.tw-text-red-800]=\"!row.sygmt_isactive\">\n    {{ row.sygmt_isactive ? 'Active' : 'Inactive' }}\n  </span>\n</ng-template>\n\n\n\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\">\n  <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"getDropdownConfig()\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>" }]
         }] });
 
 var generalMasterType_component = /*#__PURE__*/Object.freeze({
@@ -10278,7 +10336,6 @@ class CideCoreUserCreateComponent {
     fb = inject(FormBuilder);
     userMasterService = inject(CideCoreUserMasterService);
     entityService = inject(CideCoreEntityManagementService);
-    CideCoreRoleSelectService = inject(CideCoreRoleSelectService);
     designationService = inject(CideCoreDesignationManagementService);
     departmentService = inject(CideCoreDepartmentManagementService);
     CideCoreGeneralMasterService = inject(CideCoreGeneralMasterService);
@@ -10341,6 +10398,11 @@ class CideCoreUserCreateComponent {
     get familyDetailsFormArray() {
         return this.userMasterForm.get('core_user_family_details');
     }
+    // User search functionality for family member selection
+    userSearchResults = signal({}, ...(ngDevMode ? [{ debugName: "userSearchResults" }] : []));
+    userSearchLoading = signal({}, ...(ngDevMode ? [{ debugName: "userSearchLoading" }] : []));
+    // Debounce timer for search
+    searchDebounceTimers = {};
     // Helper method to create entity mapping FormGroup
     createEntityMappingFormGroup() {
         const today = new Date().toISOString().split('T')[0];
@@ -10380,7 +10442,11 @@ class CideCoreUserCreateComponent {
         return this.fb.group({
             _id: [''],
             syusd_document_type_id_sygms: [''],
+            syusd_doc_number: [''],
+            syusd_doc_name_as_per_doc: [''],
             syusd_photo_group_id_cyfm: [''],
+            syusd_doc_issue_date: [''],
+            syusd_doc_expiry_date: [''],
             syusd_doc_verification_status_id_sygms: [''],
             syusd_document_kyc_status_id_sygms: [''],
             syusd_document_file_id_cyfm: [''],
@@ -10394,10 +10460,13 @@ class CideCoreUserCreateComponent {
             _id: [''],
             syfdl_family_member_name: [''],
             syfdl_family_member_id_user: [''],
+            syfdl_family_member_dob: [''],
             syfdl_relationship_id_sygms: [''],
             syfdl_blood_group_sygms: [''],
             syfdl_contact_email: [''],
+            syfdl_contact_email_id: [''],
             syfdl_contact_phone: [''],
+            syfdl_contact_number: [''],
             syfdl_isactive: [true]
         });
     }
@@ -10411,6 +10480,102 @@ class CideCoreUserCreateComponent {
             { id: 'family', label: 'Family Details', icon: 'family_restroom' }
         ];
     }
+    // User search methods for family member selection
+    searchUsers(query = '', familyIndex = 0) {
+        // Update loading state for specific family member
+        this.userSearchLoading.update(loading => ({
+            ...loading,
+            [familyIndex]: true
+        }));
+        // Create payload for user search - no pagination, larger page size
+        const searchPayload = {
+            total: 0,
+            pageIndex: 1,
+            pageSize: 100, // Load more users at once since no pagination
+            query: query || '',
+            pagination: false, // Disable pagination
+            sort: {
+                order: 'asc',
+                key: 'user_fullname'
+            }
+        };
+        this.userMasterService.getUserList(searchPayload).subscribe({
+            next: (response) => {
+                if (response?.success) {
+                    const userData = response?.data || [];
+                    this.userSearchResults.update(results => ({
+                        ...results,
+                        [familyIndex]: userData
+                    }));
+                }
+                else {
+                    this.userSearchResults.update(results => ({
+                        ...results,
+                        [familyIndex]: []
+                    }));
+                }
+            },
+            error: (error) => {
+                console.error('Error searching users:', error);
+                this.userSearchResults.update(results => ({
+                    ...results,
+                    [familyIndex]: []
+                }));
+            },
+            complete: () => {
+                this.userSearchLoading.update(loading => ({
+                    ...loading,
+                    [familyIndex]: false
+                }));
+            }
+        });
+    }
+    // Get user options for the select component
+    userOptions(familyIndex = 0) {
+        return this.userSearchResults()[familyIndex] || [];
+    }
+    // Handle search change from the select component with debouncing
+    onUserSearchChange(searchEvent, familyIndex) {
+        const query = searchEvent?.query || searchEvent || '';
+        // Clear existing debounce timer for this family member
+        if (this.searchDebounceTimers[familyIndex]) {
+            clearTimeout(this.searchDebounceTimers[familyIndex]);
+        }
+        // Set new debounce timer (300ms delay)
+        this.searchDebounceTimers[familyIndex] = setTimeout(() => {
+            if (query) {
+                this.searchUsers(query, familyIndex);
+            }
+            else {
+                // If no query, load all users
+                this.searchUsers('', familyIndex);
+            }
+        }, 300);
+    }
+    // Load initial users for the select component
+    loadInitialUsers() {
+        // Load initial users for all existing family members
+        const familyCount = this.familyDetailsFormArray.length;
+        for (let i = 0; i < familyCount; i++) {
+            this.searchUsers('', i);
+        }
+    }
+    // Handle user selection change in the form
+    onUserSelectionChange(event, familyIndex) {
+        const selectedUserId = event?.value || event;
+        if (selectedUserId) {
+            // Find the selected user from the results for this specific family member
+            const userResults = this.userSearchResults()[familyIndex] || [];
+            const selectedUser = userResults.find((user) => user._id === selectedUserId);
+            if (selectedUser) {
+                // Update the family member name field with the selected user's name
+                const familyGroup = this.familyDetailsFormArray.at(familyIndex);
+                familyGroup.patchValue({
+                    syfdl_family_member_name: selectedUser.user_fullname || selectedUser.user_username || ''
+                });
+            }
+        }
+    }
     entityOptions = signal([], ...(ngDevMode ? [{ debugName: "entityOptions" }] : []));
     roleOptions = signal([], ...(ngDevMode ? [{ debugName: "roleOptions" }] : []));
     designationOptions = signal({}, ...(ngDevMode ? [{ debugName: "designationOptions" }] : []));
@@ -10462,6 +10627,8 @@ class CideCoreUserCreateComponent {
             this.loadDropdownOptions();
             this.setupFormSubscriptions();
             this.setEntityIdFromAppState();
+            // Load initial users for family member selection
+            this.loadInitialUsers();
         });
     }
     /**
@@ -10500,6 +10667,20 @@ class CideCoreUserCreateComponent {
         // Set password validation based on mode
         this.updatePasswordValidation();
     }
+    /**
+     * Cleanup when component is destroyed
+     */
+    ngOnDestroy() {
+        console.log('🧹 CideCoreUserCreateComponent: Cleaning up component state');
+        // Clear all debounce timers
+        Object.values(this.searchDebounceTimers).forEach(timer => {
+            if (timer) {
+                clearTimeout(timer);
+            }
+        });
+        this.searchDebounceTimers = {};
+        console.log('🧹 CideCoreUserCreateComponent: Component state cleaned up');
+    }
     /**
      * Update password validation based on create/edit mode
      */
@@ -10688,10 +10869,14 @@ class CideCoreUserCreateComponent {
                 const documentGroup = this.createDocumentFormGroup();
                 documentGroup.patchValue({
                     _id: document._id || '',
-                    syusd_document_type_id_sygms: document.syusd_document_type_id_sygms || '',
+                    syusd_document_type_id_sygms: document.syusd_document_type_id_sygms?._id || '',
+                    syusd_doc_number: document.syusd_doc_number || '',
+                    syusd_doc_name_as_per_doc: document.syusd_doc_name_as_per_doc || '',
                     syusd_photo_group_id_cyfm: document.syusd_photo_group_id_cyfm || '',
-                    syusd_doc_verification_status_id_sygms: document.syusd_doc_verification_status_id_sygms || '',
-                    syusd_document_kyc_status_id_sygms: document.syusd_document_kyc_status_id_sygms || '',
+                    syusd_doc_issue_date: document.syusd_doc_issue_date || '',
+                    syusd_doc_expiry_date: document.syusd_doc_expiry_date || '',
+                    syusd_doc_verification_status_id_sygms: document.syusd_doc_verification_status_id_sygms?._id || '',
+                    syusd_document_kyc_status_id_sygms: document.syusd_document_kyc_status_id_sygms?._id || '',
                     syusd_document_file_id_cyfm: document.syusd_document_file_id_cyfm || '',
                     syusd_document_remarks: document.syusd_document_remarks || '',
                     syusd_isactive: document.syusd_isactive ?? true
@@ -10713,11 +10898,14 @@ class CideCoreUserCreateComponent {
                 familyGroup.patchValue({
                     _id: familyDetail._id || '',
                     syfdl_family_member_name: familyDetail.syfdl_family_member_name || '',
-                    syfdl_family_member_id_user: familyDetail.syfdl_family_member_id_user || '',
-                    syfdl_relationship_id_sygms: familyDetail.syfdl_relationship_id_sygms || '',
-                    syfdl_blood_group_sygms: familyDetail.syfdl_blood_group_sygms || '',
+                    syfdl_family_member_id_user: familyDetail.syfdl_family_member_id_user?._id || '',
+                    syfdl_family_member_dob: familyDetail.syfdl_family_member_dob || '',
+                    syfdl_relationship_id_sygms: familyDetail.syfdl_relationship_id_sygms?._id || '',
+                    syfdl_blood_group_sygms: familyDetail.syfdl_blood_group_sygms?._id || '',
                     syfdl_contact_email: familyDetail.syfdl_contact_email || '',
+                    syfdl_contact_email_id: familyDetail.syfdl_contact_email_id || '',
                     syfdl_contact_phone: familyDetail.syfdl_contact_phone || '',
+                    syfdl_contact_number: familyDetail.syfdl_contact_number || '',
                     syfdl_isactive: familyDetail.syfdl_isactive ?? true
                 });
                 this.familyDetailsFormArray.push(familyGroup);
@@ -10742,7 +10930,6 @@ class CideCoreUserCreateComponent {
         this.loadAddressTypes();
         // Load document and family dropdown options
         this.loadDocumentTypes();
-        this.loadPhotoGroups();
         this.loadDocumentVerificationStatus();
         this.loadDocumentKycStatus();
         this.loadBloodGroups();
@@ -11329,70 +11516,46 @@ class CideCoreUserCreateComponent {
         });
     }
     addDocument() {
-        const newDocument = {
-            syusd_document_type_id_sygms: {},
-            syusd_doc_number: '',
-            syusd_doc_name_as_per_doc: '',
-            syusd_photo_group_id_cyfm: {},
-            syusd_doc_issue_date: undefined,
-            syusd_doc_expiry_date: undefined,
-            syusd_doc_verification_status_id_sygms: {},
-            syusd_doc_kyc_status_id_sygms: {}
-        };
-        this.documents.update(docs => [...docs, newDocument]);
-        // Add form controls for the new document
-        const currentDocuments = this.documents();
-        const index = currentDocuments.length - 1;
-        this.userMasterForm.addControl(`documents.${index}.syusd_document_type_id_sygms`, this.fb.control(''));
-        this.userMasterForm.addControl(`documents.${index}.syusd_doc_number`, this.fb.control(''));
-        this.userMasterForm.addControl(`documents.${index}.syusd_doc_name_as_per_doc`, this.fb.control(''));
-        this.userMasterForm.addControl(`documents.${index}.syusd_photo_group_id_cyfm`, this.fb.control(''));
-        this.userMasterForm.addControl(`documents.${index}.syusd_doc_issue_date`, this.fb.control(''));
-        this.userMasterForm.addControl(`documents.${index}.syusd_doc_expiry_date`, this.fb.control(''));
-        this.userMasterForm.addControl(`documents.${index}.syusd_doc_verification_status_id_sygms`, this.fb.control(''));
-        this.userMasterForm.addControl(`documents.${index}.syusd_doc_kyc_status_id_sygms`, this.fb.control(''));
+        // Create a new document FormGroup using the existing helper method
+        const newDocumentGroup = this.createDocumentFormGroup();
+        // Add the new document FormGroup to the FormArray
+        this.documentsFormArray.push(newDocumentGroup);
+        // Update the documents signal to keep UI in sync
+        this.documents.update(docs => [...docs, newDocumentGroup.value]);
     }
     removeDocument(index) {
-        // Remove form controls
-        this.userMasterForm.removeControl(`documents.${index}.syusd_document_type_id_sygms`);
-        this.userMasterForm.removeControl(`documents.${index}.syusd_doc_number`);
-        this.userMasterForm.removeControl(`documents.${index}.syusd_doc_name_as_per_doc`);
-        this.userMasterForm.removeControl(`documents.${index}.syusd_photo_group_id_cyfm`);
-        this.userMasterForm.removeControl(`documents.${index}.syusd_doc_issue_date`);
-        this.userMasterForm.removeControl(`documents.${index}.syusd_doc_expiry_date`);
-        this.userMasterForm.removeControl(`documents.${index}.syusd_doc_verification_status_id_sygms`);
-        this.userMasterForm.removeControl(`documents.${index}.syusd_doc_kyc_status_id_sygms`);
+        // Remove the document from the FormArray
+        this.documentsFormArray.removeAt(index);
+        // Update the documents signal to keep UI in sync
         this.documents.update(docs => docs.filter((_, i) => i !== index));
     }
     addFamilyDetail() {
-        const newFamily = {
-            syfdl_family_member_name: '',
-            syfdl_relationship_id_sygms: {},
-            syfdl_family_member_dob: undefined,
-            syfdl_blood_group_sygms: {},
-            syfdl_contact_email_id: '',
-            syfdl_contact_number: undefined
-        };
-        this.familyDetails.update(families => [...families, newFamily]);
-        // Add form controls for the new family detail
-        const currentFamilies = this.familyDetails();
-        const index = currentFamilies.length - 1;
-        this.userMasterForm.addControl(`family_details.${index}.syfdl_family_member_name`, this.fb.control(''));
-        this.userMasterForm.addControl(`family_details.${index}.syfdl_relationship_id_sygms`, this.fb.control(''));
-        this.userMasterForm.addControl(`family_details.${index}.syfdl_family_member_dob`, this.fb.control(''));
-        this.userMasterForm.addControl(`family_details.${index}.syfdl_blood_group_sygms`, this.fb.control(''));
-        this.userMasterForm.addControl(`family_details.${index}.syfdl_contact_email_id`, this.fb.control(''));
-        this.userMasterForm.addControl(`family_details.${index}.syfdl_contact_number`, this.fb.control(''));
+        // Create a new family detail FormGroup using the existing helper method
+        const newFamilyGroup = this.createFamilyDetailFormGroup();
+        // Add the new family detail FormGroup to the FormArray
+        this.familyDetailsFormArray.push(newFamilyGroup);
+        // Update the family details signal to keep UI in sync
+        this.familyDetails.update(families => [...families, newFamilyGroup.value]);
+        // Load initial users for the new family member
+        const newIndex = this.familyDetailsFormArray.length - 1;
+        this.searchUsers('', newIndex);
     }
     removeFamilyDetail(index) {
-        // Remove form controls
-        this.userMasterForm.removeControl(`family_details.${index}.syfdl_family_member_name`);
-        this.userMasterForm.removeControl(`family_details.${index}.syfdl_relationship_id_sygms`);
-        this.userMasterForm.removeControl(`family_details.${index}.syfdl_family_member_dob`);
-        this.userMasterForm.removeControl(`family_details.${index}.syfdl_blood_group_sygms`);
-        this.userMasterForm.removeControl(`family_details.${index}.syfdl_contact_email_id`);
-        this.userMasterForm.removeControl(`family_details.${index}.syfdl_contact_number`);
+        // Remove the family detail from the FormArray
+        this.familyDetailsFormArray.removeAt(index);
+        // Update the family details signal to keep UI in sync
         this.familyDetails.update(families => families.filter((_, i) => i !== index));
+        // Clean up user search data for the removed family member
+        this.userSearchResults.update(results => {
+            const newResults = { ...results };
+            delete newResults[index];
+            return newResults;
+        });
+        this.userSearchLoading.update(loading => {
+            const newLoading = { ...loading };
+            delete newLoading[index];
+            return newLoading;
+        });
     }
     onSubmit() {
         // Custom validation: ensure at least one entity mapping exists
@@ -11408,14 +11571,14 @@ class CideCoreUserCreateComponent {
         if (this.userMasterForm.valid) {
             this.loading.set(true);
             // Prepare form data with entity mappings and menu rights
-            const { core_entity_mapping, menu_rights, core_user_contact_addresses, ...auth_user_mst } = this.userMasterForm.value;
+            const { core_entity_mapping, menu_rights, core_user_contact_addresses, core_user_documents, core_user_family_details, ...auth_user_mst } = this.userMasterForm.value;
             const formData = {
                 auth_user_mst: auth_user_mst,
                 core_entity_mapping: core_entity_mapping || [],
                 menu_rights: this.menuRightsMap() || {},
                 core_user_contact_addresses: core_user_contact_addresses || [],
-                core_user_documents: [],
-                core_user_family_details: [],
+                core_user_documents: core_user_documents || [],
+                core_user_family_details: core_user_family_details || [],
                 core_user_attributes: []
             };
             if (this.userId()) {
@@ -11491,25 +11654,13 @@ class CideCoreUserCreateComponent {
         while (this.contactAddressesFormArray.length !== 0) {
             this.contactAddressesFormArray.removeAt(0);
         }
-        const docCount = this.documents().length;
-        for (let i = 0; i < docCount; i++) {
-            this.userMasterForm.removeControl(`documents.${i}.syusd_document_type_id_sygms`);
-            this.userMasterForm.removeControl(`documents.${i}.syusd_doc_number`);
-            this.userMasterForm.removeControl(`documents.${i}.syusd_doc_name_as_per_doc`);
-            this.userMasterForm.removeControl(`documents.${i}.syusd_photo_group_id_cyfm`);
-            this.userMasterForm.removeControl(`documents.${i}.syusd_doc_issue_date`);
-            this.userMasterForm.removeControl(`documents.${i}.syusd_doc_expiry_date`);
-            this.userMasterForm.removeControl(`documents.${i}.syusd_doc_verification_status_id_sygms`);
-            this.userMasterForm.removeControl(`documents.${i}.syusd_doc_kyc_status_id_sygms`);
-        }
-        const familyCount = this.familyDetails().length;
-        for (let i = 0; i < familyCount; i++) {
-            this.userMasterForm.removeControl(`family_details.${i}.syfdl_family_member_name`);
-            this.userMasterForm.removeControl(`family_details.${i}.syfdl_relationship_id_sygms`);
-            this.userMasterForm.removeControl(`family_details.${i}.syfdl_family_member_dob`);
-            this.userMasterForm.removeControl(`family_details.${i}.syfdl_blood_group_sygms`);
-            this.userMasterForm.removeControl(`family_details.${i}.syfdl_contact_email_id`);
-            this.userMasterForm.removeControl(`family_details.${i}.syfdl_contact_number`);
+        // Clear documents FormArray
+        while (this.documentsFormArray.length !== 0) {
+            this.documentsFormArray.removeAt(0);
+        }
+        // Clear family details FormArray
+        while (this.familyDetailsFormArray.length !== 0) {
+            this.familyDetailsFormArray.removeAt(0);
         }
         // Clear entity mapping FormArray
         while (this.entityMappingsFormArray.length !== 0) {
@@ -11852,18 +12003,6 @@ class CideCoreUserCreateComponent {
             }
         });
     }
-    /**
-     * Load photo groups
-     */
-    loadPhotoGroups() {
-        // TODO: Implement photo group service call
-        // For now, using mock data
-        this.photoGroupOptions.set([
-            { _id: '1', cyfm_name: 'Profile Photos' },
-            { _id: '2', cyfm_name: 'Document Photos' },
-            { _id: '3', cyfm_name: 'ID Card Photos' }
-        ]);
-    }
     /**
      * Load document verification status from general master service
      */
@@ -11977,7 +12116,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", 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<div class=\"tw-w-full tw-h-full tw-p-3\">\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    <!-- 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-2 tw-mb-3 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 (getUserPhoto()) {\n              <img [src]=\"getUserPhoto()\" alt=\"Profile\" class=\"tw-w-full tw-h-full tw-object-cover\">\n              } @else {\n              <cide-ele-icon variant=\"blue\" size=\"xs\">person</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-2 tw-border-b-0 tw-mb-2\">\n\n        <!-- Name Fields -->\n        <div class=\"tw-grid tw-grid-cols-1 xl:tw-grid-cols-4 lg:tw-grid-cols-2 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\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 and Login Information -->\n        <div class=\"tw-grid tw-grid-cols-1 xl:tw-grid-cols-3 lg:tw-grid-cols-2 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\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\n\n        <!-- Status Control -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-mb-4\">\n          <div class=\"tw-p-4 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-2 tw-border-b-0 tw-mb-2\">\n        <!-- Password Fields -->\n        @if (shouldShowPasswordFields()) {\n        <div class=\"tw-mb-6\">\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-6\">\n          <div class=\"tw-p-4 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-6 tw-mb-6\">\n          <div class=\"tw-p-4 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        <!-- Photo Upload -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-gap-6 tw-mb-6\">\n          <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-4\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-mb-3\">Profile Photo</h6>\n            <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-4\">\n              <cide-ele-file-input id=\"user_photo_upload\" formControlName=\"user_photo_id_cyfm\" accept=\"image/*\"\n                [showPreview]=\"true\" [previewBoxMode]=\"true\" previewWidth=\"150px\" previewHeight=\"150px\"\n                placeholderText=\"Click to upload photo\" placeholderIcon=\"\uD83D\uDC64\">\n              </cide-ele-file-input>\n              <div class=\"tw-text-xs tw-text-gray-500 tw-text-center tw-max-w-sm\">\n                Supported formats: JPG, PNG, GIF. Maximum size: 2MB. Recommended size: 150x150px for best results.\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      }\n\n      @case ('roles') {\n      <!-- Entity, Roles & Permissions Mapping Section -->\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\n\n\n\n        <!-- Important Note -->\n        <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-4 tw-mb-6\">\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-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg tw-p-6 tw-mb-6\">\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()\" leftIcon=\"add\"\n                [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                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeEntityMapping(i)\"\n                  leftIcon=\"delete\">\n                  Remove\n                </button>\n              </div>\n\n              <div class=\"tw-p-6\">\n                <!-- Entity and Role Selection -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                  <div>\n                    <cide-ele-select label=\"Entity *\" [options]=\"getFilteredEntityOptions(i)\" formControlName=\"syenm_entity_id_syen\"\n                    valueKey=\"_id\" labelKey=\"syen_name\" placeholder=\"Select entity\" size=\"md\"\n                    (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\n                  <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\n                    formControlName=\"syenm_role_id_syusrol\" placeholder=\"Select role for this entity\" size=\"md\">\n                  </cide-ele-select>\n                </div>\n\n                <!-- Entity-Specific Details -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                  <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\n                    formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\" 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)\" valueKey=\"_id\" labelKey=\"sydsg_name\"\n                    formControlName=\"syenm_designation_id_sydsg\" placeholder=\"Select designation\" size=\"md\">\n                  </cide-ele-select>\n                </div>\n\n                <!-- Active Period for Entity Mapping -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\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-grid-cols-1 md:tw-grid-cols-3 tw-gap-6 tw-mb-6\">\n                  <div class=\"tw-p-3 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-3 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 tw-pt-4\">\n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\n                    <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Menu Rights & Permissions</h6>\n                    <div class=\"tw-flex tw-gap-2\">\n                      <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"refreshMenuRights(i)\"\n                        leftIcon=\"refresh\">\n                        Refresh Rights\n                      </button>\n                    </div>\n                  </div>\n\n                  @if (getMenuRightsForMapping(i).length > 0) {\n                  <!-- Menu Rights Grid -->\n                  <div class=\"tw-overflow-x-auto tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg\">\n                    <table class=\"tw-w-full tw-text-sm\">\n                      <thead class=\"tw-bg-gray-50 tw-border-b tw-border-gray-200\">\n                        <tr>\n                          <th class=\"tw-px-4 tw-py-3 tw-text-left tw-font-medium tw-text-gray-700\">Menu</th>\n                          <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Role Rights</th>\n                          <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Create</th>\n                          <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Read</th>\n                          <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Update</th>\n                          <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Delete</th>\n                          <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Exception</th>\n                        </tr>\n                      </thead>\n                      <tbody>\n                        @for (menuRight of getMenuRightsForMapping(i); track $index; let j = $index) {\n                        <tr class=\"tw-border-b tw-border-gray-100 hover:tw-bg-gray-50\">\n                          <td class=\"tw-px-4 tw-py-3 tw-font-medium tw-text-gray-900\">\n                            {{ menuRight.menu_name }}\n                            <div class=\"tw-text-xs tw-text-gray-500\">{{ menuRight.menu_code }}</div>\n                          </td>\n\n                          <!-- Role Rights Display -->\n                          <td class=\"tw-px-3 tw-py-3 tw-text-center\">\n                            <div class=\"tw-flex tw-flex-wrap tw-justify-center tw-gap-1\">\n                              @for (right of menuRight.role_rights; track $index) {\n                              <span\n                                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                          </td>\n\n                          <!-- Individual Permission Controls -->\n                          <td class=\"tw-px-3 tw-py-3 tw-text-center\">\n                            <cide-ele-input type=\"checkbox\"\n                              [formControlName]=\"'core_entity_mapping.' + i + '.menu_rights.' + j + '.create'\"\n                              class=\"tw-h-4 tw-accent-green-500\" />\n                          </td>\n\n                          <td class=\"tw-px-3 tw-py-3 tw-text-center\">\n                            <cide-ele-input type=\"checkbox\"\n                              [formControlName]=\"'core_entity_mapping.' + i + '.menu_rights.' + j + '.read'\"\n                              class=\"tw-h-4 tw-accent-blue-500\" />\n                          </td>\n\n                          <td class=\"tw-px-3 tw-py-3 tw-text-center\">\n                            <cide-ele-input type=\"checkbox\"\n                              [formControlName]=\"'core_entity_mapping.' + i + '.menu_rights.' + j + '.update'\"\n                              class=\"tw-h-4 tw-accent-yellow-500\" />\n                          </td>\n\n                          <td class=\"tw-px-3 tw-py-3 tw-text-center\">\n                            <cide-ele-input type=\"checkbox\"\n                              [formControlName]=\"'core_entity_mapping.' + i + '.menu_rights.' + j + '.delete'\"\n                              class=\"tw-h-4 tw-accent-red-500\" />\n                          </td>\n\n                          <td class=\"tw-px-3 tw-py-3 tw-text-center\">\n                            @if (hasExceptionForMenu(i, menuRight.menu_id)) {\n                            <span\n                              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                            } @else {\n                            <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\n                            }\n                          </td>\n                        </tr>\n                        }\n                      </tbody>\n                    </table>\n                  </div>\n\n                  <!-- Legend -->\n                  <div class=\"tw-mt-4 tw-p-3 tw-bg-gray-50 tw-rounded-lg\">\n                    <h6 class=\"tw-text-xs tw-font-semibold tw-text-gray-700 tw-mb-2\">Legend:</h6>\n                    <div class=\"tw-grid tw-grid-cols-2 md:tw-grid-cols-4 tw-gap-3 tw-text-xs tw-text-gray-600\">\n                      <div><span class=\"tw-w-3 tw-h-3 tw-bg-blue-100 tw-inline-block tw-rounded tw-mr-2\"></span>Role\n                        Rights: Inherited from role</div>\n                      <div><span\n                          class=\"tw-w-3 tw-h-3 tw-bg-yellow-100 tw-inline-block tw-rounded tw-mr-2\"></span>Override:\n                        User-specific exception</div>\n                      <div><span\n                          class=\"tw-w-3 tw-h-3 tw-bg-green-100 tw-inline-block tw-rounded tw-mr-2\"></span>Enabled:\n                        Permission granted</div>\n                      <div><span\n                          class=\"tw-w-3 tw-h-3 tw-bg-gray-100 tw-inline-block tw-rounded tw-mr-2\"></span>Disabled:\n                        Permission restricted</div>\n                    </div>\n                  </div>\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 load\n                      menu rights for this mapping.</p>\n                    @if (mapping.syenm_entity_id_syen?._id && mapping.syenm_role_id_syusrol) {\n                    <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"loadMenuRights(i)\"\n                      leftIcon=\"refresh\">\n                      Load Menu Rights\n                    </button>\n                    }\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      </div>\n      }\n\n      @case ('addresses') {\n      <!-- Contact Addresses Section -->\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\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\">\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-6 tw-py-1 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\">Address {{ i + 1 }}</h4>\n              <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\n                leftIcon=\"delete\">\n                Remove\n              </button>\n            </div>\n            <div class=\"tw-p-6\">\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\"\n                  formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select address type\" size=\"md\"\n                  valueKey=\"_id\" labelKey=\"sygms_title\">\n                </cide-ele-select>\n\n                <cide-ele-input label=\"Contact Person Name\" formControlName=\"sycad_contact_person_name\"\n                  placeholder=\"Enter contact person name\" size=\"md\">\n                </cide-ele-input>\n              </div>\n\n              <div class=\"tw-grid tw-grid-cols-1 tw-mb-6\">\n                <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\n                  placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"3\" size=\"md\">\n                </cide-ele-textarea>\n              </div>\n\n              <!-- Postal Code & City -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-select \n                  label=\"Postal Code\"\n                  [options]=\"addressPostalCodes()[i] || []\" \n                  formControlName=\"sycad_contact_pin_sypin\"\n                  placeholder=\"Select postal code\"\n                  [searchable]=\"true\"\n                  [loading]=\"addressPostalCodesLoading()[i] || false\"\n                  (searchChange)=\"onPostalCodeSearch($event, i)\"\n                  (change)=\"onPostalCodeSelection($event, i)\"\n                  size=\"md\">\n                </cide-ele-select>\n                \n                <cide-ele-input \n                  label=\"City\" \n                  formControlName=\"sycad_contact_city_sypin\"\n                  placeholder=\"Enter city\"\n                  size=\"md\">\n                </cide-ele-input>\n              </div>\n              \n              <!-- State & Country -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-input \n                  label=\"State\" \n                  formControlName=\"sycad_contact_state_sypin\"\n                  placeholder=\"Enter state\"\n                  size=\"md\">\n                </cide-ele-input>\n\n                <cide-ele-select \n                  label=\"Country\" \n                  [options]=\"addressCountries()[i] || []\" \n                  formControlName=\"sycad_contact_country_syctr\"\n                  placeholder=\"Select country\"\n                  valueKey=\"_id\"\n                  labelKey=\"syctr_country_iso_name\"\n                  [searchable]=\"true\"\n                  (searchChange)=\"onCountrySearch($event, i)\"\n                  [loading]=\"addressCountriesLoading()[i] || false\"\n                  size=\"md\">\n                </cide-ele-select>\n              </div>\n\n              <!-- Phone Numbers -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-input \n                  label=\"Primary Phone\" \n                  formControlName=\"sycad_contact_phone\"\n                  type=\"tel\"\n                  placeholder=\"Enter primary phone number\"\n                  size=\"md\">\n                </cide-ele-input>\n\n                <cide-ele-input \n                  label=\"Alternate Phone\" \n                  formControlName=\"sycad_contact_phone_alt\"\n                  type=\"tel\"\n                  placeholder=\"Enter alternate phone number\"\n                  size=\"md\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Fax & Email -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-input \n                  label=\"Fax Number\" \n                  formControlName=\"sycad_contact_fax\"\n                  placeholder=\"Enter fax number\"\n                  size=\"md\">\n                </cide-ele-input>\n\n                <cide-ele-input \n                  label=\"Primary Email\" \n                  formControlName=\"sycad_contact_email\"\n                  type=\"email\"\n                  placeholder=\"Enter primary email address\"\n                  size=\"md\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Alternate Email -->\n              <div class=\"tw-grid tw-grid-cols-1 tw-mb-6\">\n                <cide-ele-input \n                  label=\"Alternate Email\" \n                  formControlName=\"sycad_contact_email_alt\"\n                  type=\"email\"\n                  placeholder=\"Enter alternate email address\"\n                  size=\"md\">\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-2 tw-border-b-0 tw-mb-2\">\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\">\n            Add Document\n          </button>\n        </div>\n\n        @for (doc of documents(); track $index; let i = $index) {\n        <div\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-6 tw-py-1 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\">Document {{ i + 1 }}</h4>\n            <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeDocument(i)\"\n              leftIcon=\"delete\">\n              Remove\n            </button>\n          </div>\n          <div class=\"tw-p-6\">\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\n                [formControlName]=\"'documents.' + i + '.syusd_document_type_id_sygms'\"\n                placeholder=\"Select document type\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n\n              <cide-ele-input label=\"Document Number\" [formControlName]=\"'documents.' + i + '.syusd_doc_number'\"\n                placeholder=\"Enter document number\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-input label=\"Name as per Document\"\n                [formControlName]=\"'documents.' + i + '.syusd_doc_name_as_per_doc'\"\n                placeholder=\"Enter name exactly as shown on document\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-select label=\"Photo Group\" [options]=\"photoGroupOptions()\"\n                [formControlName]=\"'documents.' + i + '.syusd_photo_group_id_cyfm'\"\n                placeholder=\"Select photo group\" size=\"md\" valueKey=\"_id\" labelKey=\"cyfm_name\">\n              </cide-ele-select>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-input label=\"Issue Date\" [formControlName]=\"'documents.' + i + '.syusd_doc_issue_date'\"\n                [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input label=\"Expiry Date\" [formControlName]=\"'documents.' + i + '.syusd_doc_expiry_date'\"\n                [id]=\"'syusd_doc_expiry_date['+i+']'\" type=\"date\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\n              <cide-ele-select label=\"Document Verification Status\" [options]=\"documentVerificationStatusOptions()\"\n                [formControlName]=\"'documents.' + i + '.syusd_doc_verification_status_id_sygms'\"\n                placeholder=\"Select verification status\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n\n              <cide-ele-select label=\"Document KYC Status\" [options]=\"documentKycStatusOptions()\"\n                [formControlName]=\"'documents.' + i + '.syusd_doc_kyc_status_id_sygms'\"\n                placeholder=\"Select KYC status\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n            </div>\n          </div>\n        </div>\n        }\n      </div>\n      }\n\n      @case ('family') {\n      <!-- Family Details Section -->\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\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)=\"addFamilyDetail()\" leftIcon=\"add\">\n            Add Family Member\n          </button>\n        </div>\n\n        @for (family of familyDetails(); track $index; let i = $index) {\n        <div\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-6 tw-py-1 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\">Family Member {{ i + 1 }}\n            </h4>\n            <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeFamilyDetail(i)\"\n              leftIcon=\"delete\">\n              Remove\n            </button>\n          </div>\n          <div class=\"tw-p-6\">\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-input label=\"Family Member Name\"\n                [formControlName]=\"'family_details.' + i + '.syfdl_family_member_name'\"\n                placeholder=\"Enter family member full name\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\n                [formControlName]=\"'family_details.' + i + '.syfdl_relationship_id_sygms'\"\n                placeholder=\"Select relationship\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-input label=\"Date of Birth\"\n                [formControlName]=\"'family_details.' + i + '.syfdl_family_member_dob'\" type=\"date\" size=\"md\"\n                [id]=\"'syfdl_family_member_dob['+i+']'\">\n              </cide-ele-input>\n\n              <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\n                [formControlName]=\"'family_details.' + i + '.syfdl_blood_group_sygms'\"\n                placeholder=\"Select blood group\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\n              <cide-ele-input label=\"Contact Email\" [formControlName]=\"'family_details.' + i + '.syfdl_contact_email_id'\"\n                type=\"email\" placeholder=\"Enter contact email\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input label=\"Contact Number\" [formControlName]=\"'family_details.' + i + '.syfdl_contact_number'\"\n                type=\"tel\" placeholder=\"Enter contact number\" size=\"md\">\n              </cide-ele-input>\n            </div>\n          </div>\n        </div>\n        }\n      </div>\n      }\n      }\n    </div>\n\n    <!-- Form Actions -->\n    <div\n      class=\"tw-flex tw-justify-end 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      <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  </form>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "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", "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"], 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]", 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", "helperText", "errorText", "showPreview", "previewWidth", "previewHeight", "previewBoxMode", "placeholderText", "placeholderIcon"], outputs: ["fileChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreUserCreateComponent, isStandalone: true, selector: "cide-core-user-create", 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<div class=\"tw-w-full tw-h-full tw-p-3\">\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    <!-- 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-2 tw-mb-3 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 (getUserPhoto()) {\n              <img [src]=\"getUserPhoto()\" alt=\"Profile\" class=\"tw-w-full tw-h-full tw-object-cover\">\n              } @else {\n              <cide-ele-icon variant=\"blue\" size=\"xs\">person</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-2 tw-border-b-0 tw-mb-2\">\n\n        <!-- Name Fields -->\n        <div class=\"tw-grid tw-grid-cols-1 xl:tw-grid-cols-4 lg:tw-grid-cols-2 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\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 and Login Information -->\n        <div class=\"tw-grid tw-grid-cols-1 xl:tw-grid-cols-3 lg:tw-grid-cols-2 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\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\n\n        <!-- Status Control -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-mb-4\">\n          <div class=\"tw-p-4 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-2 tw-border-b-0 tw-mb-2\">\n        <!-- Password Fields -->\n        @if (shouldShowPasswordFields()) {\n        <div class=\"tw-mb-6\">\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-6\">\n          <div class=\"tw-p-4 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-6 tw-mb-6\">\n          <div class=\"tw-p-4 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        <!-- Photo Upload -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-gap-6 tw-mb-6\">\n          <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-4\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-mb-3\">Profile Photo</h6>\n            <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-4\">\n              <cide-ele-file-input id=\"user_photo_upload\" formControlName=\"user_photo_id_cyfm\" accept=\"image/*\"\n                [showPreview]=\"true\" [previewBoxMode]=\"true\" previewWidth=\"150px\" previewHeight=\"150px\"\n                placeholderText=\"Click to upload photo\" placeholderIcon=\"\uD83D\uDC64\">\n              </cide-ele-file-input>\n              <div class=\"tw-text-xs tw-text-gray-500 tw-text-center tw-max-w-sm\">\n                Supported formats: JPG, PNG, GIF. Maximum size: 2MB. Recommended size: 150x150px for best results.\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      }\n\n      @case ('roles') {\n      <!-- Entity, Roles & Permissions Mapping Section -->\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\n\n\n\n        <!-- Important Note -->\n        <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-4 tw-mb-6\">\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-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg tw-p-6 tw-mb-6\">\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()\" leftIcon=\"add\"\n                [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                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeEntityMapping(i)\"\n                  leftIcon=\"delete\">\n                  Remove\n                </button>\n              </div>\n\n              <div class=\"tw-p-6\">\n                <!-- Entity and Role Selection -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                  <div>\n                    <cide-ele-select label=\"Entity *\" [options]=\"getFilteredEntityOptions(i)\" formControlName=\"syenm_entity_id_syen\"\n                    valueKey=\"_id\" labelKey=\"syen_name\" placeholder=\"Select entity\" size=\"md\"\n                    (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\n                  <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\n                    formControlName=\"syenm_role_id_syusrol\" placeholder=\"Select role for this entity\" size=\"md\">\n                  </cide-ele-select>\n                </div>\n\n                <!-- Entity-Specific Details -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                  <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\n                    formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\" 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)\" valueKey=\"_id\" labelKey=\"sydsg_name\"\n                    formControlName=\"syenm_designation_id_sydsg\" placeholder=\"Select designation\" size=\"md\">\n                  </cide-ele-select>\n                </div>\n\n                <!-- Active Period for Entity Mapping -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\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-grid-cols-1 md:tw-grid-cols-3 tw-gap-6 tw-mb-6\">\n                  <div class=\"tw-p-3 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-3 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 tw-pt-4\">\n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\n                    <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Menu Rights & Permissions</h6>\n                    <div class=\"tw-flex tw-gap-2\">\n                      <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"refreshMenuRights(i)\"\n                        leftIcon=\"refresh\">\n                        Refresh Rights\n                      </button>\n                    </div>\n                  </div>\n\n                  @if (getMenuRightsForMapping(i).length > 0) {\n                  <!-- Menu Rights Grid -->\n                  <div class=\"tw-overflow-x-auto tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg\">\n                    <table class=\"tw-w-full tw-text-sm\">\n                      <thead class=\"tw-bg-gray-50 tw-border-b tw-border-gray-200\">\n                        <tr>\n                          <th class=\"tw-px-4 tw-py-3 tw-text-left tw-font-medium tw-text-gray-700\">Menu</th>\n                          <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Role Rights</th>\n                          <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Create</th>\n                          <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Read</th>\n                          <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Update</th>\n                          <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Delete</th>\n                          <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Exception</th>\n                        </tr>\n                      </thead>\n                      <tbody>\n                        @for (menuRight of getMenuRightsForMapping(i); track $index; let j = $index) {\n                        <tr class=\"tw-border-b tw-border-gray-100 hover:tw-bg-gray-50\">\n                          <td class=\"tw-px-4 tw-py-3 tw-font-medium tw-text-gray-900\">\n                            {{ menuRight.menu_name }}\n                            <div class=\"tw-text-xs tw-text-gray-500\">{{ menuRight.menu_code }}</div>\n                          </td>\n\n                          <!-- Role Rights Display -->\n                          <td class=\"tw-px-3 tw-py-3 tw-text-center\">\n                            <div class=\"tw-flex tw-flex-wrap tw-justify-center tw-gap-1\">\n                              @for (right of menuRight.role_rights; track $index) {\n                              <span\n                                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                          </td>\n\n                          <!-- Individual Permission Controls -->\n                          <td class=\"tw-px-3 tw-py-3 tw-text-center\">\n                            <cide-ele-input type=\"checkbox\"\n                              [formControlName]=\"'core_entity_mapping.' + i + '.menu_rights.' + j + '.create'\"\n                              class=\"tw-h-4 tw-accent-green-500\" />\n                          </td>\n\n                          <td class=\"tw-px-3 tw-py-3 tw-text-center\">\n                            <cide-ele-input type=\"checkbox\"\n                              [formControlName]=\"'core_entity_mapping.' + i + '.menu_rights.' + j + '.read'\"\n                              class=\"tw-h-4 tw-accent-blue-500\" />\n                          </td>\n\n                          <td class=\"tw-px-3 tw-py-3 tw-text-center\">\n                            <cide-ele-input type=\"checkbox\"\n                              [formControlName]=\"'core_entity_mapping.' + i + '.menu_rights.' + j + '.update'\"\n                              class=\"tw-h-4 tw-accent-yellow-500\" />\n                          </td>\n\n                          <td class=\"tw-px-3 tw-py-3 tw-text-center\">\n                            <cide-ele-input type=\"checkbox\"\n                              [formControlName]=\"'core_entity_mapping.' + i + '.menu_rights.' + j + '.delete'\"\n                              class=\"tw-h-4 tw-accent-red-500\" />\n                          </td>\n\n                          <td class=\"tw-px-3 tw-py-3 tw-text-center\">\n                            @if (hasExceptionForMenu(i, menuRight.menu_id)) {\n                            <span\n                              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                            } @else {\n                            <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\n                            }\n                          </td>\n                        </tr>\n                        }\n                      </tbody>\n                    </table>\n                  </div>\n\n                  <!-- Legend -->\n                  <div class=\"tw-mt-4 tw-p-3 tw-bg-gray-50 tw-rounded-lg\">\n                    <h6 class=\"tw-text-xs tw-font-semibold tw-text-gray-700 tw-mb-2\">Legend:</h6>\n                    <div class=\"tw-grid tw-grid-cols-2 md:tw-grid-cols-4 tw-gap-3 tw-text-xs tw-text-gray-600\">\n                      <div><span class=\"tw-w-3 tw-h-3 tw-bg-blue-100 tw-inline-block tw-rounded tw-mr-2\"></span>Role\n                        Rights: Inherited from role</div>\n                      <div><span\n                          class=\"tw-w-3 tw-h-3 tw-bg-yellow-100 tw-inline-block tw-rounded tw-mr-2\"></span>Override:\n                        User-specific exception</div>\n                      <div><span\n                          class=\"tw-w-3 tw-h-3 tw-bg-green-100 tw-inline-block tw-rounded tw-mr-2\"></span>Enabled:\n                        Permission granted</div>\n                      <div><span\n                          class=\"tw-w-3 tw-h-3 tw-bg-gray-100 tw-inline-block tw-rounded tw-mr-2\"></span>Disabled:\n                        Permission restricted</div>\n                    </div>\n                  </div>\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 load\n                      menu rights for this mapping.</p>\n                    @if (mapping.syenm_entity_id_syen?._id && mapping.syenm_role_id_syusrol) {\n                    <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"loadMenuRights(i)\"\n                      leftIcon=\"refresh\">\n                      Load Menu Rights\n                    </button>\n                    }\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      </div>\n      }\n\n      @case ('addresses') {\n      <!-- Contact Addresses Section -->\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\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\">\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-6 tw-py-1 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\">Address {{ i + 1 }}</h4>\n              <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\n                leftIcon=\"delete\">\n                Remove\n              </button>\n            </div>\n            <div class=\"tw-p-6\">\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\" id=\"sycad_address_type_id_sygms\"\n                  formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select address type\" size=\"md\"\n                  valueKey=\"_id\" labelKey=\"sygms_title\">\n                </cide-ele-select>\n\n                <cide-ele-input label=\"Contact Person Name\" formControlName=\"sycad_contact_person_name\"\n                  placeholder=\"Enter contact person name\" size=\"md\">\n                </cide-ele-input>\n              </div>\n\n              <div class=\"tw-grid tw-grid-cols-1 tw-mb-6\">\n                <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\n                  placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"3\" size=\"md\">\n                </cide-ele-textarea>\n              </div>\n\n              <!-- Postal Code & City -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-select \n                  label=\"Postal Code\"\n                  [options]=\"addressPostalCodes()[i] || []\" \n                  formControlName=\"sycad_contact_pin_sypin\"\n                  placeholder=\"Select postal code\"\n                  [searchable]=\"true\"\n                  [loading]=\"addressPostalCodesLoading()[i] || false\"\n                  (searchChange)=\"onPostalCodeSearch($event, i)\"\n                  (change)=\"onPostalCodeSelection($event, i)\"\n                  size=\"md\">\n                </cide-ele-select>\n                \n                <cide-ele-input \n                  label=\"City\" \n                  formControlName=\"sycad_contact_city_sypin\"\n                  placeholder=\"Enter city\"\n                  size=\"md\">\n                </cide-ele-input>\n              </div>\n              \n              <!-- State & Country -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-input \n                  label=\"State\" \n                  formControlName=\"sycad_contact_state_sypin\"\n                  placeholder=\"Enter state\"\n                  size=\"md\">\n                </cide-ele-input>\n\n                <cide-ele-select \n                  label=\"Country\" \n                  [options]=\"addressCountries()[i] || []\" \n                  formControlName=\"sycad_contact_country_syctr\"\n                  placeholder=\"Select country\"\n                  valueKey=\"_id\"\n                  labelKey=\"syctr_country_iso_name\"\n                  [searchable]=\"true\"\n                  (searchChange)=\"onCountrySearch($event, i)\"\n                  [loading]=\"addressCountriesLoading()[i] || false\"\n                  size=\"md\">\n                </cide-ele-select>\n              </div>\n\n              <!-- Phone Numbers -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-input \n                  label=\"Primary Phone\" \n                  formControlName=\"sycad_contact_phone\"\n                  type=\"tel\"\n                  placeholder=\"Enter primary phone number\"\n                  size=\"md\">\n                </cide-ele-input>\n\n                <cide-ele-input \n                  label=\"Alternate Phone\" \n                  formControlName=\"sycad_contact_phone_alt\"\n                  type=\"tel\"\n                  placeholder=\"Enter alternate phone number\"\n                  size=\"md\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Fax & Email -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-input \n                  label=\"Fax Number\" \n                  formControlName=\"sycad_contact_fax\"\n                  placeholder=\"Enter fax number\"\n                  size=\"md\">\n                </cide-ele-input>\n\n                <cide-ele-input \n                  label=\"Primary Email\" \n                  formControlName=\"sycad_contact_email\"\n                  type=\"email\"\n                  placeholder=\"Enter primary email address\"\n                  size=\"md\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Alternate Email -->\n              <div class=\"tw-grid tw-grid-cols-1 tw-mb-6\">\n                <cide-ele-input \n                  label=\"Alternate Email\" \n                  formControlName=\"sycad_contact_email_alt\"\n                  type=\"email\"\n                  placeholder=\"Enter alternate email address\"\n                  size=\"md\">\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-2 tw-border-b-0 tw-mb-2\">\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\">\n            Add Document\n          </button>\n        </div>\n\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-6 tw-py-1 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\">Document {{ i + 1 }}</h4>\n            <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeDocument(i)\"\n              leftIcon=\"delete\">\n              Remove\n            </button>\n          </div>\n          <div class=\"tw-p-6\">\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\n                formControlName=\"syusd_document_type_id_sygms\"\n                placeholder=\"Select document type\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n\n              <cide-ele-input label=\"Document Number\" formControlName=\"syusd_doc_number\"\n                placeholder=\"Enter document number\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-input label=\"Name as per Document\"\n                formControlName=\"syusd_doc_name_as_per_doc\"\n                placeholder=\"Enter name exactly as shown on document\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-select label=\"Photo Group\" [options]=\"photoGroupOptions()\"\n                formControlName=\"syusd_photo_group_id_cyfm\"\n                placeholder=\"Select photo group\" size=\"md\" valueKey=\"_id\" labelKey=\"cyfm_name\">\n              </cide-ele-select>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-input label=\"Issue Date\" formControlName=\"syusd_doc_issue_date\"\n                [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"md\">\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=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\n              <cide-ele-select label=\"Document Verification Status\" [options]=\"documentVerificationStatusOptions()\"\n                formControlName=\"syusd_doc_verification_status_id_sygms\"\n                placeholder=\"Select verification status\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n\n              <cide-ele-select label=\"Document KYC Status\" [options]=\"documentKycStatusOptions()\"\n                formControlName=\"syusd_doc_kyc_status_id_sygms\"\n                placeholder=\"Select KYC status\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n            </div>\n          </div>\n        </div>\n        }\n        </div>\n      </div>\n      }\n\n      @case ('family') {\n      <!-- Family Details Section -->\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\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)=\"addFamilyDetail()\" leftIcon=\"add\">\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-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-6 tw-py-1 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\">Family Member {{ i + 1 }}\n            </h4>\n            <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeFamilyDetail(i)\"\n              leftIcon=\"delete\">\n              Remove\n            </button>\n          </div>\n          <div class=\"tw-p-6\">\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-input label=\"Family Member Name\"\n                formControlName=\"syfdl_family_member_name\"\n                placeholder=\"Enter family member full name\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-select \n                label=\"Family Member User\"\n                [options]=\"userOptions(i)\"\n                formControlName=\"syfdl_family_member_id_user\"\n                placeholder=\"Select family member user\" \n                size=\"md\" \n                valueKey=\"_id\" \n                labelKey=\"user_fullname\"\n                [searchable]=\"true\"\n                [loading]=\"userSearchLoading()[i] || false\"\n                (searchChange)=\"onUserSearchChange($event, i)\"\n                (change)=\"onUserSelectionChange($event, i)\">\n              </cide-ele-select>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\n                formControlName=\"syfdl_relationship_id_sygms\"\n                placeholder=\"Select relationship\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n\n              <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\n                formControlName=\"syfdl_blood_group_sygms\"\n                placeholder=\"Select blood group\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-input label=\"Date of Birth\"\n                formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"md\"\n                [id]=\"'syfdl_family_member_dob['+i+']'\">\n              </cide-ele-input>\n\n              <cide-ele-input label=\"Contact Phone\"\n                formControlName=\"syfdl_contact_phone\"\n                type=\"tel\" placeholder=\"Enter contact phone\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\"\n                type=\"email\" placeholder=\"Enter contact email\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\"\n                type=\"email\" placeholder=\"Enter contact email ID\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\n              <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\"\n                type=\"tel\" placeholder=\"Enter contact number\" size=\"md\">\n              </cide-ele-input>\n\n              <div class=\"tw-flex tw-items-center tw-pt-6\">\n                <cide-ele-input \n                  formControlName=\"syfdl_isactive\"\n                  type=\"checkbox\"\n                  label=\"Active\"\n                  size=\"md\">\n                </cide-ele-input>\n              </div>\n            </div>\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-end 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      <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  </form>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "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", "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"], 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]", 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", "helperText", "errorText", "showPreview", "previewWidth", "previewHeight", "previewBoxMode", "placeholderText", "placeholderIcon"], outputs: ["fileChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserCreateComponent, decorators: [{
             type: Component,
@@ -11991,7 +12130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideEleTabComponent,
                         CideEleFileInputComponent,
                         CideIconComponent
-                    ], 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<div class=\"tw-w-full tw-h-full tw-p-3\">\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    <!-- 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-2 tw-mb-3 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 (getUserPhoto()) {\n              <img [src]=\"getUserPhoto()\" alt=\"Profile\" class=\"tw-w-full tw-h-full tw-object-cover\">\n              } @else {\n              <cide-ele-icon variant=\"blue\" size=\"xs\">person</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-2 tw-border-b-0 tw-mb-2\">\n\n        <!-- Name Fields -->\n        <div class=\"tw-grid tw-grid-cols-1 xl:tw-grid-cols-4 lg:tw-grid-cols-2 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\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 and Login Information -->\n        <div class=\"tw-grid tw-grid-cols-1 xl:tw-grid-cols-3 lg:tw-grid-cols-2 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\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\n\n        <!-- Status Control -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-mb-4\">\n          <div class=\"tw-p-4 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-2 tw-border-b-0 tw-mb-2\">\n        <!-- Password Fields -->\n        @if (shouldShowPasswordFields()) {\n        <div class=\"tw-mb-6\">\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-6\">\n          <div class=\"tw-p-4 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-6 tw-mb-6\">\n          <div class=\"tw-p-4 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        <!-- Photo Upload -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-gap-6 tw-mb-6\">\n          <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-4\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-mb-3\">Profile Photo</h6>\n            <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-4\">\n              <cide-ele-file-input id=\"user_photo_upload\" formControlName=\"user_photo_id_cyfm\" accept=\"image/*\"\n                [showPreview]=\"true\" [previewBoxMode]=\"true\" previewWidth=\"150px\" previewHeight=\"150px\"\n                placeholderText=\"Click to upload photo\" placeholderIcon=\"\uD83D\uDC64\">\n              </cide-ele-file-input>\n              <div class=\"tw-text-xs tw-text-gray-500 tw-text-center tw-max-w-sm\">\n                Supported formats: JPG, PNG, GIF. Maximum size: 2MB. Recommended size: 150x150px for best results.\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      }\n\n      @case ('roles') {\n      <!-- Entity, Roles & Permissions Mapping Section -->\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\n\n\n\n        <!-- Important Note -->\n        <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-4 tw-mb-6\">\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-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg tw-p-6 tw-mb-6\">\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()\" leftIcon=\"add\"\n                [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                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeEntityMapping(i)\"\n                  leftIcon=\"delete\">\n                  Remove\n                </button>\n              </div>\n\n              <div class=\"tw-p-6\">\n                <!-- Entity and Role Selection -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                  <div>\n                    <cide-ele-select label=\"Entity *\" [options]=\"getFilteredEntityOptions(i)\" formControlName=\"syenm_entity_id_syen\"\n                    valueKey=\"_id\" labelKey=\"syen_name\" placeholder=\"Select entity\" size=\"md\"\n                    (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\n                  <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\n                    formControlName=\"syenm_role_id_syusrol\" placeholder=\"Select role for this entity\" size=\"md\">\n                  </cide-ele-select>\n                </div>\n\n                <!-- Entity-Specific Details -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                  <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\n                    formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\" 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)\" valueKey=\"_id\" labelKey=\"sydsg_name\"\n                    formControlName=\"syenm_designation_id_sydsg\" placeholder=\"Select designation\" size=\"md\">\n                  </cide-ele-select>\n                </div>\n\n                <!-- Active Period for Entity Mapping -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\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-grid-cols-1 md:tw-grid-cols-3 tw-gap-6 tw-mb-6\">\n                  <div class=\"tw-p-3 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-3 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 tw-pt-4\">\n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\n                    <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Menu Rights & Permissions</h6>\n                    <div class=\"tw-flex tw-gap-2\">\n                      <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"refreshMenuRights(i)\"\n                        leftIcon=\"refresh\">\n                        Refresh Rights\n                      </button>\n                    </div>\n                  </div>\n\n                  @if (getMenuRightsForMapping(i).length > 0) {\n                  <!-- Menu Rights Grid -->\n                  <div class=\"tw-overflow-x-auto tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg\">\n                    <table class=\"tw-w-full tw-text-sm\">\n                      <thead class=\"tw-bg-gray-50 tw-border-b tw-border-gray-200\">\n                        <tr>\n                          <th class=\"tw-px-4 tw-py-3 tw-text-left tw-font-medium tw-text-gray-700\">Menu</th>\n                          <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Role Rights</th>\n                          <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Create</th>\n                          <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Read</th>\n                          <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Update</th>\n                          <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Delete</th>\n                          <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Exception</th>\n                        </tr>\n                      </thead>\n                      <tbody>\n                        @for (menuRight of getMenuRightsForMapping(i); track $index; let j = $index) {\n                        <tr class=\"tw-border-b tw-border-gray-100 hover:tw-bg-gray-50\">\n                          <td class=\"tw-px-4 tw-py-3 tw-font-medium tw-text-gray-900\">\n                            {{ menuRight.menu_name }}\n                            <div class=\"tw-text-xs tw-text-gray-500\">{{ menuRight.menu_code }}</div>\n                          </td>\n\n                          <!-- Role Rights Display -->\n                          <td class=\"tw-px-3 tw-py-3 tw-text-center\">\n                            <div class=\"tw-flex tw-flex-wrap tw-justify-center tw-gap-1\">\n                              @for (right of menuRight.role_rights; track $index) {\n                              <span\n                                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                          </td>\n\n                          <!-- Individual Permission Controls -->\n                          <td class=\"tw-px-3 tw-py-3 tw-text-center\">\n                            <cide-ele-input type=\"checkbox\"\n                              [formControlName]=\"'core_entity_mapping.' + i + '.menu_rights.' + j + '.create'\"\n                              class=\"tw-h-4 tw-accent-green-500\" />\n                          </td>\n\n                          <td class=\"tw-px-3 tw-py-3 tw-text-center\">\n                            <cide-ele-input type=\"checkbox\"\n                              [formControlName]=\"'core_entity_mapping.' + i + '.menu_rights.' + j + '.read'\"\n                              class=\"tw-h-4 tw-accent-blue-500\" />\n                          </td>\n\n                          <td class=\"tw-px-3 tw-py-3 tw-text-center\">\n                            <cide-ele-input type=\"checkbox\"\n                              [formControlName]=\"'core_entity_mapping.' + i + '.menu_rights.' + j + '.update'\"\n                              class=\"tw-h-4 tw-accent-yellow-500\" />\n                          </td>\n\n                          <td class=\"tw-px-3 tw-py-3 tw-text-center\">\n                            <cide-ele-input type=\"checkbox\"\n                              [formControlName]=\"'core_entity_mapping.' + i + '.menu_rights.' + j + '.delete'\"\n                              class=\"tw-h-4 tw-accent-red-500\" />\n                          </td>\n\n                          <td class=\"tw-px-3 tw-py-3 tw-text-center\">\n                            @if (hasExceptionForMenu(i, menuRight.menu_id)) {\n                            <span\n                              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                            } @else {\n                            <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\n                            }\n                          </td>\n                        </tr>\n                        }\n                      </tbody>\n                    </table>\n                  </div>\n\n                  <!-- Legend -->\n                  <div class=\"tw-mt-4 tw-p-3 tw-bg-gray-50 tw-rounded-lg\">\n                    <h6 class=\"tw-text-xs tw-font-semibold tw-text-gray-700 tw-mb-2\">Legend:</h6>\n                    <div class=\"tw-grid tw-grid-cols-2 md:tw-grid-cols-4 tw-gap-3 tw-text-xs tw-text-gray-600\">\n                      <div><span class=\"tw-w-3 tw-h-3 tw-bg-blue-100 tw-inline-block tw-rounded tw-mr-2\"></span>Role\n                        Rights: Inherited from role</div>\n                      <div><span\n                          class=\"tw-w-3 tw-h-3 tw-bg-yellow-100 tw-inline-block tw-rounded tw-mr-2\"></span>Override:\n                        User-specific exception</div>\n                      <div><span\n                          class=\"tw-w-3 tw-h-3 tw-bg-green-100 tw-inline-block tw-rounded tw-mr-2\"></span>Enabled:\n                        Permission granted</div>\n                      <div><span\n                          class=\"tw-w-3 tw-h-3 tw-bg-gray-100 tw-inline-block tw-rounded tw-mr-2\"></span>Disabled:\n                        Permission restricted</div>\n                    </div>\n                  </div>\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 load\n                      menu rights for this mapping.</p>\n                    @if (mapping.syenm_entity_id_syen?._id && mapping.syenm_role_id_syusrol) {\n                    <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"loadMenuRights(i)\"\n                      leftIcon=\"refresh\">\n                      Load Menu Rights\n                    </button>\n                    }\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      </div>\n      }\n\n      @case ('addresses') {\n      <!-- Contact Addresses Section -->\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\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\">\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-6 tw-py-1 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\">Address {{ i + 1 }}</h4>\n              <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\n                leftIcon=\"delete\">\n                Remove\n              </button>\n            </div>\n            <div class=\"tw-p-6\">\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\"\n                  formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select address type\" size=\"md\"\n                  valueKey=\"_id\" labelKey=\"sygms_title\">\n                </cide-ele-select>\n\n                <cide-ele-input label=\"Contact Person Name\" formControlName=\"sycad_contact_person_name\"\n                  placeholder=\"Enter contact person name\" size=\"md\">\n                </cide-ele-input>\n              </div>\n\n              <div class=\"tw-grid tw-grid-cols-1 tw-mb-6\">\n                <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\n                  placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"3\" size=\"md\">\n                </cide-ele-textarea>\n              </div>\n\n              <!-- Postal Code & City -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-select \n                  label=\"Postal Code\"\n                  [options]=\"addressPostalCodes()[i] || []\" \n                  formControlName=\"sycad_contact_pin_sypin\"\n                  placeholder=\"Select postal code\"\n                  [searchable]=\"true\"\n                  [loading]=\"addressPostalCodesLoading()[i] || false\"\n                  (searchChange)=\"onPostalCodeSearch($event, i)\"\n                  (change)=\"onPostalCodeSelection($event, i)\"\n                  size=\"md\">\n                </cide-ele-select>\n                \n                <cide-ele-input \n                  label=\"City\" \n                  formControlName=\"sycad_contact_city_sypin\"\n                  placeholder=\"Enter city\"\n                  size=\"md\">\n                </cide-ele-input>\n              </div>\n              \n              <!-- State & Country -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-input \n                  label=\"State\" \n                  formControlName=\"sycad_contact_state_sypin\"\n                  placeholder=\"Enter state\"\n                  size=\"md\">\n                </cide-ele-input>\n\n                <cide-ele-select \n                  label=\"Country\" \n                  [options]=\"addressCountries()[i] || []\" \n                  formControlName=\"sycad_contact_country_syctr\"\n                  placeholder=\"Select country\"\n                  valueKey=\"_id\"\n                  labelKey=\"syctr_country_iso_name\"\n                  [searchable]=\"true\"\n                  (searchChange)=\"onCountrySearch($event, i)\"\n                  [loading]=\"addressCountriesLoading()[i] || false\"\n                  size=\"md\">\n                </cide-ele-select>\n              </div>\n\n              <!-- Phone Numbers -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-input \n                  label=\"Primary Phone\" \n                  formControlName=\"sycad_contact_phone\"\n                  type=\"tel\"\n                  placeholder=\"Enter primary phone number\"\n                  size=\"md\">\n                </cide-ele-input>\n\n                <cide-ele-input \n                  label=\"Alternate Phone\" \n                  formControlName=\"sycad_contact_phone_alt\"\n                  type=\"tel\"\n                  placeholder=\"Enter alternate phone number\"\n                  size=\"md\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Fax & Email -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-input \n                  label=\"Fax Number\" \n                  formControlName=\"sycad_contact_fax\"\n                  placeholder=\"Enter fax number\"\n                  size=\"md\">\n                </cide-ele-input>\n\n                <cide-ele-input \n                  label=\"Primary Email\" \n                  formControlName=\"sycad_contact_email\"\n                  type=\"email\"\n                  placeholder=\"Enter primary email address\"\n                  size=\"md\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Alternate Email -->\n              <div class=\"tw-grid tw-grid-cols-1 tw-mb-6\">\n                <cide-ele-input \n                  label=\"Alternate Email\" \n                  formControlName=\"sycad_contact_email_alt\"\n                  type=\"email\"\n                  placeholder=\"Enter alternate email address\"\n                  size=\"md\">\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-2 tw-border-b-0 tw-mb-2\">\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\">\n            Add Document\n          </button>\n        </div>\n\n        @for (doc of documents(); track $index; let i = $index) {\n        <div\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-6 tw-py-1 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\">Document {{ i + 1 }}</h4>\n            <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeDocument(i)\"\n              leftIcon=\"delete\">\n              Remove\n            </button>\n          </div>\n          <div class=\"tw-p-6\">\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\n                [formControlName]=\"'documents.' + i + '.syusd_document_type_id_sygms'\"\n                placeholder=\"Select document type\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n\n              <cide-ele-input label=\"Document Number\" [formControlName]=\"'documents.' + i + '.syusd_doc_number'\"\n                placeholder=\"Enter document number\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-input label=\"Name as per Document\"\n                [formControlName]=\"'documents.' + i + '.syusd_doc_name_as_per_doc'\"\n                placeholder=\"Enter name exactly as shown on document\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-select label=\"Photo Group\" [options]=\"photoGroupOptions()\"\n                [formControlName]=\"'documents.' + i + '.syusd_photo_group_id_cyfm'\"\n                placeholder=\"Select photo group\" size=\"md\" valueKey=\"_id\" labelKey=\"cyfm_name\">\n              </cide-ele-select>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-input label=\"Issue Date\" [formControlName]=\"'documents.' + i + '.syusd_doc_issue_date'\"\n                [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input label=\"Expiry Date\" [formControlName]=\"'documents.' + i + '.syusd_doc_expiry_date'\"\n                [id]=\"'syusd_doc_expiry_date['+i+']'\" type=\"date\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\n              <cide-ele-select label=\"Document Verification Status\" [options]=\"documentVerificationStatusOptions()\"\n                [formControlName]=\"'documents.' + i + '.syusd_doc_verification_status_id_sygms'\"\n                placeholder=\"Select verification status\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n\n              <cide-ele-select label=\"Document KYC Status\" [options]=\"documentKycStatusOptions()\"\n                [formControlName]=\"'documents.' + i + '.syusd_doc_kyc_status_id_sygms'\"\n                placeholder=\"Select KYC status\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n            </div>\n          </div>\n        </div>\n        }\n      </div>\n      }\n\n      @case ('family') {\n      <!-- Family Details Section -->\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\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)=\"addFamilyDetail()\" leftIcon=\"add\">\n            Add Family Member\n          </button>\n        </div>\n\n        @for (family of familyDetails(); track $index; let i = $index) {\n        <div\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-6 tw-py-1 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\">Family Member {{ i + 1 }}\n            </h4>\n            <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeFamilyDetail(i)\"\n              leftIcon=\"delete\">\n              Remove\n            </button>\n          </div>\n          <div class=\"tw-p-6\">\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-input label=\"Family Member Name\"\n                [formControlName]=\"'family_details.' + i + '.syfdl_family_member_name'\"\n                placeholder=\"Enter family member full name\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\n                [formControlName]=\"'family_details.' + i + '.syfdl_relationship_id_sygms'\"\n                placeholder=\"Select relationship\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-input label=\"Date of Birth\"\n                [formControlName]=\"'family_details.' + i + '.syfdl_family_member_dob'\" type=\"date\" size=\"md\"\n                [id]=\"'syfdl_family_member_dob['+i+']'\">\n              </cide-ele-input>\n\n              <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\n                [formControlName]=\"'family_details.' + i + '.syfdl_blood_group_sygms'\"\n                placeholder=\"Select blood group\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\n              <cide-ele-input label=\"Contact Email\" [formControlName]=\"'family_details.' + i + '.syfdl_contact_email_id'\"\n                type=\"email\" placeholder=\"Enter contact email\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input label=\"Contact Number\" [formControlName]=\"'family_details.' + i + '.syfdl_contact_number'\"\n                type=\"tel\" placeholder=\"Enter contact number\" size=\"md\">\n              </cide-ele-input>\n            </div>\n          </div>\n        </div>\n        }\n      </div>\n      }\n      }\n    </div>\n\n    <!-- Form Actions -->\n    <div\n      class=\"tw-flex tw-justify-end 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      <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  </form>\n</div>" }]
+                    ], 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<div class=\"tw-w-full tw-h-full tw-p-3\">\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    <!-- 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-2 tw-mb-3 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 (getUserPhoto()) {\n              <img [src]=\"getUserPhoto()\" alt=\"Profile\" class=\"tw-w-full tw-h-full tw-object-cover\">\n              } @else {\n              <cide-ele-icon variant=\"blue\" size=\"xs\">person</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-2 tw-border-b-0 tw-mb-2\">\n\n        <!-- Name Fields -->\n        <div class=\"tw-grid tw-grid-cols-1 xl:tw-grid-cols-4 lg:tw-grid-cols-2 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\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 and Login Information -->\n        <div class=\"tw-grid tw-grid-cols-1 xl:tw-grid-cols-3 lg:tw-grid-cols-2 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\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\n\n        <!-- Status Control -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-mb-4\">\n          <div class=\"tw-p-4 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-2 tw-border-b-0 tw-mb-2\">\n        <!-- Password Fields -->\n        @if (shouldShowPasswordFields()) {\n        <div class=\"tw-mb-6\">\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-6\">\n          <div class=\"tw-p-4 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-6 tw-mb-6\">\n          <div class=\"tw-p-4 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        <!-- Photo Upload -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-gap-6 tw-mb-6\">\n          <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-4\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-mb-3\">Profile Photo</h6>\n            <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-4\">\n              <cide-ele-file-input id=\"user_photo_upload\" formControlName=\"user_photo_id_cyfm\" accept=\"image/*\"\n                [showPreview]=\"true\" [previewBoxMode]=\"true\" previewWidth=\"150px\" previewHeight=\"150px\"\n                placeholderText=\"Click to upload photo\" placeholderIcon=\"\uD83D\uDC64\">\n              </cide-ele-file-input>\n              <div class=\"tw-text-xs tw-text-gray-500 tw-text-center tw-max-w-sm\">\n                Supported formats: JPG, PNG, GIF. Maximum size: 2MB. Recommended size: 150x150px for best results.\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      }\n\n      @case ('roles') {\n      <!-- Entity, Roles & Permissions Mapping Section -->\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\n\n\n\n        <!-- Important Note -->\n        <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-4 tw-mb-6\">\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-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg tw-p-6 tw-mb-6\">\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()\" leftIcon=\"add\"\n                [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                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeEntityMapping(i)\"\n                  leftIcon=\"delete\">\n                  Remove\n                </button>\n              </div>\n\n              <div class=\"tw-p-6\">\n                <!-- Entity and Role Selection -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                  <div>\n                    <cide-ele-select label=\"Entity *\" [options]=\"getFilteredEntityOptions(i)\" formControlName=\"syenm_entity_id_syen\"\n                    valueKey=\"_id\" labelKey=\"syen_name\" placeholder=\"Select entity\" size=\"md\"\n                    (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\n                  <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\n                    formControlName=\"syenm_role_id_syusrol\" placeholder=\"Select role for this entity\" size=\"md\">\n                  </cide-ele-select>\n                </div>\n\n                <!-- Entity-Specific Details -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                  <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\n                    formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\" 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)\" valueKey=\"_id\" labelKey=\"sydsg_name\"\n                    formControlName=\"syenm_designation_id_sydsg\" placeholder=\"Select designation\" size=\"md\">\n                  </cide-ele-select>\n                </div>\n\n                <!-- Active Period for Entity Mapping -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\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-grid-cols-1 md:tw-grid-cols-3 tw-gap-6 tw-mb-6\">\n                  <div class=\"tw-p-3 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-3 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 tw-pt-4\">\n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\n                    <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Menu Rights & Permissions</h6>\n                    <div class=\"tw-flex tw-gap-2\">\n                      <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"refreshMenuRights(i)\"\n                        leftIcon=\"refresh\">\n                        Refresh Rights\n                      </button>\n                    </div>\n                  </div>\n\n                  @if (getMenuRightsForMapping(i).length > 0) {\n                  <!-- Menu Rights Grid -->\n                  <div class=\"tw-overflow-x-auto tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg\">\n                    <table class=\"tw-w-full tw-text-sm\">\n                      <thead class=\"tw-bg-gray-50 tw-border-b tw-border-gray-200\">\n                        <tr>\n                          <th class=\"tw-px-4 tw-py-3 tw-text-left tw-font-medium tw-text-gray-700\">Menu</th>\n                          <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Role Rights</th>\n                          <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Create</th>\n                          <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Read</th>\n                          <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Update</th>\n                          <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Delete</th>\n                          <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Exception</th>\n                        </tr>\n                      </thead>\n                      <tbody>\n                        @for (menuRight of getMenuRightsForMapping(i); track $index; let j = $index) {\n                        <tr class=\"tw-border-b tw-border-gray-100 hover:tw-bg-gray-50\">\n                          <td class=\"tw-px-4 tw-py-3 tw-font-medium tw-text-gray-900\">\n                            {{ menuRight.menu_name }}\n                            <div class=\"tw-text-xs tw-text-gray-500\">{{ menuRight.menu_code }}</div>\n                          </td>\n\n                          <!-- Role Rights Display -->\n                          <td class=\"tw-px-3 tw-py-3 tw-text-center\">\n                            <div class=\"tw-flex tw-flex-wrap tw-justify-center tw-gap-1\">\n                              @for (right of menuRight.role_rights; track $index) {\n                              <span\n                                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                          </td>\n\n                          <!-- Individual Permission Controls -->\n                          <td class=\"tw-px-3 tw-py-3 tw-text-center\">\n                            <cide-ele-input type=\"checkbox\"\n                              [formControlName]=\"'core_entity_mapping.' + i + '.menu_rights.' + j + '.create'\"\n                              class=\"tw-h-4 tw-accent-green-500\" />\n                          </td>\n\n                          <td class=\"tw-px-3 tw-py-3 tw-text-center\">\n                            <cide-ele-input type=\"checkbox\"\n                              [formControlName]=\"'core_entity_mapping.' + i + '.menu_rights.' + j + '.read'\"\n                              class=\"tw-h-4 tw-accent-blue-500\" />\n                          </td>\n\n                          <td class=\"tw-px-3 tw-py-3 tw-text-center\">\n                            <cide-ele-input type=\"checkbox\"\n                              [formControlName]=\"'core_entity_mapping.' + i + '.menu_rights.' + j + '.update'\"\n                              class=\"tw-h-4 tw-accent-yellow-500\" />\n                          </td>\n\n                          <td class=\"tw-px-3 tw-py-3 tw-text-center\">\n                            <cide-ele-input type=\"checkbox\"\n                              [formControlName]=\"'core_entity_mapping.' + i + '.menu_rights.' + j + '.delete'\"\n                              class=\"tw-h-4 tw-accent-red-500\" />\n                          </td>\n\n                          <td class=\"tw-px-3 tw-py-3 tw-text-center\">\n                            @if (hasExceptionForMenu(i, menuRight.menu_id)) {\n                            <span\n                              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                            } @else {\n                            <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\n                            }\n                          </td>\n                        </tr>\n                        }\n                      </tbody>\n                    </table>\n                  </div>\n\n                  <!-- Legend -->\n                  <div class=\"tw-mt-4 tw-p-3 tw-bg-gray-50 tw-rounded-lg\">\n                    <h6 class=\"tw-text-xs tw-font-semibold tw-text-gray-700 tw-mb-2\">Legend:</h6>\n                    <div class=\"tw-grid tw-grid-cols-2 md:tw-grid-cols-4 tw-gap-3 tw-text-xs tw-text-gray-600\">\n                      <div><span class=\"tw-w-3 tw-h-3 tw-bg-blue-100 tw-inline-block tw-rounded tw-mr-2\"></span>Role\n                        Rights: Inherited from role</div>\n                      <div><span\n                          class=\"tw-w-3 tw-h-3 tw-bg-yellow-100 tw-inline-block tw-rounded tw-mr-2\"></span>Override:\n                        User-specific exception</div>\n                      <div><span\n                          class=\"tw-w-3 tw-h-3 tw-bg-green-100 tw-inline-block tw-rounded tw-mr-2\"></span>Enabled:\n                        Permission granted</div>\n                      <div><span\n                          class=\"tw-w-3 tw-h-3 tw-bg-gray-100 tw-inline-block tw-rounded tw-mr-2\"></span>Disabled:\n                        Permission restricted</div>\n                    </div>\n                  </div>\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 load\n                      menu rights for this mapping.</p>\n                    @if (mapping.syenm_entity_id_syen?._id && mapping.syenm_role_id_syusrol) {\n                    <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"loadMenuRights(i)\"\n                      leftIcon=\"refresh\">\n                      Load Menu Rights\n                    </button>\n                    }\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      </div>\n      }\n\n      @case ('addresses') {\n      <!-- Contact Addresses Section -->\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\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\">\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-6 tw-py-1 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\">Address {{ i + 1 }}</h4>\n              <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\n                leftIcon=\"delete\">\n                Remove\n              </button>\n            </div>\n            <div class=\"tw-p-6\">\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\" id=\"sycad_address_type_id_sygms\"\n                  formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select address type\" size=\"md\"\n                  valueKey=\"_id\" labelKey=\"sygms_title\">\n                </cide-ele-select>\n\n                <cide-ele-input label=\"Contact Person Name\" formControlName=\"sycad_contact_person_name\"\n                  placeholder=\"Enter contact person name\" size=\"md\">\n                </cide-ele-input>\n              </div>\n\n              <div class=\"tw-grid tw-grid-cols-1 tw-mb-6\">\n                <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\n                  placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"3\" size=\"md\">\n                </cide-ele-textarea>\n              </div>\n\n              <!-- Postal Code & City -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-select \n                  label=\"Postal Code\"\n                  [options]=\"addressPostalCodes()[i] || []\" \n                  formControlName=\"sycad_contact_pin_sypin\"\n                  placeholder=\"Select postal code\"\n                  [searchable]=\"true\"\n                  [loading]=\"addressPostalCodesLoading()[i] || false\"\n                  (searchChange)=\"onPostalCodeSearch($event, i)\"\n                  (change)=\"onPostalCodeSelection($event, i)\"\n                  size=\"md\">\n                </cide-ele-select>\n                \n                <cide-ele-input \n                  label=\"City\" \n                  formControlName=\"sycad_contact_city_sypin\"\n                  placeholder=\"Enter city\"\n                  size=\"md\">\n                </cide-ele-input>\n              </div>\n              \n              <!-- State & Country -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-input \n                  label=\"State\" \n                  formControlName=\"sycad_contact_state_sypin\"\n                  placeholder=\"Enter state\"\n                  size=\"md\">\n                </cide-ele-input>\n\n                <cide-ele-select \n                  label=\"Country\" \n                  [options]=\"addressCountries()[i] || []\" \n                  formControlName=\"sycad_contact_country_syctr\"\n                  placeholder=\"Select country\"\n                  valueKey=\"_id\"\n                  labelKey=\"syctr_country_iso_name\"\n                  [searchable]=\"true\"\n                  (searchChange)=\"onCountrySearch($event, i)\"\n                  [loading]=\"addressCountriesLoading()[i] || false\"\n                  size=\"md\">\n                </cide-ele-select>\n              </div>\n\n              <!-- Phone Numbers -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-input \n                  label=\"Primary Phone\" \n                  formControlName=\"sycad_contact_phone\"\n                  type=\"tel\"\n                  placeholder=\"Enter primary phone number\"\n                  size=\"md\">\n                </cide-ele-input>\n\n                <cide-ele-input \n                  label=\"Alternate Phone\" \n                  formControlName=\"sycad_contact_phone_alt\"\n                  type=\"tel\"\n                  placeholder=\"Enter alternate phone number\"\n                  size=\"md\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Fax & Email -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-input \n                  label=\"Fax Number\" \n                  formControlName=\"sycad_contact_fax\"\n                  placeholder=\"Enter fax number\"\n                  size=\"md\">\n                </cide-ele-input>\n\n                <cide-ele-input \n                  label=\"Primary Email\" \n                  formControlName=\"sycad_contact_email\"\n                  type=\"email\"\n                  placeholder=\"Enter primary email address\"\n                  size=\"md\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Alternate Email -->\n              <div class=\"tw-grid tw-grid-cols-1 tw-mb-6\">\n                <cide-ele-input \n                  label=\"Alternate Email\" \n                  formControlName=\"sycad_contact_email_alt\"\n                  type=\"email\"\n                  placeholder=\"Enter alternate email address\"\n                  size=\"md\">\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-2 tw-border-b-0 tw-mb-2\">\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\">\n            Add Document\n          </button>\n        </div>\n\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-6 tw-py-1 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\">Document {{ i + 1 }}</h4>\n            <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeDocument(i)\"\n              leftIcon=\"delete\">\n              Remove\n            </button>\n          </div>\n          <div class=\"tw-p-6\">\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\n                formControlName=\"syusd_document_type_id_sygms\"\n                placeholder=\"Select document type\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n\n              <cide-ele-input label=\"Document Number\" formControlName=\"syusd_doc_number\"\n                placeholder=\"Enter document number\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-input label=\"Name as per Document\"\n                formControlName=\"syusd_doc_name_as_per_doc\"\n                placeholder=\"Enter name exactly as shown on document\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-select label=\"Photo Group\" [options]=\"photoGroupOptions()\"\n                formControlName=\"syusd_photo_group_id_cyfm\"\n                placeholder=\"Select photo group\" size=\"md\" valueKey=\"_id\" labelKey=\"cyfm_name\">\n              </cide-ele-select>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-input label=\"Issue Date\" formControlName=\"syusd_doc_issue_date\"\n                [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"md\">\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=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\n              <cide-ele-select label=\"Document Verification Status\" [options]=\"documentVerificationStatusOptions()\"\n                formControlName=\"syusd_doc_verification_status_id_sygms\"\n                placeholder=\"Select verification status\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n\n              <cide-ele-select label=\"Document KYC Status\" [options]=\"documentKycStatusOptions()\"\n                formControlName=\"syusd_doc_kyc_status_id_sygms\"\n                placeholder=\"Select KYC status\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n            </div>\n          </div>\n        </div>\n        }\n        </div>\n      </div>\n      }\n\n      @case ('family') {\n      <!-- Family Details Section -->\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\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)=\"addFamilyDetail()\" leftIcon=\"add\">\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-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-6 tw-py-1 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\">Family Member {{ i + 1 }}\n            </h4>\n            <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeFamilyDetail(i)\"\n              leftIcon=\"delete\">\n              Remove\n            </button>\n          </div>\n          <div class=\"tw-p-6\">\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-input label=\"Family Member Name\"\n                formControlName=\"syfdl_family_member_name\"\n                placeholder=\"Enter family member full name\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-select \n                label=\"Family Member User\"\n                [options]=\"userOptions(i)\"\n                formControlName=\"syfdl_family_member_id_user\"\n                placeholder=\"Select family member user\" \n                size=\"md\" \n                valueKey=\"_id\" \n                labelKey=\"user_fullname\"\n                [searchable]=\"true\"\n                [loading]=\"userSearchLoading()[i] || false\"\n                (searchChange)=\"onUserSearchChange($event, i)\"\n                (change)=\"onUserSelectionChange($event, i)\">\n              </cide-ele-select>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\n                formControlName=\"syfdl_relationship_id_sygms\"\n                placeholder=\"Select relationship\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n\n              <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\n                formControlName=\"syfdl_blood_group_sygms\"\n                placeholder=\"Select blood group\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-input label=\"Date of Birth\"\n                formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"md\"\n                [id]=\"'syfdl_family_member_dob['+i+']'\">\n              </cide-ele-input>\n\n              <cide-ele-input label=\"Contact Phone\"\n                formControlName=\"syfdl_contact_phone\"\n                type=\"tel\" placeholder=\"Enter contact phone\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\"\n                type=\"email\" placeholder=\"Enter contact email\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\"\n                type=\"email\" placeholder=\"Enter contact email ID\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\n              <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\"\n                type=\"tel\" placeholder=\"Enter contact number\" size=\"md\">\n              </cide-ele-input>\n\n              <div class=\"tw-flex tw-items-center tw-pt-6\">\n                <cide-ele-input \n                  formControlName=\"syfdl_isactive\"\n                  type=\"checkbox\"\n                  label=\"Active\"\n                  size=\"md\">\n                </cide-ele-input>\n              </div>\n            </div>\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-end 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      <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  </form>\n</div>" }]
         }], ctorParameters: () => [] });
 
 var userCreate_component = /*#__PURE__*/Object.freeze({
@@ -14744,5 +14883,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CideCoreDepartmentListComponent, CideCoreDepartmentManagementService, CideCoreDesignationListComponent, CideCoreDesignationManagementService, CideCoreEntityCreateComponent, CideCoreEntityListComponent, CideCoreEntityManagementService, CideCoreGradeLevelListComponent, CideCoreGradeLevelManagementService, CideCoreMenuListComponent, CideCoreMenuManagementService, CideCorePageControlsComponent, CideCorePageControlsService, CideCorePageListComponent, CideCorePageManagementService, CideCorePageThemeComponent, CideCorePageThemeService, CideCoreRoleSelectService, CideCoreUserAttributesComponent, CideCoreUserContactAddressesComponent, CideCoreUserCreateComponent, CideCoreUserDocumentsComponent, CideCoreUserEntityAccessComponent, CideCoreUserFamilyDetailsComponent, CideCoreUserListComponent, CideCoreUserMasterService, CloudIdeCoreComponent, CloudIdeCoreService, coreRoutes };
+export { CideCoreDepartmentListComponent, CideCoreDepartmentManagementService, CideCoreDesignationListComponent, CideCoreDesignationManagementService, CideCoreEntityCreateComponent, CideCoreEntityListComponent, CideCoreEntityManagementService, CideCoreGeneralMasterComponent, CideCoreGeneralMasterService, CideCoreGeneralMasterTypeComponent, CideCoreGeneralMasterTypeService, CideCoreGradeLevelListComponent, CideCoreGradeLevelManagementService, CideCoreMenuListComponent, CideCoreMenuManagementService, CideCorePageControlsComponent, CideCorePageControlsService, CideCorePageListComponent, CideCorePageManagementService, CideCorePageThemeComponent, CideCorePageThemeService, CideCoreRoleSelectService, CideCoreUserAttributesComponent, CideCoreUserContactAddressesComponent, CideCoreUserCreateComponent, CideCoreUserDocumentsComponent, CideCoreUserEntityAccessComponent, CideCoreUserFamilyDetailsComponent, CideCoreUserListComponent, CideCoreUserMasterService, CloudIdeCoreComponent, CloudIdeCoreService, coreRoutes };
 //# sourceMappingURL=cloud-ide-core.mjs.map