@flusys/ng-iam 5.5.0 → 6.0.0-beta.2

package/fesm2022/{flusys-ng-iam-flusys-ng-iam-C9rdGS64.mjs → flusys-ng-iam-flusys-ng-iam-DzIO0zsO.mjs}

@@ -1,8 +1,9 @@
 import * as i0 from '@angular/core';
 import { Injectable, inject, signal, input, output, effect, Component, computed, DestroyRef } from '@angular/core';
-import { ApiResourceService, TranslateService, PermissionValidatorService, AngularModule, PrimeModule, TranslatePipe, ROLE_ACTION_PERMISSIONS, HasPermissionDirective, COMPANY_ACTION_PERMISSIONS, COMPANY_API_PROVIDER, USER_ROLE_PERMISSIONS, USER_PERMISSION_PROVIDER, UserSelectComponent, USER_ACTION_PERMISSIONS, PROFILE_PERMISSION_PROVIDER, permissionGuard, ACTION_PERMISSIONS, ROLE_PERMISSIONS, anyPermissionGuard, resolveTranslationModule, SHARED_MESSAGES } from '@flusys/ng-shared';
+import { ApiResourceService, TranslateService, PermissionValidatorService, AngularModule, TranslatePipe, ROLE_ACTION_PERMISSIONS, HasPermissionDirective, COMPANY_ACTION_PERMISSIONS, COMPANY_API_PROVIDER, USER_ROLE_PERMISSIONS, USER_PERMISSION_PROVIDER, UserSelectComponent, USER_ACTION_PERMISSIONS, PROFILE_PERMISSION_PROVIDER, permissionGuard, ACTION_PERMISSIONS, ROLE_PERMISSIONS, anyPermissionGuard, resolveTranslationModule, SHARED_MESSAGES } from '@flusys/ng-shared';
 import { APP_CONFIG, getServiceUrl, BaseApiService, isCompanyFeatureEnabled } from '@flusys/ng-core';
-import { ConfirmationService, MessageService } from 'primeng/api';
+import * as i2 from '@flusys/ng-ui';
+import { ConfirmationService, MessageService, UiModule } from '@flusys/ng-ui';
 import { HttpClient } from '@angular/common/http';
 import { of, firstValueFrom, map as map$1 } from 'rxjs';
 import { tap, catchError, map } from 'rxjs/operators';
@@ -10,14 +11,7 @@ import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i2 from 'primeng/button';
-import * as i6 from 'primeng/tooltip';
-import * as i3 from 'primeng/checkbox';
-import * as i4 from 'primeng/select';
-import * as i5 from 'primeng/tag';
-import * as i7 from 'primeng/treetable';
 import { LAYOUT_AUTH_STATE } from '@flusys/ng-layout';
-import * as i5$1 from 'primeng/table';
 
 /** Must match backend ActionType enum */
 var ActionType;
