@es.framework/ng.ui.theme 2.0.59 → 2.0.60

package/fesm2022/es.framework-ng.ui.theme.mjs

@@ -4,12 +4,12 @@ import { Subject, Observable, lastValueFrom, BehaviorSubject, map, filter } from
 import * as i3$3 from '@es.framework/ng.core/services';
 import { ConfigStateService, SessionStateService, LocalizationService, LocalStorageService, NavItemsService, UserMenuService, RoutesService, SubscriptionService, ReplaceableComponentsService } from '@es.framework/ng.core/services';
 import { eLayoutType } from '@es.framework/ng.core/models';
-import * as i2$2 from '@angular/router';
+import * as i2$1 from '@angular/router';
 import { Router, RouterModule, RouterOutlet, NavigationEnd } from '@angular/router';
 import * as i1$1 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import { StyleClassModule } from 'primeng/styleclass';
-import * as i3$1 from 'primeng/avatar';
+import * as i3$2 from 'primeng/avatar';
 import { AvatarModule } from 'primeng/avatar';
 import * as i5 from 'primeng/menu';
 import { MenuModule } from 'primeng/menu';
@@ -19,7 +19,7 @@ import { OverlayModule } from 'primeng/overlay';
 import { VisibleDirective, HasPermissionDirective, ReplaceableTemplateDirective } from '@es.framework/ng.core/directives';
 import { TranslatePipe, ToInjectorPipe } from '@es.framework/ng.core/pipes';
 import { toSignal } from '@angular/core/rxjs-interop';
-import * as i2$1 from '@angular/forms';
+import * as i3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { SelectModule } from 'primeng/select';
 import * as i1 from 'primeng/popover';
@@ -30,11 +30,11 @@ import Aura from '@primeng/themes/aura';
 import Lara from '@primeng/themes/lara';
 import Nora from '@primeng/themes/nora';
 import { PrimeNG } from 'primeng/config';
-import * as i3 from 'primeng/selectbutton';
+import * as i3$1 from 'primeng/selectbutton';
 import { SelectButtonModule } from 'primeng/selectbutton';
 import { AuthService } from '@es.framework/ng.core/abstracts';
 import * as i4 from 'primeng/api';
-import * as i3$2 from 'primeng/tooltip';
+import * as i4$1 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
 import Swal from 'sweetalert2';
 import { NAVIGATE_TO_MANAGE_PROFILE } from '@es.framework/ng.core/tokens';
@@ -210,36 +210,36 @@ class LanguagesComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LanguagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: LanguagesComponent, isStandalone: true, selector: "abp-languages", ngImport: i0, template: `
-   @if (languages(); as langs) {
-     <div>
-       <!--  -->
-       <button
-         pButton
-         type="button"
-         icon="pi pi-globe"
-         class="p-button-text"
-         [title]="'اختر اللغة'"
-         (click)="overlay.toggle($event)"
-       ></button>
-       <p-popover #overlay >
-         <ul class="w-48">
-           @for (lang of langs; track lang) {
-             <li
-               class="flex items-center justify-between px-3 py-2 cursor-pointer hover:bg-gray-100"
-               (click)="onSelectLanguage(lang.cultureName ?? ''); overlay.hide()"
-               >
-               <span>{{ lang.displayName }}</span>
-               @if (lang.cultureName === selectedLang()) {
-                 <i class="pi pi-check text-green-500"></i>
-               }
-             </li>
-           }
-         </ul>
-       </p-popover>
-     </div>
-   }
-   
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: LanguagesComponent, isStandalone: true, selector: "abp-languages", ngImport: i0, template: `
+   @if (languages(); as langs) {
+     <div>
+       <!--  -->
+       <button
+         pButton
+         type="button"
+         icon="pi pi-globe"
+         class="p-button-text"
+         [title]="'اختر اللغة'"
+         (click)="overlay.toggle($event)"
+       ></button>
+       <p-popover #overlay >
+         <ul class="w-48">
+           @for (lang of langs; track lang) {
+             <li
+               class="flex items-center justify-between px-3 py-2 cursor-pointer hover:bg-gray-100"
+               (click)="onSelectLanguage(lang.cultureName ?? ''); overlay.hide()"
+               >
+               <span>{{ lang.displayName }}</span>
+               @if (lang.cultureName === selectedLang()) {
+                 <i class="pi pi-check text-green-500"></i>
+               }
+             </li>
+           }
+         </ul>
+       </p-popover>
+     </div>
+   }
+   
    `, isInline: true, dependencies: [{ kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LanguagesComponent, decorators: [{
@@ -248,36 +248,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                     selector: 'abp-languages',
                     standalone: true,
                     imports: [SelectModule, FormsModule, PopoverModule, ButtonModule],
-                    template: `
-   @if (languages(); as langs) {
-     <div>
-       <!--  -->
-       <button
-         pButton
-         type="button"
-         icon="pi pi-globe"
-         class="p-button-text"
-         [title]="'اختر اللغة'"
-         (click)="overlay.toggle($event)"
-       ></button>
-       <p-popover #overlay >
-         <ul class="w-48">
-           @for (lang of langs; track lang) {
-             <li
-               class="flex items-center justify-between px-3 py-2 cursor-pointer hover:bg-gray-100"
-               (click)="onSelectLanguage(lang.cultureName ?? ''); overlay.hide()"
-               >
-               <span>{{ lang.displayName }}</span>
-               @if (lang.cultureName === selectedLang()) {
-                 <i class="pi pi-check text-green-500"></i>
-               }
-             </li>
-           }
-         </ul>
-       </p-popover>
-     </div>
-   }
-   
+                    template: `
+   @if (languages(); as langs) {
+     <div>
+       <!--  -->
+       <button
+         pButton
+         type="button"
+         icon="pi pi-globe"
+         class="p-button-text"
+         [title]="'اختر اللغة'"
+         (click)="overlay.toggle($event)"
+       ></button>
+       <p-popover #overlay >
+         <ul class="w-48">
+           @for (lang of langs; track lang) {
+             <li
+               class="flex items-center justify-between px-3 py-2 cursor-pointer hover:bg-gray-100"
+               (click)="onSelectLanguage(lang.cultureName ?? ''); overlay.hide()"
+               >
+               <span>{{ lang.displayName }}</span>
+               @if (lang.cultureName === selectedLang()) {
+                 <i class="pi pi-check text-green-500"></i>
+               }
+             </li>
+           }
+         </ul>
+       </p-popover>
+     </div>
+   }
+   
    `
                 }]
         }], ctorParameters: () => [] });
