@flusys/ng-iam 1.0.0-rc → 1.1.1-beta

package/fesm2022/{flusys-ng-iam-flusys-ng-iam-BPIpfrjN.mjs → flusys-ng-iam-flusys-ng-iam-DISrddPh.mjs}

@@ -1,8 +1,9 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, signal, input, output, computed, effect, ChangeDetectionStrategy, Component, DestroyRef } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { ApiResourceService, PermissionValidatorService, AngularModule, PrimeModule, ROLE_ACTION_PERMISSIONS, HasPermissionDirective, COMPANY_ACTION_PERMISSIONS, COMPANY_API_PROVIDER, USER_ROLE_PERMISSIONS, USER_PERMISSION_PROVIDER, UserSelectComponent, USER_ACTION_PERMISSIONS, PROFILE_PERMISSION_PROVIDER } from '@flusys/ng-shared';
+import { inject, Injectable, signal, input, output, computed, ChangeDetectionStrategy, Component, effect } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { ApiResourceService, PermissionValidatorService, AngularModule, PrimeModule, COMPANY_API_PROVIDER, USER_PERMISSION_PROVIDER, UserSelectComponent, PROFILE_PERMISSION_PROVIDER } from '@flusys/ng-shared';
 import { APP_CONFIG, BaseApiService, isCompanyFeatureEnabled } from '@flusys/ng-core';
+import * as i2$1 from 'primeng/api';
 import { ConfirmationService, MessageService } from 'primeng/api';
 import { of, firstValueFrom, map as map$1 } from 'rxjs';
 import { tap, catchError, map } from 'rxjs/operators';
@@ -11,11 +12,12 @@ 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 { ButtonModule } from 'primeng/button';
+import * as i7 from 'primeng/tooltip';
+import * as i4 from 'primeng/checkbox';
+import * as i5 from 'primeng/select';
+import * as i6 from 'primeng/tag';
+import * as i8 from 'primeng/treetable';
 import { LAYOUT_AUTH_STATE } from '@flusys/ng-layout';
 import * as i5$1 from 'primeng/table';
 
@@ -81,11 +83,11 @@ class ActionApiService extends ApiResourceService {
     }
     /**
      * Get actions for permission assignment
-     * POST /iam/actions/tree-for-permission
+     * GET /iam/actions/tree-for-permission
      * Returns actions filtered by company whitelist if enabled
      */
     getActionsForPermission() {
-        return this.http.post(`${this.appConfig.apiBaseUrl}/iam/actions/tree-for-permission`, {});
+        return this.http.get(`${this.appConfig.apiBaseUrl}/iam/actions/tree-for-permission`);
     }
     /**
      * Get actions in hierarchical tree structure
@@ -833,10 +835,14 @@ class PermissionApiService extends BaseApiService {
     }
     /**
      * Get user's direct action permissions
-     * POST /iam/permissions/get-user-actions
+     * GET /permissions/user-actions/:userId
      */
     getUserActions(userId, query) {
-        return this.http.post(this.getUrl('permissions/get-user-actions'), { userId, branchId: query?.branchId });
+        let params = new HttpParams();
+        if (query?.branchId) {
+            params = params.set('branchId', query.branchId);
+        }
+        return this.http.get(this.getUrl(`permissions/user-actions/${userId}`), { params });
     }
     // =============================================================================
     // User → Role (Role Assignments)
@@ -850,10 +856,14 @@ class PermissionApiService extends BaseApiService {
     }
     /**
      * Get user's role assignments
-     * POST /iam/permissions/get-user-roles
+     * GET /permissions/user-roles/:userId
      */
     getUserRoles(userId, query) {
-        return this.http.post(this.getUrl('permissions/get-user-roles'), { userId, branchId: query?.branchId });
+        let params = new HttpParams();
+        if (query?.branchId) {
+            params = params.set('branchId', query.branchId);
+        }
+        return this.http.get(this.getUrl(`permissions/user-roles/${userId}`), { params });
     }
     // =============================================================================
     // Role → Action (Role Permissions)
@@ -867,10 +877,10 @@ class PermissionApiService extends BaseApiService {
     }
     /**
      * Get role's action permissions
-     * POST /iam/permissions/get-role-actions
+     * GET /permissions/role-actions/:roleId
      */
     getRoleActions(roleId, query) {
-        return this.http.post(this.getUrl('permissions/get-role-actions'), { roleId });
+        return this.http.get(this.getUrl(`permissions/role-actions/${roleId}`));
     }
     // =============================================================================
     // Company → Action (Company Whitelisting)
@@ -884,10 +894,10 @@ class PermissionApiService extends BaseApiService {
     }
     /**
      * Get company's whitelisted actions
-     * POST /iam/permissions/get-company-actions
+     * GET /permissions/company-actions/:companyId
      */
     getCompanyActions(companyId) {
-        return this.http.post(this.getUrl('permissions/get-company-actions'), { companyId });
+        return this.http.get(this.getUrl(`permissions/company-actions/${companyId}`));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PermissionApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PermissionApiService, providedIn: 'root' });
@@ -1027,85 +1037,77 @@ class LogicBuilderComponent {
     actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : []));
     logicChange = output();
     availableActions = computed(() => this.actions(), ...(ngDevMode ? [{ debugName: "availableActions" }] : []));
