cloud-ide-core 2.0.6 → 2.0.7

package/fesm2022/cloud-ide-core.mjs

@@ -1,6 +1,6 @@
 import { authGuard } from 'cloud-ide-auth';
 import * as i0 from '@angular/core';
-import { Injectable, Component, inject, DestroyRef, viewChild, signal, computed, ViewChild, ChangeDetectorRef } from '@angular/core';
+import { Injectable, Component, inject, DestroyRef, viewChild, signal, computed, ChangeDetectorRef, ViewChild } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$2 from '@angular/forms';
@@ -9,11 +9,11 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { BehaviorSubject, throwError, Observable, Subject, takeUntil, debounceTime, distinctUntilChanged } from 'rxjs';
 import { tap, catchError, map } from 'rxjs/operators';
-import { coreRoutesUrl, generateStringFromObject, cidePath, hostManagerRoutesUrl, MDesignationInsertUpdatePayload, generateObjectFromString, userRoutesUrl, AuthUserMstGetByIdPayload, customEncrypt, AuthUserMstListPayload } from 'cloud-ide-lms-model';
+import { coreRoutesUrl, generateStringFromObject, cidePath, hostManagerRoutesUrl, MDesignationInsertUpdatePayload, generateObjectFromString, userRoutesUrl, AuthUserMstGetByIdPayload, customEncrypt, customDecrypt, AuthUserMstListPayload } from 'cloud-ide-lms-model';
 import * as i1 from '@angular/common/http';
 import { HttpClient } from '@angular/common/http';