@@ -452,7 +452,45 @@ class AppConfigurator {
     primaryColors = computed(() => {
         const presetPalette = presets[this.layoutService.layoutConfig().preset].primitive;
         const colors = ['blue', 'green', 'lime', 'orange', 'amber', 'yellow', 'teal', 'cyan', 'sky', 'emerald', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'];
-        const palettes = [{ name: 'noir', palette: {} }];
+        const customColors = [
+            {
+                name: 'ghazali',
+                palette: {
+                    50: '#fbf7f2',
+                    100: '#f4eadf',
+                    200: '#e8d3bf',
+                    300: '#d8b596',
+                    400: '#c99572',
+                    500: '#b97855',
+                    600: '#a45f3f',
+                    700: '#884a34',
+                    800: '#713d2f',
+                    900: '#5e342b',
+                    950: '#351914'
+                }
+            },
+            {
+                name: 'brown',
+                palette: {
+                    50: '#faf6f3',
+                    100: '#f1e5dc',
+                    200: '#e2c9b8',
+                    300: '#cea58a',
+                    400: '#b97e5d',
+                    500: '#9f6244',
+                    600: '#814a34',
+                    700: '#6a3d2e',
+                    800: '#59342a',
+                    900: '#4c2e27',
+                    950: '#2b1712'
+                }
+            },
+        ];
+        // const palettes: SurfacesType[] = [{ name: 'noir', palette: {} }];
+        const palettes = [
+            { name: 'noir', palette: {} },
+            ...customColors
+        ];
         colors.forEach((color) => {
             palettes.push({
                 name: color,
@@ -636,54 +674,54 @@ class AppConfigurator {
         this.layoutService.layoutConfig.update((prev) => ({ ...prev, menuMode: event }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AppConfigurator, isStandalone: true, selector: "app-configurator", ngImport: i0, template: `
-        <div class="flex flex-col gap-4">
-          <div>
-            <span class="text-sm text-muted-color font-semibold">Primary</span>
-            <div class="pt-2 flex gap-2 flex-wrap justify-start">
-              @for (primaryColor of primaryColors(); track primaryColor.name) {
-                <button
-                  type="button"
-                  [title]="primaryColor.name"
-                  (click)="updateColors($event, 'primary', primaryColor)"
-                  [ngClass]="{ 'outline-primary': primaryColor.name === selectedPrimaryColor() }"
-                  class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
-                            [style]="{
-                                'background-color': primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500']
-                            }"
-                ></button>
-              }
-            </div>
-          </div>
-          <div>
-            <span class="text-sm text-muted-color font-semibold">Surface</span>
-            <div class="pt-2 flex gap-2 flex-wrap justify-start">
-              @for (surface of surfaces; track surface.name) {
-                <button
-                  type="button"
-                  [title]="surface.name"
-                  (click)="updateColors($event, 'surface', surface)"
-                  [ngClass]="{ 'outline-primary': selectedSurfaceColor() ? selectedSurfaceColor() === surface.name : layoutService.layoutConfig().darkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
-                  class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
-                            [style]="{
-                                'background-color': surface?.name === 'noir' ? 'var(--text-color)' : surface?.palette?.['500']
-                            }"
-                ></button>
-              }
-            </div>
-          </div>
-          <div class="flex flex-col gap-2">
-            <span class="text-sm text-muted-color font-semibold">Presets</span>
-            <p-selectbutton [options]="presets" [ngModel]="selectedPreset()" (ngModelChange)="onPresetChange($event)" [allowEmpty]="false" size="small" />
-          </div>
-          @if (showMenuModeButton()) {
-            <div class="flex flex-col gap-2">
-              <span class="text-sm text-muted-color font-semibold">Menu Mode</span>
-              <p-selectbutton [ngModel]="menuMode()" (ngModelChange)="onMenuModeChange($event)" [options]="menuModeOptions" [allowEmpty]="false" size="small" />
-            </div>
-          }
-        </div>
-        `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i3.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AppConfigurator, isStandalone: true, selector: "app-configurator", ngImport: i0, template: `
+        <div class="flex flex-col gap-4">
+          <div>
+            <span class="text-sm text-muted-color font-semibold">Primary</span>
+            <div class="pt-2 flex gap-2 flex-wrap justify-start">
+              @for (primaryColor of primaryColors(); track primaryColor.name) {
+                <button
+                  type="button"
+                  [title]="primaryColor.name"
+                  (click)="updateColors($event, 'primary', primaryColor)"
+                  [ngClass]="{ 'outline-primary': primaryColor.name === selectedPrimaryColor() }"
+                  class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
+                            [style]="{
+                                'background-color': primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500']
+                            }"
+                ></button>
+              }
+            </div>
+          </div>
+          <div>
+            <span class="text-sm text-muted-color font-semibold">Surface</span>
+            <div class="pt-2 flex gap-2 flex-wrap justify-start">
+              @for (surface of surfaces; track surface.name) {
+                <button
+                  type="button"
+                  [title]="surface.name"
+                  (click)="updateColors($event, 'surface', surface)"
+                  [ngClass]="{ 'outline-primary': selectedSurfaceColor() ? selectedSurfaceColor() === surface.name : layoutService.layoutConfig().darkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
+                  class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
+                            [style]="{
+                                'background-color': surface?.name === 'noir' ? 'var(--text-color)' : surface?.palette?.['500']
+                            }"
+                ></button>
+              }
+            </div>
+          </div>
+          <div class="flex flex-col gap-2">
+            <span class="text-sm text-muted-color font-semibold">Presets</span>
+            <p-selectbutton [options]="presets" [ngModel]="selectedPreset()" (ngModelChange)="onPresetChange($event)" [allowEmpty]="false" size="small" />
+          </div>
+          @if (showMenuModeButton()) {
+            <div class="flex flex-col gap-2">
+              <span class="text-sm text-muted-color font-semibold">Menu Mode</span>
+              <p-selectbutton [ngModel]="menuMode()" (ngModelChange)="onMenuModeChange($event)" [options]="menuModeOptions" [allowEmpty]="false" size="small" />
+            </div>
+          }
+        </div>
+        `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i3$1.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppConfigurator, decorators: [{
             type: Component,
@@ -691,53 +729,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                     selector: 'app-configurator',
                     standalone: true,
                     imports: [CommonModule, FormsModule, SelectButtonModule],
-                    template: `
-        <div class="flex flex-col gap-4">
-          <div>
-            <span class="text-sm text-muted-color font-semibold">Primary</span>
-            <div class="pt-2 flex gap-2 flex-wrap justify-start">
-              @for (primaryColor of primaryColors(); track primaryColor.name) {
-                <button
-                  type="button"
-                  [title]="primaryColor.name"
-                  (click)="updateColors($event, 'primary', primaryColor)"
-                  [ngClass]="{ 'outline-primary': primaryColor.name === selectedPrimaryColor() }"
-                  class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
-                            [style]="{
-                                'background-color': primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500']
-                            }"
-                ></button>
-              }
-            </div>
-          </div>
-          <div>
-            <span class="text-sm text-muted-color font-semibold">Surface</span>
-            <div class="pt-2 flex gap-2 flex-wrap justify-start">
-              @for (surface of surfaces; track surface.name) {
-                <button
-                  type="button"
-                  [title]="surface.name"
-                  (click)="updateColors($event, 'surface', surface)"
-                  [ngClass]="{ 'outline-primary': selectedSurfaceColor() ? selectedSurfaceColor() === surface.name : layoutService.layoutConfig().darkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
-                  class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
-                            [style]="{
-                                'background-color': surface?.name === 'noir' ? 'var(--text-color)' : surface?.palette?.['500']
-                            }"
-                ></button>
-              }
-            </div>
-          </div>
-          <div class="flex flex-col gap-2">
-            <span class="text-sm text-muted-color font-semibold">Presets</span>
-            <p-selectbutton [options]="presets" [ngModel]="selectedPreset()" (ngModelChange)="onPresetChange($event)" [allowEmpty]="false" size="small" />
-          </div>
-          @if (showMenuModeButton()) {
-            <div class="flex flex-col gap-2">
-              <span class="text-sm text-muted-color font-semibold">Menu Mode</span>
-              <p-selectbutton [ngModel]="menuMode()" (ngModelChange)="onMenuModeChange($event)" [options]="menuModeOptions" [allowEmpty]="false" size="small" />
-            </div>
-          }
-        </div>
+                    template: `
+        <div class="flex flex-col gap-4">
+          <div>
+            <span class="text-sm text-muted-color font-semibold">Primary</span>
+            <div class="pt-2 flex gap-2 flex-wrap justify-start">
+              @for (primaryColor of primaryColors(); track primaryColor.name) {
+                <button
+                  type="button"
+                  [title]="primaryColor.name"
+                  (click)="updateColors($event, 'primary', primaryColor)"
+                  [ngClass]="{ 'outline-primary': primaryColor.name === selectedPrimaryColor() }"
+                  class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
+                            [style]="{
+                                'background-color': primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500']
+                            }"
+                ></button>
+              }
+            </div>
+          </div>
+          <div>
+            <span class="text-sm text-muted-color font-semibold">Surface</span>
+            <div class="pt-2 flex gap-2 flex-wrap justify-start">
+              @for (surface of surfaces; track surface.name) {
+                <button
+                  type="button"
+                  [title]="surface.name"
+                  (click)="updateColors($event, 'surface', surface)"
+                  [ngClass]="{ 'outline-primary': selectedSurfaceColor() ? selectedSurfaceColor() === surface.name : layoutService.layoutConfig().darkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
+                  class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
+                            [style]="{
+                                'background-color': surface?.name === 'noir' ? 'var(--text-color)' : surface?.palette?.['500']
+                            }"
+                ></button>
+              }
+            </div>
+          </div>
+          <div class="flex flex-col gap-2">
+            <span class="text-sm text-muted-color font-semibold">Presets</span>
+            <p-selectbutton [options]="presets" [ngModel]="selectedPreset()" (ngModelChange)="onPresetChange($event)" [allowEmpty]="false" size="small" />
+          </div>
+          @if (showMenuModeButton()) {
+            <div class="flex flex-col gap-2">
+              <span class="text-sm text-muted-color font-semibold">Menu Mode</span>
+              <p-selectbutton [ngModel]="menuMode()" (ngModelChange)="onMenuModeChange($event)" [options]="menuModeOptions" [allowEmpty]="false" size="small" />
+            </div>
+          }
+        </div>
         `,
                 }]
         }] });
@@ -868,168 +906,168 @@ class NavItemsComponent {
         this.authService.navigateToLogin();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NavItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: NavItemsComponent, isStandalone: true, selector: "app-nav-items", ngImport: i0, template: `
-    <header class="flex items-center justify-between px-6 h-16 bg-white shadow sticky top-0 z-9">
-      <!-- Left: Logo / Title -->
-      <div class="flex items-center space-x-3 rtl:space-x-reverse">
-        <img src="assets/logo.png" alt="Logo" class="h-8 w-8" />
-        <span class="text-lg font-semibold text-gray-800">{{ '' | translate }}</span>
-      </div>
-    
-      <!-- Center: Nav Items -->
-      <div class="flex items-center space-x-4 rtl:space-x-reverse">
-        <ul class="flex space-x-4">
-          @for (item of navItems.items$ | async; track item.id) {
-            @if (!item.visible || item.visible(item)) {
-              <ng-container *frameworkVisible="!item.visible || item.visible(item)">
-                <li class="flex items-center">
-                  @if (item.component) {
-                    <ng-container
-                      [ngComponentOutlet]="item.component"
-                      [ngComponentOutletInjector]="item | toInjector"
-                    ></ng-container>
-                  } @else {
-                    <button
-                      pButton
-                      type="button"
-                      class="p-button-text hover:bg-gray-100 focus:outline-none flex items-center"
-                      (click)="item.action?.()"
-                      >
-                      <span [innerHTML]="item.html"></span>
-                    </button>
-                  }
-                </li>
-              </ng-container>
-            }
-          }
-        </ul>
-      </div>
-    
-      <!-- Right: Actions -->
-      <div class="flex items-center  rtl:space-x-reverse">
-        <!-- Configurator -->
-    
-        <div>
-          <!--  -->
-          <button
-            pButton
-            type="button"
-            icon="pi pi-palette"
-            class="p-button-text"
-            [title]="''"
-            (click)="overlay.toggle($event)"
-            >
-          </button>
-    
-          <p-popover #overlay >
-            <app-configurator />
-          </p-popover>
-        </div>
-    
-    
-        <!-- Dark Mode Toggle -->
-        <button
-          pButton
-          type="button"
-          [icon]="layoutService.isDarkTheme() ?'pi pi-moon': 'pi pi-sun'"
-          class="p-button-text"
-          (click)="toggleDarkMode()">
-        </button>
-    
-        <!-- Language Switcher -->
-        <abp-languages></abp-languages>
-    
-        <!-- User Menu -->
-        <div class="relative">
-          <button
-            class="p-link p-2"
-            (click)="menu.toggle($event)"
-            aria-label="User menu"
-            >
-            <p-avatar
-              [label]="loading ? '' : userName"
-              [icon]="loading ? 'pi pi-spinner' : ''"
-              [class]="{'pi-spin': loading}"
-              shape="circle"
-              class="bg-blue-600 text-white cursor-pointer"
-              [title]="(currentUser$ | async)?.name || ''"
-            ></p-avatar>
-          </button>
-    
-          <p-menu
-            #menu
-            [model]="userMenuItems"
-            [popup]="true"
-            [appendTo]="'body'"
-            styleClass="w-64 sm:w-72 shadow-lg rounded-md"
-            >
-            <ng-template pTemplate="start">
-              <div class="px-5 py-4 border-b border-gray-200 bg-gray-50 flex flex-col items-center text-center">
-                <p-avatar
-                  [label]="userName"
-                  shape="circle"
-                  size="xlarge"
-                  styleClass="bg-blue-600 text-white mb-3 shadow-lg"
-                  [title]="(currentUser$ | async)?.name || ''"
-                ></p-avatar>
-                <h5 class="text-xl font-semibold text-gray-800 leading-tight">
-                  {{ (currentUser$ | async)?.name || 'اسم المستخدم' }}
-                </h5>
-                <p class="text-sm text-gray-600 truncate max-w-full">
-                  {{ (currentUser$ | async)?.email || 'لا يوجد بريد إلكتروني' }}
-                </p>
-                @if ((selectedTenant$ | async); as tenant) {
-                  <span
-                    class="inline-block mt-2 px-3 py-1 text-xs rounded-full font-semibold"
-                  [ngClass]="{
-                    'bg-green-100 text-green-800': true
-                  }"
-                    >
-                    {{ tenant?.name || '_' }}
-                  </span>
-                }
-              </div>
-            </ng-template>
-    
-            <ng-template pTemplate="item" let-item>
-              <!-- *frameworkVisible="!item.visible || item.visible(item)" -->
-              <ng-container >
-                <!-- *hasPermission="item.requiredPolicy" -->
-                <a
-    
-                  class="p-menuitem-link flex items-center space-x-3 rtl:space-x-reverse px-5 py-2 hover:bg-gray-100 rounded-md"
-                  [ngClass]="item.styleClass || ''"
-                  (click)="item.command ? item.command() : null"
-                  [routerLink]="item.routerLink ? item.routerLink : null"
-                  tabindex="0"
-                  >
-                  @if (item.component) {
-                    <ng-container
-                      [ngComponentOutlet]="item.component"
-                      [ngComponentOutletInjector]="item | toInjector"
-                    ></ng-container>
-                  } @else {
-                    <i [class]="item.icon + ' text-lg text-gray-600'"></i>
-                    <span class="text-gray-700">{{ item.label | translate }}</span>
-                  }
-                </a>
-              </ng-container>
-            </ng-template>
-          </p-menu>
-        </div>
-    
-        <!-- Logout Button (separate from menu) -->
-        <!-- <button
-        type="button"
-        class="layout-topbar-action"
-        (click)="logout()"
-        title="تسجيل الخروج"
-        >
-        <i class="pi pi-sign-out"></i>
-      </button> -->
-    </div>
-    </header>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "component", type: AppConfigurator, selector: "app-configurator" }, { kind: "component", type: LanguagesComponent, selector: "abp-languages" }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i3$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i5.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: VisibleDirective, selector: "[frameworkVisible]", inputs: ["frameworkVisible"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: ToInjectorPipe, name: "toInjector" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: NavItemsComponent, isStandalone: true, selector: "app-nav-items", ngImport: i0, template: `
+    <header class="flex items-center justify-between px-6 h-16 bg-white shadow sticky top-0 z-9">
+      <!-- Left: Logo / Title -->
+      <div class="flex items-center space-x-3 rtl:space-x-reverse">
+        <img src="assets/logo.png" alt="Logo" class="h-8 w-8" />
+        <span class="text-lg font-semibold text-gray-800">{{ '' | translate }}</span>
+      </div>
+    
+      <!-- Center: Nav Items -->
+      <div class="flex items-center space-x-4 rtl:space-x-reverse">
+        <ul class="flex space-x-4">
+          @for (item of navItems.items$ | async; track item.id) {
+            @if (!item.visible || item.visible(item)) {
+              <ng-container *frameworkVisible="!item.visible || item.visible(item)">
+                <li class="flex items-center">
+                  @if (item.component) {
+                    <ng-container
+                      [ngComponentOutlet]="item.component"
+                      [ngComponentOutletInjector]="item | toInjector"
+                    ></ng-container>
+                  } @else {
+                    <button
+                      pButton
+                      type="button"
+                      class="p-button-text hover:bg-gray-100 focus:outline-none flex items-center"
+                      (click)="item.action?.()"
+                      >
+                      <span [innerHTML]="item.html"></span>
+                    </button>
+                  }
+                </li>
+              </ng-container>
+            }
+          }
+        </ul>
+      </div>
+    
+      <!-- Right: Actions -->
+      <div class="flex items-center  rtl:space-x-reverse">
+        <!-- Configurator -->
+    
+        <div>
+          <!--  -->
+          <button
+            pButton
+            type="button"
+            icon="pi pi-palette"
+            class="p-button-text"
+            [title]="''"
+            (click)="overlay.toggle($event)"
+            >
+          </button>
+    
+          <p-popover #overlay >
+            <app-configurator />
+          </p-popover>
+        </div>
+    
+    
+        <!-- Dark Mode Toggle -->
+        <button
+          pButton
+          type="button"
+          [icon]="layoutService.isDarkTheme() ?'pi pi-moon': 'pi pi-sun'"
+          class="p-button-text"
+          (click)="toggleDarkMode()">
+        </button>
+    
+        <!-- Language Switcher -->
+        <abp-languages></abp-languages>
+    
+        <!-- User Menu -->
+        <div class="relative">
+          <button
+            class="p-link p-2"
+            (click)="menu.toggle($event)"
+            aria-label="User menu"
+            >
+            <p-avatar
+              [label]="loading ? '' : userName"
+              [icon]="loading ? 'pi pi-spinner' : ''"
+              [class]="{'pi-spin': loading}"
+              shape="circle"
+              class="bg-blue-600 text-white cursor-pointer"
+              [title]="(currentUser$ | async)?.name || ''"
+            ></p-avatar>
+          </button>
+    
+          <p-menu
+            #menu
+            [model]="userMenuItems"
+            [popup]="true"
+            [appendTo]="'body'"
+            styleClass="w-64 sm:w-72 shadow-lg rounded-md"
+            >
+            <ng-template pTemplate="start">
+              <div class="px-5 py-4 border-b border-gray-200 bg-gray-50 flex flex-col items-center text-center">
+                <p-avatar
+                  [label]="userName"
+                  shape="circle"
+                  size="xlarge"
+                  styleClass="bg-blue-600 text-white mb-3 shadow-lg"
+                  [title]="(currentUser$ | async)?.name || ''"
+                ></p-avatar>
+                <h5 class="text-xl font-semibold text-gray-800 leading-tight">
+                  {{ (currentUser$ | async)?.name || 'اسم المستخدم' }}
+                </h5>
+                <p class="text-sm text-gray-600 truncate max-w-full">
+                  {{ (currentUser$ | async)?.email || 'لا يوجد بريد إلكتروني' }}
+                </p>
+                @if ((selectedTenant$ | async); as tenant) {
+                  <span
+                    class="inline-block mt-2 px-3 py-1 text-xs rounded-full font-semibold"
+                  [ngClass]="{
+                    'bg-green-100 text-green-800': true
+                  }"
+                    >
+                    {{ tenant?.name || '_' }}
+                  </span>
+                }
+              </div>
+            </ng-template>
+    
+            <ng-template pTemplate="item" let-item>
+              <!-- *frameworkVisible="!item.visible || item.visible(item)" -->
+              <ng-container >
+                <!-- *hasPermission="item.requiredPolicy" -->
+                <a
+    
+                  class="p-menuitem-link flex items-center space-x-3 rtl:space-x-reverse px-5 py-2 hover:bg-gray-100 rounded-md"
+                  [ngClass]="item.styleClass || ''"
+                  (click)="item.command ? item.command() : null"
+                  [routerLink]="item.routerLink ? item.routerLink : null"
+                  tabindex="0"
+                  >
+                  @if (item.component) {
+                    <ng-container
+                      [ngComponentOutlet]="item.component"
+                      [ngComponentOutletInjector]="item | toInjector"
+                    ></ng-container>
+                  } @else {
+                    <i [class]="item.icon + ' text-lg text-gray-600'"></i>
+                    <span class="text-gray-700">{{ item.label | translate }}</span>
+                  }
+                </a>
+              </ng-container>
+            </ng-template>
+          </p-menu>
+        </div>
+    
+        <!-- Logout Button (separate from menu) -->
+        <!-- <button
+        type="button"
+        class="layout-topbar-action"
+        (click)="logout()"
+        title="تسجيل الخروج"
+        >
+        <i class="pi pi-sign-out"></i>
+      </button> -->
+    </div>
+    </header>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "component", type: AppConfigurator, selector: "app-configurator" }, { kind: "component", type: LanguagesComponent, selector: "abp-languages" }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i3$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i5.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: VisibleDirective, selector: "[frameworkVisible]", inputs: ["frameworkVisible"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: ToInjectorPipe, name: "toInjector" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NavItemsComponent, decorators: [{
             type: Component,
@@ -1052,167 +1090,167 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         ToInjectorPipe,
                         PopoverModule
                     ],
-                    template: `
-    <header class="flex items-center justify-between px-6 h-16 bg-white shadow sticky top-0 z-9">
-      <!-- Left: Logo / Title -->
-      <div class="flex items-center space-x-3 rtl:space-x-reverse">
-        <img src="assets/logo.png" alt="Logo" class="h-8 w-8" />
-        <span class="text-lg font-semibold text-gray-800">{{ '' | translate }}</span>
-      </div>
-    
-      <!-- Center: Nav Items -->
-      <div class="flex items-center space-x-4 rtl:space-x-reverse">
-        <ul class="flex space-x-4">
-          @for (item of navItems.items$ | async; track item.id) {
-            @if (!item.visible || item.visible(item)) {
-              <ng-container *frameworkVisible="!item.visible || item.visible(item)">
-                <li class="flex items-center">
-                  @if (item.component) {
-                    <ng-container
-                      [ngComponentOutlet]="item.component"
-                      [ngComponentOutletInjector]="item | toInjector"
-                    ></ng-container>
-                  } @else {
-                    <button
-                      pButton
-                      type="button"
-                      class="p-button-text hover:bg-gray-100 focus:outline-none flex items-center"
-                      (click)="item.action?.()"
-                      >
-                      <span [innerHTML]="item.html"></span>
-                    </button>
-                  }
-                </li>
-              </ng-container>
-            }
-          }
-        </ul>
-      </div>
-    
-      <!-- Right: Actions -->
-      <div class="flex items-center  rtl:space-x-reverse">
-        <!-- Configurator -->
-    
-        <div>
-          <!--  -->
-          <button
-            pButton
-            type="button"
-            icon="pi pi-palette"
-            class="p-button-text"
-            [title]="''"
-            (click)="overlay.toggle($event)"
-            >
-          </button>
-    
-          <p-popover #overlay >
-            <app-configurator />
-          </p-popover>
-        </div>
-    
-    
-        <!-- Dark Mode Toggle -->
-        <button
-          pButton
-          type="button"
-          [icon]="layoutService.isDarkTheme() ?'pi pi-moon': 'pi pi-sun'"
-          class="p-button-text"
-          (click)="toggleDarkMode()">
-        </button>
-    
-        <!-- Language Switcher -->
-        <abp-languages></abp-languages>
-    
-        <!-- User Menu -->
-        <div class="relative">
-          <button
-            class="p-link p-2"
-            (click)="menu.toggle($event)"
-            aria-label="User menu"
-            >
-            <p-avatar
-              [label]="loading ? '' : userName"
-              [icon]="loading ? 'pi pi-spinner' : ''"
-              [class]="{'pi-spin': loading}"
-              shape="circle"
-              class="bg-blue-600 text-white cursor-pointer"
-              [title]="(currentUser$ | async)?.name || ''"
-            ></p-avatar>
-          </button>
-    
-          <p-menu
-            #menu
-            [model]="userMenuItems"
-            [popup]="true"
-            [appendTo]="'body'"
-            styleClass="w-64 sm:w-72 shadow-lg rounded-md"
-            >
-            <ng-template pTemplate="start">
-              <div class="px-5 py-4 border-b border-gray-200 bg-gray-50 flex flex-col items-center text-center">
-                <p-avatar
-                  [label]="userName"
-                  shape="circle"
-                  size="xlarge"
-                  styleClass="bg-blue-600 text-white mb-3 shadow-lg"
-                  [title]="(currentUser$ | async)?.name || ''"
-                ></p-avatar>
-                <h5 class="text-xl font-semibold text-gray-800 leading-tight">
-                  {{ (currentUser$ | async)?.name || 'اسم المستخدم' }}
-                </h5>
-                <p class="text-sm text-gray-600 truncate max-w-full">
-                  {{ (currentUser$ | async)?.email || 'لا يوجد بريد إلكتروني' }}
-                </p>
-                @if ((selectedTenant$ | async); as tenant) {
-                  <span
-                    class="inline-block mt-2 px-3 py-1 text-xs rounded-full font-semibold"
-                  [ngClass]="{
-                    'bg-green-100 text-green-800': true
-                  }"
-                    >
-                    {{ tenant?.name || '_' }}
-                  </span>
-                }
-              </div>
-            </ng-template>
-    
-            <ng-template pTemplate="item" let-item>
-              <!-- *frameworkVisible="!item.visible || item.visible(item)" -->
-              <ng-container >
-                <!-- *hasPermission="item.requiredPolicy" -->
-                <a
-    
-                  class="p-menuitem-link flex items-center space-x-3 rtl:space-x-reverse px-5 py-2 hover:bg-gray-100 rounded-md"
-                  [ngClass]="item.styleClass || ''"
-                  (click)="item.command ? item.command() : null"
-                  [routerLink]="item.routerLink ? item.routerLink : null"
-                  tabindex="0"
-                  >
-                  @if (item.component) {
-                    <ng-container
-                      [ngComponentOutlet]="item.component"
-                      [ngComponentOutletInjector]="item | toInjector"
-                    ></ng-container>
-                  } @else {
-                    <i [class]="item.icon + ' text-lg text-gray-600'"></i>
-                    <span class="text-gray-700">{{ item.label | translate }}</span>
-                  }
-                </a>
-              </ng-container>
-            </ng-template>
-          </p-menu>
-        </div>
-    
-        <!-- Logout Button (separate from menu) -->
-        <!-- <button
-        type="button"
-        class="layout-topbar-action"
-        (click)="logout()"
-        title="تسجيل الخروج"
-        >
-        <i class="pi pi-sign-out"></i>
-      </button> -->
-    </div>
-    </header>
+                    template: `
+    <header class="flex items-center justify-between px-6 h-16 bg-white shadow sticky top-0 z-9">
+      <!-- Left: Logo / Title -->
+      <div class="flex items-center space-x-3 rtl:space-x-reverse">
+        <img src="assets/logo.png" alt="Logo" class="h-8 w-8" />
+        <span class="text-lg font-semibold text-gray-800">{{ '' | translate }}</span>
+      </div>
+    
+      <!-- Center: Nav Items -->
+      <div class="flex items-center space-x-4 rtl:space-x-reverse">
+        <ul class="flex space-x-4">
+          @for (item of navItems.items$ | async; track item.id) {
+            @if (!item.visible || item.visible(item)) {
+              <ng-container *frameworkVisible="!item.visible || item.visible(item)">
+                <li class="flex items-center">
+                  @if (item.component) {
+                    <ng-container
+                      [ngComponentOutlet]="item.component"
+                      [ngComponentOutletInjector]="item | toInjector"
+                    ></ng-container>
+                  } @else {
+                    <button
+                      pButton
+                      type="button"
+                      class="p-button-text hover:bg-gray-100 focus:outline-none flex items-center"
+                      (click)="item.action?.()"
+                      >
+                      <span [innerHTML]="item.html"></span>
+                    </button>
+                  }
+                </li>
+              </ng-container>
+            }
+          }
+        </ul>
+      </div>
+    
+      <!-- Right: Actions -->
+      <div class="flex items-center  rtl:space-x-reverse">
+        <!-- Configurator -->
+    
+        <div>
+          <!--  -->
+          <button
+            pButton
+            type="button"
+            icon="pi pi-palette"
+            class="p-button-text"
+            [title]="''"
+            (click)="overlay.toggle($event)"
+            >
+          </button>
+    
+          <p-popover #overlay >
+            <app-configurator />
+          </p-popover>
+        </div>
+    
+    
+        <!-- Dark Mode Toggle -->
+        <button
+          pButton
+          type="button"
+          [icon]="layoutService.isDarkTheme() ?'pi pi-moon': 'pi pi-sun'"
+          class="p-button-text"
+          (click)="toggleDarkMode()">
+        </button>
+    
+        <!-- Language Switcher -->
+        <abp-languages></abp-languages>
+    
+        <!-- User Menu -->
+        <div class="relative">
+          <button
+            class="p-link p-2"
+            (click)="menu.toggle($event)"
+            aria-label="User menu"
+            >
+            <p-avatar
+              [label]="loading ? '' : userName"
+              [icon]="loading ? 'pi pi-spinner' : ''"
+              [class]="{'pi-spin': loading}"
+              shape="circle"
+              class="bg-blue-600 text-white cursor-pointer"
+              [title]="(currentUser$ | async)?.name || ''"
+            ></p-avatar>
+          </button>
+    
+          <p-menu
+            #menu
+            [model]="userMenuItems"
+            [popup]="true"
+            [appendTo]="'body'"
+            styleClass="w-64 sm:w-72 shadow-lg rounded-md"
+            >
+            <ng-template pTemplate="start">
+              <div class="px-5 py-4 border-b border-gray-200 bg-gray-50 flex flex-col items-center text-center">
+                <p-avatar
+                  [label]="userName"
+                  shape="circle"
+                  size="xlarge"
+                  styleClass="bg-blue-600 text-white mb-3 shadow-lg"
+                  [title]="(currentUser$ | async)?.name || ''"
+                ></p-avatar>
+                <h5 class="text-xl font-semibold text-gray-800 leading-tight">
+                  {{ (currentUser$ | async)?.name || 'اسم المستخدم' }}
+                </h5>
+                <p class="text-sm text-gray-600 truncate max-w-full">
+                  {{ (currentUser$ | async)?.email || 'لا يوجد بريد إلكتروني' }}
+                </p>
+                @if ((selectedTenant$ | async); as tenant) {
+                  <span
+                    class="inline-block mt-2 px-3 py-1 text-xs rounded-full font-semibold"
+                  [ngClass]="{
+                    'bg-green-100 text-green-800': true
+                  }"
+                    >
+                    {{ tenant?.name || '_' }}
+                  </span>
+                }
+              </div>
+            </ng-template>
+    
+            <ng-template pTemplate="item" let-item>
+              <!-- *frameworkVisible="!item.visible || item.visible(item)" -->
+              <ng-container >
+                <!-- *hasPermission="item.requiredPolicy" -->
+                <a
+    
+                  class="p-menuitem-link flex items-center space-x-3 rtl:space-x-reverse px-5 py-2 hover:bg-gray-100 rounded-md"
+                  [ngClass]="item.styleClass || ''"
+                  (click)="item.command ? item.command() : null"
+                  [routerLink]="item.routerLink ? item.routerLink : null"
+                  tabindex="0"
+                  >
+                  @if (item.component) {
+                    <ng-container
+                      [ngComponentOutlet]="item.component"
+                      [ngComponentOutletInjector]="item | toInjector"
+                    ></ng-container>
+                  } @else {
+                    <i [class]="item.icon + ' text-lg text-gray-600'"></i>
+                    <span class="text-gray-700">{{ item.label | translate }}</span>
+                  }
+                </a>
+              </ng-container>
+            </ng-template>
+          </p-menu>
+        </div>
+    
+        <!-- Logout Button (separate from menu) -->
+        <!-- <button
+        type="button"
+        class="layout-topbar-action"
+        (click)="logout()"
+        title="تسجيل الخروج"
+        >
+        <i class="pi pi-sign-out"></i>
+      </button> -->
+    </div>
+    </header>
     `
                 }]
         }], ctorParameters: () => [] });
@@ -1221,6 +1259,7 @@ class RoutesComponent {
     subSidebarVisible = false;
     sidebarVisible = true;
     isMobile = false;
+    searchText = ''; // ✅ البحث
     router = inject(Router);
     localization = inject(LocalizationService);
     layoutService = inject(LayoutService);
@@ -1228,13 +1267,14 @@ class RoutesComponent {
     configState = inject(ConfigStateService);
     secondToLastLevel$;
     _menuItemsSubject = new BehaviorSubject([]);
-    // menuItems$!: Observable<MenuItem[]>;
     menuItems$ = this._menuItemsSubject.asObservable();
     constructor() {
-        // this.menuItems$ = this.routesService.visible$.pipe(
-        //   map(routes => this.buildItems(routes).map(item => ({ ...item, expanded: true })))
-        // );
-        this.routesService.visible$.pipe(map(routes => this.buildItems(routes).map(item => ({ ...item, expanded: true })))).subscribe(items => this._menuItemsSubject.next(items));
+        this.routesService.visible$.pipe(map(routes => {
+            const items = this.buildItems(routes);
+            // ✅ فتح الشجرة كاملة عند الدخول للنظام
+            // this.setExpandedRecursive(items, true);
+            return items;
+        })).subscribe(items => this._menuItemsSubject.next(items));
     }
     ngOnInit() {
         this.checkViewport();
@@ -1242,25 +1282,87 @@ class RoutesComponent {
             const result = [];
             for (const item of items) {
                 if (item.items && item.items.length > 0) {
-                    // إضافة جميع الأبناء المباشرين (المستوى الثاني)
                     result.push(...item.items);
                 }
             }
             return result;
         }));
-        //   this.secondToLastLevel$ = this.menuItems$.pipe(
-        //   map(items => this.getSecondToLastLevel(items))
-        // );
+        // ✅ إظهار الشجرة الفرعية مفتوحة في الديسكتوب عند الدخول
+        if (!this.isMobile) {
+            this.sidebarVisible = true;
+            this.subSidebarVisible = true;
+        }
+    }
+    setExpandedRecursive(items, expanded) {
+        for (const item of items) {
+            item.expanded = expanded;
+            if (item.items?.length) {
+                this.setExpandedRecursive(item.items, expanded);
+            }
+        }
+    }
+    expandAll() {
+        const items = this._menuItemsSubject.value;
+        this.setExpandedRecursive(items, true);
+        this.subSidebarVisible = true;
+        this._menuItemsSubject.next([...items]);
+    }
+    collapseAll() {
+        const items = this._menuItemsSubject.value;
+        this.setExpandedRecursive(items, false);
+        this._menuItemsSubject.next([...items]);
+    }
+    onSearchChange() {
+        const items = this._menuItemsSubject.value;
+        if (!this.searchText.trim()) {
+            // ✅ عند مسح البحث ترجع مغلقة مثل البداية
+            this.setExpandedRecursive(items, false);
+            this._menuItemsSubject.next([...items]);
+            return;
+        }
+        // ✅ أثناء البحث يفتح فقط المسارات المطابقة
+        this.expandMatchedParents(items, this.searchText);
+        this._menuItemsSubject.next([...items]);
+    }
+    expandMatchedParents(items, keyword) {
+        const term = keyword.trim().toLowerCase();
+        let hasMatch = false;
+        for (const item of items) {
+            const label = String(item.label ?? '').toLowerCase();
+            const title = String(item.title ?? '').toLowerCase();
+            const selfMatch = label.includes(term) || title.includes(term);
+            const childMatch = item.items?.length
+                ? this.expandMatchedParents(item.items, keyword)
+                : false;
+            item.expanded = !!childMatch || !!selfMatch;
+            if (selfMatch || childMatch) {
+                hasMatch = true;
+            }
+        }
+        return hasMatch;
+    }
+    isSearchMatch(item) {
+        const term = this.searchText.trim().toLowerCase();
+        if (!term)
+            return false;
+        const label = String(item.label ?? '').toLowerCase();
+        const title = String(item.title ?? '').toLowerCase();
+        return label.includes(term) || title.includes(term);
+    }
+    clearSearch() {
+        this.searchText = '';
+        const items = this._menuItemsSubject.value;
+        // ✅ لا تفتح الكل عند مسح البحث
+        this.setExpandedRecursive(items, false);
+        this._menuItemsSubject.next([...items]);
     }
     getSecondToLastLevel(items) {
         const result = [];
         const traverse = (nodes) => {
             for (const node of nodes) {
                 if (node.items && node.items.length > 0) {
-                    // Check if any child has its own children
                     const hasGrandChildren = node.items.some(c => c.items && c.items.length > 0);
                     if (!hasGrandChildren) {
-                        // Node is right before the last level
                         result.push(node);
                     }
                     else {
@@ -1273,23 +1375,11 @@ class RoutesComponent {
         return result;
     }
     onParentClick(item) {
-        // toggle expand
         item.expanded = !item.expanded;
-        // TODO: Navigate to shell route if needed
-        // if (item.items?.length) {
-        //   // Navigate to shell route
-        //   // Split the path into segments for Angular
-        //   const pathSegments = item.routerLink
-        //     ? (Array.isArray(item.routerLink) ? item.routerLink : item.routerLink.split('/').filter(Boolean))
-        //     : [];
-        //   this.router.navigate(pathSegments);
-        // } else if (item.routerLink) {
-        //   const pathSegments = Array.isArray(item.routerLink) ? item.routerLink : item.routerLink.split('/').filter(Boolean);
-        //   this.router.navigate(pathSegments);
-        // }
-        // this.subSidebarVisible = true;
-    }
-    onResize() { this.checkViewport(); }
+    }
+    onResize() {
+        this.checkViewport();
+    }
     checkViewport() {
         this.isMobile = window.innerWidth < 1024;
         if (this.isMobile) {
@@ -1298,6 +1388,7 @@ class RoutesComponent {
         }
         else {
             this.sidebarVisible = true;
+            // ✅ خلي الشجرة ظاهرة في الديسكتوب
             this.subSidebarVisible = true;
         }
     }
@@ -1321,7 +1412,7 @@ class RoutesComponent {
             if (item.items && item.items.length > 0) {
                 const found = this.expandPath(item.items, target);
                 if (found) {
-                    item.expanded = true; // expand parent
+                    item.expanded = true;
                     return true;
                 }
             }
@@ -1365,14 +1456,7 @@ class RoutesComponent {
     closeMenu() {
         this.subSidebarVisible = false;
         this.sidebarVisible = false;
-        // this.menuItems$.subscribe(items => {
-        //   items.forEach(item => item.expanded = false);
-        // });
-    }
-    // @HostListener('document:keydown.escape')
-    // onEsc() {
-    //   this.closeMenu();
-    //  }
+    }
     onNavigate() {
         if (this.isMobile) {
             this.closeMenu();
@@ -1387,9 +1471,8 @@ class RoutesComponent {
         const item = {
             label: route.name,
             icon: route.iconClass,
-            // routerLink: route.path ? [route.path] : undefined,
             title: route.name,
-            expanded: false
+            expanded: false // ✅ بدل false، افتح كل عنصر افتراضياً
         };
         if (route.isExternal) {
             item.url = route.path;
@@ -1403,25 +1486,9 @@ class RoutesComponent {
         if (this.routesService.hasChildren(route.name)) {
             item.items = this.buildItems(route.children ?? []);
         }
-        else {
-            // TODO: check if grant permission
-            //     if(){
-            //       item['actionButtons']= [
-            //   {
-            //     icon: 'pi pi-plus',
-            //     tooltip: 'ADD',
-            //     click: (item:any, event:any) => {
-            //       this.router.navigate([route.path,'add']);
-            //     },
-            //     visible: (item:any) => true
-            //   }
-            // ];
-            //     }
-        }
         return item;
     }
     hasPermission(policy) {
-        // implement using  permission service
         return true;
     }
     getLinkProps(item) {
@@ -1433,12 +1500,28 @@ class RoutesComponent {
             addRoute: item.addRoute ?? ''
         };
     }
+    showTreeSearch = false;
+    toggleTreeSearch() {
+        this.showTreeSearch = !this.showTreeSearch;
+        if (!this.showTreeSearch) {
+            this.clearSearch();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RoutesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: RoutesComponent, isStandalone: true, selector: "app-routes", host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0, template: "<aside class=\"flex h-screen bg-white dark:bg-gray-900 transition-all duration-300\"\n  [ngClass]=\"{ 'w-0 overflow-hidden': !sidebarVisible && isMobile }\">\n\n  <!-- \uD83C\uDFA8 \u0627\u0644\u0634\u0631\u064A\u0637 \u0627\u0644\u062C\u0627\u0646\u0628\u064A \u0627\u0644\u0631\u0626\u064A\u0633\u064A -->\n  <div\n      class=\"flex flex-col justify-between pt-4 pb-2 w-16 border-l shadow-xl\n             bg-gradient-to-b from-primary-500 via-primary-600 to-primary-700\n             text-white rounded-r-3xl\">\n\n    <!-- \uD83D\uDD1D \u0627\u0644\u0623\u0639\u0644\u0649 -->\n    <div class=\"flex flex-col items-center gap-4\">\n      <img src=\"/assets/logo.png\" alt=\"Logo\"\n        class=\"w-9 h-9 mt-1 rounded-lg shadow-sm\"/>\n\n      <!-- \u0632\u0631 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 -->\n      <!-- [pTooltip]=\"'TOGGLE_MENU' | translate\" -->\n      <button (click)=\"toggleAll()\"\n        tooltipPosition=\"right\"\n        class=\"text-white hover:scale-110 transition-transform duration-200\">\n        <i class=\"pi pi-bars text-lg\"></i>\n      </button>\n\n      <!-- \u0623\u064A\u0642\u0648\u0646\u0627\u062A -->\n      @for (item of secondToLastLevel$ | async; track item) {\n        <div class=\"relative flex flex-col items-center\">\n          <!-- \u0627\u0644\u0623\u064A\u0642\u0648\u0646\u0629 -->\n          <div (click)=\"onMainClick(item)\"\n            [pTooltip]=\"item.label | translate\"\n            tooltipPosition=\"right\"\n                 class=\"relative flex items-center justify-center w-10 h-10 rounded-xl cursor-pointer\n                        hover:bg-white/20 transition-all duration-200\"\n            [ngClass]=\"{ 'bg-white/30 scale-105 shadow-inner': item.expanded }\">\n            <i [class]=\"item.icon + ' text-xl'\"></i>\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- \u2699\uFE0F \u0627\u0644\u0623\u0633\u0641\u0644 -->\n    <div class=\"flex flex-col items-center pb-3 text-white/80\">\n      <i class=\"pi pi-cog text-lg hover:text-white cursor-pointer transition\"></i>\n    </div>\n  </div>\n\n  <!-- \uD83D\uDCCB \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0641\u0631\u0639\u064A\u0629 -->\n  @if (subSidebarVisible) {\n    <div\n    class=\"w-[290px] max-w-[290px] min-w-[260px] border-l border-gray-200 dark:border-gray-700 glass-bg animate-slideIn\n       shadow-2xl rounded-l-3xl p-4 rtl:text-right overflow-y-auto overflow-x-hidden transition-all duration-300\"\n      [ngClass]=\"{ 'absolute top-0 right-16 h-full z-40': isMobile }\">\n      <!-- \u0632\u0631 \u0631\u062C\u0648\u0639 -->\n      <button (click)=\"closeMenu()\"\n        class=\"flex items-center gap-2 mb-4 text-gray-500 dark:text-gray-300 hover:text-primary-600 transition\">\n        <i class=\"pi\" [ngClass]=\"isMobile ? 'pi-angle-right' : 'pi-angle-right'\"></i>\n        <span>{{ 'back' | translate }}</span>\n      </button>\n      <!-- Recursive rendering -->\n     @if (menuItems$ | async; as menuItems) {\n  <ng-container *ngTemplateOutlet=\"renderMenu; context:{ $implicit: menuItems, level: 1 }\"></ng-container>\n}\n\n<ng-template #renderMenu let-items let-level=\"level\">\n  @for (item of items; track item) {\n\n   @if (!item.items?.length) {\n  @let link = getLinkProps(item);\n <div class=\"mb-1\">\n  @if (link.isExternal) {\n    <a [href]=\"link.href\"\n       target=\"_blank\"\n       rel=\"noopener noreferrer\"\n       (click)=\"$event.stopPropagation()\"\n       class=\"flex items-center gap-2 px-3 py-2 rounded-lg transition-all hover:bg-primary-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200\">\n      <i [class]=\"item.icon + ' text-base'\"></i>\n      <span class=\"min-w-0 break-words whitespace-normal\">{{ item.label | translate }}</span>\n      <i class=\"pi pi-external-link text-[10px] opacity-50\"></i>\n    </a>\n  } @else {\n    <div class=\"flex items-center gap-2\">\n      <a [routerLink]=\"link.routerLink\"\n         (click)=\"onNavigate()\"\n         routerLinkActive=\"active-link\"\n         class=\"flex-1 min-w-0 flex items-center gap-2 px-2 py-1 rounded-lg transition-all hover:bg-primary-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200\">\n        <i [class]=\"item.icon + ' text-base'\"></i>\n        <span class=\"min-w-0 break-words whitespace-normal\">\n          {{ item.label | translate }}</span>\n      </a>\n\n@if (link.addRoute) {\n  <a\n    [routerLink]=\"[link.addRoute]\"\n    (click)=\"$event.stopPropagation(); onNavigate()\"\n    class=\"shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full text-gray-400 hover:text-primary-500 hover:bg-primary-50 dark:text-gray-500 dark:hover:text-primary-400 dark:hover:bg-primary-900/20 transition-all duration-200\"\n    [pTooltip]=\"'ADD' | translate\"\n    tooltipPosition=\"top\">\n    <i class=\"pi pi-plus text-xs\"></i>\n  </a>\n}\n    </div>\n  }\n</div>\n}\n\n    @if (item.items?.length) {\n      <div class=\"mb-1\">\n\n        <div\n          (click)=\"onParentClick(item)\"\n          [style.font-size.rem]=\"1.1 - (level * 0.05)\"\n          [ngClass]=\"{\n            'font-bold': level === 1,\n            'font-semibold': level === 2,\n            'font-medium': level >= 3,\n            'bg-primary-50 text-primary-700 border-r-4 border-primary-500': item.expanded\n          }\"\n          class=\"flex justify-between items-center py-2 px-3 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-800 dark:text-gray-200\">\n\n          <div class=\"flex items-center gap-2\">\n\n            <i [class]=\"item.icon + ' text-base'\"></i>\n\n            <span>\n              {{ item.label | translate }}\n            </span>\n\n          </div>\n\n          <i\n            class=\"pi\"\n            [ngClass]=\"item.expanded ? 'pi-chevron-down' : 'pi-chevron-left'\"\n            style=\"font-size:0.6rem;\">\n          </i>\n\n        </div>\n\n        @if (item.expanded) {\n          <div class=\"mr-4 border-r border-gray-200 dark:border-gray-700 pr-2 mt-1\">\n\n            <ng-container\n              *ngTemplateOutlet=\"renderMenu; context:{ $implicit: item.items, level: level + 1 }\">\n            </ng-container>\n\n          </div>\n        }\n\n      </div>\n    }\n\n  }\n</ng-template>\n\n  </div>\n}\n\n</aside>\n\n<!-- \uD83C\uDF1F \u0627\u0644\u0632\u0631 \u0627\u0644\u0639\u0627\u0626\u0645 \u0627\u0644\u062D\u062F\u064A\u062B -->\n@if (isMobile && !sidebarVisible) {\n  <button\n    class=\"floating-btn\"\n    (click)=\"openMenu()\"\n    pTooltip=\"{{ 'MENU.OPEN' | translate }}\"\n    tooltipPosition=\"top\">\n    <img src=\"/assets/logo.png\" alt=\"App Icon\" />\n  </button>\n}\n", styles: ["@charset \"UTF-8\";@keyframes slideIn{0%{transform:translate(60px);opacity:0}to{transform:translate(0);opacity:1}}.animate-slideIn{animation:slideIn .35s cubic-bezier(.25,1,.5,1)}.glass-bg{background:#ffffffbf;backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,.25)}@media(max-width:1024px){aside{position:fixed;top:0;right:0;height:100vh;z-index:50}}.floating-btn{position:fixed;bottom:1.25rem;right:1.25rem;z-index:60;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--p-primary-500),var(--p-primary-700));box-shadow:0 4px 18px #00000040;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.floating-btn:hover{transform:scale(1.1) rotate(5deg)}.floating-btn img{width:28px;height:28px;border-radius:10px}.active-link{background-color:var(--p-primary-500)!important;color:#fff!important;font-weight:600;box-shadow:0 4px 6px -1px #0000001a;transform:translate(-3px)}.active-link i{color:#fff!important}.active-item-link{background:linear-gradient(to left,var(--p-primary-50),transparent);color:var(--p-primary-600)!important;position:relative;border-right:3px solid var(--p-primary-500);border-radius:0 12px 12px 0}.active-item-link i{color:var(--p-primary-500);filter:drop-shadow(0 0 5px rgba(var(--p-primary-500-rgb),.4))}.active-item-link span{font-weight:700}.animate-slideIn{animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.glass-bg::-webkit-scrollbar{width:4px}.glass-bg::-webkit-scrollbar-thumb{background:#0000001a;border-radius:10px}.active-link{background-color:var(--p-primary-50)!important;color:var(--p-primary-700)!important;border-right:4px solid var(--p-primary-500)!important;border-radius:4px 12px 12px 4px!important}.active-link span{font-weight:800!important}.active-link i{color:var(--p-primary-600)!important;transform:scale(1.1)}aside{-webkit-font-smoothing:antialiased;letter-spacing:-.01em}.dark .active-link{background-color:rgba(var(--p-primary-500-rgb),.15)!important;color:var(--p-primary-300)!important}.submenu{animation:menuOpen .25s ease}@keyframes menuOpen{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}aside{box-shadow:0 10px 40px #00000026}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: RoutesComponent, isStandalone: true, selector: "app-routes", host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0, template: "<aside class=\"flex h-screen bg-white dark:bg-gray-900 transition-all duration-300\"\r\n  [ngClass]=\"{ 'w-0 overflow-hidden': !sidebarVisible && isMobile }\">\r\n\r\n  <!-- \uD83C\uDFA8 \u0627\u0644\u0634\u0631\u064A\u0637 \u0627\u0644\u062C\u0627\u0646\u0628\u064A \u0627\u0644\u0631\u0626\u064A\u0633\u064A -->\r\n  <div\r\n      class=\"flex flex-col justify-between pt-4 pb-2 w-16 border-l shadow-xl\r\n             bg-gradient-to-b from-primary-500 via-primary-600 to-primary-700\r\n             text-white rounded-r-3xl\">\r\n\r\n    <!-- \uD83D\uDD1D \u0627\u0644\u0623\u0639\u0644\u0649 -->\r\n    <div class=\"flex flex-col items-center gap-4\">\r\n      <img src=\"/assets/logo.png\" alt=\"Logo\"\r\n        class=\"w-9 h-9 mt-1 rounded-lg shadow-sm\"/>\r\n\r\n      <!-- \u0632\u0631 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 -->\r\n      <!-- [pTooltip]=\"'TOGGLE_MENU' | translate\" -->\r\n      <button (click)=\"toggleAll()\"\r\n        tooltipPosition=\"right\"\r\n        class=\"text-white hover:scale-110 transition-transform duration-200\">\r\n        <i class=\"pi pi-bars text-lg\"></i>\r\n      </button>\r\n\r\n      <!-- \u0623\u064A\u0642\u0648\u0646\u0627\u062A -->\r\n      @for (item of secondToLastLevel$ | async; track item) {\r\n        <div class=\"relative flex flex-col items-center\">\r\n          <!-- \u0627\u0644\u0623\u064A\u0642\u0648\u0646\u0629 -->\r\n          <div (click)=\"onMainClick(item)\"\r\n            [pTooltip]=\"item.label | translate\"\r\n            tooltipPosition=\"right\"\r\n                 class=\"relative flex items-center justify-center w-10 h-10 rounded-xl cursor-pointer\r\n                        hover:bg-white/20 transition-all duration-200\"\r\n            [ngClass]=\"{ 'bg-white/30 scale-105 shadow-inner': item.expanded }\">\r\n            <i [class]=\"item.icon + ' text-xl'\"></i>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <!-- \u2699\uFE0F \u0627\u0644\u0623\u0633\u0641\u0644 -->\r\n    <div class=\"flex flex-col items-center pb-3 text-white/80\">\r\n      <i class=\"pi pi-cog text-lg hover:text-white cursor-pointer transition\"></i>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \uD83D\uDCCB \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0641\u0631\u0639\u064A\u0629 -->\r\n  @if (subSidebarVisible) {\r\n    <div\r\n    class=\"w-[290px] max-w-[290px] min-w-[260px] border-l border-gray-200 dark:border-gray-700 glass-bg animate-slideIn\r\n       shadow-2xl rounded-l-3xl p-4 rtl:text-right overflow-y-auto overflow-x-hidden transition-all duration-300\"\r\n      [ngClass]=\"{ 'absolute top-0 right-16 h-full z-40': isMobile }\">\r\n      <!-- \u0632\u0631 \u0631\u062C\u0648\u0639 -->\r\n     <!-- \uD83D\uDD1D \u0631\u0623\u0633 \u0627\u0644\u0634\u062C\u0631\u0629 -->\r\n<!-- \uD83D\uDD1D \u0631\u0623\u0633 \u0627\u0644\u0634\u062C\u0631\u0629 -->\r\n<div class=\"tree-header mb-1\">\r\n\r\n  <button\r\n    type=\"button\"\r\n    (click)=\"closeMenu()\"\r\n    class=\"tree-back-btn\">\r\n    <i class=\"pi pi-angle-right\"></i>\r\n    <span>{{ 'back' | translate }}</span>\r\n  </button>\r\n\r\n  <div class=\"tree-header-actions\">\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"tree-mini-btn\"\r\n      (click)=\"expandAll()\"\r\n      pTooltip=\"\u0641\u062A\u062D \u0627\u0644\u0634\u062C\u0631\u0629 \u0643\u0627\u0645\u0644\u0629\"\r\n      tooltipPosition=\"top\">\r\n      <i class=\"pi pi-plus\"></i>\r\n    </button>\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"tree-mini-btn\"\r\n      (click)=\"collapseAll()\"\r\n      pTooltip=\"\u0625\u063A\u0644\u0627\u0642 \u0627\u0644\u0634\u062C\u0631\u0629 \u0643\u0627\u0645\u0644\u0629\"\r\n      tooltipPosition=\"top\">\r\n      <i class=\"pi pi-minus\"></i>\r\n    </button>\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"tree-search-toggle\"\r\n      [ngClass]=\"{ 'active': showTreeSearch }\"\r\n      (click)=\"toggleTreeSearch()\"\r\n      pTooltip=\"\u0628\u062D\u062B \u062F\u0627\u062E\u0644 \u0627\u0644\u0634\u0627\u0634\u0627\u062A\"\r\n      tooltipPosition=\"top\">\r\n      <i class=\"pi pi-search\"></i>\r\n    </button>\r\n\r\n  </div>\r\n\r\n</div>\r\n\r\n@if (showTreeSearch) {\r\n  <div class=\"tree-search-panel mb-4 animate-slideIn\">\r\n    <div class=\"tree-search\">\r\n      <i class=\"pi pi-search\"></i>\r\n\r\n      <input\r\n        type=\"text\"\r\n        [(ngModel)]=\"searchText\"\r\n        (input)=\"onSearchChange()\"\r\n        placeholder=\"\u0628\u062D\u062B \u062F\u0627\u062E\u0644 \u0627\u0644\u0634\u0627\u0634\u0627\u062A...\"\r\n        class=\"tree-search-input\" />\r\n\r\n      @if (searchText) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"tree-search-clear\"\r\n          (click)=\"clearSearch()\">\r\n          <i class=\"pi pi-times\"></i>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n\r\n\r\n      <!-- Recursive rendering -->\r\n     @if (menuItems$ | async; as menuItems) {\r\n  <ng-container *ngTemplateOutlet=\"renderMenu; context:{ $implicit: menuItems, level: 1 }\"></ng-container>\r\n}\r\n\r\n<ng-template #renderMenu let-items let-level=\"level\">\r\n  @for (item of items; track item) {\r\n\r\n   @if (!item.items?.length) {\r\n  @let link = getLinkProps(item);\r\n <div class=\"mb-1\">\r\n  @if (link.isExternal) {\r\n    <a [href]=\"link.href\"\r\n       target=\"_blank\"\r\n       rel=\"noopener noreferrer\"\r\n       (click)=\"$event.stopPropagation()\"\r\n       class=\"flex items-center gap-2 px-3 py-2 rounded-lg transition-all hover:bg-primary-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200\">\r\n      <i [class]=\"item.icon + ' text-base'\"></i>\r\n      <span class=\"min-w-0 break-words whitespace-normal\">{{ item.label | translate }}</span>\r\n      <i class=\"pi pi-external-link text-[10px] opacity-50\"></i>\r\n    </a>\r\n  } @else {\r\n    <div class=\"flex items-center gap-2\">\r\n      <a [routerLink]=\"link.routerLink\"\r\n         (click)=\"onNavigate()\"\r\n         routerLinkActive=\"active-link\"\r\n         [ngClass]=\"{ 'search-match': isSearchMatch(item) }\"\r\n         class=\"flex-1 min-w-0 flex items-center gap-2 px-2 py-1 rounded-lg transition-all hover:bg-primary-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200\">\r\n        <i [class]=\"item.icon + ' text-base'\"></i>\r\n        <span class=\"min-w-0 break-words whitespace-normal\">\r\n          {{ item.label | translate }}</span>\r\n      </a>\r\n\r\n@if (link.addRoute) {\r\n  <a\r\n    [routerLink]=\"[link.addRoute]\"\r\n    (click)=\"$event.stopPropagation(); onNavigate()\"\r\n    class=\"shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full text-gray-400 hover:text-primary-500 hover:bg-primary-50 dark:text-gray-500 dark:hover:text-primary-400 dark:hover:bg-primary-900/20 transition-all duration-200\"\r\n    [pTooltip]=\"'ADD' | translate\"\r\n    tooltipPosition=\"top\">\r\n    <i class=\"pi pi-plus text-xs\"></i>\r\n  </a>\r\n}\r\n    </div>\r\n  }\r\n</div>\r\n}\r\n\r\n    @if (item.items?.length) {\r\n      <div class=\"mb-1\">\r\n\r\n        <div\r\n          (click)=\"onParentClick(item)\"\r\n          [style.font-size.rem]=\"1.1 - (level * 0.05)\"\r\n[ngClass]=\"{\r\n  'font-bold': level === 1,\r\n  'font-semibold': level === 2,\r\n  'font-medium': level >= 3,\r\n  'bg-primary-50 text-primary-700 border-r-4 border-primary-500': item.expanded,\r\n  'search-match': isSearchMatch(item)\r\n}\"\r\n          class=\"flex justify-between items-center py-2 px-3 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-800 dark:text-gray-200\">\r\n\r\n          <div class=\"flex items-center gap-2\">\r\n\r\n            <i [class]=\"item.icon + ' text-base'\"></i>\r\n\r\n            <span>\r\n              {{ item.label | translate }}\r\n            </span>\r\n\r\n          </div>\r\n\r\n          <i\r\n            class=\"pi\"\r\n            [ngClass]=\"item.expanded ? 'pi-chevron-down' : 'pi-chevron-left'\"\r\n            style=\"font-size:0.6rem;\">\r\n          </i>\r\n\r\n        </div>\r\n\r\n        @if (item.expanded) {\r\n          <div class=\"mr-4 border-r border-gray-200 dark:border-gray-700 pr-2 mt-1\">\r\n\r\n            <ng-container\r\n              *ngTemplateOutlet=\"renderMenu; context:{ $implicit: item.items, level: level + 1 }\">\r\n            </ng-container>\r\n\r\n          </div>\r\n        }\r\n\r\n      </div>\r\n    }\r\n\r\n  }\r\n</ng-template>\r\n\r\n  </div>\r\n}\r\n\r\n</aside>\r\n\r\n<!-- \uD83C\uDF1F \u0627\u0644\u0632\u0631 \u0627\u0644\u0639\u0627\u0626\u0645 \u0627\u0644\u062D\u062F\u064A\u062B -->\r\n@if (isMobile && !sidebarVisible) {\r\n  <button\r\n    class=\"floating-btn\"\r\n    (click)=\"openMenu()\"\r\n    pTooltip=\"{{ 'MENU.OPEN' | translate }}\"\r\n    tooltipPosition=\"top\">\r\n    <img src=\"/assets/logo.png\" alt=\"App Icon\" />\r\n  </button>\r\n}\r\n", styles: ["@charset \"UTF-8\";@keyframes slideIn{0%{transform:translate(60px);opacity:0}to{transform:translate(0);opacity:1}}.animate-slideIn{animation:slideIn .35s cubic-bezier(.25,1,.5,1)}.glass-bg{background:#ffffffbf;backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,.25)}@media(max-width:1024px){aside{position:fixed;top:0;right:0;height:100vh;z-index:50}}.floating-btn{position:fixed;bottom:1.25rem;right:1.25rem;z-index:60;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--p-primary-500),var(--p-primary-700));box-shadow:0 4px 18px #00000040;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.floating-btn:hover{transform:scale(1.1) rotate(5deg)}.floating-btn img{width:28px;height:28px;border-radius:10px}.active-link{background-color:var(--p-primary-500)!important;color:#fff!important;font-weight:600;box-shadow:0 4px 6px -1px #0000001a;transform:translate(-3px)}.active-link i{color:#fff!important}.active-item-link{background:linear-gradient(to left,var(--p-primary-50),transparent);color:var(--p-primary-600)!important;position:relative;border-right:3px solid var(--p-primary-500);border-radius:0 12px 12px 0}.active-item-link i{color:var(--p-primary-500);filter:drop-shadow(0 0 5px rgba(var(--p-primary-500-rgb),.4))}.active-item-link span{font-weight:700}.animate-slideIn{animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.glass-bg::-webkit-scrollbar{width:4px}.glass-bg::-webkit-scrollbar-thumb{background:#0000001a;border-radius:10px}.active-link{background-color:var(--p-primary-50)!important;color:var(--p-primary-700)!important;border-right:4px solid var(--p-primary-500)!important;border-radius:4px 12px 12px 4px!important}.active-link span{font-weight:800!important}.active-link i{color:var(--p-primary-600)!important;transform:scale(1.1)}aside{-webkit-font-smoothing:antialiased;letter-spacing:-.01em}.dark .active-link{background-color:rgba(var(--p-primary-500-rgb),.15)!important;color:var(--p-primary-300)!important}.submenu{animation:menuOpen .25s ease}@keyframes menuOpen{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}aside{box-shadow:0 10px 40px #00000026}.tree-back-btn{height:2.25rem;padding:0 .35rem 0 .75rem;display:inline-flex;align-items:center;gap:.35rem;color:#64748b;font-weight:700;border-radius:999px;transition:all .2s ease}.tree-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.tree-back-btn{height:2.35rem;padding:0 .45rem 0 .85rem;display:inline-flex;align-items:center;gap:.4rem;color:#64748b;font-size:.86rem;font-weight:700;border-radius:999px;transition:all .22s ease}.tree-back-btn:hover{color:var(--p-primary-600);background:var(--p-primary-50)}.tree-back-btn i{font-size:.85rem}.tree-header-actions{display:inline-flex;align-items:center;gap:.3rem}.tree-mini-btn,.tree-search-toggle{width:2rem;height:2rem;border-radius:.8rem;display:inline-flex;align-items:center;justify-content:center;color:#64748b;background:#f8fafcd9;border:1px solid rgba(148,163,184,.24);transition:all .2s ease}.tree-mini-btn i,.tree-search-toggle i{font-size:.72rem}.tree-mini-btn:hover,.tree-search-toggle:hover{color:var(--p-primary-600);background:var(--p-primary-50);border-color:rgba(var(--p-primary-500-rgb),.25);transform:translateY(-1px)}.tree-search-toggle{color:var(--p-primary-600);background:rgba(var(--p-primary-500-rgb),.08);border-color:rgba(var(--p-primary-500-rgb),.18)}.tree-search-toggle.active{color:#fff;background:linear-gradient(135deg,var(--p-primary-500),var(--p-primary-600));border-color:transparent;box-shadow:0 8px 18px rgba(var(--p-primary-500-rgb),.22)}.tree-search-panel{padding:.65rem;border-radius:1.15rem;background:#ffffff94;border:1px solid rgba(255,255,255,.45);box-shadow:0 10px 30px #0f172a14;backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%)}.tree-search{position:relative;display:flex;align-items:center}.tree-search i.pi-search{position:absolute;right:.85rem;color:var(--p-primary-500);font-size:.85rem;z-index:1}.tree-search-input{width:100%;height:2.45rem;padding:0 2.35rem 0 2.2rem;border-radius:999px;border:1px solid rgba(148,163,184,.35);background:#ffffffd1;color:#334155;font-size:.86rem;outline:none;transition:all .25s ease}.tree-search-input:focus{border-color:var(--p-primary-400);box-shadow:0 0 0 4px rgba(var(--p-primary-500-rgb),.12);background:#fff}.tree-search-clear{position:absolute;left:.55rem;width:1.75rem;height:1.75rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:#64748b;background:#f1f5f9e6;transition:all .2s ease}.tree-search-clear:hover{color:var(--p-primary-600);background:var(--p-primary-50);transform:scale(1.05)}.tree-search-icon{position:absolute;right:.85rem;color:#94a3b8;font-size:.85rem;pointer-events:none}.tree-search-input{width:100%;height:2.45rem;padding:0 2.35rem 0 2.2rem;border-radius:.95rem;border:1px solid rgba(148,163,184,.28);background:#f8fafcd1;color:#334155;font-size:.86rem;outline:none;transition:all .22s ease}.tree-search-input:focus{border-color:rgba(var(--p-primary-500-rgb),.45);background:#fff;box-shadow:0 0 0 3px rgba(var(--p-primary-500-rgb),.1)}.tree-search-input::placeholder{color:#94a3b8}.tree-search-clear{position:absolute;left:.55rem;width:1.65rem;height:1.65rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:#94a3b8;background:transparent;transition:all .2s ease}.tree-search-clear:hover{color:var(--p-primary-600);background:var(--p-primary-50)}.tree-search-clear i{font-size:.7rem}.dark .tree-back-btn{color:#cbd5e1}.dark .tree-back-btn:hover{color:var(--p-primary-300);background:rgba(var(--p-primary-500-rgb),.12)}.dark .tree-header-actions{background:#1f2937b8;border-color:#94a3b824}.dark .tree-icon-btn{color:#cbd5e1}.dark .tree-icon-btn:hover{color:#fff;background:var(--p-primary-600)}.dark .tree-search-icon{color:#64748b}.dark .tree-search-input{background:#1f2937bd;border-color:#94a3b829;color:#e5e7eb}.dark .tree-search-input:focus{background:#111827eb;border-color:rgba(var(--p-primary-500-rgb),.48)}.dark .tree-search-input::placeholder{color:#64748b}.dark .tree-search-clear{color:#94a3b8}.dark .tree-search-clear:hover{color:var(--p-primary-300);background:rgba(var(--p-primary-500-rgb),.12)}.search-match{background:linear-gradient(to left,rgba(var(--p-primary-500-rgb),.16),transparent)!important;color:var(--p-primary-700)!important;border-right:3px solid var(--p-primary-500)!important;box-shadow:inset 0 0 0 1px rgba(var(--p-primary-500-rgb),.08)}.search-match span{font-weight:800!important}.search-match i{color:var(--p-primary-600)!important}.dark .tree-toolbar{background:#111827b8;border-color:#ffffff14}.dark .tree-search-input{background:#1f2937cc;border-color:#94a3b82e;color:#e5e7eb}.dark .tree-search-input:focus{background:#111827f2}.dark .tree-search-clear{background:#374151e6;color:#cbd5e1}.dark .tree-action-btn{background:rgba(var(--p-primary-500-rgb),.12);color:var(--p-primary-300);border-color:rgba(var(--p-primary-500-rgb),.22)}.dark .tree-action-btn:hover{background:var(--p-primary-600);color:#fff}.dark .search-match{background:rgba(var(--p-primary-500-rgb),.18)!important;color:var(--p-primary-300)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: // ✅ أضف هذا
+                TooltipModule }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RoutesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-routes', standalone: true, imports: [CommonModule, RouterModule, TooltipModule, TranslatePipe, StyleClassModule], template: "<aside class=\"flex h-screen bg-white dark:bg-gray-900 transition-all duration-300\"\n  [ngClass]=\"{ 'w-0 overflow-hidden': !sidebarVisible && isMobile }\">\n\n  <!-- \uD83C\uDFA8 \u0627\u0644\u0634\u0631\u064A\u0637 \u0627\u0644\u062C\u0627\u0646\u0628\u064A \u0627\u0644\u0631\u0626\u064A\u0633\u064A -->\n  <div\n      class=\"flex flex-col justify-between pt-4 pb-2 w-16 border-l shadow-xl\n             bg-gradient-to-b from-primary-500 via-primary-600 to-primary-700\n             text-white rounded-r-3xl\">\n\n    <!-- \uD83D\uDD1D \u0627\u0644\u0623\u0639\u0644\u0649 -->\n    <div class=\"flex flex-col items-center gap-4\">\n      <img src=\"/assets/logo.png\" alt=\"Logo\"\n        class=\"w-9 h-9 mt-1 rounded-lg shadow-sm\"/>\n\n      <!-- \u0632\u0631 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 -->\n      <!-- [pTooltip]=\"'TOGGLE_MENU' | translate\" -->\n      <button (click)=\"toggleAll()\"\n        tooltipPosition=\"right\"\n        class=\"text-white hover:scale-110 transition-transform duration-200\">\n        <i class=\"pi pi-bars text-lg\"></i>\n      </button>\n\n      <!-- \u0623\u064A\u0642\u0648\u0646\u0627\u062A -->\n      @for (item of secondToLastLevel$ | async; track item) {\n        <div class=\"relative flex flex-col items-center\">\n          <!-- \u0627\u0644\u0623\u064A\u0642\u0648\u0646\u0629 -->\n          <div (click)=\"onMainClick(item)\"\n            [pTooltip]=\"item.label | translate\"\n            tooltipPosition=\"right\"\n                 class=\"relative flex items-center justify-center w-10 h-10 rounded-xl cursor-pointer\n                        hover:bg-white/20 transition-all duration-200\"\n            [ngClass]=\"{ 'bg-white/30 scale-105 shadow-inner': item.expanded }\">\n            <i [class]=\"item.icon + ' text-xl'\"></i>\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- \u2699\uFE0F \u0627\u0644\u0623\u0633\u0641\u0644 -->\n    <div class=\"flex flex-col items-center pb-3 text-white/80\">\n      <i class=\"pi pi-cog text-lg hover:text-white cursor-pointer transition\"></i>\n    </div>\n  </div>\n\n  <!-- \uD83D\uDCCB \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0641\u0631\u0639\u064A\u0629 -->\n  @if (subSidebarVisible) {\n    <div\n    class=\"w-[290px] max-w-[290px] min-w-[260px] border-l border-gray-200 dark:border-gray-700 glass-bg animate-slideIn\n       shadow-2xl rounded-l-3xl p-4 rtl:text-right overflow-y-auto overflow-x-hidden transition-all duration-300\"\n      [ngClass]=\"{ 'absolute top-0 right-16 h-full z-40': isMobile }\">\n      <!-- \u0632\u0631 \u0631\u062C\u0648\u0639 -->\n      <button (click)=\"closeMenu()\"\n        class=\"flex items-center gap-2 mb-4 text-gray-500 dark:text-gray-300 hover:text-primary-600 transition\">\n        <i class=\"pi\" [ngClass]=\"isMobile ? 'pi-angle-right' : 'pi-angle-right'\"></i>\n        <span>{{ 'back' | translate }}</span>\n      </button>\n      <!-- Recursive rendering -->\n     @if (menuItems$ | async; as menuItems) {\n  <ng-container *ngTemplateOutlet=\"renderMenu; context:{ $implicit: menuItems, level: 1 }\"></ng-container>\n}\n\n<ng-template #renderMenu let-items let-level=\"level\">\n  @for (item of items; track item) {\n\n   @if (!item.items?.length) {\n  @let link = getLinkProps(item);\n <div class=\"mb-1\">\n  @if (link.isExternal) {\n    <a [href]=\"link.href\"\n       target=\"_blank\"\n       rel=\"noopener noreferrer\"\n       (click)=\"$event.stopPropagation()\"\n       class=\"flex items-center gap-2 px-3 py-2 rounded-lg transition-all hover:bg-primary-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200\">\n      <i [class]=\"item.icon + ' text-base'\"></i>\n      <span class=\"min-w-0 break-words whitespace-normal\">{{ item.label | translate }}</span>\n      <i class=\"pi pi-external-link text-[10px] opacity-50\"></i>\n    </a>\n  } @else {\n    <div class=\"flex items-center gap-2\">\n      <a [routerLink]=\"link.routerLink\"\n         (click)=\"onNavigate()\"\n         routerLinkActive=\"active-link\"\n         class=\"flex-1 min-w-0 flex items-center gap-2 px-2 py-1 rounded-lg transition-all hover:bg-primary-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200\">\n        <i [class]=\"item.icon + ' text-base'\"></i>\n        <span class=\"min-w-0 break-words whitespace-normal\">\n          {{ item.label | translate }}</span>\n      </a>\n\n@if (link.addRoute) {\n  <a\n    [routerLink]=\"[link.addRoute]\"\n    (click)=\"$event.stopPropagation(); onNavigate()\"\n    class=\"shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full text-gray-400 hover:text-primary-500 hover:bg-primary-50 dark:text-gray-500 dark:hover:text-primary-400 dark:hover:bg-primary-900/20 transition-all duration-200\"\n    [pTooltip]=\"'ADD' | translate\"\n    tooltipPosition=\"top\">\n    <i class=\"pi pi-plus text-xs\"></i>\n  </a>\n}\n    </div>\n  }\n</div>\n}\n\n    @if (item.items?.length) {\n      <div class=\"mb-1\">\n\n        <div\n          (click)=\"onParentClick(item)\"\n          [style.font-size.rem]=\"1.1 - (level * 0.05)\"\n          [ngClass]=\"{\n            'font-bold': level === 1,\n            'font-semibold': level === 2,\n            'font-medium': level >= 3,\n            'bg-primary-50 text-primary-700 border-r-4 border-primary-500': item.expanded\n          }\"\n          class=\"flex justify-between items-center py-2 px-3 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-800 dark:text-gray-200\">\n\n          <div class=\"flex items-center gap-2\">\n\n            <i [class]=\"item.icon + ' text-base'\"></i>\n\n            <span>\n              {{ item.label | translate }}\n            </span>\n\n          </div>\n\n          <i\n            class=\"pi\"\n            [ngClass]=\"item.expanded ? 'pi-chevron-down' : 'pi-chevron-left'\"\n            style=\"font-size:0.6rem;\">\n          </i>\n\n        </div>\n\n        @if (item.expanded) {\n          <div class=\"mr-4 border-r border-gray-200 dark:border-gray-700 pr-2 mt-1\">\n\n            <ng-container\n              *ngTemplateOutlet=\"renderMenu; context:{ $implicit: item.items, level: level + 1 }\">\n            </ng-container>\n\n          </div>\n        }\n\n      </div>\n    }\n\n  }\n</ng-template>\n\n  </div>\n}\n\n</aside>\n\n<!-- \uD83C\uDF1F \u0627\u0644\u0632\u0631 \u0627\u0644\u0639\u0627\u0626\u0645 \u0627\u0644\u062D\u062F\u064A\u062B -->\n@if (isMobile && !sidebarVisible) {\n  <button\n    class=\"floating-btn\"\n    (click)=\"openMenu()\"\n    pTooltip=\"{{ 'MENU.OPEN' | translate }}\"\n    tooltipPosition=\"top\">\n    <img src=\"/assets/logo.png\" alt=\"App Icon\" />\n  </button>\n}\n", styles: ["@charset \"UTF-8\";@keyframes slideIn{0%{transform:translate(60px);opacity:0}to{transform:translate(0);opacity:1}}.animate-slideIn{animation:slideIn .35s cubic-bezier(.25,1,.5,1)}.glass-bg{background:#ffffffbf;backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,.25)}@media(max-width:1024px){aside{position:fixed;top:0;right:0;height:100vh;z-index:50}}.floating-btn{position:fixed;bottom:1.25rem;right:1.25rem;z-index:60;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--p-primary-500),var(--p-primary-700));box-shadow:0 4px 18px #00000040;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.floating-btn:hover{transform:scale(1.1) rotate(5deg)}.floating-btn img{width:28px;height:28px;border-radius:10px}.active-link{background-color:var(--p-primary-500)!important;color:#fff!important;font-weight:600;box-shadow:0 4px 6px -1px #0000001a;transform:translate(-3px)}.active-link i{color:#fff!important}.active-item-link{background:linear-gradient(to left,var(--p-primary-50),transparent);color:var(--p-primary-600)!important;position:relative;border-right:3px solid var(--p-primary-500);border-radius:0 12px 12px 0}.active-item-link i{color:var(--p-primary-500);filter:drop-shadow(0 0 5px rgba(var(--p-primary-500-rgb),.4))}.active-item-link span{font-weight:700}.animate-slideIn{animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.glass-bg::-webkit-scrollbar{width:4px}.glass-bg::-webkit-scrollbar-thumb{background:#0000001a;border-radius:10px}.active-link{background-color:var(--p-primary-50)!important;color:var(--p-primary-700)!important;border-right:4px solid var(--p-primary-500)!important;border-radius:4px 12px 12px 4px!important}.active-link span{font-weight:800!important}.active-link i{color:var(--p-primary-600)!important;transform:scale(1.1)}aside{-webkit-font-smoothing:antialiased;letter-spacing:-.01em}.dark .active-link{background-color:rgba(var(--p-primary-500-rgb),.15)!important;color:var(--p-primary-300)!important}.submenu{animation:menuOpen .25s ease}@keyframes menuOpen{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}aside{box-shadow:0 10px 40px #00000026}\n"] }]
+            args: [{ selector: 'app-routes', standalone: true, imports: [
+                        CommonModule,
+                        RouterModule,
+                        FormsModule, // ✅ أضف هذا
+                        TooltipModule,
+                        TranslatePipe,
+                        StyleClassModule,
+                        ButtonModule
+                    ], template: "<aside class=\"flex h-screen bg-white dark:bg-gray-900 transition-all duration-300\"\r\n  [ngClass]=\"{ 'w-0 overflow-hidden': !sidebarVisible && isMobile }\">\r\n\r\n  <!-- \uD83C\uDFA8 \u0627\u0644\u0634\u0631\u064A\u0637 \u0627\u0644\u062C\u0627\u0646\u0628\u064A \u0627\u0644\u0631\u0626\u064A\u0633\u064A -->\r\n  <div\r\n      class=\"flex flex-col justify-between pt-4 pb-2 w-16 border-l shadow-xl\r\n             bg-gradient-to-b from-primary-500 via-primary-600 to-primary-700\r\n             text-white rounded-r-3xl\">\r\n\r\n    <!-- \uD83D\uDD1D \u0627\u0644\u0623\u0639\u0644\u0649 -->\r\n    <div class=\"flex flex-col items-center gap-4\">\r\n      <img src=\"/assets/logo.png\" alt=\"Logo\"\r\n        class=\"w-9 h-9 mt-1 rounded-lg shadow-sm\"/>\r\n\r\n      <!-- \u0632\u0631 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 -->\r\n      <!-- [pTooltip]=\"'TOGGLE_MENU' | translate\" -->\r\n      <button (click)=\"toggleAll()\"\r\n        tooltipPosition=\"right\"\r\n        class=\"text-white hover:scale-110 transition-transform duration-200\">\r\n        <i class=\"pi pi-bars text-lg\"></i>\r\n      </button>\r\n\r\n      <!-- \u0623\u064A\u0642\u0648\u0646\u0627\u062A -->\r\n      @for (item of secondToLastLevel$ | async; track item) {\r\n        <div class=\"relative flex flex-col items-center\">\r\n          <!-- \u0627\u0644\u0623\u064A\u0642\u0648\u0646\u0629 -->\r\n          <div (click)=\"onMainClick(item)\"\r\n            [pTooltip]=\"item.label | translate\"\r\n            tooltipPosition=\"right\"\r\n                 class=\"relative flex items-center justify-center w-10 h-10 rounded-xl cursor-pointer\r\n                        hover:bg-white/20 transition-all duration-200\"\r\n            [ngClass]=\"{ 'bg-white/30 scale-105 shadow-inner': item.expanded }\">\r\n            <i [class]=\"item.icon + ' text-xl'\"></i>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <!-- \u2699\uFE0F \u0627\u0644\u0623\u0633\u0641\u0644 -->\r\n    <div class=\"flex flex-col items-center pb-3 text-white/80\">\r\n      <i class=\"pi pi-cog text-lg hover:text-white cursor-pointer transition\"></i>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \uD83D\uDCCB \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0641\u0631\u0639\u064A\u0629 -->\r\n  @if (subSidebarVisible) {\r\n    <div\r\n    class=\"w-[290px] max-w-[290px] min-w-[260px] border-l border-gray-200 dark:border-gray-700 glass-bg animate-slideIn\r\n       shadow-2xl rounded-l-3xl p-4 rtl:text-right overflow-y-auto overflow-x-hidden transition-all duration-300\"\r\n      [ngClass]=\"{ 'absolute top-0 right-16 h-full z-40': isMobile }\">\r\n      <!-- \u0632\u0631 \u0631\u062C\u0648\u0639 -->\r\n     <!-- \uD83D\uDD1D \u0631\u0623\u0633 \u0627\u0644\u0634\u062C\u0631\u0629 -->\r\n<!-- \uD83D\uDD1D \u0631\u0623\u0633 \u0627\u0644\u0634\u062C\u0631\u0629 -->\r\n<div class=\"tree-header mb-1\">\r\n\r\n  <button\r\n    type=\"button\"\r\n    (click)=\"closeMenu()\"\r\n    class=\"tree-back-btn\">\r\n    <i class=\"pi pi-angle-right\"></i>\r\n    <span>{{ 'back' | translate }}</span>\r\n  </button>\r\n\r\n  <div class=\"tree-header-actions\">\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"tree-mini-btn\"\r\n      (click)=\"expandAll()\"\r\n      pTooltip=\"\u0641\u062A\u062D \u0627\u0644\u0634\u062C\u0631\u0629 \u0643\u0627\u0645\u0644\u0629\"\r\n      tooltipPosition=\"top\">\r\n      <i class=\"pi pi-plus\"></i>\r\n    </button>\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"tree-mini-btn\"\r\n      (click)=\"collapseAll()\"\r\n      pTooltip=\"\u0625\u063A\u0644\u0627\u0642 \u0627\u0644\u0634\u062C\u0631\u0629 \u0643\u0627\u0645\u0644\u0629\"\r\n      tooltipPosition=\"top\">\r\n      <i class=\"pi pi-minus\"></i>\r\n    </button>\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"tree-search-toggle\"\r\n      [ngClass]=\"{ 'active': showTreeSearch }\"\r\n      (click)=\"toggleTreeSearch()\"\r\n      pTooltip=\"\u0628\u062D\u062B \u062F\u0627\u062E\u0644 \u0627\u0644\u0634\u0627\u0634\u0627\u062A\"\r\n      tooltipPosition=\"top\">\r\n      <i class=\"pi pi-search\"></i>\r\n    </button>\r\n\r\n  </div>\r\n\r\n</div>\r\n\r\n@if (showTreeSearch) {\r\n  <div class=\"tree-search-panel mb-4 animate-slideIn\">\r\n    <div class=\"tree-search\">\r\n      <i class=\"pi pi-search\"></i>\r\n\r\n      <input\r\n        type=\"text\"\r\n        [(ngModel)]=\"searchText\"\r\n        (input)=\"onSearchChange()\"\r\n        placeholder=\"\u0628\u062D\u062B \u062F\u0627\u062E\u0644 \u0627\u0644\u0634\u0627\u0634\u0627\u062A...\"\r\n        class=\"tree-search-input\" />\r\n\r\n      @if (searchText) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"tree-search-clear\"\r\n          (click)=\"clearSearch()\">\r\n          <i class=\"pi pi-times\"></i>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n\r\n\r\n      <!-- Recursive rendering -->\r\n     @if (menuItems$ | async; as menuItems) {\r\n  <ng-container *ngTemplateOutlet=\"renderMenu; context:{ $implicit: menuItems, level: 1 }\"></ng-container>\r\n}\r\n\r\n<ng-template #renderMenu let-items let-level=\"level\">\r\n  @for (item of items; track item) {\r\n\r\n   @if (!item.items?.length) {\r\n  @let link = getLinkProps(item);\r\n <div class=\"mb-1\">\r\n  @if (link.isExternal) {\r\n    <a [href]=\"link.href\"\r\n       target=\"_blank\"\r\n       rel=\"noopener noreferrer\"\r\n       (click)=\"$event.stopPropagation()\"\r\n       class=\"flex items-center gap-2 px-3 py-2 rounded-lg transition-all hover:bg-primary-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200\">\r\n      <i [class]=\"item.icon + ' text-base'\"></i>\r\n      <span class=\"min-w-0 break-words whitespace-normal\">{{ item.label | translate }}</span>\r\n      <i class=\"pi pi-external-link text-[10px] opacity-50\"></i>\r\n    </a>\r\n  } @else {\r\n    <div class=\"flex items-center gap-2\">\r\n      <a [routerLink]=\"link.routerLink\"\r\n         (click)=\"onNavigate()\"\r\n         routerLinkActive=\"active-link\"\r\n         [ngClass]=\"{ 'search-match': isSearchMatch(item) }\"\r\n         class=\"flex-1 min-w-0 flex items-center gap-2 px-2 py-1 rounded-lg transition-all hover:bg-primary-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200\">\r\n        <i [class]=\"item.icon + ' text-base'\"></i>\r\n        <span class=\"min-w-0 break-words whitespace-normal\">\r\n          {{ item.label | translate }}</span>\r\n      </a>\r\n\r\n@if (link.addRoute) {\r\n  <a\r\n    [routerLink]=\"[link.addRoute]\"\r\n    (click)=\"$event.stopPropagation(); onNavigate()\"\r\n    class=\"shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full text-gray-400 hover:text-primary-500 hover:bg-primary-50 dark:text-gray-500 dark:hover:text-primary-400 dark:hover:bg-primary-900/20 transition-all duration-200\"\r\n    [pTooltip]=\"'ADD' | translate\"\r\n    tooltipPosition=\"top\">\r\n    <i class=\"pi pi-plus text-xs\"></i>\r\n  </a>\r\n}\r\n    </div>\r\n  }\r\n</div>\r\n}\r\n\r\n    @if (item.items?.length) {\r\n      <div class=\"mb-1\">\r\n\r\n        <div\r\n          (click)=\"onParentClick(item)\"\r\n          [style.font-size.rem]=\"1.1 - (level * 0.05)\"\r\n[ngClass]=\"{\r\n  'font-bold': level === 1,\r\n  'font-semibold': level === 2,\r\n  'font-medium': level >= 3,\r\n  'bg-primary-50 text-primary-700 border-r-4 border-primary-500': item.expanded,\r\n  'search-match': isSearchMatch(item)\r\n}\"\r\n          class=\"flex justify-between items-center py-2 px-3 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-800 dark:text-gray-200\">\r\n\r\n          <div class=\"flex items-center gap-2\">\r\n\r\n            <i [class]=\"item.icon + ' text-base'\"></i>\r\n\r\n            <span>\r\n              {{ item.label | translate }}\r\n            </span>\r\n\r\n          </div>\r\n\r\n          <i\r\n            class=\"pi\"\r\n            [ngClass]=\"item.expanded ? 'pi-chevron-down' : 'pi-chevron-left'\"\r\n            style=\"font-size:0.6rem;\">\r\n          </i>\r\n\r\n        </div>\r\n\r\n        @if (item.expanded) {\r\n          <div class=\"mr-4 border-r border-gray-200 dark:border-gray-700 pr-2 mt-1\">\r\n\r\n            <ng-container\r\n              *ngTemplateOutlet=\"renderMenu; context:{ $implicit: item.items, level: level + 1 }\">\r\n            </ng-container>\r\n\r\n          </div>\r\n        }\r\n\r\n      </div>\r\n    }\r\n\r\n  }\r\n</ng-template>\r\n\r\n  </div>\r\n}\r\n\r\n</aside>\r\n\r\n<!-- \uD83C\uDF1F \u0627\u0644\u0632\u0631 \u0627\u0644\u0639\u0627\u0626\u0645 \u0627\u0644\u062D\u062F\u064A\u062B -->\r\n@if (isMobile && !sidebarVisible) {\r\n  <button\r\n    class=\"floating-btn\"\r\n    (click)=\"openMenu()\"\r\n    pTooltip=\"{{ 'MENU.OPEN' | translate }}\"\r\n    tooltipPosition=\"top\">\r\n    <img src=\"/assets/logo.png\" alt=\"App Icon\" />\r\n  </button>\r\n}\r\n", styles: ["@charset \"UTF-8\";@keyframes slideIn{0%{transform:translate(60px);opacity:0}to{transform:translate(0);opacity:1}}.animate-slideIn{animation:slideIn .35s cubic-bezier(.25,1,.5,1)}.glass-bg{background:#ffffffbf;backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,.25)}@media(max-width:1024px){aside{position:fixed;top:0;right:0;height:100vh;z-index:50}}.floating-btn{position:fixed;bottom:1.25rem;right:1.25rem;z-index:60;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--p-primary-500),var(--p-primary-700));box-shadow:0 4px 18px #00000040;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.floating-btn:hover{transform:scale(1.1) rotate(5deg)}.floating-btn img{width:28px;height:28px;border-radius:10px}.active-link{background-color:var(--p-primary-500)!important;color:#fff!important;font-weight:600;box-shadow:0 4px 6px -1px #0000001a;transform:translate(-3px)}.active-link i{color:#fff!important}.active-item-link{background:linear-gradient(to left,var(--p-primary-50),transparent);color:var(--p-primary-600)!important;position:relative;border-right:3px solid var(--p-primary-500);border-radius:0 12px 12px 0}.active-item-link i{color:var(--p-primary-500);filter:drop-shadow(0 0 5px rgba(var(--p-primary-500-rgb),.4))}.active-item-link span{font-weight:700}.animate-slideIn{animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.glass-bg::-webkit-scrollbar{width:4px}.glass-bg::-webkit-scrollbar-thumb{background:#0000001a;border-radius:10px}.active-link{background-color:var(--p-primary-50)!important;color:var(--p-primary-700)!important;border-right:4px solid var(--p-primary-500)!important;border-radius:4px 12px 12px 4px!important}.active-link span{font-weight:800!important}.active-link i{color:var(--p-primary-600)!important;transform:scale(1.1)}aside{-webkit-font-smoothing:antialiased;letter-spacing:-.01em}.dark .active-link{background-color:rgba(var(--p-primary-500-rgb),.15)!important;color:var(--p-primary-300)!important}.submenu{animation:menuOpen .25s ease}@keyframes menuOpen{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}aside{box-shadow:0 10px 40px #00000026}.tree-back-btn{height:2.25rem;padding:0 .35rem 0 .75rem;display:inline-flex;align-items:center;gap:.35rem;color:#64748b;font-weight:700;border-radius:999px;transition:all .2s ease}.tree-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.tree-back-btn{height:2.35rem;padding:0 .45rem 0 .85rem;display:inline-flex;align-items:center;gap:.4rem;color:#64748b;font-size:.86rem;font-weight:700;border-radius:999px;transition:all .22s ease}.tree-back-btn:hover{color:var(--p-primary-600);background:var(--p-primary-50)}.tree-back-btn i{font-size:.85rem}.tree-header-actions{display:inline-flex;align-items:center;gap:.3rem}.tree-mini-btn,.tree-search-toggle{width:2rem;height:2rem;border-radius:.8rem;display:inline-flex;align-items:center;justify-content:center;color:#64748b;background:#f8fafcd9;border:1px solid rgba(148,163,184,.24);transition:all .2s ease}.tree-mini-btn i,.tree-search-toggle i{font-size:.72rem}.tree-mini-btn:hover,.tree-search-toggle:hover{color:var(--p-primary-600);background:var(--p-primary-50);border-color:rgba(var(--p-primary-500-rgb),.25);transform:translateY(-1px)}.tree-search-toggle{color:var(--p-primary-600);background:rgba(var(--p-primary-500-rgb),.08);border-color:rgba(var(--p-primary-500-rgb),.18)}.tree-search-toggle.active{color:#fff;background:linear-gradient(135deg,var(--p-primary-500),var(--p-primary-600));border-color:transparent;box-shadow:0 8px 18px rgba(var(--p-primary-500-rgb),.22)}.tree-search-panel{padding:.65rem;border-radius:1.15rem;background:#ffffff94;border:1px solid rgba(255,255,255,.45);box-shadow:0 10px 30px #0f172a14;backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%)}.tree-search{position:relative;display:flex;align-items:center}.tree-search i.pi-search{position:absolute;right:.85rem;color:var(--p-primary-500);font-size:.85rem;z-index:1}.tree-search-input{width:100%;height:2.45rem;padding:0 2.35rem 0 2.2rem;border-radius:999px;border:1px solid rgba(148,163,184,.35);background:#ffffffd1;color:#334155;font-size:.86rem;outline:none;transition:all .25s ease}.tree-search-input:focus{border-color:var(--p-primary-400);box-shadow:0 0 0 4px rgba(var(--p-primary-500-rgb),.12);background:#fff}.tree-search-clear{position:absolute;left:.55rem;width:1.75rem;height:1.75rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:#64748b;background:#f1f5f9e6;transition:all .2s ease}.tree-search-clear:hover{color:var(--p-primary-600);background:var(--p-primary-50);transform:scale(1.05)}.tree-search-icon{position:absolute;right:.85rem;color:#94a3b8;font-size:.85rem;pointer-events:none}.tree-search-input{width:100%;height:2.45rem;padding:0 2.35rem 0 2.2rem;border-radius:.95rem;border:1px solid rgba(148,163,184,.28);background:#f8fafcd1;color:#334155;font-size:.86rem;outline:none;transition:all .22s ease}.tree-search-input:focus{border-color:rgba(var(--p-primary-500-rgb),.45);background:#fff;box-shadow:0 0 0 3px rgba(var(--p-primary-500-rgb),.1)}.tree-search-input::placeholder{color:#94a3b8}.tree-search-clear{position:absolute;left:.55rem;width:1.65rem;height:1.65rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:#94a3b8;background:transparent;transition:all .2s ease}.tree-search-clear:hover{color:var(--p-primary-600);background:var(--p-primary-50)}.tree-search-clear i{font-size:.7rem}.dark .tree-back-btn{color:#cbd5e1}.dark .tree-back-btn:hover{color:var(--p-primary-300);background:rgba(var(--p-primary-500-rgb),.12)}.dark .tree-header-actions{background:#1f2937b8;border-color:#94a3b824}.dark .tree-icon-btn{color:#cbd5e1}.dark .tree-icon-btn:hover{color:#fff;background:var(--p-primary-600)}.dark .tree-search-icon{color:#64748b}.dark .tree-search-input{background:#1f2937bd;border-color:#94a3b829;color:#e5e7eb}.dark .tree-search-input:focus{background:#111827eb;border-color:rgba(var(--p-primary-500-rgb),.48)}.dark .tree-search-input::placeholder{color:#64748b}.dark .tree-search-clear{color:#94a3b8}.dark .tree-search-clear:hover{color:var(--p-primary-300);background:rgba(var(--p-primary-500-rgb),.12)}.search-match{background:linear-gradient(to left,rgba(var(--p-primary-500-rgb),.16),transparent)!important;color:var(--p-primary-700)!important;border-right:3px solid var(--p-primary-500)!important;box-shadow:inset 0 0 0 1px rgba(var(--p-primary-500-rgb),.08)}.search-match span{font-weight:800!important}.search-match i{color:var(--p-primary-600)!important}.dark .tree-toolbar{background:#111827b8;border-color:#ffffff14}.dark .tree-search-input{background:#1f2937cc;border-color:#94a3b82e;color:#e5e7eb}.dark .tree-search-input:focus{background:#111827f2}.dark .tree-search-clear{background:#374151e6;color:#cbd5e1}.dark .tree-action-btn{background:rgba(var(--p-primary-500-rgb),.12);color:var(--p-primary-300);border-color:rgba(var(--p-primary-500-rgb),.22)}.dark .tree-action-btn:hover{background:var(--p-primary-600);color:#fff}.dark .search-match{background:rgba(var(--p-primary-500-rgb),.18)!important;color:var(--p-primary-300)!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onResize: [{
                 type: HostListener,
                 args: ['window:resize']
@@ -1447,11 +1530,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 class AuthWrapperComponent {
     constructor() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AuthWrapperComponent, isStandalone: true, selector: "abp-auth-wrapper", ngImport: i0, template: " <ng-content></ng-content>\n\n\n<!-- <div class=\"row\">\n  <div class=\"mx-auto col col-md-5\">\n    @if ((service.isMultiTenancyEnabled$ | async) && service.isTenantBoxVisible) {\n      <abp-tenant-box\n        *abpReplaceableTemplate=\"{ componentKey: service.tenantBoxKey }\"\n      ></abp-tenant-box>\n    }\n\n    <div class=\"abp-account-container\">\n      @if (service.enableLocalLogin$ | async) {\n        <div class=\"card mt-3 shadow-sm rounded\">\n          <div class=\"card-body p-5\">\n            <ng-content></ng-content>\n          </div>\n        </div>\n      } @else {\n        <div class=\"alert alert-warning\">\n          <strong>{{ 'AbpAccount::InvalidLoginRequest' | localize }}</strong>\n          {{ 'AbpAccount::ThereAreNoLoginSchemesConfiguredForThisClient' | localize }}\n        </div>\n      }\n    </div>\n  </div>\n</div> -->\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AuthWrapperComponent, isStandalone: true, selector: "abp-auth-wrapper", ngImport: i0, template: " <ng-content></ng-content>\r\n\r\n\r\n<!-- <div class=\"row\">\r\n  <div class=\"mx-auto col col-md-5\">\r\n    @if ((service.isMultiTenancyEnabled$ | async) && service.isTenantBoxVisible) {\r\n      <abp-tenant-box\r\n        *abpReplaceableTemplate=\"{ componentKey: service.tenantBoxKey }\"\r\n      ></abp-tenant-box>\r\n    }\r\n\r\n    <div class=\"abp-account-container\">\r\n      @if (service.enableLocalLogin$ | async) {\r\n        <div class=\"card mt-3 shadow-sm rounded\">\r\n          <div class=\"card-body p-5\">\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <div class=\"alert alert-warning\">\r\n          <strong>{{ 'AbpAccount::InvalidLoginRequest' | localize }}</strong>\r\n          {{ 'AbpAccount::ThereAreNoLoginSchemesConfiguredForThisClient' | localize }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div> -->\r\n" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthWrapperComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [], selector: 'abp-auth-wrapper', template: " <ng-content></ng-content>\n\n\n<!-- <div class=\"row\">\n  <div class=\"mx-auto col col-md-5\">\n    @if ((service.isMultiTenancyEnabled$ | async) && service.isTenantBoxVisible) {\n      <abp-tenant-box\n        *abpReplaceableTemplate=\"{ componentKey: service.tenantBoxKey }\"\n      ></abp-tenant-box>\n    }\n\n    <div class=\"abp-account-container\">\n      @if (service.enableLocalLogin$ | async) {\n        <div class=\"card mt-3 shadow-sm rounded\">\n          <div class=\"card-body p-5\">\n            <ng-content></ng-content>\n          </div>\n        </div>\n      } @else {\n        <div class=\"alert alert-warning\">\n          <strong>{{ 'AbpAccount::InvalidLoginRequest' | localize }}</strong>\n          {{ 'AbpAccount::ThereAreNoLoginSchemesConfiguredForThisClient' | localize }}\n        </div>\n      }\n    </div>\n  </div>\n</div> -->\n" }]
+            args: [{ standalone: true, imports: [], selector: 'abp-auth-wrapper', template: " <ng-content></ng-content>\r\n\r\n\r\n<!-- <div class=\"row\">\r\n  <div class=\"mx-auto col col-md-5\">\r\n    @if ((service.isMultiTenancyEnabled$ | async) && service.isTenantBoxVisible) {\r\n      <abp-tenant-box\r\n        *abpReplaceableTemplate=\"{ componentKey: service.tenantBoxKey }\"\r\n      ></abp-tenant-box>\r\n    }\r\n\r\n    <div class=\"abp-account-container\">\r\n      @if (service.enableLocalLogin$ | async) {\r\n        <div class=\"card mt-3 shadow-sm rounded\">\r\n          <div class=\"card-body p-5\">\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <div class=\"alert alert-warning\">\r\n          <strong>{{ 'AbpAccount::InvalidLoginRequest' | localize }}</strong>\r\n          {{ 'AbpAccount::ThereAreNoLoginSchemesConfiguredForThisClient' | localize }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div> -->\r\n" }]
         }], ctorParameters: () => [] });
 
 class AccountLayoutComponent {
@@ -1466,11 +1549,11 @@ class AccountLayoutComponent {
         // this.service.subscribeWindowSize();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AccountLayoutComponent, deps: [{ token: LayoutService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AccountLayoutComponent, isStandalone: true, selector: "abp-layout-account", providers: [LayoutService, SubscriptionService], ngImport: i0, template: " <abp-auth-wrapper\n    *abpReplaceableTemplate=\"{\n      componentKey: authWrapperKey\n    }\"\n  >\n    <router-outlet #outlet=\"outlet\"></router-outlet>\n  </abp-auth-wrapper>\n", dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AuthWrapperComponent, selector: "abp-auth-wrapper" }, { kind: "directive", type: ReplaceableTemplateDirective, selector: "[abpReplaceableTemplate]", inputs: ["abpReplaceableTemplate"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AccountLayoutComponent, isStandalone: true, selector: "abp-layout-account", providers: [LayoutService, SubscriptionService], ngImport: i0, template: " <abp-auth-wrapper\r\n    *abpReplaceableTemplate=\"{\r\n      componentKey: authWrapperKey\r\n    }\"\r\n  >\r\n    <router-outlet #outlet=\"outlet\"></router-outlet>\r\n  </abp-auth-wrapper>\r\n", dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AuthWrapperComponent, selector: "abp-auth-wrapper" }, { kind: "directive", type: ReplaceableTemplateDirective, selector: "[abpReplaceableTemplate]", inputs: ["abpReplaceableTemplate"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AccountLayoutComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [RoutesComponent, NavItemsComponent, RouterOutlet, AuthWrapperComponent, ReplaceableTemplateDirective], selector: 'abp-layout-account', providers: [LayoutService, SubscriptionService], template: " <abp-auth-wrapper\n    *abpReplaceableTemplate=\"{\n      componentKey: authWrapperKey\n    }\"\n  >\n    <router-outlet #outlet=\"outlet\"></router-outlet>\n  </abp-auth-wrapper>\n" }]
+            args: [{ standalone: true, imports: [RoutesComponent, NavItemsComponent, RouterOutlet, AuthWrapperComponent, ReplaceableTemplateDirective], selector: 'abp-layout-account', providers: [LayoutService, SubscriptionService], template: " <abp-auth-wrapper\r\n    *abpReplaceableTemplate=\"{\r\n      componentKey: authWrapperKey\r\n    }\"\r\n  >\r\n    <router-outlet #outlet=\"outlet\"></router-outlet>\r\n  </abp-auth-wrapper>\r\n" }]
         }], ctorParameters: () => [{ type: LayoutService }] });
 
 class ApplicationLayoutComponent {
@@ -1645,18 +1728,18 @@ class ApplicationLayoutComponent {
         catch (error) {
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ApplicationLayoutComponent, deps: [{ token: LayoutService }, { token: i0.Renderer2 }, { token: i2$2.Router }, { token: i0.NgZone }, { token: i3$3.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ApplicationLayoutComponent, isStandalone: true, selector: "abp-layout-application", providers: [LayoutService, SubscriptionService], ngImport: i0, template: "\n\n<div class=\"flex h-screen overflow-hidden\">\n\n      <!-- Sidebar stays fixed -->\n\n     <app-routes\n            *abpReplaceableTemplate=\"{\n              componentKey: service.routesComponentKey,\n              inputs: { smallScreen: { value: service.smallScreen } }\n            }\"\n            class=\"mb-2 md:mb-0\"\n          ></app-routes>\n\n      <!-- Main content scrolls -->\n      <main class=\"flex-1 flex flex-col overflow-hidden\">\n\n        <!-- Optional Topbar -->\n          <!-- @if (showTopbar) { -->\n\n           <app-nav-items\n          *abpReplaceableTemplate=\"{\n            componentKey: service.navItemsComponentKey\n          }\"\n        ></app-nav-items>\n\n        <!-- p-6 space-y-6 -->\n        <div class=\"flex-1 overflow-y-auto\">\n          <router-outlet #outlet=\"outlet\"></router-outlet>\n        </div>\n\n        <!-- <app-footer></app-footer> -->\n\n      </main>\n\n    </div>\n\n", dependencies: [{ kind: "component", type: RoutesComponent, selector: "app-routes" }, { kind: "component", type: NavItemsComponent, selector: "app-nav-items" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: ReplaceableTemplateDirective, selector: "[abpReplaceableTemplate]", inputs: ["abpReplaceableTemplate"] }], animations: [ /* slideFromBottom, */ /* appModuleAnimation() */] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ApplicationLayoutComponent, deps: [{ token: LayoutService }, { token: i0.Renderer2 }, { token: i2$1.Router }, { token: i0.NgZone }, { token: i3$3.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ApplicationLayoutComponent, isStandalone: true, selector: "abp-layout-application", providers: [LayoutService, SubscriptionService], ngImport: i0, template: "\r\n\r\n<div class=\"flex h-screen overflow-hidden\">\r\n\r\n      <!-- Sidebar stays fixed -->\r\n\r\n     <app-routes\r\n            *abpReplaceableTemplate=\"{\r\n              componentKey: service.routesComponentKey,\r\n              inputs: { smallScreen: { value: service.smallScreen } }\r\n            }\"\r\n            class=\"mb-2 md:mb-0\"\r\n          ></app-routes>\r\n\r\n      <!-- Main content scrolls -->\r\n      <main class=\"flex-1 flex flex-col overflow-hidden\">\r\n\r\n        <!-- Optional Topbar -->\r\n          <!-- @if (showTopbar) { -->\r\n\r\n           <app-nav-items\r\n          *abpReplaceableTemplate=\"{\r\n            componentKey: service.navItemsComponentKey\r\n          }\"\r\n        ></app-nav-items>\r\n\r\n        <!-- p-6 space-y-6 -->\r\n        <div class=\"flex-1 overflow-y-auto\">\r\n          <router-outlet #outlet=\"outlet\"></router-outlet>\r\n        </div>\r\n\r\n        <!-- <app-footer></app-footer> -->\r\n\r\n      </main>\r\n\r\n    </div>\r\n\r\n", dependencies: [{ kind: "component", type: RoutesComponent, selector: "app-routes" }, { kind: "component", type: NavItemsComponent, selector: "app-nav-items" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: ReplaceableTemplateDirective, selector: "[abpReplaceableTemplate]", inputs: ["abpReplaceableTemplate"] }], animations: [ /* slideFromBottom, */ /* appModuleAnimation() */] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ApplicationLayoutComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [RoutesComponent, NavItemsComponent, RouterOutlet, ReplaceableTemplateDirective], selector: 'abp-layout-application', animations: [ /* slideFromBottom, */ /* appModuleAnimation() */], providers: [LayoutService, SubscriptionService], template: "\n\n<div class=\"flex h-screen overflow-hidden\">\n\n      <!-- Sidebar stays fixed -->\n\n     <app-routes\n            *abpReplaceableTemplate=\"{\n              componentKey: service.routesComponentKey,\n              inputs: { smallScreen: { value: service.smallScreen } }\n            }\"\n            class=\"mb-2 md:mb-0\"\n          ></app-routes>\n\n      <!-- Main content scrolls -->\n      <main class=\"flex-1 flex flex-col overflow-hidden\">\n\n        <!-- Optional Topbar -->\n          <!-- @if (showTopbar) { -->\n\n           <app-nav-items\n          *abpReplaceableTemplate=\"{\n            componentKey: service.navItemsComponentKey\n          }\"\n        ></app-nav-items>\n\n        <!-- p-6 space-y-6 -->\n        <div class=\"flex-1 overflow-y-auto\">\n          <router-outlet #outlet=\"outlet\"></router-outlet>\n        </div>\n\n        <!-- <app-footer></app-footer> -->\n\n      </main>\n\n    </div>\n\n" }]
-        }], ctorParameters: () => [{ type: LayoutService }, { type: i0.Renderer2 }, { type: i2$2.Router }, { type: i0.NgZone }, { type: i3$3.LocalizationService }] });
+            args: [{ standalone: true, imports: [RoutesComponent, NavItemsComponent, RouterOutlet, ReplaceableTemplateDirective], selector: 'abp-layout-application', animations: [ /* slideFromBottom, */ /* appModuleAnimation() */], providers: [LayoutService, SubscriptionService], template: "\r\n\r\n<div class=\"flex h-screen overflow-hidden\">\r\n\r\n      <!-- Sidebar stays fixed -->\r\n\r\n     <app-routes\r\n            *abpReplaceableTemplate=\"{\r\n              componentKey: service.routesComponentKey,\r\n              inputs: { smallScreen: { value: service.smallScreen } }\r\n            }\"\r\n            class=\"mb-2 md:mb-0\"\r\n          ></app-routes>\r\n\r\n      <!-- Main content scrolls -->\r\n      <main class=\"flex-1 flex flex-col overflow-hidden\">\r\n\r\n        <!-- Optional Topbar -->\r\n          <!-- @if (showTopbar) { -->\r\n\r\n           <app-nav-items\r\n          *abpReplaceableTemplate=\"{\r\n            componentKey: service.navItemsComponentKey\r\n          }\"\r\n        ></app-nav-items>\r\n\r\n        <!-- p-6 space-y-6 -->\r\n        <div class=\"flex-1 overflow-y-auto\">\r\n          <router-outlet #outlet=\"outlet\"></router-outlet>\r\n        </div>\r\n\r\n        <!-- <app-footer></app-footer> -->\r\n\r\n      </main>\r\n\r\n    </div>\r\n\r\n" }]
+        }], ctorParameters: () => [{ type: LayoutService }, { type: i0.Renderer2 }, { type: i2$1.Router }, { type: i0.NgZone }, { type: i3$3.LocalizationService }] });
 
 class EmptyLayoutComponent {
     static type = eLayoutType.empty;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: EmptyLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: EmptyLayoutComponent, isStandalone: true, selector: "abp-layout-empty", ngImport: i0, template: ` <router-outlet></router-outlet> `, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: EmptyLayoutComponent, isStandalone: true, selector: "abp-layout-empty", ngImport: i0, template: ` <router-outlet></router-outlet> `, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: EmptyLayoutComponent, decorators: [{
             type: Component,