cloud-ide-core 1.0.4 → 2.0.1

package/fesm2022/cloud-ide-core.mjs

@@ -8,7 +8,7 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { BehaviorSubject, of, throwError, Observable } from 'rxjs';
 import { tap, catchError, map } from 'rxjs/operators';
-import { coreRoutesUrl, generateStringFromObject, cidePath, hostManagerRoutesUrl, MDesignationInsertUpdatePayload, generateObjectFromString } from 'cloud-ide-lms-model';
+import { coreRoutesUrl, generateStringFromObject, cidePath, hostManagerRoutesUrl, MDesignationInsertUpdatePayload, generateObjectFromString, userRoutesUrl } from 'cloud-ide-lms-model';
 import * as i1 from '@angular/common/http';
 import { HttpClient } from '@angular/common/http';
 import { CideEleDataGridComponent, CideEleButtonComponent, CideInputComponent, CideSelectComponent, CideTextareaComponent, CideIconComponent, CideEleDropdownComponent, ConfirmationService, NotificationService, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideSelectOptionComponent, CideEleTabComponent, CideEleFileInputComponent, TooltipDirective } from 'cloud-ide-element';
@@ -7204,23 +7204,14 @@ class CideAdmUserMasterListService {
         const query = generateStringFromObject(body);
         const url = cidePath.join([
             hostManagerRoutesUrl.cideSuiteHost,
-            coreRoutesUrl.module,
-            // TODO: Add proper user master route when available
-            'user-master', // This should be defined in coreRoutesUrl
+            userRoutesUrl.module,
+            userRoutesUrl?.user,
             query
         ]);
         console.log('🔍 USER MASTER SERVICE: Making API call to:', url);
         console.log('🔍 USER MASTER SERVICE: Payload:', body);
-        // For now, return simulated data until actual API endpoint is available
-        return new Observable(observer => {
-            setTimeout(() => {
-                const simulatedResponse = this.generateSimulatedResponse(body);
-                observer.next(simulatedResponse);
-                observer.complete();
-            }, 800); // Simulate network delay
-        });
         // Uncomment when actual API endpoint is available:
-        // return this.http.get(url);
+        return this.http.get(url);
     }
     /**
      * Get user list with default parameters
@@ -7672,8 +7663,6 @@ class UserCreateComponent {
             user_activeupto: [''],
             user_photo_id_cyfm: [''],
             user_passwordchangeonlogin: [false],
-            user_designation_id_sydsg: [''],
-            user_department_id_sydept: [''],
             user_isactive: [true],
             // Related data arrays will be handled separately
             // as they are managed through signals in the template
@@ -7780,6 +7769,10 @@ class UserCreateComponent {
         const newMapping = {
             syenm_id_syen: '',
             syenm_role_id_syusrol: '',
+            syenm_designation_id_sydsg: '',
+            syenm_department_id_sydept: '',
+            syenm_activefrom: '',
+            syenm_activeupto: '',
             syenm_isdefault: false,
             syenm_isactive: true,
             syenm_isloggedin: true,
@@ -7789,8 +7782,13 @@ class UserCreateComponent {
         const currentMappings = this.entityMappings();
         const index = currentMappings.length - 1;
         // Add form controls for the new entity mapping
+        const today = new Date().toISOString().split('T')[0]; // Default to today
         this.userMasterForm.addControl(`entity_mappings.${index}.syenm_id_syen`, this.fb.control('', Validators.required));
         this.userMasterForm.addControl(`entity_mappings.${index}.syenm_role_id_syusrol`, this.fb.control('', Validators.required));
+        this.userMasterForm.addControl(`entity_mappings.${index}.syenm_designation_id_sydsg`, this.fb.control(''));
+        this.userMasterForm.addControl(`entity_mappings.${index}.syenm_department_id_sydept`, this.fb.control(''));
+        this.userMasterForm.addControl(`entity_mappings.${index}.syenm_activefrom`, this.fb.control(today, Validators.required));
+        this.userMasterForm.addControl(`entity_mappings.${index}.syenm_activeupto`, this.fb.control(''));
         this.userMasterForm.addControl(`entity_mappings.${index}.syenm_isdefault`, this.fb.control(false));
         this.userMasterForm.addControl(`entity_mappings.${index}.syenm_isactive`, this.fb.control(true));
         this.userMasterForm.addControl(`entity_mappings.${index}.syenm_isloggedin`, this.fb.control(true));
@@ -7808,6 +7806,10 @@ class UserCreateComponent {
         // Remove entity mapping form controls
         this.userMasterForm.removeControl(`entity_mappings.${index}.syenm_id_syen`);
         this.userMasterForm.removeControl(`entity_mappings.${index}.syenm_role_id_syusrol`);
+        this.userMasterForm.removeControl(`entity_mappings.${index}.syenm_designation_id_sydsg`);
+        this.userMasterForm.removeControl(`entity_mappings.${index}.syenm_department_id_sydept`);
+        this.userMasterForm.removeControl(`entity_mappings.${index}.syenm_activefrom`);
+        this.userMasterForm.removeControl(`entity_mappings.${index}.syenm_activeupto`);
         this.userMasterForm.removeControl(`entity_mappings.${index}.syenm_isdefault`);
         this.userMasterForm.removeControl(`entity_mappings.${index}.syenm_isactive`);
         this.userMasterForm.removeControl(`entity_mappings.${index}.syenm_isloggedin`);
@@ -8003,6 +8005,52 @@ class UserCreateComponent {
     hasDefaultEntity() {
         return this.entityMappings().some(mapping => mapping.syenm_isdefault);
     }
+    // User Context Header Methods
+    getUserFullName() {
+        const firstName = this.userMasterForm.get('user_firstname')?.value || '';
+        const middleName = this.userMasterForm.get('user_middlename')?.value || '';
+        const lastName = this.userMasterForm.get('user_lastname')?.value || '';
+        const fullName = this.userMasterForm.get('user_fullname')?.value;
+        if (fullName) {
+            return fullName;
+        }
+        // Auto-generate from parts
+        const parts = [firstName, middleName, lastName].filter(part => part.trim());
+        return parts.join(' ');
+    }
+    getUserUsername() {
+        return this.userMasterForm.get('user_username')?.value || '';
+    }
+    getUserEmail() {
+        return this.userMasterForm.get('user_emailid')?.value || '';
+    }
+    getUserMobile() {
+        return this.userMasterForm.get('user_mobileno')?.value || '';
+    }
+    getUserActivePeriod() {
+        const activeFrom = this.userMasterForm.get('user_activefrom')?.value;
+        const activeUpto = this.userMasterForm.get('user_activeupto')?.value;
+        if (activeFrom && activeUpto) {
+            return `${activeFrom} to ${activeUpto}`;
+        }
+        else if (activeFrom) {
+            return `From ${activeFrom}`;
+        }
+        else {
+            return 'Not set';
+        }
+    }
+    getUserActiveStatus() {
+        return this.userMasterForm.get('user_isactive')?.value || false;
+    }
+    getUserPhoto() {
+        // This would return the preview URL if available
+        // For now, return null to show the icon
+        return null;
+    }
+    getEntityMappingCount() {
+        return this.entityMappings().length;
+    }
     addContactAddress() {
         const newAddress = {
             sycad_contact_person_name: '',
@@ -8155,6 +8203,10 @@ class UserCreateComponent {
             // Remove entity mapping controls
             this.userMasterForm.removeControl(`entity_mappings.${i}.syenm_id_syen`);
             this.userMasterForm.removeControl(`entity_mappings.${i}.syenm_role_id_syusrol`);
+            this.userMasterForm.removeControl(`entity_mappings.${i}.syenm_designation_id_sydsg`);
+            this.userMasterForm.removeControl(`entity_mappings.${i}.syenm_department_id_sydept`);
+            this.userMasterForm.removeControl(`entity_mappings.${i}.syenm_activefrom`);
+            this.userMasterForm.removeControl(`entity_mappings.${i}.syenm_activeupto`);
             this.userMasterForm.removeControl(`entity_mappings.${i}.syenm_isdefault`);
             this.userMasterForm.removeControl(`entity_mappings.${i}.syenm_isactive`);
             this.userMasterForm.removeControl(`entity_mappings.${i}.syenm_isloggedin`);
@@ -8167,7 +8219,7 @@ class UserCreateComponent {
         this.menuRightsMap.set({});
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: UserCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: UserCreateComponent, isStandalone: true, selector: "cide-core-user-create", ngImport: i0, template: "<!-- \r\n  ENTERPRISE USER MASTER FORM\r\n  \r\n  Enterprise-Level Styling with Tailwind CSS\r\n  Features: Responsive grids, proper typography, enhanced user experience\r\n-->\r\n\r\n<div class=\"tw-w-full tw-h-full tw-p-3\">\r\n  <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\r\n    (ngSubmit)=\"onSubmit()\">\r\n    <!-- Tab Navigation -->\r\n    <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\r\n      <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\r\n        (tabChange)=\"onTabChange($event)\">\r\n      </cide-ele-tab>\r\n    </div>\r\n\r\n    <!-- Tab Content -->\r\n    <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\r\n      @switch (activeTab()) {\r\n\r\n      @case ('basic') {\r\n      <!-- User Basic Information Section -->\r\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\r\n\r\n        <!-- Name Fields -->\r\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\">\r\n          <cide-ele-input id=\"user_firstname\" label=\"First Name *\" formControlName=\"user_firstname\"\r\n            placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\">\r\n          </cide-ele-input>\r\n\r\n          <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\r\n            placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\">\r\n          </cide-ele-input>\r\n\r\n          <cide-ele-input id=\"user_lastname\" label=\"Last Name *\" formControlName=\"user_lastname\"\r\n            placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\">\r\n          </cide-ele-input>\r\n\r\n          <cide-ele-input id=\"user_fullname\" label=\"Full Name *\" formControlName=\"user_fullname\"\r\n            placeholder=\"Auto-generated or enter manually\" [maxlength]=\"62\" size=\"md\">\r\n          </cide-ele-input>\r\n        </div>\r\n\r\n        <!-- Contact and Login Information -->\r\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\">\r\n          <cide-ele-input id=\"user_username\" label=\"Username *\" formControlName=\"user_username\"\r\n            placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\r\n          </cide-ele-input>\r\n\r\n          <cide-ele-input id=\"user_emailid\" label=\"Email ID *\" formControlName=\"user_emailid\" type=\"email\"\r\n            placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\r\n          </cide-ele-input>\r\n\r\n          <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number *\" formControlName=\"user_mobileno\" type=\"tel\"\r\n            placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\r\n          </cide-ele-input>\r\n        </div>\r\n\r\n        <!-- Active Period -->\r\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-2 tw-gap-6 tw-mb-2\">\r\n          <cide-ele-input id=\"user_activefrom\" label=\"Active From *\" formControlName=\"user_activefrom\" type=\"date\"\r\n            size=\"md\">\r\n          </cide-ele-input>\r\n\r\n          <cide-ele-input id=\"user_activeupto\" label=\"Active Until\" formControlName=\"user_activeupto\" type=\"date\"\r\n            size=\"md\">\r\n          </cide-ele-input>\r\n        </div>\r\n\r\n        <!-- Status Control -->\r\n        <div class=\"tw-grid tw-grid-cols-1 tw-mb-4\">\r\n          <div class=\"tw-p-4 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\r\n            <label\r\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\">\r\n              <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\r\n                class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\r\n              <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\r\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\r\n                access and operations</span>\r\n            </label>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      }\r\n\r\n      @case ('auth') {\r\n      <!-- Authentication Section -->\r\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\r\n        <!-- Password Fields -->\r\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6 tw-mb-6\">\r\n          <cide-ele-input id=\"user_password\" label=\"Password *\" formControlName=\"user_password\" type=\"password\"\r\n            placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\r\n          </cide-ele-input>\r\n\r\n          <div class=\"tw-p-4 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\r\n            <label\r\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\">\r\n              <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\r\n                formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\r\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\r\n                password on next login</span>\r\n            </label>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Photo Upload -->\r\n        <div class=\"tw-grid tw-grid-cols-1 tw-gap-6 tw-mb-6\">\r\n          <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-4\">\r\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-mb-3\">Profile Photo</h6>\r\n            <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-4\">\r\n              <cide-ele-file-input \r\n                id=\"user_photo_upload\"\r\n                formControlName=\"user_photo_id_cyfm\"\r\n                accept=\"image/*\"\r\n                [showPreview]=\"true\"\r\n                [previewBoxMode]=\"true\"\r\n                previewWidth=\"150px\"\r\n                previewHeight=\"150px\"\r\n                placeholderText=\"Click to upload photo\"\r\n                placeholderIcon=\"\uD83D\uDC64\">\r\n              </cide-ele-file-input>\r\n              <div class=\"tw-text-xs tw-text-gray-500 tw-text-center tw-max-w-sm\">\r\n                Supported formats: JPG, PNG, GIF. Maximum size: 2MB. Recommended size: 150x150px for best results.\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      }\r\n\r\n      @case ('roles') {\r\n      <!-- Entity, Roles & Permissions Mapping Section -->\r\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\r\n\r\n        <!-- User Basic Information -->\r\n        <div class=\"tw-grid tw-grid-cols-1 xl:tw-grid-cols-2 lg:tw-grid-cols-2 md:tw-grid-cols-2 tw-gap-6 tw-mb-8\">\r\n          <cide-ele-select id=\"user_designation_id_sydsg\" label=\"Designation\" [options]=\"designationOptions()\"\r\n            formControlName=\"user_designation_id_sydsg\" placeholder=\"Select designation\" size=\"md\">\r\n          </cide-ele-select>\r\n\r\n          <cide-ele-select id=\"user_department_id_sydept\" label=\"Department\" [options]=\"departmentOptions()\"\r\n            formControlName=\"user_department_id_sydept\" placeholder=\"Select department\" size=\"md\">\r\n          </cide-ele-select>\r\n        </div>\r\n\r\n        <!-- Important Note -->\r\n        <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-4 tw-mb-6\">\r\n          <div class=\"tw-flex tw-items-start tw-gap-3\">\r\n            <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\r\n            <div class=\"tw-flex-1\">\r\n              <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\r\n              <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role mappings below. At least one entity mapping is required for user access.</p>\r\n              @if (hasDefaultEntity()) {\r\n              <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\r\n                <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\r\n                <span class=\"tw-text-sm tw-text-amber-800\">\r\n                  <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\r\n                </span>\r\n              </div>\r\n              } @else {\r\n              <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\r\n                \u26A0\uFE0F No default entity selected. Please set one entity as default.\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Entity-Role Mapping Section -->\r\n        <div class=\"tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg tw-p-6 tw-mb-6\">\r\n          <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\r\n            <div class=\"tw-text-center\">\r\n              <h4 class=\"tw-text-lg tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\r\n              <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\r\n            </div>\r\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\" leftIcon=\"add\">\r\n              Add Entity Mapping\r\n            </button>\r\n          </div>\r\n\r\n          @for (mapping of entityMappings(); track $index; let i = $index) {\r\n          <div class=\"tw-bg-white tw-border tw-border-blue-200 tw-rounded-xl tw-mb-6 tw-overflow-hidden tw-shadow-sm\">\r\n            <div 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\">\r\n              <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n                <h5 class=\"tw-m-0 tw-text-blue-800 tw-text-sm tw-font-semibold\">Entity Mapping {{ i + 1 }}</h5>\r\n                @if (mapping.syenm_isdefault) {\r\n                <span 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\">\r\n                  <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">star</cide-ele-icon>\r\n                  Default\r\n                </span>\r\n                }\r\n              </div>\r\n              <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeEntityMapping(i)\" leftIcon=\"delete\">\r\n                Remove\r\n              </button>\r\n            </div>\r\n            \r\n            <div class=\"tw-p-6\">\r\n              <!-- Entity and Role Selection -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\r\n                <cide-ele-select \r\n                  label=\"Entity *\" \r\n                  [options]=\"entityOptions()\"\r\n                  [formControlName]=\"'entity_mappings.' + i + '.syenm_id_syen'\"\r\n                  placeholder=\"Select entity\"\r\n                  size=\"md\"\r\n                  (valueChange)=\"onEntityChange(i, $event)\">\r\n                </cide-ele-select>\r\n\r\n                <cide-ele-select \r\n                  label=\"Role for this Entity *\" \r\n                  [options]=\"getRoleOptionsForEntity(i)\"\r\n                  [formControlName]=\"'entity_mappings.' + i + '.syenm_role_id_syusrol'\"\r\n                  placeholder=\"Select role for this entity\"\r\n                  size=\"md\">\r\n                </cide-ele-select>\r\n              </div>\r\n\r\n              <!-- Mapping Settings -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-6 tw-mb-6\">\r\n                <div class=\"tw-p-3 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded-lg\">\r\n                  <cide-ele-input \r\n                    type=\"checkbox\" \r\n                    label=\"Default Entity\" \r\n                    [formControlName]=\"'entity_mappings.' + i + '.syenm_isdefault'\"\r\n                    (change)=\"onDefaultEntityChange(i, $event)\"\r\n                    class=\"tw-h-5 tw-accent-green-500\" />\r\n                  <span class=\"tw-text-xs tw-text-green-600 tw-block tw-mt-1\">Set as user's default entity (only one allowed)</span>\r\n                </div>\r\n\r\n                <div class=\"tw-p-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\r\n                  <cide-ele-input \r\n                    type=\"checkbox\" \r\n                    label=\"Active Mapping\" \r\n                    [formControlName]=\"'entity_mappings.' + i + '.syenm_isactive'\"\r\n                    class=\"tw-h-5 tw-accent-blue-500\" />\r\n                  <span class=\"tw-text-xs tw-text-blue-600 tw-block tw-mt-1\">Enable this entity mapping</span>\r\n                </div>\r\n\r\n                <div class=\"tw-p-3 tw-bg-purple-50 tw-border tw-border-purple-200 tw-rounded-lg\">\r\n                  <cide-ele-input \r\n                    type=\"checkbox\" \r\n                    label=\"Allow Login\" \r\n                    [formControlName]=\"'entity_mappings.' + i + '.syenm_isloggedin'\"\r\n                    class=\"tw-h-5 tw-accent-purple-500\" />\r\n                  <span class=\"tw-text-xs tw-text-purple-600 tw-block tw-mt-1\">User can login through this entity</span>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Menu Rights Grid for this Entity-Role -->\r\n              <div class=\"tw-border-t tw-border-gray-200 tw-pt-4\">\r\n                <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\r\n                  <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Menu Rights & Permissions</h6>\r\n                  <div class=\"tw-flex tw-gap-2\">\r\n                    <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"refreshMenuRights(i)\" leftIcon=\"refresh\">\r\n                      Refresh Rights\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n\r\n                @if (getMenuRightsForMapping(i).length > 0) {\r\n                <!-- Menu Rights Grid -->\r\n                <div class=\"tw-overflow-x-auto tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg\">\r\n                  <table class=\"tw-w-full tw-text-sm\">\r\n                    <thead class=\"tw-bg-gray-50 tw-border-b tw-border-gray-200\">\r\n                      <tr>\r\n                        <th class=\"tw-px-4 tw-py-3 tw-text-left tw-font-medium tw-text-gray-700\">Menu</th>\r\n                        <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Role Rights</th>\r\n                        <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Create</th>\r\n                        <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Read</th>\r\n                        <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Update</th>\r\n                        <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Delete</th>\r\n                        <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Exception</th>\r\n                      </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                      @for (menuRight of getMenuRightsForMapping(i); track $index; let j = $index) {\r\n                      <tr class=\"tw-border-b tw-border-gray-100 hover:tw-bg-gray-50\">\r\n                        <td class=\"tw-px-4 tw-py-3 tw-font-medium tw-text-gray-900\">\r\n                          {{ menuRight.menu_name }}\r\n                          <div class=\"tw-text-xs tw-text-gray-500\">{{ menuRight.menu_code }}</div>\r\n                        </td>\r\n                        \r\n                        <!-- Role Rights Display -->\r\n                        <td class=\"tw-px-3 tw-py-3 tw-text-center\">\r\n                          <div class=\"tw-flex tw-flex-wrap tw-justify-center tw-gap-1\">\r\n                            @for (right of menuRight.role_rights; track $index) {\r\n                            <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-blue-100 tw-text-blue-800 tw-rounded\">\r\n                              {{ right }}\r\n                            </span>\r\n                            }\r\n                          </div>\r\n                        </td>\r\n\r\n                        <!-- Individual Permission Controls -->\r\n                        <td class=\"tw-px-3 tw-py-3 tw-text-center\">\r\n                          <cide-ele-input \r\n                            type=\"checkbox\" \r\n                            [formControlName]=\"'entity_mappings.' + i + '.menu_rights.' + j + '.create'\"\r\n                            class=\"tw-h-4 tw-accent-green-500\" />\r\n                        </td>\r\n\r\n                        <td class=\"tw-px-3 tw-py-3 tw-text-center\">\r\n                          <cide-ele-input \r\n                            type=\"checkbox\" \r\n                            [formControlName]=\"'entity_mappings.' + i + '.menu_rights.' + j + '.read'\"\r\n                            class=\"tw-h-4 tw-accent-blue-500\" />\r\n                        </td>\r\n\r\n                        <td class=\"tw-px-3 tw-py-3 tw-text-center\">\r\n                          <cide-ele-input \r\n                            type=\"checkbox\" \r\n                            [formControlName]=\"'entity_mappings.' + i + '.menu_rights.' + j + '.update'\"\r\n                            class=\"tw-h-4 tw-accent-yellow-500\" />\r\n                        </td>\r\n\r\n                        <td class=\"tw-px-3 tw-py-3 tw-text-center\">\r\n                          <cide-ele-input \r\n                            type=\"checkbox\" \r\n                            [formControlName]=\"'entity_mappings.' + i + '.menu_rights.' + j + '.delete'\"\r\n                            class=\"tw-h-4 tw-accent-red-500\" />\r\n                        </td>\r\n\r\n                        <td class=\"tw-px-3 tw-py-3 tw-text-center\">\r\n                          @if (hasExceptionForMenu(i, menuRight.menu_id)) {\r\n                          <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-yellow-100 tw-text-yellow-800 tw-rounded\">\r\n                            Override\r\n                          </span>\r\n                          } @else {\r\n                          <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\r\n                          }\r\n                        </td>\r\n                      </tr>\r\n                      }\r\n                    </tbody>\r\n                  </table>\r\n                </div>\r\n\r\n                <!-- Legend -->\r\n                <div class=\"tw-mt-4 tw-p-3 tw-bg-gray-50 tw-rounded-lg\">\r\n                  <h6 class=\"tw-text-xs tw-font-semibold tw-text-gray-700 tw-mb-2\">Legend:</h6>\r\n                  <div class=\"tw-grid tw-grid-cols-2 md:tw-grid-cols-4 tw-gap-3 tw-text-xs tw-text-gray-600\">\r\n                    <div><span class=\"tw-w-3 tw-h-3 tw-bg-blue-100 tw-inline-block tw-rounded tw-mr-2\"></span>Role Rights: Inherited from role</div>\r\n                    <div><span class=\"tw-w-3 tw-h-3 tw-bg-yellow-100 tw-inline-block tw-rounded tw-mr-2\"></span>Override: User-specific exception</div>\r\n                    <div><span class=\"tw-w-3 tw-h-3 tw-bg-green-100 tw-inline-block tw-rounded tw-mr-2\"></span>Enabled: Permission granted</div>\r\n                    <div><span class=\"tw-w-3 tw-h-3 tw-bg-gray-100 tw-inline-block tw-rounded tw-mr-2\"></span>Disabled: Permission restricted</div>\r\n                  </div>\r\n                </div>\r\n\r\n                } @else {\r\n                <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\r\n                  <div class=\"tw-text-gray-400 tw-mb-3\">\r\n                    <i class=\"material-icons tw-text-3xl\">menu</i>\r\n                  </div>\r\n                  <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\r\n                  <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to load menu rights for this mapping.</p>\r\n                  @if (mapping.syenm_id_syen && mapping.syenm_role_id_syusrol) {\r\n                  <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"loadMenuRights(i)\" leftIcon=\"refresh\">\r\n                    Load Menu Rights\r\n                  </button>\r\n                  }\r\n                </div>\r\n                }\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n\r\n          @if (entityMappings().length === 0) {\r\n          <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\r\n            <div class=\"tw-text-blue-400 tw-mb-3\">\r\n              <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\r\n            </div>\r\n            <h4 class=\"tw-text-lg tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\r\n            <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and permissions for different entities.</p>\r\n            <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\" leftIcon=\"add\">\r\n              Add First Entity Mapping\r\n            </button>\r\n          </div>\r\n          }\r\n        </div>\r\n\r\n        <!-- Entity Relationship Info -->\r\n        <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-4\">\r\n          <h4 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-mb-2\">Entity Relationship Types</h4>\r\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4 tw-text-xs tw-text-gray-600\">\r\n            <div>\r\n              <strong class=\"tw-text-green-600\">Direct Entity:</strong> User has direct access to this entity\r\n            </div>\r\n            <div>\r\n              <strong class=\"tw-text-blue-600\">Child Entity:</strong> User has access through parent entity relationship\r\n            </div>\r\n            <div>\r\n              <strong class=\"tw-text-purple-600\">Indirect Entity:</strong> User has access through complex entity hierarchy\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      }\r\n\r\n      @case ('addresses') {\r\n      <!-- Contact Addresses Section -->\r\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\r\n        <div class=\"tw-flex tw-justify-end\">\r\n          <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\r\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\r\n              leftIcon=\"add\">\r\n              Add New Address\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        @for (address of contactAddresses(); track $index; let i = $index) {\r\n        <div\r\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\">\r\n          <div\r\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\">\r\n            <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">Address {{ i + 1 }}</h4>\r\n            <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\r\n              leftIcon=\"delete\">\r\n              Remove\r\n            </button>\r\n          </div>\r\n          <div class=\"tw-p-6\">\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\r\n              <cide-ele-input label=\"Contact Person Name\"\r\n                [formControlName]=\"'contact_addresses.' + i + '.sycad_contact_person_name'\"\r\n                placeholder=\"Enter contact person name\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\"\r\n                [formControlName]=\"'contact_addresses.' + i + '.sycad_address_type_id_sygms'\"\r\n                placeholder=\"Select address type\" size=\"md\">\r\n              </cide-ele-select>\r\n            </div>\r\n\r\n            <div class=\"tw-grid tw-grid-cols-1 tw-mb-6\">\r\n              <cide-ele-textarea label=\"Complete Address\"\r\n                [formControlName]=\"'contact_addresses.' + i + '.sycad_contact_address'\"\r\n                placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"3\" size=\"md\">\r\n              </cide-ele-textarea>\r\n            </div>\r\n\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\r\n              <cide-ele-input label=\"Contact Phone\"\r\n                [formControlName]=\"'contact_addresses.' + i + '.sycad_contact_phone'\" type=\"tel\"\r\n                placeholder=\"Enter contact phone number\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input label=\"Contact Email\"\r\n                [formControlName]=\"'contact_addresses.' + i + '.sycad_contact_email'\" type=\"email\"\r\n                placeholder=\"Enter contact email address\" size=\"md\">\r\n              </cide-ele-input>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n\r\n      @case ('documents') {\r\n      <!-- Documents Section -->\r\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\r\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\r\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\">\r\n            Add Document\r\n          </button>\r\n        </div>\r\n\r\n        @for (doc of documents(); track $index; let i = $index) {\r\n        <div\r\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\">\r\n          <div\r\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\">\r\n            <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">Document {{ i + 1 }}</h4>\r\n            <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeDocument(i)\"\r\n              leftIcon=\"delete\">\r\n              Remove\r\n            </button>\r\n          </div>\r\n          <div class=\"tw-p-6\">\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\r\n              <cide-ele-input label=\"Document Number\" [formControlName]=\"'documents.' + i + '.syusd_doc_number'\"\r\n                placeholder=\"Enter document number\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input label=\"Name as per Document\"\r\n                [formControlName]=\"'documents.' + i + '.syusd_doc_name_as_per_doc'\"\r\n                placeholder=\"Enter name exactly as shown on document\" size=\"md\">\r\n              </cide-ele-input>\r\n            </div>\r\n\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\r\n              <cide-ele-input label=\"Issue Date\" [formControlName]=\"'documents.' + i + '.syusd_doc_issue_date'\"\r\n                type=\"date\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input label=\"Expiry Date\" [formControlName]=\"'documents.' + i + '.syusd_doc_expiry_date'\"\r\n                type=\"date\" size=\"md\">\r\n              </cide-ele-input>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n\r\n      @case ('family') {\r\n      <!-- Family Details Section -->\r\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\r\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\r\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\">\r\n            Add Family Member\r\n          </button>\r\n        </div>\r\n\r\n        @for (family of familyDetails(); track $index; let i = $index) {\r\n        <div\r\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\">\r\n          <div\r\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\">\r\n            <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">Family Member {{ i + 1 }}\r\n            </h4>\r\n            <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeFamilyDetail(i)\"\r\n              leftIcon=\"delete\">\r\n              Remove\r\n            </button>\r\n          </div>\r\n          <div class=\"tw-p-6\">\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\r\n              <cide-ele-input label=\"Family Member Name\"\r\n                [formControlName]=\"'family_details.' + i + '.syfdl_family_member_name'\"\r\n                placeholder=\"Enter family member full name\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\r\n                [formControlName]=\"'family_details.' + i + '.syfdl_relationship_id_sygms'\"\r\n                placeholder=\"Select relationship\" size=\"md\">\r\n              </cide-ele-select>\r\n            </div>\r\n\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\r\n              <cide-ele-input label=\"Date of Birth\"\r\n                [formControlName]=\"'family_details.' + i + '.syfdl_family_member_dob'\" type=\"date\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input label=\"Contact Number\" [formControlName]=\"'family_details.' + i + '.syfdl_contact_number'\"\r\n                type=\"tel\" placeholder=\"Enter contact number\" size=\"md\">\r\n              </cide-ele-input>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n      }\r\n    </div>\r\n\r\n    <!-- Form Actions -->\r\n    <div\r\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\">\r\n      <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\r\n        [disabled]=\"loading()\">\r\n        Reset Form\r\n      </button>\r\n\r\n      <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\r\n        [loading]=\"loading()\" leftIcon=\"save\">\r\n        Save User Master\r\n      </button>\r\n    </div>\r\n  </form>\r\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: "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"], 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: UserCreateComponent, isStandalone: true, selector: "cide-core-user-create", ngImport: i0, template: "<!-- \r\n  ENTERPRISE USER MASTER FORM\r\n  \r\n  Enterprise-Level Styling with Tailwind CSS\r\n  Features: Responsive grids, proper typography, enhanced user experience\r\n-->\r\n\r\n<div class=\"tw-w-full tw-h-full tw-p-3\">\r\n  <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\r\n    (ngSubmit)=\"onSubmit()\">\r\n    \r\n    <!-- User Context Header -->\r\n    <div 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\">\r\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\r\n        <!-- User Basic Info Display -->\r\n        <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\r\n          <!-- Profile Photo Preview -->\r\n          <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n            <div 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\">\r\n              @if (getUserPhoto()) {\r\n              <img [src]=\"getUserPhoto()\" alt=\"Profile\" class=\"tw-w-full tw-h-full tw-object-cover\">\r\n              } @else {\r\n              <cide-ele-icon variant=\"blue\" size=\"xs\">person</cide-ele-icon>\r\n              }\r\n            </div>\r\n            <div class=\"tw-flex tw-flex-col\">\r\n              <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\r\n                {{ getUserFullName() || 'New User' }}\r\n              </span>\r\n              <span class=\"tw-text-xs tw-text-blue-600\">\r\n                {{ getUserUsername() || 'Username not set' }}\r\n              </span>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Contact Info -->\r\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\r\n              <cide-ele-icon variant=\"gray\" size=\"xs\">email</cide-ele-icon>\r\n              <span>{{ getUserEmail() || 'Email not set' }}</span>\r\n            </div>\r\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\r\n              <cide-ele-icon variant=\"gray\" size=\"xs\">phone</cide-ele-icon>\r\n              <span>{{ getUserMobile() || 'Mobile not set' }}</span>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Active Status -->\r\n          <div class=\"tw-flex tw-items-center tw-gap-1\">\r\n            @if (getUserActiveStatus()) {\r\n            <span 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\">\r\n              <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">check_circle</cide-ele-icon>\r\n              Active\r\n            </span>\r\n            } @else {\r\n            <span 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\">\r\n              <cide-ele-icon variant=\"red\" size=\"xs\" class=\"tw-mr-1\">cancel</cide-ele-icon>\r\n              Inactive\r\n            </span>\r\n            }\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Entity Info -->\r\n        <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n          @if (hasDefaultEntity()) {\r\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-blue-700\">\r\n            <cide-ele-icon variant=\"blue\" size=\"xs\">business</cide-ele-icon>\r\n            <span class=\"tw-font-medium\">{{ getDefaultEntityName() }}</span>\r\n          </div>\r\n          } @else {\r\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-500\">\r\n            <cide-ele-icon variant=\"gray\" size=\"xs\">business</cide-ele-icon>\r\n            <span class=\"tw-italic\">No entity</span>\r\n          </div>\r\n          }\r\n          \r\n          <span class=\"tw-text-xs tw-text-gray-600 tw-px-2 tw-py-1 tw-bg-gray-100 tw-rounded\">\r\n            {{ getEntityMappingCount() }} mapping(s)\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Tab Navigation -->\r\n    <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\r\n      <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\r\n        (tabChange)=\"onTabChange($event)\">\r\n      </cide-ele-tab>\r\n    </div>\r\n\r\n    <!-- Tab Content -->\r\n    <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\r\n      @switch (activeTab()) {\r\n\r\n      @case ('basic') {\r\n      <!-- User Basic Information Section -->\r\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\r\n\r\n        <!-- Name Fields -->\r\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\">\r\n          <cide-ele-input id=\"user_firstname\" label=\"First Name *\" formControlName=\"user_firstname\"\r\n            placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\">\r\n          </cide-ele-input>\r\n\r\n          <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\r\n            placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\">\r\n          </cide-ele-input>\r\n\r\n          <cide-ele-input id=\"user_lastname\" label=\"Last Name *\" formControlName=\"user_lastname\"\r\n            placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\">\r\n          </cide-ele-input>\r\n\r\n          <cide-ele-input id=\"user_fullname\" label=\"Full Name *\" formControlName=\"user_fullname\"\r\n            placeholder=\"Auto-generated or enter manually\" [maxlength]=\"62\" size=\"md\">\r\n          </cide-ele-input>\r\n        </div>\r\n\r\n        <!-- Contact and Login Information -->\r\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\">\r\n          <cide-ele-input id=\"user_username\" label=\"Username *\" formControlName=\"user_username\"\r\n            placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\r\n          </cide-ele-input>\r\n\r\n          <cide-ele-input id=\"user_emailid\" label=\"Email ID *\" formControlName=\"user_emailid\" type=\"email\"\r\n            placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\r\n          </cide-ele-input>\r\n\r\n          <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number *\" formControlName=\"user_mobileno\" type=\"tel\"\r\n            placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\r\n          </cide-ele-input>\r\n        </div>\r\n\r\n        <!-- Active Period -->\r\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-2 tw-gap-6 tw-mb-2\">\r\n          <cide-ele-input id=\"user_activefrom\" label=\"Active From *\" formControlName=\"user_activefrom\" type=\"date\"\r\n            size=\"md\">\r\n          </cide-ele-input>\r\n\r\n          <cide-ele-input id=\"user_activeupto\" label=\"Active Until\" formControlName=\"user_activeupto\" type=\"date\"\r\n            size=\"md\">\r\n          </cide-ele-input>\r\n        </div>\r\n\r\n        <!-- Status Control -->\r\n        <div class=\"tw-grid tw-grid-cols-1 tw-mb-4\">\r\n          <div class=\"tw-p-4 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\r\n            <label\r\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\">\r\n              <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\r\n                class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\r\n              <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\r\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\r\n                access and operations</span>\r\n            </label>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      }\r\n\r\n      @case ('auth') {\r\n      <!-- Authentication Section -->\r\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\r\n        <!-- Password Fields -->\r\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6 tw-mb-6\">\r\n          <cide-ele-input id=\"user_password\" label=\"Password *\" formControlName=\"user_password\" type=\"password\"\r\n            placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\r\n          </cide-ele-input>\r\n\r\n          <div class=\"tw-p-4 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\r\n            <label\r\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\">\r\n              <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\r\n                formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\r\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\r\n                password on next login</span>\r\n            </label>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Photo Upload -->\r\n        <div class=\"tw-grid tw-grid-cols-1 tw-gap-6 tw-mb-6\">\r\n          <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-4\">\r\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-mb-3\">Profile Photo</h6>\r\n            <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-4\">\r\n              <cide-ele-file-input \r\n                id=\"user_photo_upload\"\r\n                formControlName=\"user_photo_id_cyfm\"\r\n                accept=\"image/*\"\r\n                [showPreview]=\"true\"\r\n                [previewBoxMode]=\"true\"\r\n                previewWidth=\"150px\"\r\n                previewHeight=\"150px\"\r\n                placeholderText=\"Click to upload photo\"\r\n                placeholderIcon=\"\uD83D\uDC64\">\r\n              </cide-ele-file-input>\r\n              <div class=\"tw-text-xs tw-text-gray-500 tw-text-center tw-max-w-sm\">\r\n                Supported formats: JPG, PNG, GIF. Maximum size: 2MB. Recommended size: 150x150px for best results.\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      }\r\n\r\n      @case ('roles') {\r\n      <!-- Entity, Roles & Permissions Mapping Section -->\r\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\r\n\r\n\r\n\r\n        <!-- Important Note -->\r\n        <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-4 tw-mb-6\">\r\n          <div class=\"tw-flex tw-items-start tw-gap-3\">\r\n            <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\r\n            <div class=\"tw-flex-1\">\r\n              <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\r\n              <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role mappings below. At least one entity mapping is required for user access.</p>\r\n              @if (hasDefaultEntity()) {\r\n              <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\r\n                <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\r\n                <span class=\"tw-text-sm tw-text-amber-800\">\r\n                  <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\r\n                </span>\r\n              </div>\r\n              } @else {\r\n              <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\r\n                \u26A0\uFE0F No default entity selected. Please set one entity as default.\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Entity-Role Mapping Section -->\r\n        <div class=\"tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg tw-p-6 tw-mb-6\">\r\n          <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\r\n            <div>\r\n              <h4 class=\"tw-text-lg tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\r\n              <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\r\n            </div>\r\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\" leftIcon=\"add\">\r\n              Add Entity Mapping\r\n            </button>\r\n          </div>\r\n\r\n          @for (mapping of entityMappings(); track $index; let i = $index) {\r\n          <div class=\"tw-bg-white tw-border tw-border-blue-200 tw-rounded-xl tw-mb-6 tw-overflow-hidden tw-shadow-sm\">\r\n            <div 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\">\r\n              <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n                <h5 class=\"tw-m-0 tw-text-blue-800 tw-text-sm tw-font-semibold\">Entity Mapping {{ i + 1 }}</h5>\r\n                @if (mapping.syenm_isdefault) {\r\n                <span 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\">\r\n                  <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">star</cide-ele-icon>\r\n                  Default\r\n                </span>\r\n                }\r\n              </div>\r\n              <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeEntityMapping(i)\" leftIcon=\"delete\">\r\n                Remove\r\n              </button>\r\n            </div>\r\n            \r\n            <div class=\"tw-p-6\">\r\n              <!-- Entity and Role Selection -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\r\n                <cide-ele-select \r\n                  label=\"Entity *\" \r\n                  [options]=\"entityOptions()\"\r\n                  [formControlName]=\"'entity_mappings.' + i + '.syenm_id_syen'\"\r\n                  placeholder=\"Select entity\"\r\n                  size=\"md\"\r\n                  (valueChange)=\"onEntityChange(i, $event)\">\r\n                </cide-ele-select>\r\n\r\n                <cide-ele-select \r\n                  label=\"Role for this Entity *\" \r\n                  [options]=\"getRoleOptionsForEntity(i)\"\r\n                  [formControlName]=\"'entity_mappings.' + i + '.syenm_role_id_syusrol'\"\r\n                  placeholder=\"Select role for this entity\"\r\n                  size=\"md\">\r\n                </cide-ele-select>\r\n              </div>\r\n\r\n              <!-- Entity-Specific Details -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\r\n                <cide-ele-select \r\n                  label=\"Designation for this Entity\" \r\n                  [options]=\"designationOptions()\"\r\n                  [formControlName]=\"'entity_mappings.' + i + '.syenm_designation_id_sydsg'\"\r\n                  placeholder=\"Select designation\"\r\n                  size=\"md\">\r\n                </cide-ele-select>\r\n\r\n                <cide-ele-select \r\n                  label=\"Department for this Entity\" \r\n                  [options]=\"departmentOptions()\"\r\n                  [formControlName]=\"'entity_mappings.' + i + '.syenm_department_id_sydept'\"\r\n                  placeholder=\"Select department\"\r\n                  size=\"md\">\r\n                </cide-ele-select>\r\n              </div>\r\n\r\n              <!-- Active Period for Entity Mapping -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\r\n                <cide-ele-input \r\n                  label=\"Active From *\" \r\n                  [formControlName]=\"'entity_mappings.' + i + '.syenm_activefrom'\"\r\n                  type=\"date\"\r\n                  size=\"md\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input \r\n                  label=\"Active Until\" \r\n                  [formControlName]=\"'entity_mappings.' + i + '.syenm_activeupto'\"\r\n                  type=\"date\"\r\n                  size=\"md\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n              <!-- Mapping Settings -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-6 tw-mb-6\">\r\n                <div class=\"tw-p-3 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded-lg\">\r\n                  <cide-ele-input \r\n                    type=\"checkbox\" \r\n                    label=\"Default Entity\" \r\n                    [formControlName]=\"'entity_mappings.' + i + '.syenm_isdefault'\"\r\n                    (change)=\"onDefaultEntityChange(i, $event)\"\r\n                    class=\"tw-h-5 tw-accent-green-500\" />\r\n                  <span class=\"tw-text-xs tw-text-green-600 tw-block tw-mt-1\">Set as user's default entity (only one allowed)</span>\r\n                </div>\r\n\r\n                <div class=\"tw-p-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\r\n                  <cide-ele-input \r\n                    type=\"checkbox\" \r\n                    label=\"Active Mapping\" \r\n                    [formControlName]=\"'entity_mappings.' + i + '.syenm_isactive'\"\r\n                    class=\"tw-h-5 tw-accent-blue-500\" />\r\n                  <span class=\"tw-text-xs tw-text-blue-600 tw-block tw-mt-1\">Enable this entity mapping</span>\r\n                </div>\r\n\r\n                <div class=\"tw-p-3 tw-bg-purple-50 tw-border tw-border-purple-200 tw-rounded-lg\">\r\n                  <cide-ele-input \r\n                    type=\"checkbox\" \r\n                    label=\"Allow Login\" \r\n                    [formControlName]=\"'entity_mappings.' + i + '.syenm_isloggedin'\"\r\n                    class=\"tw-h-5 tw-accent-purple-500\" />\r\n                  <span class=\"tw-text-xs tw-text-purple-600 tw-block tw-mt-1\">User can login through this entity</span>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Menu Rights Grid for this Entity-Role -->\r\n              <div class=\"tw-border-t tw-border-gray-200 tw-pt-4\">\r\n                <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\r\n                  <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Menu Rights & Permissions</h6>\r\n                  <div class=\"tw-flex tw-gap-2\">\r\n                    <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"refreshMenuRights(i)\" leftIcon=\"refresh\">\r\n                      Refresh Rights\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n\r\n                @if (getMenuRightsForMapping(i).length > 0) {\r\n                <!-- Menu Rights Grid -->\r\n                <div class=\"tw-overflow-x-auto tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg\">\r\n                  <table class=\"tw-w-full tw-text-sm\">\r\n                    <thead class=\"tw-bg-gray-50 tw-border-b tw-border-gray-200\">\r\n                      <tr>\r\n                        <th class=\"tw-px-4 tw-py-3 tw-text-left tw-font-medium tw-text-gray-700\">Menu</th>\r\n                        <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Role Rights</th>\r\n                        <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Create</th>\r\n                        <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Read</th>\r\n                        <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Update</th>\r\n                        <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Delete</th>\r\n                        <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Exception</th>\r\n                      </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                      @for (menuRight of getMenuRightsForMapping(i); track $index; let j = $index) {\r\n                      <tr class=\"tw-border-b tw-border-gray-100 hover:tw-bg-gray-50\">\r\n                        <td class=\"tw-px-4 tw-py-3 tw-font-medium tw-text-gray-900\">\r\n                          {{ menuRight.menu_name }}\r\n                          <div class=\"tw-text-xs tw-text-gray-500\">{{ menuRight.menu_code }}</div>\r\n                        </td>\r\n                        \r\n                        <!-- Role Rights Display -->\r\n                        <td class=\"tw-px-3 tw-py-3 tw-text-center\">\r\n                          <div class=\"tw-flex tw-flex-wrap tw-justify-center tw-gap-1\">\r\n                            @for (right of menuRight.role_rights; track $index) {\r\n                            <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-blue-100 tw-text-blue-800 tw-rounded\">\r\n                              {{ right }}\r\n                            </span>\r\n                            }\r\n                          </div>\r\n                        </td>\r\n\r\n                        <!-- Individual Permission Controls -->\r\n                        <td class=\"tw-px-3 tw-py-3 tw-text-center\">\r\n                          <cide-ele-input \r\n                            type=\"checkbox\" \r\n                            [formControlName]=\"'entity_mappings.' + i + '.menu_rights.' + j + '.create'\"\r\n                            class=\"tw-h-4 tw-accent-green-500\" />\r\n                        </td>\r\n\r\n                        <td class=\"tw-px-3 tw-py-3 tw-text-center\">\r\n                          <cide-ele-input \r\n                            type=\"checkbox\" \r\n                            [formControlName]=\"'entity_mappings.' + i + '.menu_rights.' + j + '.read'\"\r\n                            class=\"tw-h-4 tw-accent-blue-500\" />\r\n                        </td>\r\n\r\n                        <td class=\"tw-px-3 tw-py-3 tw-text-center\">\r\n                          <cide-ele-input \r\n                            type=\"checkbox\" \r\n                            [formControlName]=\"'entity_mappings.' + i + '.menu_rights.' + j + '.update'\"\r\n                            class=\"tw-h-4 tw-accent-yellow-500\" />\r\n                        </td>\r\n\r\n                        <td class=\"tw-px-3 tw-py-3 tw-text-center\">\r\n                          <cide-ele-input \r\n                            type=\"checkbox\" \r\n                            [formControlName]=\"'entity_mappings.' + i + '.menu_rights.' + j + '.delete'\"\r\n                            class=\"tw-h-4 tw-accent-red-500\" />\r\n                        </td>\r\n\r\n                        <td class=\"tw-px-3 tw-py-3 tw-text-center\">\r\n                          @if (hasExceptionForMenu(i, menuRight.menu_id)) {\r\n                          <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-yellow-100 tw-text-yellow-800 tw-rounded\">\r\n                            Override\r\n                          </span>\r\n                          } @else {\r\n                          <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\r\n                          }\r\n                        </td>\r\n                      </tr>\r\n                      }\r\n                    </tbody>\r\n                  </table>\r\n                </div>\r\n\r\n                <!-- Legend -->\r\n                <div class=\"tw-mt-4 tw-p-3 tw-bg-gray-50 tw-rounded-lg\">\r\n                  <h6 class=\"tw-text-xs tw-font-semibold tw-text-gray-700 tw-mb-2\">Legend:</h6>\r\n                  <div class=\"tw-grid tw-grid-cols-2 md:tw-grid-cols-4 tw-gap-3 tw-text-xs tw-text-gray-600\">\r\n                    <div><span class=\"tw-w-3 tw-h-3 tw-bg-blue-100 tw-inline-block tw-rounded tw-mr-2\"></span>Role Rights: Inherited from role</div>\r\n                    <div><span class=\"tw-w-3 tw-h-3 tw-bg-yellow-100 tw-inline-block tw-rounded tw-mr-2\"></span>Override: User-specific exception</div>\r\n                    <div><span class=\"tw-w-3 tw-h-3 tw-bg-green-100 tw-inline-block tw-rounded tw-mr-2\"></span>Enabled: Permission granted</div>\r\n                    <div><span class=\"tw-w-3 tw-h-3 tw-bg-gray-100 tw-inline-block tw-rounded tw-mr-2\"></span>Disabled: Permission restricted</div>\r\n                  </div>\r\n                </div>\r\n\r\n                } @else {\r\n                <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\r\n                  <div class=\"tw-text-gray-400 tw-mb-3\">\r\n                    <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\r\n                  </div>\r\n                  <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\r\n                  <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to load menu rights for this mapping.</p>\r\n                  @if (mapping.syenm_id_syen && mapping.syenm_role_id_syusrol) {\r\n                  <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"loadMenuRights(i)\" leftIcon=\"refresh\">\r\n                    Load Menu Rights\r\n                  </button>\r\n                  }\r\n                </div>\r\n                }\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n\r\n          @if (entityMappings().length === 0) {\r\n          <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\r\n            <div class=\"tw-text-blue-400 tw-mb-3\">\r\n              <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\r\n            </div>\r\n            <h4 class=\"tw-text-lg tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\r\n            <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and permissions for different entities.</p>\r\n            <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\" leftIcon=\"add\">\r\n              Add First Entity Mapping\r\n            </button>\r\n          </div>\r\n          }\r\n        </div>\r\n\r\n\r\n      </div>\r\n      }\r\n\r\n      @case ('addresses') {\r\n      <!-- Contact Addresses Section -->\r\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\r\n        <div class=\"tw-flex tw-justify-end\">\r\n          <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\r\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\r\n              leftIcon=\"add\">\r\n              Add New Address\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        @for (address of contactAddresses(); track $index; let i = $index) {\r\n        <div\r\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\">\r\n          <div\r\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\">\r\n            <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">Address {{ i + 1 }}</h4>\r\n            <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\r\n              leftIcon=\"delete\">\r\n              Remove\r\n            </button>\r\n          </div>\r\n          <div class=\"tw-p-6\">\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\r\n              <cide-ele-input label=\"Contact Person Name\"\r\n                [formControlName]=\"'contact_addresses.' + i + '.sycad_contact_person_name'\"\r\n                placeholder=\"Enter contact person name\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\"\r\n                [formControlName]=\"'contact_addresses.' + i + '.sycad_address_type_id_sygms'\"\r\n                placeholder=\"Select address type\" size=\"md\">\r\n              </cide-ele-select>\r\n            </div>\r\n\r\n            <div class=\"tw-grid tw-grid-cols-1 tw-mb-6\">\r\n              <cide-ele-textarea label=\"Complete Address\"\r\n                [formControlName]=\"'contact_addresses.' + i + '.sycad_contact_address'\"\r\n                placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"3\" size=\"md\">\r\n              </cide-ele-textarea>\r\n            </div>\r\n\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\r\n              <cide-ele-input label=\"Contact Phone\"\r\n                [formControlName]=\"'contact_addresses.' + i + '.sycad_contact_phone'\" type=\"tel\"\r\n                placeholder=\"Enter contact phone number\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input label=\"Contact Email\"\r\n                [formControlName]=\"'contact_addresses.' + i + '.sycad_contact_email'\" type=\"email\"\r\n                placeholder=\"Enter contact email address\" size=\"md\">\r\n              </cide-ele-input>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n\r\n      @case ('documents') {\r\n      <!-- Documents Section -->\r\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\r\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\r\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\">\r\n            Add Document\r\n          </button>\r\n        </div>\r\n\r\n        @for (doc of documents(); track $index; let i = $index) {\r\n        <div\r\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\">\r\n          <div\r\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\">\r\n            <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">Document {{ i + 1 }}</h4>\r\n            <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeDocument(i)\"\r\n              leftIcon=\"delete\">\r\n              Remove\r\n            </button>\r\n          </div>\r\n          <div class=\"tw-p-6\">\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\r\n              <cide-ele-input label=\"Document Number\" [formControlName]=\"'documents.' + i + '.syusd_doc_number'\"\r\n                placeholder=\"Enter document number\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input label=\"Name as per Document\"\r\n                [formControlName]=\"'documents.' + i + '.syusd_doc_name_as_per_doc'\"\r\n                placeholder=\"Enter name exactly as shown on document\" size=\"md\">\r\n              </cide-ele-input>\r\n            </div>\r\n\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\r\n              <cide-ele-input label=\"Issue Date\" [formControlName]=\"'documents.' + i + '.syusd_doc_issue_date'\"\r\n                type=\"date\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input label=\"Expiry Date\" [formControlName]=\"'documents.' + i + '.syusd_doc_expiry_date'\"\r\n                type=\"date\" size=\"md\">\r\n              </cide-ele-input>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n\r\n      @case ('family') {\r\n      <!-- Family Details Section -->\r\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\r\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\r\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\">\r\n            Add Family Member\r\n          </button>\r\n        </div>\r\n\r\n        @for (family of familyDetails(); track $index; let i = $index) {\r\n        <div\r\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\">\r\n          <div\r\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\">\r\n            <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">Family Member {{ i + 1 }}\r\n            </h4>\r\n            <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeFamilyDetail(i)\"\r\n              leftIcon=\"delete\">\r\n              Remove\r\n            </button>\r\n          </div>\r\n          <div class=\"tw-p-6\">\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\r\n              <cide-ele-input label=\"Family Member Name\"\r\n                [formControlName]=\"'family_details.' + i + '.syfdl_family_member_name'\"\r\n                placeholder=\"Enter family member full name\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\r\n                [formControlName]=\"'family_details.' + i + '.syfdl_relationship_id_sygms'\"\r\n                placeholder=\"Select relationship\" size=\"md\">\r\n              </cide-ele-select>\r\n            </div>\r\n\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\r\n              <cide-ele-input label=\"Date of Birth\"\r\n                [formControlName]=\"'family_details.' + i + '.syfdl_family_member_dob'\" type=\"date\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input label=\"Contact Number\" [formControlName]=\"'family_details.' + i + '.syfdl_contact_number'\"\r\n                type=\"tel\" placeholder=\"Enter contact number\" size=\"md\">\r\n              </cide-ele-input>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n      }\r\n    </div>\r\n\r\n    <!-- Form Actions -->\r\n    <div\r\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\">\r\n      <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\r\n        [disabled]=\"loading()\">\r\n        Reset Form\r\n      </button>\r\n\r\n      <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\r\n        [loading]=\"loading()\" leftIcon=\"save\">\r\n        Save User Master\r\n      </button>\r\n    </div>\r\n  </form>\r\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: "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"], 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: UserCreateComponent, decorators: [{
             type: Component,
@@ -8181,7 +8233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideEleTabComponent,
                         CideEleFileInputComponent,
                         CideIconComponent
-                    ], template: "<!-- \r\n  ENTERPRISE USER MASTER FORM\r\n  \r\n  Enterprise-Level Styling with Tailwind CSS\r\n  Features: Responsive grids, proper typography, enhanced user experience\r\n-->\r\n\r\n<div class=\"tw-w-full tw-h-full tw-p-3\">\r\n  <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\r\n    (ngSubmit)=\"onSubmit()\">\r\n    <!-- Tab Navigation -->\r\n    <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\r\n      <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\r\n        (tabChange)=\"onTabChange($event)\">\r\n      </cide-ele-tab>\r\n    </div>\r\n\r\n    <!-- Tab Content -->\r\n    <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\r\n      @switch (activeTab()) {\r\n\r\n      @case ('basic') {\r\n      <!-- User Basic Information Section -->\r\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\r\n\r\n        <!-- Name Fields -->\r\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\">\r\n          <cide-ele-input id=\"user_firstname\" label=\"First Name *\" formControlName=\"user_firstname\"\r\n            placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\">\r\n          </cide-ele-input>\r\n\r\n          <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\r\n            placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\">\r\n          </cide-ele-input>\r\n\r\n          <cide-ele-input id=\"user_lastname\" label=\"Last Name *\" formControlName=\"user_lastname\"\r\n            placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\">\r\n          </cide-ele-input>\r\n\r\n          <cide-ele-input id=\"user_fullname\" label=\"Full Name *\" formControlName=\"user_fullname\"\r\n            placeholder=\"Auto-generated or enter manually\" [maxlength]=\"62\" size=\"md\">\r\n          </cide-ele-input>\r\n        </div>\r\n\r\n        <!-- Contact and Login Information -->\r\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\">\r\n          <cide-ele-input id=\"user_username\" label=\"Username *\" formControlName=\"user_username\"\r\n            placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\r\n          </cide-ele-input>\r\n\r\n          <cide-ele-input id=\"user_emailid\" label=\"Email ID *\" formControlName=\"user_emailid\" type=\"email\"\r\n            placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\r\n          </cide-ele-input>\r\n\r\n          <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number *\" formControlName=\"user_mobileno\" type=\"tel\"\r\n            placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\r\n          </cide-ele-input>\r\n        </div>\r\n\r\n        <!-- Active Period -->\r\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-2 tw-gap-6 tw-mb-2\">\r\n          <cide-ele-input id=\"user_activefrom\" label=\"Active From *\" formControlName=\"user_activefrom\" type=\"date\"\r\n            size=\"md\">\r\n          </cide-ele-input>\r\n\r\n          <cide-ele-input id=\"user_activeupto\" label=\"Active Until\" formControlName=\"user_activeupto\" type=\"date\"\r\n            size=\"md\">\r\n          </cide-ele-input>\r\n        </div>\r\n\r\n        <!-- Status Control -->\r\n        <div class=\"tw-grid tw-grid-cols-1 tw-mb-4\">\r\n          <div class=\"tw-p-4 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\r\n            <label\r\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\">\r\n              <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\r\n                class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\r\n              <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\r\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\r\n                access and operations</span>\r\n            </label>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      }\r\n\r\n      @case ('auth') {\r\n      <!-- Authentication Section -->\r\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\r\n        <!-- Password Fields -->\r\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6 tw-mb-6\">\r\n          <cide-ele-input id=\"user_password\" label=\"Password *\" formControlName=\"user_password\" type=\"password\"\r\n            placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\r\n          </cide-ele-input>\r\n\r\n          <div class=\"tw-p-4 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\r\n            <label\r\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\">\r\n              <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\r\n                formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\r\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\r\n                password on next login</span>\r\n            </label>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Photo Upload -->\r\n        <div class=\"tw-grid tw-grid-cols-1 tw-gap-6 tw-mb-6\">\r\n          <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-4\">\r\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-mb-3\">Profile Photo</h6>\r\n            <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-4\">\r\n              <cide-ele-file-input \r\n                id=\"user_photo_upload\"\r\n                formControlName=\"user_photo_id_cyfm\"\r\n                accept=\"image/*\"\r\n                [showPreview]=\"true\"\r\n                [previewBoxMode]=\"true\"\r\n                previewWidth=\"150px\"\r\n                previewHeight=\"150px\"\r\n                placeholderText=\"Click to upload photo\"\r\n                placeholderIcon=\"\uD83D\uDC64\">\r\n              </cide-ele-file-input>\r\n              <div class=\"tw-text-xs tw-text-gray-500 tw-text-center tw-max-w-sm\">\r\n                Supported formats: JPG, PNG, GIF. Maximum size: 2MB. Recommended size: 150x150px for best results.\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      }\r\n\r\n      @case ('roles') {\r\n      <!-- Entity, Roles & Permissions Mapping Section -->\r\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\r\n\r\n        <!-- User Basic Information -->\r\n        <div class=\"tw-grid tw-grid-cols-1 xl:tw-grid-cols-2 lg:tw-grid-cols-2 md:tw-grid-cols-2 tw-gap-6 tw-mb-8\">\r\n          <cide-ele-select id=\"user_designation_id_sydsg\" label=\"Designation\" [options]=\"designationOptions()\"\r\n            formControlName=\"user_designation_id_sydsg\" placeholder=\"Select designation\" size=\"md\">\r\n          </cide-ele-select>\r\n\r\n          <cide-ele-select id=\"user_department_id_sydept\" label=\"Department\" [options]=\"departmentOptions()\"\r\n            formControlName=\"user_department_id_sydept\" placeholder=\"Select department\" size=\"md\">\r\n          </cide-ele-select>\r\n        </div>\r\n\r\n        <!-- Important Note -->\r\n        <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-4 tw-mb-6\">\r\n          <div class=\"tw-flex tw-items-start tw-gap-3\">\r\n            <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\r\n            <div class=\"tw-flex-1\">\r\n              <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\r\n              <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role mappings below. At least one entity mapping is required for user access.</p>\r\n              @if (hasDefaultEntity()) {\r\n              <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\r\n                <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\r\n                <span class=\"tw-text-sm tw-text-amber-800\">\r\n                  <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\r\n                </span>\r\n              </div>\r\n              } @else {\r\n              <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\r\n                \u26A0\uFE0F No default entity selected. Please set one entity as default.\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Entity-Role Mapping Section -->\r\n        <div class=\"tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg tw-p-6 tw-mb-6\">\r\n          <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\r\n            <div class=\"tw-text-center\">\r\n              <h4 class=\"tw-text-lg tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\r\n              <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\r\n            </div>\r\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\" leftIcon=\"add\">\r\n              Add Entity Mapping\r\n            </button>\r\n          </div>\r\n\r\n          @for (mapping of entityMappings(); track $index; let i = $index) {\r\n          <div class=\"tw-bg-white tw-border tw-border-blue-200 tw-rounded-xl tw-mb-6 tw-overflow-hidden tw-shadow-sm\">\r\n            <div 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\">\r\n              <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n                <h5 class=\"tw-m-0 tw-text-blue-800 tw-text-sm tw-font-semibold\">Entity Mapping {{ i + 1 }}</h5>\r\n                @if (mapping.syenm_isdefault) {\r\n                <span 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\">\r\n                  <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">star</cide-ele-icon>\r\n                  Default\r\n                </span>\r\n                }\r\n              </div>\r\n              <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeEntityMapping(i)\" leftIcon=\"delete\">\r\n                Remove\r\n              </button>\r\n            </div>\r\n            \r\n            <div class=\"tw-p-6\">\r\n              <!-- Entity and Role Selection -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\r\n                <cide-ele-select \r\n                  label=\"Entity *\" \r\n                  [options]=\"entityOptions()\"\r\n                  [formControlName]=\"'entity_mappings.' + i + '.syenm_id_syen'\"\r\n                  placeholder=\"Select entity\"\r\n                  size=\"md\"\r\n                  (valueChange)=\"onEntityChange(i, $event)\">\r\n                </cide-ele-select>\r\n\r\n                <cide-ele-select \r\n                  label=\"Role for this Entity *\" \r\n                  [options]=\"getRoleOptionsForEntity(i)\"\r\n                  [formControlName]=\"'entity_mappings.' + i + '.syenm_role_id_syusrol'\"\r\n                  placeholder=\"Select role for this entity\"\r\n                  size=\"md\">\r\n                </cide-ele-select>\r\n              </div>\r\n\r\n              <!-- Mapping Settings -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-6 tw-mb-6\">\r\n                <div class=\"tw-p-3 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded-lg\">\r\n                  <cide-ele-input \r\n                    type=\"checkbox\" \r\n                    label=\"Default Entity\" \r\n                    [formControlName]=\"'entity_mappings.' + i + '.syenm_isdefault'\"\r\n                    (change)=\"onDefaultEntityChange(i, $event)\"\r\n                    class=\"tw-h-5 tw-accent-green-500\" />\r\n                  <span class=\"tw-text-xs tw-text-green-600 tw-block tw-mt-1\">Set as user's default entity (only one allowed)</span>\r\n                </div>\r\n\r\n                <div class=\"tw-p-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\r\n                  <cide-ele-input \r\n                    type=\"checkbox\" \r\n                    label=\"Active Mapping\" \r\n                    [formControlName]=\"'entity_mappings.' + i + '.syenm_isactive'\"\r\n                    class=\"tw-h-5 tw-accent-blue-500\" />\r\n                  <span class=\"tw-text-xs tw-text-blue-600 tw-block tw-mt-1\">Enable this entity mapping</span>\r\n                </div>\r\n\r\n                <div class=\"tw-p-3 tw-bg-purple-50 tw-border tw-border-purple-200 tw-rounded-lg\">\r\n                  <cide-ele-input \r\n                    type=\"checkbox\" \r\n                    label=\"Allow Login\" \r\n                    [formControlName]=\"'entity_mappings.' + i + '.syenm_isloggedin'\"\r\n                    class=\"tw-h-5 tw-accent-purple-500\" />\r\n                  <span class=\"tw-text-xs tw-text-purple-600 tw-block tw-mt-1\">User can login through this entity</span>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Menu Rights Grid for this Entity-Role -->\r\n              <div class=\"tw-border-t tw-border-gray-200 tw-pt-4\">\r\n                <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\r\n                  <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Menu Rights & Permissions</h6>\r\n                  <div class=\"tw-flex tw-gap-2\">\r\n                    <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"refreshMenuRights(i)\" leftIcon=\"refresh\">\r\n                      Refresh Rights\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n\r\n                @if (getMenuRightsForMapping(i).length > 0) {\r\n                <!-- Menu Rights Grid -->\r\n                <div class=\"tw-overflow-x-auto tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg\">\r\n                  <table class=\"tw-w-full tw-text-sm\">\r\n                    <thead class=\"tw-bg-gray-50 tw-border-b tw-border-gray-200\">\r\n                      <tr>\r\n                        <th class=\"tw-px-4 tw-py-3 tw-text-left tw-font-medium tw-text-gray-700\">Menu</th>\r\n                        <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Role Rights</th>\r\n                        <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Create</th>\r\n                        <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Read</th>\r\n                        <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Update</th>\r\n                        <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Delete</th>\r\n                        <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Exception</th>\r\n                      </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                      @for (menuRight of getMenuRightsForMapping(i); track $index; let j = $index) {\r\n                      <tr class=\"tw-border-b tw-border-gray-100 hover:tw-bg-gray-50\">\r\n                        <td class=\"tw-px-4 tw-py-3 tw-font-medium tw-text-gray-900\">\r\n                          {{ menuRight.menu_name }}\r\n                          <div class=\"tw-text-xs tw-text-gray-500\">{{ menuRight.menu_code }}</div>\r\n                        </td>\r\n                        \r\n                        <!-- Role Rights Display -->\r\n                        <td class=\"tw-px-3 tw-py-3 tw-text-center\">\r\n                          <div class=\"tw-flex tw-flex-wrap tw-justify-center tw-gap-1\">\r\n                            @for (right of menuRight.role_rights; track $index) {\r\n                            <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-blue-100 tw-text-blue-800 tw-rounded\">\r\n                              {{ right }}\r\n                            </span>\r\n                            }\r\n                          </div>\r\n                        </td>\r\n\r\n                        <!-- Individual Permission Controls -->\r\n                        <td class=\"tw-px-3 tw-py-3 tw-text-center\">\r\n                          <cide-ele-input \r\n                            type=\"checkbox\" \r\n                            [formControlName]=\"'entity_mappings.' + i + '.menu_rights.' + j + '.create'\"\r\n                            class=\"tw-h-4 tw-accent-green-500\" />\r\n                        </td>\r\n\r\n                        <td class=\"tw-px-3 tw-py-3 tw-text-center\">\r\n                          <cide-ele-input \r\n                            type=\"checkbox\" \r\n                            [formControlName]=\"'entity_mappings.' + i + '.menu_rights.' + j + '.read'\"\r\n                            class=\"tw-h-4 tw-accent-blue-500\" />\r\n                        </td>\r\n\r\n                        <td class=\"tw-px-3 tw-py-3 tw-text-center\">\r\n                          <cide-ele-input \r\n                            type=\"checkbox\" \r\n                            [formControlName]=\"'entity_mappings.' + i + '.menu_rights.' + j + '.update'\"\r\n                            class=\"tw-h-4 tw-accent-yellow-500\" />\r\n                        </td>\r\n\r\n                        <td class=\"tw-px-3 tw-py-3 tw-text-center\">\r\n                          <cide-ele-input \r\n                            type=\"checkbox\" \r\n                            [formControlName]=\"'entity_mappings.' + i + '.menu_rights.' + j + '.delete'\"\r\n                            class=\"tw-h-4 tw-accent-red-500\" />\r\n                        </td>\r\n\r\n                        <td class=\"tw-px-3 tw-py-3 tw-text-center\">\r\n                          @if (hasExceptionForMenu(i, menuRight.menu_id)) {\r\n                          <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-yellow-100 tw-text-yellow-800 tw-rounded\">\r\n                            Override\r\n                          </span>\r\n                          } @else {\r\n                          <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\r\n                          }\r\n                        </td>\r\n                      </tr>\r\n                      }\r\n                    </tbody>\r\n                  </table>\r\n                </div>\r\n\r\n                <!-- Legend -->\r\n                <div class=\"tw-mt-4 tw-p-3 tw-bg-gray-50 tw-rounded-lg\">\r\n                  <h6 class=\"tw-text-xs tw-font-semibold tw-text-gray-700 tw-mb-2\">Legend:</h6>\r\n                  <div class=\"tw-grid tw-grid-cols-2 md:tw-grid-cols-4 tw-gap-3 tw-text-xs tw-text-gray-600\">\r\n                    <div><span class=\"tw-w-3 tw-h-3 tw-bg-blue-100 tw-inline-block tw-rounded tw-mr-2\"></span>Role Rights: Inherited from role</div>\r\n                    <div><span class=\"tw-w-3 tw-h-3 tw-bg-yellow-100 tw-inline-block tw-rounded tw-mr-2\"></span>Override: User-specific exception</div>\r\n                    <div><span class=\"tw-w-3 tw-h-3 tw-bg-green-100 tw-inline-block tw-rounded tw-mr-2\"></span>Enabled: Permission granted</div>\r\n                    <div><span class=\"tw-w-3 tw-h-3 tw-bg-gray-100 tw-inline-block tw-rounded tw-mr-2\"></span>Disabled: Permission restricted</div>\r\n                  </div>\r\n                </div>\r\n\r\n                } @else {\r\n                <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\r\n                  <div class=\"tw-text-gray-400 tw-mb-3\">\r\n                    <i class=\"material-icons tw-text-3xl\">menu</i>\r\n                  </div>\r\n                  <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\r\n                  <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to load menu rights for this mapping.</p>\r\n                  @if (mapping.syenm_id_syen && mapping.syenm_role_id_syusrol) {\r\n                  <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"loadMenuRights(i)\" leftIcon=\"refresh\">\r\n                    Load Menu Rights\r\n                  </button>\r\n                  }\r\n                </div>\r\n                }\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n\r\n          @if (entityMappings().length === 0) {\r\n          <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\r\n            <div class=\"tw-text-blue-400 tw-mb-3\">\r\n              <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\r\n            </div>\r\n            <h4 class=\"tw-text-lg tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\r\n            <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and permissions for different entities.</p>\r\n            <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\" leftIcon=\"add\">\r\n              Add First Entity Mapping\r\n            </button>\r\n          </div>\r\n          }\r\n        </div>\r\n\r\n        <!-- Entity Relationship Info -->\r\n        <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-4\">\r\n          <h4 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-mb-2\">Entity Relationship Types</h4>\r\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4 tw-text-xs tw-text-gray-600\">\r\n            <div>\r\n              <strong class=\"tw-text-green-600\">Direct Entity:</strong> User has direct access to this entity\r\n            </div>\r\n            <div>\r\n              <strong class=\"tw-text-blue-600\">Child Entity:</strong> User has access through parent entity relationship\r\n            </div>\r\n            <div>\r\n              <strong class=\"tw-text-purple-600\">Indirect Entity:</strong> User has access through complex entity hierarchy\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      }\r\n\r\n      @case ('addresses') {\r\n      <!-- Contact Addresses Section -->\r\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\r\n        <div class=\"tw-flex tw-justify-end\">\r\n          <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\r\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\r\n              leftIcon=\"add\">\r\n              Add New Address\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        @for (address of contactAddresses(); track $index; let i = $index) {\r\n        <div\r\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\">\r\n          <div\r\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\">\r\n            <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">Address {{ i + 1 }}</h4>\r\n            <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\r\n              leftIcon=\"delete\">\r\n              Remove\r\n            </button>\r\n          </div>\r\n          <div class=\"tw-p-6\">\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\r\n              <cide-ele-input label=\"Contact Person Name\"\r\n                [formControlName]=\"'contact_addresses.' + i + '.sycad_contact_person_name'\"\r\n                placeholder=\"Enter contact person name\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\"\r\n                [formControlName]=\"'contact_addresses.' + i + '.sycad_address_type_id_sygms'\"\r\n                placeholder=\"Select address type\" size=\"md\">\r\n              </cide-ele-select>\r\n            </div>\r\n\r\n            <div class=\"tw-grid tw-grid-cols-1 tw-mb-6\">\r\n              <cide-ele-textarea label=\"Complete Address\"\r\n                [formControlName]=\"'contact_addresses.' + i + '.sycad_contact_address'\"\r\n                placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"3\" size=\"md\">\r\n              </cide-ele-textarea>\r\n            </div>\r\n\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\r\n              <cide-ele-input label=\"Contact Phone\"\r\n                [formControlName]=\"'contact_addresses.' + i + '.sycad_contact_phone'\" type=\"tel\"\r\n                placeholder=\"Enter contact phone number\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input label=\"Contact Email\"\r\n                [formControlName]=\"'contact_addresses.' + i + '.sycad_contact_email'\" type=\"email\"\r\n                placeholder=\"Enter contact email address\" size=\"md\">\r\n              </cide-ele-input>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n\r\n      @case ('documents') {\r\n      <!-- Documents Section -->\r\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\r\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\r\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\">\r\n            Add Document\r\n          </button>\r\n        </div>\r\n\r\n        @for (doc of documents(); track $index; let i = $index) {\r\n        <div\r\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\">\r\n          <div\r\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\">\r\n            <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">Document {{ i + 1 }}</h4>\r\n            <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeDocument(i)\"\r\n              leftIcon=\"delete\">\r\n              Remove\r\n            </button>\r\n          </div>\r\n          <div class=\"tw-p-6\">\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\r\n              <cide-ele-input label=\"Document Number\" [formControlName]=\"'documents.' + i + '.syusd_doc_number'\"\r\n                placeholder=\"Enter document number\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input label=\"Name as per Document\"\r\n                [formControlName]=\"'documents.' + i + '.syusd_doc_name_as_per_doc'\"\r\n                placeholder=\"Enter name exactly as shown on document\" size=\"md\">\r\n              </cide-ele-input>\r\n            </div>\r\n\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\r\n              <cide-ele-input label=\"Issue Date\" [formControlName]=\"'documents.' + i + '.syusd_doc_issue_date'\"\r\n                type=\"date\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input label=\"Expiry Date\" [formControlName]=\"'documents.' + i + '.syusd_doc_expiry_date'\"\r\n                type=\"date\" size=\"md\">\r\n              </cide-ele-input>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n\r\n      @case ('family') {\r\n      <!-- Family Details Section -->\r\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\r\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\r\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\">\r\n            Add Family Member\r\n          </button>\r\n        </div>\r\n\r\n        @for (family of familyDetails(); track $index; let i = $index) {\r\n        <div\r\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\">\r\n          <div\r\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\">\r\n            <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">Family Member {{ i + 1 }}\r\n            </h4>\r\n            <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeFamilyDetail(i)\"\r\n              leftIcon=\"delete\">\r\n              Remove\r\n            </button>\r\n          </div>\r\n          <div class=\"tw-p-6\">\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\r\n              <cide-ele-input label=\"Family Member Name\"\r\n                [formControlName]=\"'family_details.' + i + '.syfdl_family_member_name'\"\r\n                placeholder=\"Enter family member full name\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\r\n                [formControlName]=\"'family_details.' + i + '.syfdl_relationship_id_sygms'\"\r\n                placeholder=\"Select relationship\" size=\"md\">\r\n              </cide-ele-select>\r\n            </div>\r\n\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\r\n              <cide-ele-input label=\"Date of Birth\"\r\n                [formControlName]=\"'family_details.' + i + '.syfdl_family_member_dob'\" type=\"date\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input label=\"Contact Number\" [formControlName]=\"'family_details.' + i + '.syfdl_contact_number'\"\r\n                type=\"tel\" placeholder=\"Enter contact number\" size=\"md\">\r\n              </cide-ele-input>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n      }\r\n    </div>\r\n\r\n    <!-- Form Actions -->\r\n    <div\r\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\">\r\n      <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\r\n        [disabled]=\"loading()\">\r\n        Reset Form\r\n      </button>\r\n\r\n      <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\r\n        [loading]=\"loading()\" leftIcon=\"save\">\r\n        Save User Master\r\n      </button>\r\n    </div>\r\n  </form>\r\n</div>" }]
+                    ], template: "<!-- \r\n  ENTERPRISE USER MASTER FORM\r\n  \r\n  Enterprise-Level Styling with Tailwind CSS\r\n  Features: Responsive grids, proper typography, enhanced user experience\r\n-->\r\n\r\n<div class=\"tw-w-full tw-h-full tw-p-3\">\r\n  <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\r\n    (ngSubmit)=\"onSubmit()\">\r\n    \r\n    <!-- User Context Header -->\r\n    <div 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\">\r\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\r\n        <!-- User Basic Info Display -->\r\n        <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\r\n          <!-- Profile Photo Preview -->\r\n          <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n            <div 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\">\r\n              @if (getUserPhoto()) {\r\n              <img [src]=\"getUserPhoto()\" alt=\"Profile\" class=\"tw-w-full tw-h-full tw-object-cover\">\r\n              } @else {\r\n              <cide-ele-icon variant=\"blue\" size=\"xs\">person</cide-ele-icon>\r\n              }\r\n            </div>\r\n            <div class=\"tw-flex tw-flex-col\">\r\n              <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\r\n                {{ getUserFullName() || 'New User' }}\r\n              </span>\r\n              <span class=\"tw-text-xs tw-text-blue-600\">\r\n                {{ getUserUsername() || 'Username not set' }}\r\n              </span>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Contact Info -->\r\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\r\n              <cide-ele-icon variant=\"gray\" size=\"xs\">email</cide-ele-icon>\r\n              <span>{{ getUserEmail() || 'Email not set' }}</span>\r\n            </div>\r\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\r\n              <cide-ele-icon variant=\"gray\" size=\"xs\">phone</cide-ele-icon>\r\n              <span>{{ getUserMobile() || 'Mobile not set' }}</span>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Active Status -->\r\n          <div class=\"tw-flex tw-items-center tw-gap-1\">\r\n            @if (getUserActiveStatus()) {\r\n            <span 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\">\r\n              <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">check_circle</cide-ele-icon>\r\n              Active\r\n            </span>\r\n            } @else {\r\n            <span 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\">\r\n              <cide-ele-icon variant=\"red\" size=\"xs\" class=\"tw-mr-1\">cancel</cide-ele-icon>\r\n              Inactive\r\n            </span>\r\n            }\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Entity Info -->\r\n        <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n          @if (hasDefaultEntity()) {\r\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-blue-700\">\r\n            <cide-ele-icon variant=\"blue\" size=\"xs\">business</cide-ele-icon>\r\n            <span class=\"tw-font-medium\">{{ getDefaultEntityName() }}</span>\r\n          </div>\r\n          } @else {\r\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-500\">\r\n            <cide-ele-icon variant=\"gray\" size=\"xs\">business</cide-ele-icon>\r\n            <span class=\"tw-italic\">No entity</span>\r\n          </div>\r\n          }\r\n          \r\n          <span class=\"tw-text-xs tw-text-gray-600 tw-px-2 tw-py-1 tw-bg-gray-100 tw-rounded\">\r\n            {{ getEntityMappingCount() }} mapping(s)\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Tab Navigation -->\r\n    <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\r\n      <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\r\n        (tabChange)=\"onTabChange($event)\">\r\n      </cide-ele-tab>\r\n    </div>\r\n\r\n    <!-- Tab Content -->\r\n    <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\r\n      @switch (activeTab()) {\r\n\r\n      @case ('basic') {\r\n      <!-- User Basic Information Section -->\r\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\r\n\r\n        <!-- Name Fields -->\r\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\">\r\n          <cide-ele-input id=\"user_firstname\" label=\"First Name *\" formControlName=\"user_firstname\"\r\n            placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\">\r\n          </cide-ele-input>\r\n\r\n          <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\r\n            placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\">\r\n          </cide-ele-input>\r\n\r\n          <cide-ele-input id=\"user_lastname\" label=\"Last Name *\" formControlName=\"user_lastname\"\r\n            placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\">\r\n          </cide-ele-input>\r\n\r\n          <cide-ele-input id=\"user_fullname\" label=\"Full Name *\" formControlName=\"user_fullname\"\r\n            placeholder=\"Auto-generated or enter manually\" [maxlength]=\"62\" size=\"md\">\r\n          </cide-ele-input>\r\n        </div>\r\n\r\n        <!-- Contact and Login Information -->\r\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\">\r\n          <cide-ele-input id=\"user_username\" label=\"Username *\" formControlName=\"user_username\"\r\n            placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\r\n          </cide-ele-input>\r\n\r\n          <cide-ele-input id=\"user_emailid\" label=\"Email ID *\" formControlName=\"user_emailid\" type=\"email\"\r\n            placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\r\n          </cide-ele-input>\r\n\r\n          <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number *\" formControlName=\"user_mobileno\" type=\"tel\"\r\n            placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\r\n          </cide-ele-input>\r\n        </div>\r\n\r\n        <!-- Active Period -->\r\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-2 tw-gap-6 tw-mb-2\">\r\n          <cide-ele-input id=\"user_activefrom\" label=\"Active From *\" formControlName=\"user_activefrom\" type=\"date\"\r\n            size=\"md\">\r\n          </cide-ele-input>\r\n\r\n          <cide-ele-input id=\"user_activeupto\" label=\"Active Until\" formControlName=\"user_activeupto\" type=\"date\"\r\n            size=\"md\">\r\n          </cide-ele-input>\r\n        </div>\r\n\r\n        <!-- Status Control -->\r\n        <div class=\"tw-grid tw-grid-cols-1 tw-mb-4\">\r\n          <div class=\"tw-p-4 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\r\n            <label\r\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\">\r\n              <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\r\n                class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\r\n              <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\r\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\r\n                access and operations</span>\r\n            </label>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      }\r\n\r\n      @case ('auth') {\r\n      <!-- Authentication Section -->\r\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\r\n        <!-- Password Fields -->\r\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6 tw-mb-6\">\r\n          <cide-ele-input id=\"user_password\" label=\"Password *\" formControlName=\"user_password\" type=\"password\"\r\n            placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\r\n          </cide-ele-input>\r\n\r\n          <div class=\"tw-p-4 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\r\n            <label\r\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\">\r\n              <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\r\n                formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\r\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\r\n                password on next login</span>\r\n            </label>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Photo Upload -->\r\n        <div class=\"tw-grid tw-grid-cols-1 tw-gap-6 tw-mb-6\">\r\n          <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-4\">\r\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-mb-3\">Profile Photo</h6>\r\n            <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-4\">\r\n              <cide-ele-file-input \r\n                id=\"user_photo_upload\"\r\n                formControlName=\"user_photo_id_cyfm\"\r\n                accept=\"image/*\"\r\n                [showPreview]=\"true\"\r\n                [previewBoxMode]=\"true\"\r\n                previewWidth=\"150px\"\r\n                previewHeight=\"150px\"\r\n                placeholderText=\"Click to upload photo\"\r\n                placeholderIcon=\"\uD83D\uDC64\">\r\n              </cide-ele-file-input>\r\n              <div class=\"tw-text-xs tw-text-gray-500 tw-text-center tw-max-w-sm\">\r\n                Supported formats: JPG, PNG, GIF. Maximum size: 2MB. Recommended size: 150x150px for best results.\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      }\r\n\r\n      @case ('roles') {\r\n      <!-- Entity, Roles & Permissions Mapping Section -->\r\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\r\n\r\n\r\n\r\n        <!-- Important Note -->\r\n        <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-4 tw-mb-6\">\r\n          <div class=\"tw-flex tw-items-start tw-gap-3\">\r\n            <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\r\n            <div class=\"tw-flex-1\">\r\n              <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\r\n              <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role mappings below. At least one entity mapping is required for user access.</p>\r\n              @if (hasDefaultEntity()) {\r\n              <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\r\n                <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\r\n                <span class=\"tw-text-sm tw-text-amber-800\">\r\n                  <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\r\n                </span>\r\n              </div>\r\n              } @else {\r\n              <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\r\n                \u26A0\uFE0F No default entity selected. Please set one entity as default.\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Entity-Role Mapping Section -->\r\n        <div class=\"tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg tw-p-6 tw-mb-6\">\r\n          <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\r\n            <div>\r\n              <h4 class=\"tw-text-lg tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\r\n              <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\r\n            </div>\r\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\" leftIcon=\"add\">\r\n              Add Entity Mapping\r\n            </button>\r\n          </div>\r\n\r\n          @for (mapping of entityMappings(); track $index; let i = $index) {\r\n          <div class=\"tw-bg-white tw-border tw-border-blue-200 tw-rounded-xl tw-mb-6 tw-overflow-hidden tw-shadow-sm\">\r\n            <div 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\">\r\n              <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n                <h5 class=\"tw-m-0 tw-text-blue-800 tw-text-sm tw-font-semibold\">Entity Mapping {{ i + 1 }}</h5>\r\n                @if (mapping.syenm_isdefault) {\r\n                <span 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\">\r\n                  <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">star</cide-ele-icon>\r\n                  Default\r\n                </span>\r\n                }\r\n              </div>\r\n              <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeEntityMapping(i)\" leftIcon=\"delete\">\r\n                Remove\r\n              </button>\r\n            </div>\r\n            \r\n            <div class=\"tw-p-6\">\r\n              <!-- Entity and Role Selection -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\r\n                <cide-ele-select \r\n                  label=\"Entity *\" \r\n                  [options]=\"entityOptions()\"\r\n                  [formControlName]=\"'entity_mappings.' + i + '.syenm_id_syen'\"\r\n                  placeholder=\"Select entity\"\r\n                  size=\"md\"\r\n                  (valueChange)=\"onEntityChange(i, $event)\">\r\n                </cide-ele-select>\r\n\r\n                <cide-ele-select \r\n                  label=\"Role for this Entity *\" \r\n                  [options]=\"getRoleOptionsForEntity(i)\"\r\n                  [formControlName]=\"'entity_mappings.' + i + '.syenm_role_id_syusrol'\"\r\n                  placeholder=\"Select role for this entity\"\r\n                  size=\"md\">\r\n                </cide-ele-select>\r\n              </div>\r\n\r\n              <!-- Entity-Specific Details -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\r\n                <cide-ele-select \r\n                  label=\"Designation for this Entity\" \r\n                  [options]=\"designationOptions()\"\r\n                  [formControlName]=\"'entity_mappings.' + i + '.syenm_designation_id_sydsg'\"\r\n                  placeholder=\"Select designation\"\r\n                  size=\"md\">\r\n                </cide-ele-select>\r\n\r\n                <cide-ele-select \r\n                  label=\"Department for this Entity\" \r\n                  [options]=\"departmentOptions()\"\r\n                  [formControlName]=\"'entity_mappings.' + i + '.syenm_department_id_sydept'\"\r\n                  placeholder=\"Select department\"\r\n                  size=\"md\">\r\n                </cide-ele-select>\r\n              </div>\r\n\r\n              <!-- Active Period for Entity Mapping -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\r\n                <cide-ele-input \r\n                  label=\"Active From *\" \r\n                  [formControlName]=\"'entity_mappings.' + i + '.syenm_activefrom'\"\r\n                  type=\"date\"\r\n                  size=\"md\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input \r\n                  label=\"Active Until\" \r\n                  [formControlName]=\"'entity_mappings.' + i + '.syenm_activeupto'\"\r\n                  type=\"date\"\r\n                  size=\"md\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n              <!-- Mapping Settings -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-6 tw-mb-6\">\r\n                <div class=\"tw-p-3 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded-lg\">\r\n                  <cide-ele-input \r\n                    type=\"checkbox\" \r\n                    label=\"Default Entity\" \r\n                    [formControlName]=\"'entity_mappings.' + i + '.syenm_isdefault'\"\r\n                    (change)=\"onDefaultEntityChange(i, $event)\"\r\n                    class=\"tw-h-5 tw-accent-green-500\" />\r\n                  <span class=\"tw-text-xs tw-text-green-600 tw-block tw-mt-1\">Set as user's default entity (only one allowed)</span>\r\n                </div>\r\n\r\n                <div class=\"tw-p-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\r\n                  <cide-ele-input \r\n                    type=\"checkbox\" \r\n                    label=\"Active Mapping\" \r\n                    [formControlName]=\"'entity_mappings.' + i + '.syenm_isactive'\"\r\n                    class=\"tw-h-5 tw-accent-blue-500\" />\r\n                  <span class=\"tw-text-xs tw-text-blue-600 tw-block tw-mt-1\">Enable this entity mapping</span>\r\n                </div>\r\n\r\n                <div class=\"tw-p-3 tw-bg-purple-50 tw-border tw-border-purple-200 tw-rounded-lg\">\r\n                  <cide-ele-input \r\n                    type=\"checkbox\" \r\n                    label=\"Allow Login\" \r\n                    [formControlName]=\"'entity_mappings.' + i + '.syenm_isloggedin'\"\r\n                    class=\"tw-h-5 tw-accent-purple-500\" />\r\n                  <span class=\"tw-text-xs tw-text-purple-600 tw-block tw-mt-1\">User can login through this entity</span>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Menu Rights Grid for this Entity-Role -->\r\n              <div class=\"tw-border-t tw-border-gray-200 tw-pt-4\">\r\n                <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\r\n                  <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Menu Rights & Permissions</h6>\r\n                  <div class=\"tw-flex tw-gap-2\">\r\n                    <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"refreshMenuRights(i)\" leftIcon=\"refresh\">\r\n                      Refresh Rights\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n\r\n                @if (getMenuRightsForMapping(i).length > 0) {\r\n                <!-- Menu Rights Grid -->\r\n                <div class=\"tw-overflow-x-auto tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg\">\r\n                  <table class=\"tw-w-full tw-text-sm\">\r\n                    <thead class=\"tw-bg-gray-50 tw-border-b tw-border-gray-200\">\r\n                      <tr>\r\n                        <th class=\"tw-px-4 tw-py-3 tw-text-left tw-font-medium tw-text-gray-700\">Menu</th>\r\n                        <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Role Rights</th>\r\n                        <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Create</th>\r\n                        <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Read</th>\r\n                        <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Update</th>\r\n                        <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Delete</th>\r\n                        <th class=\"tw-px-3 tw-py-3 tw-text-center tw-font-medium tw-text-gray-700\">Exception</th>\r\n                      </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                      @for (menuRight of getMenuRightsForMapping(i); track $index; let j = $index) {\r\n                      <tr class=\"tw-border-b tw-border-gray-100 hover:tw-bg-gray-50\">\r\n                        <td class=\"tw-px-4 tw-py-3 tw-font-medium tw-text-gray-900\">\r\n                          {{ menuRight.menu_name }}\r\n                          <div class=\"tw-text-xs tw-text-gray-500\">{{ menuRight.menu_code }}</div>\r\n                        </td>\r\n                        \r\n                        <!-- Role Rights Display -->\r\n                        <td class=\"tw-px-3 tw-py-3 tw-text-center\">\r\n                          <div class=\"tw-flex tw-flex-wrap tw-justify-center tw-gap-1\">\r\n                            @for (right of menuRight.role_rights; track $index) {\r\n                            <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-blue-100 tw-text-blue-800 tw-rounded\">\r\n                              {{ right }}\r\n                            </span>\r\n                            }\r\n                          </div>\r\n                        </td>\r\n\r\n                        <!-- Individual Permission Controls -->\r\n                        <td class=\"tw-px-3 tw-py-3 tw-text-center\">\r\n                          <cide-ele-input \r\n                            type=\"checkbox\" \r\n                            [formControlName]=\"'entity_mappings.' + i + '.menu_rights.' + j + '.create'\"\r\n                            class=\"tw-h-4 tw-accent-green-500\" />\r\n                        </td>\r\n\r\n                        <td class=\"tw-px-3 tw-py-3 tw-text-center\">\r\n                          <cide-ele-input \r\n                            type=\"checkbox\" \r\n                            [formControlName]=\"'entity_mappings.' + i + '.menu_rights.' + j + '.read'\"\r\n                            class=\"tw-h-4 tw-accent-blue-500\" />\r\n                        </td>\r\n\r\n                        <td class=\"tw-px-3 tw-py-3 tw-text-center\">\r\n                          <cide-ele-input \r\n                            type=\"checkbox\" \r\n                            [formControlName]=\"'entity_mappings.' + i + '.menu_rights.' + j + '.update'\"\r\n                            class=\"tw-h-4 tw-accent-yellow-500\" />\r\n                        </td>\r\n\r\n                        <td class=\"tw-px-3 tw-py-3 tw-text-center\">\r\n                          <cide-ele-input \r\n                            type=\"checkbox\" \r\n                            [formControlName]=\"'entity_mappings.' + i + '.menu_rights.' + j + '.delete'\"\r\n                            class=\"tw-h-4 tw-accent-red-500\" />\r\n                        </td>\r\n\r\n                        <td class=\"tw-px-3 tw-py-3 tw-text-center\">\r\n                          @if (hasExceptionForMenu(i, menuRight.menu_id)) {\r\n                          <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-yellow-100 tw-text-yellow-800 tw-rounded\">\r\n                            Override\r\n                          </span>\r\n                          } @else {\r\n                          <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\r\n                          }\r\n                        </td>\r\n                      </tr>\r\n                      }\r\n                    </tbody>\r\n                  </table>\r\n                </div>\r\n\r\n                <!-- Legend -->\r\n                <div class=\"tw-mt-4 tw-p-3 tw-bg-gray-50 tw-rounded-lg\">\r\n                  <h6 class=\"tw-text-xs tw-font-semibold tw-text-gray-700 tw-mb-2\">Legend:</h6>\r\n                  <div class=\"tw-grid tw-grid-cols-2 md:tw-grid-cols-4 tw-gap-3 tw-text-xs tw-text-gray-600\">\r\n                    <div><span class=\"tw-w-3 tw-h-3 tw-bg-blue-100 tw-inline-block tw-rounded tw-mr-2\"></span>Role Rights: Inherited from role</div>\r\n                    <div><span class=\"tw-w-3 tw-h-3 tw-bg-yellow-100 tw-inline-block tw-rounded tw-mr-2\"></span>Override: User-specific exception</div>\r\n                    <div><span class=\"tw-w-3 tw-h-3 tw-bg-green-100 tw-inline-block tw-rounded tw-mr-2\"></span>Enabled: Permission granted</div>\r\n                    <div><span class=\"tw-w-3 tw-h-3 tw-bg-gray-100 tw-inline-block tw-rounded tw-mr-2\"></span>Disabled: Permission restricted</div>\r\n                  </div>\r\n                </div>\r\n\r\n                } @else {\r\n                <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\r\n                  <div class=\"tw-text-gray-400 tw-mb-3\">\r\n                    <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\r\n                  </div>\r\n                  <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\r\n                  <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to load menu rights for this mapping.</p>\r\n                  @if (mapping.syenm_id_syen && mapping.syenm_role_id_syusrol) {\r\n                  <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"loadMenuRights(i)\" leftIcon=\"refresh\">\r\n                    Load Menu Rights\r\n                  </button>\r\n                  }\r\n                </div>\r\n                }\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n\r\n          @if (entityMappings().length === 0) {\r\n          <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\r\n            <div class=\"tw-text-blue-400 tw-mb-3\">\r\n              <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\r\n            </div>\r\n            <h4 class=\"tw-text-lg tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\r\n            <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and permissions for different entities.</p>\r\n            <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\" leftIcon=\"add\">\r\n              Add First Entity Mapping\r\n            </button>\r\n          </div>\r\n          }\r\n        </div>\r\n\r\n\r\n      </div>\r\n      }\r\n\r\n      @case ('addresses') {\r\n      <!-- Contact Addresses Section -->\r\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\r\n        <div class=\"tw-flex tw-justify-end\">\r\n          <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\r\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\r\n              leftIcon=\"add\">\r\n              Add New Address\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        @for (address of contactAddresses(); track $index; let i = $index) {\r\n        <div\r\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\">\r\n          <div\r\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\">\r\n            <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">Address {{ i + 1 }}</h4>\r\n            <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\r\n              leftIcon=\"delete\">\r\n              Remove\r\n            </button>\r\n          </div>\r\n          <div class=\"tw-p-6\">\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\r\n              <cide-ele-input label=\"Contact Person Name\"\r\n                [formControlName]=\"'contact_addresses.' + i + '.sycad_contact_person_name'\"\r\n                placeholder=\"Enter contact person name\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\"\r\n                [formControlName]=\"'contact_addresses.' + i + '.sycad_address_type_id_sygms'\"\r\n                placeholder=\"Select address type\" size=\"md\">\r\n              </cide-ele-select>\r\n            </div>\r\n\r\n            <div class=\"tw-grid tw-grid-cols-1 tw-mb-6\">\r\n              <cide-ele-textarea label=\"Complete Address\"\r\n                [formControlName]=\"'contact_addresses.' + i + '.sycad_contact_address'\"\r\n                placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"3\" size=\"md\">\r\n              </cide-ele-textarea>\r\n            </div>\r\n\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\r\n              <cide-ele-input label=\"Contact Phone\"\r\n                [formControlName]=\"'contact_addresses.' + i + '.sycad_contact_phone'\" type=\"tel\"\r\n                placeholder=\"Enter contact phone number\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input label=\"Contact Email\"\r\n                [formControlName]=\"'contact_addresses.' + i + '.sycad_contact_email'\" type=\"email\"\r\n                placeholder=\"Enter contact email address\" size=\"md\">\r\n              </cide-ele-input>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n\r\n      @case ('documents') {\r\n      <!-- Documents Section -->\r\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\r\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\r\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\">\r\n            Add Document\r\n          </button>\r\n        </div>\r\n\r\n        @for (doc of documents(); track $index; let i = $index) {\r\n        <div\r\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\">\r\n          <div\r\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\">\r\n            <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">Document {{ i + 1 }}</h4>\r\n            <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeDocument(i)\"\r\n              leftIcon=\"delete\">\r\n              Remove\r\n            </button>\r\n          </div>\r\n          <div class=\"tw-p-6\">\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\r\n              <cide-ele-input label=\"Document Number\" [formControlName]=\"'documents.' + i + '.syusd_doc_number'\"\r\n                placeholder=\"Enter document number\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input label=\"Name as per Document\"\r\n                [formControlName]=\"'documents.' + i + '.syusd_doc_name_as_per_doc'\"\r\n                placeholder=\"Enter name exactly as shown on document\" size=\"md\">\r\n              </cide-ele-input>\r\n            </div>\r\n\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\r\n              <cide-ele-input label=\"Issue Date\" [formControlName]=\"'documents.' + i + '.syusd_doc_issue_date'\"\r\n                type=\"date\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input label=\"Expiry Date\" [formControlName]=\"'documents.' + i + '.syusd_doc_expiry_date'\"\r\n                type=\"date\" size=\"md\">\r\n              </cide-ele-input>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n\r\n      @case ('family') {\r\n      <!-- Family Details Section -->\r\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\r\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\r\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\">\r\n            Add Family Member\r\n          </button>\r\n        </div>\r\n\r\n        @for (family of familyDetails(); track $index; let i = $index) {\r\n        <div\r\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\">\r\n          <div\r\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\">\r\n            <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">Family Member {{ i + 1 }}\r\n            </h4>\r\n            <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeFamilyDetail(i)\"\r\n              leftIcon=\"delete\">\r\n              Remove\r\n            </button>\r\n          </div>\r\n          <div class=\"tw-p-6\">\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\r\n              <cide-ele-input label=\"Family Member Name\"\r\n                [formControlName]=\"'family_details.' + i + '.syfdl_family_member_name'\"\r\n                placeholder=\"Enter family member full name\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\r\n                [formControlName]=\"'family_details.' + i + '.syfdl_relationship_id_sygms'\"\r\n                placeholder=\"Select relationship\" size=\"md\">\r\n              </cide-ele-select>\r\n            </div>\r\n\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\r\n              <cide-ele-input label=\"Date of Birth\"\r\n                [formControlName]=\"'family_details.' + i + '.syfdl_family_member_dob'\" type=\"date\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input label=\"Contact Number\" [formControlName]=\"'family_details.' + i + '.syfdl_contact_number'\"\r\n                type=\"tel\" placeholder=\"Enter contact number\" size=\"md\">\r\n              </cide-ele-input>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n      }\r\n    </div>\r\n\r\n    <!-- Form Actions -->\r\n    <div\r\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\">\r\n      <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\r\n        [disabled]=\"loading()\">\r\n        Reset Form\r\n      </button>\r\n\r\n      <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\r\n        [loading]=\"loading()\" leftIcon=\"save\">\r\n        Save User Master\r\n      </button>\r\n    </div>\r\n  </form>\r\n</div>" }]
         }], ctorParameters: () => [] });
 
 var userCreate_component = /*#__PURE__*/Object.freeze({
@@ -8782,7 +8834,7 @@ class UserListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: UserListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: UserListComponent, isStandalone: true, selector: "cide-core-user-list", viewQueries: [{ propertyName: "gridComponent", first: true, predicate: CideEleDataGridComponent, descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true, static: true }, { propertyName: "userDetailsTemplate", first: true, predicate: ["userDetailsTemplate"], descendants: true, static: true }, { propertyName: "contactInfoTemplate", first: true, predicate: ["contactInfoTemplate"], descendants: true, static: true }, { propertyName: "organizationTemplate", first: true, predicate: ["organizationTemplate"], descendants: true, static: true }, { propertyName: "validityTemplate", first: true, predicate: ["validityTemplate"], descendants: true, static: true }, { propertyName: "statusTemplate", first: true, predicate: ["statusTemplate"], descendants: true, static: true }], ngImport: i0, template: "<!-- User Master List Container -->\n<div class=\"user-master-listing-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-overflow-hidden\">\n  \n  <!-- Header Section with Filters -->\n  <div class=\"tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n    <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-4 sm:tw-space-y-0\">\n      \n      <!-- Title -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600\">people</cide-ele-icon>\n        <div>\n          <h5 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">User Master Management</h5>\n          <p class=\"tw-text-sm tw-text-gray-600\">Manage and view all user master records in the system</p>\n        </div>\n      </div>\n\n      <!-- Actions -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <!-- Status Filter -->\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <label for=\"statusFilter\" class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Status:</label>\n          <cide-ele-select\n            id=\"statusFilter\"\n            [options]=\"statusFilterOptions()\"\n            [(ngModel)]=\"selectedStatusFilterValue\"\n            (ngModelChange)=\"onFilterChange()\"\n            class=\"tw-min-w-40\">\n          </cide-ele-select>\n        </div>\n\n        <!-- Add User Button -->\n        <button\n          cideEleButton\n          variant=\"primary\"\n          size=\"sm\"\n          (click)=\"onAddUser()\"\n          class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n          <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">add</cide-ele-icon>\n          Add User\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Error Message -->\n  @if (error()) {\n    <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n      <div class=\"tw-flex\">\n        <cide-ele-icon name=\"exclamation-triangle\" class=\"tw-text-red-400\"></cide-ele-icon>\n        <div class=\"tw-ml-3\">\n          <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800\">Error</h3>\n          <p class=\"tw-text-sm tw-text-red-700 tw-mt-1\">{{ error() }}</p>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Data Grid Component -->\n  <cide-ele-data-grid\n    [config]=\"gridConfig()\"\n    [templateRenderers]=\"templateRenderers\"\n    [serverSidePagination]=\"true\"\n    [totalServerItems]=\"totalItems()\"\n    [currentServerPage]=\"currentPage()\"\n    [currentServerPageSize]=\"pageSize()\"\n    (gridEvent)=\"onGridEvent($event)\">\n  </cide-ele-data-grid>\n\n</div>\n\n<!-- Template Definitions for Grid Renderers -->\n\n<!-- User Details Template -->\n<ng-template #userDetailsTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3\">\n    <div class=\"tw-flex-shrink-0 tw-w-12 tw-h-12 tw-bg-blue-100 tw-rounded-full tw-flex tw-items-center tw-justify-center\">\n      <span class=\"tw-text-blue-600 tw-font-semibold tw-text-sm\">\n        {{ getUserInitials(row.user_firstname, row.user_lastname) }}\n      </span>\n    </div>\n    <div class=\"tw-flex-1 tw-min-w-0\">\n      <p class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate\" [title]=\"row.user_fullname\">\n        {{ row.user_fullname || 'Unknown User' }}\n      </p>\n      <p class=\"tw-text-xs tw-text-blue-600 tw-truncate tw-font-medium\" [title]=\"'Username: ' + row.user_username\">\n        @{{ row.user_username || 'No username' }}\n      </p>\n      <p class=\"tw-text-xs tw-text-gray-400 tw-truncate\" [title]=\"'ID: ' + row._id\">\n        ID: {{ row._id?.substring(0, 8) }}...\n      </p>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Contact Info Template -->\n<ng-template #contactInfoTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-flex tw-items-center\" [title]=\"'Email: ' + row.user_emailid\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path d=\"M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z\"/>\n        <path d=\"M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z\"/>\n      </svg>\n      <span class=\"tw-truncate\">{{ row.user_emailid || 'No email' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600 tw-flex tw-items-center\" [title]=\"'Mobile: ' + row.user_mobileno\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path d=\"M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z\"/>\n      </svg>\n      <span class=\"tw-truncate\">{{ row.user_mobileno || 'No mobile' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-500 tw-flex tw-items-center\" [title]=\"'Password Change: ' + getPasswordChangeText(row.user_passwordchangeonlogin)\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path fill-rule=\"evenodd\" d=\"M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z\" clip-rule=\"evenodd\"/>\n      </svg>\n      <span class=\"tw-truncate\">{{ getPasswordChangeText(row.user_passwordchangeonlogin) }}</span>\n    </p>\n  </div>\n</ng-template>\n\n<!-- Organization Template -->\n<ng-template #organizationTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-flex tw-items-center\" [title]=\"'Entity: ' + row.entity_name\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path d=\"M4 3a2 2 0 100 4h12a2 2 0 100-4H4z\"/>\n        <path fill-rule=\"evenodd\" d=\"M3 8a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z\" clip-rule=\"evenodd\"/>\n      </svg>\n      <span class=\"tw-truncate\">{{ row.entity_name || 'No Entity' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-blue-600 tw-flex tw-items-center tw-font-medium\" [title]=\"'Role: ' + row.role_name\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"/>\n      </svg>\n      <span class=\"tw-truncate\">{{ row.role_name || 'No Role' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600 tw-flex tw-items-center\" [title]=\"'Designation: ' + row.designation_name\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path fill-rule=\"evenodd\" d=\"M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z\" clip-rule=\"evenodd\"/>\n      </svg>\n      <span class=\"tw-truncate\">{{ row.designation_name || 'No Designation' }}</span>\n    </p>\n  </div>\n</ng-template>\n\n<!-- Validity Template -->\n<ng-template #validityTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-text-center tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-font-medium\" [title]=\"'Active From: ' + formatDate(row.user_activefrom)\">\n      From: {{ formatDate(row.user_activefrom) }}\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600\" [title]=\"'Active Until: ' + getValidityEndText(row.user_activeupto)\">\n      Until: {{ getValidityEndText(row.user_activeupto) }}\n    </p>\n    @if (isDateExpired(row.user_activeupto)) {\n      <span class=\"tw-inline-block tw-px-2 tw-py-0.5 tw-text-xs tw-bg-red-100 tw-text-red-800 tw-rounded-full tw-font-medium\">\n        Expired\n      </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Status Template -->\n<ng-template #statusTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-flex tw-justify-center\">\n    @if (row.user_isactive) {\n      <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n        <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n          <circle cx=\"4\" cy=\"4\" r=\"3\"/>\n        </svg>\n        Active\n      </span>\n    } @else {\n      <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800\">\n        <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n          <circle cx=\"4\" cy=\"4\" r=\"3\"/>\n        </svg>\n        Inactive\n      </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Actions Template using cide-ele-dropdown -->\n<ng-template #actionsTemplate let-value let-row=\"row\" let-column=\"column\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(row)\"\n    [config]=\"{ \n      triggerIcon: 'more_vert', \n      triggerSize: 'sm',\n      menuPosition: 'auto',\n      menuWidth: 'tw-w-56'\n    }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n", styles: [".user-master-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "customRenderers", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: UserListComponent, isStandalone: true, selector: "cide-core-user-list", viewQueries: [{ propertyName: "gridComponent", first: true, predicate: CideEleDataGridComponent, descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true, static: true }, { propertyName: "userDetailsTemplate", first: true, predicate: ["userDetailsTemplate"], descendants: true, static: true }, { propertyName: "contactInfoTemplate", first: true, predicate: ["contactInfoTemplate"], descendants: true, static: true }, { propertyName: "organizationTemplate", first: true, predicate: ["organizationTemplate"], descendants: true, static: true }, { propertyName: "validityTemplate", first: true, predicate: ["validityTemplate"], descendants: true, static: true }, { propertyName: "statusTemplate", first: true, predicate: ["statusTemplate"], descendants: true, static: true }], ngImport: i0, template: "<!-- User Master List Container -->\n<div class=\"user-master-listing-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-table tw-h-full\">\n\n  <!-- Header Section with Filters -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n      <div\n        class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-4 sm:tw-space-y-0\">\n\n        <!-- Title -->\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\n          <cide-ele-icon class=\"tw-text-blue-600\">people</cide-ele-icon>\n          <div>\n            <h5 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">User Master Management</h5>\n            <p class=\"tw-text-sm tw-text-gray-600\">Manage and view all user master records in the system</p>\n          </div>\n        </div>\n\n        <!-- Actions -->\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\n          <!-- Status Filter -->\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <label for=\"statusFilter\" class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Status:</label>\n            <cide-ele-select id=\"statusFilter\" [options]=\"statusFilterOptions()\" [(ngModel)]=\"selectedStatusFilterValue\"\n              (ngModelChange)=\"onFilterChange()\" class=\"tw-min-w-40\">\n            </cide-ele-select>\n          </div>\n\n          <!-- Add User Button -->\n          <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"onAddUser()\"\n            class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">add</cide-ele-icon>\n            Add User\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Error Message -->\n  @if (error()) {\n  <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n    <div class=\"tw-flex\">\n      <cide-ele-icon name=\"exclamation-triangle\" class=\"tw-text-red-400\"></cide-ele-icon>\n      <div class=\"tw-ml-3\">\n        <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800\">Error</h3>\n        <p class=\"tw-text-sm tw-text-red-700 tw-mt-1\">{{ error() }}</p>\n      </div>\n    </div>\n  </div>\n  }\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n      <div class=\"tw-h-full tw-overflow-auto\">\n        <!-- Data Grid Component -->\n        <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers\"\n          [serverSidePagination]=\"true\" [totalServerItems]=\"totalItems()\" [currentServerPage]=\"currentPage()\"\n          [currentServerPageSize]=\"pageSize()\" (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- Template Definitions for Grid Renderers -->\n\n<!-- User Details Template -->\n<ng-template #userDetailsTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3\">\n    <div\n      class=\"tw-flex-shrink-0 tw-w-12 tw-h-12 tw-bg-blue-100 tw-rounded-full tw-flex tw-items-center tw-justify-center\">\n      <span class=\"tw-text-blue-600 tw-font-semibold tw-text-sm\">\n        {{ getUserInitials(row.user_firstname, row.user_lastname) }}\n      </span>\n    </div>\n    <div class=\"tw-flex-1 tw-min-w-0\">\n      <p class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate\" [title]=\"row.user_fullname\">\n        {{ row.user_fullname || 'Unknown User' }}\n      </p>\n      <p class=\"tw-text-xs tw-text-blue-600 tw-truncate tw-font-medium\" [title]=\"'Username: ' + row.user_username\">\n        @{{ row.user_username || 'No username' }}\n      </p>\n      <p class=\"tw-text-xs tw-text-gray-400 tw-truncate\" [title]=\"'ID: ' + row._id\">\n        ID: {{ row._id?.substring(0, 8) }}...\n      </p>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Contact Info Template -->\n<ng-template #contactInfoTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-flex tw-items-center\" [title]=\"'Email: ' + row.user_emailid\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path d=\"M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z\" />\n        <path d=\"M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ row.user_emailid || 'No email' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600 tw-flex tw-items-center\" [title]=\"'Mobile: ' + row.user_mobileno\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path\n          d=\"M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ row.user_mobileno || 'No mobile' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-500 tw-flex tw-items-center\"\n      [title]=\"'Password Change: ' + getPasswordChangeText(row.user_passwordchangeonlogin)\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path fill-rule=\"evenodd\"\n          d=\"M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z\"\n          clip-rule=\"evenodd\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ getPasswordChangeText(row.user_passwordchangeonlogin) }}</span>\n    </p>\n  </div>\n</ng-template>\n\n<!-- Organization Template -->\n<ng-template #organizationTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-flex tw-items-center\" [title]=\"'Entity: ' + row.entity_name\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path d=\"M4 3a2 2 0 100 4h12a2 2 0 100-4H4z\" />\n        <path fill-rule=\"evenodd\"\n          d=\"M3 8a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z\"\n          clip-rule=\"evenodd\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ row.entity_name || 'No Entity' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-blue-600 tw-flex tw-items-center tw-font-medium\" [title]=\"'Role: ' + row.role_name\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ row.role_name || 'No Role' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600 tw-flex tw-items-center\" [title]=\"'Designation: ' + row.designation_name\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path fill-rule=\"evenodd\" d=\"M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z\" clip-rule=\"evenodd\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ row.designation_name || 'No Designation' }}</span>\n    </p>\n  </div>\n</ng-template>\n\n<!-- Validity Template -->\n<ng-template #validityTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-text-center tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-font-medium\" [title]=\"'Active From: ' + formatDate(row.user_activefrom)\">\n      From: {{ formatDate(row.user_activefrom) }}\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600\" [title]=\"'Active Until: ' + getValidityEndText(row.user_activeupto)\">\n      Until: {{ getValidityEndText(row.user_activeupto) }}\n    </p>\n    @if (isDateExpired(row.user_activeupto)) {\n    <span\n      class=\"tw-inline-block tw-px-2 tw-py-0.5 tw-text-xs tw-bg-red-100 tw-text-red-800 tw-rounded-full tw-font-medium\">\n      Expired\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Status Template -->\n<ng-template #statusTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-flex tw-justify-center\">\n    @if (row.user_isactive) {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n      <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n        <circle cx=\"4\" cy=\"4\" r=\"3\" />\n      </svg>\n      Active\n    </span>\n    } @else {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800\">\n      <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n        <circle cx=\"4\" cy=\"4\" r=\"3\" />\n      </svg>\n      Inactive\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Actions Template using cide-ele-dropdown -->\n<ng-template #actionsTemplate let-value let-row=\"row\" let-column=\"column\">\n  <cide-ele-dropdown [items]=\"getDropdownItems(row)\" [config]=\"{ \n      triggerIcon: 'more_vert', \n      triggerSize: 'sm',\n      menuPosition: 'auto',\n      menuWidth: 'tw-w-56'\n    }\" (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>", styles: [".user-master-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "customRenderers", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: UserListComponent, decorators: [{
             type: Component,
@@ -8796,7 +8848,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideSelectComponent,
                         CideEleDataGridComponent,
                         CideEleDropdownComponent
-                    ], template: "<!-- User Master List Container -->\n<div class=\"user-master-listing-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-overflow-hidden\">\n  \n  <!-- Header Section with Filters -->\n  <div class=\"tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n    <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-4 sm:tw-space-y-0\">\n      \n      <!-- Title -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600\">people</cide-ele-icon>\n        <div>\n          <h5 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">User Master Management</h5>\n          <p class=\"tw-text-sm tw-text-gray-600\">Manage and view all user master records in the system</p>\n        </div>\n      </div>\n\n      <!-- Actions -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <!-- Status Filter -->\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <label for=\"statusFilter\" class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Status:</label>\n          <cide-ele-select\n            id=\"statusFilter\"\n            [options]=\"statusFilterOptions()\"\n            [(ngModel)]=\"selectedStatusFilterValue\"\n            (ngModelChange)=\"onFilterChange()\"\n            class=\"tw-min-w-40\">\n          </cide-ele-select>\n        </div>\n\n        <!-- Add User Button -->\n        <button\n          cideEleButton\n          variant=\"primary\"\n          size=\"sm\"\n          (click)=\"onAddUser()\"\n          class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n          <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">add</cide-ele-icon>\n          Add User\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Error Message -->\n  @if (error()) {\n    <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n      <div class=\"tw-flex\">\n        <cide-ele-icon name=\"exclamation-triangle\" class=\"tw-text-red-400\"></cide-ele-icon>\n        <div class=\"tw-ml-3\">\n          <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800\">Error</h3>\n          <p class=\"tw-text-sm tw-text-red-700 tw-mt-1\">{{ error() }}</p>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Data Grid Component -->\n  <cide-ele-data-grid\n    [config]=\"gridConfig()\"\n    [templateRenderers]=\"templateRenderers\"\n    [serverSidePagination]=\"true\"\n    [totalServerItems]=\"totalItems()\"\n    [currentServerPage]=\"currentPage()\"\n    [currentServerPageSize]=\"pageSize()\"\n    (gridEvent)=\"onGridEvent($event)\">\n  </cide-ele-data-grid>\n\n</div>\n\n<!-- Template Definitions for Grid Renderers -->\n\n<!-- User Details Template -->\n<ng-template #userDetailsTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3\">\n    <div class=\"tw-flex-shrink-0 tw-w-12 tw-h-12 tw-bg-blue-100 tw-rounded-full tw-flex tw-items-center tw-justify-center\">\n      <span class=\"tw-text-blue-600 tw-font-semibold tw-text-sm\">\n        {{ getUserInitials(row.user_firstname, row.user_lastname) }}\n      </span>\n    </div>\n    <div class=\"tw-flex-1 tw-min-w-0\">\n      <p class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate\" [title]=\"row.user_fullname\">\n        {{ row.user_fullname || 'Unknown User' }}\n      </p>\n      <p class=\"tw-text-xs tw-text-blue-600 tw-truncate tw-font-medium\" [title]=\"'Username: ' + row.user_username\">\n        @{{ row.user_username || 'No username' }}\n      </p>\n      <p class=\"tw-text-xs tw-text-gray-400 tw-truncate\" [title]=\"'ID: ' + row._id\">\n        ID: {{ row._id?.substring(0, 8) }}...\n      </p>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Contact Info Template -->\n<ng-template #contactInfoTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-flex tw-items-center\" [title]=\"'Email: ' + row.user_emailid\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path d=\"M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z\"/>\n        <path d=\"M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z\"/>\n      </svg>\n      <span class=\"tw-truncate\">{{ row.user_emailid || 'No email' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600 tw-flex tw-items-center\" [title]=\"'Mobile: ' + row.user_mobileno\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path d=\"M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z\"/>\n      </svg>\n      <span class=\"tw-truncate\">{{ row.user_mobileno || 'No mobile' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-500 tw-flex tw-items-center\" [title]=\"'Password Change: ' + getPasswordChangeText(row.user_passwordchangeonlogin)\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path fill-rule=\"evenodd\" d=\"M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z\" clip-rule=\"evenodd\"/>\n      </svg>\n      <span class=\"tw-truncate\">{{ getPasswordChangeText(row.user_passwordchangeonlogin) }}</span>\n    </p>\n  </div>\n</ng-template>\n\n<!-- Organization Template -->\n<ng-template #organizationTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-flex tw-items-center\" [title]=\"'Entity: ' + row.entity_name\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path d=\"M4 3a2 2 0 100 4h12a2 2 0 100-4H4z\"/>\n        <path fill-rule=\"evenodd\" d=\"M3 8a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z\" clip-rule=\"evenodd\"/>\n      </svg>\n      <span class=\"tw-truncate\">{{ row.entity_name || 'No Entity' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-blue-600 tw-flex tw-items-center tw-font-medium\" [title]=\"'Role: ' + row.role_name\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"/>\n      </svg>\n      <span class=\"tw-truncate\">{{ row.role_name || 'No Role' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600 tw-flex tw-items-center\" [title]=\"'Designation: ' + row.designation_name\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path fill-rule=\"evenodd\" d=\"M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z\" clip-rule=\"evenodd\"/>\n      </svg>\n      <span class=\"tw-truncate\">{{ row.designation_name || 'No Designation' }}</span>\n    </p>\n  </div>\n</ng-template>\n\n<!-- Validity Template -->\n<ng-template #validityTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-text-center tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-font-medium\" [title]=\"'Active From: ' + formatDate(row.user_activefrom)\">\n      From: {{ formatDate(row.user_activefrom) }}\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600\" [title]=\"'Active Until: ' + getValidityEndText(row.user_activeupto)\">\n      Until: {{ getValidityEndText(row.user_activeupto) }}\n    </p>\n    @if (isDateExpired(row.user_activeupto)) {\n      <span class=\"tw-inline-block tw-px-2 tw-py-0.5 tw-text-xs tw-bg-red-100 tw-text-red-800 tw-rounded-full tw-font-medium\">\n        Expired\n      </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Status Template -->\n<ng-template #statusTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-flex tw-justify-center\">\n    @if (row.user_isactive) {\n      <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n        <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n          <circle cx=\"4\" cy=\"4\" r=\"3\"/>\n        </svg>\n        Active\n      </span>\n    } @else {\n      <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800\">\n        <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n          <circle cx=\"4\" cy=\"4\" r=\"3\"/>\n        </svg>\n        Inactive\n      </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Actions Template using cide-ele-dropdown -->\n<ng-template #actionsTemplate let-value let-row=\"row\" let-column=\"column\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(row)\"\n    [config]=\"{ \n      triggerIcon: 'more_vert', \n      triggerSize: 'sm',\n      menuPosition: 'auto',\n      menuWidth: 'tw-w-56'\n    }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n", styles: [".user-master-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"] }]
+                    ], template: "<!-- User Master List Container -->\n<div class=\"user-master-listing-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-table tw-h-full\">\n\n  <!-- Header Section with Filters -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n      <div\n        class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-4 sm:tw-space-y-0\">\n\n        <!-- Title -->\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\n          <cide-ele-icon class=\"tw-text-blue-600\">people</cide-ele-icon>\n          <div>\n            <h5 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">User Master Management</h5>\n            <p class=\"tw-text-sm tw-text-gray-600\">Manage and view all user master records in the system</p>\n          </div>\n        </div>\n\n        <!-- Actions -->\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\n          <!-- Status Filter -->\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <label for=\"statusFilter\" class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Status:</label>\n            <cide-ele-select id=\"statusFilter\" [options]=\"statusFilterOptions()\" [(ngModel)]=\"selectedStatusFilterValue\"\n              (ngModelChange)=\"onFilterChange()\" class=\"tw-min-w-40\">\n            </cide-ele-select>\n          </div>\n\n          <!-- Add User Button -->\n          <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"onAddUser()\"\n            class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">add</cide-ele-icon>\n            Add User\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Error Message -->\n  @if (error()) {\n  <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n    <div class=\"tw-flex\">\n      <cide-ele-icon name=\"exclamation-triangle\" class=\"tw-text-red-400\"></cide-ele-icon>\n      <div class=\"tw-ml-3\">\n        <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800\">Error</h3>\n        <p class=\"tw-text-sm tw-text-red-700 tw-mt-1\">{{ error() }}</p>\n      </div>\n    </div>\n  </div>\n  }\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n      <div class=\"tw-h-full tw-overflow-auto\">\n        <!-- Data Grid Component -->\n        <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers\"\n          [serverSidePagination]=\"true\" [totalServerItems]=\"totalItems()\" [currentServerPage]=\"currentPage()\"\n          [currentServerPageSize]=\"pageSize()\" (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- Template Definitions for Grid Renderers -->\n\n<!-- User Details Template -->\n<ng-template #userDetailsTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3\">\n    <div\n      class=\"tw-flex-shrink-0 tw-w-12 tw-h-12 tw-bg-blue-100 tw-rounded-full tw-flex tw-items-center tw-justify-center\">\n      <span class=\"tw-text-blue-600 tw-font-semibold tw-text-sm\">\n        {{ getUserInitials(row.user_firstname, row.user_lastname) }}\n      </span>\n    </div>\n    <div class=\"tw-flex-1 tw-min-w-0\">\n      <p class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate\" [title]=\"row.user_fullname\">\n        {{ row.user_fullname || 'Unknown User' }}\n      </p>\n      <p class=\"tw-text-xs tw-text-blue-600 tw-truncate tw-font-medium\" [title]=\"'Username: ' + row.user_username\">\n        @{{ row.user_username || 'No username' }}\n      </p>\n      <p class=\"tw-text-xs tw-text-gray-400 tw-truncate\" [title]=\"'ID: ' + row._id\">\n        ID: {{ row._id?.substring(0, 8) }}...\n      </p>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Contact Info Template -->\n<ng-template #contactInfoTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-flex tw-items-center\" [title]=\"'Email: ' + row.user_emailid\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path d=\"M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z\" />\n        <path d=\"M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ row.user_emailid || 'No email' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600 tw-flex tw-items-center\" [title]=\"'Mobile: ' + row.user_mobileno\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path\n          d=\"M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ row.user_mobileno || 'No mobile' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-500 tw-flex tw-items-center\"\n      [title]=\"'Password Change: ' + getPasswordChangeText(row.user_passwordchangeonlogin)\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path fill-rule=\"evenodd\"\n          d=\"M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z\"\n          clip-rule=\"evenodd\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ getPasswordChangeText(row.user_passwordchangeonlogin) }}</span>\n    </p>\n  </div>\n</ng-template>\n\n<!-- Organization Template -->\n<ng-template #organizationTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-flex tw-items-center\" [title]=\"'Entity: ' + row.entity_name\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path d=\"M4 3a2 2 0 100 4h12a2 2 0 100-4H4z\" />\n        <path fill-rule=\"evenodd\"\n          d=\"M3 8a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z\"\n          clip-rule=\"evenodd\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ row.entity_name || 'No Entity' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-blue-600 tw-flex tw-items-center tw-font-medium\" [title]=\"'Role: ' + row.role_name\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ row.role_name || 'No Role' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600 tw-flex tw-items-center\" [title]=\"'Designation: ' + row.designation_name\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path fill-rule=\"evenodd\" d=\"M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z\" clip-rule=\"evenodd\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ row.designation_name || 'No Designation' }}</span>\n    </p>\n  </div>\n</ng-template>\n\n<!-- Validity Template -->\n<ng-template #validityTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-text-center tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-font-medium\" [title]=\"'Active From: ' + formatDate(row.user_activefrom)\">\n      From: {{ formatDate(row.user_activefrom) }}\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600\" [title]=\"'Active Until: ' + getValidityEndText(row.user_activeupto)\">\n      Until: {{ getValidityEndText(row.user_activeupto) }}\n    </p>\n    @if (isDateExpired(row.user_activeupto)) {\n    <span\n      class=\"tw-inline-block tw-px-2 tw-py-0.5 tw-text-xs tw-bg-red-100 tw-text-red-800 tw-rounded-full tw-font-medium\">\n      Expired\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Status Template -->\n<ng-template #statusTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-flex tw-justify-center\">\n    @if (row.user_isactive) {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n      <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n        <circle cx=\"4\" cy=\"4\" r=\"3\" />\n      </svg>\n      Active\n    </span>\n    } @else {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800\">\n      <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n        <circle cx=\"4\" cy=\"4\" r=\"3\" />\n      </svg>\n      Inactive\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Actions Template using cide-ele-dropdown -->\n<ng-template #actionsTemplate let-value let-row=\"row\" let-column=\"column\">\n  <cide-ele-dropdown [items]=\"getDropdownItems(row)\" [config]=\"{ \n      triggerIcon: 'more_vert', \n      triggerSize: 'sm',\n      menuPosition: 'auto',\n      menuWidth: 'tw-w-56'\n    }\" (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>", styles: [".user-master-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"] }]
         }], propDecorators: { gridComponent: [{
                 type: ViewChild,
                 args: [CideEleDataGridComponent]