-    /** Internal builder tree state (private writable + public readonly pattern) */
-    _builderTree = signal(null, ...(ngDevMode ? [{ debugName: "_builderTree" }] : []));
-    builderLogic = this._builderTree.asReadonly();
-    constructor() {
-        // Sync builderTree with logic input changes
-        effect(() => {
-            const logic = this.logic();
-            if (!logic) {
-                this._builderTree.set(null);
-            }
-            else if (!this._builderTree()) {
-                this._builderTree.set(toBuilderNode(logic));
-            }
-        }, { allowSignalWrites: true });
-    }
+    builderTree = null;
+    builderLogic = computed(() => {
+        const logic = this.logic();
+        if (!logic) {
+            this.builderTree = null;
+            return null;
+        }
+        if (!this.builderTree) {
+            this.builderTree = toBuilderNode(logic);
+        }
+        return this.builderTree;
+    }, ...(ngDevMode ? [{ debugName: "builderLogic" }] : []));
     initializeLogic() {
-        this._builderTree.set({
+        this.builderTree = {
             id: crypto.randomUUID(),
             type: 'group',
             operator: 'AND',
             children: [],
-        });
+        };
         this.emitChange();
     }
     clearLogic() {
-        this._builderTree.set(null);
+        this.builderTree = null;
         this.logicChange.emit(null);
     }
     toggleOperator(nodeId) {
-        const tree = this._builderTree();
-        if (!tree)
+        if (!this.builderTree)
             return;
-        this._builderTree.set(this.updateNodeInTree(tree, nodeId, (node) => ({
+        this.builderTree = this.updateNodeInTree(this.builderTree, nodeId, (node) => ({
             ...node,
             operator: node.operator === 'AND' ? 'OR' : 'AND',
-        })));
+        }));
         this.emitChange();
     }
     addChildNode(parentId, type) {
-        const tree = this._builderTree();
-        if (!tree)
+        if (!this.builderTree)
             return;
         const newNode = type === 'group'
             ? { id: crypto.randomUUID(), type: 'group', operator: 'AND', children: [] }
             : { id: crypto.randomUUID(), type: 'action', actionId: '' };
-        this._builderTree.set(this.updateNodeInTree(tree, parentId, (node) => ({
+        this.builderTree = this.updateNodeInTree(this.builderTree, parentId, (node) => ({
             ...node,
             children: [...(node.children || []), newNode],
-        })));
+        }));
         this.emitChange();
     }
     removeNode(nodeId) {
-        const tree = this._builderTree();
-        if (!tree)
+        if (!this.builderTree)
             return;
-        if (tree.id === nodeId) {
+        if (this.builderTree.id === nodeId) {
             this.clearLogic();
             return;
         }
-        this._builderTree.set(this.removeNodeFromTree(tree, nodeId));
+        this.builderTree = this.removeNodeFromTree(this.builderTree, nodeId);
         this.emitChange();
     }
     updateActionId(nodeId, actionId) {
-        const tree = this._builderTree();
-        if (!tree)
+        if (!this.builderTree)
             return;
-        this._builderTree.set(this.updateNodeInTree(tree, nodeId, (node) => ({
+        this.builderTree = this.updateNodeInTree(this.builderTree, nodeId, (node) => ({
             ...node,
             actionId,
-        })));
+        }));
         this.emitChange();
     }
     emitChange() {
-        const tree = this._builderTree();
-        if (!tree) {
+        if (!this.builderTree) {
             this.logicChange.emit(null);
             return;
         }
-        this.logicChange.emit(toLogicNode(tree));
+        this.logicChange.emit(toLogicNode(this.builderTree));
     }
     updateNodeInTree(node, targetId, updater) {
         if (node.id === targetId)
@@ -1133,7 +1135,7 @@ class LogicBuilderComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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">Permission Logic</h4>
+        <h4 class="text-sm font-semibold">Permission Logic</h4>
         @if (!builderLogic()) {
           <p-button
             label="Add Logic"
@@ -1152,13 +1154,13 @@ class LogicBuilderComponent {
       </div>
 
       @if (builderLogic()) {
-        <div class="border border-surface rounded p-3 bg-surface-50">
+        <div class="border rounded p-3 bg-surface-50">
           <div class="mb-3 text-sm text-muted-color">
             Define permission requirements using AND/OR logic with actions
           </div>
 
           <!-- Root Node -->
-          <div class="text-sm bg-surface-0 rounded border border-surface">
+          <div class="logic-tree bg-surface-0 rounded border">
             <ng-container *ngTemplateOutlet="nodeTemplate; context: { $implicit: builderLogic()!, depth: 0 }"></ng-container>
           </div>
         </div>
@@ -1167,11 +1169,11 @@ class LogicBuilderComponent {
 
     <!-- Recursive Node Template -->
     <ng-template #nodeTemplate let-node let-depth="depth">
-      <div class="p-3 border-b border-surface" [ngClass]="depth % 2 === 0 ? 'bg-surface-0' : 'bg-surface-50'">
-        <div class="flex items-center gap-3 mb-2">
+      <div class="node" [class]="depth % 2 === 0 ? 'bg-surface-0' : 'bg-surface-50'">
+        <div class="node-header">
           <span class="node-type" [ngClass]="node.type">{{ node.type.toUpperCase() }}</span>
 
-          <div class="flex-1 flex items-center gap-2">
+          <div class="node-content">
             @if (node.type === 'group') {
               <!-- Group: show operator toggle -->
               <span
@@ -1187,7 +1189,7 @@ class LogicBuilderComponent {
             @if (node.type === 'action') {
               <!-- Action: show action selector -->
               <select
-                class="action-select flex-1 p-2 border border-surface rounded text-sm"
+                class="flex-1"
                 [ngModel]="node.actionId"
                 (ngModelChange)="updateActionId(node.id, $event)">
                 <option [value]="null">Select Action... ({{ availableActions().length }} available)</option>
@@ -1198,7 +1200,7 @@ class LogicBuilderComponent {
             }
           </div>
 
-          <div class="flex gap-1">
+          <div class="node-actions">
             <p-button
               icon="pi pi-trash"
               [text]="true"
@@ -1211,7 +1213,7 @@ class LogicBuilderComponent {
 
         <!-- Children for group nodes -->
         @if (node.type === 'group' && node.children && node.children.length > 0) {
-          <div class="ml-5 mt-2 pl-3 border-l-2 border-surface">
+          <div class="node-children">
             @for (child of node.children; track child.id) {
               <ng-container *ngTemplateOutlet="nodeTemplate; context: { $implicit: child, depth: depth + 1 }"></ng-container>
             }
@@ -1220,9 +1222,9 @@ class LogicBuilderComponent {
 
         <!-- Add child buttons for group nodes -->
         @if (node.type === 'group') {
-          <div class="mt-3 p-3 bg-surface-50 rounded border border-dashed border-surface">
+          <div class="add-child-section">
             <div class="text-xs font-semibold text-muted-color mb-2">Add Condition:</div>
-            <div class="flex gap-2 flex-wrap">
+            <div class="add-child-buttons">
               <p-button
                 label="Group"
                 icon="pi pi-sitemap"
@@ -1241,14 +1243,14 @@ 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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])[formControlName],select:not([multiple])[formControl],select:not([multiple])[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: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { 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", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}.logic-tree{font-size:.875rem}.node{padding:.75rem;border-bottom:1px solid var(--p-surface-200, #e5e7eb)}.node:last-child{border-bottom:none}.node-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.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)}.node-content{flex:1;display:flex;align-items:center;gap:.5rem}.node-actions{display:flex;gap:.25rem}.node-children{margin-left:1.5rem;margin-top:.5rem;padding-left:1rem;border-left:2px solid var(--p-surface-200, #e5e7eb)}.operator-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:9999px;font-weight:600;font-size:.75rem;cursor:pointer;transition:all .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)}.operator-badge:hover{opacity:.8}select{padding:.375rem .75rem;border:1px solid var(--p-surface-300, #d1d5db);border-radius:.375rem;font-size:.875rem;background-color:var(--p-surface-0, white);color:var(--p-text-color, inherit)}select:focus{outline:none;border-color:var(--p-primary-color, #3b82f6);box-shadow:0 0 0 3px rgba(var(--p-primary-color-rgb, 59, 130, 246),.1)}.add-child-section{margin-top:.75rem;padding:.75rem;background-color:var(--p-surface-50, #f9fafb);border-radius:.375rem;border:1px dashed var(--p-surface-300, #d1d5db)}.add-child-buttons{display:flex;gap:.5rem;flex-wrap:wrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { 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])[formControlName],select:not([multiple])[formControl],select:not([multiple])[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: AngularModule }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: ButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LogicBuilderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-logic-builder', standalone: true, imports: [AngularModule, PrimeModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'lib-logic-builder', standalone: true, imports: [CommonModule, FormsModule, AngularModule, PrimeModule, ButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div class="logic-builder">
       <div class="flex justify-between items-center mb-3">
-        <h4 class="text-sm font-semibold m-0">Permission Logic</h4>
+        <h4 class="text-sm font-semibold">Permission Logic</h4>
         @if (!builderLogic()) {
           <p-button
             label="Add Logic"
@@ -1267,13 +1269,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
       </div>
 
       @if (builderLogic()) {
-        <div class="border border-surface rounded p-3 bg-surface-50">
+        <div class="border rounded p-3 bg-surface-50">
           <div class="mb-3 text-sm text-muted-color">
             Define permission requirements using AND/OR logic with actions
           </div>
 
           <!-- Root Node -->
-          <div class="text-sm bg-surface-0 rounded border border-surface">
+          <div class="logic-tree bg-surface-0 rounded border">
             <ng-container *ngTemplateOutlet="nodeTemplate; context: { $implicit: builderLogic()!, depth: 0 }"></ng-container>
           </div>
         </div>
@@ -1282,11 +1284,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 
     <!-- Recursive Node Template -->
     <ng-template #nodeTemplate let-node let-depth="depth">
-      <div class="p-3 border-b border-surface" [ngClass]="depth % 2 === 0 ? 'bg-surface-0' : 'bg-surface-50'">
-        <div class="flex items-center gap-3 mb-2">
+      <div class="node" [class]="depth % 2 === 0 ? 'bg-surface-0' : 'bg-surface-50'">
+        <div class="node-header">
           <span class="node-type" [ngClass]="node.type">{{ node.type.toUpperCase() }}</span>
 
-          <div class="flex-1 flex items-center gap-2">
+          <div class="node-content">
             @if (node.type === 'group') {
               <!-- Group: show operator toggle -->
               <span
@@ -1302,7 +1304,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             @if (node.type === 'action') {
               <!-- Action: show action selector -->
               <select
-                class="action-select flex-1 p-2 border border-surface rounded text-sm"
+                class="flex-1"
                 [ngModel]="node.actionId"
                 (ngModelChange)="updateActionId(node.id, $event)">
                 <option [value]="null">Select Action... ({{ availableActions().length }} available)</option>
@@ -1313,7 +1315,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }
           </div>
 
-          <div class="flex gap-1">
+          <div class="node-actions">
             <p-button
               icon="pi pi-trash"
               [text]="true"
@@ -1326,7 +1328,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 
         <!-- Children for group nodes -->
         @if (node.type === 'group' && node.children && node.children.length > 0) {
-          <div class="ml-5 mt-2 pl-3 border-l-2 border-surface">
+          <div class="node-children">
             @for (child of node.children; track child.id) {
               <ng-container *ngTemplateOutlet="nodeTemplate; context: { $implicit: child, depth: depth + 1 }"></ng-container>
             }
@@ -1335,9 +1337,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 
         <!-- Add child buttons for group nodes -->
         @if (node.type === 'group') {
-          <div class="mt-3 p-3 bg-surface-50 rounded border border-dashed border-surface">
+          <div class="add-child-section">
             <div class="text-xs font-semibold text-muted-color mb-2">Add Condition:</div>
-            <div class="flex gap-2 flex-wrap">
+            <div class="add-child-buttons">
               <p-button
                 label="Group"
                 icon="pi pi-sitemap"
@@ -1356,8 +1358,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", 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"] }]
-        }], 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"] }] } });
+  `, styles: [":host{display:block}.logic-tree{font-size:.875rem}.node{padding:.75rem;border-bottom:1px solid var(--p-surface-200, #e5e7eb)}.node:last-child{border-bottom:none}.node-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.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)}.node-content{flex:1;display:flex;align-items:center;gap:.5rem}.node-actions{display:flex;gap:.25rem}.node-children{margin-left:1.5rem;margin-top:.5rem;padding-left:1rem;border-left:2px solid var(--p-surface-200, #e5e7eb)}.operator-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:9999px;font-weight:600;font-size:.75rem;cursor:pointer;transition:all .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)}.operator-badge:hover{opacity:.8}select{padding:.375rem .75rem;border:1px solid var(--p-surface-300, #d1d5db);border-radius:.375rem;font-size:.875rem;background-color:var(--p-surface-0, white);color:var(--p-text-color, inherit)}select:focus{outline:none;border-color:var(--p-primary-color, #3b82f6);box-shadow:0 0 0 3px rgba(var(--p-primary-color-rgb, 59, 130, 246),.1)}.add-child-section{margin-top:.75rem;padding:.75rem;background-color:var(--p-surface-50, #f9fafb);border-radius:.375rem;border:1px dashed var(--p-surface-300, #d1d5db)}.add-child-buttons{display:flex;gap:.5rem;flex-wrap:wrap}\n"] }]
+        }], 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"] }] } });
 
 /**
  * Tree Utility Functions
@@ -1554,10 +1556,7 @@ function convertActionToTreeNode(actions) {
  * ```
  */
 class RoleActionSelectorComponent {
-    // Permission constants for template
-    ROLE_ACTION_PERMISSIONS = ROLE_ACTION_PERMISSIONS;
     // Dependencies
-    destroyRef = inject(DestroyRef);
     roleApi = inject(RoleApiService);
     actionApi = inject(ActionApiService);
     permissionApi = inject(PermissionApiService);
@@ -1638,10 +1637,6 @@ class RoleActionSelectorComponent {
     loadDataAbortController = null;
     constructor() {
         this.loadRoles();
-        // Cleanup on destroy
-        this.destroyRef.onDestroy(() => {
-            this.loadDataAbortController?.abort();
-        });
         // Effect: Load data when role selection changes
         effect(() => {
             const roleId = this.selectedRoleId();
@@ -1651,7 +1646,11 @@ class RoleActionSelectorComponent {
                 this.loadDataAbortController = new AbortController();
                 this.onRoleChange(this.loadDataAbortController.signal).catch((err) => {
                     if (err.name !== 'AbortError') {
-                        // Error toast handled by global interceptor
+                        this.messageService.add({
+                            severity: 'error',
+                            summary: 'Error',
+                            detail: 'Failed to load role permissions. Please refresh.',
+                        });
                         this.loading.set(false);
                     }
                 });
@@ -1661,6 +1660,9 @@ class RoleActionSelectorComponent {
             }
         });
     }
+    ngOnDestroy() {
+        this.loadDataAbortController?.abort();
+    }
     /**
      * Load roles from API
      */
@@ -1672,7 +1674,11 @@ class RoleActionSelectorComponent {
             this.roles.set(response?.data ?? []);
         }
         catch {
-            // Error toast handled by global interceptor
+            this.messageService.add({
+                severity: 'error',
+                summary: 'Error',
+                detail: 'Failed to load roles',
+            });
         }
     }
     /**
@@ -1830,8 +1836,13 @@ class RoleActionSelectorComponent {
             // Update baseline
             this._initialSelection.set({ ...this.selectionMap() });
         }
-        catch {
-            // Error toast handled by global interceptor
+        catch (err) {
+            const error = err;
+            this.messageService.add({
+                severity: 'error',
+                summary: 'Error',
+                detail: error?.error?.message || 'Failed to update role permissions',
+            });
         }
         finally {
             this.saving.set(false);
@@ -1851,12 +1862,11 @@ class RoleActionSelectorComponent {
     <div class="role-action-selector">
       <!-- Role Selector -->
       <div class="mb-4">
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          <div>
+        <div class="grid">
+          <div class="col-12 md:col-6 lg:col-4">
             <label class="block font-semibold mb-2">Select Role</label>
             <p-select
-              [ngModel]="selectedRoleId()"
-              (ngModelChange)="selectedRoleId.set($event)"
+              [(ngModel)]="selectedRoleId"
               [options]="roles()"
               optionLabel="name"
               optionValue="id"
@@ -1873,21 +1883,24 @@ class RoleActionSelectorComponent {
         <!-- Loading State -->
         @if (loading()) {
           <div
-            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
+            class="surface-card p-5 border-round shadow-1 flex justify-content-center"
           >
-            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
+            <i
+              class="pi pi-spin pi-spinner text-primary"
+              style="font-size: 3rem"
+            ></i>
           </div>
         }
 
         <!-- Action List -->
         @if (!loading() && actions().length > 0) {
-          <div class="surface-card p-4 rounded-border shadow-sm">
+          <div class="surface-card p-4 border-round shadow-1">
             <div
-              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
+              class="flex flex-column md:flex-row justify-content-between align-items-start md:align-items-center gap-3 mb-4"
             >
               <div>
                 <h5 class="m-0 mb-1">Action Permissions</h5>
-                <p class="text-sm text-muted-color m-0">
+                <p class="text-sm text-color-secondary m-0">
                   {{ actions().length }} actions available
                 </p>
               </div>
@@ -1909,7 +1922,6 @@ class RoleActionSelectorComponent {
                   (onClick)="deselectAll()"
                 />
                 <p-button
-                  *hasPermission="ROLE_ACTION_PERMISSIONS.ASSIGN"
                   label="Save Changes"
                   icon="pi pi-save"
                   [disabled]="!canSave()"
@@ -1923,12 +1935,14 @@ class RoleActionSelectorComponent {
 
             <!-- Validation Warning -->
             @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>
-                  <div class="flex-1">
-                    <span class="font-semibold">Validation Warning:</span>
-                    <p class="text-sm mt-1 mb-0">
+              <div class="bg-warn/10 border-l-4 border-warn p-4 mb-4">
+                <div class="flex items-center">
+                  <i
+                    class="pi pi-exclamation-triangle text-warn mr-2"
+                  ></i>
+                  <div>
+                    <strong class="text-warn">Validation Warning:</strong>
+                    <p class="text-sm text-warn mt-1">
                       {{ invalidActionsCount() }} selected
                       action{{ invalidActionsCount() > 1 ? 's have' : ' has' }}
                       unmet prerequisites. Fix before saving or use auto-fix on
@@ -1940,33 +1954,33 @@ class RoleActionSelectorComponent {
             }
 
             <!-- Action Tree Table -->
-            <div class="overflow-x-auto -mx-4 sm:mx-0">
-              <p-treeTable
-                [value]="treeNodes()"
-                dataKey="id"
-                styleClass="p-treetable-sm"
-                [tableStyle]="{ 'min-width': '50rem' }"
-              >
-                <ng-template #header>
-                  <tr>
-                    <th class="w-12">
-                      <p-checkbox
-                        [ngModel]="allSelected()"
-                        [binary]="true"
-                        (ngModelChange)="toggleAll()"
-                        pTooltip="Select/Deselect All"
-                        tooltipPosition="top"
-                      />
-                    </th>
-                    <th>Name</th>
-                    <th class="hidden md:table-cell">Code</th>
-                    <th>Type</th>
-                    <th class="hidden lg:table-cell">Requirements</th>
-                  </tr>
-                </ng-template>
-              <ng-template #body let-rowNode let-rowData="rowData">
-                <tr [class.highlight-warning]="hasUnmetPrerequisites(rowData)">
-                  <td class="w-12">
+            <p-treeTable
+              [value]="treeNodes()"
+              [scrollable]="true"
+              scrollHeight="flex"
+              dataKey="id"
+              styleClass="p-treetable-sm"
+            >
+              <ng-template pTemplate="header">
+                <tr>
+                  <th style="width: 3rem">
+                    <p-checkbox
+                      [ngModel]="allSelected()"
+                      [binary]="true"
+                      (ngModelChange)="toggleAll()"
+                      pTooltip="Select/Deselect All"
+                      tooltipPosition="top"
+                    />
+                  </th>
+                  <th>Name</th>
+                  <th>Code</th>
+                  <th>Type</th>
+                  <th>Requirements</th>
+                </tr>
+              </ng-template>
+              <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
+                <tr [class.bg-danger/10]="hasUnmetPrerequisites(rowData)">
+                  <td style="width: 3rem">
                     <p-checkbox
                       [ngModel]="selectionMap()[rowData.id]"
                       [binary]="true"
@@ -1977,18 +1991,18 @@ class RoleActionSelectorComponent {
                   </td>
                   <td>
                     <p-treeTableToggler [rowNode]="rowNode" />
-                    <span class="inline-flex items-center gap-2">
+                    <span class="inline-flex align-items-center gap-2">
                       {{ rowData.name }}
                       @if (hasUnmetPrerequisites(rowData)) {
                         <i
-                          class="pi pi-exclamation-triangle text-orange-500"
+                          class="pi pi-exclamation-triangle text-warn"
                           pTooltip="This action has unmet prerequisites and will fail validation on save"
                           tooltipPosition="top"
                         ></i>
                       }
                     </span>
                   </td>
-                  <td class="hidden md:table-cell">{{ rowData.code || '-' }}</td>
+                  <td>{{ rowData.code || '-' }}</td>
                   <td>
                     <p-tag
                       [value]="rowData.actionType"
@@ -1997,41 +2011,42 @@ class RoleActionSelectorComponent {
                       "
                     />
                   </td>
-                  <td class="hidden lg:table-cell">
+                  <td>
                     @if (rowData.permissionLogic) {
-                      <span class="text-sm text-muted-color">Has prerequisites</span>
+                      <span class="text-sm text-muted">Has prerequisites</span>
                     } @else {
-                      <span class="text-muted-color">-</span>
+                      <span class="text-muted">-</span>
                     }
                   </td>
                 </tr>
               </ng-template>
-              <ng-template #emptymessage>
+              <ng-template pTemplate="emptymessage">
                 <tr>
-                  <td colspan="5" class="text-center p-4 text-muted-color">
+                  <td colspan="5" class="text-center p-4">
                     @if (loading()) {
                       <i class="pi pi-spin pi-spinner"></i> Loading actions...
                     } @else { No actions available. }
                   </td>
                 </tr>
               </ng-template>
-              </p-treeTable>
-            </div>
+            </p-treeTable>
           </div>
 
           <!-- Change Summary -->
           @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>
-                <span class="font-bold">Pending Changes</span>
+            <div class="surface-border border-1 border-round p-3 mt-4">
+              <div class="flex align-items-center gap-2 mb-3">
+                <i class="pi pi-info-circle text-primary content-center"></i>
+                <p class="m-0 mb-1 font-bold">Pending Changes</p>
               </div>
-              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div class="flex flex-col md:flex-row gap-4">
                 @if (pendingAdd().length > 0) {
-                  <div>
-                    <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-plus-circle text-green-500"></i>
-                      <strong class="text-sm">To Add ({{ pendingAdd().length }})</strong>
+                  <div class="w-full md:w-1/2">
+                    <div class="flex align-items-center gap-2 mb-2">
+                      <i class="pi pi-plus-circle text-success"></i>
+                      <strong class="text-sm"
+                        >To Add ({{ pendingAdd().length }})</strong
+                      >
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (action of pendingAdd(); track action.id) {
@@ -2041,10 +2056,12 @@ class RoleActionSelectorComponent {
                   </div>
                 }
                 @if (pendingRemove().length > 0) {
-                  <div>
-                    <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-minus-circle text-red-500"></i>
-                      <strong class="text-sm">To Remove ({{ pendingRemove().length }})</strong>
+                  <div class="w-full md:w-1/2">
+                    <div class="flex align-items-center gap-2 mb-2">
+                      <i class="pi pi-minus-circle text-danger"></i>
+                      <strong class="text-sm"
+                        >To Remove ({{ pendingRemove().length }})</strong
+                      >
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (action of pendingRemove(); track action.id) {
@@ -2059,29 +2076,31 @@ class RoleActionSelectorComponent {
         }
 
         @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>
-            <p class="text-muted-color m-0">
+          <div class="surface-card p-5 border-round shadow-1 text-center">
+            <i
+              class="pi pi-info-circle text-color-secondary mb-3"
+              style="font-size: 3rem; display: block;"
+            ></i>
+            <p class="text-color-secondary m-0">
               No actions available for this role.
             </p>
           </div>
         }
       }
     </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: 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: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "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", "styleClass", "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", "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: ["styleClass", "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", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i7.TreeTable, selector: "p-treeTable, p-treetable, p-tree-table", inputs: ["columns", "styleClass", "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", "contextMenuSelectionMode", "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", "virtualRowHeight", "selectionKeys", "showGridlines"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "component", type: i7.TreeTableToggler, selector: "p-treeTableToggler, p-treetabletoggler, p-treetable-toggler", inputs: ["rowNode"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "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", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i6.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i8.TreeTable, selector: "p-treeTable, p-treetable, p-tree-table", inputs: ["columns", "styleClass", "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", "contextMenuSelectionMode", "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", "virtualRowHeight", "selectionKeys", "showGridlines"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "component", type: i8.TreeTableToggler, selector: "p-treeTableToggler, p-treetabletoggler, p-treetable-toggler", inputs: ["rowNode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RoleActionSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'flusys-role-action-selector', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, PrimeModule, HasPermissionDirective], template: `
+            args: [{ selector: 'flusys-role-action-selector', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, PrimeModule], template: `
     <div class="role-action-selector">
       <!-- Role Selector -->
       <div class="mb-4">
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          <div>
+        <div class="grid">
+          <div class="col-12 md:col-6 lg:col-4">
             <label class="block font-semibold mb-2">Select Role</label>
             <p-select
-              [ngModel]="selectedRoleId()"
-              (ngModelChange)="selectedRoleId.set($event)"
+              [(ngModel)]="selectedRoleId"
               [options]="roles()"
               optionLabel="name"
               optionValue="id"
@@ -2098,21 +2117,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         <!-- Loading State -->
         @if (loading()) {
           <div
-            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
+            class="surface-card p-5 border-round shadow-1 flex justify-content-center"
           >
-            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
+            <i
+              class="pi pi-spin pi-spinner text-primary"
+              style="font-size: 3rem"
+            ></i>
           </div>
         }
 
         <!-- Action List -->
         @if (!loading() && actions().length > 0) {
-          <div class="surface-card p-4 rounded-border shadow-sm">
+          <div class="surface-card p-4 border-round shadow-1">
             <div
-              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
+              class="flex flex-column md:flex-row justify-content-between align-items-start md:align-items-center gap-3 mb-4"
             >
               <div>
                 <h5 class="m-0 mb-1">Action Permissions</h5>
-                <p class="text-sm text-muted-color m-0">
+                <p class="text-sm text-color-secondary m-0">
                   {{ actions().length }} actions available
                 </p>
               </div>
@@ -2134,7 +2156,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   (onClick)="deselectAll()"
                 />
                 <p-button
-                  *hasPermission="ROLE_ACTION_PERMISSIONS.ASSIGN"
                   label="Save Changes"
                   icon="pi pi-save"
                   [disabled]="!canSave()"
@@ -2148,12 +2169,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 
             <!-- Validation Warning -->
             @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>
-                  <div class="flex-1">
-                    <span class="font-semibold">Validation Warning:</span>
-                    <p class="text-sm mt-1 mb-0">
+              <div class="bg-warn/10 border-l-4 border-warn p-4 mb-4">
+                <div class="flex items-center">
+                  <i
+                    class="pi pi-exclamation-triangle text-warn mr-2"
+                  ></i>
+                  <div>
+                    <strong class="text-warn">Validation Warning:</strong>
+                    <p class="text-sm text-warn mt-1">
                       {{ invalidActionsCount() }} selected
                       action{{ invalidActionsCount() > 1 ? 's have' : ' has' }}
                       unmet prerequisites. Fix before saving or use auto-fix on
@@ -2165,33 +2188,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }
 
             <!-- Action Tree Table -->
-            <div class="overflow-x-auto -mx-4 sm:mx-0">
-              <p-treeTable
-                [value]="treeNodes()"
-                dataKey="id"
-                styleClass="p-treetable-sm"
-                [tableStyle]="{ 'min-width': '50rem' }"
-              >
-                <ng-template #header>
-                  <tr>
-                    <th class="w-12">
-                      <p-checkbox
-                        [ngModel]="allSelected()"
-                        [binary]="true"
-                        (ngModelChange)="toggleAll()"
-                        pTooltip="Select/Deselect All"
-                        tooltipPosition="top"
-                      />
-                    </th>
-                    <th>Name</th>
-                    <th class="hidden md:table-cell">Code</th>
-                    <th>Type</th>
-                    <th class="hidden lg:table-cell">Requirements</th>
-                  </tr>
-                </ng-template>
-              <ng-template #body let-rowNode let-rowData="rowData">
-                <tr [class.highlight-warning]="hasUnmetPrerequisites(rowData)">
-                  <td class="w-12">
+            <p-treeTable
+              [value]="treeNodes()"
+              [scrollable]="true"
+              scrollHeight="flex"
+              dataKey="id"
+              styleClass="p-treetable-sm"
+            >
+              <ng-template pTemplate="header">
+                <tr>
+                  <th style="width: 3rem">
+                    <p-checkbox
+                      [ngModel]="allSelected()"
+                      [binary]="true"
+                      (ngModelChange)="toggleAll()"
+                      pTooltip="Select/Deselect All"
+                      tooltipPosition="top"
+                    />
+                  </th>
+                  <th>Name</th>
+                  <th>Code</th>
+                  <th>Type</th>
+                  <th>Requirements</th>
+                </tr>
+              </ng-template>
+              <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
+                <tr [class.bg-danger/10]="hasUnmetPrerequisites(rowData)">
+                  <td style="width: 3rem">
                     <p-checkbox
                       [ngModel]="selectionMap()[rowData.id]"
                       [binary]="true"
@@ -2202,18 +2225,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   </td>
                   <td>
                     <p-treeTableToggler [rowNode]="rowNode" />
-                    <span class="inline-flex items-center gap-2">
+                    <span class="inline-flex align-items-center gap-2">
                       {{ rowData.name }}
                       @if (hasUnmetPrerequisites(rowData)) {
                         <i
-                          class="pi pi-exclamation-triangle text-orange-500"
+                          class="pi pi-exclamation-triangle text-warn"
                           pTooltip="This action has unmet prerequisites and will fail validation on save"
                           tooltipPosition="top"
                         ></i>
                       }
                     </span>
                   </td>
-                  <td class="hidden md:table-cell">{{ rowData.code || '-' }}</td>
+                  <td>{{ rowData.code || '-' }}</td>
                   <td>
                     <p-tag
                       [value]="rowData.actionType"
@@ -2222,41 +2245,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                       "
                     />
                   </td>
-                  <td class="hidden lg:table-cell">
+                  <td>
                     @if (rowData.permissionLogic) {
-                      <span class="text-sm text-muted-color">Has prerequisites</span>
+                      <span class="text-sm text-muted">Has prerequisites</span>
                     } @else {
-                      <span class="text-muted-color">-</span>
+                      <span class="text-muted">-</span>
                     }
                   </td>
                 </tr>
               </ng-template>
-              <ng-template #emptymessage>
+              <ng-template pTemplate="emptymessage">
                 <tr>
-                  <td colspan="5" class="text-center p-4 text-muted-color">
+                  <td colspan="5" class="text-center p-4">
                     @if (loading()) {
                       <i class="pi pi-spin pi-spinner"></i> Loading actions...
                     } @else { No actions available. }
                   </td>
                 </tr>
               </ng-template>
-              </p-treeTable>
-            </div>
+            </p-treeTable>
           </div>
 
           <!-- Change Summary -->
           @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>
-                <span class="font-bold">Pending Changes</span>
+            <div class="surface-border border-1 border-round p-3 mt-4">
+              <div class="flex align-items-center gap-2 mb-3">
+                <i class="pi pi-info-circle text-primary content-center"></i>
+                <p class="m-0 mb-1 font-bold">Pending Changes</p>
               </div>
-              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div class="flex flex-col md:flex-row gap-4">
                 @if (pendingAdd().length > 0) {
-                  <div>
-                    <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-plus-circle text-green-500"></i>
-                      <strong class="text-sm">To Add ({{ pendingAdd().length }})</strong>
+                  <div class="w-full md:w-1/2">
+                    <div class="flex align-items-center gap-2 mb-2">
+                      <i class="pi pi-plus-circle text-success"></i>
+                      <strong class="text-sm"
+                        >To Add ({{ pendingAdd().length }})</strong
+                      >
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (action of pendingAdd(); track action.id) {
@@ -2266,10 +2290,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   </div>
                 }
                 @if (pendingRemove().length > 0) {
-                  <div>
-                    <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-minus-circle text-red-500"></i>
-                      <strong class="text-sm">To Remove ({{ pendingRemove().length }})</strong>
+                  <div class="w-full md:w-1/2">
+                    <div class="flex align-items-center gap-2 mb-2">
+                      <i class="pi pi-minus-circle text-danger"></i>
+                      <strong class="text-sm"
+                        >To Remove ({{ pendingRemove().length }})</strong
+                      >
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (action of pendingRemove(); track action.id) {
@@ -2284,16 +2310,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", 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>
-            <p class="text-muted-color m-0">
+          <div class="surface-card p-5 border-round shadow-1 text-center">
+            <i
+              class="pi pi-info-circle text-color-secondary mb-3"
+              style="font-size: 3rem; display: block;"
+            ></i>
+            <p class="text-color-secondary m-0">
               No actions available for this role.
             </p>
           </div>
         }
       }
     </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}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -2331,8 +2360,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * ```
  */
 class CompanyActionSelectorComponent {
-    // Permission constants for template
-    COMPANY_ACTION_PERMISSIONS = COMPANY_ACTION_PERMISSIONS;
     // Dependencies
     companyApiProvider = inject(COMPANY_API_PROVIDER);
     actionApi = inject(ActionApiService);
@@ -2340,7 +2367,6 @@ class CompanyActionSelectorComponent {
     messageService = inject(MessageService);
     confirmationService = inject(ConfirmationService);
     permissionLogic = inject(ActionPermissionLogicService);
-    destroyRef = inject(DestroyRef);
     // State - Company Selection
     selectedCompanyId = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedCompanyId" }] : []));
     companies = signal([], ...(ngDevMode ? [{ debugName: "companies" }] : []));
@@ -2415,10 +2441,6 @@ class CompanyActionSelectorComponent {
     // AbortController for data loading
     loadDataAbortController = null;
     constructor() {
-        // Cleanup on destroy
-        this.destroyRef.onDestroy(() => {
-            this.loadDataAbortController?.abort();
-        });
         this.loadCompanies();
         // Effect: Load data when company selection changes
         effect(() => {
@@ -2429,7 +2451,11 @@ class CompanyActionSelectorComponent {
                 this.loadDataAbortController = new AbortController();
                 this.loadData(this.loadDataAbortController.signal).catch((err) => {
                     if (err.name !== 'AbortError') {
-                        // Error toast handled by global interceptor
+                        this.messageService.add({
+                            severity: 'error',
+                            summary: 'Error',
+                            detail: 'Failed to load company actions. Please refresh.',
+                        });
                         this.loading.set(false);
                     }
                 });
@@ -2439,6 +2465,9 @@ class CompanyActionSelectorComponent {
             }
         });
     }
+    ngOnDestroy() {
+        this.loadDataAbortController?.abort();
+    }
     /**
      * Load companies from API
      */
@@ -2451,7 +2480,11 @@ class CompanyActionSelectorComponent {
             this.companies.set(response?.data ?? []);
         }
         catch {
-            // Error toast handled by global interceptor
+            this.messageService.add({
+                severity: 'error',
+                summary: 'Error',
+                detail: 'Failed to load companies',
+            });
         }
     }
     /**
@@ -2616,8 +2649,13 @@ class CompanyActionSelectorComponent {
             // Update baseline
             this._initialSelection.set({ ...this.selectionMap() });
         }
-        catch {
-            // Error toast handled by global interceptor
+        catch (err) {
+            const error = err;
+            this.messageService.add({
+                severity: 'error',
+                summary: 'Error',
+                detail: error?.error?.message || 'Failed to update company action whitelist',
+            });
         }
         finally {
             this.saving.set(false);
@@ -2684,12 +2722,11 @@ class CompanyActionSelectorComponent {
     <div class="company-action-selector">
       <!-- Company Selector -->
       <div class="mb-4">
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          <div>
+        <div class="grid">
+          <div class="col-12 md:col-6 lg:col-4">
             <label class="block font-semibold mb-2">Select Company</label>
             <p-select
-              [ngModel]="selectedCompanyId()"
-              (ngModelChange)="selectedCompanyId.set($event)"
+              [(ngModel)]="selectedCompanyId"
               [options]="companies()"
               optionLabel="name"
               optionValue="id"
@@ -2706,21 +2743,24 @@ class CompanyActionSelectorComponent {
         <!-- Loading State -->
         @if (loading()) {
           <div
-            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
+            class="surface-card p-5 border-round shadow-1 flex justify-content-center"
           >
-            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
+            <i
+              class="pi pi-spin pi-spinner text-primary"
+              style="font-size: 3rem"
+            ></i>
           </div>
         }
 
         <!-- Action List -->
         @if (!loading() && actions().length > 0) {
-          <div class="surface-card p-4 rounded-border shadow-sm">
+          <div class="surface-card p-4 border-round shadow-1">
             <div
-              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
+              class="flex flex-column md:flex-row justify-content-between align-items-start md:align-items-center gap-3 mb-4"
             >
               <div>
                 <h5 class="m-0 mb-1">Action Whitelist</h5>
-                <p class="text-sm text-muted-color m-0">
+                <p class="text-sm text-color-secondary m-0">
                   {{ actions().length }} actions available
                 </p>
               </div>
@@ -2742,7 +2782,6 @@ class CompanyActionSelectorComponent {
                   (onClick)="deselectAll()"
                 />
                 <p-button
-                  *hasPermission="COMPANY_ACTION_PERMISSIONS.ASSIGN"
                   label="Save Changes"
                   icon="pi pi-save"
                   [disabled]="!canSave()"
@@ -2756,12 +2795,14 @@ class CompanyActionSelectorComponent {
 
             <!-- Validation Warning -->
             @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>
-                  <div class="flex-1">
-                    <span class="font-semibold">Validation Warning:</span>
-                    <p class="text-sm mt-1 mb-0">
+              <div class="bg-warn/10 border-l-4 border-warn p-4 mb-4">
+                <div class="flex items-center">
+                  <i
+                    class="pi pi-exclamation-triangle text-warn mr-2"
+                  ></i>
+                  <div>
+                    <strong class="text-warn">Validation Warning:</strong>
+                    <p class="text-sm text-warn mt-1">
                       {{ invalidActionsCount() }} selected
                       action{{ invalidActionsCount() > 1 ? 's have' : ' has' }}
                       unmet prerequisites. Fix before saving or use auto-fix on
@@ -2773,33 +2814,33 @@ class CompanyActionSelectorComponent {
             }
 
             <!-- Action Tree Table -->
-            <div class="overflow-x-auto -mx-4 sm:mx-0">
-              <p-treeTable
-                [value]="treeNodes()"
-                dataKey="id"
-                styleClass="p-treetable-sm"
-                [tableStyle]="{ 'min-width': '50rem' }"
-              >
-                <ng-template #header>
-                  <tr>
-                    <th class="w-12">
-                      <p-checkbox
-                        [ngModel]="allSelected()"
-                        [binary]="true"
-                        (ngModelChange)="toggleAll()"
-                        pTooltip="Select/Deselect All"
-                        tooltipPosition="top"
-                      />
-                    </th>
-                    <th>Name</th>
-                    <th class="hidden md:table-cell">Code</th>
-                    <th>Type</th>
-                    <th class="hidden lg:table-cell">Description</th>
-                  </tr>
-                </ng-template>
-              <ng-template #body let-rowNode let-rowData="rowData">
-                <tr [class.highlight-warning]="hasUnmetPrerequisites(rowData)">
-                  <td class="w-12">
+            <p-treeTable
+              [value]="treeNodes()"
+              [scrollable]="true"
+              scrollHeight="flex"
+              dataKey="id"
+              styleClass="p-treetable-sm"
+            >
+              <ng-template pTemplate="header">
+                <tr>
+                  <th style="width: 3rem">
+                    <p-checkbox
+                      [ngModel]="allSelected()"
+                      [binary]="true"
+                      (ngModelChange)="toggleAll()"
+                      pTooltip="Select/Deselect All"
+                      tooltipPosition="top"
+                    />
+                  </th>
+                  <th>Name</th>
+                  <th>Code</th>
+                  <th>Type</th>
+                  <th>Description</th>
+                </tr>
+              </ng-template>
+              <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
+                <tr [class.bg-danger/10]="hasUnmetPrerequisites(rowData)">
+                  <td style="width: 3rem">
                     <p-checkbox
                       [ngModel]="selectionMap()[rowData.id]"
                       [binary]="true"
@@ -2810,18 +2851,18 @@ class CompanyActionSelectorComponent {
                   </td>
                   <td>
                     <p-treeTableToggler [rowNode]="rowNode" />
-                    <span class="inline-flex items-center gap-2">
+                    <span class="inline-flex align-items-center gap-2">
                       {{ rowData.name }}
                       @if (hasUnmetPrerequisites(rowData)) {
                         <i
-                          class="pi pi-exclamation-triangle text-orange-500"
+                          class="pi pi-exclamation-triangle text-warn"
                           pTooltip="This action has unmet prerequisites and will fail validation on save"
                           tooltipPosition="top"
                         ></i>
                       }
                     </span>
                   </td>
-                  <td class="hidden md:table-cell">{{ rowData.code || '-' }}</td>
+                  <td>{{ rowData.code || '-' }}</td>
                   <td>
                     <p-tag
                       [value]="rowData.actionType"
@@ -2830,35 +2871,36 @@ class CompanyActionSelectorComponent {
                       "
                     />
                   </td>
-                  <td class="hidden lg:table-cell">{{ rowData.description || '-' }}</td>
+                  <td>{{ rowData.description || '-' }}</td>
                 </tr>
               </ng-template>
-              <ng-template #emptymessage>
+              <ng-template pTemplate="emptymessage">
                 <tr>
-                  <td colspan="5" class="text-center p-4 text-muted-color">
+                  <td colspan="5" class="text-center p-4">
                     @if (loading()) {
                       <i class="pi pi-spin pi-spinner"></i> Loading actions...
                     } @else { No actions available. }
                   </td>
                 </tr>
               </ng-template>
-              </p-treeTable>
-            </div>
+            </p-treeTable>
           </div>
 
           <!-- Change Summary -->
           @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>
-                <span class="font-bold">Pending Changes</span>
+            <div class="surface-border border-1 border-round p-3 mt-4">
+              <div class="flex align-items-center gap-2 mb-3">
+                <i class="pi pi-info-circle text-primary content-center"></i>
+                <p class="m-0 mb-1 font-bold">Pending Changes</p>
               </div>
-              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div class="flex flex-col md:flex-row gap-4">
                 @if (pendingAdd().length > 0) {
-                  <div>
+                  <div class="w-full md:w-1/2">
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-plus-circle text-green-500"></i>
-                      <strong class="text-sm">To Whitelist ({{ pendingAdd().length }})</strong>
+                      <i class="pi pi-plus-circle text-success"></i>
+                      <strong class="text-sm">
+                        To Whitelist ({{ pendingAdd().length }})
+                      </strong>
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (action of pendingAdd(); track action.id) {
@@ -2867,11 +2909,14 @@ class CompanyActionSelectorComponent {
                     </ul>
                   </div>
                 }
+
                 @if (pendingRemove().length > 0) {
-                  <div>
+                  <div class="w-full md:w-1/2">
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-minus-circle text-red-500"></i>
-                      <strong class="text-sm">To Remove ({{ pendingRemove().length }})</strong>
+                      <i class="pi pi-minus-circle text-danger"></i>
+                      <strong class="text-sm">
+                        To Remove ({{ pendingRemove().length }})
+                      </strong>
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (action of pendingRemove(); track action.id) {
@@ -2886,29 +2931,31 @@ class CompanyActionSelectorComponent {
         }
 
         @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>
-            <p class="text-muted-color m-0">
+          <div class="surface-card p-5 border-round shadow-1 text-center">
+            <i
+              class="pi pi-info-circle text-color-secondary mb-3"
+              style="font-size: 3rem; display: block;"
+            ></i>
+            <p class="text-color-secondary m-0">
               No actions available for this company.
             </p>
           </div>
         }
       }
     </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: 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: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "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", "styleClass", "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", "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: ["styleClass", "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", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i7.TreeTable, selector: "p-treeTable, p-treetable, p-tree-table", inputs: ["columns", "styleClass", "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", "contextMenuSelectionMode", "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", "virtualRowHeight", "selectionKeys", "showGridlines"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "component", type: i7.TreeTableToggler, selector: "p-treeTableToggler, p-treetabletoggler, p-treetable-toggler", inputs: ["rowNode"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "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", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i6.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i8.TreeTable, selector: "p-treeTable, p-treetable, p-tree-table", inputs: ["columns", "styleClass", "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", "contextMenuSelectionMode", "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", "virtualRowHeight", "selectionKeys", "showGridlines"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "component", type: i8.TreeTableToggler, selector: "p-treeTableToggler, p-treetabletoggler, p-treetable-toggler", inputs: ["rowNode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CompanyActionSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'flusys-company-action-selector', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, PrimeModule, HasPermissionDirective], template: `
+            args: [{ selector: 'flusys-company-action-selector', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, PrimeModule], template: `
     <div class="company-action-selector">
       <!-- Company Selector -->
       <div class="mb-4">
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          <div>
+        <div class="grid">
+          <div class="col-12 md:col-6 lg:col-4">
             <label class="block font-semibold mb-2">Select Company</label>
             <p-select
-              [ngModel]="selectedCompanyId()"
-              (ngModelChange)="selectedCompanyId.set($event)"
+              [(ngModel)]="selectedCompanyId"
               [options]="companies()"
               optionLabel="name"
               optionValue="id"
@@ -2925,21 +2972,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         <!-- Loading State -->
         @if (loading()) {
           <div
-            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
+            class="surface-card p-5 border-round shadow-1 flex justify-content-center"
           >
-            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
+            <i
+              class="pi pi-spin pi-spinner text-primary"
+              style="font-size: 3rem"
+            ></i>
           </div>
         }
 
         <!-- Action List -->
         @if (!loading() && actions().length > 0) {
-          <div class="surface-card p-4 rounded-border shadow-sm">
+          <div class="surface-card p-4 border-round shadow-1">
             <div
-              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
+              class="flex flex-column md:flex-row justify-content-between align-items-start md:align-items-center gap-3 mb-4"
             >
               <div>
                 <h5 class="m-0 mb-1">Action Whitelist</h5>
-                <p class="text-sm text-muted-color m-0">
+                <p class="text-sm text-color-secondary m-0">
                   {{ actions().length }} actions available
                 </p>
               </div>
@@ -2961,7 +3011,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   (onClick)="deselectAll()"
                 />
                 <p-button
-                  *hasPermission="COMPANY_ACTION_PERMISSIONS.ASSIGN"
                   label="Save Changes"
                   icon="pi pi-save"
                   [disabled]="!canSave()"
@@ -2975,12 +3024,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 
             <!-- Validation Warning -->
             @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>
-                  <div class="flex-1">
-                    <span class="font-semibold">Validation Warning:</span>
-                    <p class="text-sm mt-1 mb-0">
+              <div class="bg-warn/10 border-l-4 border-warn p-4 mb-4">
+                <div class="flex items-center">
+                  <i
+                    class="pi pi-exclamation-triangle text-warn mr-2"
+                  ></i>
+                  <div>
+                    <strong class="text-warn">Validation Warning:</strong>
+                    <p class="text-sm text-warn mt-1">
                       {{ invalidActionsCount() }} selected
                       action{{ invalidActionsCount() > 1 ? 's have' : ' has' }}
                       unmet prerequisites. Fix before saving or use auto-fix on
@@ -2992,33 +3043,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }
 
             <!-- Action Tree Table -->
-            <div class="overflow-x-auto -mx-4 sm:mx-0">
-              <p-treeTable
-                [value]="treeNodes()"
-                dataKey="id"
-                styleClass="p-treetable-sm"
-                [tableStyle]="{ 'min-width': '50rem' }"
-              >
-                <ng-template #header>
-                  <tr>
-                    <th class="w-12">
-                      <p-checkbox
-                        [ngModel]="allSelected()"
-                        [binary]="true"
-                        (ngModelChange)="toggleAll()"
-                        pTooltip="Select/Deselect All"
-                        tooltipPosition="top"
-                      />
-                    </th>
-                    <th>Name</th>
-                    <th class="hidden md:table-cell">Code</th>
-                    <th>Type</th>
-                    <th class="hidden lg:table-cell">Description</th>
-                  </tr>
-                </ng-template>
-              <ng-template #body let-rowNode let-rowData="rowData">
-                <tr [class.highlight-warning]="hasUnmetPrerequisites(rowData)">
-                  <td class="w-12">
+            <p-treeTable
+              [value]="treeNodes()"
+              [scrollable]="true"
+              scrollHeight="flex"
+              dataKey="id"
+              styleClass="p-treetable-sm"
+            >
+              <ng-template pTemplate="header">
+                <tr>
+                  <th style="width: 3rem">
+                    <p-checkbox
+                      [ngModel]="allSelected()"
+                      [binary]="true"
+                      (ngModelChange)="toggleAll()"
+                      pTooltip="Select/Deselect All"
+                      tooltipPosition="top"
+                    />
+                  </th>
+                  <th>Name</th>
+                  <th>Code</th>
+                  <th>Type</th>
+                  <th>Description</th>
+                </tr>
+              </ng-template>
+              <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
+                <tr [class.bg-danger/10]="hasUnmetPrerequisites(rowData)">
+                  <td style="width: 3rem">
                     <p-checkbox
                       [ngModel]="selectionMap()[rowData.id]"
                       [binary]="true"
@@ -3029,18 +3080,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   </td>
                   <td>
                     <p-treeTableToggler [rowNode]="rowNode" />
-                    <span class="inline-flex items-center gap-2">
+                    <span class="inline-flex align-items-center gap-2">
                       {{ rowData.name }}
                       @if (hasUnmetPrerequisites(rowData)) {
                         <i
-                          class="pi pi-exclamation-triangle text-orange-500"
+                          class="pi pi-exclamation-triangle text-warn"
                           pTooltip="This action has unmet prerequisites and will fail validation on save"
                           tooltipPosition="top"
                         ></i>
                       }
                     </span>
                   </td>
-                  <td class="hidden md:table-cell">{{ rowData.code || '-' }}</td>
+                  <td>{{ rowData.code || '-' }}</td>
                   <td>
                     <p-tag
                       [value]="rowData.actionType"
@@ -3049,35 +3100,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                       "
                     />
                   </td>
-                  <td class="hidden lg:table-cell">{{ rowData.description || '-' }}</td>
+                  <td>{{ rowData.description || '-' }}</td>
                 </tr>
               </ng-template>
-              <ng-template #emptymessage>
+              <ng-template pTemplate="emptymessage">
                 <tr>
-                  <td colspan="5" class="text-center p-4 text-muted-color">
+                  <td colspan="5" class="text-center p-4">
                     @if (loading()) {
                       <i class="pi pi-spin pi-spinner"></i> Loading actions...
                     } @else { No actions available. }
                   </td>
                 </tr>
               </ng-template>
-              </p-treeTable>
-            </div>
+            </p-treeTable>
           </div>
 
           <!-- Change Summary -->
           @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>
-                <span class="font-bold">Pending Changes</span>
+            <div class="surface-border border-1 border-round p-3 mt-4">
+              <div class="flex align-items-center gap-2 mb-3">
+                <i class="pi pi-info-circle text-primary content-center"></i>
+                <p class="m-0 mb-1 font-bold">Pending Changes</p>
               </div>
-              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div class="flex flex-col md:flex-row gap-4">
                 @if (pendingAdd().length > 0) {
-                  <div>
+                  <div class="w-full md:w-1/2">
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-plus-circle text-green-500"></i>
-                      <strong class="text-sm">To Whitelist ({{ pendingAdd().length }})</strong>
+                      <i class="pi pi-plus-circle text-success"></i>
+                      <strong class="text-sm">
+                        To Whitelist ({{ pendingAdd().length }})
+                      </strong>
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (action of pendingAdd(); track action.id) {
@@ -3086,11 +3138,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                     </ul>
                   </div>
                 }
+
                 @if (pendingRemove().length > 0) {
-                  <div>
+                  <div class="w-full md:w-1/2">
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-minus-circle text-red-500"></i>
-                      <strong class="text-sm">To Remove ({{ pendingRemove().length }})</strong>
+                      <i class="pi pi-minus-circle text-danger"></i>
+                      <strong class="text-sm">
+                        To Remove ({{ pendingRemove().length }})
+                      </strong>
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (action of pendingRemove(); track action.id) {
@@ -3105,16 +3160,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", 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>
-            <p class="text-muted-color m-0">
+          <div class="surface-card p-5 border-round shadow-1 text-center">
+            <i
+              class="pi pi-info-circle text-color-secondary mb-3"
+              style="font-size: 3rem; display: block;"
+            ></i>
+            <p class="text-color-secondary m-0">
               No actions available for this company.
             </p>
           </div>
         }
       }
     </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}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -3148,8 +3206,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * ```
  */
 class UserRoleSelectorComponent {
-    // Permission constants for template
-    USER_ROLE_PERMISSIONS = USER_ROLE_PERMISSIONS;
     // Dependencies
     appConfig = inject(APP_CONFIG);
     companyContext = inject(LAYOUT_AUTH_STATE);
@@ -3157,9 +3213,6 @@ class UserRoleSelectorComponent {
     roleApi = inject(RoleApiService);
     permissionApi = inject(PermissionApiService);
     messageService = inject(MessageService);
-    destroyRef = inject(DestroyRef);
-    // AbortController for data loading
-    loadDataAbortController = null;
     // State - User/Branch Selection
     selectedUserId = signal(null, ...(ngDevMode ? [{ debugName: "selectedUserId" }] : []));
     selectedBranchId = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedBranchId" }] : []));
@@ -3196,11 +3249,7 @@ class UserRoleSelectorComponent {
     hasChanges = computed(() => {
         const current = this.selectionMap();
         const initial = this.initialSelection();
-        const currentKeys = Object.keys(current);
-        const initialKeys = Object.keys(initial);
-        if (currentKeys.length !== initialKeys.length)
-            return true;
-        return currentKeys.some((key) => current[key] !== initial[key]);
+        return JSON.stringify(current) !== JSON.stringify(initial);
     }, ...(ngDevMode ? [{ debugName: "hasChanges" }] : []));
     // Computed - Pending Changes
     pendingAdd = computed(() => {
@@ -3220,10 +3269,6 @@ class UserRoleSelectorComponent {
         return this.hasChanges() && !this.saving();
     }, ...(ngDevMode ? [{ debugName: "canSave" }] : []));
     constructor() {
-        // Cleanup on destroy
-        this.destroyRef.onDestroy(() => {
-            this.loadDataAbortController?.abort();
-        });
         // Effect: Load user branches and data when user changes
         effect(() => {
             const userId = this.selectedUserId();
@@ -3271,7 +3316,11 @@ class UserRoleSelectorComponent {
             this.branches.set(userBranches);
         }
         catch {
-            // Error toast handled by global interceptor
+            this.messageService.add({
+                severity: 'error',
+                summary: 'Error',
+                detail: 'Failed to load user permitted branches',
+            });
         }
     }
     /**
@@ -3309,7 +3358,11 @@ class UserRoleSelectorComponent {
             this._initialSelection.set({ ...selMap });
         }
         catch {
-            // Error toast handled by global interceptor
+            this.messageService.add({
+                severity: 'error',
+                summary: 'Error',
+                detail: 'Failed to load user role assignments',
+            });
         }
         finally {
             this.loading.set(false);
@@ -3416,8 +3469,13 @@ class UserRoleSelectorComponent {
             // Update baseline
             this._initialSelection.set({ ...this.selectionMap() });
         }
-        catch {
-            // Error toast handled by global interceptor
+        catch (err) {
+            const error = err;
+            this.messageService.add({
+                severity: 'error',
+                summary: 'Error',
+                detail: error?.error?.message || 'Failed to update user role assignments',
+            });
         }
         finally {
             this.saving.set(false);
@@ -3435,30 +3493,28 @@ class UserRoleSelectorComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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">
+      <div class="surface-card p-4 border-round mb-4 shadow-1">
+        <div class="formgrid grid gap-5">
+          <div class="field col-12 sm:col-6 mb-0">
+            <label class="block font-semibold mb-2 text-900">
               <i class="pi pi-user mr-2 text-primary"></i>
               Select User
             </label>
             <lib-user-select
-              [value]="selectedUserId()"
-              (valueChange)="selectedUserId.set($event)"
+              [(value)]="selectedUserId"
               [isEditMode]="true"
               placeHolder="Select a user"
             />
           </div>
 
           @if (showBranchSelector()) {
-            <div>
-              <label class="block font-semibold mb-2">
+            <div class="field col-12 sm:col-6 mb-0">
+              <label class="block font-semibold mb-2 text-900">
                 <i class="pi pi-building mr-2 text-primary"></i>
                 Select Branch
               </label>
               <p-select
-                [ngModel]="selectedBranchId()"
-                (ngModelChange)="selectedBranchId.set($event)"
+                [(ngModel)]="selectedBranchId"
                 [options]="filteredBranches()"
                 optionLabel="name"
                 optionValue="id"
@@ -3469,20 +3525,20 @@ class UserRoleSelectorComponent {
               >
                 <ng-template #selectedItem let-branch>
                   @if (branch) {
-                    <div class="flex items-center gap-2">
+                    <div class="flex align-items-center gap-2">
                       <i class="pi pi-building text-primary"></i>
                       <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>
+                  <div class="flex align-items-center gap-2">
+                    <i class="pi pi-building text-color-secondary"></i>
                     <span>{{ branch.name }}</span>
                   </div>
                 </ng-template>
               </p-select>
-              <small class="text-muted-color block mt-1">
+              <small class="text-color-secondary block mt-1">
                 {{ filteredBranches().length }} permitted branch{{
                   filteredBranches().length !== 1 ? 'es' : ''
                 }}
@@ -3497,21 +3553,24 @@ class UserRoleSelectorComponent {
         <!-- Loading State -->
         @if (loading()) {
           <div
-            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
+            class="surface-card p-5 border-round shadow-1 flex justify-content-center"
           >
-            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
+            <i
+              class="pi pi-spin pi-spinner text-primary"
+              style="font-size: 3rem"
+            ></i>
           </div>
         }
 
         <!-- Role List -->
         @if (!loading() && roles().length > 0) {
-          <div class="surface-card p-4 rounded-border shadow-sm">
+          <div class="surface-card p-4 border-round shadow-1">
             <div
-              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
+              class="flex flex-column md:flex-row justify-content-between align-items-start md:align-items-center gap-3 mb-4"
             >
               <div>
                 <h5 class="m-0 mb-1">Role Assignments</h5>
-                <p class="text-sm text-muted-color m-0">
+                <p class="text-sm text-color-secondary m-0">
                   {{ roles().length }} roles available
                 </p>
               </div>
@@ -3533,7 +3592,6 @@ class UserRoleSelectorComponent {
                   (onClick)="deselectAll()"
                 />
                 <p-button
-                  *hasPermission="USER_ROLE_PERMISSIONS.ASSIGN"
                   label="Save Changes"
                   icon="pi pi-save"
                   [disabled]="!canSave()"
@@ -3546,78 +3604,77 @@ class UserRoleSelectorComponent {
             </div>
 
             <!-- Role Table -->
-            <div class="overflow-x-auto -mx-4 sm:mx-0">
-              <p-table
-                [value]="roles()"
-                [rows]="10"
-                [paginator]="roles().length > 10"
-                [rowsPerPageOptions]="[10, 20, 50]"
-                [globalFilterFields]="['name', 'code', 'description']"
-                [showCurrentPageReport]="true"
-                currentPageReportTemplate="Showing {first} to {last} of {totalRecords} roles"
-                styleClass="p-datatable-sm"
-                [tableStyle]="{ 'min-width': '35rem' }"
-              >
-                <ng-template #header>
-                  <tr>
-                    <th style="width: 3rem">
-                      <p-checkbox
-                        [ngModel]="allSelected()"
-                        [binary]="true"
-                        (ngModelChange)="toggleAll()"
-                        pTooltip="Select/Deselect All"
-                        tooltipPosition="top"
-                      />
-                    </th>
-                    <th>Name</th>
-                    <th class="hidden sm:table-cell">Code</th>
-                    <th class="hidden md:table-cell">Description</th>
-                  </tr>
-                </ng-template>
-                <ng-template #body let-role>
-                  <tr>
-                    <td>
-                      <p-checkbox
-                        [ngModel]="selectionMap()[role.id]"
-                        [binary]="true"
-                        (ngModelChange)="onRoleToggle(role, $event)"
-                        [pTooltip]="getTooltip(role)"
-                        tooltipPosition="top"
-                      />
-                    </td>
-                    <td>{{ role.name }}</td>
-                    <td class="hidden sm:table-cell">{{ role.code || '-' }}</td>
-                    <td class="hidden md:table-cell">{{ role.description || '-' }}</td>
-                  </tr>
-                </ng-template>
-                <ng-template #emptymessage>
-                  <tr>
-                    <td colspan="4" class="text-center p-4 text-muted-color">
-                      @if (loading()) {
-                        <i class="pi pi-spin pi-spinner"></i> Loading roles...
-                      } @else {
-                        No roles available.
-                      }
-                    </td>
-                  </tr>
-                </ng-template>
-              </p-table>
-            </div>
+            <p-table
+              [value]="roles()"
+              [rows]="10"
+              [paginator]="roles().length > 10"
+              [rowsPerPageOptions]="[10, 20, 50]"
+              [globalFilterFields]="['name', 'code', 'description']"
+              [showCurrentPageReport]="true"
+              currentPageReportTemplate="Showing {first} to {last} of {totalRecords} roles"
+              styleClass="p-datatable-sm"
+            >
+              <ng-template #header>
+                <tr>
+                  <th style="width: 3rem">
+                    <p-checkbox
+                      [ngModel]="allSelected()"
+                      [binary]="true"
+                      (ngModelChange)="toggleAll()"
+                      pTooltip="Select/Deselect All"
+                      tooltipPosition="top"
+                    />
+                  </th>
+                  <th>Name</th>
+                  <th>Code</th>
+                  <th>Description</th>
+                </tr>
+              </ng-template>
+              <ng-template #body let-role>
+                <tr>
+                  <td>
+                    <p-checkbox
+                      [ngModel]="selectionMap()[role.id]"
+                      [binary]="true"
+                      (ngModelChange)="onRoleToggle(role, $event)"
+                      [pTooltip]="getTooltip(role)"
+                      tooltipPosition="top"
+                    />
+                  </td>
+                  <td>{{ role.name }}</td>
+                  <td>{{ role.code || '-' }}</td>
+                  <td>{{ role.description || '-' }}</td>
+                </tr>
+              </ng-template>
+              <ng-template #emptymessage>
+                <tr>
+                  <td colspan="4" class="text-center p-4">
+                    @if (loading()) {
+                      <i class="pi pi-spin pi-spinner"></i> Loading roles...
+                    } @else {
+                      No roles available.
+                    }
+                  </td>
+                </tr>
+              </ng-template>
+            </p-table>
           </div>
 
           <!-- Change Summary -->
           @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>
-                <span class="font-bold">Pending Changes</span>
+            <div class="surface-border border-1 border-round p-3 mt-4">
+              <div class="flex align-items-center gap-2 mb-3">
+                <i class="pi pi-info-circle text-primary content-center"></i>
+                <p class="m-0 mb-1 font-bold">Pending Changes</p>
               </div>
-              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div class="flex flex-col md:flex-row gap-4">
                 @if (pendingAdd().length > 0) {
-                  <div>
-                    <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-plus-circle text-green-500"></i>
-                      <strong class="text-sm">To Assign ({{ pendingAdd().length }})</strong>
+                  <div class="w-full md:w-1/2">
+                    <div class="flex align-items-center gap-2 mb-2">
+                      <i class="pi pi-plus-circle text-success"></i>
+                      <strong class="text-sm"
+                        >To Assign ({{ pendingAdd().length }})</strong
+                      >
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (role of pendingAdd(); track role.id) {
@@ -3627,10 +3684,12 @@ class UserRoleSelectorComponent {
                   </div>
                 }
                 @if (pendingRemove().length > 0) {
-                  <div>
-                    <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-minus-circle text-red-500"></i>
-                      <strong class="text-sm">To Remove ({{ pendingRemove().length }})</strong>
+                  <div class="w-full md:w-1/2">
+                    <div class="flex align-items-center gap-2 mb-2">
+                      <i class="pi pi-minus-circle text-danger"></i>
+                      <strong class="text-sm"
+                        >To Remove ({{ pendingRemove().length }})</strong
+                      >
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (role of pendingRemove(); track role.id) {
@@ -3645,46 +3704,47 @@ 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>
-            <p class="text-muted-color m-0">
+          <div class="surface-card p-5 border-round shadow-1 text-center">
+            <i
+              class="pi pi-info-circle text-color-secondary mb-3"
+              style="font-size: 3rem; display: block;"
+            ></i>
+            <p class="text-color-secondary m-0">
               No roles available for this user.
             </p>
           </div>
         }
       }
     </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: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "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", "styleClass", "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", "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", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "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", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "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", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "component", type: UserSelectComponent, selector: "lib-user-select", inputs: ["loadUsers", "placeHolder", "isEditMode", "filterActive", "additionalFilters", "pageSize", "value"], outputs: ["valueChange", "userSelected", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "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", "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", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "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", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: UserSelectComponent, selector: "lib-user-select", inputs: ["loadUsers", "placeHolder", "isEditMode", "filterActive", "additionalFilters", "pageSize", "value"], outputs: ["valueChange", "userSelected", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserRoleSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'flusys-user-role-selector', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, PrimeModule, HasPermissionDirective, UserSelectComponent], template: `
+            args: [{ selector: 'flusys-user-role-selector', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, PrimeModule, UserSelectComponent], 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">
+      <div class="surface-card p-4 border-round mb-4 shadow-1">
+        <div class="formgrid grid gap-5">
+          <div class="field col-12 sm:col-6 mb-0">
+            <label class="block font-semibold mb-2 text-900">
               <i class="pi pi-user mr-2 text-primary"></i>
               Select User
             </label>
             <lib-user-select
-              [value]="selectedUserId()"
-              (valueChange)="selectedUserId.set($event)"
+              [(value)]="selectedUserId"
               [isEditMode]="true"
               placeHolder="Select a user"
             />
           </div>
 
           @if (showBranchSelector()) {
-            <div>
-              <label class="block font-semibold mb-2">
+            <div class="field col-12 sm:col-6 mb-0">
+              <label class="block font-semibold mb-2 text-900">
                 <i class="pi pi-building mr-2 text-primary"></i>
                 Select Branch
               </label>
               <p-select
-                [ngModel]="selectedBranchId()"
-                (ngModelChange)="selectedBranchId.set($event)"
+                [(ngModel)]="selectedBranchId"
                 [options]="filteredBranches()"
                 optionLabel="name"
                 optionValue="id"
@@ -3695,20 +3755,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
               >
                 <ng-template #selectedItem let-branch>
                   @if (branch) {
-                    <div class="flex items-center gap-2">
+                    <div class="flex align-items-center gap-2">
                       <i class="pi pi-building text-primary"></i>
                       <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>
+                  <div class="flex align-items-center gap-2">
+                    <i class="pi pi-building text-color-secondary"></i>
                     <span>{{ branch.name }}</span>
                   </div>
                 </ng-template>
               </p-select>
-              <small class="text-muted-color block mt-1">
+              <small class="text-color-secondary block mt-1">
                 {{ filteredBranches().length }} permitted branch{{
                   filteredBranches().length !== 1 ? 'es' : ''
                 }}
@@ -3723,21 +3783,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         <!-- Loading State -->
         @if (loading()) {
           <div
-            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
+            class="surface-card p-5 border-round shadow-1 flex justify-content-center"
           >
-            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
+            <i
+              class="pi pi-spin pi-spinner text-primary"
+              style="font-size: 3rem"
+            ></i>
           </div>
         }
 
         <!-- Role List -->
         @if (!loading() && roles().length > 0) {
-          <div class="surface-card p-4 rounded-border shadow-sm">
+          <div class="surface-card p-4 border-round shadow-1">
             <div
-              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
+              class="flex flex-column md:flex-row justify-content-between align-items-start md:align-items-center gap-3 mb-4"
             >
               <div>
                 <h5 class="m-0 mb-1">Role Assignments</h5>
-                <p class="text-sm text-muted-color m-0">
+                <p class="text-sm text-color-secondary m-0">
                   {{ roles().length }} roles available
                 </p>
               </div>
@@ -3759,7 +3822,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   (onClick)="deselectAll()"
                 />
                 <p-button
-                  *hasPermission="USER_ROLE_PERMISSIONS.ASSIGN"
                   label="Save Changes"
                   icon="pi pi-save"
                   [disabled]="!canSave()"
@@ -3772,78 +3834,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             </div>
 
             <!-- Role Table -->
-            <div class="overflow-x-auto -mx-4 sm:mx-0">
-              <p-table
-                [value]="roles()"
-                [rows]="10"
-                [paginator]="roles().length > 10"
-                [rowsPerPageOptions]="[10, 20, 50]"
-                [globalFilterFields]="['name', 'code', 'description']"
-                [showCurrentPageReport]="true"
-                currentPageReportTemplate="Showing {first} to {last} of {totalRecords} roles"
-                styleClass="p-datatable-sm"
-                [tableStyle]="{ 'min-width': '35rem' }"
-              >
-                <ng-template #header>
-                  <tr>
-                    <th style="width: 3rem">
-                      <p-checkbox
-                        [ngModel]="allSelected()"
-                        [binary]="true"
-                        (ngModelChange)="toggleAll()"
-                        pTooltip="Select/Deselect All"
-                        tooltipPosition="top"
-                      />
-                    </th>
-                    <th>Name</th>
-                    <th class="hidden sm:table-cell">Code</th>
-                    <th class="hidden md:table-cell">Description</th>
-                  </tr>
-                </ng-template>
-                <ng-template #body let-role>
-                  <tr>
-                    <td>
-                      <p-checkbox
-                        [ngModel]="selectionMap()[role.id]"
-                        [binary]="true"
-                        (ngModelChange)="onRoleToggle(role, $event)"
-                        [pTooltip]="getTooltip(role)"
-                        tooltipPosition="top"
-                      />
-                    </td>
-                    <td>{{ role.name }}</td>
-                    <td class="hidden sm:table-cell">{{ role.code || '-' }}</td>
-                    <td class="hidden md:table-cell">{{ role.description || '-' }}</td>
-                  </tr>
-                </ng-template>
-                <ng-template #emptymessage>
-                  <tr>
-                    <td colspan="4" class="text-center p-4 text-muted-color">
-                      @if (loading()) {
-                        <i class="pi pi-spin pi-spinner"></i> Loading roles...
-                      } @else {
-                        No roles available.
-                      }
-                    </td>
-                  </tr>
-                </ng-template>
-              </p-table>
-            </div>
+            <p-table
+              [value]="roles()"
+              [rows]="10"
+              [paginator]="roles().length > 10"
+              [rowsPerPageOptions]="[10, 20, 50]"
+              [globalFilterFields]="['name', 'code', 'description']"
+              [showCurrentPageReport]="true"
+              currentPageReportTemplate="Showing {first} to {last} of {totalRecords} roles"
+              styleClass="p-datatable-sm"
+            >
+              <ng-template #header>
+                <tr>
+                  <th style="width: 3rem">
+                    <p-checkbox
+                      [ngModel]="allSelected()"
+                      [binary]="true"
+                      (ngModelChange)="toggleAll()"
+                      pTooltip="Select/Deselect All"
+                      tooltipPosition="top"
+                    />
+                  </th>
+                  <th>Name</th>
+                  <th>Code</th>
+                  <th>Description</th>
+                </tr>
+              </ng-template>
+              <ng-template #body let-role>
+                <tr>
+                  <td>
+                    <p-checkbox
+                      [ngModel]="selectionMap()[role.id]"
+                      [binary]="true"
+                      (ngModelChange)="onRoleToggle(role, $event)"
+                      [pTooltip]="getTooltip(role)"
+                      tooltipPosition="top"
+                    />
+                  </td>
+                  <td>{{ role.name }}</td>
+                  <td>{{ role.code || '-' }}</td>
+                  <td>{{ role.description || '-' }}</td>
+                </tr>
+              </ng-template>
+              <ng-template #emptymessage>
+                <tr>
+                  <td colspan="4" class="text-center p-4">
+                    @if (loading()) {
+                      <i class="pi pi-spin pi-spinner"></i> Loading roles...
+                    } @else {
+                      No roles available.
+                    }
+                  </td>
+                </tr>
+              </ng-template>
+            </p-table>
           </div>
 
           <!-- Change Summary -->
           @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>
-                <span class="font-bold">Pending Changes</span>
+            <div class="surface-border border-1 border-round p-3 mt-4">
+              <div class="flex align-items-center gap-2 mb-3">
+                <i class="pi pi-info-circle text-primary content-center"></i>
+                <p class="m-0 mb-1 font-bold">Pending Changes</p>
               </div>
-              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div class="flex flex-col md:flex-row gap-4">
                 @if (pendingAdd().length > 0) {
-                  <div>
-                    <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-plus-circle text-green-500"></i>
-                      <strong class="text-sm">To Assign ({{ pendingAdd().length }})</strong>
+                  <div class="w-full md:w-1/2">
+                    <div class="flex align-items-center gap-2 mb-2">
+                      <i class="pi pi-plus-circle text-success"></i>
+                      <strong class="text-sm"
+                        >To Assign ({{ pendingAdd().length }})</strong
+                      >
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (role of pendingAdd(); track role.id) {
@@ -3853,10 +3914,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   </div>
                 }
                 @if (pendingRemove().length > 0) {
-                  <div>
-                    <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-minus-circle text-red-500"></i>
-                      <strong class="text-sm">To Remove ({{ pendingRemove().length }})</strong>
+                  <div class="w-full md:w-1/2">
+                    <div class="flex align-items-center gap-2 mb-2">
+                      <i class="pi pi-minus-circle text-danger"></i>
+                      <strong class="text-sm"
+                        >To Remove ({{ pendingRemove().length }})</strong
+                      >
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (role of pendingRemove(); track role.id) {
@@ -3871,9 +3934,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", 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>
-            <p class="text-muted-color m-0">
+          <div class="surface-card p-5 border-round shadow-1 text-center">
+            <i
+              class="pi pi-info-circle text-color-secondary mb-3"
+              style="font-size: 3rem; display: block;"
+            ></i>
+            <p class="text-color-secondary m-0">
               No roles available for this user.
             </p>
           </div>
@@ -3915,8 +3981,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * ```
  */
 class UserActionSelectorComponent {
-    // Permission constants for template
-    USER_ACTION_PERMISSIONS = USER_ACTION_PERMISSIONS;
     // Dependencies
     appConfig = inject(APP_CONFIG);
     companyContext = inject(LAYOUT_AUTH_STATE);
@@ -3925,9 +3989,6 @@ class UserActionSelectorComponent {
     permissionApi = inject(PermissionApiService);
     permissionLogic = inject(ActionPermissionLogicService);
     messageService = inject(MessageService);
-    destroyRef = inject(DestroyRef);
-    // AbortController for data loading
-    loadDataAbortController = null;
     // State - User/Branch Selection
     selectedUserId = signal(null, ...(ngDevMode ? [{ debugName: "selectedUserId" }] : []));
     selectedBranchId = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedBranchId" }] : []));
@@ -3969,11 +4030,7 @@ class UserActionSelectorComponent {
     hasChanges = computed(() => {
         const current = this.selectionMap();
         const initial = this.initialSelection();
-        const currentKeys = Object.keys(current);
-        const initialKeys = Object.keys(initial);
-        if (currentKeys.length !== initialKeys.length)
-            return true;
-        return currentKeys.some((key) => current[key] !== initial[key]);
+        return JSON.stringify(current) !== JSON.stringify(initial);
     }, ...(ngDevMode ? [{ debugName: "hasChanges" }] : []));
     // Computed - Validation
     actionsWithUnmetPrerequisites = computed(() => {
@@ -4009,10 +4066,6 @@ class UserActionSelectorComponent {
         return (this.hasChanges() && !this.saving() && this.invalidActionsCount() === 0);
     }, ...(ngDevMode ? [{ debugName: "canSave" }] : []));
     constructor() {
-        // Cleanup on destroy
-        this.destroyRef.onDestroy(() => {
-            this.loadDataAbortController?.abort();
-        });
         // Effect: Load user branches and data when user changes
         effect(() => {
             const userId = this.selectedUserId();
@@ -4060,7 +4113,11 @@ class UserActionSelectorComponent {
             this.branches.set(userBranches);
         }
         catch {
-            // Error toast handled by global interceptor
+            this.messageService.add({
+                severity: 'error',
+                summary: 'Error',
+                detail: 'Failed to load user permitted branches',
+            });
         }
     }
     /**
@@ -4101,7 +4158,11 @@ class UserActionSelectorComponent {
             this._initialSelection.set({ ...selMap });
         }
         catch {
-            // Error toast handled by global interceptor
+            this.messageService.add({
+                severity: 'error',
+                summary: 'Error',
+                detail: 'Failed to load user action permissions',
+            });
         }
         finally {
             this.loading.set(false);
@@ -4136,17 +4197,12 @@ class UserActionSelectorComponent {
             : false;
     }
     /**
-     * Handle action toggle with dependency management
+     * Handle action checkbox toggle
      */
     onActionToggle(action, newValue) {
-        if (!newValue) {
-            // Unchecking - validate dependencies
-            this.permissionLogic.handleUncheck(action, this.selectionMap(), this.actions(), (newMap) => this._selectionMap.set(newMap));
-        }
-        else {
-            // Checking - validate prerequisites
-            this.permissionLogic.handleCheck(action, this.selectionMap(), this.actions(), (newMap) => this._selectionMap.set(newMap), (previousState) => this._selectionMap.set(previousState));
-        }
+        const selMap = { ...this.selectionMap() };
+        selMap[action.id] = newValue;
+        this._selectionMap.set(selMap);
     }
     /**
      * Toggle all actions
@@ -4197,12 +4253,6 @@ class UserActionSelectorComponent {
             });
             return;
         }
-        // Pre-save validation
-        const invalidActions = this.permissionLogic.getActionsWithUnmetPrerequisites(this.selectionMap(), this.actions());
-        if (invalidActions.length > 0) {
-            this.permissionLogic.showValidationErrorDialog(invalidActions, this.selectionMap(), this.actions(), (newMap) => this._selectionMap.set(newMap));
-            return;
-        }
         // Build payload
         const items = [];
         this.pendingAdd().forEach((action) => {
@@ -4242,8 +4292,13 @@ class UserActionSelectorComponent {
             // Update baseline
             this._initialSelection.set({ ...this.selectionMap() });
         }
-        catch {
-            // Error toast handled by global interceptor
+        catch (err) {
+            const error = err;
+            this.messageService.add({
+                severity: 'error',
+                summary: 'Error',
+                detail: error?.error?.message || 'Failed to update user action permissions',
+            });
         }
         finally {
             this.saving.set(false);
@@ -4262,30 +4317,28 @@ class UserActionSelectorComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: UserActionSelectorComponent, isStandalone: true, selector: "flusys-user-action-selector", ngImport: i0, template: `
     <div class="user-action-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">
+      <div class="surface-card p-4 border-round mb-4 shadow-1">
+        <div class="formgrid grid gap-5">
+          <div class="field col-12 sm:col-6 mb-0">
+            <label class="block font-semibold mb-2 text-900">
               <i class="pi pi-user mr-2 text-primary"></i>
               Select User
             </label>
             <lib-user-select
-              [value]="selectedUserId()"
-              (valueChange)="selectedUserId.set($event)"
+              [(value)]="selectedUserId"
               [isEditMode]="true"
               placeHolder="Select a user"
             />
           </div>
 
           @if (showBranchSelector()) {
-            <div>
-              <label class="block font-semibold mb-2">
+            <div class="field col-12 sm:col-6 mb-0">
+              <label class="block font-semibold mb-2 text-900">
                 <i class="pi pi-building mr-2 text-primary"></i>
                 Select Branch
               </label>
               <p-select
-                [ngModel]="selectedBranchId()"
-                (ngModelChange)="selectedBranchId.set($event)"
+                [(ngModel)]="selectedBranchId"
                 [options]="filteredBranches()"
                 optionLabel="name"
                 optionValue="id"
@@ -4296,20 +4349,20 @@ class UserActionSelectorComponent {
               >
                 <ng-template #selectedItem let-branch>
                   @if (branch) {
-                    <div class="flex items-center gap-2">
+                    <div class="flex align-items-center gap-2">
                       <i class="pi pi-building text-primary"></i>
                       <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>
+                  <div class="flex align-items-center gap-2">
+                    <i class="pi pi-building text-color-secondary"></i>
                     <span>{{ branch.name }}</span>
                   </div>
                 </ng-template>
               </p-select>
-              <small class="text-muted-color block mt-1">
+              <small class="text-color-secondary block mt-1">
                 {{ filteredBranches().length }} permitted branch{{
                   filteredBranches().length !== 1 ? 'es' : ''
                 }}
@@ -4323,20 +4376,20 @@ class UserActionSelectorComponent {
       @if (selectedUserId()) {
         <!-- Loading State -->
         @if (loading()) {
-          <div class="flex justify-center p-5">
-            <i class="pi pi-spin pi-spinner text-4xl"></i>
+          <div class="flex justify-content-center p-5">
+            <i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
           </div>
         }
 
         <!-- Action List -->
         @if (!loading() && actions().length > 0) {
-          <div class="surface-card p-4 rounded-border shadow-sm">
+          <div class="surface-card p-4 border-round shadow-1">
             <div
-              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
+              class="flex flex-column md:flex-row justify-content-between align-items-start md:align-items-center gap-3 mb-4"
             >
               <div>
                 <h5 class="m-0 mb-1">Direct Action Permissions</h5>
-                <p class="text-sm text-muted-color m-0">
+                <p class="text-sm text-color-secondary m-0">
                   {{ actions().length }} actions available
                 </p>
               </div>
@@ -4358,7 +4411,6 @@ class UserActionSelectorComponent {
                   (onClick)="deselectAll()"
                 />
                 <p-button
-                  *hasPermission="USER_ACTION_PERMISSIONS.ASSIGN"
                   label="Save Changes"
                   icon="pi pi-save"
                   [disabled]="!canSave()"
@@ -4370,52 +4422,34 @@ class UserActionSelectorComponent {
               </div>
             </div>
 
-            <!-- Validation Warning -->
-            @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>
-                  <div class="flex-1">
-                    <span class="font-semibold">Validation Warning:</span>
-                    <p class="text-sm mt-1 mb-0">
-                      {{ invalidActionsCount() }} selected
-                      action{{ invalidActionsCount() > 1 ? 's have' : ' has' }}
-                      unmet prerequisites. Fix before saving or use auto-fix on
-                      save.
-                    </p>
-                  </div>
-                </div>
-              </div>
-            }
-
             <!-- Action Tree Table -->
-            <div class="overflow-x-auto -mx-4 sm:mx-0">
-              <p-treeTable
-                [value]="treeNodes()"
-                dataKey="id"
-                styleClass="p-treetable-sm"
-                [tableStyle]="{ 'min-width': '50rem' }"
-              >
-                <ng-template #header>
-                  <tr>
-                    <th class="w-12">
-                      <p-checkbox
-                        [ngModel]="allSelected()"
-                        [binary]="true"
-                        (ngModelChange)="toggleAll()"
-                        pTooltip="Select/Deselect All"
-                        tooltipPosition="top"
-                      />
-                    </th>
-                    <th>Name</th>
-                    <th class="hidden md:table-cell">Code</th>
-                    <th>Type</th>
-                    <th class="hidden lg:table-cell">Description</th>
-                  </tr>
-                </ng-template>
-              <ng-template #body let-rowNode let-rowData="rowData">
-                <tr [class.highlight-warning]="hasUnmetPrerequisites(rowData)">
-                  <td class="w-12">
+            <p-treeTable
+              [value]="treeNodes()"
+              [scrollable]="true"
+              scrollHeight="flex"
+              dataKey="id"
+              styleClass="p-treetable-sm"
+            >
+              <ng-template pTemplate="header">
+                <tr>
+                  <th style="width: 3rem">
+                    <p-checkbox
+                      [ngModel]="allSelected()"
+                      [binary]="true"
+                      (ngModelChange)="toggleAll()"
+                      pTooltip="Select/Deselect All"
+                      tooltipPosition="top"
+                    />
+                  </th>
+                  <th>Name</th>
+                  <th>Code</th>
+                  <th>Type</th>
+                  <th>Description</th>
+                </tr>
+              </ng-template>
+              <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
+                <tr>
+                  <td style="width: 3rem">
                     <p-checkbox
                       [ngModel]="selectionMap()[rowData.id]"
                       [binary]="true"
@@ -4426,18 +4460,9 @@ class UserActionSelectorComponent {
                   </td>
                   <td>
                     <p-treeTableToggler [rowNode]="rowNode" />
-                    <span class="inline-flex items-center gap-2">
-                      {{ rowData.name }}
-                      @if (hasUnmetPrerequisites(rowData)) {
-                        <i
-                          class="pi pi-exclamation-triangle text-orange-500"
-                          pTooltip="This action has unmet prerequisites and will fail validation on save"
-                          tooltipPosition="top"
-                        ></i>
-                      }
-                    </span>
+                    <span>{{ rowData.name }}</span>
                   </td>
-                  <td class="hidden md:table-cell">{{ rowData.code || '-' }}</td>
+                  <td>{{ rowData.code || '-' }}</td>
                   <td>
                     <p-tag
                       [value]="rowData.actionType"
@@ -4446,12 +4471,12 @@ class UserActionSelectorComponent {
                       "
                     />
                   </td>
-                  <td class="hidden lg:table-cell">{{ rowData.description || '-' }}</td>
+                  <td>{{ rowData.description || '-' }}</td>
                 </tr>
               </ng-template>
-              <ng-template #emptymessage>
+              <ng-template pTemplate="emptymessage">
                 <tr>
-                  <td colspan="5" class="text-center p-4 text-muted-color">
+                  <td colspan="5" class="text-center p-4">
                     @if (loading()) {
                       <i class="pi pi-spin pi-spinner"></i> Loading actions...
                     } @else {
@@ -4460,23 +4485,24 @@ class UserActionSelectorComponent {
                   </td>
                 </tr>
               </ng-template>
-              </p-treeTable>
-            </div>
+            </p-treeTable>
           </div>
 
           <!-- Change Summary -->
           @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>
-                <span class="font-bold">Pending Changes</span>
+            <div class="surface-border border-1 border-round p-3 mt-4">
+              <div class="flex align-items-center gap-2 mb-3">
+                <i class="pi pi-info-circle text-primary content-center"></i>
+                <p class="m-0 mb-1 font-bold">Pending Changes</p>
               </div>
-              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div class="flex flex-col md:flex-row gap-4">
                 @if (pendingAdd().length > 0) {
-                  <div>
-                    <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-plus-circle text-green-500"></i>
-                      <strong class="text-sm">To Assign ({{ pendingAdd().length }})</strong>
+                  <div class="w-full md:w-1/2">
+                    <div class="flex align-items-center gap-2 mb-2">
+                      <i class="pi pi-plus-circle text-success"></i>
+                      <strong class="text-sm"
+                        >To Assign ({{ pendingAdd().length }})</strong
+                      >
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (action of pendingAdd(); track action.id) {
@@ -4486,10 +4512,12 @@ class UserActionSelectorComponent {
                   </div>
                 }
                 @if (pendingRemove().length > 0) {
-                  <div>
-                    <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-minus-circle text-red-500"></i>
-                      <strong class="text-sm">To Remove ({{ pendingRemove().length }})</strong>
+                  <div class="w-full md:w-1/2">
+                    <div class="flex align-items-center gap-2 mb-2">
+                      <i class="pi pi-minus-circle text-danger"></i>
+                      <strong class="text-sm"
+                        >To Remove ({{ pendingRemove().length }})</strong
+                      >
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (action of pendingRemove(); track action.id) {
@@ -4504,46 +4532,47 @@ class UserActionSelectorComponent {
         }
 
         @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>
-            <p class="text-muted-color m-0">
+          <div class="surface-card p-5 border-round shadow-1 text-center">
+            <i
+              class="pi pi-info-circle text-color-secondary mb-3"
+              style="font-size: 3rem; display: block;"
+            ></i>
+            <p class="text-color-secondary m-0">
               No actions available for this user.
             </p>
           </div>
         }
       }
     </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: 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: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "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", "styleClass", "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", "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: ["styleClass", "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", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i7.TreeTable, selector: "p-treeTable, p-treetable, p-tree-table", inputs: ["columns", "styleClass", "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", "contextMenuSelectionMode", "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", "virtualRowHeight", "selectionKeys", "showGridlines"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "component", type: i7.TreeTableToggler, selector: "p-treeTableToggler, p-treetabletoggler, p-treetable-toggler", inputs: ["rowNode"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "component", type: UserSelectComponent, selector: "lib-user-select", inputs: ["loadUsers", "placeHolder", "isEditMode", "filterActive", "additionalFilters", "pageSize", "value"], outputs: ["valueChange", "userSelected", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "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", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i6.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i8.TreeTable, selector: "p-treeTable, p-treetable, p-tree-table", inputs: ["columns", "styleClass", "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", "contextMenuSelectionMode", "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", "virtualRowHeight", "selectionKeys", "showGridlines"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "component", type: i8.TreeTableToggler, selector: "p-treeTableToggler, p-treetabletoggler, p-treetable-toggler", inputs: ["rowNode"] }, { kind: "component", type: UserSelectComponent, selector: "lib-user-select", inputs: ["loadUsers", "placeHolder", "isEditMode", "filterActive", "additionalFilters", "pageSize", "value"], outputs: ["valueChange", "userSelected", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserActionSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'flusys-user-action-selector', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, PrimeModule, HasPermissionDirective, UserSelectComponent], template: `
+            args: [{ selector: 'flusys-user-action-selector', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, PrimeModule, UserSelectComponent], template: `
     <div class="user-action-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">
+      <div class="surface-card p-4 border-round mb-4 shadow-1">
+        <div class="formgrid grid gap-5">
+          <div class="field col-12 sm:col-6 mb-0">
+            <label class="block font-semibold mb-2 text-900">
               <i class="pi pi-user mr-2 text-primary"></i>
               Select User
             </label>
             <lib-user-select
-              [value]="selectedUserId()"
-              (valueChange)="selectedUserId.set($event)"
+              [(value)]="selectedUserId"
               [isEditMode]="true"
               placeHolder="Select a user"
             />
           </div>
 
           @if (showBranchSelector()) {
-            <div>
-              <label class="block font-semibold mb-2">
+            <div class="field col-12 sm:col-6 mb-0">
+              <label class="block font-semibold mb-2 text-900">
                 <i class="pi pi-building mr-2 text-primary"></i>
                 Select Branch
               </label>
               <p-select
-                [ngModel]="selectedBranchId()"
-                (ngModelChange)="selectedBranchId.set($event)"
+                [(ngModel)]="selectedBranchId"
                 [options]="filteredBranches()"
                 optionLabel="name"
                 optionValue="id"
@@ -4554,20 +4583,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
               >
                 <ng-template #selectedItem let-branch>
                   @if (branch) {
-                    <div class="flex items-center gap-2">
+                    <div class="flex align-items-center gap-2">
                       <i class="pi pi-building text-primary"></i>
                       <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>
+                  <div class="flex align-items-center gap-2">
+                    <i class="pi pi-building text-color-secondary"></i>
                     <span>{{ branch.name }}</span>
                   </div>
                 </ng-template>
               </p-select>
-              <small class="text-muted-color block mt-1">
+              <small class="text-color-secondary block mt-1">
                 {{ filteredBranches().length }} permitted branch{{
                   filteredBranches().length !== 1 ? 'es' : ''
                 }}
@@ -4581,20 +4610,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
       @if (selectedUserId()) {
         <!-- Loading State -->
         @if (loading()) {
-          <div class="flex justify-center p-5">
-            <i class="pi pi-spin pi-spinner text-4xl"></i>
+          <div class="flex justify-content-center p-5">
+            <i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
           </div>
         }
 
         <!-- Action List -->
         @if (!loading() && actions().length > 0) {
-          <div class="surface-card p-4 rounded-border shadow-sm">
+          <div class="surface-card p-4 border-round shadow-1">
             <div
-              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
+              class="flex flex-column md:flex-row justify-content-between align-items-start md:align-items-center gap-3 mb-4"
             >
               <div>
                 <h5 class="m-0 mb-1">Direct Action Permissions</h5>
-                <p class="text-sm text-muted-color m-0">
+                <p class="text-sm text-color-secondary m-0">
                   {{ actions().length }} actions available
                 </p>
               </div>
@@ -4616,7 +4645,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   (onClick)="deselectAll()"
                 />
                 <p-button
-                  *hasPermission="USER_ACTION_PERMISSIONS.ASSIGN"
                   label="Save Changes"
                   icon="pi pi-save"
                   [disabled]="!canSave()"
@@ -4628,52 +4656,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
               </div>
             </div>
 
-            <!-- Validation Warning -->
-            @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>
-                  <div class="flex-1">
-                    <span class="font-semibold">Validation Warning:</span>
-                    <p class="text-sm mt-1 mb-0">
-                      {{ invalidActionsCount() }} selected
-                      action{{ invalidActionsCount() > 1 ? 's have' : ' has' }}
-                      unmet prerequisites. Fix before saving or use auto-fix on
-                      save.
-                    </p>
-                  </div>
-                </div>
-              </div>
-            }
-
             <!-- Action Tree Table -->
-            <div class="overflow-x-auto -mx-4 sm:mx-0">
-              <p-treeTable
-                [value]="treeNodes()"
-                dataKey="id"
-                styleClass="p-treetable-sm"
-                [tableStyle]="{ 'min-width': '50rem' }"
-              >
-                <ng-template #header>
-                  <tr>
-                    <th class="w-12">
-                      <p-checkbox
-                        [ngModel]="allSelected()"
-                        [binary]="true"
-                        (ngModelChange)="toggleAll()"
-                        pTooltip="Select/Deselect All"
-                        tooltipPosition="top"
-                      />
-                    </th>
-                    <th>Name</th>
-                    <th class="hidden md:table-cell">Code</th>
-                    <th>Type</th>
-                    <th class="hidden lg:table-cell">Description</th>
-                  </tr>
-                </ng-template>
-              <ng-template #body let-rowNode let-rowData="rowData">
-                <tr [class.highlight-warning]="hasUnmetPrerequisites(rowData)">
-                  <td class="w-12">
+            <p-treeTable
+              [value]="treeNodes()"
+              [scrollable]="true"
+              scrollHeight="flex"
+              dataKey="id"
+              styleClass="p-treetable-sm"
+            >
+              <ng-template pTemplate="header">
+                <tr>
+                  <th style="width: 3rem">
+                    <p-checkbox
+                      [ngModel]="allSelected()"
+                      [binary]="true"
+                      (ngModelChange)="toggleAll()"
+                      pTooltip="Select/Deselect All"
+                      tooltipPosition="top"
+                    />
+                  </th>
+                  <th>Name</th>
+                  <th>Code</th>
+                  <th>Type</th>
+                  <th>Description</th>
+                </tr>
+              </ng-template>
+              <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
+                <tr>
+                  <td style="width: 3rem">
                     <p-checkbox
                       [ngModel]="selectionMap()[rowData.id]"
                       [binary]="true"
@@ -4684,18 +4694,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   </td>
                   <td>
                     <p-treeTableToggler [rowNode]="rowNode" />
-                    <span class="inline-flex items-center gap-2">
-                      {{ rowData.name }}
-                      @if (hasUnmetPrerequisites(rowData)) {
-                        <i
-                          class="pi pi-exclamation-triangle text-orange-500"
-                          pTooltip="This action has unmet prerequisites and will fail validation on save"
-                          tooltipPosition="top"
-                        ></i>
-                      }
-                    </span>
+                    <span>{{ rowData.name }}</span>
                   </td>
-                  <td class="hidden md:table-cell">{{ rowData.code || '-' }}</td>
+                  <td>{{ rowData.code || '-' }}</td>
                   <td>
                     <p-tag
                       [value]="rowData.actionType"
@@ -4704,12 +4705,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                       "
                     />
                   </td>
-                  <td class="hidden lg:table-cell">{{ rowData.description || '-' }}</td>
+                  <td>{{ rowData.description || '-' }}</td>
                 </tr>
               </ng-template>
-              <ng-template #emptymessage>
+              <ng-template pTemplate="emptymessage">
                 <tr>
-                  <td colspan="5" class="text-center p-4 text-muted-color">
+                  <td colspan="5" class="text-center p-4">
                     @if (loading()) {
                       <i class="pi pi-spin pi-spinner"></i> Loading actions...
                     } @else {
@@ -4718,23 +4719,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   </td>
                 </tr>
               </ng-template>
-              </p-treeTable>
-            </div>
+            </p-treeTable>
           </div>
 
           <!-- Change Summary -->
           @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>
-                <span class="font-bold">Pending Changes</span>
+            <div class="surface-border border-1 border-round p-3 mt-4">
+              <div class="flex align-items-center gap-2 mb-3">
+                <i class="pi pi-info-circle text-primary content-center"></i>
+                <p class="m-0 mb-1 font-bold">Pending Changes</p>
               </div>
-              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div class="flex flex-col md:flex-row gap-4">
                 @if (pendingAdd().length > 0) {
-                  <div>
-                    <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-plus-circle text-green-500"></i>
-                      <strong class="text-sm">To Assign ({{ pendingAdd().length }})</strong>
+                  <div class="w-full md:w-1/2">
+                    <div class="flex align-items-center gap-2 mb-2">
+                      <i class="pi pi-plus-circle text-success"></i>
+                      <strong class="text-sm"
+                        >To Assign ({{ pendingAdd().length }})</strong
+                      >
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (action of pendingAdd(); track action.id) {
@@ -4744,10 +4746,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   </div>
                 }
                 @if (pendingRemove().length > 0) {
-                  <div>
-                    <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-minus-circle text-red-500"></i>
-                      <strong class="text-sm">To Remove ({{ pendingRemove().length }})</strong>
+                  <div class="w-full md:w-1/2">
+                    <div class="flex align-items-center gap-2 mb-2">
+                      <i class="pi pi-minus-circle text-danger"></i>
+                      <strong class="text-sm"
+                        >To Remove ({{ pendingRemove().length }})</strong
+                      >
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (action of pendingRemove(); track action.id) {
@@ -4762,16 +4766,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", 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>
-            <p class="text-muted-color m-0">
+          <div class="surface-card p-5 border-round shadow-1 text-center">
+            <i
+              class="pi pi-info-circle text-color-secondary mb-3"
+              style="font-size: 3rem; display: block;"
+            ></i>
+            <p class="text-color-secondary m-0">
               No actions available for this user.
             </p>
           </div>
         }
       }
     </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}\n"] }]
         }], ctorParameters: () => [] });
 
 // Logic Builder Component
@@ -4870,7 +4877,7 @@ function provideIamProviders() {
 const IAM_ROUTES = [
     {
         path: '',
-        loadComponent: () => import('./flusys-ng-iam-iam-container.component-Bn4kQtxW.mjs').then((m) => m.IamContainerComponent),
+        loadComponent: () => import('./flusys-ng-iam-iam-container.component-BkhqmzLi.mjs').then((m) => m.IamContainerComponent),
         children: [
             // Actions Management
             {
@@ -4878,15 +4885,15 @@ const IAM_ROUTES = [
                 children: [
                     {
                         path: '',
-                        loadComponent: () => import('./flusys-ng-iam-action-list-page.component-Daf93zpS.mjs').then((m) => m.ActionListPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-action-list-page.component-BCzSardO.mjs').then((m) => m.ActionListPageComponent),
                     },
                     {
                         path: 'new',
-                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-C_BRrrWW.mjs').then((m) => m.ActionFormPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-C1j10Qhw.mjs').then((m) => m.ActionFormPageComponent),
                     },
                     {
                         path: ':id',
-                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-C_BRrrWW.mjs').then((m) => m.ActionFormPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-C1j10Qhw.mjs').then((m) => m.ActionFormPageComponent),
                     },
                 ],
             },
@@ -4896,22 +4903,22 @@ const IAM_ROUTES = [
                 children: [
                     {
                         path: '',
-                        loadComponent: () => import('./flusys-ng-iam-role-list-page.component-CFly5KnH.mjs').then((m) => m.RoleListPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-role-list-page.component-BObCxHiB.mjs').then((m) => m.RoleListPageComponent),
                     },
                     {
                         path: 'new',
-                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-ByNueI1a.mjs').then((m) => m.RoleFormPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-Cqziu_BM.mjs').then((m) => m.RoleFormPageComponent),
                     },
                     {
                         path: ':id',
-                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-ByNueI1a.mjs').then((m) => m.RoleFormPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-Cqziu_BM.mjs').then((m) => m.RoleFormPageComponent),
                     },
                 ],
             },
             // Permissions Management (User permission assignment)
             {
                 path: 'permissions',
-                loadComponent: () => import('./flusys-ng-iam-permission-page.component-CmxOBJPu.mjs').then((m) => m.PermissionPageComponent),
+                loadComponent: () => import('./flusys-ng-iam-permission-page.component-BSQFPt_N.mjs').then((m) => m.PermissionPageComponent),
             },
             // Default redirect to actions
             {
@@ -4930,4 +4937,4 @@ const IAM_ROUTES = [
  */
 
 export { ActionApiService as A, CompanyActionSelectorComponent as C, IAM_ROUTES 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, MyPermissionsApiService as f, PermissionStateService as g, ProfilePermissionProviderAdapter as h, provideIamProviders as p };
-//# sourceMappingURL=flusys-ng-iam-flusys-ng-iam-BPIpfrjN.mjs.map
+//# sourceMappingURL=flusys-ng-iam-flusys-ng-iam-DISrddPh.mjs.map