@@ -227,10 +221,10 @@ class RoleApiService extends ApiResourceService {
     constructor() {
         super('roles', 'iam');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RoleApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RoleApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RoleApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RoleApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RoleApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RoleApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -257,10 +251,10 @@ class ActionApiService extends ApiResourceService {
         const iamBaseUrl = getServiceUrl(this.appConfig, 'iam');
         return this.http.post(`${iamBaseUrl}/actions/tree`, body);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ActionApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ActionApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ActionApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ActionApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ActionApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ActionApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -403,11 +397,11 @@ class ActionPermissionLogicService {
         this.confirmationService.confirm({
             header: this.t('iam.logic.validation.failed'),
             message: `${this.t('iam.logic.validation.failed.message')}<br/><br/><ul class="pl-4">${errorList}</ul><br/>${this.t('iam.logic.validation.failed.prompt')}`,
-            icon: 'pi pi-exclamation-triangle',
+            icon: 'exclamation-triangle',
             acceptLabel: this.t('iam.logic.auto.fix'),
             rejectLabel: this.t('shared.cancel'),
-            acceptIcon: 'pi pi-trash',
-            rejectIcon: 'pi pi-times',
+            acceptIcon: 'trash',
+            rejectIcon: 'times',
             acceptButtonStyleClass: 'p-button-warning',
             closeOnEscape: false,
             closable: false,
@@ -419,7 +413,7 @@ class ActionPermissionLogicService {
                 });
                 onUpdate(selMap);
                 this.messageService.add({
-                    severity: 'warning',
+                    severity: 'warn',
                     summary: this.t('iam.logic.invalid.actions.removed'),
                     detail: this.t('iam.logic.removed.actions.detail', {
                         count: invalidActions.length,
@@ -532,11 +526,11 @@ class ActionPermissionLogicService {
         this.confirmationService.confirm({
             header: this.t('iam.logic.missing.prerequisites'),
             message: `<strong>${sanitizedActionName}</strong> ${this.t('iam.logic.requires.conditions')}<br/><br/>${logicMessage}<br/><br/><strong>${autoSelectPrompt}</strong><br/>${this.t('iam.logic.would.you.continue')}`,
-            icon: 'pi pi-exclamation-triangle',
+            icon: 'exclamation-triangle',
             acceptLabel,
             rejectLabel: this.t('shared.cancel'),
-            acceptIcon: 'pi pi-check',
-            rejectIcon: 'pi pi-times',
+            acceptIcon: 'check',
+            rejectIcon: 'times',
             closeOnEscape: false,
             closable: false,
             accept: () => {
@@ -584,13 +578,13 @@ class ActionPermissionLogicService {
         this.confirmationService.confirm({
             header: this.t('iam.logic.dependency.warning'),
             message,
-            icon: 'pi pi-exclamation-triangle',
+            icon: 'exclamation-triangle',
             acceptLabel: alternatives.length > 0
                 ? this.t('iam.logic.use.alternatives')
                 : this.t('iam.logic.remove.all'),
             rejectLabel: this.t('shared.cancel'),
-            acceptIcon: 'pi pi-check',
-            rejectIcon: 'pi pi-times',
+            acceptIcon: 'check',
+            rejectIcon: 'times',
             closeOnEscape: false,
             closable: false,
             accept: () => {
@@ -794,10 +788,10 @@ class ActionPermissionLogicService {
         }
         return `${indent}${this.t('iam.logic.invalid')}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ActionPermissionLogicService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ActionPermissionLogicService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ActionPermissionLogicService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ActionPermissionLogicService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ActionPermissionLogicService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ActionPermissionLogicService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -830,10 +824,10 @@ class PermissionApiService extends BaseApiService {
     getCompanyActions(companyId) {
         return this.http.post(this.getUrl('permissions/get-company-actions'), { companyId });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PermissionApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PermissionApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PermissionApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PermissionApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PermissionApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PermissionApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -857,10 +851,10 @@ class MyPermissionsApiService {
     getMyPermissions(dto = {}) {
         return this.http.post(`${this.baseUrl}/my-permissions`, dto);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MyPermissionsApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MyPermissionsApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MyPermissionsApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MyPermissionsApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MyPermissionsApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MyPermissionsApiService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -893,10 +887,10 @@ class PermissionStateService {
     isLoaded() {
         return this._permissions() !== null && this.permissionValidator.isPermissionsLoaded();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PermissionStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PermissionStateService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PermissionStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PermissionStateService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PermissionStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PermissionStateService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1015,8 +1009,8 @@ class LogicBuilderComponent {
                 .map((child) => this.removeNodeFromTree(child, targetId)),
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LogicBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: LogicBuilderComponent, isStandalone: true, selector: "lib-logic-builder", inputs: { logic: { classPropertyName: "logic", publicName: "logic", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { logicChange: "logicChange" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LogicBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: LogicBuilderComponent, isStandalone: true, selector: "lib-logic-builder", inputs: { logic: { classPropertyName: "logic", publicName: "logic", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { logicChange: "logicChange" }, ngImport: i0, template: `
     <div class="logic-builder">
       <div class="flex justify-between items-center mb-3">
         <h4 class="text-sm font-semibold m-0">
@@ -1024,22 +1018,22 @@ class LogicBuilderComponent {
         </h4>
         @if (!builderLogic()) {
           <button
-            pButton
+            fButton
             size="small"
             (click)="initializeLogic()"
           >
-            <span pButtonIcon class="pi pi-plus"></span>
+            <ui-icon pButtonIcon name="plus"></ui-icon>
             <span pButtonLabel>{{ 'iam.logic.add.logic' | translate }}</span>
           </button>
         } @else {
           <button
-            pButton
+            fButton
             size="small"
             severity="danger"
             [outlined]="true"
             (click)="clearLogic()"
           >
-            <span pButtonIcon class="pi pi-trash"></span>
+            <ui-icon pButtonIcon name="trash"></ui-icon>
             <span pButtonLabel>{{ 'iam.logic.clear.logic' | translate }}</span>
           </button>
         }
@@ -1087,7 +1081,7 @@ class LogicBuilderComponent {
                 [class.and]="node.operator === 'AND'"
                 [class.or]="node.operator !== 'AND'"
                 (click)="toggleOperator(node.id)"
-                [title]="'iam.logic.click.to.toggle' | translate"
+                [fTooltip]="'iam.logic.click.to.toggle' | translate"
               >
                 {{ node.operator }}
               </span>
@@ -1100,35 +1094,29 @@ class LogicBuilderComponent {
             }
 
             @if (node.type === 'action') {
-              <!-- Action: show action selector -->
-              <select
-                class="action-select flex-1 p-2 border border-surface rounded text-sm"
+              <f-select
+                class="flex-1"
+                [options]="actions()"
+                optionLabel="name"
+                optionValue="id"
                 [ngModel]="node.actionId"
                 (ngModelChange)="updateActionId(node.id, $event)"
-              >
-                <option [value]="null">
-                  {{ 'iam.logic.select.action' | translate }} ({{
-                    'iam.logic.actions.available'
-                      | translate: { count: actions().length }
-                  }})
-                </option>
-                @for (action of actions(); track action.id) {
-                  <option [ngValue]="action.id">{{ action.name }}</option>
-                }
-              </select>
+                [placeholder]="'iam.logic.select.action' | translate"
+                [filter]="true"
+              />
             }
           </div>
 
           <div class="flex gap-1">
             <button
-              pButton
+              fButton
               [text]="true"
               severity="danger"
               size="small"
               (click)="removeNode(node.id)"
-              [pTooltip]="'shared.remove' | translate"
+              [fTooltip]="'shared.remove' | translate"
             >
-              <span pButtonIcon class="pi pi-trash"></span>
+              <ui-icon pButtonIcon name="trash"></ui-icon>
             </button>
           </div>
         </div>
@@ -1159,22 +1147,22 @@ class LogicBuilderComponent {
             </div>
             <div class="flex gap-2 flex-wrap">
               <button
-                pButton
+                fButton
                 size="small"
                 [outlined]="true"
                 (click)="addChildNode(node.id, 'group')"
               >
-                <span pButtonIcon class="pi pi-sitemap"></span>
+                <ui-icon pButtonIcon name="sitemap"></ui-icon>
                 <span pButtonLabel>{{ 'iam.logic.group' | translate }}</span>
               </button>
               <button
-                pButton
+                fButton
                 size="small"
                 severity="success"
                 [outlined]="true"
                 (click)="addChildNode(node.id, 'action')"
               >
-                <span pButtonIcon class="pi pi-bolt"></span>
+                <ui-icon pButtonIcon name="bolt"></ui-icon>
                 <span pButtonLabel>{{ 'iam.logic.action' | translate }}</span>
               </button>
             </div>
@@ -1182,11 +1170,11 @@ class LogicBuilderComponent {
         }
       </div>
     </ng-template>
-  `, isInline: true, styles: [":host{display:block}.node-type{display:inline-flex;align-items:center;padding:.25rem .5rem;border-radius:.25rem;font-weight:600;font-size:.75rem;text-transform:uppercase}.node-type.group{background-color:var(--p-blue-100, #dbeafe);color:var(--p-blue-700, #1e40af)}.node-type.action{background-color:var(--p-green-100, #d1fae5);color:var(--p-green-700, #065f46)}:host-context(.p-dark) .node-type.group{background-color:#3b82f633;color:var(--p-blue-400, #60a5fa)}:host-context(.p-dark) .node-type.action{background-color:#22c55e33;color:var(--p-green-400, #4ade80)}.operator-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:9999px;font-weight:600;font-size:.75rem;cursor:pointer;transition:opacity .2s}.operator-badge.and{background-color:var(--p-yellow-100, #fef3c7);color:var(--p-yellow-700, #92400e)}.operator-badge.or{background-color:var(--p-indigo-100, #e0e7ff);color:var(--p-indigo-700, #3730a3)}:host-context(.p-dark) .operator-badge.and{background-color:#eab30833;color:var(--p-yellow-400, #facc15)}:host-context(.p-dark) .operator-badge.or{background-color:#6366f133;color:var(--p-indigo-400, #818cf8)}.operator-badge:hover{opacity:.8}.action-select{background-color:var(--p-surface-0, #ffffff);color:var(--p-text-color, #1f2937)}:host-context(.p-dark) .action-select{background-color:var(--p-surface-900, #1f2937);color:var(--p-text-color, #f9fafb)}.action-select:focus{outline:none;border-color:var(--p-primary-color, #3b82f6)}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["pButton", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "link", "rounded", "fluid", "variant", "iconOnly", "loading", "severity"] }, { kind: "directive", type: i2.ButtonLabel, selector: "[pButtonLabel]", inputs: ["pButtonLabelPT", "pButtonLabelUnstyled"] }, { kind: "directive", type: i2.ButtonIcon, selector: "[pButtonIcon]", inputs: ["pButtonIconPT", "pButtonUnstyled"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, styles: [":host{display:block}.node-type{display:inline-flex;align-items:center;padding:.25rem .5rem;border-radius:.25rem;font-weight:600;font-size:.75rem;text-transform:uppercase}.node-type.group{background-color:var(--f-blue-100, #dbeafe);color:var(--f-blue-700, #1e40af)}.node-type.action{background-color:var(--f-green-100, #d1fae5);color:var(--f-green-700, #065f46)}:host-context(.p-dark) .node-type.group{background-color:#3b82f633;color:var(--f-blue-400, #60a5fa)}:host-context(.p-dark) .node-type.action{background-color:#22c55e33;color:var(--f-green-400, #4ade80)}.operator-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:9999px;font-weight:600;font-size:.75rem;cursor:pointer;transition:opacity .2s}.operator-badge.and{background-color:var(--f-yellow-100, #fef3c7);color:var(--f-yellow-700, #92400e)}.operator-badge.or{background-color:var(--f-indigo-100, #e0e7ff);color:var(--f-indigo-700, #3730a3)}:host-context(.p-dark) .operator-badge.and{background-color:#eab30833;color:var(--f-yellow-400, #facc15)}:host-context(.p-dark) .operator-badge.or{background-color:#6366f133;color:var(--f-indigo-400, #818cf8)}.operator-badge:hover{opacity:.8}.action-select{background-color:var(--f-surface-0, #ffffff);color:var(--f-text-color, #1f2937)}:host-context(.p-dark) .action-select{background-color:var(--f-surface-900, #1f2937);color:var(--f-text-color, #f9fafb)}.action-select:focus{outline:none;border-color:var(--f-primary-color, #3b82f6)}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i2.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "rounded", "raised", "fluid", "disabled", "loading", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i2.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "showClear", "loading", "inputId", "invalid", "touched", "styleClass", "editable"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur"] }, { kind: "directive", type: i2.TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay"] }, { kind: "component", type: i2.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LogicBuilderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LogicBuilderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-logic-builder', imports: [AngularModule, PrimeModule, TranslatePipe], template: `
+            args: [{ selector: 'lib-logic-builder', imports: [AngularModule, UiModule, TranslatePipe], template: `
     <div class="logic-builder">
       <div class="flex justify-between items-center mb-3">
         <h4 class="text-sm font-semibold m-0">
@@ -1194,22 +1182,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         </h4>
         @if (!builderLogic()) {
           <button
-            pButton
+            fButton
             size="small"
             (click)="initializeLogic()"
           >
-            <span pButtonIcon class="pi pi-plus"></span>
+            <ui-icon pButtonIcon name="plus"></ui-icon>
             <span pButtonLabel>{{ 'iam.logic.add.logic' | translate }}</span>
           </button>
         } @else {
           <button
-            pButton
+            fButton
             size="small"
             severity="danger"
             [outlined]="true"
             (click)="clearLogic()"
           >
-            <span pButtonIcon class="pi pi-trash"></span>
+            <ui-icon pButtonIcon name="trash"></ui-icon>
             <span pButtonLabel>{{ 'iam.logic.clear.logic' | translate }}</span>
           </button>
         }
@@ -1257,7 +1245,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 [class.and]="node.operator === 'AND'"
                 [class.or]="node.operator !== 'AND'"
                 (click)="toggleOperator(node.id)"
-                [title]="'iam.logic.click.to.toggle' | translate"
+                [fTooltip]="'iam.logic.click.to.toggle' | translate"
               >
                 {{ node.operator }}
               </span>
@@ -1270,35 +1258,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             }
 
             @if (node.type === 'action') {
-              <!-- Action: show action selector -->
-              <select
-                class="action-select flex-1 p-2 border border-surface rounded text-sm"
+              <f-select
+                class="flex-1"
+                [options]="actions()"
+                optionLabel="name"
+                optionValue="id"
                 [ngModel]="node.actionId"
                 (ngModelChange)="updateActionId(node.id, $event)"
-              >
-                <option [value]="null">
-                  {{ 'iam.logic.select.action' | translate }} ({{
-                    'iam.logic.actions.available'
-                      | translate: { count: actions().length }
-                  }})
-                </option>
-                @for (action of actions(); track action.id) {
-                  <option [ngValue]="action.id">{{ action.name }}</option>
-                }
-              </select>
+                [placeholder]="'iam.logic.select.action' | translate"
+                [filter]="true"
+              />
             }
           </div>
 
           <div class="flex gap-1">
             <button
-              pButton
+              fButton
               [text]="true"
               severity="danger"
               size="small"
               (click)="removeNode(node.id)"
-              [pTooltip]="'shared.remove' | translate"
+              [fTooltip]="'shared.remove' | translate"
             >
-              <span pButtonIcon class="pi pi-trash"></span>
+              <ui-icon pButtonIcon name="trash"></ui-icon>
             </button>
           </div>
         </div>
@@ -1329,22 +1311,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             </div>
             <div class="flex gap-2 flex-wrap">
               <button
-                pButton
+                fButton
                 size="small"
                 [outlined]="true"
                 (click)="addChildNode(node.id, 'group')"
               >
-                <span pButtonIcon class="pi pi-sitemap"></span>
+                <ui-icon pButtonIcon name="sitemap"></ui-icon>
                 <span pButtonLabel>{{ 'iam.logic.group' | translate }}</span>
               </button>
               <button
-                pButton
+                fButton
                 size="small"
                 severity="success"
                 [outlined]="true"
                 (click)="addChildNode(node.id, 'action')"
               >
-                <span pButtonIcon class="pi pi-bolt"></span>
+                <ui-icon pButtonIcon name="bolt"></ui-icon>
                 <span pButtonLabel>{{ 'iam.logic.action' | translate }}</span>
               </button>
             </div>
@@ -1352,7 +1334,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }
       </div>
     </ng-template>
-  `, styles: [":host{display:block}.node-type{display:inline-flex;align-items:center;padding:.25rem .5rem;border-radius:.25rem;font-weight:600;font-size:.75rem;text-transform:uppercase}.node-type.group{background-color:var(--p-blue-100, #dbeafe);color:var(--p-blue-700, #1e40af)}.node-type.action{background-color:var(--p-green-100, #d1fae5);color:var(--p-green-700, #065f46)}:host-context(.p-dark) .node-type.group{background-color:#3b82f633;color:var(--p-blue-400, #60a5fa)}:host-context(.p-dark) .node-type.action{background-color:#22c55e33;color:var(--p-green-400, #4ade80)}.operator-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:9999px;font-weight:600;font-size:.75rem;cursor:pointer;transition:opacity .2s}.operator-badge.and{background-color:var(--p-yellow-100, #fef3c7);color:var(--p-yellow-700, #92400e)}.operator-badge.or{background-color:var(--p-indigo-100, #e0e7ff);color:var(--p-indigo-700, #3730a3)}:host-context(.p-dark) .operator-badge.and{background-color:#eab30833;color:var(--p-yellow-400, #facc15)}:host-context(.p-dark) .operator-badge.or{background-color:#6366f133;color:var(--p-indigo-400, #818cf8)}.operator-badge:hover{opacity:.8}.action-select{background-color:var(--p-surface-0, #ffffff);color:var(--p-text-color, #1f2937)}:host-context(.p-dark) .action-select{background-color:var(--p-surface-900, #1f2937);color:var(--p-text-color, #f9fafb)}.action-select:focus{outline:none;border-color:var(--p-primary-color, #3b82f6)}\n"] }]
+  `, styles: [":host{display:block}.node-type{display:inline-flex;align-items:center;padding:.25rem .5rem;border-radius:.25rem;font-weight:600;font-size:.75rem;text-transform:uppercase}.node-type.group{background-color:var(--f-blue-100, #dbeafe);color:var(--f-blue-700, #1e40af)}.node-type.action{background-color:var(--f-green-100, #d1fae5);color:var(--f-green-700, #065f46)}:host-context(.p-dark) .node-type.group{background-color:#3b82f633;color:var(--f-blue-400, #60a5fa)}:host-context(.p-dark) .node-type.action{background-color:#22c55e33;color:var(--f-green-400, #4ade80)}.operator-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:9999px;font-weight:600;font-size:.75rem;cursor:pointer;transition:opacity .2s}.operator-badge.and{background-color:var(--f-yellow-100, #fef3c7);color:var(--f-yellow-700, #92400e)}.operator-badge.or{background-color:var(--f-indigo-100, #e0e7ff);color:var(--f-indigo-700, #3730a3)}:host-context(.p-dark) .operator-badge.and{background-color:#eab30833;color:var(--f-yellow-400, #facc15)}:host-context(.p-dark) .operator-badge.or{background-color:#6366f133;color:var(--f-indigo-400, #818cf8)}.operator-badge:hover{opacity:.8}.action-select{background-color:var(--f-surface-0, #ffffff);color:var(--f-text-color, #1f2937)}:host-context(.p-dark) .action-select{background-color:var(--f-surface-900, #1f2937);color:var(--f-text-color, #f9fafb)}.action-select:focus{outline:none;border-color:var(--f-primary-color, #3b82f6)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { logic: [{ type: i0.Input, args: [{ isSignal: true, alias: "logic", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], logicChange: [{ type: i0.Output, args: ["logicChange"] }] } });
 
 function flattenTree(tree) {
@@ -1656,8 +1638,8 @@ class RoleActionSelectorComponent extends BaseActionSelectorComponent {
             this.saving.set(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RoleActionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RoleActionSelectorComponent, isStandalone: true, selector: "flusys-role-action-selector", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RoleActionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: RoleActionSelectorComponent, isStandalone: true, selector: "flusys-role-action-selector", usesInheritance: true, ngImport: i0, template: `
     <div class="role-action-selector">
       <div class="mb-4">
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -1665,7 +1647,7 @@ class RoleActionSelectorComponent extends BaseActionSelectorComponent {
             <label class="block font-semibold mb-2">{{
               'iam.permission.select.role' | translate
             }}</label>
-            <p-select
+            <f-select
               [ngModel]="selectedRoleId()"
               (ngModelChange)="selectedRoleId.set($event)"
               [options]="roles()"
@@ -1687,7 +1669,7 @@ class RoleActionSelectorComponent extends BaseActionSelectorComponent {
           <div
             class="surface-card p-5 rounded-border shadow-sm flex justify-center"
           >
-            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
+            <ui-icon name="loader-circle" spin class="text-primary text-5xl"></ui-icon>
           </div>
         }
 
@@ -1709,36 +1691,36 @@ class RoleActionSelectorComponent extends BaseActionSelectorComponent {
               </div>
               <div class="flex flex-wrap gap-2">
                 <button
-                  pButton
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
                   (click)="selectAll()"
                 >
-                  <span pButtonIcon class="pi pi-check"></span>
+                  <ui-icon pButtonIcon name="check"></ui-icon>
                   <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
                 </button>
                 <button
-                  pButton
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
                   (click)="deselectAll()"
                 >
-                  <span pButtonIcon class="pi pi-times"></span>
+                  <ui-icon pButtonIcon name="times"></ui-icon>
                   <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
                 </button>
                 <button
-                  pButton
+                  fButton
                   *hasPermission="ROLE_ACTION_PERMISSIONS.ASSIGN"
                   [disabled]="!canSave() || saving()"
                   size="small"
                   (click)="saveChanges()"
                 >
                   @if (saving()) {
-                    <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
                   } @else {
-                    <span pButtonIcon class="pi pi-save"></span>
+                    <ui-icon pButtonIcon name="save"></ui-icon>
                   }
                   <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
                 </button>
@@ -1748,7 +1730,7 @@ class RoleActionSelectorComponent extends BaseActionSelectorComponent {
             @if (invalidActionsCount() > 0) {
               <div class="validation-warning rounded-border p-3 mb-4">
                 <div class="flex items-start gap-2">
-                  <i class="pi pi-exclamation-triangle text-xl"></i>
+                  <ui-icon name="exclamation-triangle" class="text-xl"></ui-icon>
                   <div class="flex-1">
                     <span class="font-semibold"
                       >{{ 'iam.validation.warning.title' | translate }}:</span
@@ -1767,20 +1749,19 @@ class RoleActionSelectorComponent extends BaseActionSelectorComponent {
             }
 
             <div class="overflow-x-auto -mx-4 sm:mx-0">
-              <p-treetable
+              <f-treetable
                 [value]="treeNodes()"
                 dataKey="id"
-                class="p-treetable-sm"
                 [tableStyle]="{ 'min-width': '50rem' }"
               >
                 <ng-template #header>
                   <tr>
                     <th class="w-12">
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="allSelected()"
                         [binary]="true"
                         (ngModelChange)="toggleAll()"
-                        [pTooltip]="'shared.select.deselect.all' | translate"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
                         tooltipPosition="top"
                       />
                     </th>
@@ -1799,27 +1780,24 @@ class RoleActionSelectorComponent extends BaseActionSelectorComponent {
                   @let tooltip = getTooltip(rowData);
                   <tr [class.highlight-warning]="hasUnmet">
                     <td class="w-12">
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="selectionMap()[rowData.id]"
                         [binary]="true"
                         (ngModelChange)="onActionToggle(rowData, $event)"
-                        [pTooltip]="tooltip"
+                        [fTooltip]="tooltip"
                         tooltipPosition="top"
                       />
                     </td>
                     <td>
-                      <p-treetabletoggler [rowNode]="rowNode" />
+                      <f-treetabletoggler [rowNode]="rowNode" />
                       <span class="inline-flex items-center gap-2">
                         {{ rowData.name }}
                         @if (hasUnmet) {
-                          <i
-                            class="pi pi-exclamation-triangle text-orange-500"
-                            [pTooltip]="
+                          <ui-icon name="exclamation-triangle" class="text-orange-500" [fTooltip]="
                               'iam.validation.unmet.prerequisites.tooltip'
                                 | translate
                             "
-                            tooltipPosition="top"
-                          ></i>
+                            tooltipPosition="top"></ui-icon>
                         }
                       </span>
                     </td>
@@ -1827,7 +1805,7 @@ class RoleActionSelectorComponent extends BaseActionSelectorComponent {
                       {{ rowData.code || '-' }}
                     </td>
                     <td>
-                      <p-tag
+                      <f-tag
                         [value]="rowData.actionType"
                         [severity]="
                           rowData.actionType === 'backend' ? 'info' : 'success'
@@ -1849,7 +1827,7 @@ class RoleActionSelectorComponent extends BaseActionSelectorComponent {
                   <tr>
                     <td colspan="5" class="text-center p-4 text-muted-color">
                       @if (loading()) {
-                        <i class="pi pi-spin pi-spinner"></i>
+                        <ui-icon name="loader-circle" spin></ui-icon>
                         {{ 'shared.loading.actions' | translate }}
                       } @else {
                         {{ 'iam.permission.no.actions.available' | translate }}
@@ -1857,14 +1835,14 @@ class RoleActionSelectorComponent extends BaseActionSelectorComponent {
                     </td>
                   </tr>
                 </ng-template>
-              </p-treetable>
+              </f-treetable>
             </div>
           </div>
 
           @if (hasChanges()) {
             <div class="border border-surface rounded-border p-3 mt-4">
               <div class="flex items-center gap-2 mb-3">
-                <i class="pi pi-info-circle text-primary"></i>
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
                 <span class="font-bold">{{
                   'shared.pending.changes' | translate
                 }}</span>
@@ -1873,7 +1851,7 @@ class RoleActionSelectorComponent extends BaseActionSelectorComponent {
                 @if (pendingAdd().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-plus-circle text-green-500"></i>
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.add' | translate }} ({{
                           pendingAdd().length
@@ -1890,7 +1868,7 @@ class RoleActionSelectorComponent extends BaseActionSelectorComponent {
                 @if (pendingRemove().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-minus-circle text-red-500"></i>
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.remove' | translate }} ({{
                           pendingRemove().length
@@ -1911,9 +1889,7 @@ class RoleActionSelectorComponent extends BaseActionSelectorComponent {
 
         @if (!loading() && actions().length === 0) {
           <div class="surface-card p-5 rounded-border shadow-sm text-center">
-            <i
-              class="pi pi-info-circle text-muted-color mb-3 block text-5xl"
-            ></i>
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
             <p class="text-muted-color m-0">
               {{ 'iam.permission.no.actions.for.role' | translate }}
             </p>
@@ -1921,11 +1897,11 @@ class RoleActionSelectorComponent extends BaseActionSelectorComponent {
         }
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}.validation-warning{background-color:var(--p-yellow-50, #fefce8);border-left:4px solid var(--p-yellow-500, #eab308);color:var(--p-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--p-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--p-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["pButton", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "link", "rounded", "fluid", "variant", "iconOnly", "loading", "severity"] }, { kind: "directive", type: i2.ButtonLabel, selector: "[pButtonLabel]", inputs: ["pButtonLabelPT", "pButtonLabelUnstyled"] }, { kind: "directive", type: i2.ButtonIcon, selector: "[pButtonIcon]", inputs: ["pButtonIconPT", "pButtonUnstyled"] }, { kind: "component", type: i3.Checkbox, selector: "p-checkbox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "multiple", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5.Tag, selector: "p-tag", inputs: ["severity", "value", "icon", "rounded"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i7.TreeTable, selector: "p-treetable, p-tree-table", inputs: ["columns", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "selectionKeys", "collapsedKeys", "showGridlines"], outputs: ["rowsChange", "selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange", "collapsedKeysChange"] }, { kind: "component", type: i7.TreeTableToggler, selector: "p-treetabletoggler, p-treetable-toggler", inputs: ["rowNode"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, styles: [":host{display:block}.validation-warning{background-color:var(--f-yellow-50, #fefce8);border-left:4px solid var(--f-yellow-500, #eab308);color:var(--f-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--f-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--f-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i2.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "rounded", "raised", "fluid", "disabled", "loading", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i2.TagComponent, selector: "f-tag", inputs: ["value", "severity", "icon", "rounded", "color"] }, { kind: "component", type: i2.CheckboxComponent, selector: "f-checkbox", inputs: ["label", "binary", "disabled", "inputId", "invalid", "indeterminate", "touched", "styleClass", "checked"], outputs: ["onChange", "onBlur", "touch", "checkedChange"] }, { kind: "component", type: i2.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "showClear", "loading", "inputId", "invalid", "touched", "styleClass", "editable"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur"] }, { kind: "directive", type: i2.TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay"] }, { kind: "component", type: i2.TreeTableComponent, selector: "f-treetable", inputs: ["value", "loading", "dataKey", "styleClass", "tableStyle", "scrollable"] }, { kind: "component", type: i2.TreeTableTogglerComponent, selector: "f-treetabletoggler", inputs: ["rowNode"] }, { kind: "component", type: i2.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RoleActionSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RoleActionSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'flusys-role-action-selector', imports: [FormsModule, PrimeModule, HasPermissionDirective, TranslatePipe], template: `
+            args: [{ selector: 'flusys-role-action-selector', imports: [FormsModule, UiModule, HasPermissionDirective, TranslatePipe], template: `
     <div class="role-action-selector">
       <div class="mb-4">
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -1933,7 +1909,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             <label class="block font-semibold mb-2">{{
               'iam.permission.select.role' | translate
             }}</label>
-            <p-select
+            <f-select
               [ngModel]="selectedRoleId()"
               (ngModelChange)="selectedRoleId.set($event)"
               [options]="roles()"
@@ -1955,7 +1931,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           <div
             class="surface-card p-5 rounded-border shadow-sm flex justify-center"
           >
-            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
+            <ui-icon name="loader-circle" spin class="text-primary text-5xl"></ui-icon>
           </div>
         }
 
@@ -1977,36 +1953,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
               </div>
               <div class="flex flex-wrap gap-2">
                 <button
-                  pButton
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
                   (click)="selectAll()"
                 >
-                  <span pButtonIcon class="pi pi-check"></span>
+                  <ui-icon pButtonIcon name="check"></ui-icon>
                   <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
                 </button>
                 <button
-                  pButton
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
                   (click)="deselectAll()"
                 >
-                  <span pButtonIcon class="pi pi-times"></span>
+                  <ui-icon pButtonIcon name="times"></ui-icon>
                   <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
                 </button>
                 <button
-                  pButton
+                  fButton
                   *hasPermission="ROLE_ACTION_PERMISSIONS.ASSIGN"
                   [disabled]="!canSave() || saving()"
                   size="small"
                   (click)="saveChanges()"
                 >
                   @if (saving()) {
-                    <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
                   } @else {
-                    <span pButtonIcon class="pi pi-save"></span>
+                    <ui-icon pButtonIcon name="save"></ui-icon>
                   }
                   <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
                 </button>
@@ -2016,7 +1992,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             @if (invalidActionsCount() > 0) {
               <div class="validation-warning rounded-border p-3 mb-4">
                 <div class="flex items-start gap-2">
-                  <i class="pi pi-exclamation-triangle text-xl"></i>
+                  <ui-icon name="exclamation-triangle" class="text-xl"></ui-icon>
                   <div class="flex-1">
                     <span class="font-semibold"
                       >{{ 'iam.validation.warning.title' | translate }}:</span
@@ -2035,20 +2011,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             }
 
             <div class="overflow-x-auto -mx-4 sm:mx-0">
-              <p-treetable
+              <f-treetable
                 [value]="treeNodes()"
                 dataKey="id"
-                class="p-treetable-sm"
                 [tableStyle]="{ 'min-width': '50rem' }"
               >
                 <ng-template #header>
                   <tr>
                     <th class="w-12">
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="allSelected()"
                         [binary]="true"
                         (ngModelChange)="toggleAll()"
-                        [pTooltip]="'shared.select.deselect.all' | translate"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
                         tooltipPosition="top"
                       />
                     </th>
@@ -2067,27 +2042,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                   @let tooltip = getTooltip(rowData);
                   <tr [class.highlight-warning]="hasUnmet">
                     <td class="w-12">
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="selectionMap()[rowData.id]"
                         [binary]="true"
                         (ngModelChange)="onActionToggle(rowData, $event)"
-                        [pTooltip]="tooltip"
+                        [fTooltip]="tooltip"
                         tooltipPosition="top"
                       />
                     </td>
                     <td>
-                      <p-treetabletoggler [rowNode]="rowNode" />
+                      <f-treetabletoggler [rowNode]="rowNode" />
                       <span class="inline-flex items-center gap-2">
                         {{ rowData.name }}
                         @if (hasUnmet) {
-                          <i
-                            class="pi pi-exclamation-triangle text-orange-500"
-                            [pTooltip]="
+                          <ui-icon name="exclamation-triangle" class="text-orange-500" [fTooltip]="
                               'iam.validation.unmet.prerequisites.tooltip'
                                 | translate
                             "
-                            tooltipPosition="top"
-                          ></i>
+                            tooltipPosition="top"></ui-icon>
                         }
                       </span>
                     </td>
@@ -2095,7 +2067,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                       {{ rowData.code || '-' }}
                     </td>
                     <td>
-                      <p-tag
+                      <f-tag
                         [value]="rowData.actionType"
                         [severity]="
                           rowData.actionType === 'backend' ? 'info' : 'success'
@@ -2117,7 +2089,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                   <tr>
                     <td colspan="5" class="text-center p-4 text-muted-color">
                       @if (loading()) {
-                        <i class="pi pi-spin pi-spinner"></i>
+                        <ui-icon name="loader-circle" spin></ui-icon>
                         {{ 'shared.loading.actions' | translate }}
                       } @else {
                         {{ 'iam.permission.no.actions.available' | translate }}
@@ -2125,14 +2097,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     </td>
                   </tr>
                 </ng-template>
-              </p-treetable>
+              </f-treetable>
             </div>
           </div>
 
           @if (hasChanges()) {
             <div class="border border-surface rounded-border p-3 mt-4">
               <div class="flex items-center gap-2 mb-3">
-                <i class="pi pi-info-circle text-primary"></i>
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
                 <span class="font-bold">{{
                   'shared.pending.changes' | translate
                 }}</span>
@@ -2141,7 +2113,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 @if (pendingAdd().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-plus-circle text-green-500"></i>
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.add' | translate }} ({{
                           pendingAdd().length
@@ -2158,7 +2130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 @if (pendingRemove().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-minus-circle text-red-500"></i>
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.remove' | translate }} ({{
                           pendingRemove().length
@@ -2179,9 +2151,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 
         @if (!loading() && actions().length === 0) {
           <div class="surface-card p-5 rounded-border shadow-sm text-center">
-            <i
-              class="pi pi-info-circle text-muted-color mb-3 block text-5xl"
-            ></i>
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
             <p class="text-muted-color m-0">
               {{ 'iam.permission.no.actions.for.role' | translate }}
             </p>
@@ -2189,7 +2159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }
       }
     </div>
-  `, styles: [":host{display:block}.validation-warning{background-color:var(--p-yellow-50, #fefce8);border-left:4px solid var(--p-yellow-500, #eab308);color:var(--p-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--p-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--p-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"] }]
+  `, styles: [":host{display:block}.validation-warning{background-color:var(--f-yellow-50, #fefce8);border-left:4px solid var(--f-yellow-500, #eab308);color:var(--f-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--f-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--f-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"] }]
         }], ctorParameters: () => [] });
 
 class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
@@ -2317,11 +2287,11 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
         this.confirmationService.confirm({
             header: this.translate('iam.permission.prerequisite.validation.failed'),
             message: `${this.translate('iam.permission.prerequisite.error.message')}\n\n${errorList}\n\n${this.translate('iam.permission.auto.select.prompt')}`,
-            icon: 'pi pi-exclamation-triangle',
+            icon: 'exclamation-triangle',
             acceptLabel: this.translate('iam.permission.auto.select.required'),
             rejectLabel: this.translate('shared.cancel'),
-            acceptIcon: 'pi pi-check',
-            rejectIcon: 'pi pi-times',
+            acceptIcon: 'check',
+            rejectIcon: 'times',
             accept: () => {
                 const selMap = { ...this.selectionMap() };
                 prerequisiteErrors.forEach((error) => {
@@ -2346,8 +2316,8 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CompanyActionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CompanyActionSelectorComponent, isStandalone: true, selector: "flusys-company-action-selector", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CompanyActionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CompanyActionSelectorComponent, isStandalone: true, selector: "flusys-company-action-selector", usesInheritance: true, ngImport: i0, template: `
     <div class="company-action-selector">
       <div class="mb-4">
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -2355,7 +2325,7 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
             <label class="block font-semibold mb-2">{{
               'iam.permission.select.company' | translate
             }}</label>
-            <p-select
+            <f-select
               [ngModel]="selectedCompanyId()"
               (ngModelChange)="selectedCompanyId.set($event)"
               [options]="companies()"
@@ -2377,7 +2347,7 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
           <div
             class="surface-card p-5 rounded-border shadow-sm flex justify-center"
           >
-            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
+            <ui-icon name="loader-circle" spin class="text-primary text-5xl"></ui-icon>
           </div>
         }
 
@@ -2399,36 +2369,36 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
               </div>
               <div class="flex flex-wrap gap-2">
                 <button
-                  pButton
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
                   (click)="selectAll()"
                 >
-                  <span pButtonIcon class="pi pi-check"></span>
+                  <ui-icon pButtonIcon name="check"></ui-icon>
                   <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
                 </button>
                 <button
-                  pButton
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
                   (click)="deselectAll()"
                 >
-                  <span pButtonIcon class="pi pi-times"></span>
+                  <ui-icon pButtonIcon name="times"></ui-icon>
                   <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
                 </button>
                 <button
-                  pButton
+                  fButton
                   *hasPermission="COMPANY_ACTION_PERMISSIONS.ASSIGN"
                   [disabled]="!canSave() || saving()"
                   size="small"
                   (click)="saveChanges()"
                 >
                   @if (saving()) {
-                    <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
                   } @else {
-                    <span pButtonIcon class="pi pi-save"></span>
+                    <ui-icon pButtonIcon name="save"></ui-icon>
                   }
                   <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
                 </button>
@@ -2438,7 +2408,7 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
             @if (invalidActionsCount() > 0) {
               <div class="validation-warning rounded-border p-3 mb-4">
                 <div class="flex items-start gap-2">
-                  <i class="pi pi-exclamation-triangle text-xl"></i>
+                  <ui-icon name="exclamation-triangle" class="text-xl"></ui-icon>
                   <div class="flex-1">
                     <span class="font-semibold"
                       >{{ 'iam.validation.warning.title' | translate }}:</span
@@ -2457,20 +2427,19 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
             }
 
             <div class="overflow-x-auto -mx-4 sm:mx-0">
-              <p-treetable
+              <f-treetable
                 [value]="treeNodes()"
                 dataKey="id"
-                class="p-treetable-sm"
                 [tableStyle]="{ 'min-width': '50rem' }"
               >
                 <ng-template #header>
                   <tr>
                     <th class="w-12">
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="allSelected()"
                         [binary]="true"
                         (ngModelChange)="toggleAll()"
-                        [pTooltip]="'shared.select.deselect.all' | translate"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
                         tooltipPosition="top"
                       />
                     </th>
@@ -2488,27 +2457,24 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
                   @let hasUnmet = hasUnmetPrerequisites(rowData);
                   <tr [class.highlight-warning]="hasUnmet">
                     <td class="w-12">
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="selectionMap()[rowData.id]"
                         [binary]="true"
                         (ngModelChange)="onActionToggle(rowData, $event)"
-                        [pTooltip]="getTooltip(rowData)"
+                        [fTooltip]="getTooltip(rowData)"
                         tooltipPosition="top"
                       />
                     </td>
                     <td>
-                      <p-treetabletoggler [rowNode]="rowNode" />
+                      <f-treetabletoggler [rowNode]="rowNode" />
                       <span class="inline-flex items-center gap-2">
                         {{ rowData.name }}
                         @if (hasUnmet) {
-                          <i
-                            class="pi pi-exclamation-triangle text-orange-500"
-                            [pTooltip]="
+                          <ui-icon name="exclamation-triangle" class="text-orange-500" [fTooltip]="
                               'iam.validation.unmet.prerequisites.tooltip'
                                 | translate
                             "
-                            tooltipPosition="top"
-                          ></i>
+                            tooltipPosition="top"></ui-icon>
                         }
                       </span>
                     </td>
@@ -2516,7 +2482,7 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
                       {{ rowData.code || '-' }}
                     </td>
                     <td>
-                      <p-tag
+                      <f-tag
                         [value]="rowData.actionType"
                         [severity]="
                           rowData.actionType === 'backend' ? 'info' : 'success'
@@ -2532,7 +2498,7 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
                   <tr>
                     <td colspan="5" class="text-center p-4 text-muted-color">
                       @if (loading()) {
-                        <i class="pi pi-spin pi-spinner"></i>
+                        <ui-icon name="loader-circle" spin></ui-icon>
                         {{ 'shared.loading.actions' | translate }}
                       } @else {
                         {{ 'iam.permission.no.actions.available' | translate }}
@@ -2540,14 +2506,14 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
                     </td>
                   </tr>
                 </ng-template>
-              </p-treetable>
+              </f-treetable>
             </div>
           </div>
 
           @if (hasChanges()) {
             <div class="border border-surface rounded-border p-3 mt-4">
               <div class="flex items-center gap-2 mb-3">
-                <i class="pi pi-info-circle text-primary"></i>
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
                 <span class="font-bold">{{
                   'shared.pending.changes' | translate
                 }}</span>
@@ -2556,7 +2522,7 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
                 @if (pendingAdd().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-plus-circle text-green-500"></i>
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.whitelist' | translate }} ({{
                           pendingAdd().length
@@ -2573,7 +2539,7 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
                 @if (pendingRemove().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-minus-circle text-red-500"></i>
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.remove' | translate }} ({{
                           pendingRemove().length
@@ -2594,9 +2560,7 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
 
         @if (!loading() && actions().length === 0) {
           <div class="surface-card p-5 rounded-border shadow-sm text-center">
-            <i
-              class="pi pi-info-circle text-muted-color mb-3 block text-5xl"
-            ></i>
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
             <p class="text-muted-color m-0">
               {{ 'iam.permission.no.actions.for.company' | translate }}
             </p>
@@ -2604,11 +2568,11 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
         }
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}.validation-warning{background-color:var(--p-yellow-50, #fefce8);border-left:4px solid var(--p-yellow-500, #eab308);color:var(--p-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--p-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--p-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["pButton", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "link", "rounded", "fluid", "variant", "iconOnly", "loading", "severity"] }, { kind: "directive", type: i2.ButtonLabel, selector: "[pButtonLabel]", inputs: ["pButtonLabelPT", "pButtonLabelUnstyled"] }, { kind: "directive", type: i2.ButtonIcon, selector: "[pButtonIcon]", inputs: ["pButtonIconPT", "pButtonUnstyled"] }, { kind: "component", type: i3.Checkbox, selector: "p-checkbox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "multiple", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5.Tag, selector: "p-tag", inputs: ["severity", "value", "icon", "rounded"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i7.TreeTable, selector: "p-treetable, p-tree-table", inputs: ["columns", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "selectionKeys", "collapsedKeys", "showGridlines"], outputs: ["rowsChange", "selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange", "collapsedKeysChange"] }, { kind: "component", type: i7.TreeTableToggler, selector: "p-treetabletoggler, p-treetable-toggler", inputs: ["rowNode"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, styles: [":host{display:block}.validation-warning{background-color:var(--f-yellow-50, #fefce8);border-left:4px solid var(--f-yellow-500, #eab308);color:var(--f-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--f-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--f-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"], dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i2.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "rounded", "raised", "fluid", "disabled", "loading", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i2.TagComponent, selector: "f-tag", inputs: ["value", "severity", "icon", "rounded", "color"] }, { kind: "component", type: i2.CheckboxComponent, selector: "f-checkbox", inputs: ["label", "binary", "disabled", "inputId", "invalid", "indeterminate", "touched", "styleClass", "checked"], outputs: ["onChange", "onBlur", "touch", "checkedChange"] }, { kind: "component", type: i2.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "showClear", "loading", "inputId", "invalid", "touched", "styleClass", "editable"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur"] }, { kind: "directive", type: i2.TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay"] }, { kind: "component", type: i2.TreeTableComponent, selector: "f-treetable", inputs: ["value", "loading", "dataKey", "styleClass", "tableStyle", "scrollable"] }, { kind: "component", type: i2.TreeTableTogglerComponent, selector: "f-treetabletoggler", inputs: ["rowNode"] }, { kind: "component", type: i2.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CompanyActionSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CompanyActionSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'flusys-company-action-selector', imports: [FormsModule, PrimeModule, HasPermissionDirective, TranslatePipe], template: `
+            args: [{ selector: 'flusys-company-action-selector', imports: [UiModule, FormsModule, HasPermissionDirective, TranslatePipe], template: `
     <div class="company-action-selector">
       <div class="mb-4">
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -2616,7 +2580,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             <label class="block font-semibold mb-2">{{
               'iam.permission.select.company' | translate
             }}</label>
-            <p-select
+            <f-select
               [ngModel]="selectedCompanyId()"
               (ngModelChange)="selectedCompanyId.set($event)"
               [options]="companies()"
@@ -2638,7 +2602,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           <div
             class="surface-card p-5 rounded-border shadow-sm flex justify-center"
           >
-            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
+            <ui-icon name="loader-circle" spin class="text-primary text-5xl"></ui-icon>
           </div>
         }
 
@@ -2660,36 +2624,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
               </div>
               <div class="flex flex-wrap gap-2">
                 <button
-                  pButton
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
                   (click)="selectAll()"
                 >
-                  <span pButtonIcon class="pi pi-check"></span>
+                  <ui-icon pButtonIcon name="check"></ui-icon>
                   <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
                 </button>
                 <button
-                  pButton
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
                   (click)="deselectAll()"
                 >
-                  <span pButtonIcon class="pi pi-times"></span>
+                  <ui-icon pButtonIcon name="times"></ui-icon>
                   <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
                 </button>
                 <button
-                  pButton
+                  fButton
                   *hasPermission="COMPANY_ACTION_PERMISSIONS.ASSIGN"
                   [disabled]="!canSave() || saving()"
                   size="small"
                   (click)="saveChanges()"
                 >
                   @if (saving()) {
-                    <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
                   } @else {
-                    <span pButtonIcon class="pi pi-save"></span>
+                    <ui-icon pButtonIcon name="save"></ui-icon>
                   }
                   <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
                 </button>
@@ -2699,7 +2663,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             @if (invalidActionsCount() > 0) {
               <div class="validation-warning rounded-border p-3 mb-4">
                 <div class="flex items-start gap-2">
-                  <i class="pi pi-exclamation-triangle text-xl"></i>
+                  <ui-icon name="exclamation-triangle" class="text-xl"></ui-icon>
                   <div class="flex-1">
                     <span class="font-semibold"
                       >{{ 'iam.validation.warning.title' | translate }}:</span
@@ -2718,20 +2682,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             }
 
             <div class="overflow-x-auto -mx-4 sm:mx-0">
-              <p-treetable
+              <f-treetable
                 [value]="treeNodes()"
                 dataKey="id"
-                class="p-treetable-sm"
                 [tableStyle]="{ 'min-width': '50rem' }"
               >
                 <ng-template #header>
                   <tr>
                     <th class="w-12">
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="allSelected()"
                         [binary]="true"
                         (ngModelChange)="toggleAll()"
-                        [pTooltip]="'shared.select.deselect.all' | translate"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
                         tooltipPosition="top"
                       />
                     </th>
@@ -2749,27 +2712,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                   @let hasUnmet = hasUnmetPrerequisites(rowData);
                   <tr [class.highlight-warning]="hasUnmet">
                     <td class="w-12">
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="selectionMap()[rowData.id]"
                         [binary]="true"
                         (ngModelChange)="onActionToggle(rowData, $event)"
-                        [pTooltip]="getTooltip(rowData)"
+                        [fTooltip]="getTooltip(rowData)"
                         tooltipPosition="top"
                       />
                     </td>
                     <td>
-                      <p-treetabletoggler [rowNode]="rowNode" />
+                      <f-treetabletoggler [rowNode]="rowNode" />
                       <span class="inline-flex items-center gap-2">
                         {{ rowData.name }}
                         @if (hasUnmet) {
-                          <i
-                            class="pi pi-exclamation-triangle text-orange-500"
-                            [pTooltip]="
+                          <ui-icon name="exclamation-triangle" class="text-orange-500" [fTooltip]="
                               'iam.validation.unmet.prerequisites.tooltip'
                                 | translate
                             "
-                            tooltipPosition="top"
-                          ></i>
+                            tooltipPosition="top"></ui-icon>
                         }
                       </span>
                     </td>
@@ -2777,7 +2737,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                       {{ rowData.code || '-' }}
                     </td>
                     <td>
-                      <p-tag
+                      <f-tag
                         [value]="rowData.actionType"
                         [severity]="
                           rowData.actionType === 'backend' ? 'info' : 'success'
@@ -2793,7 +2753,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                   <tr>
                     <td colspan="5" class="text-center p-4 text-muted-color">
                       @if (loading()) {
-                        <i class="pi pi-spin pi-spinner"></i>
+                        <ui-icon name="loader-circle" spin></ui-icon>
                         {{ 'shared.loading.actions' | translate }}
                       } @else {
                         {{ 'iam.permission.no.actions.available' | translate }}
@@ -2801,14 +2761,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     </td>
                   </tr>
                 </ng-template>
-              </p-treetable>
+              </f-treetable>
             </div>
           </div>
 
           @if (hasChanges()) {
             <div class="border border-surface rounded-border p-3 mt-4">
               <div class="flex items-center gap-2 mb-3">
-                <i class="pi pi-info-circle text-primary"></i>
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
                 <span class="font-bold">{{
                   'shared.pending.changes' | translate
                 }}</span>
@@ -2817,7 +2777,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 @if (pendingAdd().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-plus-circle text-green-500"></i>
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.whitelist' | translate }} ({{
                           pendingAdd().length
@@ -2834,7 +2794,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 @if (pendingRemove().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-minus-circle text-red-500"></i>
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.remove' | translate }} ({{
                           pendingRemove().length
@@ -2855,9 +2815,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 
         @if (!loading() && actions().length === 0) {
           <div class="surface-card p-5 rounded-border shadow-sm text-center">
-            <i
-              class="pi pi-info-circle text-muted-color mb-3 block text-5xl"
-            ></i>
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
             <p class="text-muted-color m-0">
               {{ 'iam.permission.no.actions.for.company' | translate }}
             </p>
@@ -2865,7 +2823,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }
       }
     </div>
-  `, styles: [":host{display:block}.validation-warning{background-color:var(--p-yellow-50, #fefce8);border-left:4px solid var(--p-yellow-500, #eab308);color:var(--p-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--p-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--p-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"] }]
+  `, styles: [":host{display:block}.validation-warning{background-color:var(--f-yellow-50, #fefce8);border-left:4px solid var(--f-yellow-500, #eab308);color:var(--f-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--f-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--f-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -3185,15 +3143,15 @@ class UserRoleSelectorComponent {
         this._selectionMap.set({});
         this._initialSelection.set({});
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: UserRoleSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: UserRoleSelectorComponent, isStandalone: true, selector: "flusys-user-role-selector", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: UserRoleSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: UserRoleSelectorComponent, isStandalone: true, selector: "flusys-user-role-selector", ngImport: i0, template: `
     <div class="user-role-selector">
       <!-- User and Branch Selectors -->
       <div class="surface-card p-4 rounded-border mb-4 shadow-sm">
         <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
           <div>
             <label class="block font-semibold mb-2">
-              <i class="pi pi-user mr-2 text-primary"></i>
+              <ui-icon name="user" class="mr-2 text-primary"></ui-icon>
               {{ 'iam.permission.select.user' | translate }}
             </label>
             <lib-user-select
@@ -3209,10 +3167,10 @@ class UserRoleSelectorComponent {
           @if (showBranchSelector()) {
             <div>
               <label class="block font-semibold mb-2">
-                <i class="pi pi-building mr-2 text-primary"></i>
+                <ui-icon name="building" class="mr-2 text-primary"></ui-icon>
                 {{ 'iam.permission.select.branch' | translate }}
               </label>
-              <p-select
+              <f-select
                 [ngModel]="selectedBranchId()"
                 (ngModelChange)="selectedBranchId.set($event)"
                 [options]="filteredBranches()"
@@ -3228,18 +3186,18 @@ class UserRoleSelectorComponent {
                 <ng-template #selectedItem let-branch>
                   @if (branch) {
                     <div class="flex items-center gap-2">
-                      <i class="pi pi-building text-primary"></i>
+                      <ui-icon name="building" class="text-primary"></ui-icon>
                       <span class="font-semibold">{{ branch.name }}</span>
                     </div>
                   }
                 </ng-template>
                 <ng-template #item let-branch>
                   <div class="flex items-center gap-2">
-                    <i class="pi pi-building text-muted-color"></i>
+                    <ui-icon name="building" class="text-muted-color"></ui-icon>
                     <span>{{ branch.name }}</span>
                   </div>
                 </ng-template>
-              </p-select>
+              </f-select>
               <small class="text-muted-color block mt-1">
                 {{
                   (filteredBranches().length !== 1
@@ -3259,7 +3217,7 @@ class UserRoleSelectorComponent {
           <div
             class="surface-card p-5 rounded-border shadow-sm flex justify-center"
           >
-            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
+            <ui-icon name="loader-circle" spin class="text-primary text-5xl"></ui-icon>
           </div>
         }
 
@@ -3282,36 +3240,36 @@ class UserRoleSelectorComponent {
               </div>
               <div class="flex flex-wrap gap-2">
                 <button
-                  pButton
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
                   (click)="selectAll()"
                 >
-                  <span pButtonIcon class="pi pi-check"></span>
+                  <ui-icon pButtonIcon name="check"></ui-icon>
                   <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
                 </button>
                 <button
-                  pButton
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
                   (click)="deselectAll()"
                 >
-                  <span pButtonIcon class="pi pi-times"></span>
+                  <ui-icon pButtonIcon name="times"></ui-icon>
                   <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
                 </button>
                 <button
-                  pButton
+                  fButton
                   *hasPermission="USER_ROLE_PERMISSIONS.ASSIGN"
                   [disabled]="!canSave() || saving()"
                   size="small"
                   (click)="saveChanges()"
                 >
                   @if (saving()) {
-                    <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
                   } @else {
-                    <span pButtonIcon class="pi pi-save"></span>
+                    <ui-icon pButtonIcon name="save"></ui-icon>
                   }
                   <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
                 </button>
@@ -3320,7 +3278,7 @@ class UserRoleSelectorComponent {
 
             <!-- Role Table -->
             <div class="overflow-x-auto -mx-4 sm:mx-0">
-              <p-table
+              <f-table
                 [value]="roles()"
                 [rows]="10"
                 [paginator]="roles().length > 10"
@@ -3330,17 +3288,16 @@ class UserRoleSelectorComponent {
                 [currentPageReportTemplate]="
                   'iam.pagination.roles.template' | translate
                 "
-                styleClass="p-datatable-sm"
                 [tableStyle]="{ 'min-width': '35rem' }"
               >
                 <ng-template #header>
                   <tr>
                     <th style="width: 3rem">
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="allSelected()"
                         [binary]="true"
                         (ngModelChange)="toggleAll()"
-                        [pTooltip]="'shared.select.deselect.all' | translate"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
                         tooltipPosition="top"
                       />
                     </th>
@@ -3356,11 +3313,11 @@ class UserRoleSelectorComponent {
                 <ng-template #body let-role>
                   <tr>
                     <td>
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="selectionMap()[role.id]"
                         [binary]="true"
                         (ngModelChange)="onRoleToggle(role, $event)"
-                        [pTooltip]="getTooltip(role)"
+                        [fTooltip]="getTooltip(role)"
                         tooltipPosition="top"
                       />
                     </td>
@@ -3375,7 +3332,7 @@ class UserRoleSelectorComponent {
                   <tr>
                     <td colspan="4" class="text-center p-4 text-muted-color">
                       @if (loading()) {
-                        <i class="pi pi-spin pi-spinner"></i>
+                        <ui-icon name="loader-circle" spin></ui-icon>
                         {{ 'shared.loading.roles' | translate }}
                       } @else {
                         {{ 'iam.permission.no.roles.available' | translate }}
@@ -3383,7 +3340,7 @@ class UserRoleSelectorComponent {
                     </td>
                   </tr>
                 </ng-template>
-              </p-table>
+              </f-table>
             </div>
           </div>
 
@@ -3391,7 +3348,7 @@ class UserRoleSelectorComponent {
           @if (hasChanges()) {
             <div class="border border-surface rounded-border p-3 mt-4">
               <div class="flex items-center gap-2 mb-3">
-                <i class="pi pi-info-circle text-primary"></i>
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
                 <span class="font-bold">{{
                   'shared.pending.changes' | translate
                 }}</span>
@@ -3400,7 +3357,7 @@ class UserRoleSelectorComponent {
                 @if (pendingAdd().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-plus-circle text-green-500"></i>
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.assign' | translate }} ({{
                           pendingAdd().length
@@ -3417,7 +3374,7 @@ class UserRoleSelectorComponent {
                 @if (pendingRemove().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-minus-circle text-red-500"></i>
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.remove' | translate }} ({{
                           pendingRemove().length
@@ -3438,9 +3395,7 @@ class UserRoleSelectorComponent {
 
         @if (!loading() && roles().length === 0) {
           <div class="surface-card p-5 rounded-border shadow-sm text-center">
-            <i
-              class="pi pi-info-circle text-muted-color mb-3 block text-5xl"
-            ></i>
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
             <p class="text-muted-color m-0">
               {{ 'iam.permission.no.roles.for.user' | translate }}
             </p>
@@ -3448,14 +3403,14 @@ class UserRoleSelectorComponent {
         }
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["pButton", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "link", "rounded", "fluid", "variant", "iconOnly", "loading", "severity"] }, { kind: "directive", type: i2.ButtonLabel, selector: "[pButtonLabel]", inputs: ["pButtonLabelPT", "pButtonLabelUnstyled"] }, { kind: "directive", type: i2.ButtonIcon, selector: "[pButtonIcon]", inputs: ["pButtonIconPT", "pButtonUnstyled"] }, { kind: "component", type: i3.Checkbox, selector: "p-checkbox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "multiple", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "firstChange", "rowsChange", "totalRecordsChange", "selectionChange", "selectAllChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "component", type: UserSelectComponent, selector: "lib-user-select", inputs: ["showClear", "value"], outputs: ["valueChange", "userSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i2.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "rounded", "raised", "fluid", "disabled", "loading", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i2.CheckboxComponent, selector: "f-checkbox", inputs: ["label", "binary", "disabled", "inputId", "invalid", "indeterminate", "touched", "styleClass", "checked"], outputs: ["onChange", "onBlur", "touch", "checkedChange"] }, { kind: "component", type: i2.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "showClear", "loading", "inputId", "invalid", "touched", "styleClass", "editable"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur"] }, { kind: "component", type: i2.TableComponent, selector: "f-table", inputs: ["value", "lazy", "loading", "rows", "totalRecords", "rowHover", "dataKey", "scrollable", "paginator", "first", "rowsPerPageOptions", "showCurrentPageReport", "currentPageReportTemplate", "tableStyle", "styleClass", "globalFilterFields", "sortField", "sortOrder"], outputs: ["sortFieldChange", "sortOrderChange", "onLazyLoad", "onSort"] }, { kind: "directive", type: i2.TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay"] }, { kind: "component", type: i2.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "component", type: UserSelectComponent, selector: "lib-user-select", inputs: ["showClear", "value"], outputs: ["valueChange", "userSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: UserRoleSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: UserRoleSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'flusys-user-role-selector', imports: [
                         CommonModule,
                         FormsModule,
-                        PrimeModule,
+                        UiModule,
                         HasPermissionDirective,
                         UserSelectComponent,
                         TranslatePipe,
@@ -3466,7 +3421,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
           <div>
             <label class="block font-semibold mb-2">
-              <i class="pi pi-user mr-2 text-primary"></i>
+              <ui-icon name="user" class="mr-2 text-primary"></ui-icon>
               {{ 'iam.permission.select.user' | translate }}
             </label>
             <lib-user-select
@@ -3482,10 +3437,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           @if (showBranchSelector()) {
             <div>
               <label class="block font-semibold mb-2">
-                <i class="pi pi-building mr-2 text-primary"></i>
+                <ui-icon name="building" class="mr-2 text-primary"></ui-icon>
                 {{ 'iam.permission.select.branch' | translate }}
               </label>
-              <p-select
+              <f-select
                 [ngModel]="selectedBranchId()"
                 (ngModelChange)="selectedBranchId.set($event)"
                 [options]="filteredBranches()"
@@ -3501,18 +3456,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 <ng-template #selectedItem let-branch>
                   @if (branch) {
                     <div class="flex items-center gap-2">
-                      <i class="pi pi-building text-primary"></i>
+                      <ui-icon name="building" class="text-primary"></ui-icon>
                       <span class="font-semibold">{{ branch.name }}</span>
                     </div>
                   }
                 </ng-template>
                 <ng-template #item let-branch>
                   <div class="flex items-center gap-2">
-                    <i class="pi pi-building text-muted-color"></i>
+                    <ui-icon name="building" class="text-muted-color"></ui-icon>
                     <span>{{ branch.name }}</span>
                   </div>
                 </ng-template>
-              </p-select>
+              </f-select>
               <small class="text-muted-color block mt-1">
                 {{
                   (filteredBranches().length !== 1
@@ -3532,7 +3487,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           <div
             class="surface-card p-5 rounded-border shadow-sm flex justify-center"
           >
-            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
+            <ui-icon name="loader-circle" spin class="text-primary text-5xl"></ui-icon>
           </div>
         }
 
@@ -3555,36 +3510,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
               </div>
               <div class="flex flex-wrap gap-2">
                 <button
-                  pButton
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
                   (click)="selectAll()"
                 >
-                  <span pButtonIcon class="pi pi-check"></span>
+                  <ui-icon pButtonIcon name="check"></ui-icon>
                   <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
                 </button>
                 <button
-                  pButton
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
                   (click)="deselectAll()"
                 >
-                  <span pButtonIcon class="pi pi-times"></span>
+                  <ui-icon pButtonIcon name="times"></ui-icon>
                   <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
                 </button>
                 <button
-                  pButton
+                  fButton
                   *hasPermission="USER_ROLE_PERMISSIONS.ASSIGN"
                   [disabled]="!canSave() || saving()"
                   size="small"
                   (click)="saveChanges()"
                 >
                   @if (saving()) {
-                    <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
                   } @else {
-                    <span pButtonIcon class="pi pi-save"></span>
+                    <ui-icon pButtonIcon name="save"></ui-icon>
                   }
                   <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
                 </button>
@@ -3593,7 +3548,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 
             <!-- Role Table -->
             <div class="overflow-x-auto -mx-4 sm:mx-0">
-              <p-table
+              <f-table
                 [value]="roles()"
                 [rows]="10"
                 [paginator]="roles().length > 10"
@@ -3603,17 +3558,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 [currentPageReportTemplate]="
                   'iam.pagination.roles.template' | translate
                 "
-                styleClass="p-datatable-sm"
                 [tableStyle]="{ 'min-width': '35rem' }"
               >
                 <ng-template #header>
                   <tr>
                     <th style="width: 3rem">
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="allSelected()"
                         [binary]="true"
                         (ngModelChange)="toggleAll()"
-                        [pTooltip]="'shared.select.deselect.all' | translate"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
                         tooltipPosition="top"
                       />
                     </th>
@@ -3629,11 +3583,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 <ng-template #body let-role>
                   <tr>
                     <td>
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="selectionMap()[role.id]"
                         [binary]="true"
                         (ngModelChange)="onRoleToggle(role, $event)"
-                        [pTooltip]="getTooltip(role)"
+                        [fTooltip]="getTooltip(role)"
                         tooltipPosition="top"
                       />
                     </td>
@@ -3648,7 +3602,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                   <tr>
                     <td colspan="4" class="text-center p-4 text-muted-color">
                       @if (loading()) {
-                        <i class="pi pi-spin pi-spinner"></i>
+                        <ui-icon name="loader-circle" spin></ui-icon>
                         {{ 'shared.loading.roles' | translate }}
                       } @else {
                         {{ 'iam.permission.no.roles.available' | translate }}
@@ -3656,7 +3610,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     </td>
                   </tr>
                 </ng-template>
-              </p-table>
+              </f-table>
             </div>
           </div>
 
@@ -3664,7 +3618,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           @if (hasChanges()) {
             <div class="border border-surface rounded-border p-3 mt-4">
               <div class="flex items-center gap-2 mb-3">
-                <i class="pi pi-info-circle text-primary"></i>
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
                 <span class="font-bold">{{
                   'shared.pending.changes' | translate
                 }}</span>
@@ -3673,7 +3627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 @if (pendingAdd().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-plus-circle text-green-500"></i>
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.assign' | translate }} ({{
                           pendingAdd().length
@@ -3690,7 +3644,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 @if (pendingRemove().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-minus-circle text-red-500"></i>
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.remove' | translate }} ({{
                           pendingRemove().length
@@ -3711,9 +3665,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 
         @if (!loading() && roles().length === 0) {
           <div class="surface-card p-5 rounded-border shadow-sm text-center">
-            <i
-              class="pi pi-info-circle text-muted-color mb-3 block text-5xl"
-            ></i>
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
             <p class="text-muted-color m-0">
               {{ 'iam.permission.no.roles.for.user' | translate }}
             </p>
@@ -3867,14 +3819,14 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
             this.saving.set(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: UserActionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: UserActionSelectorComponent, isStandalone: true, selector: "flusys-user-action-selector", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: UserActionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: UserActionSelectorComponent, isStandalone: true, selector: "flusys-user-action-selector", usesInheritance: true, ngImport: i0, template: `
     <div class="user-action-selector">
       <div class="surface-card p-4 rounded-border mb-4 shadow-sm">
         <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
           <div>
             <label class="block font-semibold mb-2">
-              <i class="pi pi-user mr-2 text-primary"></i>
+              <ui-icon name="user" class="mr-2 text-primary"></ui-icon>
               {{ 'iam.permission.select.user' | translate }}
             </label>
             <lib-user-select
@@ -3890,10 +3842,10 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
           @if (showBranchSelector()) {
             <div>
               <label class="block font-semibold mb-2">
-                <i class="pi pi-building mr-2 text-primary"></i>
+                <ui-icon name="building" class="mr-2 text-primary"></ui-icon>
                 {{ 'iam.permission.select.branch' | translate }}
               </label>
-              <p-select
+              <f-select
                 [ngModel]="selectedBranchId()"
                 (ngModelChange)="selectedBranchId.set($event)"
                 [options]="filteredBranches()"
@@ -3909,18 +3861,18 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
                 <ng-template #selectedItem let-branch>
                   @if (branch) {
                     <div class="flex items-center gap-2">
-                      <i class="pi pi-building text-primary"></i>
+                      <ui-icon name="building" class="text-primary"></ui-icon>
                       <span class="font-semibold">{{ branch.name }}</span>
                     </div>
                   }
                 </ng-template>
                 <ng-template #item let-branch>
                   <div class="flex items-center gap-2">
-                    <i class="pi pi-building text-muted-color"></i>
+                    <ui-icon name="building" class="text-muted-color"></ui-icon>
                     <span>{{ branch.name }}</span>
                   </div>
                 </ng-template>
-              </p-select>
+              </f-select>
               <small class="text-muted-color block mt-1">
                 {{
                   (filteredBranches().length !== 1
@@ -3937,7 +3889,7 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
       @if (selectedUserId()) {
         @if (loading()) {
           <div class="flex justify-center p-5">
-            <i class="pi pi-spin pi-spinner text-4xl"></i>
+            <ui-icon name="loader-circle" spin class="text-4xl"></ui-icon>
           </div>
         }
 
@@ -3959,36 +3911,36 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
               </div>
               <div class="flex flex-wrap gap-2">
                 <button
-                  pButton
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
                   (click)="selectAll()"
                 >
-                  <span pButtonIcon class="pi pi-check"></span>
+                  <ui-icon pButtonIcon name="check"></ui-icon>
                   <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
                 </button>
                 <button
-                  pButton
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
                   (click)="deselectAll()"
                 >
-                  <span pButtonIcon class="pi pi-times"></span>
+                  <ui-icon pButtonIcon name="times"></ui-icon>
                   <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
                 </button>
                 <button
-                  pButton
+                  fButton
                   *hasPermission="USER_ACTION_PERMISSIONS.ASSIGN"
                   [disabled]="!canSave() || saving()"
                   size="small"
                   (click)="saveChanges()"
                 >
                   @if (saving()) {
-                    <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
                   } @else {
-                    <span pButtonIcon class="pi pi-save"></span>
+                    <ui-icon pButtonIcon name="save"></ui-icon>
                   }
                   <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
                 </button>
@@ -3998,7 +3950,7 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
             @if (invalidActionsCount() > 0) {
               <div class="validation-warning rounded-border p-3 mb-4">
                 <div class="flex items-start gap-2">
-                  <i class="pi pi-exclamation-triangle text-xl"></i>
+                  <ui-icon name="exclamation-triangle" class="text-xl"></ui-icon>
                   <div class="flex-1">
                     <span class="font-semibold"
                       >{{ 'iam.validation.warning.title' | translate }}:</span
@@ -4017,20 +3969,19 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
             }
 
             <div class="overflow-x-auto -mx-4 sm:mx-0">
-              <p-treetable
+              <f-treetable
                 [value]="treeNodes()"
                 dataKey="id"
-                class="p-treetable-sm"
                 [tableStyle]="{ 'min-width': '50rem' }"
               >
                 <ng-template #header>
                   <tr>
                     <th class="w-12">
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="allSelected()"
                         [binary]="true"
                         (ngModelChange)="toggleAll()"
-                        [pTooltip]="'shared.select.deselect.all' | translate"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
                         tooltipPosition="top"
                       />
                     </th>
@@ -4049,27 +4000,24 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
                   @let tooltip = getTooltip(rowData);
                   <tr [class.highlight-warning]="hasUnmet">
                     <td class="w-12">
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="selectionMap()[rowData.id]"
                         [binary]="true"
                         (ngModelChange)="onActionToggle(rowData, $event)"
-                        [pTooltip]="tooltip"
+                        [fTooltip]="tooltip"
                         tooltipPosition="top"
                       />
                     </td>
                     <td>
-                      <p-treetabletoggler [rowNode]="rowNode" />
+                      <f-treetabletoggler [rowNode]="rowNode" />
                       <span class="inline-flex items-center gap-2">
                         {{ rowData.name }}
                         @if (hasUnmet) {
-                          <i
-                            class="pi pi-exclamation-triangle text-orange-500"
-                            [pTooltip]="
+                          <ui-icon name="exclamation-triangle" class="text-orange-500" [fTooltip]="
                               'iam.validation.unmet.prerequisites.tooltip'
                                 | translate
                             "
-                            tooltipPosition="top"
-                          ></i>
+                            tooltipPosition="top"></ui-icon>
                         }
                       </span>
                     </td>
@@ -4077,7 +4025,7 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
                       {{ rowData.code || '-' }}
                     </td>
                     <td>
-                      <p-tag
+                      <f-tag
                         [value]="rowData.actionType"
                         [severity]="
                           rowData.actionType === 'backend' ? 'info' : 'success'
@@ -4093,7 +4041,7 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
                   <tr>
                     <td colspan="5" class="text-center p-4 text-muted-color">
                       @if (loading()) {
-                        <i class="pi pi-spin pi-spinner"></i>
+                        <ui-icon name="loader-circle" spin></ui-icon>
                         {{ 'shared.loading.actions' | translate }}
                       } @else {
                         {{ 'iam.permission.no.actions.available' | translate }}
@@ -4101,14 +4049,14 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
                     </td>
                   </tr>
                 </ng-template>
-              </p-treetable>
+              </f-treetable>
             </div>
           </div>
 
           @if (hasChanges()) {
             <div class="border border-surface rounded-border p-3 mt-4">
               <div class="flex items-center gap-2 mb-3">
-                <i class="pi pi-info-circle text-primary"></i>
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
                 <span class="font-bold">{{
                   'shared.pending.changes' | translate
                 }}</span>
@@ -4117,7 +4065,7 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
                 @if (pendingAdd().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-plus-circle text-green-500"></i>
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.assign' | translate }} ({{
                           pendingAdd().length
@@ -4134,7 +4082,7 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
                 @if (pendingRemove().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-minus-circle text-red-500"></i>
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.remove' | translate }} ({{
                           pendingRemove().length
@@ -4155,9 +4103,7 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
 
         @if (!loading() && actions().length === 0) {
           <div class="surface-card p-5 rounded-border shadow-sm text-center">
-            <i
-              class="pi pi-info-circle text-muted-color mb-3 block text-5xl"
-            ></i>
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
             <p class="text-muted-color m-0">
               {{ 'iam.permission.no.actions.for.user' | translate }}
             </p>
@@ -4165,13 +4111,13 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
         }
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}.validation-warning{background-color:var(--p-yellow-50, #fefce8);border-left:4px solid var(--p-yellow-500, #eab308);color:var(--p-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--p-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--p-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["pButton", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "link", "rounded", "fluid", "variant", "iconOnly", "loading", "severity"] }, { kind: "directive", type: i2.ButtonLabel, selector: "[pButtonLabel]", inputs: ["pButtonLabelPT", "pButtonLabelUnstyled"] }, { kind: "directive", type: i2.ButtonIcon, selector: "[pButtonIcon]", inputs: ["pButtonIconPT", "pButtonUnstyled"] }, { kind: "component", type: i3.Checkbox, selector: "p-checkbox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "multiple", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5.Tag, selector: "p-tag", inputs: ["severity", "value", "icon", "rounded"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i7.TreeTable, selector: "p-treetable, p-tree-table", inputs: ["columns", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "selectionKeys", "collapsedKeys", "showGridlines"], outputs: ["rowsChange", "selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange", "collapsedKeysChange"] }, { kind: "component", type: i7.TreeTableToggler, selector: "p-treetabletoggler, p-treetable-toggler", inputs: ["rowNode"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "component", type: UserSelectComponent, selector: "lib-user-select", inputs: ["showClear", "value"], outputs: ["valueChange", "userSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, styles: [":host{display:block}.validation-warning{background-color:var(--f-yellow-50, #fefce8);border-left:4px solid var(--f-yellow-500, #eab308);color:var(--f-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--f-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--f-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i2.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "rounded", "raised", "fluid", "disabled", "loading", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i2.TagComponent, selector: "f-tag", inputs: ["value", "severity", "icon", "rounded", "color"] }, { kind: "component", type: i2.CheckboxComponent, selector: "f-checkbox", inputs: ["label", "binary", "disabled", "inputId", "invalid", "indeterminate", "touched", "styleClass", "checked"], outputs: ["onChange", "onBlur", "touch", "checkedChange"] }, { kind: "component", type: i2.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "showClear", "loading", "inputId", "invalid", "touched", "styleClass", "editable"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur"] }, { kind: "directive", type: i2.TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay"] }, { kind: "component", type: i2.TreeTableComponent, selector: "f-treetable", inputs: ["value", "loading", "dataKey", "styleClass", "tableStyle", "scrollable"] }, { kind: "component", type: i2.TreeTableTogglerComponent, selector: "f-treetabletoggler", inputs: ["rowNode"] }, { kind: "component", type: i2.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "component", type: UserSelectComponent, selector: "lib-user-select", inputs: ["showClear", "value"], outputs: ["valueChange", "userSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: UserActionSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: UserActionSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'flusys-user-action-selector', imports: [
                         FormsModule,
-                        PrimeModule,
+                        UiModule,
                         HasPermissionDirective,
                         UserSelectComponent,
                         TranslatePipe,
@@ -4181,7 +4127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
           <div>
             <label class="block font-semibold mb-2">
-              <i class="pi pi-user mr-2 text-primary"></i>
+              <ui-icon name="user" class="mr-2 text-primary"></ui-icon>
               {{ 'iam.permission.select.user' | translate }}
             </label>
             <lib-user-select
@@ -4197,10 +4143,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           @if (showBranchSelector()) {
             <div>
               <label class="block font-semibold mb-2">
-                <i class="pi pi-building mr-2 text-primary"></i>
+                <ui-icon name="building" class="mr-2 text-primary"></ui-icon>
                 {{ 'iam.permission.select.branch' | translate }}
               </label>
-              <p-select
+              <f-select
                 [ngModel]="selectedBranchId()"
                 (ngModelChange)="selectedBranchId.set($event)"
                 [options]="filteredBranches()"
@@ -4216,18 +4162,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 <ng-template #selectedItem let-branch>
                   @if (branch) {
                     <div class="flex items-center gap-2">
-                      <i class="pi pi-building text-primary"></i>
+                      <ui-icon name="building" class="text-primary"></ui-icon>
                       <span class="font-semibold">{{ branch.name }}</span>
                     </div>
                   }
                 </ng-template>
                 <ng-template #item let-branch>
                   <div class="flex items-center gap-2">
-                    <i class="pi pi-building text-muted-color"></i>
+                    <ui-icon name="building" class="text-muted-color"></ui-icon>
                     <span>{{ branch.name }}</span>
                   </div>
                 </ng-template>
-              </p-select>
+              </f-select>
               <small class="text-muted-color block mt-1">
                 {{
                   (filteredBranches().length !== 1
@@ -4244,7 +4190,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       @if (selectedUserId()) {
         @if (loading()) {
           <div class="flex justify-center p-5">
-            <i class="pi pi-spin pi-spinner text-4xl"></i>
+            <ui-icon name="loader-circle" spin class="text-4xl"></ui-icon>
           </div>
         }
 
@@ -4266,36 +4212,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
               </div>
               <div class="flex flex-wrap gap-2">
                 <button
-                  pButton
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
                   (click)="selectAll()"
                 >
-                  <span pButtonIcon class="pi pi-check"></span>
+                  <ui-icon pButtonIcon name="check"></ui-icon>
                   <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
                 </button>
                 <button
-                  pButton
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
                   (click)="deselectAll()"
                 >
-                  <span pButtonIcon class="pi pi-times"></span>
+                  <ui-icon pButtonIcon name="times"></ui-icon>
                   <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
                 </button>
                 <button
-                  pButton
+                  fButton
                   *hasPermission="USER_ACTION_PERMISSIONS.ASSIGN"
                   [disabled]="!canSave() || saving()"
                   size="small"
                   (click)="saveChanges()"
                 >
                   @if (saving()) {
-                    <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
                   } @else {
-                    <span pButtonIcon class="pi pi-save"></span>
+                    <ui-icon pButtonIcon name="save"></ui-icon>
                   }
                   <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
                 </button>
@@ -4305,7 +4251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             @if (invalidActionsCount() > 0) {
               <div class="validation-warning rounded-border p-3 mb-4">
                 <div class="flex items-start gap-2">
-                  <i class="pi pi-exclamation-triangle text-xl"></i>
+                  <ui-icon name="exclamation-triangle" class="text-xl"></ui-icon>
                   <div class="flex-1">
                     <span class="font-semibold"
                       >{{ 'iam.validation.warning.title' | translate }}:</span
@@ -4324,20 +4270,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             }
 
             <div class="overflow-x-auto -mx-4 sm:mx-0">
-              <p-treetable
+              <f-treetable
                 [value]="treeNodes()"
                 dataKey="id"
-                class="p-treetable-sm"
                 [tableStyle]="{ 'min-width': '50rem' }"
               >
                 <ng-template #header>
                   <tr>
                     <th class="w-12">
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="allSelected()"
                         [binary]="true"
                         (ngModelChange)="toggleAll()"
-                        [pTooltip]="'shared.select.deselect.all' | translate"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
                         tooltipPosition="top"
                       />
                     </th>
@@ -4356,27 +4301,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                   @let tooltip = getTooltip(rowData);
                   <tr [class.highlight-warning]="hasUnmet">
                     <td class="w-12">
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="selectionMap()[rowData.id]"
                         [binary]="true"
                         (ngModelChange)="onActionToggle(rowData, $event)"
-                        [pTooltip]="tooltip"
+                        [fTooltip]="tooltip"
                         tooltipPosition="top"
                       />
                     </td>
                     <td>
-                      <p-treetabletoggler [rowNode]="rowNode" />
+                      <f-treetabletoggler [rowNode]="rowNode" />
                       <span class="inline-flex items-center gap-2">
                         {{ rowData.name }}
                         @if (hasUnmet) {
-                          <i
-                            class="pi pi-exclamation-triangle text-orange-500"
-                            [pTooltip]="
+                          <ui-icon name="exclamation-triangle" class="text-orange-500" [fTooltip]="
                               'iam.validation.unmet.prerequisites.tooltip'
                                 | translate
                             "
-                            tooltipPosition="top"
-                          ></i>
+                            tooltipPosition="top"></ui-icon>
                         }
                       </span>
                     </td>
@@ -4384,7 +4326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                       {{ rowData.code || '-' }}
                     </td>
                     <td>
-                      <p-tag
+                      <f-tag
                         [value]="rowData.actionType"
                         [severity]="
                           rowData.actionType === 'backend' ? 'info' : 'success'
@@ -4400,7 +4342,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                   <tr>
                     <td colspan="5" class="text-center p-4 text-muted-color">
                       @if (loading()) {
-                        <i class="pi pi-spin pi-spinner"></i>
+                        <ui-icon name="loader-circle" spin></ui-icon>
                         {{ 'shared.loading.actions' | translate }}
                       } @else {
                         {{ 'iam.permission.no.actions.available' | translate }}
@@ -4408,14 +4350,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     </td>
                   </tr>
                 </ng-template>
-              </p-treetable>
+              </f-treetable>
             </div>
           </div>
 
           @if (hasChanges()) {
             <div class="border border-surface rounded-border p-3 mt-4">
               <div class="flex items-center gap-2 mb-3">
-                <i class="pi pi-info-circle text-primary"></i>
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
                 <span class="font-bold">{{
                   'shared.pending.changes' | translate
                 }}</span>
@@ -4424,7 +4366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 @if (pendingAdd().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-plus-circle text-green-500"></i>
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.assign' | translate }} ({{
                           pendingAdd().length
@@ -4441,7 +4383,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 @if (pendingRemove().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-minus-circle text-red-500"></i>
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.remove' | translate }} ({{
                           pendingRemove().length
@@ -4462,9 +4404,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 
         @if (!loading() && actions().length === 0) {
           <div class="surface-card p-5 rounded-border shadow-sm text-center">
-            <i
-              class="pi pi-info-circle text-muted-color mb-3 block text-5xl"
-            ></i>
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
             <p class="text-muted-color m-0">
               {{ 'iam.permission.no.actions.for.user' | translate }}
             </p>
@@ -4472,7 +4412,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }
       }
     </div>
-  `, styles: [":host{display:block}.validation-warning{background-color:var(--p-yellow-50, #fefce8);border-left:4px solid var(--p-yellow-500, #eab308);color:var(--p-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--p-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--p-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"] }]
+  `, styles: [":host{display:block}.validation-warning{background-color:var(--f-yellow-50, #fefce8);border-left:4px solid var(--f-yellow-500, #eab308);color:var(--f-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--f-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--f-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"] }]
         }], ctorParameters: () => [] });
 
 // Logic Builder Component
@@ -4522,10 +4462,10 @@ class ProfilePermissionProviderAdapter {
             })),
         })));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ProfilePermissionProviderAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ProfilePermissionProviderAdapter });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProfilePermissionProviderAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProfilePermissionProviderAdapter });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ProfilePermissionProviderAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProfilePermissionProviderAdapter, decorators: [{
             type: Injectable
         }] });
 
@@ -4548,7 +4488,7 @@ const IAM_ROUTES = [
     {
         path: '',
         resolve: { translations: resolveTranslationModule({ modules: ['iam'], fallbackMessages: { ...IAM_MESSAGES, ...SHARED_MESSAGES } }) },
-        loadComponent: () => import('./flusys-ng-iam-iam-container.component-DEuc_l2i.mjs').then((m) => m.IamContainerComponent),
+        loadComponent: () => import('./flusys-ng-iam-iam-container.component-D0m8u6nu.mjs').then((m) => m.IamContainerComponent),
         children: [
             // Actions Management
             {
@@ -4557,15 +4497,15 @@ const IAM_ROUTES = [
                 children: [
                     {
                         path: '',
-                        loadComponent: () => import('./flusys-ng-iam-action-list-page.component-BQvx2btD.mjs').then((m) => m.ActionListPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-action-list-page.component-B1hUE4lD.mjs').then((m) => m.ActionListPageComponent),
                     },
                     {
                         path: 'new',
-                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-BGEON5_n.mjs').then((m) => m.ActionFormPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-DTJT8Dc-.mjs').then((m) => m.ActionFormPageComponent),
                     },
                     {
                         path: ':id',
-                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-BGEON5_n.mjs').then((m) => m.ActionFormPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-DTJT8Dc-.mjs').then((m) => m.ActionFormPageComponent),
                     },
                 ],
             },
@@ -4576,15 +4516,15 @@ const IAM_ROUTES = [
                 children: [
                     {
                         path: '',
-                        loadComponent: () => import('./flusys-ng-iam-role-list-page.component-DVto37LL.mjs').then((m) => m.RoleListPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-role-list-page.component-BcS9_ysT.mjs').then((m) => m.RoleListPageComponent),
                     },
                     {
                         path: 'new',
-                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-CR1tl17E.mjs').then((m) => m.RoleFormPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-DrUQ0taO.mjs').then((m) => m.RoleFormPageComponent),
                     },
                     {
                         path: ':id',
-                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-CR1tl17E.mjs').then((m) => m.RoleFormPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-DrUQ0taO.mjs').then((m) => m.RoleFormPageComponent),
                     },
                 ],
             },
@@ -4599,7 +4539,7 @@ const IAM_ROUTES = [
                         COMPANY_ACTION_PERMISSIONS.READ,
                     ]),
                 ],
-                loadComponent: () => import('./flusys-ng-iam-permission-page.component-DV8qtLcu.mjs').then((m) => m.PermissionPageComponent),
+                loadComponent: () => import('./flusys-ng-iam-permission-page.component-rcijgKmE.mjs').then((m) => m.PermissionPageComponent),
             },
             // Default redirect to actions
             {
@@ -4618,4 +4558,4 @@ const IAM_ROUTES = [
  */
 
 export { ActionApiService as A, CompanyActionSelectorComponent as C, IAM_MESSAGES as I, LogicBuilderComponent as L, MAX_DROPDOWN_ITEMS as M, PermissionApiService as P, RoleApiService as R, UserRoleSelectorComponent as U, ActionType as a, RoleActionSelectorComponent as b, convertActionToTreeNode as c, UserActionSelectorComponent as d, ActionPermissionLogicService as e, IAM_ROUTES as f, MyPermissionsApiService as g, PermissionStateService as h, ProfilePermissionProviderAdapter as i, provideIamProviders as p };
-//# sourceMappingURL=flusys-ng-iam-flusys-ng-iam-C9rdGS64.mjs.map
+//# sourceMappingURL=flusys-ng-iam-flusys-ng-iam-DzIO0zsO.mjs.map