-import { NotificationService, CideEleDataGridComponent, CideEleButtonComponent, CideInputComponent, CideSelectComponent, CideTextareaComponent, CideIconComponent, CideEleDropdownComponent, ConfirmationService, CideEleGlobalNotificationsComponent, CideEleConfirmationModalComponent, CideEleJsonEditorComponent, CideEleFileManagerService, CideEleFileInputComponent, CideEleTabComponent, CideEleFileImageDirective } from 'cloud-ide-element';
-import { AppStateHelperService } from 'cloud-ide-layout';
+import { NotificationService, CideEleDataGridComponent, CideEleButtonComponent, CideInputComponent, CideSelectComponent, CideTextareaComponent, CideIconComponent, CideEleDropdownComponent, ConfirmationService, CideEleGlobalNotificationsComponent, CideEleConfirmationModalComponent, CideEleJsonEditorComponent, CideEleFileInputComponent, CideEleFileImageDirective, CideEleFileManagerService, CideEleTabComponent } from 'cloud-ide-element';
+import { AppStateHelperService, CideLytFloatingUploadService, CideLytFloatingUploadTriggerDirective } from 'cloud-ide-layout';
 
 const coreRoutes = [
     {
@@ -1361,12 +1361,17 @@ class MenuListComponent {
      */
     onRowReorder(data) {
         console.log('🔄 Row reorder event:', data);
+        console.log('🔄 Changed items (newOrder):', data.newOrder.length);
+        console.log('🔄 All items (allOrders):', data.allOrders?.length || 0);
         // Save original order if not already saved
         if (this.originalOrder().length === 0) {
             this.originalOrder.set([...this.menuItems()]);
         }
+        // Use allOrders if available (complete order), otherwise fallback to newOrder (changed items only)
+        const reorderedData = data.allOrders && data.allOrders.length > 0 ? data.allOrders : data.newOrder;
+        console.log('🔄 Using reordered data with', reorderedData.length, 'items');
         // Update the displayed data with new order
-        this.menuItems.set(data.newOrder);
+        this.menuItems.set(reorderedData);
         // Mark that order has changed
         this.hasOrderChanged.set(true);
         // Update grid data
@@ -1386,25 +1391,33 @@ class MenuListComponent {
     /**
      * Save menu order using the change sequence API
      * This method is called by the data grid when save-order action is triggered
+     * Handles both single-level and multi-level (hierarchical) menu structures
      */
     saveMenuOrder() {
         console.log('💾 Saving menu order...');
-        // Prepare payload for change sequence API with all current menu items
+        // Get all menu items including children (handle both hierarchical and flat structures)
+        const allMenuItems = this.getAllMenuItemsIncludingChildren(this.menuItems());
+        // Update sequence numbers for all items based on their current order
+        const itemsWithUpdatedSequences = allMenuItems.map((item, index) => ({
+            ...item,
+            syme_order_by: index + 1
+        }));
+        // Prepare payload for change sequence API with all menu items (including children)
         const payload = {
-            menu_sequences: this.menuItems().map(item => ({
+            menu_sequences: itemsWithUpdatedSequences.map(item => ({
                 syme_id: item._id || '',
                 syme_order_by: item.syme_order_by || 1
             }))
         };
-        console.log('📤 Sending change sequence payload:', payload);
+        console.log('📤 Sending change sequence payload for', itemsWithUpdatedSequences.length, 'items:', payload);
         // Call the change sequence API
         this.menuService.changeMenuSequence(payload)
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
             next: (response) => {
                 if (response.success) {
-                    console.log('✅ Menu sequence updated successfully');
-                    this.notificationService.success('Menu sequence updated successfully');
+                    console.log('✅ Menu sequence updated successfully for', itemsWithUpdatedSequences.length, 'items');
+                    this.notificationService.success(`Menu sequence updated successfully for ${itemsWithUpdatedSequences.length} items`);
                     // Reset change flag first
                     this.hasOrderChanged.set(false);
                     // Update original order to current state
@@ -1425,6 +1438,50 @@ class MenuListComponent {
             }
         });
     }
+    /**
+     * Get all menu items including children from the current data structure
+     * This handles both hierarchical and flat menu structures
+     */
+    getAllMenuItemsIncludingChildren(menuItems) {
+        const allItems = [];
+        const processedIds = new Set();
+        const collectItems = (items) => {
+            items.forEach(item => {
+                // Avoid duplicates by checking if item is already processed
+                if (item._id && !processedIds.has(item._id)) {
+                    allItems.push(item);
+                    processedIds.add(item._id);
+                    // Check if item has children property (for hierarchical data from data grid)
+                    if (item.children && item.children.length > 0) {
+                        collectItems(item.children);
+                    }
+                }
+            });
+        };
+        // For flat data structure (which is what data grid sends), just return all items
+        // since they're already in the correct order
+        if (this.isFlatDataStructure(menuItems)) {
+            console.log('🔄 Detected flat data structure, returning all items as-is');
+            return menuItems;
+        }
+        // For hierarchical data structure, collect all items recursively
+        collectItems(menuItems);
+        console.log('🔄 Collected', allItems.length, 'menu items including children');
+        console.log('📊 Items structure:', allItems.map(item => ({
+            id: item._id,
+            title: item.syme_title,
+            parent: item.syme_id_syme,
+            hasChildren: item.children ? item.children.length : 0
+        })));
+        return allItems;
+    }
+    /**
+     * Check if the data structure is flat (no children property) or hierarchical
+     */
+    isFlatDataStructure(menuItems) {
+        // If any item has a children property with items, it's hierarchical
+        return !menuItems.some(item => item.children && item.children.length > 0);
+    }
     /**
      * Reset drag order to original state
      */
@@ -1969,7 +2026,9 @@ class MenuListComponent {
      * Load user rights type ID from general master types
      */
     loadUserRightsTypeId() {
-        this.generalMasterTypeService.getTypeList({})
+        this.generalMasterTypeService.getTypeList({
+            sygmt_code: "user_rights"
+        })
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
             next: (response) => {
@@ -6327,20 +6386,6 @@ class CideCorePageThemeComponent {
             return title.includes(q) || code.includes(q) || desc.includes(q);
         });
     }, ...(ngDevMode ? [{ debugName: "filteredThemes" }] : []));
-    // Helper to resolve preview image URL safely
-    getPreviewUrl(theme) {
-        const id = theme?.sytm_preview_id_fm || '';
-        if (!id)
-            return '';
-        const svcUnknown = this.themeService;
-        const hasGetPreviewUrl = (svc) => typeof svc === 'object' && svc !== null &&
-            'getPreviewUrl' in svc &&
-            typeof svc['getPreviewUrl'] === 'function';
-        if (hasGetPreviewUrl(svcUnknown)) {
-            return svcUnknown.getPreviewUrl(id);
-        }
-        return '';
-    }
     // Input handler to avoid $any casts in template
     onGallerySearchInput(event) {
         const target = event.target;
@@ -6844,12 +6889,26 @@ class CideCorePageThemeComponent {
      */
     cancelForm() {
         this.resetForm();
+        this.goBack();
     }
     /**
      * Go back to page list
      */
     goBack() {
-        this.router.navigate(['/core/page']);
+        console.log('🔍 [PageThemeComponent] goBack() called');
+        console.log('🔍 [PageThemeComponent] Current route:', this.router.url);
+        // Try to navigate back to the page management route
+        this.router.navigate(['/core/page']).then(success => {
+            console.log('🔍 [PageThemeComponent] Navigation result:', success);
+            if (!success) {
+                console.log('🔍 [PageThemeComponent] Navigation failed, using browser back');
+                window.history.back();
+            }
+        }).catch(error => {
+            console.error('🔍 [PageThemeComponent] Navigation error:', error);
+            // Fallback: try to go back in browser history
+            window.history.back();
+        });
     }
     /**
      * Reset form
@@ -7024,8 +7083,33 @@ class CideCorePageThemeComponent {
             error: () => { this.loading.set(false); }
         });
     }
+    // File upload methods for preview image
+    getPreviewImageUploadData() {
+        return {
+            altText: 'Theme Preview Image',
+            cyfm_name: 'theme-preview-image',
+            cyfm_alt_text: 'Theme Preview Image',
+            cyfm_type: 'image',
+            cyfm_permissions: ['read'],
+            cyfm_tags: ['theme', 'preview', 'image']
+        };
+    }
+    onPreviewImageUploadSuccess(fileId) {
+        console.log('Preview image uploaded successfully:', fileId);
+        // Update the form control with the uploaded file ID
+        this.themeForm.patchValue({
+            sytm_preview_id_fm: fileId
+        });
+    }
+    onPreviewImageUploadError(error) {
+        console.error('Preview image upload error:', error);
+        this.error.set('Failed to upload preview image: ' + error);
+    }
+    onPreviewImageUploadProgress(progress) {
+        console.log('Preview image upload progress:', progress + '%');
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePageThemeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCorePageThemeComponent, isStandalone: true, selector: "cide-core-page-theme", viewQueries: [{ propertyName: "themeDetailsRendererTemplate", first: true, predicate: ["themeDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "themeStatusRendererTemplate", first: true, predicate: ["themeStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Page Theme Container -->\r\n<div class=\"tw-flex tw-h-full tw-w-full\">\r\n  \r\n  <!-- Left: Form and header (60%) -->\r\n  <div class=\"tw-w-full lg:tw-w-3/5 tw-flex tw-flex-col tw-border-r tw-border-gray-200\">\r\n\r\n  <!-- Header Section -->\r\n    <div class=\"tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n      <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n\r\n      <!-- Title and Back Button -->\r\n      <div class=\"tw-flex tw-items-center tw-space-x-4\">\r\n          <button cideEleButton variant=\"ghost\" size=\"sm\" (click)=\"goBack()\" class=\"tw-text-gray-600 hover:tw-text-gray-900\">\r\n          <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_back</cide-ele-icon>\r\n        </button>\r\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">palette</cide-ele-icon>\r\n          <div>\r\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Theme Management</h5>\r\n            <p class=\"tw-text-sm tw-text-gray-500 tw-m-0\">Page: {{ pageTitle() }}</p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Error Message -->\r\n    @if (error()) {\r\n    <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\r\n      <div class=\"tw-flex tw-items-start\">\r\n        <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\r\n        <div class=\"tw-ml-3\">\r\n          <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\r\n          <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n    <!-- Quick Add/Edit Form Section -->\r\n    <div class=\"tw-px-6 tw-py-4 tw-bg-white tw-overflow-auto\">\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Theme' : 'Quick Add Theme' }}</h6>\r\n      </div>\r\n    </div>\r\n\r\n      <!-- Form (kept as-is) -->\r\n    <form [formGroup]=\"themeForm\" (ngSubmit)=\"saveTheme()\" class=\"tw-space-y-4\">\r\n      <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\r\n        <!-- Theme Title -->\r\n        <div class=\"tw-space-y-2\">\r\n            <cide-ele-input id=\"sytm_title\" formControlName=\"sytm_title\" placeholder=\"Enter theme title\" label=\"Theme Title*\" size=\"sm\"></cide-ele-input>\r\n        </div>\r\n        <!-- Theme Code -->\r\n        <div class=\"tw-space-y-2\">\r\n            <cide-ele-input id=\"sytm_theme_code\" formControlName=\"sytm_theme_code\" placeholder=\"Enter theme code\" label=\"Theme Code*\" size=\"sm\"></cide-ele-input>\r\n        </div>\r\n        <!-- Status -->\r\n        <div class=\"tw-space-y-2\">\r\n            <cide-ele-input\r\n              id=\"sytm_isactive_cb\"\r\n              type=\"checkbox\"\r\n              label=\"Active\"\r\n            size=\"sm\"\r\n              formControlName=\"sytm_isactive\">\r\n            </cide-ele-input>\r\n        </div>\r\n        <!-- Sub Title -->\r\n        <div class=\"tw-space-y-2\">\r\n            <cide-ele-input id=\"sytm_sub_title\" formControlName=\"sytm_sub_title\" placeholder=\"Enter sub title\" label=\"Sub Title\" size=\"sm\"></cide-ele-input>\r\n        </div>\r\n        <!-- Preview ID -->\r\n        <div class=\"tw-space-y-2\">\r\n            <cide-ele-input id=\"sytm_preview_id_fm\" formControlName=\"sytm_preview_id_fm\" placeholder=\"Enter preview image ID\" label=\"Preview Image ID\" size=\"sm\"></cide-ele-input>\r\n        </div>\r\n        <!-- Description -->\r\n        <div class=\"tw-space-y-2 md:tw-col-span-2\">\r\n            <cide-ele-textarea id=\"sytm_desc\" formControlName=\"sytm_desc\" placeholder=\"Enter theme description\" rows=\"2\" label=\"Description\" size=\"sm\"></cide-ele-textarea>\r\n        </div>\r\n                 <!-- Configuration JSON -->\r\n         <div class=\"tw-space-y-2 md:tw-col-span-3\">\r\n            <cide-ele-json-editor label=\"Configuration JSON\" formControlName=\"sytm_configuration\" [required]=\"true\" [config]=\"{\r\n               showLineNumbers: true,\r\n               autoFormat: true,\r\n               validateOnChange: true,\r\n               minHeight: 150,\r\n               maxHeight: 300,\r\n               placeholder: 'Enter theme configuration JSON...'\r\n              }\" helperText=\"Enter valid JSON configuration for the theme\"></cide-ele-json-editor>\r\n         </div>\r\n          <!-- Layout Configuration + Selection: right-side checkbox list -->\r\n          <div class=\"lg:tw-col-span-1 tw-space-y-2\">\r\n            <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Layout & Selection</div>\r\n            <!-- Selected toggle -->\r\n            <div class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-px-3 tw-py-2\">\r\n              <cide-ele-input\r\n                id=\"sytm_isselected\"\r\n                type=\"checkbox\"\r\n                label=\"Selected (Default)\"\r\n                  size=\"sm\"\r\n                formControlName=\"sytm_isselected\">\r\n              </cide-ele-input>\r\n              </div>\r\n            <div formGroupName=\"sytm_layout\" class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-divide-y tw-overflow-hidden\">\r\n              <!-- Sidebar -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_sidebar\">\r\n                <cide-ele-input id=\"layout_sidebar_status\" type=\"checkbox\" label=\"Sidebar\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n            </div>\r\n            <!-- Header -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_header\">\r\n                <cide-ele-input id=\"layout_header_status\" type=\"checkbox\" label=\"Header\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n              <!-- Footer -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_footer\">\r\n                <cide-ele-input id=\"layout_footer_status\" type=\"checkbox\" label=\"Footer\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n              <!-- Breadcrumb -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_breadcrumb\">\r\n                <cide-ele-input id=\"layout_breadcrumb_status\" type=\"checkbox\" label=\"Breadcrumb\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n              <!-- Console -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_console\">\r\n                <cide-ele-input id=\"layout_console_status\" type=\"checkbox\" label=\"Console\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n            </div>\r\n              <!-- Request -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_request\">\r\n                <cide-ele-input id=\"layout_request_status\" type=\"checkbox\" label=\"Request\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n            </div>\r\n            <p class=\"tw-text-xs tw-text-gray-500 tw-pt-1\">Toggle active sections. Only one theme can be selected as default. More options can be added here later.</p>\r\n              </div>\r\n          <!-- Drawer Configuration -->\r\n          <div class=\"tw-space-y-2 md:tw-col-span-3\">\r\n            <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n              <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Drawers</div>\r\n              <button cideEleButton type=\"button\" size=\"xs\" variant=\"outline\" (click)=\"addDrawer()\">\r\n                Add Drawer\r\n              </button>\r\n            </div>\r\n\r\n            <div formGroupName=\"sytm_layout\">\r\n              <div class=\"tw-space-y-2\" formArrayName=\"sytm_layout_drawer\">\r\n                <div *ngFor=\"let drawerGrp of drawerArray.controls; let i = index\" [formGroupName]=\"i\" class=\"tw-border tw-border-gray-200 tw-rounded-md tw-p-3 tw-flex tw-items-center tw-gap-3\">\r\n                  <cide-ele-input id=\"drawer_active_{{i}}\" type=\"checkbox\" label=\"Active\" size=\"sm\" formControlName=\"syth_status\"></cide-ele-input>\r\n                  <div class=\"tw-flex-1\">\r\n                <cide-ele-select\r\n                      id=\"drawer_config_{{i}}\"\r\n                      label=\"Drawer For\"\r\n                  size=\"sm\"\r\n                      [options]=\"drawerConfigOptions\"\r\n                      formControlName=\"syth_config_syco_for\">\r\n                </cide-ele-select>\r\n              </div>\r\n                  <button cideEleButton type=\"button\" size=\"xs\" variant=\"ghost\" (click)=\"removeDrawer(i)\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\r\n                  </button>\r\n            </div>\r\n                <p class=\"tw-text-xs tw-text-gray-500\">Configure multiple drawers as needed.</p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n      </div>\r\n\r\n      <!-- Form Actions -->\r\n        <div class=\"tw-flex tw-flex-col tw-gap-2 tw-pt-4 tw-border-t tw-border-gray-200\">\r\n          <div class=\"tw-flex tw-items-center tw-justify-end tw-space-x-3\">\r\n            <button cideEleButton type=\"button\" variant=\"outline\" (click)=\"cancelForm()\" [disabled]=\"loading()\">Cancel</button>\r\n            <button cideEleButton type=\"submit\" variant=\"primary\" leftIcon=\"add\" [disabled]=\"!themeForm.valid || loading()\" [loading]=\"loading()\">\r\n          {{ isEditMode() ? 'Update Theme' : 'Create Theme' }}\r\n        </button>\r\n          </div>\r\n      </div>\r\n    </form>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Right: Theme gallery (40%) -->\r\n  <div class=\"tw-hidden lg:tw-flex tw-w-2/5 tw-flex-col\">\r\n    <!-- (Header consolidated above) -->\r\n\r\n    <!-- Gallery list -->\r\n    <div class=\"tw-flex-1 tw-overflow-auto tw-bg-gray-50\">\r\n      <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-p-4\">\r\n        @for (theme of filteredThemes(); track theme._id) {\r\n          <div class=\"tw-rounded-md tw-transition tw-cursor-pointer tw-relative\"\r\n               [ngClass]=\"theme.sytm_isselected\r\n                 ? 'tw-border tw-border-blue-500 tw-ring-2 tw-ring-blue-200 tw-bg-blue-50/50'\r\n                 : 'tw-bg-white tw-border tw-border-gray-200 hover:tw-shadow-sm'\"\r\n               (click)=\"editTheme(theme)\"\r\n               role=\"button\"\r\n               tabindex=\"0\"\r\n               [attr.aria-selected]=\"theme.sytm_isselected ? 'true' : 'false'\"\r\n               [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\"\r\n               (keydown.enter)=\"editTheme(theme)\"\r\n               (keydown.space)=\"$event.preventDefault(); editTheme(theme)\">\r\n\r\n            <!-- Selected badge -->\r\n            <div *ngIf=\"theme.sytm_isselected\"\r\n                 class=\"tw-absolute tw-top-2 tw-right-2 tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-full tw-bg-blue-600 tw-text-white\">\r\n              <cide-ele-icon class=\"tw-w-4 tw-h-4\">check</cide-ele-icon>\r\n            </div>\r\n \r\n            <div class=\"tw-aspect-[16/9] tw-bg-gray-100 tw-rounded-t-md tw-overflow-hidden tw-flex tw-items-center tw-justify-center\">\r\n              @if (getPreviewUrl(theme)) {\r\n                <img [src]=\"getPreviewUrl(theme)\" class=\"tw-w-full tw-h-full tw-object-cover\" alt=\"Preview\" />\r\n              } @else {\r\n                <div class=\"tw-text-gray-400 tw-text-xs\">No preview</div>\r\n              }\r\n            </div>\r\n            <div class=\"tw-p-3 tw-space-y-1\">\r\n              <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"theme.sytm_title\">{{ theme.sytm_title || 'Untitled Theme' }}</div>\r\n              <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"theme.sytm_theme_code\">{{ theme.sytm_theme_code }}</div>\r\n              <div class=\"tw-flex tw-items-center tw-justify-between tw-pt-1\">\r\n                <span class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs\" [ngClass]=\"theme.sytm_isactive ? 'tw-text-green-700' : 'tw-text-red-700'\">\r\n                  <span class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full\" [ngClass]=\"theme.sytm_isactive ? 'tw-bg-green-500' : 'tw-bg-red-500'\"></span>\r\n                  {{ theme.sytm_isactive ? 'Active' : 'Inactive' }}\r\n                </span>\r\n                <div class=\"tw-flex tw-items-center tw-gap-1\">\r\n                  <!-- Set Selected Button - Clear and Simple -->\r\n                  @if (theme.sytm_isselected) {\r\n                    <span class=\"tw-inline-flex tw-items-center tw-gap-1 tw-px-2 tw-py-1 tw-bg-green-100 tw-text-green-800 tw-rounded-md tw-text-xs tw-font-medium\">\r\n                      <cide-ele-icon class=\"tw-w-3 tw-h-3\">check</cide-ele-icon>\r\n                      Selected\r\n                    </span>\r\n                  } @else {\r\n                    <button cideEleButton \r\n                            variant=\"outline\" \r\n                            size=\"xs\"\r\n                            (click)=\"$event.stopPropagation(); setSelectedTheme(theme)\"\r\n                            [attr.aria-label]=\"'Select ' + (theme.sytm_title || theme.sytm_theme_code) + ' theme'\"\r\n                            class=\"tw-text-xs\">\r\n                      Select\r\n                    </button>\r\n                  }\r\n                  <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); editTheme(theme)\"\r\n                          [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">edit</cide-ele-icon>\r\n                  </button>\r\n                  <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); deleteTheme(theme)\"\r\n                          [attr.aria-label]=\"'Delete theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        @if (!loading() && filteredThemes().length === 0) {\r\n          <div class=\"tw-col-span-full tw-text-center tw-text-xs tw-text-gray-500 tw-py-8\">No themes found</div>\r\n        }\r\n  </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- \r\n  Angular Template References for Grid Renderers (Best Practice)\r\n  \r\n  These ng-template elements represent the Angular best practice for custom rendering.\r\n  They provide:\r\n  - Type safety with template context\r\n  - Component lifecycle integration\r\n  - Change detection optimization\r\n  - Proper event handling\r\n  - Accessibility features\r\n  \r\n  Note: Current data grid uses string renderers for compatibility.\r\n  Templates are maintained for future component enhancement.\r\n-->\r\n\r\n<!-- Theme Details Renderer Template -->\r\n<ng-template #themeDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n    <!-- Theme Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      <cide-ele-icon \r\n        class=\"tw-text-purple-600\" \r\n        size=\"xs\">\r\n        palette\r\n      </cide-ele-icon>\r\n    </div>\r\n    \r\n    <!-- Theme Details -->\r\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \r\n           [title]=\"row.sytm_title\">\r\n        {{ row.sytm_title || 'Untitled' }}\r\n      </div>\r\n      @if (row.sytm_desc) {\r\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \r\n             [title]=\"row.sytm_desc\">\r\n          {{ row.sytm_desc }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Theme Status Renderer Template -->\r\n<ng-template #themeStatusRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\r\n        [ngClass]=\"row.sytm_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\r\n    {{ row.sytm_isactive ? 'Active' : 'Inactive' }}\r\n  </span>\r\n</ng-template>\r\n\r\n<!-- Actions Dropdown Renderer Template -->\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <cide-ele-dropdown \r\n    [items]=\"getActionDropdownItems(row)\"\r\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideEleJsonEditorComponent, selector: "cide-ele-json-editor", inputs: ["label", "helperText", "required", "disabled", "showCharacterCount", "config"], outputs: ["valueChange", "objectChange", "errorsChange", "validChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCorePageThemeComponent, isStandalone: true, selector: "cide-core-page-theme", viewQueries: [{ propertyName: "themeDetailsRendererTemplate", first: true, predicate: ["themeDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "themeStatusRendererTemplate", first: true, predicate: ["themeStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Page Theme Container -->\r\n<div class=\"tw-flex tw-h-full tw-w-full\">\r\n  \r\n  <!-- Left: Form and header (60%) -->\r\n  <div class=\"tw-w-full lg:tw-w-3/5 tw-flex tw-flex-col tw-border-r tw-border-gray-200\">\r\n\r\n  <!-- Header Section -->\r\n    <div class=\"tw-px-6 tw-py-2 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n      <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-2 sm:tw-space-y-0\">\r\n\r\n      <!-- Title and Back Button -->\r\n      <div class=\"tw-flex tw-items-center tw-space-x-4\">\r\n          <button cideEleButton variant=\"ghost\" size=\"sm\" (click)=\"goBack();\" class=\"tw-text-gray-600 hover:tw-text-gray-900\">\r\n          <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_back</cide-ele-icon>\r\n        </button>\r\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">palette</cide-ele-icon>\r\n          <div>\r\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Theme Management</h5>\r\n            <p class=\"tw-text-sm tw-text-gray-500 tw-m-0\">Page: {{ pageTitle() }}</p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Error Message -->\r\n    @if (error()) {\r\n    <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\r\n      <div class=\"tw-flex tw-items-start\">\r\n        <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\r\n        <div class=\"tw-ml-3\">\r\n          <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\r\n          <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n    <!-- Quick Add/Edit Form Section -->\r\n    <div class=\"tw-px-6 tw-py-3 tw-bg-white tw-overflow-auto\">\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\r\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Theme' : 'Quick Add Theme' }}</h6>\r\n      </div>\r\n    </div>\r\n\r\n      <!-- Form (kept as-is) -->\r\n    <form [formGroup]=\"themeForm\" (ngSubmit)=\"saveTheme()\" class=\"tw-space-y-4\">\r\n      <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4\">\r\n        <!-- Left Side: All Input Fields -->\r\n        <div class=\"tw-space-y-4\">\r\n          <!-- Row 1: Theme Title and Theme Code -->\r\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n            <div class=\"tw-space-y-2\">\r\n                <cide-ele-input id=\"sytm_title\" formControlName=\"sytm_title\" placeholder=\"Enter theme title\" label=\"Theme Title*\" size=\"sm\"></cide-ele-input>\r\n            </div>\r\n            <div class=\"tw-space-y-2\">\r\n                <cide-ele-input id=\"sytm_theme_code\" formControlName=\"sytm_theme_code\" placeholder=\"Enter theme code\" label=\"Theme Code*\" size=\"sm\"></cide-ele-input>\r\n            </div>\r\n          </div>\r\n          \r\n          <!-- Row 2: Sub Title and Active Status -->\r\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n            <div class=\"tw-space-y-2\">\r\n                <cide-ele-input id=\"sytm_sub_title\" formControlName=\"sytm_sub_title\" placeholder=\"Enter sub title\" label=\"Sub Title\" size=\"sm\"></cide-ele-input>\r\n            </div>\r\n            <div class=\"tw-space-y-2 tw-flex tw-items-center\">\r\n                <cide-ele-input\r\n                  id=\"sytm_isactive_cb\"\r\n                  type=\"checkbox\"\r\n                  label=\"Active\"\r\n                size=\"sm\"\r\n                  formControlName=\"sytm_isactive\">\r\n                </cide-ele-input>\r\n            </div>\r\n          </div>\r\n          \r\n          <!-- Row 3: Description -->\r\n          <div class=\"tw-space-y-2\">\r\n              <cide-ele-textarea id=\"sytm_desc\" formControlName=\"sytm_desc\" placeholder=\"Enter theme description\" rows=\"2\" label=\"Description\" size=\"sm\"></cide-ele-textarea>\r\n          </div>\r\n        </div>\r\n        \r\n        <!-- Right Side: File Upload -->\r\n        <div class=\"tw-flex tw-flex-col tw-justify-start tw-items-center tw-p-0\">\r\n            <cide-ele-file-input \r\n              id=\"sytm_preview_id_fm\" \r\n              formControlName=\"sytm_preview_id_fm\"\r\n              accept=\"image/*\"\r\n              [showPreview]=\"true\"\r\n              [previewBoxMode]=\"true\"\r\n              [showFileName]=\"false\"\r\n              previewWidth=\"180px\"\r\n              previewHeight=\"120px\"\r\n              placeholderText=\"Upload Preview Image\"\r\n              placeholderIcon=\"image\"\r\n              [autoUpload]=\"true\"\r\n              [uploadData]=\"getPreviewImageUploadData()\"\r\n              (uploadSuccess)=\"onPreviewImageUploadSuccess($event)\"\r\n              (uploadError)=\"onPreviewImageUploadError($event)\"\r\n              (uploadProgressChange)=\"onPreviewImageUploadProgress($event)\">\r\n            </cide-ele-file-input>\r\n        </div>\r\n      </div>\r\n      \r\n      <!-- Configuration JSON -->\r\n      <div class=\"tw-space-y-2\">\r\n            <cide-ele-json-editor label=\"Configuration JSON\" formControlName=\"sytm_configuration\" [required]=\"true\" [config]=\"{\r\n               showLineNumbers: true,\r\n               autoFormat: true,\r\n               validateOnChange: true,\r\n               minHeight: 150,\r\n               maxHeight: 300,\r\n               placeholder: 'Enter theme configuration JSON...'\r\n              }\" helperText=\"Enter valid JSON configuration for the theme\"></cide-ele-json-editor>\r\n         </div>\r\n      <!-- Layout Configuration + Selection -->\r\n      <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\r\n        <div class=\"tw-space-y-2\">\r\n            <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Layout & Selection</div>\r\n            <!-- Selected toggle -->\r\n            <div class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-px-3 tw-py-2\">\r\n              <cide-ele-input\r\n                id=\"sytm_isselected\"\r\n                type=\"checkbox\"\r\n                label=\"Selected (Default)\"\r\n                  size=\"sm\"\r\n                formControlName=\"sytm_isselected\">\r\n              </cide-ele-input>\r\n              </div>\r\n            <div formGroupName=\"sytm_layout\" class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-divide-y tw-overflow-hidden\">\r\n              <!-- Sidebar -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_sidebar\">\r\n                <cide-ele-input id=\"layout_sidebar_status\" type=\"checkbox\" label=\"Sidebar\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n            </div>\r\n            <!-- Header -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_header\">\r\n                <cide-ele-input id=\"layout_header_status\" type=\"checkbox\" label=\"Header\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n              <!-- Footer -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_footer\">\r\n                <cide-ele-input id=\"layout_footer_status\" type=\"checkbox\" label=\"Footer\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n              <!-- Breadcrumb -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_breadcrumb\">\r\n                <cide-ele-input id=\"layout_breadcrumb_status\" type=\"checkbox\" label=\"Breadcrumb\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n              <!-- Console -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_console\">\r\n                <cide-ele-input id=\"layout_console_status\" type=\"checkbox\" label=\"Console\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n            </div>\r\n              <!-- Request -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_request\">\r\n                <cide-ele-input id=\"layout_request_status\" type=\"checkbox\" label=\"Request\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n            </div>\r\n            <p class=\"tw-text-xs tw-text-gray-500 tw-pt-1\">Toggle active sections. Only one theme can be selected as default. More options can be added here later.</p>\r\n        </div>\r\n        \r\n        <!-- Drawer Configuration -->\r\n        <div class=\"tw-space-y-2\">\r\n            <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n              <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Drawers</div>\r\n              <button cideEleButton type=\"button\" size=\"xs\" variant=\"outline\" (click)=\"addDrawer()\">\r\n                Add Drawer\r\n              </button>\r\n            </div>\r\n\r\n            <div formGroupName=\"sytm_layout\">\r\n              <div class=\"tw-space-y-2\" formArrayName=\"sytm_layout_drawer\">\r\n                <div *ngFor=\"let drawerGrp of drawerArray.controls; let i = index\" [formGroupName]=\"i\" class=\"tw-border tw-border-gray-200 tw-rounded-md tw-p-3 tw-flex tw-items-center tw-gap-3\">\r\n                  <cide-ele-input id=\"drawer_active_{{i}}\" type=\"checkbox\" label=\"Active\" size=\"sm\" formControlName=\"syth_status\"></cide-ele-input>\r\n                  <div class=\"tw-flex-1\">\r\n                <cide-ele-select\r\n                      id=\"drawer_config_{{i}}\"\r\n                      label=\"Drawer For\"\r\n                  size=\"sm\"\r\n                      [options]=\"drawerConfigOptions\"\r\n                      formControlName=\"syth_config_syco_for\">\r\n                </cide-ele-select>\r\n              </div>\r\n                  <button cideEleButton type=\"button\" size=\"xs\" variant=\"ghost\" (click)=\"removeDrawer(i)\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\r\n                  </button>\r\n            </div>\r\n                <p class=\"tw-text-xs tw-text-gray-500\">Configure multiple drawers as needed.</p>\r\n              </div>\r\n            </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Form Actions -->\r\n        <div class=\"tw-flex tw-flex-col tw-gap-2 tw-pt-4 tw-border-t tw-border-gray-200\">\r\n          <div class=\"tw-flex tw-items-center tw-justify-end tw-space-x-3\">\r\n            <button cideEleButton type=\"button\" variant=\"outline\" (click)=\"cancelForm()\" [disabled]=\"loading()\">Cancel</button>\r\n            <button cideEleButton type=\"submit\" variant=\"primary\" leftIcon=\"add\" [disabled]=\"!themeForm.valid || loading()\" [loading]=\"loading()\">\r\n          {{ isEditMode() ? 'Update Theme' : 'Create Theme' }}\r\n        </button>\r\n          </div>\r\n      </div>\r\n    </form>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Right: Theme gallery (40%) -->\r\n  <div class=\"tw-hidden lg:tw-flex tw-w-2/5 tw-flex-col\">\r\n    <!-- (Header consolidated above) -->\r\n\r\n    <!-- Gallery list -->\r\n    <div class=\"tw-flex-1 tw-overflow-auto tw-bg-gray-50\">\r\n      <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-p-4\">\r\n        @for (theme of filteredThemes(); track theme._id) {\r\n          <div class=\"tw-rounded-md tw-transition tw-cursor-pointer tw-relative\"\r\n               [ngClass]=\"theme.sytm_isselected\r\n                 ? 'tw-border tw-border-blue-500 tw-ring-2 tw-ring-blue-200 tw-bg-blue-50/50'\r\n                 : 'tw-bg-white tw-border tw-border-gray-200 hover:tw-shadow-sm'\"\r\n               (click)=\"editTheme(theme)\"\r\n               role=\"button\"\r\n               tabindex=\"0\"\r\n               [attr.aria-selected]=\"theme.sytm_isselected ? 'true' : 'false'\"\r\n               [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\"\r\n               (keydown.enter)=\"editTheme(theme)\"\r\n               (keydown.space)=\"$event.preventDefault(); editTheme(theme)\">\r\n\r\n            <!-- Selected badge -->\r\n            <div *ngIf=\"theme.sytm_isselected\"\r\n                 class=\"tw-absolute tw-top-2 tw-right-2 tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-full tw-bg-blue-600 tw-text-white\">\r\n              <cide-ele-icon class=\"tw-w-4 tw-h-4\">check</cide-ele-icon>\r\n            </div>\r\n \r\n            <div class=\"tw-aspect-[16/9] tw-bg-gray-100 tw-rounded-t-md tw-overflow-hidden tw-flex tw-items-center tw-justify-center\">\r\n              @if (theme.sytm_preview_id_fm) {\r\n                <img \r\n                  cideEleFileImage \r\n                  [fileId]=\"theme.sytm_preview_id_fm\" \r\n                  [altText]=\"'Theme Preview'\"\r\n                  class=\"tw-w-full tw-h-full tw-object-cover\" />\r\n              } @else {\r\n                <div class=\"tw-text-gray-400 tw-text-xs\">No preview</div>\r\n              }\r\n            </div>\r\n            <div class=\"tw-p-3 tw-space-y-1\">\r\n              <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"theme.sytm_title\">{{ theme.sytm_title || 'Untitled Theme' }}</div>\r\n              <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"theme.sytm_theme_code\">{{ theme.sytm_theme_code }}</div>\r\n              <div class=\"tw-flex tw-items-center tw-justify-between tw-pt-1\">\r\n                <span class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs\" [ngClass]=\"theme.sytm_isactive ? 'tw-text-green-700' : 'tw-text-red-700'\">\r\n                  <span class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full\" [ngClass]=\"theme.sytm_isactive ? 'tw-bg-green-500' : 'tw-bg-red-500'\"></span>\r\n                  {{ theme.sytm_isactive ? 'Active' : 'Inactive' }}\r\n                </span>\r\n                <div class=\"tw-flex tw-items-center tw-gap-1\">\r\n                  <!-- Set Selected Button - Clear and Simple -->\r\n                  @if (theme.sytm_isselected) {\r\n                    <span class=\"tw-inline-flex tw-items-center tw-gap-1 tw-px-2 tw-py-1 tw-bg-green-100 tw-text-green-800 tw-rounded-md tw-text-xs tw-font-medium\">\r\n                      <cide-ele-icon class=\"tw-w-3 tw-h-3\">check</cide-ele-icon>\r\n                      Selected\r\n                    </span>\r\n                  } @else {\r\n                    <button cideEleButton \r\n                            variant=\"outline\" \r\n                            size=\"xs\"\r\n                            (click)=\"$event.stopPropagation(); setSelectedTheme(theme)\"\r\n                            [attr.aria-label]=\"'Select ' + (theme.sytm_title || theme.sytm_theme_code) + ' theme'\"\r\n                            class=\"tw-text-xs\">\r\n                      Select\r\n                    </button>\r\n                  }\r\n                  <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); editTheme(theme)\"\r\n                          [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">edit</cide-ele-icon>\r\n                  </button>\r\n                  <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); deleteTheme(theme)\"\r\n                          [attr.aria-label]=\"'Delete theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        @if (!loading() && filteredThemes().length === 0) {\r\n          <div class=\"tw-col-span-full tw-text-center tw-text-xs tw-text-gray-500 tw-py-8\">No themes found</div>\r\n        }\r\n  </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- \r\n  Angular Template References for Grid Renderers (Best Practice)\r\n  \r\n  These ng-template elements represent the Angular best practice for custom rendering.\r\n  They provide:\r\n  - Type safety with template context\r\n  - Component lifecycle integration\r\n  - Change detection optimization\r\n  - Proper event handling\r\n  - Accessibility features\r\n  \r\n  Note: Current data grid uses string renderers for compatibility.\r\n  Templates are maintained for future component enhancement.\r\n-->\r\n\r\n<!-- Theme Details Renderer Template -->\r\n<ng-template #themeDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n    <!-- Theme Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      <cide-ele-icon \r\n        class=\"tw-text-purple-600\" \r\n        size=\"xs\">\r\n        palette\r\n      </cide-ele-icon>\r\n    </div>\r\n    \r\n    <!-- Theme Details -->\r\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \r\n           [title]=\"row.sytm_title\">\r\n        {{ row.sytm_title || 'Untitled' }}\r\n      </div>\r\n      @if (row.sytm_desc) {\r\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \r\n             [title]=\"row.sytm_desc\">\r\n          {{ row.sytm_desc }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Theme Status Renderer Template -->\r\n<ng-template #themeStatusRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\r\n        [ngClass]=\"row.sytm_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\r\n    {{ row.sytm_isactive ? 'Active' : 'Inactive' }}\r\n  </span>\r\n</ng-template>\r\n\r\n<!-- Actions Dropdown Renderer Template -->\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <cide-ele-dropdown \r\n    [items]=\"getActionDropdownItems(row)\"\r\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideEleJsonEditorComponent, selector: "cide-ele-json-editor", inputs: ["label", "helperText", "required", "disabled", "showCharacterCount", "config"], outputs: ["valueChange", "objectChange", "errorsChange", "validChange"] }, { kind: "component", type: CideEleFileInputComponent, selector: "cide-ele-file-input", inputs: ["label", "accept", "multiple", "disabled", "required", "helperText", "errorText", "showPreview", "previewWidth", "previewHeight", "previewBoxMode", "showFileName", "placeholderText", "placeholderIcon", "autoUpload", "uploadData"], outputs: ["fileChange", "uploadSuccess", "uploadError", "uploadProgressChange"] }, { kind: "directive", type: CideEleFileImageDirective, selector: "[cideEleFileImage]", inputs: ["fileId", "altText"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePageThemeComponent, decorators: [{
             type: Component,
@@ -7040,7 +7124,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideIconComponent,
                         CideEleDropdownComponent,
                         CideEleJsonEditorComponent,
-                    ], template: "<!-- Page Theme Container -->\r\n<div class=\"tw-flex tw-h-full tw-w-full\">\r\n  \r\n  <!-- Left: Form and header (60%) -->\r\n  <div class=\"tw-w-full lg:tw-w-3/5 tw-flex tw-flex-col tw-border-r tw-border-gray-200\">\r\n\r\n  <!-- Header Section -->\r\n    <div class=\"tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n      <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n\r\n      <!-- Title and Back Button -->\r\n      <div class=\"tw-flex tw-items-center tw-space-x-4\">\r\n          <button cideEleButton variant=\"ghost\" size=\"sm\" (click)=\"goBack()\" class=\"tw-text-gray-600 hover:tw-text-gray-900\">\r\n          <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_back</cide-ele-icon>\r\n        </button>\r\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">palette</cide-ele-icon>\r\n          <div>\r\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Theme Management</h5>\r\n            <p class=\"tw-text-sm tw-text-gray-500 tw-m-0\">Page: {{ pageTitle() }}</p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Error Message -->\r\n    @if (error()) {\r\n    <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\r\n      <div class=\"tw-flex tw-items-start\">\r\n        <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\r\n        <div class=\"tw-ml-3\">\r\n          <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\r\n          <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n    <!-- Quick Add/Edit Form Section -->\r\n    <div class=\"tw-px-6 tw-py-4 tw-bg-white tw-overflow-auto\">\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Theme' : 'Quick Add Theme' }}</h6>\r\n      </div>\r\n    </div>\r\n\r\n      <!-- Form (kept as-is) -->\r\n    <form [formGroup]=\"themeForm\" (ngSubmit)=\"saveTheme()\" class=\"tw-space-y-4\">\r\n      <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\r\n        <!-- Theme Title -->\r\n        <div class=\"tw-space-y-2\">\r\n            <cide-ele-input id=\"sytm_title\" formControlName=\"sytm_title\" placeholder=\"Enter theme title\" label=\"Theme Title*\" size=\"sm\"></cide-ele-input>\r\n        </div>\r\n        <!-- Theme Code -->\r\n        <div class=\"tw-space-y-2\">\r\n            <cide-ele-input id=\"sytm_theme_code\" formControlName=\"sytm_theme_code\" placeholder=\"Enter theme code\" label=\"Theme Code*\" size=\"sm\"></cide-ele-input>\r\n        </div>\r\n        <!-- Status -->\r\n        <div class=\"tw-space-y-2\">\r\n            <cide-ele-input\r\n              id=\"sytm_isactive_cb\"\r\n              type=\"checkbox\"\r\n              label=\"Active\"\r\n            size=\"sm\"\r\n              formControlName=\"sytm_isactive\">\r\n            </cide-ele-input>\r\n        </div>\r\n        <!-- Sub Title -->\r\n        <div class=\"tw-space-y-2\">\r\n            <cide-ele-input id=\"sytm_sub_title\" formControlName=\"sytm_sub_title\" placeholder=\"Enter sub title\" label=\"Sub Title\" size=\"sm\"></cide-ele-input>\r\n        </div>\r\n        <!-- Preview ID -->\r\n        <div class=\"tw-space-y-2\">\r\n            <cide-ele-input id=\"sytm_preview_id_fm\" formControlName=\"sytm_preview_id_fm\" placeholder=\"Enter preview image ID\" label=\"Preview Image ID\" size=\"sm\"></cide-ele-input>\r\n        </div>\r\n        <!-- Description -->\r\n        <div class=\"tw-space-y-2 md:tw-col-span-2\">\r\n            <cide-ele-textarea id=\"sytm_desc\" formControlName=\"sytm_desc\" placeholder=\"Enter theme description\" rows=\"2\" label=\"Description\" size=\"sm\"></cide-ele-textarea>\r\n        </div>\r\n                 <!-- Configuration JSON -->\r\n         <div class=\"tw-space-y-2 md:tw-col-span-3\">\r\n            <cide-ele-json-editor label=\"Configuration JSON\" formControlName=\"sytm_configuration\" [required]=\"true\" [config]=\"{\r\n               showLineNumbers: true,\r\n               autoFormat: true,\r\n               validateOnChange: true,\r\n               minHeight: 150,\r\n               maxHeight: 300,\r\n               placeholder: 'Enter theme configuration JSON...'\r\n              }\" helperText=\"Enter valid JSON configuration for the theme\"></cide-ele-json-editor>\r\n         </div>\r\n          <!-- Layout Configuration + Selection: right-side checkbox list -->\r\n          <div class=\"lg:tw-col-span-1 tw-space-y-2\">\r\n            <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Layout & Selection</div>\r\n            <!-- Selected toggle -->\r\n            <div class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-px-3 tw-py-2\">\r\n              <cide-ele-input\r\n                id=\"sytm_isselected\"\r\n                type=\"checkbox\"\r\n                label=\"Selected (Default)\"\r\n                  size=\"sm\"\r\n                formControlName=\"sytm_isselected\">\r\n              </cide-ele-input>\r\n              </div>\r\n            <div formGroupName=\"sytm_layout\" class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-divide-y tw-overflow-hidden\">\r\n              <!-- Sidebar -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_sidebar\">\r\n                <cide-ele-input id=\"layout_sidebar_status\" type=\"checkbox\" label=\"Sidebar\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n            </div>\r\n            <!-- Header -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_header\">\r\n                <cide-ele-input id=\"layout_header_status\" type=\"checkbox\" label=\"Header\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n              <!-- Footer -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_footer\">\r\n                <cide-ele-input id=\"layout_footer_status\" type=\"checkbox\" label=\"Footer\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n              <!-- Breadcrumb -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_breadcrumb\">\r\n                <cide-ele-input id=\"layout_breadcrumb_status\" type=\"checkbox\" label=\"Breadcrumb\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n              <!-- Console -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_console\">\r\n                <cide-ele-input id=\"layout_console_status\" type=\"checkbox\" label=\"Console\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n            </div>\r\n              <!-- Request -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_request\">\r\n                <cide-ele-input id=\"layout_request_status\" type=\"checkbox\" label=\"Request\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n            </div>\r\n            <p class=\"tw-text-xs tw-text-gray-500 tw-pt-1\">Toggle active sections. Only one theme can be selected as default. More options can be added here later.</p>\r\n              </div>\r\n          <!-- Drawer Configuration -->\r\n          <div class=\"tw-space-y-2 md:tw-col-span-3\">\r\n            <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n              <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Drawers</div>\r\n              <button cideEleButton type=\"button\" size=\"xs\" variant=\"outline\" (click)=\"addDrawer()\">\r\n                Add Drawer\r\n              </button>\r\n            </div>\r\n\r\n            <div formGroupName=\"sytm_layout\">\r\n              <div class=\"tw-space-y-2\" formArrayName=\"sytm_layout_drawer\">\r\n                <div *ngFor=\"let drawerGrp of drawerArray.controls; let i = index\" [formGroupName]=\"i\" class=\"tw-border tw-border-gray-200 tw-rounded-md tw-p-3 tw-flex tw-items-center tw-gap-3\">\r\n                  <cide-ele-input id=\"drawer_active_{{i}}\" type=\"checkbox\" label=\"Active\" size=\"sm\" formControlName=\"syth_status\"></cide-ele-input>\r\n                  <div class=\"tw-flex-1\">\r\n                <cide-ele-select\r\n                      id=\"drawer_config_{{i}}\"\r\n                      label=\"Drawer For\"\r\n                  size=\"sm\"\r\n                      [options]=\"drawerConfigOptions\"\r\n                      formControlName=\"syth_config_syco_for\">\r\n                </cide-ele-select>\r\n              </div>\r\n                  <button cideEleButton type=\"button\" size=\"xs\" variant=\"ghost\" (click)=\"removeDrawer(i)\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\r\n                  </button>\r\n            </div>\r\n                <p class=\"tw-text-xs tw-text-gray-500\">Configure multiple drawers as needed.</p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n      </div>\r\n\r\n      <!-- Form Actions -->\r\n        <div class=\"tw-flex tw-flex-col tw-gap-2 tw-pt-4 tw-border-t tw-border-gray-200\">\r\n          <div class=\"tw-flex tw-items-center tw-justify-end tw-space-x-3\">\r\n            <button cideEleButton type=\"button\" variant=\"outline\" (click)=\"cancelForm()\" [disabled]=\"loading()\">Cancel</button>\r\n            <button cideEleButton type=\"submit\" variant=\"primary\" leftIcon=\"add\" [disabled]=\"!themeForm.valid || loading()\" [loading]=\"loading()\">\r\n          {{ isEditMode() ? 'Update Theme' : 'Create Theme' }}\r\n        </button>\r\n          </div>\r\n      </div>\r\n    </form>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Right: Theme gallery (40%) -->\r\n  <div class=\"tw-hidden lg:tw-flex tw-w-2/5 tw-flex-col\">\r\n    <!-- (Header consolidated above) -->\r\n\r\n    <!-- Gallery list -->\r\n    <div class=\"tw-flex-1 tw-overflow-auto tw-bg-gray-50\">\r\n      <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-p-4\">\r\n        @for (theme of filteredThemes(); track theme._id) {\r\n          <div class=\"tw-rounded-md tw-transition tw-cursor-pointer tw-relative\"\r\n               [ngClass]=\"theme.sytm_isselected\r\n                 ? 'tw-border tw-border-blue-500 tw-ring-2 tw-ring-blue-200 tw-bg-blue-50/50'\r\n                 : 'tw-bg-white tw-border tw-border-gray-200 hover:tw-shadow-sm'\"\r\n               (click)=\"editTheme(theme)\"\r\n               role=\"button\"\r\n               tabindex=\"0\"\r\n               [attr.aria-selected]=\"theme.sytm_isselected ? 'true' : 'false'\"\r\n               [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\"\r\n               (keydown.enter)=\"editTheme(theme)\"\r\n               (keydown.space)=\"$event.preventDefault(); editTheme(theme)\">\r\n\r\n            <!-- Selected badge -->\r\n            <div *ngIf=\"theme.sytm_isselected\"\r\n                 class=\"tw-absolute tw-top-2 tw-right-2 tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-full tw-bg-blue-600 tw-text-white\">\r\n              <cide-ele-icon class=\"tw-w-4 tw-h-4\">check</cide-ele-icon>\r\n            </div>\r\n \r\n            <div class=\"tw-aspect-[16/9] tw-bg-gray-100 tw-rounded-t-md tw-overflow-hidden tw-flex tw-items-center tw-justify-center\">\r\n              @if (getPreviewUrl(theme)) {\r\n                <img [src]=\"getPreviewUrl(theme)\" class=\"tw-w-full tw-h-full tw-object-cover\" alt=\"Preview\" />\r\n              } @else {\r\n                <div class=\"tw-text-gray-400 tw-text-xs\">No preview</div>\r\n              }\r\n            </div>\r\n            <div class=\"tw-p-3 tw-space-y-1\">\r\n              <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"theme.sytm_title\">{{ theme.sytm_title || 'Untitled Theme' }}</div>\r\n              <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"theme.sytm_theme_code\">{{ theme.sytm_theme_code }}</div>\r\n              <div class=\"tw-flex tw-items-center tw-justify-between tw-pt-1\">\r\n                <span class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs\" [ngClass]=\"theme.sytm_isactive ? 'tw-text-green-700' : 'tw-text-red-700'\">\r\n                  <span class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full\" [ngClass]=\"theme.sytm_isactive ? 'tw-bg-green-500' : 'tw-bg-red-500'\"></span>\r\n                  {{ theme.sytm_isactive ? 'Active' : 'Inactive' }}\r\n                </span>\r\n                <div class=\"tw-flex tw-items-center tw-gap-1\">\r\n                  <!-- Set Selected Button - Clear and Simple -->\r\n                  @if (theme.sytm_isselected) {\r\n                    <span class=\"tw-inline-flex tw-items-center tw-gap-1 tw-px-2 tw-py-1 tw-bg-green-100 tw-text-green-800 tw-rounded-md tw-text-xs tw-font-medium\">\r\n                      <cide-ele-icon class=\"tw-w-3 tw-h-3\">check</cide-ele-icon>\r\n                      Selected\r\n                    </span>\r\n                  } @else {\r\n                    <button cideEleButton \r\n                            variant=\"outline\" \r\n                            size=\"xs\"\r\n                            (click)=\"$event.stopPropagation(); setSelectedTheme(theme)\"\r\n                            [attr.aria-label]=\"'Select ' + (theme.sytm_title || theme.sytm_theme_code) + ' theme'\"\r\n                            class=\"tw-text-xs\">\r\n                      Select\r\n                    </button>\r\n                  }\r\n                  <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); editTheme(theme)\"\r\n                          [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">edit</cide-ele-icon>\r\n                  </button>\r\n                  <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); deleteTheme(theme)\"\r\n                          [attr.aria-label]=\"'Delete theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        @if (!loading() && filteredThemes().length === 0) {\r\n          <div class=\"tw-col-span-full tw-text-center tw-text-xs tw-text-gray-500 tw-py-8\">No themes found</div>\r\n        }\r\n  </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- \r\n  Angular Template References for Grid Renderers (Best Practice)\r\n  \r\n  These ng-template elements represent the Angular best practice for custom rendering.\r\n  They provide:\r\n  - Type safety with template context\r\n  - Component lifecycle integration\r\n  - Change detection optimization\r\n  - Proper event handling\r\n  - Accessibility features\r\n  \r\n  Note: Current data grid uses string renderers for compatibility.\r\n  Templates are maintained for future component enhancement.\r\n-->\r\n\r\n<!-- Theme Details Renderer Template -->\r\n<ng-template #themeDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n    <!-- Theme Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      <cide-ele-icon \r\n        class=\"tw-text-purple-600\" \r\n        size=\"xs\">\r\n        palette\r\n      </cide-ele-icon>\r\n    </div>\r\n    \r\n    <!-- Theme Details -->\r\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \r\n           [title]=\"row.sytm_title\">\r\n        {{ row.sytm_title || 'Untitled' }}\r\n      </div>\r\n      @if (row.sytm_desc) {\r\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \r\n             [title]=\"row.sytm_desc\">\r\n          {{ row.sytm_desc }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Theme Status Renderer Template -->\r\n<ng-template #themeStatusRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\r\n        [ngClass]=\"row.sytm_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\r\n    {{ row.sytm_isactive ? 'Active' : 'Inactive' }}\r\n  </span>\r\n</ng-template>\r\n\r\n<!-- Actions Dropdown Renderer Template -->\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <cide-ele-dropdown \r\n    [items]=\"getActionDropdownItems(row)\"\r\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template> " }]
+                        CideEleFileInputComponent,
+                        CideEleFileImageDirective,
+                    ], template: "<!-- Page Theme Container -->\r\n<div class=\"tw-flex tw-h-full tw-w-full\">\r\n  \r\n  <!-- Left: Form and header (60%) -->\r\n  <div class=\"tw-w-full lg:tw-w-3/5 tw-flex tw-flex-col tw-border-r tw-border-gray-200\">\r\n\r\n  <!-- Header Section -->\r\n    <div class=\"tw-px-6 tw-py-2 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n      <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-2 sm:tw-space-y-0\">\r\n\r\n      <!-- Title and Back Button -->\r\n      <div class=\"tw-flex tw-items-center tw-space-x-4\">\r\n          <button cideEleButton variant=\"ghost\" size=\"sm\" (click)=\"goBack();\" class=\"tw-text-gray-600 hover:tw-text-gray-900\">\r\n          <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_back</cide-ele-icon>\r\n        </button>\r\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">palette</cide-ele-icon>\r\n          <div>\r\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Theme Management</h5>\r\n            <p class=\"tw-text-sm tw-text-gray-500 tw-m-0\">Page: {{ pageTitle() }}</p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Error Message -->\r\n    @if (error()) {\r\n    <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\r\n      <div class=\"tw-flex tw-items-start\">\r\n        <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\r\n        <div class=\"tw-ml-3\">\r\n          <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\r\n          <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n    <!-- Quick Add/Edit Form Section -->\r\n    <div class=\"tw-px-6 tw-py-3 tw-bg-white tw-overflow-auto\">\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\r\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Theme' : 'Quick Add Theme' }}</h6>\r\n      </div>\r\n    </div>\r\n\r\n      <!-- Form (kept as-is) -->\r\n    <form [formGroup]=\"themeForm\" (ngSubmit)=\"saveTheme()\" class=\"tw-space-y-4\">\r\n      <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4\">\r\n        <!-- Left Side: All Input Fields -->\r\n        <div class=\"tw-space-y-4\">\r\n          <!-- Row 1: Theme Title and Theme Code -->\r\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n            <div class=\"tw-space-y-2\">\r\n                <cide-ele-input id=\"sytm_title\" formControlName=\"sytm_title\" placeholder=\"Enter theme title\" label=\"Theme Title*\" size=\"sm\"></cide-ele-input>\r\n            </div>\r\n            <div class=\"tw-space-y-2\">\r\n                <cide-ele-input id=\"sytm_theme_code\" formControlName=\"sytm_theme_code\" placeholder=\"Enter theme code\" label=\"Theme Code*\" size=\"sm\"></cide-ele-input>\r\n            </div>\r\n          </div>\r\n          \r\n          <!-- Row 2: Sub Title and Active Status -->\r\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n            <div class=\"tw-space-y-2\">\r\n                <cide-ele-input id=\"sytm_sub_title\" formControlName=\"sytm_sub_title\" placeholder=\"Enter sub title\" label=\"Sub Title\" size=\"sm\"></cide-ele-input>\r\n            </div>\r\n            <div class=\"tw-space-y-2 tw-flex tw-items-center\">\r\n                <cide-ele-input\r\n                  id=\"sytm_isactive_cb\"\r\n                  type=\"checkbox\"\r\n                  label=\"Active\"\r\n                size=\"sm\"\r\n                  formControlName=\"sytm_isactive\">\r\n                </cide-ele-input>\r\n            </div>\r\n          </div>\r\n          \r\n          <!-- Row 3: Description -->\r\n          <div class=\"tw-space-y-2\">\r\n              <cide-ele-textarea id=\"sytm_desc\" formControlName=\"sytm_desc\" placeholder=\"Enter theme description\" rows=\"2\" label=\"Description\" size=\"sm\"></cide-ele-textarea>\r\n          </div>\r\n        </div>\r\n        \r\n        <!-- Right Side: File Upload -->\r\n        <div class=\"tw-flex tw-flex-col tw-justify-start tw-items-center tw-p-0\">\r\n            <cide-ele-file-input \r\n              id=\"sytm_preview_id_fm\" \r\n              formControlName=\"sytm_preview_id_fm\"\r\n              accept=\"image/*\"\r\n              [showPreview]=\"true\"\r\n              [previewBoxMode]=\"true\"\r\n              [showFileName]=\"false\"\r\n              previewWidth=\"180px\"\r\n              previewHeight=\"120px\"\r\n              placeholderText=\"Upload Preview Image\"\r\n              placeholderIcon=\"image\"\r\n              [autoUpload]=\"true\"\r\n              [uploadData]=\"getPreviewImageUploadData()\"\r\n              (uploadSuccess)=\"onPreviewImageUploadSuccess($event)\"\r\n              (uploadError)=\"onPreviewImageUploadError($event)\"\r\n              (uploadProgressChange)=\"onPreviewImageUploadProgress($event)\">\r\n            </cide-ele-file-input>\r\n        </div>\r\n      </div>\r\n      \r\n      <!-- Configuration JSON -->\r\n      <div class=\"tw-space-y-2\">\r\n            <cide-ele-json-editor label=\"Configuration JSON\" formControlName=\"sytm_configuration\" [required]=\"true\" [config]=\"{\r\n               showLineNumbers: true,\r\n               autoFormat: true,\r\n               validateOnChange: true,\r\n               minHeight: 150,\r\n               maxHeight: 300,\r\n               placeholder: 'Enter theme configuration JSON...'\r\n              }\" helperText=\"Enter valid JSON configuration for the theme\"></cide-ele-json-editor>\r\n         </div>\r\n      <!-- Layout Configuration + Selection -->\r\n      <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\r\n        <div class=\"tw-space-y-2\">\r\n            <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Layout & Selection</div>\r\n            <!-- Selected toggle -->\r\n            <div class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-px-3 tw-py-2\">\r\n              <cide-ele-input\r\n                id=\"sytm_isselected\"\r\n                type=\"checkbox\"\r\n                label=\"Selected (Default)\"\r\n                  size=\"sm\"\r\n                formControlName=\"sytm_isselected\">\r\n              </cide-ele-input>\r\n              </div>\r\n            <div formGroupName=\"sytm_layout\" class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-divide-y tw-overflow-hidden\">\r\n              <!-- Sidebar -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_sidebar\">\r\n                <cide-ele-input id=\"layout_sidebar_status\" type=\"checkbox\" label=\"Sidebar\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n            </div>\r\n            <!-- Header -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_header\">\r\n                <cide-ele-input id=\"layout_header_status\" type=\"checkbox\" label=\"Header\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n              <!-- Footer -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_footer\">\r\n                <cide-ele-input id=\"layout_footer_status\" type=\"checkbox\" label=\"Footer\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n              <!-- Breadcrumb -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_breadcrumb\">\r\n                <cide-ele-input id=\"layout_breadcrumb_status\" type=\"checkbox\" label=\"Breadcrumb\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n              <!-- Console -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_console\">\r\n                <cide-ele-input id=\"layout_console_status\" type=\"checkbox\" label=\"Console\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n            </div>\r\n              <!-- Request -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_request\">\r\n                <cide-ele-input id=\"layout_request_status\" type=\"checkbox\" label=\"Request\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n            </div>\r\n            <p class=\"tw-text-xs tw-text-gray-500 tw-pt-1\">Toggle active sections. Only one theme can be selected as default. More options can be added here later.</p>\r\n        </div>\r\n        \r\n        <!-- Drawer Configuration -->\r\n        <div class=\"tw-space-y-2\">\r\n            <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n              <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Drawers</div>\r\n              <button cideEleButton type=\"button\" size=\"xs\" variant=\"outline\" (click)=\"addDrawer()\">\r\n                Add Drawer\r\n              </button>\r\n            </div>\r\n\r\n            <div formGroupName=\"sytm_layout\">\r\n              <div class=\"tw-space-y-2\" formArrayName=\"sytm_layout_drawer\">\r\n                <div *ngFor=\"let drawerGrp of drawerArray.controls; let i = index\" [formGroupName]=\"i\" class=\"tw-border tw-border-gray-200 tw-rounded-md tw-p-3 tw-flex tw-items-center tw-gap-3\">\r\n                  <cide-ele-input id=\"drawer_active_{{i}}\" type=\"checkbox\" label=\"Active\" size=\"sm\" formControlName=\"syth_status\"></cide-ele-input>\r\n                  <div class=\"tw-flex-1\">\r\n                <cide-ele-select\r\n                      id=\"drawer_config_{{i}}\"\r\n                      label=\"Drawer For\"\r\n                  size=\"sm\"\r\n                      [options]=\"drawerConfigOptions\"\r\n                      formControlName=\"syth_config_syco_for\">\r\n                </cide-ele-select>\r\n              </div>\r\n                  <button cideEleButton type=\"button\" size=\"xs\" variant=\"ghost\" (click)=\"removeDrawer(i)\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\r\n                  </button>\r\n            </div>\r\n                <p class=\"tw-text-xs tw-text-gray-500\">Configure multiple drawers as needed.</p>\r\n              </div>\r\n            </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Form Actions -->\r\n        <div class=\"tw-flex tw-flex-col tw-gap-2 tw-pt-4 tw-border-t tw-border-gray-200\">\r\n          <div class=\"tw-flex tw-items-center tw-justify-end tw-space-x-3\">\r\n            <button cideEleButton type=\"button\" variant=\"outline\" (click)=\"cancelForm()\" [disabled]=\"loading()\">Cancel</button>\r\n            <button cideEleButton type=\"submit\" variant=\"primary\" leftIcon=\"add\" [disabled]=\"!themeForm.valid || loading()\" [loading]=\"loading()\">\r\n          {{ isEditMode() ? 'Update Theme' : 'Create Theme' }}\r\n        </button>\r\n          </div>\r\n      </div>\r\n    </form>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Right: Theme gallery (40%) -->\r\n  <div class=\"tw-hidden lg:tw-flex tw-w-2/5 tw-flex-col\">\r\n    <!-- (Header consolidated above) -->\r\n\r\n    <!-- Gallery list -->\r\n    <div class=\"tw-flex-1 tw-overflow-auto tw-bg-gray-50\">\r\n      <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-p-4\">\r\n        @for (theme of filteredThemes(); track theme._id) {\r\n          <div class=\"tw-rounded-md tw-transition tw-cursor-pointer tw-relative\"\r\n               [ngClass]=\"theme.sytm_isselected\r\n                 ? 'tw-border tw-border-blue-500 tw-ring-2 tw-ring-blue-200 tw-bg-blue-50/50'\r\n                 : 'tw-bg-white tw-border tw-border-gray-200 hover:tw-shadow-sm'\"\r\n               (click)=\"editTheme(theme)\"\r\n               role=\"button\"\r\n               tabindex=\"0\"\r\n               [attr.aria-selected]=\"theme.sytm_isselected ? 'true' : 'false'\"\r\n               [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\"\r\n               (keydown.enter)=\"editTheme(theme)\"\r\n               (keydown.space)=\"$event.preventDefault(); editTheme(theme)\">\r\n\r\n            <!-- Selected badge -->\r\n            <div *ngIf=\"theme.sytm_isselected\"\r\n                 class=\"tw-absolute tw-top-2 tw-right-2 tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-full tw-bg-blue-600 tw-text-white\">\r\n              <cide-ele-icon class=\"tw-w-4 tw-h-4\">check</cide-ele-icon>\r\n            </div>\r\n \r\n            <div class=\"tw-aspect-[16/9] tw-bg-gray-100 tw-rounded-t-md tw-overflow-hidden tw-flex tw-items-center tw-justify-center\">\r\n              @if (theme.sytm_preview_id_fm) {\r\n                <img \r\n                  cideEleFileImage \r\n                  [fileId]=\"theme.sytm_preview_id_fm\" \r\n                  [altText]=\"'Theme Preview'\"\r\n                  class=\"tw-w-full tw-h-full tw-object-cover\" />\r\n              } @else {\r\n                <div class=\"tw-text-gray-400 tw-text-xs\">No preview</div>\r\n              }\r\n            </div>\r\n            <div class=\"tw-p-3 tw-space-y-1\">\r\n              <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"theme.sytm_title\">{{ theme.sytm_title || 'Untitled Theme' }}</div>\r\n              <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"theme.sytm_theme_code\">{{ theme.sytm_theme_code }}</div>\r\n              <div class=\"tw-flex tw-items-center tw-justify-between tw-pt-1\">\r\n                <span class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs\" [ngClass]=\"theme.sytm_isactive ? 'tw-text-green-700' : 'tw-text-red-700'\">\r\n                  <span class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full\" [ngClass]=\"theme.sytm_isactive ? 'tw-bg-green-500' : 'tw-bg-red-500'\"></span>\r\n                  {{ theme.sytm_isactive ? 'Active' : 'Inactive' }}\r\n                </span>\r\n                <div class=\"tw-flex tw-items-center tw-gap-1\">\r\n                  <!-- Set Selected Button - Clear and Simple -->\r\n                  @if (theme.sytm_isselected) {\r\n                    <span class=\"tw-inline-flex tw-items-center tw-gap-1 tw-px-2 tw-py-1 tw-bg-green-100 tw-text-green-800 tw-rounded-md tw-text-xs tw-font-medium\">\r\n                      <cide-ele-icon class=\"tw-w-3 tw-h-3\">check</cide-ele-icon>\r\n                      Selected\r\n                    </span>\r\n                  } @else {\r\n                    <button cideEleButton \r\n                            variant=\"outline\" \r\n                            size=\"xs\"\r\n                            (click)=\"$event.stopPropagation(); setSelectedTheme(theme)\"\r\n                            [attr.aria-label]=\"'Select ' + (theme.sytm_title || theme.sytm_theme_code) + ' theme'\"\r\n                            class=\"tw-text-xs\">\r\n                      Select\r\n                    </button>\r\n                  }\r\n                  <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); editTheme(theme)\"\r\n                          [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">edit</cide-ele-icon>\r\n                  </button>\r\n                  <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); deleteTheme(theme)\"\r\n                          [attr.aria-label]=\"'Delete theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        @if (!loading() && filteredThemes().length === 0) {\r\n          <div class=\"tw-col-span-full tw-text-center tw-text-xs tw-text-gray-500 tw-py-8\">No themes found</div>\r\n        }\r\n  </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- \r\n  Angular Template References for Grid Renderers (Best Practice)\r\n  \r\n  These ng-template elements represent the Angular best practice for custom rendering.\r\n  They provide:\r\n  - Type safety with template context\r\n  - Component lifecycle integration\r\n  - Change detection optimization\r\n  - Proper event handling\r\n  - Accessibility features\r\n  \r\n  Note: Current data grid uses string renderers for compatibility.\r\n  Templates are maintained for future component enhancement.\r\n-->\r\n\r\n<!-- Theme Details Renderer Template -->\r\n<ng-template #themeDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n    <!-- Theme Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      <cide-ele-icon \r\n        class=\"tw-text-purple-600\" \r\n        size=\"xs\">\r\n        palette\r\n      </cide-ele-icon>\r\n    </div>\r\n    \r\n    <!-- Theme Details -->\r\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \r\n           [title]=\"row.sytm_title\">\r\n        {{ row.sytm_title || 'Untitled' }}\r\n      </div>\r\n      @if (row.sytm_desc) {\r\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \r\n             [title]=\"row.sytm_desc\">\r\n          {{ row.sytm_desc }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Theme Status Renderer Template -->\r\n<ng-template #themeStatusRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\r\n        [ngClass]=\"row.sytm_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\r\n    {{ row.sytm_isactive ? 'Active' : 'Inactive' }}\r\n  </span>\r\n</ng-template>\r\n\r\n<!-- Actions Dropdown Renderer Template -->\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <cide-ele-dropdown \r\n    [items]=\"getActionDropdownItems(row)\"\r\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template> " }]
         }] });
 
 var pageTheme_component = /*#__PURE__*/Object.freeze({
@@ -11005,11 +11091,13 @@ class CideCoreUserCreateComponent {
     // Dependency injection
     destroyRef = inject(DestroyRef);
     fb = inject(FormBuilder);
+    cdr = inject(ChangeDetectorRef);
     userMasterService = inject(CideCoreUserMasterService);
     entityService = inject(CideCoreEntityManagementService);
     designationService = inject(CideCoreDesignationManagementService);
     departmentService = inject(CideCoreDepartmentManagementService);
     CideCoreGeneralMasterService = inject(CideCoreGeneralMasterService);
+    generalMasterTypeService = inject(CideCoreGeneralMasterTypeService);
     pinCodeService = inject(CideCorePinCodeService);
     countryService = inject(CideCoreCountryService);
     userRoleService = inject(CideCoreUserRoleService);
@@ -11017,10 +11105,12 @@ class CideCoreUserCreateComponent {
     router = inject(Router);
     route = inject(ActivatedRoute);
     appState = inject(AppStateHelperService);
+    floatingUploadService = inject(CideLytFloatingUploadService);
     userMasterForm;
     activeTab = signal('basic', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    success = signal(null, ...(ngDevMode ? [{ debugName: "success" }] : []));
     // User information from route
     userId = signal('', ...(ngDevMode ? [{ debugName: "userId" }] : []));
     isEditMode = signal(false, ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
@@ -11032,6 +11122,92 @@ class CideCoreUserCreateComponent {
     familyDetails = signal([], ...(ngDevMode ? [{ debugName: "familyDetails" }] : []));
     entityMappings = signal([], ...(ngDevMode ? [{ debugName: "entityMappings" }] : []));
     menuRightsMap = signal({}, ...(ngDevMode ? [{ debugName: "menuRightsMap" }] : []));
+    // User rights management
+    userRightsTypeId = signal(null, ...(ngDevMode ? [{ debugName: "userRightsTypeId" }] : []));
+    permissions = signal([], ...(ngDevMode ? [{ debugName: "permissions" }] : []));
+    // Template helpers
+    Object = Object;
+    /**
+     * Get address type label for header display
+     */
+    getAddressTypeLabel(addressIndex) {
+        const addressTypeId = this.contactAddressesFormArray.at(addressIndex)?.get('sycad_address_type_id_sygms')?.value;
+        if (addressTypeId) {
+            const addressType = this.addressTypeOptions().find(option => option._id === addressTypeId);
+            return addressType?.sygms_title || 'Address';
+        }
+        return 'Address';
+    }
+    /**
+     * Handle address type change to update header
+     */
+    onAddressTypeChange(addressIndex) {
+        // This method is called when address type changes to trigger header update
+        // The header will automatically update due to change detection
+    }
+    /**
+     * Get document type label for header display
+     */
+    getDocumentTypeLabel(documentIndex) {
+        const documentTypeId = this.documentsFormArray.at(documentIndex)?.get('syusd_document_type_id_sygms')?.value;
+        if (documentTypeId) {
+            const documentType = this.documentTypeOptions().find(option => option._id === documentTypeId);
+            return documentType?.sygms_title || 'Document';
+        }
+        return 'Document';
+    }
+    /**
+     * Handle document type change to update header
+     */
+    onDocumentTypeChange(documentIndex) {
+        // This method is called when document type changes to trigger header update
+        // The header will automatically update due to change detection
+    }
+    /**
+     * Handle document files selection
+     */
+    onDocumentFilesSelected(event, documentIndex) {
+        const target = event.target;
+        const files = target.files;
+        if (!files || files.length === 0)
+            return;
+        console.log(`📎 Files selected for document ${documentIndex}:`, files);
+        // Store files in the document form group or handle upload logic here
+        const documentFormGroup = this.documentsFormArray.at(documentIndex);
+        if (documentFormGroup) {
+            // You can store the files in a custom property or handle upload immediately
+            // For now, we'll store them in a custom property for display
+            const existingFiles = this.getDocumentFiles(documentIndex);
+            const newFiles = Array.from(files);
+            const allFiles = [...existingFiles, ...newFiles];
+            // Store files in the form group's custom property
+            documentFormGroup._uploadedFiles = allFiles;
+            console.log(`📎 Total files for document ${documentIndex}:`, allFiles.length);
+        }
+    }
+    /**
+     * Get document group ID
+     */
+    getDocumentGroupId(documentIndex) {
+        const documentFormGroup = this.documentsFormArray.at(documentIndex);
+        return documentFormGroup?.get('syusd_photo_group_id_cyfm')?.value || '';
+    }
+    /**
+     * Get uploaded files for a document (legacy method for backward compatibility)
+     */
+    getDocumentFiles(documentIndex) {
+        // For multiple file upload with group ID, we don't track individual files
+        // Return empty array since files are managed by group ID
+        return [];
+    }
+    /**
+     * Remove a file from document (legacy method for backward compatibility)
+     */
+    removeDocumentFile(documentIndex, fileName) {
+        // For multiple file upload with group ID, individual file removal is not supported
+        // Files are managed as a group on the server
+        console.log(`📎 Individual file removal not supported for group uploads. Document ${documentIndex}, File: ${fileName}`);
+    }
     constructor() {
         this.userMasterForm = this.fb.group({
             // Basic User Information from auth_user_mst table
@@ -11093,7 +11269,8 @@ class CideCoreUserCreateComponent {
             syenm_activeupto: [''],
             syenm_isdefault: [false],
             syenm_isactive: [true],
-            syenm_isloggedin: [true]
+            syenm_isloggedin: [true],
+            exceptions: this.fb.array([]) // Add exceptions FormArray
         });
     }
     // Helper method to create contact address FormGroup
@@ -11116,20 +11293,22 @@ class CideCoreUserCreateComponent {
     }
     // Helper method to create document FormGroup
     createDocumentFormGroup() {
-        return this.fb.group({
+        const formGroup = this.fb.group({
             _id: [''],
+            syusd_user_id_user: [''],
             syusd_document_type_id_sygms: [''],
             syusd_doc_number: [''],
             syusd_doc_name_as_per_doc: [''],
-            syusd_photo_group_id_cyfm: [''],
             syusd_doc_issue_date: [''],
             syusd_doc_expiry_date: [''],
+            syusd_photo_group_id_cyfm: [''],
             syusd_doc_verification_status_id_sygms: [''],
-            syusd_document_kyc_status_id_sygms: [''],
-            syusd_document_file_id_cyfm: [''],
-            syusd_document_remarks: [''],
+            syusd_doc_kyc_status_id_sygms: [''],
             syusd_isactive: [true]
         });
+        // Initialize file storage for this document
+        formGroup._uploadedFiles = [];
+        return formGroup;
     }
     // Helper method to create family detail FormGroup
     createFamilyDetailFormGroup() {
@@ -11213,7 +11392,7 @@ class CideCoreUserCreateComponent {
     }
     // Handle search change from the select component with debouncing
     onUserSearchChange(searchEvent, familyIndex) {
-        const query = searchEvent?.query || searchEvent || '';
+        const query = searchEvent?.query;
         // Clear existing debounce timer for this family member
         if (this.searchDebounceTimers[familyIndex]) {
             clearTimeout(this.searchDebounceTimers[familyIndex]);
@@ -11239,7 +11418,7 @@ class CideCoreUserCreateComponent {
     }
     // Handle user selection change in the form
     onUserSelectionChange(event, familyIndex) {
-        const selectedUserId = event?.value || event;
+        const selectedUserId = event?._id;
         if (selectedUserId) {
             // Find the selected user from the results for this specific family member
             const userResults = this.userSearchResults()[familyIndex] || [];
@@ -11258,26 +11437,124 @@ class CideCoreUserCreateComponent {
     designationOptions = signal({}, ...(ngDevMode ? [{ debugName: "designationOptions" }] : []));
     departmentOptions = signal({}, ...(ngDevMode ? [{ debugName: "departmentOptions" }] : []));
     menuOptions = signal([], ...(ngDevMode ? [{ debugName: "menuOptions" }] : []));
-    permissionOptions = signal([], ...(ngDevMode ? [{ debugName: "permissionOptions" }] : []));
-    entityRoleMap = signal({}, ...(ngDevMode ? [{ debugName: "entityRoleMap" }] : []));
     // Role permissions grid properties
     rolePermissionsGridConfig = signal({
-        id: 'role-permissions-grid',
-        columns: [],
+        id: 'menu-list-grid',
+        title: '',
+        subtitle: '',
+        columns: [
+            {
+                key: 'details',
+                header: 'Menu Item',
+                type: 'custom',
+                width: 'auto',
+                truncate: true,
+                align: 'left',
+                renderer: 'menuDetailsRenderer'
+            },
+            {
+                key: 'syme_type',
+                header: 'Type',
+                type: 'custom',
+                width: '120px',
+                truncate: false,
+                align: 'center',
+                renderer: 'menuTypeRenderer'
+            },
+            {
+                key: 'syme_path',
+                header: 'Path',
+                type: 'text',
+                width: '200px',
+                truncate: true,
+                align: 'left'
+            },
+            {
+                key: 'syme_isactive',
+                header: 'Status',
+                type: 'status',
+                width: '100px',
+                truncate: false,
+                align: 'center',
+                statusConfig: {
+                    activeValue: true,
+                    activeLabel: 'Active',
+                    inactiveLabel: 'Inactive',
+                    activeClass: 'tw-bg-green-100 tw-text-green-800',
+                    inactiveClass: 'tw-bg-red-100 tw-text-red-800'
+                }
+            },
+            {
+                key: 'syme_permissions_id_sygms',
+                header: 'Permissions',
+                type: 'custom',
+                width: '200px',
+                truncate: true,
+                align: 'left',
+                renderer: 'permissionsRenderer'
+            },
+            {
+                key: 'actions',
+                header: '',
+                type: 'custom',
+                width: '60px',
+                truncate: false,
+                align: 'center',
+                renderer: 'actionsDropdownRenderer'
+            }
+        ],
         data: [],
-        pagination: { enabled: false, pageSize: 10, pageSizeOptions: [10, 25, 50, 100], showQuickJump: true, showPageInfo: true, showRefresh: true },
-        search: { enabled: true, placeholder: 'Search...', searchableColumns: [], debounceMs: 300 },
-        loading: { useDefer: false, skeletonRows: 5, showOverlay: false },
-        scroll: { enabled: true, maxHeight: '400px', minHeight: '200px', stickyHeader: true, virtualScroll: false, rowHeight: 25 },
-        dragDrop: { enabled: false, orderField: '', dragClass: '', dropClass: '' },
+        trackBy: '_id',
+        pagination: {
+            enabled: false,
+            pageSize: 10,
+            pageSizeOptions: [10, 25, 50, 100],
+            showQuickJump: true,
+            showPageInfo: true,
+            showRefresh: true
+        },
+        search: {
+            enabled: true,
+            placeholder: 'Search menu items...',
+            searchableColumns: ['syme_title', 'syme_desc', 'syme_path'],
+            debounceMs: 300
+        },
+        loading: {
+            useDefer: true,
+            skeletonRows: 5,
+            showOverlay: false
+        },
+        scroll: {
+            enabled: true,
+            maxHeight: '',
+            minHeight: '',
+            stickyHeader: true,
+            virtualScroll: false,
+            rowHeight: 50
+        },
+        dragDrop: {
+            enabled: true,
+            orderField: 'syme_order_by',
+            dragClass: 'tw-opacity-50 tw-bg-blue-50',
+            dropClass: 'tw-bg-green-50'
+        },
         responsive: true,
         striped: false,
         bordered: true,
         compact: false,
-        tableClass: '',
-        tree: { enabled: true, primaryKey: '_id', foreignKey: 'syme_parent_id_syme' }
+        tableClass: 'tw-table-fixed tw-w-full tw-rounded-none',
+        onRefresh: 'onMenuItemRefresh',
+        onRowReorder: 'onRowReorder',
+        tree: {
+            enabled: true,
+            primaryKey: '_id',
+            foreignKey: 'syme_id_syme',
+            childrenKey: 'children',
+            levelKey: 'level',
+            expandedKey: 'isExpanded',
+            hasChildrenKey: 'hasChildren'
+        }
     }, ...(ngDevMode ? [{ debugName: "rolePermissionsGridConfig" }] : []));
-    selectedRolePermissions = signal([], ...(ngDevMode ? [{ debugName: "selectedRolePermissions" }] : []));
     selectedRoleId = signal(null, ...(ngDevMode ? [{ debugName: "selectedRoleId" }] : []));
     selectedEntityIndex = signal(null, ...(ngDevMode ? [{ debugName: "selectedEntityIndex" }] : []));
     // Template renderers for role permissions grid
@@ -11285,6 +11562,7 @@ class CideCoreUserCreateComponent {
     permissionsCheckboxRendererTemplate = viewChild('permissionsCheckboxRendererTemplate', ...(ngDevMode ? [{ debugName: "permissionsCheckboxRendererTemplate" }] : []));
     menuTypeRendererTemplate = viewChild('menuTypeRendererTemplate', ...(ngDevMode ? [{ debugName: "menuTypeRendererTemplate" }] : []));
     menuRightsPermissionsRendererTemplate = viewChild('menuRightsPermissionsRendererTemplate', ...(ngDevMode ? [{ debugName: "menuRightsPermissionsRendererTemplate" }] : []));
+    permissionsRendererTemplate = viewChild('permissionsRendererTemplate', ...(ngDevMode ? [{ debugName: "permissionsRendererTemplate" }] : []));
     addressTypeOptions = signal([], ...(ngDevMode ? [{ debugName: "addressTypeOptions" }] : []));
     // Document and Family dropdown options
     documentTypeOptions = signal([], ...(ngDevMode ? [{ debugName: "documentTypeOptions" }] : []));
@@ -11327,12 +11605,25 @@ class CideCoreUserCreateComponent {
             }
             // Always load dropdown options
             this.loadDropdownOptions();
+            this.loadUserRightsTypeId(); // Load user rights type and permissions
             this.setupFormSubscriptions();
             this.setEntityIdFromAppState();
+            // Set up floating uploader with current user ID
+            this.setupFloatingUploader();
             // Load initial users for family member selection
             this.loadInitialUsers();
         });
     }
+    /**
+     * Setup floating uploader with current user ID
+     */
+    setupFloatingUploader() {
+        // Get current user ID from app state or use a default
+        const currentUser = this.appState.getCurrentUser();
+        const currentUserId = currentUser?._id || 'current-user';
+        this.floatingUploadService.setCurrentUserId(currentUserId);
+        console.log('🚀 [UserCreate] Floating uploader setup with user ID:', currentUserId);
+    }
     /**
      * Setup form subscriptions
      */
@@ -11541,9 +11832,42 @@ class CideCoreUserCreateComponent {
                 mappingGroup.get('syenm_entity_id_syen')?.disable();
                 entityMappingFormArray.push(mappingGroup);
             });
+            // Load role permissions for each mapping that has a role selected
+            data.core_entity_mapping.forEach((mapping, index) => {
+                if (mapping.syenm_role_id_syusrol) {
+                    const roleId = typeof mapping.syenm_role_id_syusrol === 'object'
+                        ? mapping.syenm_role_id_syusrol._id
+                        : mapping.syenm_role_id_syusrol;
+                    if (roleId) {
+                        console.log(`🎭 Loading role permissions for mapping ${index} with role ${roleId}`);
+                        this.loadRolePermissions(roleId, index);
+                    }
+                }
+            });
         }
-        if (data.menu_rights) {
-            this.menuRightsMap.set(data.menu_rights);
+        // Handle existing role exceptions
+        if (data.core_user_role_exceptions && Array.isArray(data.core_user_role_exceptions)) {
+            console.log('🎭 Loading existing role exceptions:', data.core_user_role_exceptions);
+            // Group exceptions by mapping index
+            const exceptionsByMapping = {};
+            data.core_user_role_exceptions.forEach((exception) => {
+                // Find the mapping index for this exception
+                const mappingIndex = this.findMappingIndexByEntityMappingId(exception.syusrex_user_entity_mapping_id_syenm || '');
+                if (mappingIndex !== null) {
+                    if (!exceptionsByMapping[mappingIndex.toString()]) {
+                        exceptionsByMapping[mappingIndex.toString()] = [];
+                    }
+                    exceptionsByMapping[mappingIndex.toString()].push(exception);
+                }
+            });
+            // Add exceptions to each mapping
+            Object.keys(exceptionsByMapping).forEach(mappingIndexStr => {
+                const mappingIndex = parseInt(mappingIndexStr);
+                const mapping = this.entityMappings()[mappingIndex];
+                if (mapping) {
+                    mapping.exceptions = exceptionsByMapping[mappingIndexStr];
+                }
+            });
         }
         if (data.core_user_contact_addresses) {
             this.contactAddresses.set(data.core_user_contact_addresses);
@@ -11578,6 +11902,7 @@ class CideCoreUserCreateComponent {
                 const documentGroup = this.createDocumentFormGroup();
                 documentGroup.patchValue({
                     _id: document._id || '',
+                    syusd_user_id_user: this.appState.getUserId() || '',
                     syusd_document_type_id_sygms: document.syusd_document_type_id_sygms?._id || '',
                     syusd_doc_number: document.syusd_doc_number || '',
                     syusd_doc_name_as_per_doc: document.syusd_doc_name_as_per_doc || '',
@@ -11585,9 +11910,7 @@ class CideCoreUserCreateComponent {
                     syusd_doc_issue_date: document.syusd_doc_issue_date || '',
                     syusd_doc_expiry_date: document.syusd_doc_expiry_date || '',
                     syusd_doc_verification_status_id_sygms: document.syusd_doc_verification_status_id_sygms?._id || '',
-                    syusd_document_kyc_status_id_sygms: document.syusd_document_kyc_status_id_sygms?._id || '',
-                    syusd_document_file_id_cyfm: document.syusd_document_file_id_cyfm || '',
-                    syusd_document_remarks: document.syusd_document_remarks || '',
+                    syusd_doc_kyc_status_id_sygms: document.syusd_doc_kyc_status_id_sygms?._id || '',
                     syusd_isactive: document.syusd_isactive ?? true
                 });
                 this.documentsFormArray.push(documentGroup);
@@ -11643,25 +11966,8 @@ class CideCoreUserCreateComponent {
         this.loadDocumentKycStatus();
         this.loadBloodGroups();
         this.loadRelationshipOptions();
-        // Load menu options (simulated data)
-        this.menuOptions.set([
-            { value: 'user-management', label: 'User Management', menu_code: 'USRMGT' },
-            { value: 'entity-management', label: 'Entity Management', menu_code: 'ENTMGT' },
-            { value: 'role-management', label: 'Role Management', menu_code: 'ROLMGT' },
-            { value: 'reports', label: 'Reports', menu_code: 'RPTS' },
-            { value: 'settings', label: 'Settings', menu_code: 'STGS' },
-            { value: 'dashboard', label: 'Dashboard', menu_code: 'DASH' },
-            { value: 'file-manager', label: 'File Manager', menu_code: 'FMGR' }
-        ]);
-        // Load permission options (simulated data)
-        this.permissionOptions.set([
-            { value: 'create', label: 'Create' },
-            { value: 'read', label: 'Read' },
-            { value: 'update', label: 'Update' },
-            { value: 'delete', label: 'Delete' },
-            { value: 'approve', label: 'Approve' },
-            { value: 'reject', label: 'Reject' }
-        ]);
+        // Load menu options from API
+        this.loadMenuOptions();
     }
     relationshipOptions() {
         return this.relationshipOptionsData();
@@ -11727,6 +12033,12 @@ class CideCoreUserCreateComponent {
         }
         // Trigger change detection to update other entity dropdowns
         this.triggerEntityDropdownUpdate();
+        // Automatically load menu rights when both entity and role are selected
+        const mapping = this.entityMappings()[mappingIndex];
+        if (mapping?.syenm_entity_id_syen && mapping?.syenm_role_id_syusrol) {
+            console.log(`🚀 Auto-loading menu rights for mapping ${mappingIndex}`);
+            this.loadMenuRights(mappingIndex);
+        }
         // For now, we'll use all available roles
         // In a real implementation, you'd filter roles based on the entity
     }
@@ -11981,10 +12293,9 @@ class CideCoreUserCreateComponent {
      */
     initializeRolePermissionsGrid() {
         this.rolePermissionsGridConfig.set({
-            id: 'role-permissions-grid',
-            title: 'Role Permissions',
-            subtitle: 'Select permissions for the chosen role',
-            fullHeight: true,
+            id: 'menu-list-grid',
+            title: '',
+            subtitle: '',
             columns: [
                 {
                     key: 'details',
@@ -12004,14 +12315,46 @@ class CideCoreUserCreateComponent {
                     align: 'center',
                     renderer: 'menuTypeRenderer'
                 },
+                {
+                    key: 'syme_path',
+                    header: 'Path',
+                    type: 'text',
+                    width: '200px',
+                    truncate: true,
+                    align: 'left'
+                },
+                {
+                    key: 'syme_isactive',
+                    header: 'Status',
+                    type: 'status',
+                    width: '100px',
+                    truncate: false,
+                    align: 'center',
+                    statusConfig: {
+                        activeValue: true,
+                        activeLabel: 'Active',
+                        inactiveLabel: 'Inactive',
+                        activeClass: 'tw-bg-green-100 tw-text-green-800',
+                        inactiveClass: 'tw-bg-red-100 tw-text-red-800'
+                    }
+                },
                 {
                     key: 'syme_permissions_id_sygms',
-                    header: 'Available Permissions',
+                    header: 'Permissions',
                     type: 'custom',
-                    width: '300px',
-                    truncate: false,
+                    width: '200px',
+                    truncate: true,
                     align: 'left',
-                    renderer: 'permissionsCheckboxRenderer'
+                    renderer: 'permissionsRenderer'
+                },
+                {
+                    key: 'actions',
+                    header: '',
+                    type: 'custom',
+                    width: '60px',
+                    truncate: false,
+                    align: 'center',
+                    renderer: 'actionsDropdownRenderer'
                 }
             ],
             data: [],
@@ -12031,20 +12374,20 @@ class CideCoreUserCreateComponent {
                 debounceMs: 300
             },
             loading: {
-                useDefer: false,
+                useDefer: true,
                 skeletonRows: 5,
                 showOverlay: false
             },
             scroll: {
                 enabled: true,
-                maxHeight: '400px',
-                minHeight: '200px',
+                maxHeight: '',
+                minHeight: '',
                 stickyHeader: true,
                 virtualScroll: false,
-                rowHeight: 25
+                rowHeight: 50
             },
             dragDrop: {
-                enabled: false,
+                enabled: true,
                 orderField: 'syme_order_by',
                 dragClass: 'tw-opacity-50 tw-bg-blue-50',
                 dropClass: 'tw-bg-green-50'
@@ -12054,10 +12397,16 @@ class CideCoreUserCreateComponent {
             bordered: true,
             compact: false,
             tableClass: 'tw-table-fixed tw-w-full tw-rounded-none',
+            onRefresh: 'onMenuItemRefresh',
+            onRowReorder: 'onRowReorder',
             tree: {
                 enabled: true,
                 primaryKey: '_id',
-                foreignKey: 'syme_parent_id_syme'
+                foreignKey: 'syme_id_syme',
+                childrenKey: 'children',
+                levelKey: 'level',
+                expandedKey: 'isExpanded',
+                hasChildrenKey: 'hasChildren'
             }
         });
     }
@@ -12073,12 +12422,22 @@ class CideCoreUserCreateComponent {
         this.selectedEntityIndex.set(mappingIndex);
         this.selectedRoleId.set(roleId);
         // Load role details and permissions
-        this.loadRolePermissions(roleId);
+        this.loadRolePermissions(roleId, mappingIndex);
+        // Automatically load menu rights when both entity and role are selected
+        const mapping = this.entityMappings()[mappingIndex];
+        if (mapping?.syenm_entity_id_syen && mapping?.syenm_role_id_syusrol) {
+            console.log(`🚀 Auto-loading menu rights for mapping ${mappingIndex}`);
+            this.loadMenuRights(mappingIndex);
+            // Force refresh the grid to show updated permission states
+            setTimeout(() => {
+                this.cdr.detectChanges();
+            }, 100);
+        }
     }
     /**
      * Load role permissions from API
      */
-    loadRolePermissions(roleId) {
+    loadRolePermissions(roleId, mappingIndex) {
         console.log(`🎭 Loading permissions for role:`, roleId);
         this.loading.set(true);
         // Load role details by ID
@@ -12086,8 +12445,8 @@ class CideCoreUserCreateComponent {
             next: (response) => {
                 if (response?.success && response.data) {
                     console.log(`🎭 Role details loaded:`, response.data);
-                    // Load menus and permissions for the role
-                    this.loadMenusAndPermissionsForRole(response.data);
+                    // Store role permissions for simple lookup
+                    this.storeRolePermissions(response.data, mappingIndex);
                 }
                 else {
                     console.error(`❌ Failed to load role details:`, response);
@@ -12103,119 +12462,109 @@ class CideCoreUserCreateComponent {
         });
     }
     /**
-     * Load menus and permissions for the selected role
-     */
-    loadMenusAndPermissionsForRole(roleData) {
-        console.log(`🎭 Loading menus and permissions for role:`, roleData);
-        // Load menus from API
-        this.loadMenusFromAPI().then(() => {
-            // Load permissions from general master
-            this.loadPermissionsFromAPI().then(() => {
-                // Build the tree structure with role permissions
-                this.buildRolePermissionsTree(roleData);
-            });
-        });
-    }
-    /**
-     * Load menus from API
+     * Update permission values for a specific menu row
      */
-    loadMenusFromAPI() {
-        return new Promise((resolve, reject) => {
-            if (!this.menuService) {
-                console.error('❌ MenuService is not available');
-                reject('MenuService not available');
-                return;
-            }
-            const requestBody = {
-                pagination: false,
-                sort: { order: 'asc', key: 'syme_order_by' }
-            };
-            this.menuService.getMenuList(requestBody).subscribe({
-                next: (response) => {
-                    if (response?.success) {
-                        console.log(`🎭 Menus loaded:`, response.data);
-                        this.menuOptions.set(response.data || []);
-                        resolve();
-                    }
-                    else {
-                        console.error(`❌ Failed to load menus:`, response);
-                        reject('Failed to load menus');
+    updateMenuPermissionValues(mappingIndex, menuId) {
+        this.menuRightsMap.update(map => {
+            const newMap = { ...map };
+            const menuRights = newMap[mappingIndex.toString()] || [];
+            const updatedMenuRights = menuRights.map(menu => {
+                if (menu._id === menuId) {
+                    // Re-compute permission values for this menu
+                    const permissionValues = {};
+                    if (menu.syme_permissions_id_sygms) {
+                        menu.syme_permissions_id_sygms.forEach(permissionId => {
+                            const permission = this.getPermissionById(permissionId);
+                            if (permission) {
+                                permissionValues[permissionId] = {
+                                    checked: this.getFormControlValue(menu, permissionId),
+                                    permission: permission
+                                };
+                            }
+                        });
                     }
-                },
-                error: (error) => {
-                    console.error(`❌ Error loading menus:`, error);
-                    reject(error);
+                    return {
+                        ...menu,
+                        _permissionValues: permissionValues
+                    };
                 }
+                return menu;
             });
+            newMap[mappingIndex.toString()] = updatedMenuRights;
+            return newMap;
         });
     }
     /**
-     * Load permissions from API
+     * Store role permissions for simple lookup
      */
-    loadPermissionsFromAPI() {
-        return new Promise((resolve, reject) => {
-            // Load permissions from general master
-            this.CideCoreGeneralMasterService.generalMasterList$.subscribe({
-                next: (response) => {
-                    if (response?.success) {
-                        console.log(`🎭 Permissions loaded:`, response.data);
-                        this.permissionOptions.set(response.data || []);
-                        resolve();
-                    }
-                    else {
-                        console.error(`❌ Failed to load permissions:`, response);
-                        reject('Failed to load permissions');
+    storeRolePermissions(roleData, mappingIndex) {
+        console.log(`🎭 Storing role permissions for mapping ${mappingIndex}:`, roleData);
+        // Extract role permissions from the role data
+        const roleRights = roleData.core_user_role_rights;
+        if (roleRights && Array.isArray(roleRights)) {
+            // Store role permissions as objects with ID and title
+            const rolePermissionObjects = roleRights.map((right) => {
+                const permission = right.syusrgt_role_permissions_id_sygms;
+                return {
+                    _id: permission?._id,
+                    sygms_title: permission?.sygms_title,
+                    menu_id: right.syusrgt_menu_id_syme?._id
+                };
+            }).filter((permission) => permission._id && permission.sygms_title);
+            // Update menuRightsMap with role permissions for each menu
+            this.menuRightsMap.update(menuMap => {
+                const newMenuMap = { ...menuMap };
+                const currentMenuRights = newMenuMap[mappingIndex.toString()] || [];
+                // Update each menu with its role permissions
+                const updatedMenuRights = currentMenuRights.map(menu => {
+                    if (menu._id) {
+                        const menuSpecificPermissions = rolePermissionObjects
+                            .filter(permission => 
+                        // Permission must be in the menu's allowed permissions list
+                        menu.syme_permissions_id_sygms?.includes(permission._id) &&
+                            // AND must be assigned to this menu in the role data
+                            permission.menu_id === menu._id);
+                        return {
+                            ...menu,
+                            _rolePermissions: menuSpecificPermissions
+                        };
                     }
-                },
-                error: (error) => {
-                    console.error(`❌ Error loading permissions:`, error);
-                    reject(error);
+                    return menu;
+                });
+                newMenuMap[mappingIndex.toString()] = updatedMenuRights;
+                return newMenuMap;
+            });
+            // Update permission values for all menus in this mapping
+            const menuRights = this.menuRightsMap()[mappingIndex.toString()] || [];
+            menuRights.forEach(menu => {
+                if (menu._id) {
+                    this.updateMenuPermissionValues(mappingIndex, menu._id);
                 }
             });
-        });
+            console.log(`🎭 Stored role permission objects for mapping ${mappingIndex}:`, rolePermissionObjects);
+        }
+        else {
+            console.log(`🎭 No role permissions found in role data`);
+        }
     }
     /**
-     * Build role permissions tree structure
-     */
-    buildRolePermissionsTree(roleData) {
-        console.log(`🎭 Building permissions tree for role:`, roleData);
-        const menus = this.menuOptions();
-        const permissions = this.permissionOptions();
-        // Create a map of role permissions for quick lookup
-        const rolePermissionsMap = new Map();
-        if (roleData.roleRights && Array.isArray(roleData.roleRights)) {
-            roleData.roleRights.forEach((right) => {
-                const key = `${right.syusrgt_menu_id_syme}_${right.syusrgt_role_permissions_id_sygms}`;
-                rolePermissionsMap.set(key, right);
-            });
-        }
-        // Build tree structure with permissions
-        const treeData = menus.map(menu => ({
-            ...menu,
-            permissions: permissions.map(permission => ({
-                ...permission,
-                isSelected: rolePermissionsMap.has(`${menu._id}_${permission._id}`)
-            }))
-        }));
-        console.log(`🎭 Tree data built:`, treeData);
-        this.selectedRolePermissions.set(treeData);
-        // Update grid data
-        this.rolePermissionsGridConfig.update(config => ({
-            ...config,
-            data: treeData
-        }));
-    }
-    /**
-     * Clear role permissions
+     * Clear role permissions
      */
     clearRolePermissions() {
-        this.selectedRolePermissions.set([]);
         this.selectedRoleId.set(null);
         this.selectedEntityIndex.set(null);
-        this.rolePermissionsGridConfig.update(config => ({
-            ...config,
-            data: []
-        }));
+    }
+    /**
+     * Find mapping index by entity mapping ID
+     */
+    findMappingIndexByEntityMappingId(entityMappingId) {
+        const mappings = this.entityMappings();
+        for (let i = 0; i < mappings.length; i++) {
+            if (mappings[i]._id === entityMappingId) {
+                return i;
+            }
+        }
+        return null;
     }
     /**
      * Handle grid events for role permissions
@@ -12247,20 +12596,272 @@ class CideCoreUserCreateComponent {
      * Get permission by ID
      */
     getPermissionById(permissionId) {
-        return this.permissionOptions().find(permission => permission._id === permissionId);
+        return this.permissions().find(permission => permission._id === permissionId);
     }
     /**
-     * Check if permission is selected for a menu
+     * Check if permission is available in the selected role for a specific menu
      */
-    isPermissionSelected(menuId, permissionId) {
-        const rolePermissions = this.selectedRolePermissions();
-        const menu = rolePermissions.find(m => m._id === menuId);
-        if (menu && menu.permissions) {
-            const permission = menu.permissions.find((p) => p._id === permissionId);
-            return permission ? permission.isSelected : false;
+    isPermissionInRole(permissionId, mappingIndex, menuId) {
+        const mapping = this.entityMappings()[mappingIndex];
+        const roleId = mapping?.syenm_role_id_syusrol;
+        console.log(`🎭 Checking permission ${permissionId} for role:`, roleId, 'menu:', menuId);
+        if (!roleId || !menuId) {
+            console.log(`🎭 No role ID or menu ID found for mapping ${mappingIndex}`);
+            return false;
         }
+        // Get role permissions from the menu objects in menuRightsMap
+        const menuRights = this.menuRightsMap()[mappingIndex.toString()] || [];
+        const menu = menuRights.find(m => m._id === menuId);
+        if (menu && menu._rolePermissions) {
+            const rolePermissions = menu._rolePermissions;
+            const isInRole = rolePermissions.some((permission) => permission._id === permissionId && permission.menu_id === menuId);
+            console.log(`🎭 Permission ${permissionId} in role for menu ${menuId}: ${isInRole}`);
+            return isInRole;
+        }
+        console.log(`🎭 No role permissions found for mapping ${mappingIndex}, menu ${menuId}`);
         return false;
     }
+    /**
+     * Get form control value for a permission
+     */
+    getFormControlValue(row, permissionId) {
+        console.log(`🎭 Getting form control value for permission: ${permissionId} for menu: ${row.syme_title}`, row);
+        const permission = this.getPermissionById(permissionId);
+        if (!permission) {
+            console.log(`🎭 Permission not found for ID: ${permissionId}`);
+            return false;
+        }
+        // Find the current mapping index
+        const mappingIndex = this.getCurrentMappingIndex();
+        if (mappingIndex === null) {
+            console.log(`🎭 No current mapping index found`);
+            return false;
+        }
+        // Check if permission is available in the role for this specific menu
+        const isRolePermission = this.isPermissionInRole(permissionId, mappingIndex, row._id);
+        console.log(`🎭 Permission ${permission.sygms_title} for menu ${row.syme_title}: isRolePermission = ${isRolePermission}`);
+        if (isRolePermission) {
+            // If permission is in role, it should be checked by default
+            console.log(`🎭 Returning true for role permission: ${permission.sygms_title}`);
+            return true;
+        }
+        else {
+            // If permission is not in role, check if it's added as exception
+            const mapping = this.entityMappings()[mappingIndex];
+            const exceptions = mapping.exceptions || [];
+            const isException = exceptions.some((exception) => exception.syusrex_menu_id_syme === row._id &&
+                exception.syusrex_role_permissions_id_sygms === permissionId);
+            console.log(`🎭 Permission ${permission.sygms_title} is exception: ${isException}`);
+            return isException;
+        }
+    }
+    /**
+     * Handle permission change with type safety
+     */
+    onPermissionChangeSafe(checked, row, permissionId) {
+        this.onPermissionChange(Boolean(checked), row, permissionId);
+    }
+    /**
+     * Handle permission change
+     */
+    onPermissionChange(checked, row, permissionId) {
+        const permission = this.getPermissionById(permissionId);
+        if (!permission)
+            return;
+        // Find the current mapping index
+        const mappingIndex = this.getCurrentMappingIndex();
+        if (mappingIndex === null)
+            return;
+        // Check if permission is in role for this specific menu
+        const isRolePermission = this.isPermissionInRole(permissionId, mappingIndex, row._id);
+        if (isRolePermission) {
+            // Role permissions are handled by the role itself, no form controls needed
+            console.log('🎭 Role permission (handled by role):', {
+                menu: row.syme_title,
+                permission: permission.sygms_title,
+                checked: checked
+            });
+        }
+        else {
+            // Handle exception permission
+            if (checked) {
+                // Add exception
+                this.addRoleException(mappingIndex, row._id || '', permissionId);
+            }
+            else {
+                // Remove exception
+                this.removeRoleException(mappingIndex, row._id || '', permissionId);
+            }
+            console.log('🎭 Exception permission changed:', {
+                menu: row.syme_title,
+                permission: permission.sygms_title,
+                checked: checked
+            });
+        }
+        // Update the pre-computed permission values for this menu
+        this.updateMenuPermissionValues(mappingIndex, row._id || '');
+    }
+    /**
+     * Handle permission change for specific mapping
+     */
+    onPermissionChangeForMapping(checked, row, permissionId, mappingIndex) {
+        const permission = this.getPermissionById(permissionId);
+        if (!permission)
+            return;
+        const controlName = `core_entity_mapping.${mappingIndex}.menu_rights.${row._id}.${permission.sygms_title}`;
+        this.userMasterForm.get(controlName)?.setValue(checked);
+        console.log('🎭 Permission changed for mapping:', {
+            mappingIndex,
+            menu: row.syme_title,
+            permission: permission.sygms_title,
+            checked: checked,
+            controlName
+        });
+    }
+    /**
+     * Get current mapping index (helper method)
+     */
+    getCurrentMappingIndex() {
+        // Find the mapping index that has both entity and role selected
+        const entityMappings = this.entityMappings();
+        for (let i = 0; i < entityMappings.length; i++) {
+            const entityId = this.userMasterForm.get(`core_entity_mapping.${i}.syenm_entity_id_syen`)?.value;
+            const roleId = this.userMasterForm.get(`core_entity_mapping.${i}.syenm_role_id_syusrol`)?.value;
+            if (entityId && roleId) {
+                return i;
+            }
+        }
+        return null;
+    }
+    /**
+     * Add role exception
+     */
+    addRoleException(mappingIndex, menuId, permissionId) {
+        const mapping = this.entityMappings()[mappingIndex];
+        const permission = this.getPermissionById(permissionId);
+        if (!mapping || !permission)
+            return;
+        // Get the role ID directly (not as object)
+        const roleId = typeof mapping.syenm_role_id_syusrol === 'object'
+            ? mapping.syenm_role_id_syusrol?._id ?? ''
+            : mapping.syenm_role_id_syusrol ?? '';
+        // Create exception object with change tracking
+        const exception = {
+            syusrex_user_entity_mapping_id_syenm: mapping._id || '',
+            syusrex_role_id_syusrol: roleId, // Direct ID string
+            syusrex_role_permissions_id_sygms: permissionId,
+            syusrex_menu_id_syme: menuId,
+            syusrex_isactive: true,
+            _isUserAdded: true, // Mark as explicitly added by user
+            _changeType: 'added' // Track the change type
+        };
+        // Add to entity mapping exceptions (check for duplicates first)
+        this.entityMappings.update(mappings => {
+            const updatedMappings = [...mappings];
+            const mappingWithExceptions = updatedMappings[mappingIndex];
+            if (!mappingWithExceptions.exceptions) {
+                mappingWithExceptions.exceptions = [];
+            }
+            // Check if exception already exists to prevent duplicates
+            const existingException = mappingWithExceptions.exceptions.find(ex => ex.syusrex_menu_id_syme === menuId &&
+                ex.syusrex_role_permissions_id_sygms === permissionId);
+            if (!existingException) {
+                mappingWithExceptions.exceptions.push(exception);
+                console.log('🎭 Role exception added (new):', exception);
+            }
+            else {
+                // If exception exists but was removed, mark it as added again
+                if (existingException._isUserRemoved) {
+                    existingException._isUserRemoved = false;
+                    existingException._isUserAdded = true;
+                    existingException._changeType = 'added';
+                    existingException.syusrex_isactive = true;
+                    console.log('🎭 Role exception reactivated:', existingException);
+                }
+                else {
+                    console.log('🎭 Role exception already exists, skipping duplicate:', existingException);
+                }
+            }
+            return updatedMappings;
+        });
+        console.log('🎭 Role exception added:', exception);
+    }
+    /**
+     * Remove role exception
+     */
+    removeRoleException(mappingIndex, menuId, permissionId) {
+        this.entityMappings.update(mappings => {
+            const updatedMappings = [...mappings];
+            const mapping = updatedMappings[mappingIndex];
+            if (mapping.exceptions) {
+                // Instead of removing, mark as removed for tracking
+                mapping.exceptions = mapping.exceptions.map((exception) => {
+                    if (exception.syusrex_menu_id_syme === menuId && exception.syusrex_role_permissions_id_sygms === permissionId) {
+                        return {
+                            ...exception,
+                            _isUserRemoved: true,
+                            _changeType: 'removed',
+                            syusrex_isactive: false
+                        };
+                    }
+                    return exception;
+                });
+            }
+            return updatedMappings;
+        });
+        console.log('🎭 Role exception marked as removed:', { mappingIndex, menuId, permissionId });
+    }
+    /**
+     * Collect only changed role exceptions from entity mappings
+     */
+    collectRoleExceptions() {
+        const exceptions = [];
+        const entityMappings = this.entityMappings();
+        entityMappings.forEach((mapping, mappingIndex) => {
+            // Get exceptions from the mapping
+            const mappingWithExceptions = mapping;
+            const mappingExceptions = mappingWithExceptions.exceptions || [];
+            // Only include exceptions that have been explicitly changed by the user
+            mappingExceptions.forEach((exception) => {
+                // Check if this exception was explicitly added or removed by the user
+                if (exception._isUserAdded || exception._isUserRemoved) {
+                    // Ensure role ID is direct string, not object
+                    const roleId = mapping.syenm_role_id_syusrol?._id ?? '';
+                    // Create a unique key for this exception to prevent duplicates
+                    const exceptionKey = `${mapping._id || `temp_${mappingIndex}`}_${roleId}_${exception.syusrex_role_permissions_id_sygms}_${exception.syusrex_menu_id_syme}`;
+                    // Check if this exception already exists in the collection
+                    const existingException = exceptions.find(ex => ex.syusrex_user_entity_mapping_id_syenm === (mapping._id || `temp_${mappingIndex}`) &&
+                        ex.syusrex_role_id_syusrol === roleId &&
+                        ex.syusrex_role_permissions_id_sygms === exception.syusrex_role_permissions_id_sygms &&
+                        ex.syusrex_menu_id_syme === exception.syusrex_menu_id_syme);
+                    if (!existingException) {
+                        exceptions.push({
+                            syusrex_user_entity_mapping_id_syenm: mapping._id || `temp_${mappingIndex}`,
+                            syusrex_role_id_syusrol: roleId,
+                            syusrex_role_permissions_id_sygms: exception.syusrex_role_permissions_id_sygms || '',
+                            syusrex_menu_id_syme: exception.syusrex_menu_id_syme || '',
+                            syusrex_isactive: exception.syusrex_isactive || false,
+                            _changeType: exception._changeType || 'unknown'
+                        });
+                    }
+                    else {
+                        console.log('🎭 Duplicate exception prevented:', exceptionKey);
+                    }
+                }
+            });
+        });
+        console.log('🎭 Collected changed role exceptions:', exceptions);
+        return exceptions;
+    }
+    /**
+     * Check if permission is selected for a menu
+     */
+    isPermissionSelected(menuId, permissionId) {
+        const mappingIndex = this.getCurrentMappingIndex();
+        if (mappingIndex === null)
+            return false;
+        return this.isPermissionInRole(permissionId, mappingIndex, menuId);
+    }
     /**
      * Handle permission checkbox change (read-only in this context)
      */
@@ -12272,14 +12873,21 @@ class CideCoreUserCreateComponent {
      * Check if a menu has child menus with permissions
      */
     hasChildMenusWithPermissions(menuId) {
-        const rolePermissions = this.selectedRolePermissions();
-        const childMenus = rolePermissions.filter(menu => menu.syme_parent_id_syme === menuId);
-        return childMenus.some(childMenu => {
-            if (childMenu.permissions && childMenu.permissions.some((p) => p.isSelected)) {
-                return true;
-            }
-            // Recursively check grandchildren
-            return this.hasChildMenusWithPermissions(childMenu._id);
+        // For simplified approach, we don't need to check child menus
+        // Just return false as we're not using hierarchical permission checking
+        return false;
+    }
+    /**
+     * Update menu rights grid data to force refresh
+     */
+    updateMenuRightsGridData(mappingIndex) {
+        const menuRights = this.getMenuRightsForMapping(mappingIndex);
+        console.log('🔄 Updating menu rights grid data:', menuRights);
+        // Force update the grid configuration
+        this.menuRightsMap.update(map => {
+            const newMap = { ...map };
+            newMap[mappingIndex.toString()] = menuRights;
+            return newMap;
         });
     }
     /**
@@ -12287,11 +12895,13 @@ class CideCoreUserCreateComponent {
      */
     getMenuRightsGridConfig(mappingIndex) {
         const menuRights = this.getMenuRightsForMapping(mappingIndex);
+        console.log(`🔍 Grid config for mapping ${mappingIndex}:`);
+        console.log(`📊 Menu rights count:`, menuRights.length);
+        console.log(`📋 Menu rights data:`, menuRights);
         return {
             id: `menu-rights-grid-${mappingIndex}`,
-            title: 'Menu Rights & Permissions',
-            subtitle: 'Manage permissions for this entity-role mapping',
-            fullHeight: true,
+            title: '',
+            subtitle: '',
             columns: [
                 {
                     key: 'details',
@@ -12312,17 +12922,40 @@ class CideCoreUserCreateComponent {
                     renderer: 'menuTypeRenderer'
                 },
                 {
-                    key: 'permissions',
+                    key: 'syme_path',
+                    header: 'Path',
+                    type: 'text',
+                    width: '200px',
+                    truncate: true,
+                    align: 'left'
+                },
+                {
+                    key: 'syme_isactive',
+                    header: 'Status',
+                    type: 'status',
+                    width: '100px',
+                    truncate: false,
+                    align: 'center',
+                    statusConfig: {
+                        activeValue: true,
+                        activeLabel: 'Active',
+                        inactiveLabel: 'Inactive',
+                        activeClass: 'tw-bg-green-100 tw-text-green-800',
+                        inactiveClass: 'tw-bg-red-100 tw-text-red-800'
+                    }
+                },
+                {
+                    key: 'syme_permissions_id_sygms',
                     header: 'Permissions',
                     type: 'custom',
-                    width: '300px',
-                    truncate: false,
+                    width: '200px',
+                    truncate: true,
                     align: 'left',
                     renderer: 'permissionsRenderer'
                 }
             ],
             data: menuRights,
-            trackBy: 'menu_id',
+            trackBy: '_id',
             pagination: {
                 enabled: false,
                 pageSize: 10,
@@ -12334,37 +12967,43 @@ class CideCoreUserCreateComponent {
             search: {
                 enabled: true,
                 placeholder: 'Search menu items...',
-                searchableColumns: ['menu_name', 'menu_code'],
+                searchableColumns: ['syme_title', 'syme_desc', 'syme_path'],
                 debounceMs: 300
             },
             loading: {
-                useDefer: false,
+                useDefer: true,
                 skeletonRows: 5,
                 showOverlay: false
             },
             scroll: {
                 enabled: true,
-                maxHeight: '400px',
-                minHeight: '200px',
+                maxHeight: '',
+                minHeight: '',
                 stickyHeader: true,
                 virtualScroll: false,
-                rowHeight: 25
+                rowHeight: 50
             },
             dragDrop: {
-                enabled: false,
-                orderField: '',
-                dragClass: '',
-                dropClass: ''
+                enabled: true,
+                orderField: 'syme_order_by',
+                dragClass: 'tw-opacity-50 tw-bg-blue-50',
+                dropClass: 'tw-bg-green-50'
             },
             responsive: true,
             striped: false,
             bordered: true,
             compact: false,
             tableClass: 'tw-table-fixed tw-w-full tw-rounded-none',
+            onRefresh: 'onMenuItemRefresh',
+            onRowReorder: 'onRowReorder',
             tree: {
                 enabled: true,
-                primaryKey: 'menu_id',
-                foreignKey: 'parent_menu_id'
+                primaryKey: '_id',
+                foreignKey: 'syme_id_syme',
+                childrenKey: 'children',
+                levelKey: 'level',
+                expandedKey: 'isExpanded',
+                hasChildrenKey: 'hasChildren'
             }
         };
     }
@@ -12375,7 +13014,7 @@ class CideCoreUserCreateComponent {
         return {
             menuDetailsRenderer: this.menuDetailsRendererTemplate(),
             menuTypeRenderer: this.menuTypeRendererTemplate(),
-            permissionsRenderer: this.menuRightsPermissionsRendererTemplate()
+            permissionsRenderer: this.permissionsRendererTemplate()
         };
     }
     /**
@@ -12448,71 +13087,99 @@ class CideCoreUserCreateComponent {
             console.warn('Entity and Role must be selected before loading menu rights');
             return;
         }
-        // Simulate API call to get menu rights for entity-role combination
-        // In real implementation, this would call a service
-        const simulatedMenuRights = [
-            {
-                menu_id: 'user-management',
-                menu_name: 'User Management',
-                menu_code: 'USRMGT',
-                role_rights: ['create', 'read', 'update'],
-                exceptions: []
-            },
-            {
-                menu_id: 'entity-management',
-                menu_name: 'Entity Management',
-                menu_code: 'ENTMGT',
-                role_rights: ['read', 'update'],
-                exceptions: []
-            },
-            {
-                menu_id: 'role-management',
-                menu_name: 'Role Management',
-                menu_code: 'ROLMGT',
-                role_rights: ['read'],
-                exceptions: []
-            },
-            {
-                menu_id: 'reports',
-                menu_name: 'Reports',
-                menu_code: 'RPTS',
-                role_rights: ['read'],
-                exceptions: []
+        console.log('🚀 Loading menu rights for mapping:', mappingIndex);
+        this.loading.set(true);
+        this.error.set(null);
+        // Use actual API call to get menu list
+        const requestBody = {
+            pageIndex: 1,
+            pageSize: 1000, // Get all menu items - increased to ensure we get all records
+            total: 1000, // Set total to match pageSize to get all records
+            sort: { order: 'asc', key: 'syme_order_by' }
+        };
+        console.log('📤 Request body for menu list:', requestBody);
+        this.menuService.getMenuList(requestBody)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                console.log('✅ Menu list loaded successfully:', response);
+                console.log('📊 Total menu items received:', response?.data?.length || 0);
+                console.log('📋 Menu items data:', response?.data);
+                if (response?.success && response?.data) {
+                    // Use menu data directly without transformation
+                    const menuRights = response.data.map((menu) => {
+                        // Get only the permissions that are mapped to this menu
+                        const mappedPermissions = this.permissions().filter(permission => menu.syme_permissions_id_sygms?.includes(permission._id || ''));
+                        // Pre-compute permission values for template performance
+                        const permissionValues = {};
+                        if (menu.syme_permissions_id_sygms) {
+                            menu.syme_permissions_id_sygms.forEach(permissionId => {
+                                const permission = this.getPermissionById(permissionId);
+                                if (permission) {
+                                    permissionValues[permissionId] = {
+                                        checked: this.getFormControlValue(menu, permissionId),
+                                        permission: permission
+                                    };
+                                }
+                            });
+                        }
+                        return {
+                            ...menu,
+                            role_rights: mappedPermissions, // Use only mapped permissions
+                            exceptions: [],
+                            _permissionValues: permissionValues // Pre-computed values
+                        };
+                    });
+                    // Update menu rights map
+                    this.menuRightsMap.update(map => {
+                        const newMap = {
+                            ...map,
+                            [mappingIndex.toString()]: menuRights
+                        };
+                        console.log('🗺️ Updated menu rights map:', newMap);
+                        return newMap;
+                    });
+                    console.log('📊 Processed menu rights count:', menuRights.length);
+                    console.log('📋 Menu rights data:', menuRights);
+                    // Initialize entity mapping exceptions array if not exists
+                    this.entityMappings.update(mappings => {
+                        const updatedMappings = [...mappings];
+                        if (!updatedMappings[mappingIndex].exceptions) {
+                            updatedMappings[mappingIndex].exceptions = [];
+                        }
+                        return updatedMappings;
+                    });
+                    console.log('✅ Menu rights loaded for mapping', mappingIndex);
+                    // Force refresh the grid to show updated permission states
+                    setTimeout(() => {
+                        this.cdr.detectChanges();
+                        // Also update the grid configuration to ensure data refresh
+                        this.updateMenuRightsGridData(mappingIndex);
+                    }, 100);
+                }
+                else {
+                    console.warn('⚠️ No menu data received from API');
+                    this.error.set('No menu data received from server');
+                }
+                this.loading.set(false);
             },
-            {
-                menu_id: 'dashboard',
-                menu_name: 'Dashboard',
-                menu_code: 'DASH',
-                role_rights: ['read'],
-                exceptions: []
+            error: (error) => {
+                console.error('❌ Error loading menu rights:', error);
+                this.error.set('Failed to load menu rights');
+                this.loading.set(false);
             }
-        ];
-        // Update menu rights map
-        this.menuRightsMap.update(map => ({
-            ...map,
-            [mappingIndex.toString()]: simulatedMenuRights
-        }));
-        // Add form controls for menu rights
-        simulatedMenuRights.forEach((menuRight, j) => {
-            this.userMasterForm.addControl(`core_entity_mapping.${mappingIndex}.menu_rights.${j}.create`, this.fb.control(menuRight.role_rights.includes('create')));
-            this.userMasterForm.addControl(`core_entity_mapping.${mappingIndex}.menu_rights.${j}.read`, this.fb.control(menuRight.role_rights.includes('read')));
-            this.userMasterForm.addControl(`core_entity_mapping.${mappingIndex}.menu_rights.${j}.update`, this.fb.control(menuRight.role_rights.includes('update')));
-            this.userMasterForm.addControl(`core_entity_mapping.${mappingIndex}.menu_rights.${j}.delete`, this.fb.control(menuRight.role_rights.includes('delete')));
         });
-        console.log('Menu rights loaded for mapping', mappingIndex);
     }
     refreshMenuRights(mappingIndex) {
         this.clearMenuRightsForMapping(mappingIndex);
         this.loadMenuRights(mappingIndex);
     }
     clearMenuRightsForMapping(mappingIndex) {
-        const currentMenuRights = this.getMenuRightsForMapping(mappingIndex);
-        // Remove form controls for menu rights
-        currentMenuRights.forEach((_, j) => {
-            this.userMasterForm.removeControl(`core_entity_mapping.${mappingIndex}.menu_rights.${j}.create`);
-            this.userMasterForm.removeControl(`core_entity_mapping.${mappingIndex}.menu_rights.${j}.read`);
-            this.userMasterForm.removeControl(`core_entity_mapping.${mappingIndex}.menu_rights.${j}.update`);
-            this.userMasterForm.removeControl(`core_entity_mapping.${mappingIndex}.menu_rights.${j}.delete`);
+        // Clear exceptions from entity mapping
+        this.entityMappings.update(mappings => {
+            const updatedMappings = [...mappings];
+            updatedMappings[mappingIndex].exceptions = [];
+            return updatedMappings;
         });
         // Clear from menu rights map
         this.menuRightsMap.update(map => {
@@ -12521,6 +13188,63 @@ class CideCoreUserCreateComponent {
             return updatedMap;
         });
     }
+    /**
+     * Load user rights type ID from general master types
+     */
+    loadUserRightsTypeId() {
+        this.generalMasterTypeService.getTypeList({
+            sygmt_code: "user_rights"
+        })
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                if (response?.success && response.data) {
+                    const userRightsType = response.data.find(type => type.sygmt_code === 'user_rights' || type.sygmt_title?.toLowerCase().includes('user_rights'));
+                    if (userRightsType) {
+                        this.userRightsTypeId.set(userRightsType._id || null);
+                        this.loadPermissions();
+                    }
+                    else {
+                        this.error.set('User rights type not found in general master types');
+                    }
+                }
+            },
+            error: (err) => {
+                this.error.set('Failed to load user rights type');
+            }
+        });
+    }
+    /**
+     * Load permissions from general master
+     */
+    loadPermissions() {
+        const typeId = this.userRightsTypeId();
+        if (!typeId) {
+            this.error.set('User rights type not found. Please ensure the "user_rights" type exists in general master types.');
+            return;
+        }
+        const payload = { sygms_id_sygmt: typeId };
+        this.CideCoreGeneralMasterService.getMasterList(payload)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                if (response?.success && response.data) {
+                    this.permissions.set(response.data);
+                    if (this.error()?.includes('permissions')) {
+                        this.error.set(null);
+                    }
+                }
+                else {
+                    this.permissions.set([]);
+                    this.error.set('No permissions found. Please ensure permissions are configured in general master.');
+                }
+            },
+            error: (err) => {
+                this.permissions.set([]);
+                this.error.set('Failed to load permissions from general master. Please check your configuration.');
+            }
+        });
+    }
     hasRoleRight(menuRight, permission) {
         return menuRight.role_rights.includes(permission);
     }
@@ -12658,6 +13382,59 @@ class CideCoreUserCreateComponent {
             uploadType: 'user_profile_photo',
         };
     }
+    /**
+     * Get upload data for document files with group ID
+     */
+    getDocumentUploadData(documentIndex) {
+        const documentFormGroup = this.documentsFormArray.at(documentIndex);
+        const photoGroupId = documentFormGroup?.get('syusd_photo_group_id_cyfm')?.value;
+        const documentType = documentFormGroup?.get('syusd_document_type_id_sygms')?.value;
+        const documentNumber = documentFormGroup?.get('syusd_doc_number')?.value;
+        // Get document type name for better tagging
+        const documentTypeName = this.documentTypeOptions().find(opt => opt._id === documentType)?.sygms_title || 'Document';
+        return {
+            altText: `${documentTypeName} - ${documentNumber || 'Document'}`,
+            userId: this.appState.getCurrentUser()?._id || '',
+            groupId: photoGroupId, // Use photo group ID or generate one
+            permissions: ['read', 'write'],
+            tags: ['user', 'document', documentTypeName.toLowerCase(), 'file'],
+            uploadType: 'user_document',
+            documentIndex: documentIndex,
+            documentType: documentType,
+            documentNumber: documentNumber
+        };
+    }
+    /**
+     * Handle document upload success
+     * For multiple file upload, uploadResponse is the group ID
+     */
+    onDocumentUploadSuccess(groupId, documentIndex) {
+        console.log(`📎 Document upload success for document ${documentIndex} with group ID:`, groupId);
+        // Update the photo group ID in the form
+        const documentFormGroup = this.documentsFormArray.at(documentIndex);
+        if (documentFormGroup && groupId) {
+            documentFormGroup.get('syusd_photo_group_id_cyfm')?.setValue(groupId);
+            console.log(`📎 Updated photo group ID for document ${documentIndex}:`, groupId);
+        }
+        // For multiple file upload, we don't track individual files here
+        // The files are managed by the group ID on the server
+        // Clear any existing file tracking since we now use group ID
+        documentFormGroup._uploadedFiles = [];
+    }
+    /**
+     * Handle document upload error
+     */
+    onDocumentUploadError(error, documentIndex) {
+        console.error(`❌ Document upload error for document ${documentIndex}:`, error);
+        this.error.set(`Failed to upload document file: ${error?.message || 'Unknown error'}`);
+    }
+    /**
+     * Handle document upload progress
+     */
+    onDocumentUploadProgress(progress, documentIndex) {
+        console.log(`📊 Document upload progress for document ${documentIndex}: ${progress}%`);
+        // You can add progress indication here if needed
+    }
     /**
      * Load profile photo preview for existing photos
      */
@@ -12751,6 +13528,11 @@ class CideCoreUserCreateComponent {
         this.documents.update(docs => [...docs, newDocumentGroup.value]);
     }
     removeDocument(index) {
+        // Clean up uploaded files for this document
+        const documentFormGroup = this.documentsFormArray.at(index);
+        if (documentFormGroup) {
+            documentFormGroup._uploadedFiles = [];
+        }
         // Remove the document from the FormArray
         this.documentsFormArray.removeAt(index);
         // Update the documents signal to keep UI in sync
@@ -12797,12 +13579,14 @@ class CideCoreUserCreateComponent {
         }
         if (this.userMasterForm.valid) {
             this.loading.set(true);
-            // Prepare form data with entity mappings and menu rights
-            const { core_entity_mapping, menu_rights, core_user_contact_addresses, core_user_documents, core_user_family_details, ...auth_user_mst } = this.userMasterForm.value;
+            // Prepare form data with entity mappings and exceptions
+            const { core_entity_mapping, core_user_contact_addresses, core_user_documents, core_user_family_details, ...auth_user_mst } = this.userMasterForm.value;
+            // Collect exceptions from all entity mappings
+            const core_user_role_exceptions = this.collectRoleExceptions();
             const formData = {
                 auth_user_mst: auth_user_mst,
                 core_entity_mapping: core_entity_mapping || [],
-                menu_rights: this.menuRightsMap() || {},
+                core_user_role_exceptions: core_user_role_exceptions,
                 core_user_contact_addresses: core_user_contact_addresses || [],
                 core_user_documents: core_user_documents || [],
                 core_user_family_details: core_user_family_details || [],
@@ -12826,7 +13610,7 @@ class CideCoreUserCreateComponent {
                         console.log('🔐 Encrypting password for edit mode...');
                         const originalPassword = dataWithPassword.user_password;
                         dataWithPassword.user_password = customEncrypt(dataWithPassword.user_password);
-                        console.log('✅ Password encrypted for edit mode:', { originalLength: originalPassword.length, encryptedLength: dataWithPassword.user_password.length });
+                        console.log('✅ Password encrypted for edit mode:', { originalLength: originalPassword, encryptedLength: customDecrypt(dataWithPassword.user_password), dataWithPassword: dataWithPassword.user_password });
                     }
                     formData.auth_user_mst = dataWithPassword;
                 }
@@ -12838,15 +13622,12 @@ class CideCoreUserCreateComponent {
                     console.log('🔐 Encrypting password for create mode...');
                     const originalPassword = dataWithPassword.user_password;
                     dataWithPassword.user_password = customEncrypt(dataWithPassword.user_password);
-                    console.log('✅ Password encrypted for create mode:', { originalLength: originalPassword.length, encryptedLength: dataWithPassword.user_password.length });
+                    console.log('✅ Password encrypted for create mode:', { originalLength: originalPassword, encryptedLength: dataWithPassword.user_password.length });
                 }
                 formData.auth_user_mst = dataWithPassword;
             }
             // Log final form data being sent (without password for security)
             const logData = { ...formData };
-            if (logData.auth_user_mst.user_password) {
-                logData.auth_user_mst.user_password = '***ENCRYPTED***';
-            }
             console.log('📤 Sending form data to server:', logData);
             // Use the service to save user master
             this.userMasterService.saveUpdateUserMaster(logData)
@@ -12854,14 +13635,19 @@ class CideCoreUserCreateComponent {
                 next: (response) => {
                     console.log('✅ User master saved successfully:', response);
                     this.loading.set(false);
+                    this.error.set(null); // Clear any previous errors
                     if (this.isEditMode()) {
-                        // In edit mode, show success message and optionally navigate back
+                        // In edit mode, show success message
+                        this.success.set('User updated successfully! All changes have been saved.');
                         console.log('User updated successfully');
-                        // Optionally navigate back to user list
-                        // this.goBackToUserList();
+                        // Auto-hide success message after 5 seconds
+                        setTimeout(() => this.success.set(null), 5000);
                     }
                     else {
-                        // In create mode, reset form for new user
+                        // In create mode, show success message and reset form for new user
+                        this.success.set('User created successfully! You can now create another user.');
+                        // Auto-hide success message after 5 seconds
+                        setTimeout(() => this.success.set(null), 5000);
                         this.resetForm();
                     }
                 },
@@ -13326,6 +14112,37 @@ class CideCoreUserCreateComponent {
             }
         });
     }
+    /**
+     * Load menu options from API
+     */
+    loadMenuOptions() {
+        const requestBody = {
+            pageIndex: 0,
+            pageSize: 1000, // Load all menus
+            total: 0,
+            query: '',
+            sort: {
+                order: 'asc',
+                key: 'syme_order_by'
+            }
+        };
+        this.menuService.getMenuList(requestBody).subscribe({
+            next: (response) => {
+                if (response?.success) {
+                    console.log('🎭 Menu options loaded:', response.data);
+                    this.menuOptions.set(response.data || []);
+                }
+                else {
+                    console.error('❌ Failed to load menu options:', response);
+                    this.menuOptions.set([]);
+                }
+            },
+            error: (error) => {
+                console.error('❌ Error loading menu options:', error);
+                this.menuOptions.set([]);
+            }
+        });
+    }
     /**
      * Load dropdown data for existing addresses in edit mode
      */
@@ -13343,7 +14160,7 @@ class CideCoreUserCreateComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreUserCreateComponent, isStandalone: true, selector: "cide-core-user-create", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsCheckboxRendererTemplate", first: true, predicate: ["permissionsCheckboxRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuTypeRendererTemplate", first: true, predicate: ["menuTypeRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuRightsPermissionsRendererTemplate", first: true, predicate: ["menuRightsPermissionsRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \n  ENTERPRISE USER MASTER FORM\n  \n  Enterprise-Level Styling with Tailwind CSS\n  Features: Responsive grids, proper typography, enhanced user experience\n-->\n\n<div class=\"tw-w-full tw-h-full tw-p-3\">\n  <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\n    (ngSubmit)=\"onSubmit()\">\n\n    <!-- User Context Header -->\n    <div\n      class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-indigo-50 tw-border tw-border-blue-200 tw-rounded-md tw-p-2 tw-mb-3 tw-shadow-sm\">\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\n        <!-- User Basic Info Display -->\n        <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\n          <!-- Profile Photo Preview -->\n          <div class=\"tw-flex tw-items-center tw-gap-2\">\n            <div\n              class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-border tw-border-blue-200 tw-flex tw-items-center tw-justify-center tw-overflow-hidden\">\n              @if (userMasterForm.get('user_photo_id_cyfm')?.value) {\n                <img \n                  cideEleFileImage \n                  [fileId]=\"userMasterForm.get('user_photo_id_cyfm')?.value\" \n                  [altText]=\"'Profile Photo'\"\n                  class=\"tw-w-full tw-h-full tw-object-cover\">\n              } @else {\n                <cide-ele-icon \n                  name=\"person\" \n                  class=\"tw-w-5 tw-h-5 tw-text-blue-600\">\n                </cide-ele-icon>\n              }\n            </div>\n            <div class=\"tw-flex tw-flex-col\">\n              <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\n                {{ getUserFullName() || 'New User' }}\n              </span>\n              <span class=\"tw-text-xs tw-text-blue-600\">\n                {{ getUserUsername() || 'Username not set' }}\n              </span>\n            </div>\n          </div>\n\n          <!-- Contact Info -->\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">email</cide-ele-icon>\n              <span>{{ getUserEmail() || 'Email not set' }}</span>\n            </div>\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">phone</cide-ele-icon>\n              <span>{{ getUserMobile() || 'Mobile not set' }}</span>\n            </div>\n          </div>\n\n          <!-- Active Status -->\n          <div class=\"tw-flex tw-items-center tw-gap-1\">\n            @if (getUserActiveStatus()) {\n            <span\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-700\">\n              <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">check_circle</cide-ele-icon>\n              Active\n            </span>\n            } @else {\n            <span\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-700\">\n              <cide-ele-icon variant=\"red\" size=\"xs\" class=\"tw-mr-1\">cancel</cide-ele-icon>\n              Inactive\n            </span>\n            }\n          </div>\n        </div>\n\n        <!-- Entity Info -->\n        <div class=\"tw-flex tw-items-center tw-gap-2\">\n          @if (hasDefaultEntity()) {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-blue-700\">\n            <cide-ele-icon variant=\"blue\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-font-medium\">{{ getDefaultEntityName() }}</span>\n          </div>\n          } @else {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-500\">\n            <cide-ele-icon variant=\"gray\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-italic\">No entity</span>\n          </div>\n          }\n\n          <span class=\"tw-text-xs tw-text-gray-600 tw-px-2 tw-py-1 tw-bg-gray-100 tw-rounded\">\n            {{ getEntityMappingCount() }} mapping(s)\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Tab Navigation -->\n    <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\n      <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\n        (tabChange)=\"onTabChange($event)\">\n      </cide-ele-tab>\n    </div>\n\n    <!-- Tab Content -->\n    <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n      @switch (activeTab()) {\n\n      @case ('basic') {\n      <!-- User Basic Information Section -->\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\n\n        <!-- Top Section: Form Fields on Left, Profile Photo on Right -->\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-6 tw-mb-6\">\n          <!-- Left Side: Form Fields -->\n          <div class=\"tw-space-y-6\">\n            <!-- Name Fields - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\n              <cide-ele-input id=\"user_firstname\" label=\"First Name *\" formControlName=\"user_firstname\"\n                placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\n                placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_lastname\" label=\"Last Name *\" formControlName=\"user_lastname\"\n                placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_fullname\" label=\"Full Name * (Auto-generated)\" formControlName=\"user_fullname\"\n                placeholder=\"Auto-generated from name fields or enter manually\" [maxlength]=\"62\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <!-- Contact Information - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\n              <cide-ele-input id=\"user_username\" label=\"Username *\" formControlName=\"user_username\"\n                placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_emailid\" label=\"Email ID *\" formControlName=\"user_emailid\" type=\"email\"\n                placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number *\" formControlName=\"user_mobileno\" type=\"tel\"\n                placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\n              </cide-ele-input>\n            </div>\n          </div>\n\n          <!-- Right Side: Profile Photo Upload -->\n          <div class=\"tw-flex tw-items-start tw-justify-center tw-p-0\">\n            <cide-ele-file-input \n              id=\"user_photo_id_cyfm\" \n              formControlName=\"user_photo_id_cyfm\"\n              accept=\"image/*\"\n              [showPreview]=\"true\"\n              [previewBoxMode]=\"true\"\n              [showFileName]=\"false\"\n              previewWidth=\"180px\"\n              previewHeight=\"120px\"\n              placeholderText=\"Upload Photo\"\n              placeholderIcon=\"cloud_upload\"\n              [autoUpload]=\"true\"\n              [uploadData]=\"getProfilePhotoUploadData()\"\n              (uploadSuccess)=\"onProfilePhotoUploadSuccess($event)\"\n              (uploadError)=\"onProfilePhotoUploadError($event)\"\n              (uploadProgressChange)=\"onProfilePhotoUploadProgress($event)\">\n            </cide-ele-file-input>\n          </div>\n        </div>\n\n\n\n        <!-- Status Control -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-mb-4\">\n          <div class=\"tw-p-4 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\n            <label\n              class=\"tw-flex tw-flex-col tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200 hover:tw-bg-blue-75\">\n              <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\n                class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\n                access and operations</span>\n            </label>\n          </div>\n        </div>\n      </div>\n      }\n\n      @case ('auth') {\n      <!-- Authentication Section -->\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\n        <!-- Password Fields -->\n        @if (shouldShowPasswordFields()) {\n        <div class=\"tw-mb-6\">\n          <!-- Password Fields Header for Edit Mode -->\n          @if (isEditMode()) {\n          <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Update Password</h6>\n            <button type=\"button\"\n              class=\"tw-px-3 tw-py-1 tw-bg-gray-100 tw-text-gray-600 tw-border tw-border-gray-300 tw-rounded-md tw-text-xs tw-font-medium hover:tw-bg-gray-200 tw-transition-colors\"\n              (click)=\"cancelPasswordUpdate()\">\n              Cancel Password Update\n            </button>\n          </div>\n          }\n\n          <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6\">\n            <cide-ele-input id=\"user_password\" [label]=\"getPasswordFieldLabel()\" formControlName=\"user_password\"\n              type=\"password\" placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\n            </cide-ele-input>\n\n            <cide-ele-input id=\"user_confirm_password\" [label]=\"getPasswordConfirmLabel()\"\n              formControlName=\"user_confirm_password\" type=\"password\" placeholder=\"Confirm your password\" size=\"md\">\n            </cide-ele-input>\n          </div>\n        </div>\n        }\n\n        <!-- Password Update Option for Edit Mode -->\n        @if (isEditMode() && !shouldShowPasswordFields()) {\n        <div class=\"tw-mb-6\">\n          <div class=\"tw-p-4 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-blue-800 tw-mb-2\">Password Update</h6>\n            <p class=\"tw-text-sm tw-text-blue-600 tw-mb-3\">Current password will be kept. Click below to change\n              password.</p>\n\n            @if (hasPasswordInput()) {\n            <div\n              class=\"tw-mb-3 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded tw-text-sm tw-text-yellow-700\">\n              <cide-ele-icon variant=\"yellow\" size=\"xs\" class=\"tw-mr-1\">warning</cide-ele-icon>\n              Password fields contain text. Click \"Change Password\" to manage existing input.\n            </div>\n            }\n\n            <button type=\"button\"\n              class=\"tw-px-4 tw-py-2 tw-bg-blue-100 tw-text-blue-700 tw-border tw-border-blue-300 tw-rounded-md tw-text-sm tw-font-medium hover:tw-bg-blue-200 tw-transition-colors\"\n              (click)=\"triggerPasswordUpdate()\">\n              @if (hasPasswordInput()) {\n              Manage Password Fields\n              } @else {\n              Change Password\n              }\n            </button>\n          </div>\n        </div>\n        }\n\n        <!-- Password Options -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-gap-6 tw-mb-6\">\n          <div class=\"tw-p-4 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\n            <label\n              class=\"tw-flex tw-flex-col tw-gap-2 tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200\">\n              <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\n                formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\n                password on next login</span>\n            </label>\n          </div>\n        </div>\n\n      </div>\n      }\n\n      @case ('roles') {\n      <!-- Entity, Roles & Permissions Mapping Section -->\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\n\n\n\n        <!-- Important Note -->\n        <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-4 tw-mb-6\">\n          <div class=\"tw-flex tw-items-start tw-gap-3\">\n            <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\n            <div class=\"tw-flex-1\">\n              <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\n              <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role\n                mappings below. At least one entity mapping is required for user access.</p>\n              @if (hasDefaultEntity()) {\n              <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\n                <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\n                <span class=\"tw-text-sm tw-text-amber-800\">\n                  <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\n                </span>\n              </div>\n              } @else {\n              <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\n                \u26A0\uFE0F No default entity selected. Please set one entity as default.\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <!-- Entity-Role Mapping Section -->\n        <div class=\"tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg tw-p-6 tw-mb-6\">\n          <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\n            <div>\n              <h4 class=\"tw-text-sm tw-text-left tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\n              <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\n            </div>\n            <div class=\"tw-flex tw-flex-col tw-items-end\">\n              <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\" leftIcon=\"add\"\n                [disabled]=\"isAllEntitiesMapped()\">\n              Add Entity Mapping\n            </button>\n              \n              @if (isAllEntitiesMapped()) {\n              <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-md tw-max-w-xs\">\n                <p class=\"tw-text-xs tw-text-blue-700\">\n                  <cide-ele-icon variant=\"info\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n                  All available entities are already mapped.\n                </p>\n              </div>\n              }\n            </div>\n          </div>\n\n          <div formArrayName=\"core_entity_mapping\">\n            @for (mapping of entityMappings(); track $index; let i = $index) {\n            <div class=\"tw-bg-white tw-border tw-border-blue-200 tw-rounded-xl tw-mb-6 tw-overflow-hidden tw-shadow-sm\"\n              [formGroupName]=\"i\">\n              <div\n                class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-blue-100 tw-px-6 tw-py-3 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-blue-200\">\n                <div class=\"tw-flex tw-items-center tw-gap-2\">\n                  <h5 class=\"tw-m-0 tw-text-blue-800 tw-text-sm tw-font-semibold\">Entity Mapping {{ i + 1 }}</h5>\n                  @if (mapping.syenm_isdefault) {\n                  <span\n                    class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n                    <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">star</cide-ele-icon>\n                    Default\n                  </span>\n                  }\n                </div>\n                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeEntityMapping(i)\"\n                  leftIcon=\"delete\">\n                  Remove\n                </button>\n              </div>\n\n              <div class=\"tw-p-6\">\n                <!-- Entity and Role Selection -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                  <div>\n                    <cide-ele-select label=\"Entity *\" [options]=\"getFilteredEntityOptions(i)\" formControlName=\"syenm_entity_id_syen\"\n                    valueKey=\"_id\" labelKey=\"syen_name\" placeholder=\"Select entity\" size=\"md\"\n                    (change)=\"onEntityChange(i, $event)\">\n                  </cide-ele-select>\n                    \n                    @if (isAllEntitiesSelected(i)) {\n                    <div class=\"tw-mt-2 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded-md\">\n                      <p class=\"tw-text-xs tw-text-yellow-700\">\n                        <cide-ele-icon variant=\"warning\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n                        All entities are already mapped. Remove another mapping to add this one.\n                      </p>\n                    </div>\n                    }\n                  </div>\n                  <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\n                    formControlName=\"syenm_role_id_syusrol\" valueKey=\"_id\" labelKey=\"syusrol_role_name\" placeholder=\"Select role for this entity\" size=\"md\"\n                    (change)=\"onRoleChange(i, $event)\">\n                  </cide-ele-select>\n                </div>\n\n                <!-- Role Permissions Grid -->\n                @if (selectedEntityIndex() === i && selectedRoleId()) {\n                  <div class=\"tw-mb-6 tw-border tw-border-gray-200 tw-rounded-lg tw-bg-gray-50\">\n                    <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-white tw-rounded-t-lg\">\n                      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n                        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">security</cide-ele-icon>\n                        <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-m-0\">Role Permissions Preview</h6>\n                        <span class=\"tw-text-xs tw-text-gray-500\">(Read-only view of selected role permissions)</span>\n                      </div>\n                    </div>\n                    \n                    <div class=\"tw-p-4\">\n                      @if (loading()) {\n                        <div class=\"tw-flex tw-items-center tw-justify-center tw-py-8\">\n                          <div class=\"tw-animate-spin tw-rounded-full tw-h-8 tw-w-8 tw-border-b-2 tw-border-blue-600\"></div>\n                          <span class=\"tw-ml-2 tw-text-gray-600\">Loading role permissions...</span>\n                        </div>\n                      } @else if (error()) {\n                        <div class=\"tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n                          <div class=\"tw-flex tw-items-start\">\n                            <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n                            <div class=\"tw-ml-3\">\n                              <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n                              <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n                            </div>\n                          </div>\n                        </div>\n                      } @else {\n                        <cide-ele-data-grid \n                          [config]=\"rolePermissionsGridConfig()\" \n                          [templateRenderers]=\"templateRenderers\"\n                          (gridEvent)=\"onRolePermissionsGridEvent($event)\"\n                          class=\"tw-h-96 tw-w-full\">\n                        </cide-ele-data-grid>\n                      }\n                    </div>\n                  </div>\n                }\n\n                <!-- Entity-Specific Details -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                  <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\n                    formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\" labelKey=\"sydept_name\" placeholder=\"Select department\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-select label=\"Designation for this Entity\" [options]=\"getDesignationOptionsForEntity(i)\" valueKey=\"_id\" labelKey=\"sydsg_name\"\n                    formControlName=\"syenm_designation_id_sydsg\" placeholder=\"Select designation\" size=\"md\">\n                  </cide-ele-select>\n                </div>\n\n                <!-- Active Period for Entity Mapping -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                  <cide-ele-input label=\"Active From *\" [id]=\"'syenm_activefrom['+i+']'\"\n                    formControlName=\"syenm_activefrom\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n\n                  <cide-ele-input label=\"Active Until\" [id]=\"'syenm_activeupto['+i+']'\"\n                    formControlName=\"syenm_activeupto\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n                </div>\n\n                <!-- Mapping Settings -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-6 tw-mb-6\">\n                  <div class=\"tw-p-3 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded-lg\">\n                    <cide-ele-input type=\"checkbox\" label=\"Default Entity\" formControlName=\"syenm_isdefault\"\n                      (change)=\"onDefaultEntityChange(i, $event)\" class=\"tw-h-5 tw-accent-green-500\" />\n                    <span class=\"tw-text-xs tw-text-green-600 tw-block tw-mt-1\">Set as user's default entity (only one\n                      allowed)</span>\n                  </div>\n\n                  <div class=\"tw-p-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n                    <cide-ele-input type=\"checkbox\" label=\"Active Mapping\" formControlName=\"syenm_isactive\"\n                      class=\"tw-h-5 tw-accent-blue-500\" />\n                    <span class=\"tw-text-xs tw-text-blue-600 tw-block tw-mt-1\">Enable this entity mapping</span>\n                  </div>\n                </div>\n\n                <!-- Menu Rights Grid for this Entity-Role -->\n                <div class=\"tw-border-t tw-border-gray-200 tw-pt-4\">\n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\n                    <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Menu Rights & Permissions</h6>\n                    <div class=\"tw-flex tw-gap-2\">\n                      <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"refreshMenuRights(i)\"\n                        leftIcon=\"refresh\">\n                        Refresh Rights\n                      </button>\n                    </div>\n                  </div>\n\n                  @if (getMenuRightsForMapping(i).length > 0) {\n                  <!-- Menu Rights Tree Grid -->\n                  <div class=\"tw-border tw-border-gray-200 tw-rounded-lg tw-bg-white\">\n                    <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-rounded-t-lg\">\n                      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n                        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">security</cide-ele-icon>\n                        <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-m-0\">Menu Rights & Permissions</h6>\n                        <span class=\"tw-text-xs tw-text-gray-500\">(Editable permissions for this entity-role mapping)</span>\n                      </div>\n                    </div>\n                    \n                    <div class=\"tw-p-4\">\n                      <cide-ele-data-grid \n                        [config]=\"getMenuRightsGridConfig(i)\" \n                        [templateRenderers]=\"getMenuRightsTemplateRenderers(i)\"\n                        (gridEvent)=\"onMenuRightsGridEvent($event, i)\"\n                        class=\"tw-h-96 tw-w-full\">\n                      </cide-ele-data-grid>\n                    </div>\n                  </div>\n\n                  } @else {\n                  <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\n                    <div class=\"tw-text-gray-400 tw-mb-3\">\n                      <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\n                    </div>\n                    <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\n                    <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to load\n                      menu rights for this mapping.</p>\n                    @if (mapping.syenm_entity_id_syen?._id && mapping.syenm_role_id_syusrol) {\n                    <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"loadMenuRights(i)\"\n                      leftIcon=\"refresh\">\n                      Load Menu Rights\n                    </button>\n                    }\n                  </div>\n                  }\n                </div>\n              </div>\n            </div>\n            }\n          </div>\n\n          @if (entityMappings().length === 0) {\n          <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\n            <div class=\"tw-text-blue-400 tw-mb-3\">\n              <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\n            </div>\n            <h4 class=\"tw-text-sm tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\n            <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and\n              permissions for different entities.</p>\n            <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\"\n              (click)=\"addEntityMapping()\" leftIcon=\"add\">\n              Add First Entity Mapping\n            </button>\n          </div>\n          }\n        </div>\n\n\n      </div>\n      }\n\n      @case ('addresses') {\n      <!-- Contact Addresses Section -->\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\n        <div class=\"tw-flex tw-justify-end\">\n          <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\n              leftIcon=\"add\">\n              Add New Address\n            </button>\n          </div>\n        </div>\n\n        <div formArrayName=\"core_user_contact_addresses\">\n          @for (address of contactAddresses(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n            <div\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-6 tw-py-1 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">Address {{ i + 1 }}</h4>\n              <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\n                leftIcon=\"delete\">\n                Remove\n              </button>\n            </div>\n            <div class=\"tw-p-6\">\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\" id=\"sycad_address_type_id_sygms\"\n                  formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select address type\" size=\"md\"\n                  valueKey=\"_id\" labelKey=\"sygms_title\">\n                </cide-ele-select>\n\n                <cide-ele-input label=\"Contact Person Name\" formControlName=\"sycad_contact_person_name\"\n                  placeholder=\"Enter contact person name\" size=\"md\">\n                </cide-ele-input>\n              </div>\n\n              <div class=\"tw-grid tw-grid-cols-1 tw-mb-6\">\n                <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\n                  placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"3\" size=\"md\">\n                </cide-ele-textarea>\n              </div>\n\n              <!-- Postal Code & City -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-select \n                  label=\"Postal Code\"\n                  [options]=\"addressPostalCodes()[i] || []\" \n                  formControlName=\"sycad_contact_pin_sypin\"\n                  placeholder=\"Select postal code\"\n                  [searchable]=\"true\"\n                  [loading]=\"addressPostalCodesLoading()[i] || false\"\n                  (searchChange)=\"onPostalCodeSearch($event, i)\"\n                  (change)=\"onPostalCodeSelection($event, i)\"\n                  size=\"md\">\n                </cide-ele-select>\n                \n                <cide-ele-input \n                  label=\"City\" \n                  formControlName=\"sycad_contact_city_sypin\"\n                  placeholder=\"Enter city\"\n                  size=\"md\">\n                </cide-ele-input>\n              </div>\n              \n              <!-- State & Country -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-input \n                  label=\"State\" \n                  formControlName=\"sycad_contact_state_sypin\"\n                  placeholder=\"Enter state\"\n                  size=\"md\">\n                </cide-ele-input>\n\n                <cide-ele-select \n                  label=\"Country\" \n                  [options]=\"addressCountries()[i] || []\" \n                  formControlName=\"sycad_contact_country_syctr\"\n                  placeholder=\"Select country\"\n                  valueKey=\"_id\"\n                  labelKey=\"syctr_country_iso_name\"\n                  [searchable]=\"true\"\n                  (searchChange)=\"onCountrySearch($event, i)\"\n                  [loading]=\"addressCountriesLoading()[i] || false\"\n                  size=\"md\">\n                </cide-ele-select>\n              </div>\n\n              <!-- Phone Numbers -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-input \n                  label=\"Primary Phone\" \n                  formControlName=\"sycad_contact_phone\"\n                  type=\"tel\"\n                  placeholder=\"Enter primary phone number\"\n                  size=\"md\">\n                </cide-ele-input>\n\n                <cide-ele-input \n                  label=\"Alternate Phone\" \n                  formControlName=\"sycad_contact_phone_alt\"\n                  type=\"tel\"\n                  placeholder=\"Enter alternate phone number\"\n                  size=\"md\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Fax & Email -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-input \n                  label=\"Fax Number\" \n                  formControlName=\"sycad_contact_fax\"\n                  placeholder=\"Enter fax number\"\n                  size=\"md\">\n                </cide-ele-input>\n\n                <cide-ele-input \n                  label=\"Primary Email\" \n                  formControlName=\"sycad_contact_email\"\n                  type=\"email\"\n                  placeholder=\"Enter primary email address\"\n                  size=\"md\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Alternate Email -->\n              <div class=\"tw-grid tw-grid-cols-1 tw-mb-6\">\n                <cide-ele-input \n                  label=\"Alternate Email\" \n                  formControlName=\"sycad_contact_email_alt\"\n                  type=\"email\"\n                  placeholder=\"Enter alternate email address\"\n                  size=\"md\">\n                </cide-ele-input>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('documents') {\n      <!-- Documents Section -->\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\">\n            Add Document\n          </button>\n        </div>\n\n        <div formArrayName=\"core_user_documents\">\n          @for (doc of documents(); track $index; let i = $index) {\n        <div [formGroupName]=\"i\"\n          class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n          <div\n            class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-6 tw-py-1 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n            <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">Document {{ i + 1 }}</h4>\n            <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeDocument(i)\"\n              leftIcon=\"delete\">\n              Remove\n            </button>\n          </div>\n          <div class=\"tw-p-6\">\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\n                formControlName=\"syusd_document_type_id_sygms\"\n                placeholder=\"Select document type\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n\n              <cide-ele-input label=\"Document Number\" formControlName=\"syusd_doc_number\"\n                placeholder=\"Enter document number\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-input label=\"Name as per Document\"\n                formControlName=\"syusd_doc_name_as_per_doc\"\n                placeholder=\"Enter name exactly as shown on document\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-select label=\"Photo Group\" [options]=\"photoGroupOptions()\"\n                formControlName=\"syusd_photo_group_id_cyfm\"\n                placeholder=\"Select photo group\" size=\"md\" valueKey=\"_id\" labelKey=\"cyfm_name\">\n              </cide-ele-select>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-input label=\"Issue Date\" formControlName=\"syusd_doc_issue_date\"\n                [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input label=\"Expiry Date\" formControlName=\"syusd_doc_expiry_date\"\n                [id]=\"'syusd_doc_expiry_date['+i+']'\" type=\"date\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\n              <cide-ele-select label=\"Document Verification Status\" [options]=\"documentVerificationStatusOptions()\"\n                formControlName=\"syusd_doc_verification_status_id_sygms\"\n                placeholder=\"Select verification status\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n\n              <cide-ele-select label=\"Document KYC Status\" [options]=\"documentKycStatusOptions()\"\n                formControlName=\"syusd_doc_kyc_status_id_sygms\"\n                placeholder=\"Select KYC status\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n            </div>\n          </div>\n        </div>\n        }\n        </div>\n      </div>\n      }\n\n      @case ('family') {\n      <!-- Family Details Section -->\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\">\n            Add Family Member\n          </button>\n        </div>\n\n        <div formArrayName=\"core_user_family_details\">\n          @for (family of familyDetails(); track $index; let i = $index) {\n        <div [formGroupName]=\"i\"\n          class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n          <div\n            class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-6 tw-py-1 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n            <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">Family Member {{ i + 1 }}\n            </h4>\n            <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeFamilyDetail(i)\"\n              leftIcon=\"delete\">\n              Remove\n            </button>\n          </div>\n          <div class=\"tw-p-6\">\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-input label=\"Family Member Name\"\n                formControlName=\"syfdl_family_member_name\"\n                placeholder=\"Enter family member full name\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-select \n                label=\"Family Member User\"\n                [options]=\"userOptions(i)\"\n                formControlName=\"syfdl_family_member_id_user\"\n                placeholder=\"Select family member user\" \n                size=\"md\" \n                valueKey=\"_id\" \n                labelKey=\"user_fullname\"\n                [searchable]=\"true\"\n                [loading]=\"userSearchLoading()[i] || false\"\n                (searchChange)=\"onUserSearchChange($event, i)\"\n                (change)=\"onUserSelectionChange($event, i)\">\n              </cide-ele-select>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\n                formControlName=\"syfdl_relationship_id_sygms\"\n                placeholder=\"Select relationship\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n\n              <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\n                formControlName=\"syfdl_blood_group_sygms\"\n                placeholder=\"Select blood group\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-input label=\"Date of Birth\"\n                formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"md\"\n                [id]=\"'syfdl_family_member_dob['+i+']'\">\n              </cide-ele-input>\n\n              <cide-ele-input label=\"Contact Phone\"\n                formControlName=\"syfdl_contact_phone\"\n                type=\"tel\" placeholder=\"Enter contact phone\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\"\n                type=\"email\" placeholder=\"Enter contact email\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\"\n                type=\"email\" placeholder=\"Enter contact email ID\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\n              <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\"\n                type=\"tel\" placeholder=\"Enter contact number\" size=\"md\">\n              </cide-ele-input>\n\n              <div class=\"tw-flex tw-items-center tw-pt-6\">\n                <cide-ele-input \n                  formControlName=\"syfdl_isactive\"\n                  type=\"checkbox\"\n                  label=\"Active\"\n                  size=\"md\">\n                </cide-ele-input>\n              </div>\n            </div>\n          </div>\n        </div>\n        }\n        </div>\n      </div>\n      }\n      }\n    </div>\n\n    <!-- Form Actions -->\n    <div\n      class=\"tw-flex tw-justify-end tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\n      <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n        [disabled]=\"loading()\">\n        Reset Form\n      </button>\n\n      <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\n        [loading]=\"loading()\" leftIcon=\"save\">\n        Save User Master\n      </button>\n    </div>\n  </form>\n</div>\n\n<!-- Template Renderers for Role Permissions Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3 tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      @if (row.syme_type === 'module') {\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">folder</cide-ele-icon>\n      } @else if (row.syme_type === 'section') {\n        <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">folder_open</cide-ele-icon>\n      } @else if (row.syme_type === 'menu') {\n        <cide-ele-icon class=\"tw-text-purple-600 tw-w-4 tw-h-4\">menu</cide-ele-icon>\n      } @else {\n        <cide-ele-icon class=\"tw-text-gray-600 tw-w-4 tw-h-4\">description</cide-ele-icon>\n      }\n    </div>\n    \n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \n             [title]=\"row.syme_title\">\n          {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n        </div>\n        <!-- Green pill indicator for parent menus with child permissions -->\n        @if (row.syme_type === 'module' || row.syme_type === 'section') {\n          @if (hasChildMenusWithPermissions(row._id)) {\n            <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-whitespace-nowrap\">\n              Assigned\n            </span>\n          }\n        }\n      </div>\n      @if (row.permission?.sygms_name) {\n        <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" \n             [title]=\"row.permission?.sygms_name\">\n          {{ row.permission?.sygms_name }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-justify-center\">\n    @if (row.syme_type === 'module') {\n      <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n        Module\n      </span>\n    } @else if (row.syme_type === 'section') {\n      <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n        Section\n      </span>\n    } @else if (row.syme_type === 'menu') {\n      <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-purple-100 tw-text-purple-800\">\n        Menu\n      </span>\n    } @else {\n      <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800\">\n        {{ row.syme_type || 'Unknown' }}\n      </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n      @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n         <div class=\"tw-flex tw-items-center tw-space-x-1\">\n           <div class=\"tw-flex tw-items-center tw-space-x-1\">\n             <input \n               type=\"checkbox\"\n               [checked]=\"isPermissionSelected(row._id, permissionId)\"\n               [disabled]=\"true\"\n               class=\"tw-h-4 tw-w-4 tw-text-blue-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-blue-500\">\n             <label class=\"tw-text-xs tw-text-gray-700\">\n               {{ getPermissionById(permissionId)?.sygms_name || 'Unknown' }}\n             </label>\n           </div>\n         </div>\n      }\n    } @else {\n      <!-- Show green checkmark for parent menus with child permissions -->\n      @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n        @if (hasChildMenusWithPermissions(row._id)) {\n          <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\">\n            <cide-ele-icon \n              class=\"tw-text-green-600\" \n              size=\"xs\">\n              check\n            </cide-ele-icon>\n          </div>\n        } @else {\n          <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n        }\n      } @else {\n        <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n      }\n    }\n  </div>\n</ng-template>\n\n<!-- Menu Rights Permissions Renderer Template -->\n<ng-template #menuRightsPermissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    <!-- Role Rights Display -->\n    @if (row.role_rights && row.role_rights.length > 0) {\n      <div class=\"tw-mb-2\">\n        <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Role Rights:</div>\n        <div class=\"tw-flex tw-flex-wrap tw-gap-1\">\n          @for (right of row.role_rights; track $index) {\n            <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-blue-100 tw-text-blue-800 tw-rounded\">\n              {{ right }}\n            </span>\n          }\n        </div>\n      </div>\n    }\n    \n    <!-- Individual Permission Controls -->\n    <div class=\"tw-grid tw-grid-cols-2 tw-gap-2 tw-w-full\">\n      <div class=\"tw-flex tw-items-center tw-space-x-1\">\n        <input \n          type=\"checkbox\"\n          [checked]=\"row.create\"\n          [disabled]=\"true\"\n          class=\"tw-h-4 tw-w-4 tw-text-green-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-green-500\">\n        <label class=\"tw-text-xs tw-text-gray-700\">Create</label>\n      </div>\n      \n      <div class=\"tw-flex tw-items-center tw-space-x-1\">\n        <input \n          type=\"checkbox\"\n          [checked]=\"row.read\"\n          [disabled]=\"true\"\n          class=\"tw-h-4 tw-w-4 tw-text-blue-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-blue-500\">\n        <label class=\"tw-text-xs tw-text-gray-700\">Read</label>\n      </div>\n      \n      <div class=\"tw-flex tw-items-center tw-space-x-1\">\n        <input \n          type=\"checkbox\"\n          [checked]=\"row.update\"\n          [disabled]=\"true\"\n          class=\"tw-h-4 tw-w-4 tw-text-yellow-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-yellow-500\">\n        <label class=\"tw-text-xs tw-text-gray-700\">Update</label>\n      </div>\n      \n      <div class=\"tw-flex tw-items-center tw-space-x-1\">\n        <input \n          type=\"checkbox\"\n          [checked]=\"row.delete\"\n          [disabled]=\"true\"\n          class=\"tw-h-4 tw-w-4 tw-text-red-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-red-500\">\n        <label class=\"tw-text-xs tw-text-gray-700\">Delete</label>\n      </div>\n    </div>\n    \n    <!-- Exception Indicator -->\n    @if (row.hasException) {\n      <div class=\"tw-mt-2\">\n        <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-yellow-100 tw-text-yellow-800 tw-rounded\">\n          Override\n        </span>\n      </div>\n    } @else {\n      <div class=\"tw-mt-2\">\n        <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\n      </div>\n    }\n  </div>\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleTabComponent, selector: "cide-ele-tab", inputs: ["tabs", "activeTabId", "size", "variant", "fullWidth", "disabled"], outputs: ["tabChange"] }, { kind: "component", type: CideEleFileInputComponent, selector: "cide-ele-file-input", inputs: ["label", "accept", "multiple", "disabled", "required", "helperText", "errorText", "showPreview", "previewWidth", "previewHeight", "previewBoxMode", "showFileName", "placeholderText", "placeholderIcon", "autoUpload", "uploadData"], outputs: ["fileChange", "uploadSuccess", "uploadError", "uploadProgressChange"] }, { kind: "directive", type: CideEleFileImageDirective, selector: "[cideEleFileImage]", inputs: ["fileId", "altText"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreUserCreateComponent, isStandalone: true, selector: "cide-core-user-create", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsCheckboxRendererTemplate", first: true, predicate: ["permissionsCheckboxRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuTypeRendererTemplate", first: true, predicate: ["menuTypeRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuRightsPermissionsRendererTemplate", first: true, predicate: ["menuRightsPermissionsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsRendererTemplate", first: true, predicate: ["permissionsRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \n  ENTERPRISE USER MASTER FORM\n  \n  Enterprise-Level Styling with Tailwind CSS\n  Features: Responsive grids, proper typography, enhanced user experience\n-->\n\n<div class=\"tw-w-full tw-h-full tw-p-1 tw-pt-2\">\n  <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\n    (ngSubmit)=\"onSubmit()\">\n\n    <!-- Success/Error Messages -->\n    @if (success()) {\n    <div class=\"tw-mb-4 tw-p-4 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded-md tw-shadow-sm\">\n      <div class=\"tw-flex tw-items-start\">\n        <cide-ele-icon name=\"check_circle\" class=\"tw-text-green-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n        <div class=\"tw-ml-3\">\n          <h3 class=\"tw-text-sm tw-font-medium tw-text-green-800 tw-m-0\">Success</h3>\n          <p class=\"tw-text-sm tw-text-green-700 tw-mt-1 tw-m-0\">{{ success() }}</p>\n        </div>\n        <button type=\"button\" (click)=\"success.set(null)\" class=\"tw-ml-auto tw-text-green-400 hover:tw-text-green-600\">\n          <cide-ele-icon name=\"close\" class=\"tw-w-4 tw-h-4\"></cide-ele-icon>\n        </button>\n      </div>\n    </div>\n    }\n    @if (error()) {\n    <div class=\"tw-mb-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md tw-shadow-sm\">\n      <div class=\"tw-flex tw-items-start\">\n        <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n        <div class=\"tw-ml-3\">\n          <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n          <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n        </div>\n        <button type=\"button\" (click)=\"error.set(null)\" class=\"tw-ml-auto tw-text-red-400 hover:tw-text-red-600\">\n          <cide-ele-icon name=\"close\" class=\"tw-w-4 tw-h-4\"></cide-ele-icon>\n        </button>\n      </div>\n    </div>\n    }\n\n    <!-- User Context Header -->\n    <div\n      class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-indigo-50 tw-border tw-border-blue-200 tw-rounded-md tw-p-1 tw-mb-2 tw-shadow-sm\">\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\n        <!-- User Basic Info Display -->\n        <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\n          <!-- Profile Photo Preview -->\n          <div class=\"tw-flex tw-items-center tw-gap-2\">\n            <div\n              class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-border tw-border-blue-200 tw-flex tw-items-center tw-justify-center tw-overflow-hidden\">\n              @if (userMasterForm.get('user_photo_id_cyfm')?.value) {\n              <img cideEleFileImage [fileId]=\"userMasterForm.get('user_photo_id_cyfm')?.value\"\n                [altText]=\"'Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover\">\n              } @else {\n              <cide-ele-icon name=\"person\" class=\"tw-w-5 tw-h-5 tw-text-blue-600\">\n              </cide-ele-icon>\n              }\n            </div>\n            <div class=\"tw-flex tw-flex-col\">\n              <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\n                {{ getUserFullName() || 'New User' }}\n              </span>\n              <span class=\"tw-text-xs tw-text-blue-600\">\n                {{ getUserUsername() || 'Username not set' }}\n              </span>\n            </div>\n          </div>\n\n          <!-- Contact Info -->\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">email</cide-ele-icon>\n              <span>{{ getUserEmail() || 'Email not set' }}</span>\n            </div>\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">phone</cide-ele-icon>\n              <span>{{ getUserMobile() || 'Mobile not set' }}</span>\n            </div>\n          </div>\n\n          <!-- Active Status -->\n          <div class=\"tw-flex tw-items-center tw-gap-1\">\n            @if (getUserActiveStatus()) {\n            <span\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-700\">\n              <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">check_circle</cide-ele-icon>\n              Active\n            </span>\n            } @else {\n            <span\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-700\">\n              <cide-ele-icon variant=\"red\" size=\"xs\" class=\"tw-mr-1\">cancel</cide-ele-icon>\n              Inactive\n            </span>\n            }\n          </div>\n        </div>\n\n        <!-- Entity Info -->\n        <div class=\"tw-flex tw-items-center tw-gap-2\">\n          @if (hasDefaultEntity()) {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-blue-700\">\n            <cide-ele-icon variant=\"blue\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-font-medium\">{{ getDefaultEntityName() }}</span>\n          </div>\n          } @else {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-500\">\n            <cide-ele-icon variant=\"gray\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-italic\">No entity</span>\n          </div>\n          }\n\n          <span class=\"tw-text-xs tw-text-gray-600 tw-px-2 tw-py-1 tw-bg-gray-100 tw-rounded\">\n            {{ getEntityMappingCount() }} mapping(s)\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Tab Navigation -->\n    <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\n      <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\n        (tabChange)=\"onTabChange($event)\">\n      </cide-ele-tab>\n    </div>\n\n    <!-- Tab Content -->\n    <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n      @switch (activeTab()) {\n\n      @case ('basic') {\n      <!-- User Basic Information Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n        <!-- Top Section: Form Fields on Left, Profile Photo on Right -->\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4 tw-mb-4\">\n          <!-- Left Side: Form Fields -->\n          <div class=\"tw-space-y-4\">\n            <!-- Name Fields - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\n              <cide-ele-input id=\"user_firstname\" label=\"First Name *\" formControlName=\"user_firstname\"\n                placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\n                placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_lastname\" label=\"Last Name *\" formControlName=\"user_lastname\"\n                placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_fullname\" label=\"Full Name * (Auto-generated)\" formControlName=\"user_fullname\"\n                placeholder=\"Auto-generated from name fields or enter manually\" [maxlength]=\"62\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <!-- Contact Information - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\n              <cide-ele-input id=\"user_username\" label=\"Username *\" formControlName=\"user_username\"\n                placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_emailid\" label=\"Email ID *\" formControlName=\"user_emailid\" type=\"email\"\n                placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number *\" formControlName=\"user_mobileno\" type=\"tel\"\n                placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\n              </cide-ele-input>\n            </div>\n          </div>\n\n          <!-- Right Side: Profile Photo Upload -->\n          <div class=\"tw-flex tw-items-start tw-justify-center tw-p-0\">\n            <cide-ele-file-input id=\"user_photo_id_cyfm\" formControlName=\"user_photo_id_cyfm\" accept=\"image/*\"\n              [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\n              previewHeight=\"120px\" placeholderText=\"Upload Photo\" placeholderIcon=\"cloud_upload\" [autoUpload]=\"true\"\n              [uploadData]=\"getProfilePhotoUploadData()\" (uploadSuccess)=\"onProfilePhotoUploadSuccess($event)\"\n              (uploadError)=\"onProfilePhotoUploadError($event)\"\n              (uploadProgressChange)=\"onProfilePhotoUploadProgress($event)\">\n            </cide-ele-file-input>\n          </div>\n        </div>\n\n\n\n        <!-- Status Control -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-mb-2\">\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\n            <label\n              class=\"tw-flex tw-flex-col tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200 hover:tw-bg-blue-75\">\n              <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\n                class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\n                access and operations</span>\n            </label>\n          </div>\n        </div>\n      </div>\n      }\n\n      @case ('auth') {\n      <!-- Authentication Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <!-- Password Fields -->\n        @if (shouldShowPasswordFields()) {\n        <div class=\"tw-mb-4\">\n          <!-- Password Fields Header for Edit Mode -->\n          @if (isEditMode()) {\n          <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Update Password</h6>\n            <button type=\"button\"\n              class=\"tw-px-3 tw-py-1 tw-bg-gray-100 tw-text-gray-600 tw-border tw-border-gray-300 tw-rounded-md tw-text-xs tw-font-medium hover:tw-bg-gray-200 tw-transition-colors\"\n              (click)=\"cancelPasswordUpdate()\">\n              Cancel Password Update\n            </button>\n          </div>\n          }\n\n          <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6\">\n            <cide-ele-input id=\"user_password\" [label]=\"getPasswordFieldLabel()\" formControlName=\"user_password\"\n              type=\"password\" placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\n            </cide-ele-input>\n\n            <cide-ele-input id=\"user_confirm_password\" [label]=\"getPasswordConfirmLabel()\"\n              formControlName=\"user_confirm_password\" type=\"password\" placeholder=\"Confirm your password\" size=\"md\">\n            </cide-ele-input>\n          </div>\n        </div>\n        }\n\n        <!-- Password Update Option for Edit Mode -->\n        @if (isEditMode() && !shouldShowPasswordFields()) {\n        <div class=\"tw-mb-4\">\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-blue-800 tw-mb-2\">Password Update</h6>\n            <p class=\"tw-text-sm tw-text-blue-600 tw-mb-3\">Current password will be kept. Click below to change\n              password.</p>\n\n            @if (hasPasswordInput()) {\n            <div\n              class=\"tw-mb-3 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded tw-text-sm tw-text-yellow-700\">\n              <cide-ele-icon variant=\"yellow\" size=\"xs\" class=\"tw-mr-1\">warning</cide-ele-icon>\n              Password fields contain text. Click \"Change Password\" to manage existing input.\n            </div>\n            }\n\n            <button type=\"button\"\n              class=\"tw-px-4 tw-py-2 tw-bg-blue-100 tw-text-blue-700 tw-border tw-border-blue-300 tw-rounded-md tw-text-sm tw-font-medium hover:tw-bg-blue-200 tw-transition-colors\"\n              (click)=\"triggerPasswordUpdate()\">\n              @if (hasPasswordInput()) {\n              Manage Password Fields\n              } @else {\n              Change Password\n              }\n            </button>\n          </div>\n        </div>\n        }\n\n        <!-- Password Options -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-gap-4 tw-mb-4\">\n          <div class=\"tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\n            <label\n              class=\"tw-flex tw-flex-col tw-gap-2 tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200\">\n              <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\n                formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\n                password on next login</span>\n            </label>\n          </div>\n        </div>\n\n      </div>\n      }\n\n      @case ('roles') {\n      <!-- Entity, Roles & Permissions Mapping Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n\n\n        <!-- Important Note -->\n        <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-2 tw-mb-4\">\n          <div class=\"tw-flex tw-items-start tw-gap-3\">\n            <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\n            <div class=\"tw-flex-1\">\n              <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\n              <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role\n                mappings below. At least one entity mapping is required for user access.</p>\n              @if (hasDefaultEntity()) {\n              <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\n                <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\n                <span class=\"tw-text-sm tw-text-amber-800\">\n                  <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\n                </span>\n              </div>\n              } @else {\n              <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\n                \u26A0\uFE0F No default entity selected. Please set one entity as default.\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <!-- Entity-Role Mapping Section -->\n        <div class=\"tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg tw-p-3 tw-mb-4\">\n          <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\n            <div>\n              <h4 class=\"tw-text-sm tw-text-left tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\n              <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\n            </div>\n            <div class=\"tw-flex tw-flex-col tw-items-end\">\n              <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\"\n                leftIcon=\"add\" [disabled]=\"isAllEntitiesMapped()\">\n                Add Entity Mapping\n              </button>\n\n              @if (isAllEntitiesMapped()) {\n              <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-md tw-max-w-xs\">\n                <p class=\"tw-text-xs tw-text-blue-700\">\n                  <cide-ele-icon variant=\"info\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n                  All available entities are already mapped.\n                </p>\n              </div>\n              }\n            </div>\n          </div>\n\n          <div formArrayName=\"core_entity_mapping\">\n            @for (mapping of entityMappings(); track $index; let i = $index) {\n            <div class=\"tw-bg-white tw-border tw-border-blue-200 tw-rounded-xl tw-mb-6 tw-overflow-hidden tw-shadow-sm\"\n              [formGroupName]=\"i\">\n              <div\n                class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-blue-100 tw-px-6 tw-py-3 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-blue-200\">\n                <div class=\"tw-flex tw-items-center tw-gap-2\">\n                  <h5 class=\"tw-m-0 tw-text-blue-800 tw-text-sm tw-font-semibold\">Entity Mapping {{ i + 1 }}</h5>\n                  @if (mapping.syenm_isdefault) {\n                  <span\n                    class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n                    <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">star</cide-ele-icon>\n                    Default\n                  </span>\n                  }\n                </div>\n                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeEntityMapping(i)\"\n                  leftIcon=\"delete\">\n                  Remove\n                </button>\n              </div>\n\n              <div>\n                <!-- Entity and Role Selection -->\n                <div class=\"tw-grid tw-px-3 tw-py-1 tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-mb-4\">\n                  <div>\n                    <cide-ele-select label=\"Entity *\" [options]=\"getFilteredEntityOptions(i)\"\n                      formControlName=\"syenm_entity_id_syen\" valueKey=\"_id\" labelKey=\"syen_name\"\n                      placeholder=\"Select entity\" size=\"md\" (change)=\"onEntityChange(i, $event)\">\n                    </cide-ele-select>\n\n                    @if (isAllEntitiesSelected(i)) {\n                    <div class=\"tw-mt-2 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded-md\">\n                      <p class=\"tw-text-xs tw-text-yellow-700\">\n                        <cide-ele-icon variant=\"warning\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n                        All entities are already mapped. Remove another mapping to add this one.\n                      </p>\n                    </div>\n                    }\n                  </div>\n                  <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\n                    formControlName=\"syenm_role_id_syusrol\" valueKey=\"_id\" labelKey=\"syusrol_role_name\"\n                    placeholder=\"Select role for this entity\" size=\"md\" (change)=\"onRoleChange(i, $event)\">\n                  </cide-ele-select>\n                </div>\n\n\n                <!-- Entity-Specific Details and Active Period - All in One Row -->\n                <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4 tw-mb-4\">\n                  <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\n                    formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\"\n                    labelKey=\"sydept_name\" placeholder=\"Select department\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-select label=\"Designation for this Entity\" [options]=\"getDesignationOptionsForEntity(i)\"\n                    valueKey=\"_id\" labelKey=\"sydsg_name\" formControlName=\"syenm_designation_id_sydsg\"\n                    placeholder=\"Select designation\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-input label=\"Active From *\" [id]=\"'syenm_activefrom['+i+']'\"\n                    formControlName=\"syenm_activefrom\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n\n                  <cide-ele-input label=\"Active Until\" [id]=\"'syenm_activeupto['+i+']'\"\n                    formControlName=\"syenm_activeupto\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n                </div>\n\n                <!-- Mapping Settings -->\n                <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4 tw-mb-4\">\n                  <div class=\"tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded-lg\">\n                    <cide-ele-input type=\"checkbox\" label=\"Default Entity\" formControlName=\"syenm_isdefault\"\n                      (change)=\"onDefaultEntityChange(i, $event)\" class=\"tw-h-5 tw-accent-green-500\" />\n                    <span class=\"tw-text-xs tw-text-green-600 tw-block tw-mt-1\">Set as user's default entity (only one\n                      allowed)</span>\n                  </div>\n\n                  <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n                    <cide-ele-input type=\"checkbox\" label=\"Active Mapping\" formControlName=\"syenm_isactive\"\n                      class=\"tw-h-5 tw-accent-blue-500\" />\n                    <span class=\"tw-text-xs tw-text-blue-600 tw-block tw-mt-1\">Enable this entity mapping</span>\n                  </div>\n                </div>\n\n                <!-- Menu Rights Grid for this Entity-Role -->\n                <div class=\"tw-border-t tw-border-gray-200\">\n\n                  @if (getMenuRightsForMapping(i).length > 0) {\n                  <!-- Menu Rights Tree Grid -->\n\n                  <cide-ele-data-grid [config]=\"getMenuRightsGridConfig(i)\"\n                    [templateRenderers]=\"getMenuRightsTemplateRenderers(i)\"\n                    (gridEvent)=\"onMenuRightsGridEvent($event, i)\" class=\"tw-h-96 tw-w-full\">\n                  </cide-ele-data-grid>\n\n                  } @else {\n                  <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\n                    <div class=\"tw-text-gray-400 tw-mb-3\">\n                      <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\n                    </div>\n                    <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\n                    <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to\n                      automatically load\n                      menu rights for this mapping.</p>\n                  </div>\n                  }\n                </div>\n              </div>\n            </div>\n            }\n          </div>\n\n          @if (entityMappings().length === 0) {\n          <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\n            <div class=\"tw-text-blue-400 tw-mb-3\">\n              <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\n            </div>\n            <h4 class=\"tw-text-sm tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\n            <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and\n              permissions for different entities.</p>\n            <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\"\n              (click)=\"addEntityMapping()\" leftIcon=\"add\">\n              Add First Entity Mapping\n            </button>\n          </div>\n          }\n        </div>\n\n\n      </div>\n      }\n\n      @case ('addresses') {\n      <!-- Contact Addresses Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end\">\n          <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\n              leftIcon=\"add\">\n              Add New Address\n            </button>\n          </div>\n        </div>\n\n        <div formArrayName=\"core_user_contact_addresses\">\n          @for (address of contactAddresses(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n            <div\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <!-- Use address type as header instead of generic \"Address X\" -->\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n                {{ getAddressTypeLabel(i) || ('Address ' + (i + 1)) }}\n              </h4>\n              <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\n                leftIcon=\"delete\">\n                Remove\n              </button>\n            </div>\n            <div class=\"tw-p-4\">\n              <!-- Main Layout: Inputs on Left, Address Textarea on Right -->\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n                \n                <!-- Left Side: Input Fields (3/4 width) -->\n                <div class=\"lg:tw-col-span-3\">\n                  <!-- Row 1: Address Type, Contact Person -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mb-3\">\n                    <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\" id=\"sycad_address_type_id_sygms\"\n                      formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onAddressTypeChange(i)\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"Contact Person\" formControlName=\"sycad_contact_person_name\"\n                      placeholder=\"Enter contact person\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 2: Postal Code, City, State, Country -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\n                    <cide-ele-select label=\"Postal Code\" [options]=\"addressPostalCodes()[i] || []\"\n                      formControlName=\"sycad_contact_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\n                      [loading]=\"addressPostalCodesLoading()[i] || false\" (searchChange)=\"onPostalCodeSearch($event, i)\"\n                      (change)=\"onPostalCodeSelection($event, i)\" size=\"sm\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"City\" formControlName=\"sycad_contact_city_sypin\" placeholder=\"Enter city\"\n                      size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"State\" formControlName=\"sycad_contact_state_sypin\" placeholder=\"Enter state\"\n                      size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-select label=\"Country\" [options]=\"addressCountries()[i] || []\"\n                      formControlName=\"sycad_contact_country_syctr\" placeholder=\"Select country\" valueKey=\"_id\"\n                      labelKey=\"syctr_country_iso_name\" [searchable]=\"true\" (searchChange)=\"onCountrySearch($event, i)\"\n                      [loading]=\"addressCountriesLoading()[i] || false\" size=\"sm\">\n                    </cide-ele-select>\n                  </div>\n                </div>\n\n                <!-- Right Side: Address Textarea (1/4 width, spans 2 rows) -->\n                <div class=\"lg:tw-col-span-1 lg:tw-row-span-2 tw-flex tw-flex-col\">\n                  <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\n                    placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"4\" size=\"sm\"\n                    class=\"tw-h-full\">\n                  </cide-ele-textarea>\n                </div>\n              </div>\n\n              <!-- Contact Details: Primary Phone, Alt Phone, Fax, Primary Email in 4 columns -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Primary Phone\" formControlName=\"sycad_contact_phone\" type=\"tel\"\n                  placeholder=\"Primary phone\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Alternate Phone\" formControlName=\"sycad_contact_phone_alt\" type=\"tel\"\n                  placeholder=\"Alternate phone\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Fax Number\" formControlName=\"sycad_contact_fax\" placeholder=\"Fax number\"\n                  size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Primary Email\" formControlName=\"sycad_contact_email\" type=\"email\"\n                  placeholder=\"Primary email\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Alternate Email in single row -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                <cide-ele-input label=\"Alternate Email\" formControlName=\"sycad_contact_email_alt\" type=\"email\"\n                  placeholder=\"Alternate email address\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('documents') {\n      <!-- Documents Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\">\n            Add Document\n          </button>\n        </div>\n\n        <div formArrayName=\"core_user_documents\">\n          @for (doc of documents(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n            <div\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n                {{ getDocumentTypeLabel(i) || ('Document ' + (i + 1)) }}\n              </h4>\n              <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeDocument(i)\"\n                leftIcon=\"delete\">\n                Remove\n              </button>\n            </div>\n            <div class=\"tw-p-4\">\n              <!-- Main Layout: Inputs on Left, File Upload on Right -->\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-3 tw-gap-4\">\n                \n                <!-- Left Side: Document Information (2/3 width) -->\n                <div class=\"lg:tw-col-span-2\">\n                  <!-- Row 1: Document Type, Document Number, Name as per Document -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                    <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\n                      formControlName=\"syusd_document_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onDocumentTypeChange(i)\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"Document Number\" formControlName=\"syusd_doc_number\"\n                      placeholder=\"Document number\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"Name as per Document\" formControlName=\"syusd_doc_name_as_per_doc\"\n                      placeholder=\"Name on document\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 2: Issue Date, Expiry Date, Photo Group -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                    <cide-ele-input label=\"Issue Date\" formControlName=\"syusd_doc_issue_date\"\n                      [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"Expiry Date\" formControlName=\"syusd_doc_expiry_date\"\n                      [id]=\"'syusd_doc_expiry_date['+i+']'\" type=\"date\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-select label=\"Photo Group\" [options]=\"photoGroupOptions()\"\n                      formControlName=\"syusd_photo_group_id_cyfm\" placeholder=\"Select group\" size=\"sm\" valueKey=\"_id\"\n                      labelKey=\"cyfm_name\">\n                    </cide-ele-select>\n                  </div>\n\n                  <!-- Row 3: Verification Status, KYC Status -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                    <cide-ele-select label=\"Verification Status\" [options]=\"documentVerificationStatusOptions()\"\n                      formControlName=\"syusd_doc_verification_status_id_sygms\" placeholder=\"Select status\"\n                      size=\"sm\" valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n\n                    <cide-ele-select label=\"KYC Status\" [options]=\"documentKycStatusOptions()\"\n                      formControlName=\"syusd_doc_kyc_status_id_sygms\" placeholder=\"Select KYC status\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n                  </div>\n                </div>\n\n                <!-- Right Side: File Upload (1/3 width) -->\n                <div class=\"lg:tw-col-span-1\">\n                  <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-3 tw-h-full\">\n                    <h5 class=\"tw-text-sm tw-font-medium tw-text-gray-700 tw-mb-3 tw-m-0\">Document Files</h5>\n                    \n                    <!-- File Upload Input -->\n                     {{documentsFormArray.at(i).get('syusd_photo_group_id_cyfm')?.value}}\n                    <cide-ele-file-input\n                      [id]=\"'document-files-' + i\"\n                      [multiple]=\"true\"\n                      formControlName=\"syusd_photo_group_id_cyfm\"\n                      [accept]=\"'.pdf,.jpg,.jpeg,.png,.doc,.docx'\"\n                      [autoUpload]=\"true\"\n                      [uploadData]=\"getDocumentUploadData(i)\"\n                      (change)=\"onDocumentFilesSelected($event, i)\"\n                      (uploadSuccess)=\"onDocumentUploadSuccess($event, i)\"\n                      (uploadError)=\"onDocumentUploadError($event, i)\"\n                      (uploadProgressChange)=\"onDocumentUploadProgress($event, i)\"\n                      cideFloatingUploadTrigger\n                      class=\"tw-mb-3\"\n                      size=\"sm\">\n                      <div class=\"tw-text-center tw-py-4\">\n                        <cide-ele-icon name=\"cloud_upload\" class=\"tw-w-6 tw-h-6 tw-text-gray-400 tw-mx-auto tw-mb-2\"></cide-ele-icon>\n                        <p class=\"tw-text-xs tw-text-gray-600 tw-m-0\">Upload document files</p>\n                        <p class=\"tw-text-xs tw-text-gray-400 tw-m-0\">PDF, Images, Word docs</p>\n                      </div>\n                    </cide-ele-file-input>\n\n                    <!-- Upload Status -->\n                    @if (getDocumentGroupId(i)) {\n                    <div class=\"tw-space-y-2\">\n                      <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n                        <h6 class=\"tw-text-xs tw-font-medium tw-text-gray-600 tw-m-0\">Upload Status:</h6>\n                        <span class=\"tw-text-xs tw-text-green-600 tw-font-medium\">\n                          \u2705 Files Uploaded\n                        </span>\n                      </div>\n                      <div class=\"tw-bg-green-50 tw-border tw-border-green-200 tw-rounded tw-p-2\">\n                        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n                          <cide-ele-icon name=\"cloud_done\" class=\"tw-w-4 tw-h-4 tw-text-green-500 tw-flex-shrink-0\"></cide-ele-icon>\n                          <div class=\"tw-flex tw-flex-col tw-flex-1 tw-min-w-0\">\n                            <span class=\"tw-text-xs tw-text-green-700 tw-font-medium\">Multiple files uploaded successfully</span>\n                            <span class=\"tw-text-xs tw-text-green-600 tw-font-mono tw-truncate\" [title]=\"'Group ID: ' + getDocumentGroupId(i)\">\n                              Group ID: {{ getDocumentGroupId(i).substring(0, 12) }}...\n                            </span>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                    } @else {\n                    <div class=\"tw-text-center tw-text-xs tw-text-gray-400 tw-py-2\">\n                      No files uploaded yet\n                    </div>\n                    }\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('family') {\n      <!-- Family Details Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\">\n            Add Family Member\n          </button>\n        </div>\n\n        <div formArrayName=\"core_user_family_details\">\n          @for (family of familyDetails(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n            <div\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-6 tw-py-1 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">Family Member {{ i + 1\n                }}\n              </h4>\n              <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeFamilyDetail(i)\"\n                leftIcon=\"delete\">\n                Remove\n              </button>\n            </div>\n            <div class=\"tw-p-3\">\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-input label=\"Family Member Name\" formControlName=\"syfdl_family_member_name\"\n                  placeholder=\"Enter family member full name\" size=\"md\">\n                </cide-ele-input>\n\n                <cide-ele-select label=\"Family Member User\" [options]=\"userOptions(i)\"\n                  formControlName=\"syfdl_family_member_id_user\" placeholder=\"Select family member user\" size=\"md\"\n                  valueKey=\"_id\" labelKey=\"user_fullname\" [searchable]=\"true\"\n                  [loading]=\"userSearchLoading()[i] || false\" (searchChange)=\"onUserSearchChange($event, i)\"\n                  (change)=\"onUserSelectionChange($event, i)\">\n                </cide-ele-select>\n              </div>\n\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\n                  formControlName=\"syfdl_relationship_id_sygms\" placeholder=\"Select relationship\" size=\"md\"\n                  valueKey=\"_id\" labelKey=\"sygms_title\">\n                </cide-ele-select>\n\n                <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\n                  formControlName=\"syfdl_blood_group_sygms\" placeholder=\"Select blood group\" size=\"md\" valueKey=\"_id\"\n                  labelKey=\"sygms_title\">\n                </cide-ele-select>\n              </div>\n\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-input label=\"Date of Birth\" formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"md\"\n                  [id]=\"'syfdl_family_member_dob['+i+']'\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Phone\" formControlName=\"syfdl_contact_phone\" type=\"tel\"\n                  placeholder=\"Enter contact phone\" size=\"md\">\n                </cide-ele-input>\n              </div>\n\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\" type=\"email\"\n                  placeholder=\"Enter contact email\" size=\"md\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\" type=\"email\"\n                  placeholder=\"Enter contact email ID\" size=\"md\">\n                </cide-ele-input>\n              </div>\n\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\n                <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\" type=\"tel\"\n                  placeholder=\"Enter contact number\" size=\"md\">\n                </cide-ele-input>\n\n                <div class=\"tw-flex tw-items-center tw-pt-6\">\n                  <cide-ele-input formControlName=\"syfdl_isactive\" type=\"checkbox\" label=\"Active\" size=\"md\">\n                  </cide-ele-input>\n                </div>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n      }\n    </div>\n\n    <!-- Form Actions -->\n    <div\n      class=\"tw-flex tw-justify-end tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\n      <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n        [disabled]=\"loading()\">\n        Reset Form\n      </button>\n\n      <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\n        [loading]=\"loading()\" leftIcon=\"save\">\n        Save User Master\n      </button>\n    </div>\n  </form>\n</div>\n\n<!-- Template Renderers for Role Permissions Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3 tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      @if (row.syme_type === 'module') {\n      <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">folder</cide-ele-icon>\n      } @else if (row.syme_type === 'section') {\n      <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">folder_open</cide-ele-icon>\n      } @else if (row.syme_type === 'menu') {\n      <cide-ele-icon class=\"tw-text-purple-600 tw-w-4 tw-h-4\">menu</cide-ele-icon>\n      } @else {\n      <cide-ele-icon class=\"tw-text-gray-600 tw-w-4 tw-h-4\">description</cide-ele-icon>\n      }\n    </div>\n\n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.syme_title\">\n          {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n        </div>\n        <!-- Green pill indicator for parent menus with child permissions -->\n        @if (row.syme_type === 'module' || row.syme_type === 'section') {\n        @if (hasChildMenusWithPermissions(row._id)) {\n        <span\n          class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-whitespace-nowrap\">\n          Assigned\n        </span>\n        }\n        }\n      </div>\n      @if (row.permission?.sygms_name) {\n      <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" [title]=\"row.permission?.sygms_name\">\n        {{ row.permission?.sygms_name }}\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-justify-center\">\n    @if (row.syme_type === 'module') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n      Module\n    </span>\n    } @else if (row.syme_type === 'section') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n      Section\n    </span>\n    } @else if (row.syme_type === 'menu') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-purple-100 tw-text-purple-800\">\n      Menu\n    </span>\n    } @else {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800\">\n      {{ row.syme_type || 'Unknown' }}\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n    @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n    <div class=\"tw-flex tw-items-center tw-space-x-1\">\n      <div class=\"tw-flex tw-items-center tw-space-x-1\">\n        <input type=\"checkbox\" [checked]=\"isPermissionSelected(row._id, permissionId)\" [disabled]=\"true\"\n          class=\"tw-h-4 tw-w-4 tw-text-blue-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-blue-500\">\n        <label class=\"tw-text-xs tw-text-gray-700\">\n          {{ getPermissionById(permissionId)?.sygms_name || 'Unknown' }}\n        </label>\n      </div>\n    </div>\n    }\n    } @else {\n    <!-- Show green checkmark for parent menus with child permissions -->\n    @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n    @if (hasChildMenusWithPermissions(row._id)) {\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\">\n      <cide-ele-icon class=\"tw-text-green-600\" size=\"xs\">\n        check\n      </cide-ele-icon>\n    </div>\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n    }\n  </div>\n</ng-template>\n\n<!-- Menu Rights Permissions Renderer Template -->\n<ng-template #menuRightsPermissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    <!-- Role Rights Display -->\n    @if (row.role_rights && row.role_rights.length > 0) {\n    <div class=\"tw-mb-2\">\n      <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Role Rights:</div>\n      <div class=\"tw-flex tw-flex-wrap tw-gap-1\">\n        @for (right of row.role_rights; track $index) {\n        <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-blue-100 tw-text-blue-800 tw-rounded\">\n          {{ right }}\n        </span>\n        }\n      </div>\n    </div>\n    }\n\n\n    <!-- Exception Indicator -->\n    @if (row.hasException) {\n    <div class=\"tw-mt-2\">\n      <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-yellow-100 tw-text-yellow-800 tw-rounded\">\n        Override\n      </span>\n    </div>\n    } @else {\n    <div class=\"tw-mt-2\">\n      <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\n    </div>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row._permissionValues && Object.keys(row._permissionValues).length > 0) {\n    @for (permissionId of Object.keys(row._permissionValues); track permissionId) {\n    <div class=\"tw-flex tw-items-center tw-space-x-2\">\n      <cide-ele-input type=\"checkbox\" [ngModel]=\"row._permissionValues[permissionId].checked\"\n        (ngModelChange)=\"onPermissionChangeSafe($event, row, permissionId)\"\n        [id]=\"'permission-' + row._id + '-' + permissionId\" class=\"tw-h-4 tw-w-4\">\n      </cide-ele-input>\n      <label [for]=\"'permission-' + row._id + '-' + permissionId\" class=\"tw-text-xs tw-text-gray-700 tw-cursor-pointer\">\n        {{ row._permissionValues[permissionId].permission?.sygms_title }}\n      </label>\n    </div>\n    }\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">No permissions</span>\n    }\n  </div>\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleTabComponent, selector: "cide-ele-tab", inputs: ["tabs", "activeTabId", "size", "variant", "fullWidth", "disabled"], outputs: ["tabChange"] }, { kind: "component", type: CideEleFileInputComponent, selector: "cide-ele-file-input", inputs: ["label", "accept", "multiple", "disabled", "required", "helperText", "errorText", "showPreview", "previewWidth", "previewHeight", "previewBoxMode", "showFileName", "placeholderText", "placeholderIcon", "autoUpload", "uploadData"], outputs: ["fileChange", "uploadSuccess", "uploadError", "uploadProgressChange"] }, { kind: "directive", type: CideEleFileImageDirective, selector: "[cideEleFileImage]", inputs: ["fileId", "altText"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "directive", type: CideLytFloatingUploadTriggerDirective, selector: "[cideFloatingUploadTrigger]", inputs: ["userId"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserCreateComponent, decorators: [{
             type: Component,
@@ -13359,8 +14176,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideEleFileInputComponent,
                         CideEleFileImageDirective,
                         CideIconComponent,
-                        CideEleDataGridComponent
-                    ], template: "<!-- \n  ENTERPRISE USER MASTER FORM\n  \n  Enterprise-Level Styling with Tailwind CSS\n  Features: Responsive grids, proper typography, enhanced user experience\n-->\n\n<div class=\"tw-w-full tw-h-full tw-p-3\">\n  <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\n    (ngSubmit)=\"onSubmit()\">\n\n    <!-- User Context Header -->\n    <div\n      class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-indigo-50 tw-border tw-border-blue-200 tw-rounded-md tw-p-2 tw-mb-3 tw-shadow-sm\">\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\n        <!-- User Basic Info Display -->\n        <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\n          <!-- Profile Photo Preview -->\n          <div class=\"tw-flex tw-items-center tw-gap-2\">\n            <div\n              class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-border tw-border-blue-200 tw-flex tw-items-center tw-justify-center tw-overflow-hidden\">\n              @if (userMasterForm.get('user_photo_id_cyfm')?.value) {\n                <img \n                  cideEleFileImage \n                  [fileId]=\"userMasterForm.get('user_photo_id_cyfm')?.value\" \n                  [altText]=\"'Profile Photo'\"\n                  class=\"tw-w-full tw-h-full tw-object-cover\">\n              } @else {\n                <cide-ele-icon \n                  name=\"person\" \n                  class=\"tw-w-5 tw-h-5 tw-text-blue-600\">\n                </cide-ele-icon>\n              }\n            </div>\n            <div class=\"tw-flex tw-flex-col\">\n              <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\n                {{ getUserFullName() || 'New User' }}\n              </span>\n              <span class=\"tw-text-xs tw-text-blue-600\">\n                {{ getUserUsername() || 'Username not set' }}\n              </span>\n            </div>\n          </div>\n\n          <!-- Contact Info -->\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">email</cide-ele-icon>\n              <span>{{ getUserEmail() || 'Email not set' }}</span>\n            </div>\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">phone</cide-ele-icon>\n              <span>{{ getUserMobile() || 'Mobile not set' }}</span>\n            </div>\n          </div>\n\n          <!-- Active Status -->\n          <div class=\"tw-flex tw-items-center tw-gap-1\">\n            @if (getUserActiveStatus()) {\n            <span\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-700\">\n              <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">check_circle</cide-ele-icon>\n              Active\n            </span>\n            } @else {\n            <span\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-700\">\n              <cide-ele-icon variant=\"red\" size=\"xs\" class=\"tw-mr-1\">cancel</cide-ele-icon>\n              Inactive\n            </span>\n            }\n          </div>\n        </div>\n\n        <!-- Entity Info -->\n        <div class=\"tw-flex tw-items-center tw-gap-2\">\n          @if (hasDefaultEntity()) {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-blue-700\">\n            <cide-ele-icon variant=\"blue\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-font-medium\">{{ getDefaultEntityName() }}</span>\n          </div>\n          } @else {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-500\">\n            <cide-ele-icon variant=\"gray\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-italic\">No entity</span>\n          </div>\n          }\n\n          <span class=\"tw-text-xs tw-text-gray-600 tw-px-2 tw-py-1 tw-bg-gray-100 tw-rounded\">\n            {{ getEntityMappingCount() }} mapping(s)\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Tab Navigation -->\n    <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\n      <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\n        (tabChange)=\"onTabChange($event)\">\n      </cide-ele-tab>\n    </div>\n\n    <!-- Tab Content -->\n    <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n      @switch (activeTab()) {\n\n      @case ('basic') {\n      <!-- User Basic Information Section -->\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\n\n        <!-- Top Section: Form Fields on Left, Profile Photo on Right -->\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-6 tw-mb-6\">\n          <!-- Left Side: Form Fields -->\n          <div class=\"tw-space-y-6\">\n            <!-- Name Fields - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\n              <cide-ele-input id=\"user_firstname\" label=\"First Name *\" formControlName=\"user_firstname\"\n                placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\n                placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_lastname\" label=\"Last Name *\" formControlName=\"user_lastname\"\n                placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_fullname\" label=\"Full Name * (Auto-generated)\" formControlName=\"user_fullname\"\n                placeholder=\"Auto-generated from name fields or enter manually\" [maxlength]=\"62\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <!-- Contact Information - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\n              <cide-ele-input id=\"user_username\" label=\"Username *\" formControlName=\"user_username\"\n                placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_emailid\" label=\"Email ID *\" formControlName=\"user_emailid\" type=\"email\"\n                placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number *\" formControlName=\"user_mobileno\" type=\"tel\"\n                placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\n              </cide-ele-input>\n            </div>\n          </div>\n\n          <!-- Right Side: Profile Photo Upload -->\n          <div class=\"tw-flex tw-items-start tw-justify-center tw-p-0\">\n            <cide-ele-file-input \n              id=\"user_photo_id_cyfm\" \n              formControlName=\"user_photo_id_cyfm\"\n              accept=\"image/*\"\n              [showPreview]=\"true\"\n              [previewBoxMode]=\"true\"\n              [showFileName]=\"false\"\n              previewWidth=\"180px\"\n              previewHeight=\"120px\"\n              placeholderText=\"Upload Photo\"\n              placeholderIcon=\"cloud_upload\"\n              [autoUpload]=\"true\"\n              [uploadData]=\"getProfilePhotoUploadData()\"\n              (uploadSuccess)=\"onProfilePhotoUploadSuccess($event)\"\n              (uploadError)=\"onProfilePhotoUploadError($event)\"\n              (uploadProgressChange)=\"onProfilePhotoUploadProgress($event)\">\n            </cide-ele-file-input>\n          </div>\n        </div>\n\n\n\n        <!-- Status Control -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-mb-4\">\n          <div class=\"tw-p-4 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\n            <label\n              class=\"tw-flex tw-flex-col tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200 hover:tw-bg-blue-75\">\n              <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\n                class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\n                access and operations</span>\n            </label>\n          </div>\n        </div>\n      </div>\n      }\n\n      @case ('auth') {\n      <!-- Authentication Section -->\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\n        <!-- Password Fields -->\n        @if (shouldShowPasswordFields()) {\n        <div class=\"tw-mb-6\">\n          <!-- Password Fields Header for Edit Mode -->\n          @if (isEditMode()) {\n          <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Update Password</h6>\n            <button type=\"button\"\n              class=\"tw-px-3 tw-py-1 tw-bg-gray-100 tw-text-gray-600 tw-border tw-border-gray-300 tw-rounded-md tw-text-xs tw-font-medium hover:tw-bg-gray-200 tw-transition-colors\"\n              (click)=\"cancelPasswordUpdate()\">\n              Cancel Password Update\n            </button>\n          </div>\n          }\n\n          <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6\">\n            <cide-ele-input id=\"user_password\" [label]=\"getPasswordFieldLabel()\" formControlName=\"user_password\"\n              type=\"password\" placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\n            </cide-ele-input>\n\n            <cide-ele-input id=\"user_confirm_password\" [label]=\"getPasswordConfirmLabel()\"\n              formControlName=\"user_confirm_password\" type=\"password\" placeholder=\"Confirm your password\" size=\"md\">\n            </cide-ele-input>\n          </div>\n        </div>\n        }\n\n        <!-- Password Update Option for Edit Mode -->\n        @if (isEditMode() && !shouldShowPasswordFields()) {\n        <div class=\"tw-mb-6\">\n          <div class=\"tw-p-4 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-blue-800 tw-mb-2\">Password Update</h6>\n            <p class=\"tw-text-sm tw-text-blue-600 tw-mb-3\">Current password will be kept. Click below to change\n              password.</p>\n\n            @if (hasPasswordInput()) {\n            <div\n              class=\"tw-mb-3 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded tw-text-sm tw-text-yellow-700\">\n              <cide-ele-icon variant=\"yellow\" size=\"xs\" class=\"tw-mr-1\">warning</cide-ele-icon>\n              Password fields contain text. Click \"Change Password\" to manage existing input.\n            </div>\n            }\n\n            <button type=\"button\"\n              class=\"tw-px-4 tw-py-2 tw-bg-blue-100 tw-text-blue-700 tw-border tw-border-blue-300 tw-rounded-md tw-text-sm tw-font-medium hover:tw-bg-blue-200 tw-transition-colors\"\n              (click)=\"triggerPasswordUpdate()\">\n              @if (hasPasswordInput()) {\n              Manage Password Fields\n              } @else {\n              Change Password\n              }\n            </button>\n          </div>\n        </div>\n        }\n\n        <!-- Password Options -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-gap-6 tw-mb-6\">\n          <div class=\"tw-p-4 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\n            <label\n              class=\"tw-flex tw-flex-col tw-gap-2 tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200\">\n              <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\n                formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\n                password on next login</span>\n            </label>\n          </div>\n        </div>\n\n      </div>\n      }\n\n      @case ('roles') {\n      <!-- Entity, Roles & Permissions Mapping Section -->\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\n\n\n\n        <!-- Important Note -->\n        <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-4 tw-mb-6\">\n          <div class=\"tw-flex tw-items-start tw-gap-3\">\n            <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\n            <div class=\"tw-flex-1\">\n              <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\n              <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role\n                mappings below. At least one entity mapping is required for user access.</p>\n              @if (hasDefaultEntity()) {\n              <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\n                <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\n                <span class=\"tw-text-sm tw-text-amber-800\">\n                  <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\n                </span>\n              </div>\n              } @else {\n              <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\n                \u26A0\uFE0F No default entity selected. Please set one entity as default.\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <!-- Entity-Role Mapping Section -->\n        <div class=\"tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg tw-p-6 tw-mb-6\">\n          <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\n            <div>\n              <h4 class=\"tw-text-sm tw-text-left tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\n              <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\n            </div>\n            <div class=\"tw-flex tw-flex-col tw-items-end\">\n              <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\" leftIcon=\"add\"\n                [disabled]=\"isAllEntitiesMapped()\">\n              Add Entity Mapping\n            </button>\n              \n              @if (isAllEntitiesMapped()) {\n              <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-md tw-max-w-xs\">\n                <p class=\"tw-text-xs tw-text-blue-700\">\n                  <cide-ele-icon variant=\"info\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n                  All available entities are already mapped.\n                </p>\n              </div>\n              }\n            </div>\n          </div>\n\n          <div formArrayName=\"core_entity_mapping\">\n            @for (mapping of entityMappings(); track $index; let i = $index) {\n            <div class=\"tw-bg-white tw-border tw-border-blue-200 tw-rounded-xl tw-mb-6 tw-overflow-hidden tw-shadow-sm\"\n              [formGroupName]=\"i\">\n              <div\n                class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-blue-100 tw-px-6 tw-py-3 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-blue-200\">\n                <div class=\"tw-flex tw-items-center tw-gap-2\">\n                  <h5 class=\"tw-m-0 tw-text-blue-800 tw-text-sm tw-font-semibold\">Entity Mapping {{ i + 1 }}</h5>\n                  @if (mapping.syenm_isdefault) {\n                  <span\n                    class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n                    <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">star</cide-ele-icon>\n                    Default\n                  </span>\n                  }\n                </div>\n                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeEntityMapping(i)\"\n                  leftIcon=\"delete\">\n                  Remove\n                </button>\n              </div>\n\n              <div class=\"tw-p-6\">\n                <!-- Entity and Role Selection -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                  <div>\n                    <cide-ele-select label=\"Entity *\" [options]=\"getFilteredEntityOptions(i)\" formControlName=\"syenm_entity_id_syen\"\n                    valueKey=\"_id\" labelKey=\"syen_name\" placeholder=\"Select entity\" size=\"md\"\n                    (change)=\"onEntityChange(i, $event)\">\n                  </cide-ele-select>\n                    \n                    @if (isAllEntitiesSelected(i)) {\n                    <div class=\"tw-mt-2 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded-md\">\n                      <p class=\"tw-text-xs tw-text-yellow-700\">\n                        <cide-ele-icon variant=\"warning\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n                        All entities are already mapped. Remove another mapping to add this one.\n                      </p>\n                    </div>\n                    }\n                  </div>\n                  <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\n                    formControlName=\"syenm_role_id_syusrol\" valueKey=\"_id\" labelKey=\"syusrol_role_name\" placeholder=\"Select role for this entity\" size=\"md\"\n                    (change)=\"onRoleChange(i, $event)\">\n                  </cide-ele-select>\n                </div>\n\n                <!-- Role Permissions Grid -->\n                @if (selectedEntityIndex() === i && selectedRoleId()) {\n                  <div class=\"tw-mb-6 tw-border tw-border-gray-200 tw-rounded-lg tw-bg-gray-50\">\n                    <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-white tw-rounded-t-lg\">\n                      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n                        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">security</cide-ele-icon>\n                        <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-m-0\">Role Permissions Preview</h6>\n                        <span class=\"tw-text-xs tw-text-gray-500\">(Read-only view of selected role permissions)</span>\n                      </div>\n                    </div>\n                    \n                    <div class=\"tw-p-4\">\n                      @if (loading()) {\n                        <div class=\"tw-flex tw-items-center tw-justify-center tw-py-8\">\n                          <div class=\"tw-animate-spin tw-rounded-full tw-h-8 tw-w-8 tw-border-b-2 tw-border-blue-600\"></div>\n                          <span class=\"tw-ml-2 tw-text-gray-600\">Loading role permissions...</span>\n                        </div>\n                      } @else if (error()) {\n                        <div class=\"tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n                          <div class=\"tw-flex tw-items-start\">\n                            <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n                            <div class=\"tw-ml-3\">\n                              <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n                              <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n                            </div>\n                          </div>\n                        </div>\n                      } @else {\n                        <cide-ele-data-grid \n                          [config]=\"rolePermissionsGridConfig()\" \n                          [templateRenderers]=\"templateRenderers\"\n                          (gridEvent)=\"onRolePermissionsGridEvent($event)\"\n                          class=\"tw-h-96 tw-w-full\">\n                        </cide-ele-data-grid>\n                      }\n                    </div>\n                  </div>\n                }\n\n                <!-- Entity-Specific Details -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                  <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\n                    formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\" labelKey=\"sydept_name\" placeholder=\"Select department\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-select label=\"Designation for this Entity\" [options]=\"getDesignationOptionsForEntity(i)\" valueKey=\"_id\" labelKey=\"sydsg_name\"\n                    formControlName=\"syenm_designation_id_sydsg\" placeholder=\"Select designation\" size=\"md\">\n                  </cide-ele-select>\n                </div>\n\n                <!-- Active Period for Entity Mapping -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                  <cide-ele-input label=\"Active From *\" [id]=\"'syenm_activefrom['+i+']'\"\n                    formControlName=\"syenm_activefrom\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n\n                  <cide-ele-input label=\"Active Until\" [id]=\"'syenm_activeupto['+i+']'\"\n                    formControlName=\"syenm_activeupto\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n                </div>\n\n                <!-- Mapping Settings -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-6 tw-mb-6\">\n                  <div class=\"tw-p-3 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded-lg\">\n                    <cide-ele-input type=\"checkbox\" label=\"Default Entity\" formControlName=\"syenm_isdefault\"\n                      (change)=\"onDefaultEntityChange(i, $event)\" class=\"tw-h-5 tw-accent-green-500\" />\n                    <span class=\"tw-text-xs tw-text-green-600 tw-block tw-mt-1\">Set as user's default entity (only one\n                      allowed)</span>\n                  </div>\n\n                  <div class=\"tw-p-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n                    <cide-ele-input type=\"checkbox\" label=\"Active Mapping\" formControlName=\"syenm_isactive\"\n                      class=\"tw-h-5 tw-accent-blue-500\" />\n                    <span class=\"tw-text-xs tw-text-blue-600 tw-block tw-mt-1\">Enable this entity mapping</span>\n                  </div>\n                </div>\n\n                <!-- Menu Rights Grid for this Entity-Role -->\n                <div class=\"tw-border-t tw-border-gray-200 tw-pt-4\">\n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\n                    <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Menu Rights & Permissions</h6>\n                    <div class=\"tw-flex tw-gap-2\">\n                      <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"refreshMenuRights(i)\"\n                        leftIcon=\"refresh\">\n                        Refresh Rights\n                      </button>\n                    </div>\n                  </div>\n\n                  @if (getMenuRightsForMapping(i).length > 0) {\n                  <!-- Menu Rights Tree Grid -->\n                  <div class=\"tw-border tw-border-gray-200 tw-rounded-lg tw-bg-white\">\n                    <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-rounded-t-lg\">\n                      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n                        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">security</cide-ele-icon>\n                        <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-m-0\">Menu Rights & Permissions</h6>\n                        <span class=\"tw-text-xs tw-text-gray-500\">(Editable permissions for this entity-role mapping)</span>\n                      </div>\n                    </div>\n                    \n                    <div class=\"tw-p-4\">\n                      <cide-ele-data-grid \n                        [config]=\"getMenuRightsGridConfig(i)\" \n                        [templateRenderers]=\"getMenuRightsTemplateRenderers(i)\"\n                        (gridEvent)=\"onMenuRightsGridEvent($event, i)\"\n                        class=\"tw-h-96 tw-w-full\">\n                      </cide-ele-data-grid>\n                    </div>\n                  </div>\n\n                  } @else {\n                  <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\n                    <div class=\"tw-text-gray-400 tw-mb-3\">\n                      <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\n                    </div>\n                    <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\n                    <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to load\n                      menu rights for this mapping.</p>\n                    @if (mapping.syenm_entity_id_syen?._id && mapping.syenm_role_id_syusrol) {\n                    <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"loadMenuRights(i)\"\n                      leftIcon=\"refresh\">\n                      Load Menu Rights\n                    </button>\n                    }\n                  </div>\n                  }\n                </div>\n              </div>\n            </div>\n            }\n          </div>\n\n          @if (entityMappings().length === 0) {\n          <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\n            <div class=\"tw-text-blue-400 tw-mb-3\">\n              <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\n            </div>\n            <h4 class=\"tw-text-sm tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\n            <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and\n              permissions for different entities.</p>\n            <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\"\n              (click)=\"addEntityMapping()\" leftIcon=\"add\">\n              Add First Entity Mapping\n            </button>\n          </div>\n          }\n        </div>\n\n\n      </div>\n      }\n\n      @case ('addresses') {\n      <!-- Contact Addresses Section -->\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\n        <div class=\"tw-flex tw-justify-end\">\n          <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\n              leftIcon=\"add\">\n              Add New Address\n            </button>\n          </div>\n        </div>\n\n        <div formArrayName=\"core_user_contact_addresses\">\n          @for (address of contactAddresses(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n            <div\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-6 tw-py-1 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">Address {{ i + 1 }}</h4>\n              <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\n                leftIcon=\"delete\">\n                Remove\n              </button>\n            </div>\n            <div class=\"tw-p-6\">\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\" id=\"sycad_address_type_id_sygms\"\n                  formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select address type\" size=\"md\"\n                  valueKey=\"_id\" labelKey=\"sygms_title\">\n                </cide-ele-select>\n\n                <cide-ele-input label=\"Contact Person Name\" formControlName=\"sycad_contact_person_name\"\n                  placeholder=\"Enter contact person name\" size=\"md\">\n                </cide-ele-input>\n              </div>\n\n              <div class=\"tw-grid tw-grid-cols-1 tw-mb-6\">\n                <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\n                  placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"3\" size=\"md\">\n                </cide-ele-textarea>\n              </div>\n\n              <!-- Postal Code & City -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-select \n                  label=\"Postal Code\"\n                  [options]=\"addressPostalCodes()[i] || []\" \n                  formControlName=\"sycad_contact_pin_sypin\"\n                  placeholder=\"Select postal code\"\n                  [searchable]=\"true\"\n                  [loading]=\"addressPostalCodesLoading()[i] || false\"\n                  (searchChange)=\"onPostalCodeSearch($event, i)\"\n                  (change)=\"onPostalCodeSelection($event, i)\"\n                  size=\"md\">\n                </cide-ele-select>\n                \n                <cide-ele-input \n                  label=\"City\" \n                  formControlName=\"sycad_contact_city_sypin\"\n                  placeholder=\"Enter city\"\n                  size=\"md\">\n                </cide-ele-input>\n              </div>\n              \n              <!-- State & Country -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-input \n                  label=\"State\" \n                  formControlName=\"sycad_contact_state_sypin\"\n                  placeholder=\"Enter state\"\n                  size=\"md\">\n                </cide-ele-input>\n\n                <cide-ele-select \n                  label=\"Country\" \n                  [options]=\"addressCountries()[i] || []\" \n                  formControlName=\"sycad_contact_country_syctr\"\n                  placeholder=\"Select country\"\n                  valueKey=\"_id\"\n                  labelKey=\"syctr_country_iso_name\"\n                  [searchable]=\"true\"\n                  (searchChange)=\"onCountrySearch($event, i)\"\n                  [loading]=\"addressCountriesLoading()[i] || false\"\n                  size=\"md\">\n                </cide-ele-select>\n              </div>\n\n              <!-- Phone Numbers -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-input \n                  label=\"Primary Phone\" \n                  formControlName=\"sycad_contact_phone\"\n                  type=\"tel\"\n                  placeholder=\"Enter primary phone number\"\n                  size=\"md\">\n                </cide-ele-input>\n\n                <cide-ele-input \n                  label=\"Alternate Phone\" \n                  formControlName=\"sycad_contact_phone_alt\"\n                  type=\"tel\"\n                  placeholder=\"Enter alternate phone number\"\n                  size=\"md\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Fax & Email -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-input \n                  label=\"Fax Number\" \n                  formControlName=\"sycad_contact_fax\"\n                  placeholder=\"Enter fax number\"\n                  size=\"md\">\n                </cide-ele-input>\n\n                <cide-ele-input \n                  label=\"Primary Email\" \n                  formControlName=\"sycad_contact_email\"\n                  type=\"email\"\n                  placeholder=\"Enter primary email address\"\n                  size=\"md\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Alternate Email -->\n              <div class=\"tw-grid tw-grid-cols-1 tw-mb-6\">\n                <cide-ele-input \n                  label=\"Alternate Email\" \n                  formControlName=\"sycad_contact_email_alt\"\n                  type=\"email\"\n                  placeholder=\"Enter alternate email address\"\n                  size=\"md\">\n                </cide-ele-input>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('documents') {\n      <!-- Documents Section -->\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\">\n            Add Document\n          </button>\n        </div>\n\n        <div formArrayName=\"core_user_documents\">\n          @for (doc of documents(); track $index; let i = $index) {\n        <div [formGroupName]=\"i\"\n          class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n          <div\n            class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-6 tw-py-1 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n            <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">Document {{ i + 1 }}</h4>\n            <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeDocument(i)\"\n              leftIcon=\"delete\">\n              Remove\n            </button>\n          </div>\n          <div class=\"tw-p-6\">\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\n                formControlName=\"syusd_document_type_id_sygms\"\n                placeholder=\"Select document type\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n\n              <cide-ele-input label=\"Document Number\" formControlName=\"syusd_doc_number\"\n                placeholder=\"Enter document number\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-input label=\"Name as per Document\"\n                formControlName=\"syusd_doc_name_as_per_doc\"\n                placeholder=\"Enter name exactly as shown on document\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-select label=\"Photo Group\" [options]=\"photoGroupOptions()\"\n                formControlName=\"syusd_photo_group_id_cyfm\"\n                placeholder=\"Select photo group\" size=\"md\" valueKey=\"_id\" labelKey=\"cyfm_name\">\n              </cide-ele-select>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-input label=\"Issue Date\" formControlName=\"syusd_doc_issue_date\"\n                [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input label=\"Expiry Date\" formControlName=\"syusd_doc_expiry_date\"\n                [id]=\"'syusd_doc_expiry_date['+i+']'\" type=\"date\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\n              <cide-ele-select label=\"Document Verification Status\" [options]=\"documentVerificationStatusOptions()\"\n                formControlName=\"syusd_doc_verification_status_id_sygms\"\n                placeholder=\"Select verification status\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n\n              <cide-ele-select label=\"Document KYC Status\" [options]=\"documentKycStatusOptions()\"\n                formControlName=\"syusd_doc_kyc_status_id_sygms\"\n                placeholder=\"Select KYC status\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n            </div>\n          </div>\n        </div>\n        }\n        </div>\n      </div>\n      }\n\n      @case ('family') {\n      <!-- Family Details Section -->\n      <div class=\"tw-py-2 tw-border-b-0 tw-mb-2\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\">\n            Add Family Member\n          </button>\n        </div>\n\n        <div formArrayName=\"core_user_family_details\">\n          @for (family of familyDetails(); track $index; let i = $index) {\n        <div [formGroupName]=\"i\"\n          class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n          <div\n            class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-6 tw-py-1 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n            <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">Family Member {{ i + 1 }}\n            </h4>\n            <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeFamilyDetail(i)\"\n              leftIcon=\"delete\">\n              Remove\n            </button>\n          </div>\n          <div class=\"tw-p-6\">\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-input label=\"Family Member Name\"\n                formControlName=\"syfdl_family_member_name\"\n                placeholder=\"Enter family member full name\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-select \n                label=\"Family Member User\"\n                [options]=\"userOptions(i)\"\n                formControlName=\"syfdl_family_member_id_user\"\n                placeholder=\"Select family member user\" \n                size=\"md\" \n                valueKey=\"_id\" \n                labelKey=\"user_fullname\"\n                [searchable]=\"true\"\n                [loading]=\"userSearchLoading()[i] || false\"\n                (searchChange)=\"onUserSearchChange($event, i)\"\n                (change)=\"onUserSelectionChange($event, i)\">\n              </cide-ele-select>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\n                formControlName=\"syfdl_relationship_id_sygms\"\n                placeholder=\"Select relationship\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n\n              <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\n                formControlName=\"syfdl_blood_group_sygms\"\n                placeholder=\"Select blood group\" size=\"md\" valueKey=\"_id\" labelKey=\"sygms_title\">\n              </cide-ele-select>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-input label=\"Date of Birth\"\n                formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"md\"\n                [id]=\"'syfdl_family_member_dob['+i+']'\">\n              </cide-ele-input>\n\n              <cide-ele-input label=\"Contact Phone\"\n                formControlName=\"syfdl_contact_phone\"\n                type=\"tel\" placeholder=\"Enter contact phone\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n              <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\"\n                type=\"email\" placeholder=\"Enter contact email\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\"\n                type=\"email\" placeholder=\"Enter contact email ID\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\n              <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\"\n                type=\"tel\" placeholder=\"Enter contact number\" size=\"md\">\n              </cide-ele-input>\n\n              <div class=\"tw-flex tw-items-center tw-pt-6\">\n                <cide-ele-input \n                  formControlName=\"syfdl_isactive\"\n                  type=\"checkbox\"\n                  label=\"Active\"\n                  size=\"md\">\n                </cide-ele-input>\n              </div>\n            </div>\n          </div>\n        </div>\n        }\n        </div>\n      </div>\n      }\n      }\n    </div>\n\n    <!-- Form Actions -->\n    <div\n      class=\"tw-flex tw-justify-end tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\n      <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n        [disabled]=\"loading()\">\n        Reset Form\n      </button>\n\n      <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\n        [loading]=\"loading()\" leftIcon=\"save\">\n        Save User Master\n      </button>\n    </div>\n  </form>\n</div>\n\n<!-- Template Renderers for Role Permissions Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3 tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      @if (row.syme_type === 'module') {\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">folder</cide-ele-icon>\n      } @else if (row.syme_type === 'section') {\n        <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">folder_open</cide-ele-icon>\n      } @else if (row.syme_type === 'menu') {\n        <cide-ele-icon class=\"tw-text-purple-600 tw-w-4 tw-h-4\">menu</cide-ele-icon>\n      } @else {\n        <cide-ele-icon class=\"tw-text-gray-600 tw-w-4 tw-h-4\">description</cide-ele-icon>\n      }\n    </div>\n    \n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \n             [title]=\"row.syme_title\">\n          {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n        </div>\n        <!-- Green pill indicator for parent menus with child permissions -->\n        @if (row.syme_type === 'module' || row.syme_type === 'section') {\n          @if (hasChildMenusWithPermissions(row._id)) {\n            <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-whitespace-nowrap\">\n              Assigned\n            </span>\n          }\n        }\n      </div>\n      @if (row.permission?.sygms_name) {\n        <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" \n             [title]=\"row.permission?.sygms_name\">\n          {{ row.permission?.sygms_name }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-justify-center\">\n    @if (row.syme_type === 'module') {\n      <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n        Module\n      </span>\n    } @else if (row.syme_type === 'section') {\n      <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n        Section\n      </span>\n    } @else if (row.syme_type === 'menu') {\n      <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-purple-100 tw-text-purple-800\">\n        Menu\n      </span>\n    } @else {\n      <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800\">\n        {{ row.syme_type || 'Unknown' }}\n      </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n      @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n         <div class=\"tw-flex tw-items-center tw-space-x-1\">\n           <div class=\"tw-flex tw-items-center tw-space-x-1\">\n             <input \n               type=\"checkbox\"\n               [checked]=\"isPermissionSelected(row._id, permissionId)\"\n               [disabled]=\"true\"\n               class=\"tw-h-4 tw-w-4 tw-text-blue-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-blue-500\">\n             <label class=\"tw-text-xs tw-text-gray-700\">\n               {{ getPermissionById(permissionId)?.sygms_name || 'Unknown' }}\n             </label>\n           </div>\n         </div>\n      }\n    } @else {\n      <!-- Show green checkmark for parent menus with child permissions -->\n      @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n        @if (hasChildMenusWithPermissions(row._id)) {\n          <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\">\n            <cide-ele-icon \n              class=\"tw-text-green-600\" \n              size=\"xs\">\n              check\n            </cide-ele-icon>\n          </div>\n        } @else {\n          <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n        }\n      } @else {\n        <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n      }\n    }\n  </div>\n</ng-template>\n\n<!-- Menu Rights Permissions Renderer Template -->\n<ng-template #menuRightsPermissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    <!-- Role Rights Display -->\n    @if (row.role_rights && row.role_rights.length > 0) {\n      <div class=\"tw-mb-2\">\n        <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Role Rights:</div>\n        <div class=\"tw-flex tw-flex-wrap tw-gap-1\">\n          @for (right of row.role_rights; track $index) {\n            <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-blue-100 tw-text-blue-800 tw-rounded\">\n              {{ right }}\n            </span>\n          }\n        </div>\n      </div>\n    }\n    \n    <!-- Individual Permission Controls -->\n    <div class=\"tw-grid tw-grid-cols-2 tw-gap-2 tw-w-full\">\n      <div class=\"tw-flex tw-items-center tw-space-x-1\">\n        <input \n          type=\"checkbox\"\n          [checked]=\"row.create\"\n          [disabled]=\"true\"\n          class=\"tw-h-4 tw-w-4 tw-text-green-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-green-500\">\n        <label class=\"tw-text-xs tw-text-gray-700\">Create</label>\n      </div>\n      \n      <div class=\"tw-flex tw-items-center tw-space-x-1\">\n        <input \n          type=\"checkbox\"\n          [checked]=\"row.read\"\n          [disabled]=\"true\"\n          class=\"tw-h-4 tw-w-4 tw-text-blue-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-blue-500\">\n        <label class=\"tw-text-xs tw-text-gray-700\">Read</label>\n      </div>\n      \n      <div class=\"tw-flex tw-items-center tw-space-x-1\">\n        <input \n          type=\"checkbox\"\n          [checked]=\"row.update\"\n          [disabled]=\"true\"\n          class=\"tw-h-4 tw-w-4 tw-text-yellow-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-yellow-500\">\n        <label class=\"tw-text-xs tw-text-gray-700\">Update</label>\n      </div>\n      \n      <div class=\"tw-flex tw-items-center tw-space-x-1\">\n        <input \n          type=\"checkbox\"\n          [checked]=\"row.delete\"\n          [disabled]=\"true\"\n          class=\"tw-h-4 tw-w-4 tw-text-red-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-red-500\">\n        <label class=\"tw-text-xs tw-text-gray-700\">Delete</label>\n      </div>\n    </div>\n    \n    <!-- Exception Indicator -->\n    @if (row.hasException) {\n      <div class=\"tw-mt-2\">\n        <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-yellow-100 tw-text-yellow-800 tw-rounded\">\n          Override\n        </span>\n      </div>\n    } @else {\n      <div class=\"tw-mt-2\">\n        <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\n      </div>\n    }\n  </div>\n</ng-template>" }]
+                        CideEleDataGridComponent,
+                        CideLytFloatingUploadTriggerDirective
+                    ], template: "<!-- \n  ENTERPRISE USER MASTER FORM\n  \n  Enterprise-Level Styling with Tailwind CSS\n  Features: Responsive grids, proper typography, enhanced user experience\n-->\n\n<div class=\"tw-w-full tw-h-full tw-p-1 tw-pt-2\">\n  <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\n    (ngSubmit)=\"onSubmit()\">\n\n    <!-- Success/Error Messages -->\n    @if (success()) {\n    <div class=\"tw-mb-4 tw-p-4 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded-md tw-shadow-sm\">\n      <div class=\"tw-flex tw-items-start\">\n        <cide-ele-icon name=\"check_circle\" class=\"tw-text-green-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n        <div class=\"tw-ml-3\">\n          <h3 class=\"tw-text-sm tw-font-medium tw-text-green-800 tw-m-0\">Success</h3>\n          <p class=\"tw-text-sm tw-text-green-700 tw-mt-1 tw-m-0\">{{ success() }}</p>\n        </div>\n        <button type=\"button\" (click)=\"success.set(null)\" class=\"tw-ml-auto tw-text-green-400 hover:tw-text-green-600\">\n          <cide-ele-icon name=\"close\" class=\"tw-w-4 tw-h-4\"></cide-ele-icon>\n        </button>\n      </div>\n    </div>\n    }\n    @if (error()) {\n    <div class=\"tw-mb-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md tw-shadow-sm\">\n      <div class=\"tw-flex tw-items-start\">\n        <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n        <div class=\"tw-ml-3\">\n          <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n          <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n        </div>\n        <button type=\"button\" (click)=\"error.set(null)\" class=\"tw-ml-auto tw-text-red-400 hover:tw-text-red-600\">\n          <cide-ele-icon name=\"close\" class=\"tw-w-4 tw-h-4\"></cide-ele-icon>\n        </button>\n      </div>\n    </div>\n    }\n\n    <!-- User Context Header -->\n    <div\n      class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-indigo-50 tw-border tw-border-blue-200 tw-rounded-md tw-p-1 tw-mb-2 tw-shadow-sm\">\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\n        <!-- User Basic Info Display -->\n        <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\n          <!-- Profile Photo Preview -->\n          <div class=\"tw-flex tw-items-center tw-gap-2\">\n            <div\n              class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-border tw-border-blue-200 tw-flex tw-items-center tw-justify-center tw-overflow-hidden\">\n              @if (userMasterForm.get('user_photo_id_cyfm')?.value) {\n              <img cideEleFileImage [fileId]=\"userMasterForm.get('user_photo_id_cyfm')?.value\"\n                [altText]=\"'Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover\">\n              } @else {\n              <cide-ele-icon name=\"person\" class=\"tw-w-5 tw-h-5 tw-text-blue-600\">\n              </cide-ele-icon>\n              }\n            </div>\n            <div class=\"tw-flex tw-flex-col\">\n              <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\n                {{ getUserFullName() || 'New User' }}\n              </span>\n              <span class=\"tw-text-xs tw-text-blue-600\">\n                {{ getUserUsername() || 'Username not set' }}\n              </span>\n            </div>\n          </div>\n\n          <!-- Contact Info -->\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">email</cide-ele-icon>\n              <span>{{ getUserEmail() || 'Email not set' }}</span>\n            </div>\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">phone</cide-ele-icon>\n              <span>{{ getUserMobile() || 'Mobile not set' }}</span>\n            </div>\n          </div>\n\n          <!-- Active Status -->\n          <div class=\"tw-flex tw-items-center tw-gap-1\">\n            @if (getUserActiveStatus()) {\n            <span\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-700\">\n              <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">check_circle</cide-ele-icon>\n              Active\n            </span>\n            } @else {\n            <span\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-700\">\n              <cide-ele-icon variant=\"red\" size=\"xs\" class=\"tw-mr-1\">cancel</cide-ele-icon>\n              Inactive\n            </span>\n            }\n          </div>\n        </div>\n\n        <!-- Entity Info -->\n        <div class=\"tw-flex tw-items-center tw-gap-2\">\n          @if (hasDefaultEntity()) {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-blue-700\">\n            <cide-ele-icon variant=\"blue\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-font-medium\">{{ getDefaultEntityName() }}</span>\n          </div>\n          } @else {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-500\">\n            <cide-ele-icon variant=\"gray\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-italic\">No entity</span>\n          </div>\n          }\n\n          <span class=\"tw-text-xs tw-text-gray-600 tw-px-2 tw-py-1 tw-bg-gray-100 tw-rounded\">\n            {{ getEntityMappingCount() }} mapping(s)\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Tab Navigation -->\n    <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\n      <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\n        (tabChange)=\"onTabChange($event)\">\n      </cide-ele-tab>\n    </div>\n\n    <!-- Tab Content -->\n    <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n      @switch (activeTab()) {\n\n      @case ('basic') {\n      <!-- User Basic Information Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n        <!-- Top Section: Form Fields on Left, Profile Photo on Right -->\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4 tw-mb-4\">\n          <!-- Left Side: Form Fields -->\n          <div class=\"tw-space-y-4\">\n            <!-- Name Fields - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\n              <cide-ele-input id=\"user_firstname\" label=\"First Name *\" formControlName=\"user_firstname\"\n                placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\n                placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_lastname\" label=\"Last Name *\" formControlName=\"user_lastname\"\n                placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_fullname\" label=\"Full Name * (Auto-generated)\" formControlName=\"user_fullname\"\n                placeholder=\"Auto-generated from name fields or enter manually\" [maxlength]=\"62\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <!-- Contact Information - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\n              <cide-ele-input id=\"user_username\" label=\"Username *\" formControlName=\"user_username\"\n                placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_emailid\" label=\"Email ID *\" formControlName=\"user_emailid\" type=\"email\"\n                placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number *\" formControlName=\"user_mobileno\" type=\"tel\"\n                placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\n              </cide-ele-input>\n            </div>\n          </div>\n\n          <!-- Right Side: Profile Photo Upload -->\n          <div class=\"tw-flex tw-items-start tw-justify-center tw-p-0\">\n            <cide-ele-file-input id=\"user_photo_id_cyfm\" formControlName=\"user_photo_id_cyfm\" accept=\"image/*\"\n              [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\n              previewHeight=\"120px\" placeholderText=\"Upload Photo\" placeholderIcon=\"cloud_upload\" [autoUpload]=\"true\"\n              [uploadData]=\"getProfilePhotoUploadData()\" (uploadSuccess)=\"onProfilePhotoUploadSuccess($event)\"\n              (uploadError)=\"onProfilePhotoUploadError($event)\"\n              (uploadProgressChange)=\"onProfilePhotoUploadProgress($event)\">\n            </cide-ele-file-input>\n          </div>\n        </div>\n\n\n\n        <!-- Status Control -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-mb-2\">\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\n            <label\n              class=\"tw-flex tw-flex-col tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200 hover:tw-bg-blue-75\">\n              <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\n                class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\n                access and operations</span>\n            </label>\n          </div>\n        </div>\n      </div>\n      }\n\n      @case ('auth') {\n      <!-- Authentication Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <!-- Password Fields -->\n        @if (shouldShowPasswordFields()) {\n        <div class=\"tw-mb-4\">\n          <!-- Password Fields Header for Edit Mode -->\n          @if (isEditMode()) {\n          <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Update Password</h6>\n            <button type=\"button\"\n              class=\"tw-px-3 tw-py-1 tw-bg-gray-100 tw-text-gray-600 tw-border tw-border-gray-300 tw-rounded-md tw-text-xs tw-font-medium hover:tw-bg-gray-200 tw-transition-colors\"\n              (click)=\"cancelPasswordUpdate()\">\n              Cancel Password Update\n            </button>\n          </div>\n          }\n\n          <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6\">\n            <cide-ele-input id=\"user_password\" [label]=\"getPasswordFieldLabel()\" formControlName=\"user_password\"\n              type=\"password\" placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\n            </cide-ele-input>\n\n            <cide-ele-input id=\"user_confirm_password\" [label]=\"getPasswordConfirmLabel()\"\n              formControlName=\"user_confirm_password\" type=\"password\" placeholder=\"Confirm your password\" size=\"md\">\n            </cide-ele-input>\n          </div>\n        </div>\n        }\n\n        <!-- Password Update Option for Edit Mode -->\n        @if (isEditMode() && !shouldShowPasswordFields()) {\n        <div class=\"tw-mb-4\">\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-blue-800 tw-mb-2\">Password Update</h6>\n            <p class=\"tw-text-sm tw-text-blue-600 tw-mb-3\">Current password will be kept. Click below to change\n              password.</p>\n\n            @if (hasPasswordInput()) {\n            <div\n              class=\"tw-mb-3 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded tw-text-sm tw-text-yellow-700\">\n              <cide-ele-icon variant=\"yellow\" size=\"xs\" class=\"tw-mr-1\">warning</cide-ele-icon>\n              Password fields contain text. Click \"Change Password\" to manage existing input.\n            </div>\n            }\n\n            <button type=\"button\"\n              class=\"tw-px-4 tw-py-2 tw-bg-blue-100 tw-text-blue-700 tw-border tw-border-blue-300 tw-rounded-md tw-text-sm tw-font-medium hover:tw-bg-blue-200 tw-transition-colors\"\n              (click)=\"triggerPasswordUpdate()\">\n              @if (hasPasswordInput()) {\n              Manage Password Fields\n              } @else {\n              Change Password\n              }\n            </button>\n          </div>\n        </div>\n        }\n\n        <!-- Password Options -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-gap-4 tw-mb-4\">\n          <div class=\"tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\n            <label\n              class=\"tw-flex tw-flex-col tw-gap-2 tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200\">\n              <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\n                formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\n                password on next login</span>\n            </label>\n          </div>\n        </div>\n\n      </div>\n      }\n\n      @case ('roles') {\n      <!-- Entity, Roles & Permissions Mapping Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n\n\n        <!-- Important Note -->\n        <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-2 tw-mb-4\">\n          <div class=\"tw-flex tw-items-start tw-gap-3\">\n            <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\n            <div class=\"tw-flex-1\">\n              <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\n              <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role\n                mappings below. At least one entity mapping is required for user access.</p>\n              @if (hasDefaultEntity()) {\n              <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\n                <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\n                <span class=\"tw-text-sm tw-text-amber-800\">\n                  <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\n                </span>\n              </div>\n              } @else {\n              <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\n                \u26A0\uFE0F No default entity selected. Please set one entity as default.\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <!-- Entity-Role Mapping Section -->\n        <div class=\"tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg tw-p-3 tw-mb-4\">\n          <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\n            <div>\n              <h4 class=\"tw-text-sm tw-text-left tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\n              <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\n            </div>\n            <div class=\"tw-flex tw-flex-col tw-items-end\">\n              <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\"\n                leftIcon=\"add\" [disabled]=\"isAllEntitiesMapped()\">\n                Add Entity Mapping\n              </button>\n\n              @if (isAllEntitiesMapped()) {\n              <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-md tw-max-w-xs\">\n                <p class=\"tw-text-xs tw-text-blue-700\">\n                  <cide-ele-icon variant=\"info\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n                  All available entities are already mapped.\n                </p>\n              </div>\n              }\n            </div>\n          </div>\n\n          <div formArrayName=\"core_entity_mapping\">\n            @for (mapping of entityMappings(); track $index; let i = $index) {\n            <div class=\"tw-bg-white tw-border tw-border-blue-200 tw-rounded-xl tw-mb-6 tw-overflow-hidden tw-shadow-sm\"\n              [formGroupName]=\"i\">\n              <div\n                class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-blue-100 tw-px-6 tw-py-3 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-blue-200\">\n                <div class=\"tw-flex tw-items-center tw-gap-2\">\n                  <h5 class=\"tw-m-0 tw-text-blue-800 tw-text-sm tw-font-semibold\">Entity Mapping {{ i + 1 }}</h5>\n                  @if (mapping.syenm_isdefault) {\n                  <span\n                    class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n                    <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">star</cide-ele-icon>\n                    Default\n                  </span>\n                  }\n                </div>\n                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeEntityMapping(i)\"\n                  leftIcon=\"delete\">\n                  Remove\n                </button>\n              </div>\n\n              <div>\n                <!-- Entity and Role Selection -->\n                <div class=\"tw-grid tw-px-3 tw-py-1 tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-mb-4\">\n                  <div>\n                    <cide-ele-select label=\"Entity *\" [options]=\"getFilteredEntityOptions(i)\"\n                      formControlName=\"syenm_entity_id_syen\" valueKey=\"_id\" labelKey=\"syen_name\"\n                      placeholder=\"Select entity\" size=\"md\" (change)=\"onEntityChange(i, $event)\">\n                    </cide-ele-select>\n\n                    @if (isAllEntitiesSelected(i)) {\n                    <div class=\"tw-mt-2 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded-md\">\n                      <p class=\"tw-text-xs tw-text-yellow-700\">\n                        <cide-ele-icon variant=\"warning\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n                        All entities are already mapped. Remove another mapping to add this one.\n                      </p>\n                    </div>\n                    }\n                  </div>\n                  <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\n                    formControlName=\"syenm_role_id_syusrol\" valueKey=\"_id\" labelKey=\"syusrol_role_name\"\n                    placeholder=\"Select role for this entity\" size=\"md\" (change)=\"onRoleChange(i, $event)\">\n                  </cide-ele-select>\n                </div>\n\n\n                <!-- Entity-Specific Details and Active Period - All in One Row -->\n                <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4 tw-mb-4\">\n                  <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\n                    formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\"\n                    labelKey=\"sydept_name\" placeholder=\"Select department\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-select label=\"Designation for this Entity\" [options]=\"getDesignationOptionsForEntity(i)\"\n                    valueKey=\"_id\" labelKey=\"sydsg_name\" formControlName=\"syenm_designation_id_sydsg\"\n                    placeholder=\"Select designation\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-input label=\"Active From *\" [id]=\"'syenm_activefrom['+i+']'\"\n                    formControlName=\"syenm_activefrom\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n\n                  <cide-ele-input label=\"Active Until\" [id]=\"'syenm_activeupto['+i+']'\"\n                    formControlName=\"syenm_activeupto\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n                </div>\n\n                <!-- Mapping Settings -->\n                <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4 tw-mb-4\">\n                  <div class=\"tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded-lg\">\n                    <cide-ele-input type=\"checkbox\" label=\"Default Entity\" formControlName=\"syenm_isdefault\"\n                      (change)=\"onDefaultEntityChange(i, $event)\" class=\"tw-h-5 tw-accent-green-500\" />\n                    <span class=\"tw-text-xs tw-text-green-600 tw-block tw-mt-1\">Set as user's default entity (only one\n                      allowed)</span>\n                  </div>\n\n                  <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n                    <cide-ele-input type=\"checkbox\" label=\"Active Mapping\" formControlName=\"syenm_isactive\"\n                      class=\"tw-h-5 tw-accent-blue-500\" />\n                    <span class=\"tw-text-xs tw-text-blue-600 tw-block tw-mt-1\">Enable this entity mapping</span>\n                  </div>\n                </div>\n\n                <!-- Menu Rights Grid for this Entity-Role -->\n                <div class=\"tw-border-t tw-border-gray-200\">\n\n                  @if (getMenuRightsForMapping(i).length > 0) {\n                  <!-- Menu Rights Tree Grid -->\n\n                  <cide-ele-data-grid [config]=\"getMenuRightsGridConfig(i)\"\n                    [templateRenderers]=\"getMenuRightsTemplateRenderers(i)\"\n                    (gridEvent)=\"onMenuRightsGridEvent($event, i)\" class=\"tw-h-96 tw-w-full\">\n                  </cide-ele-data-grid>\n\n                  } @else {\n                  <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\n                    <div class=\"tw-text-gray-400 tw-mb-3\">\n                      <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\n                    </div>\n                    <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\n                    <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to\n                      automatically load\n                      menu rights for this mapping.</p>\n                  </div>\n                  }\n                </div>\n              </div>\n            </div>\n            }\n          </div>\n\n          @if (entityMappings().length === 0) {\n          <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\n            <div class=\"tw-text-blue-400 tw-mb-3\">\n              <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\n            </div>\n            <h4 class=\"tw-text-sm tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\n            <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and\n              permissions for different entities.</p>\n            <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\"\n              (click)=\"addEntityMapping()\" leftIcon=\"add\">\n              Add First Entity Mapping\n            </button>\n          </div>\n          }\n        </div>\n\n\n      </div>\n      }\n\n      @case ('addresses') {\n      <!-- Contact Addresses Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end\">\n          <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\n              leftIcon=\"add\">\n              Add New Address\n            </button>\n          </div>\n        </div>\n\n        <div formArrayName=\"core_user_contact_addresses\">\n          @for (address of contactAddresses(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n            <div\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <!-- Use address type as header instead of generic \"Address X\" -->\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n                {{ getAddressTypeLabel(i) || ('Address ' + (i + 1)) }}\n              </h4>\n              <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\n                leftIcon=\"delete\">\n                Remove\n              </button>\n            </div>\n            <div class=\"tw-p-4\">\n              <!-- Main Layout: Inputs on Left, Address Textarea on Right -->\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n                \n                <!-- Left Side: Input Fields (3/4 width) -->\n                <div class=\"lg:tw-col-span-3\">\n                  <!-- Row 1: Address Type, Contact Person -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mb-3\">\n                    <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\" id=\"sycad_address_type_id_sygms\"\n                      formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onAddressTypeChange(i)\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"Contact Person\" formControlName=\"sycad_contact_person_name\"\n                      placeholder=\"Enter contact person\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 2: Postal Code, City, State, Country -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\n                    <cide-ele-select label=\"Postal Code\" [options]=\"addressPostalCodes()[i] || []\"\n                      formControlName=\"sycad_contact_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\n                      [loading]=\"addressPostalCodesLoading()[i] || false\" (searchChange)=\"onPostalCodeSearch($event, i)\"\n                      (change)=\"onPostalCodeSelection($event, i)\" size=\"sm\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"City\" formControlName=\"sycad_contact_city_sypin\" placeholder=\"Enter city\"\n                      size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"State\" formControlName=\"sycad_contact_state_sypin\" placeholder=\"Enter state\"\n                      size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-select label=\"Country\" [options]=\"addressCountries()[i] || []\"\n                      formControlName=\"sycad_contact_country_syctr\" placeholder=\"Select country\" valueKey=\"_id\"\n                      labelKey=\"syctr_country_iso_name\" [searchable]=\"true\" (searchChange)=\"onCountrySearch($event, i)\"\n                      [loading]=\"addressCountriesLoading()[i] || false\" size=\"sm\">\n                    </cide-ele-select>\n                  </div>\n                </div>\n\n                <!-- Right Side: Address Textarea (1/4 width, spans 2 rows) -->\n                <div class=\"lg:tw-col-span-1 lg:tw-row-span-2 tw-flex tw-flex-col\">\n                  <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\n                    placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"4\" size=\"sm\"\n                    class=\"tw-h-full\">\n                  </cide-ele-textarea>\n                </div>\n              </div>\n\n              <!-- Contact Details: Primary Phone, Alt Phone, Fax, Primary Email in 4 columns -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Primary Phone\" formControlName=\"sycad_contact_phone\" type=\"tel\"\n                  placeholder=\"Primary phone\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Alternate Phone\" formControlName=\"sycad_contact_phone_alt\" type=\"tel\"\n                  placeholder=\"Alternate phone\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Fax Number\" formControlName=\"sycad_contact_fax\" placeholder=\"Fax number\"\n                  size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Primary Email\" formControlName=\"sycad_contact_email\" type=\"email\"\n                  placeholder=\"Primary email\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Alternate Email in single row -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                <cide-ele-input label=\"Alternate Email\" formControlName=\"sycad_contact_email_alt\" type=\"email\"\n                  placeholder=\"Alternate email address\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('documents') {\n      <!-- Documents Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\">\n            Add Document\n          </button>\n        </div>\n\n        <div formArrayName=\"core_user_documents\">\n          @for (doc of documents(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n            <div\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n                {{ getDocumentTypeLabel(i) || ('Document ' + (i + 1)) }}\n              </h4>\n              <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeDocument(i)\"\n                leftIcon=\"delete\">\n                Remove\n              </button>\n            </div>\n            <div class=\"tw-p-4\">\n              <!-- Main Layout: Inputs on Left, File Upload on Right -->\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-3 tw-gap-4\">\n                \n                <!-- Left Side: Document Information (2/3 width) -->\n                <div class=\"lg:tw-col-span-2\">\n                  <!-- Row 1: Document Type, Document Number, Name as per Document -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                    <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\n                      formControlName=\"syusd_document_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onDocumentTypeChange(i)\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"Document Number\" formControlName=\"syusd_doc_number\"\n                      placeholder=\"Document number\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"Name as per Document\" formControlName=\"syusd_doc_name_as_per_doc\"\n                      placeholder=\"Name on document\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 2: Issue Date, Expiry Date, Photo Group -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                    <cide-ele-input label=\"Issue Date\" formControlName=\"syusd_doc_issue_date\"\n                      [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"Expiry Date\" formControlName=\"syusd_doc_expiry_date\"\n                      [id]=\"'syusd_doc_expiry_date['+i+']'\" type=\"date\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-select label=\"Photo Group\" [options]=\"photoGroupOptions()\"\n                      formControlName=\"syusd_photo_group_id_cyfm\" placeholder=\"Select group\" size=\"sm\" valueKey=\"_id\"\n                      labelKey=\"cyfm_name\">\n                    </cide-ele-select>\n                  </div>\n\n                  <!-- Row 3: Verification Status, KYC Status -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                    <cide-ele-select label=\"Verification Status\" [options]=\"documentVerificationStatusOptions()\"\n                      formControlName=\"syusd_doc_verification_status_id_sygms\" placeholder=\"Select status\"\n                      size=\"sm\" valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n\n                    <cide-ele-select label=\"KYC Status\" [options]=\"documentKycStatusOptions()\"\n                      formControlName=\"syusd_doc_kyc_status_id_sygms\" placeholder=\"Select KYC status\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n                  </div>\n                </div>\n\n                <!-- Right Side: File Upload (1/3 width) -->\n                <div class=\"lg:tw-col-span-1\">\n                  <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-3 tw-h-full\">\n                    <h5 class=\"tw-text-sm tw-font-medium tw-text-gray-700 tw-mb-3 tw-m-0\">Document Files</h5>\n                    \n                    <!-- File Upload Input -->\n                     {{documentsFormArray.at(i).get('syusd_photo_group_id_cyfm')?.value}}\n                    <cide-ele-file-input\n                      [id]=\"'document-files-' + i\"\n                      [multiple]=\"true\"\n                      formControlName=\"syusd_photo_group_id_cyfm\"\n                      [accept]=\"'.pdf,.jpg,.jpeg,.png,.doc,.docx'\"\n                      [autoUpload]=\"true\"\n                      [uploadData]=\"getDocumentUploadData(i)\"\n                      (change)=\"onDocumentFilesSelected($event, i)\"\n                      (uploadSuccess)=\"onDocumentUploadSuccess($event, i)\"\n                      (uploadError)=\"onDocumentUploadError($event, i)\"\n                      (uploadProgressChange)=\"onDocumentUploadProgress($event, i)\"\n                      cideFloatingUploadTrigger\n                      class=\"tw-mb-3\"\n                      size=\"sm\">\n                      <div class=\"tw-text-center tw-py-4\">\n                        <cide-ele-icon name=\"cloud_upload\" class=\"tw-w-6 tw-h-6 tw-text-gray-400 tw-mx-auto tw-mb-2\"></cide-ele-icon>\n                        <p class=\"tw-text-xs tw-text-gray-600 tw-m-0\">Upload document files</p>\n                        <p class=\"tw-text-xs tw-text-gray-400 tw-m-0\">PDF, Images, Word docs</p>\n                      </div>\n                    </cide-ele-file-input>\n\n                    <!-- Upload Status -->\n                    @if (getDocumentGroupId(i)) {\n                    <div class=\"tw-space-y-2\">\n                      <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n                        <h6 class=\"tw-text-xs tw-font-medium tw-text-gray-600 tw-m-0\">Upload Status:</h6>\n                        <span class=\"tw-text-xs tw-text-green-600 tw-font-medium\">\n                          \u2705 Files Uploaded\n                        </span>\n                      </div>\n                      <div class=\"tw-bg-green-50 tw-border tw-border-green-200 tw-rounded tw-p-2\">\n                        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n                          <cide-ele-icon name=\"cloud_done\" class=\"tw-w-4 tw-h-4 tw-text-green-500 tw-flex-shrink-0\"></cide-ele-icon>\n                          <div class=\"tw-flex tw-flex-col tw-flex-1 tw-min-w-0\">\n                            <span class=\"tw-text-xs tw-text-green-700 tw-font-medium\">Multiple files uploaded successfully</span>\n                            <span class=\"tw-text-xs tw-text-green-600 tw-font-mono tw-truncate\" [title]=\"'Group ID: ' + getDocumentGroupId(i)\">\n                              Group ID: {{ getDocumentGroupId(i).substring(0, 12) }}...\n                            </span>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                    } @else {\n                    <div class=\"tw-text-center tw-text-xs tw-text-gray-400 tw-py-2\">\n                      No files uploaded yet\n                    </div>\n                    }\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('family') {\n      <!-- Family Details Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\">\n            Add Family Member\n          </button>\n        </div>\n\n        <div formArrayName=\"core_user_family_details\">\n          @for (family of familyDetails(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n            <div\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-6 tw-py-1 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">Family Member {{ i + 1\n                }}\n              </h4>\n              <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeFamilyDetail(i)\"\n                leftIcon=\"delete\">\n                Remove\n              </button>\n            </div>\n            <div class=\"tw-p-3\">\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-input label=\"Family Member Name\" formControlName=\"syfdl_family_member_name\"\n                  placeholder=\"Enter family member full name\" size=\"md\">\n                </cide-ele-input>\n\n                <cide-ele-select label=\"Family Member User\" [options]=\"userOptions(i)\"\n                  formControlName=\"syfdl_family_member_id_user\" placeholder=\"Select family member user\" size=\"md\"\n                  valueKey=\"_id\" labelKey=\"user_fullname\" [searchable]=\"true\"\n                  [loading]=\"userSearchLoading()[i] || false\" (searchChange)=\"onUserSearchChange($event, i)\"\n                  (change)=\"onUserSelectionChange($event, i)\">\n                </cide-ele-select>\n              </div>\n\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\n                  formControlName=\"syfdl_relationship_id_sygms\" placeholder=\"Select relationship\" size=\"md\"\n                  valueKey=\"_id\" labelKey=\"sygms_title\">\n                </cide-ele-select>\n\n                <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\n                  formControlName=\"syfdl_blood_group_sygms\" placeholder=\"Select blood group\" size=\"md\" valueKey=\"_id\"\n                  labelKey=\"sygms_title\">\n                </cide-ele-select>\n              </div>\n\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-input label=\"Date of Birth\" formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"md\"\n                  [id]=\"'syfdl_family_member_dob['+i+']'\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Phone\" formControlName=\"syfdl_contact_phone\" type=\"tel\"\n                  placeholder=\"Enter contact phone\" size=\"md\">\n                </cide-ele-input>\n              </div>\n\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6 tw-mb-6\">\n                <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\" type=\"email\"\n                  placeholder=\"Enter contact email\" size=\"md\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\" type=\"email\"\n                  placeholder=\"Enter contact email ID\" size=\"md\">\n                </cide-ele-input>\n              </div>\n\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\n                <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\" type=\"tel\"\n                  placeholder=\"Enter contact number\" size=\"md\">\n                </cide-ele-input>\n\n                <div class=\"tw-flex tw-items-center tw-pt-6\">\n                  <cide-ele-input formControlName=\"syfdl_isactive\" type=\"checkbox\" label=\"Active\" size=\"md\">\n                  </cide-ele-input>\n                </div>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n      }\n    </div>\n\n    <!-- Form Actions -->\n    <div\n      class=\"tw-flex tw-justify-end tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\n      <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n        [disabled]=\"loading()\">\n        Reset Form\n      </button>\n\n      <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\n        [loading]=\"loading()\" leftIcon=\"save\">\n        Save User Master\n      </button>\n    </div>\n  </form>\n</div>\n\n<!-- Template Renderers for Role Permissions Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3 tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      @if (row.syme_type === 'module') {\n      <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">folder</cide-ele-icon>\n      } @else if (row.syme_type === 'section') {\n      <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">folder_open</cide-ele-icon>\n      } @else if (row.syme_type === 'menu') {\n      <cide-ele-icon class=\"tw-text-purple-600 tw-w-4 tw-h-4\">menu</cide-ele-icon>\n      } @else {\n      <cide-ele-icon class=\"tw-text-gray-600 tw-w-4 tw-h-4\">description</cide-ele-icon>\n      }\n    </div>\n\n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.syme_title\">\n          {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n        </div>\n        <!-- Green pill indicator for parent menus with child permissions -->\n        @if (row.syme_type === 'module' || row.syme_type === 'section') {\n        @if (hasChildMenusWithPermissions(row._id)) {\n        <span\n          class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-whitespace-nowrap\">\n          Assigned\n        </span>\n        }\n        }\n      </div>\n      @if (row.permission?.sygms_name) {\n      <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" [title]=\"row.permission?.sygms_name\">\n        {{ row.permission?.sygms_name }}\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-justify-center\">\n    @if (row.syme_type === 'module') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n      Module\n    </span>\n    } @else if (row.syme_type === 'section') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n      Section\n    </span>\n    } @else if (row.syme_type === 'menu') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-purple-100 tw-text-purple-800\">\n      Menu\n    </span>\n    } @else {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800\">\n      {{ row.syme_type || 'Unknown' }}\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n    @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n    <div class=\"tw-flex tw-items-center tw-space-x-1\">\n      <div class=\"tw-flex tw-items-center tw-space-x-1\">\n        <input type=\"checkbox\" [checked]=\"isPermissionSelected(row._id, permissionId)\" [disabled]=\"true\"\n          class=\"tw-h-4 tw-w-4 tw-text-blue-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-blue-500\">\n        <label class=\"tw-text-xs tw-text-gray-700\">\n          {{ getPermissionById(permissionId)?.sygms_name || 'Unknown' }}\n        </label>\n      </div>\n    </div>\n    }\n    } @else {\n    <!-- Show green checkmark for parent menus with child permissions -->\n    @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n    @if (hasChildMenusWithPermissions(row._id)) {\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\">\n      <cide-ele-icon class=\"tw-text-green-600\" size=\"xs\">\n        check\n      </cide-ele-icon>\n    </div>\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n    }\n  </div>\n</ng-template>\n\n<!-- Menu Rights Permissions Renderer Template -->\n<ng-template #menuRightsPermissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    <!-- Role Rights Display -->\n    @if (row.role_rights && row.role_rights.length > 0) {\n    <div class=\"tw-mb-2\">\n      <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Role Rights:</div>\n      <div class=\"tw-flex tw-flex-wrap tw-gap-1\">\n        @for (right of row.role_rights; track $index) {\n        <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-blue-100 tw-text-blue-800 tw-rounded\">\n          {{ right }}\n        </span>\n        }\n      </div>\n    </div>\n    }\n\n\n    <!-- Exception Indicator -->\n    @if (row.hasException) {\n    <div class=\"tw-mt-2\">\n      <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-yellow-100 tw-text-yellow-800 tw-rounded\">\n        Override\n      </span>\n    </div>\n    } @else {\n    <div class=\"tw-mt-2\">\n      <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\n    </div>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row._permissionValues && Object.keys(row._permissionValues).length > 0) {\n    @for (permissionId of Object.keys(row._permissionValues); track permissionId) {\n    <div class=\"tw-flex tw-items-center tw-space-x-2\">\n      <cide-ele-input type=\"checkbox\" [ngModel]=\"row._permissionValues[permissionId].checked\"\n        (ngModelChange)=\"onPermissionChangeSafe($event, row, permissionId)\"\n        [id]=\"'permission-' + row._id + '-' + permissionId\" class=\"tw-h-4 tw-w-4\">\n      </cide-ele-input>\n      <label [for]=\"'permission-' + row._id + '-' + permissionId\" class=\"tw-text-xs tw-text-gray-700 tw-cursor-pointer\">\n        {{ row._permissionValues[permissionId].permission?.sygms_title }}\n      </label>\n    </div>\n    }\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">No permissions</span>\n    }\n  </div>\n</ng-template>" }]
         }], ctorParameters: () => [] });
 
 var userCreate_component = /*#__PURE__*/Object.freeze({
@@ -13871,7 +14689,7 @@ class CideCoreUserListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreUserListComponent, isStandalone: true, selector: "cide-core-user-list", viewQueries: [{ propertyName: "gridComponent", first: true, predicate: CideEleDataGridComponent, descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true, static: true }, { propertyName: "userDetailsTemplate", first: true, predicate: ["userDetailsTemplate"], descendants: true, static: true }, { propertyName: "contactInfoTemplate", first: true, predicate: ["contactInfoTemplate"], descendants: true, static: true }, { propertyName: "organizationTemplate", first: true, predicate: ["organizationTemplate"], descendants: true, static: true }, { propertyName: "validityTemplate", first: true, predicate: ["validityTemplate"], descendants: true, static: true }, { propertyName: "statusTemplate", first: true, predicate: ["statusTemplate"], descendants: true, static: true }], ngImport: i0, template: "<!-- User Master List Container -->\n<div class=\"user-master-listing-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-table tw-h-full\">\n\n  <!-- Header Section with Filters -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n      <div\n        class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-4 sm:tw-space-y-0\">\n\n        <!-- Title -->\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\n          <cide-ele-icon class=\"tw-text-blue-600\">people</cide-ele-icon>\n          <div>\n            <h5 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">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\n\n<!-- Validity Template -->\n<ng-template #validityTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-text-center tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-font-medium\">\n      Validity managed per entity\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600\">\n      Check entity mappings for details\n    </p>\n  </div>\n</ng-template>\n\n<!-- Status Template -->\n<ng-template #statusTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-flex tw-justify-center\">\n    @if (row.user_isactive) {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n      <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n        <circle cx=\"4\" cy=\"4\" r=\"3\" />\n      </svg>\n      Active\n    </span>\n    } @else {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800\">\n      <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n        <circle cx=\"4\" cy=\"4\" r=\"3\" />\n      </svg>\n      Inactive\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Actions Template using cide-ele-dropdown -->\n<ng-template #actionsTemplate let-value let-row=\"row\" let-column=\"column\">\n  <cide-ele-dropdown [items]=\"getDropdownItems(row)\" [config]=\"{  triggerIcon: 'more_vert', triggerSize: 'sm', usePortal: true, minWidth: 200 }\" (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>", styles: [".user-master-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "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", "valueKey", "labelKey"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreUserListComponent, isStandalone: true, selector: "cide-core-user-list", viewQueries: [{ propertyName: "gridComponent", first: true, predicate: CideEleDataGridComponent, descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true, static: true }, { propertyName: "userDetailsTemplate", first: true, predicate: ["userDetailsTemplate"], descendants: true, static: true }, { propertyName: "contactInfoTemplate", first: true, predicate: ["contactInfoTemplate"], descendants: true, static: true }, { propertyName: "organizationTemplate", first: true, predicate: ["organizationTemplate"], descendants: true, static: true }, { propertyName: "validityTemplate", first: true, predicate: ["validityTemplate"], descendants: true, static: true }, { propertyName: "statusTemplate", first: true, predicate: ["statusTemplate"], descendants: true, static: true }], ngImport: i0, template: "<!-- User Master List Container -->\n<div class=\"user-master-listing-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-table tw-h-full\">\n\n  <!-- Header Section with Filters -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n      <div\n        class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-4 sm:tw-space-y-0\">\n\n        <!-- Title -->\n        <div class=\"tw-flex tw-items-center tw-space-x-3\"> \n          <cide-ele-icon class=\"tw-text-blue-600\">people</cide-ele-icon>\n          <div>\n            <h5 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">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\n\n<!-- Validity Template -->\n<ng-template #validityTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-text-center tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-font-medium\">\n      Validity managed per entity\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600\">\n      Check entity mappings for details\n    </p>\n  </div>\n</ng-template>\n\n<!-- Status Template -->\n<ng-template #statusTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-flex tw-justify-center\">\n    @if (row.user_isactive) {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n      <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n        <circle cx=\"4\" cy=\"4\" r=\"3\" />\n      </svg>\n      Active\n    </span>\n    } @else {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800\">\n      <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n        <circle cx=\"4\" cy=\"4\" r=\"3\" />\n      </svg>\n      Inactive\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Actions Template using cide-ele-dropdown -->\n<ng-template #actionsTemplate let-value let-row=\"row\" let-column=\"column\">\n  <cide-ele-dropdown [items]=\"getDropdownItems(row)\" [config]=\"{  triggerIcon: 'more_vert', triggerSize: 'sm', usePortal: true, minWidth: 200 }\" (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>", styles: [".user-master-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "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", "valueKey", "labelKey"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserListComponent, decorators: [{
             type: Component,
@@ -13883,7 +14701,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-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\n\n<!-- Validity Template -->\n<ng-template #validityTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-text-center tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-font-medium\">\n      Validity managed per entity\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600\">\n      Check entity mappings for details\n    </p>\n  </div>\n</ng-template>\n\n<!-- Status Template -->\n<ng-template #statusTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-flex tw-justify-center\">\n    @if (row.user_isactive) {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n      <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n        <circle cx=\"4\" cy=\"4\" r=\"3\" />\n      </svg>\n      Active\n    </span>\n    } @else {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800\">\n      <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n        <circle cx=\"4\" cy=\"4\" r=\"3\" />\n      </svg>\n      Inactive\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Actions Template using cide-ele-dropdown -->\n<ng-template #actionsTemplate let-value let-row=\"row\" let-column=\"column\">\n  <cide-ele-dropdown [items]=\"getDropdownItems(row)\" [config]=\"{  triggerIcon: 'more_vert', triggerSize: 'sm', usePortal: true, minWidth: 200 }\" (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>", styles: [".user-master-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"] }]
+                    ], 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\n\n<!-- Validity Template -->\n<ng-template #validityTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-text-center tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-font-medium\">\n      Validity managed per entity\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600\">\n      Check entity mappings for details\n    </p>\n  </div>\n</ng-template>\n\n<!-- Status Template -->\n<ng-template #statusTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-flex tw-justify-center\">\n    @if (row.user_isactive) {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n      <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n        <circle cx=\"4\" cy=\"4\" r=\"3\" />\n      </svg>\n      Active\n    </span>\n    } @else {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800\">\n      <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n        <circle cx=\"4\" cy=\"4\" r=\"3\" />\n      </svg>\n      Inactive\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Actions Template using cide-ele-dropdown -->\n<ng-template #actionsTemplate let-value let-row=\"row\" let-column=\"column\">\n  <cide-ele-dropdown [items]=\"getDropdownItems(row)\" [config]=\"{  triggerIcon: 'more_vert', triggerSize: 'sm', usePortal: true, minWidth: 200 }\" (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>", styles: [".user-master-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"] }]
         }], propDecorators: { gridComponent: [{
                 type: ViewChild,
                 args: [CideEleDataGridComponent]