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

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

@@ -1,23 +1,21 @@
 import * as i0 from '@angular/core';
-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 } from '@flusys/ng-shared';
+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 { APP_CONFIG, BaseApiService, isCompanyFeatureEnabled } from '@flusys/ng-core';
-import * as i3$1 from 'primeng/api';
 import { ConfirmationService, MessageService } from 'primeng/api';
-import { of, firstValueFrom } from 'rxjs';
+import { of, firstValueFrom, map as map$1 } from 'rxjs';
 import { tap, catchError, map } from 'rxjs/operators';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i3 from 'primeng/button';
-import { ButtonModule } from 'primeng/button';
-import * as i5 from 'primeng/tooltip';
-import * as i2 from 'primeng/tag';
-import * as i6 from 'primeng/checkbox';
-import * as i7 from 'primeng/select';
-import * as i8 from 'primeng/treetable';
+import * as i2 from 'primeng/button';
+import * as i6 from 'primeng/tooltip';
+import * as i3 from 'primeng/checkbox';
+import * as i4 from 'primeng/select';
+import * as i5 from 'primeng/tag';
+import * as i7 from 'primeng/treetable';
 import { LAYOUT_AUTH_STATE } from '@flusys/ng-layout';
 import * as i5$1 from 'primeng/table';
 
@@ -83,11 +81,11 @@ class ActionApiService extends ApiResourceService {
     }
     /**
      * Get actions for permission assignment
-     * GET /iam/actions/tree-for-permission
+     * POST /iam/actions/tree-for-permission
      * Returns actions filtered by company whitelist if enabled
      */
     getActionsForPermission() {
-        return this.http.get(`${this.appConfig.apiBaseUrl}/iam/actions/tree-for-permission`);
+        return this.http.post(`${this.appConfig.apiBaseUrl}/iam/actions/tree-for-permission`, {});
     }
     /**
      * Get actions in hierarchical tree structure
@@ -835,14 +833,10 @@ class PermissionApiService extends BaseApiService {
     }
     /**
      * Get user's direct action permissions
-     * GET /permissions/user-actions/:userId
+     * POST /iam/permissions/get-user-actions
      */
     getUserActions(userId, query) {
-        let params = new HttpParams();
-        if (query?.branchId) {
-            params = params.set('branchId', query.branchId);
-        }
-        return this.http.get(this.getUrl(`permissions/user-actions/${userId}`), { params });
+        return this.http.post(this.getUrl('permissions/get-user-actions'), { userId, branchId: query?.branchId });
     }
     // =============================================================================
     // User → Role (Role Assignments)
@@ -856,14 +850,10 @@ class PermissionApiService extends BaseApiService {
     }
     /**
      * Get user's role assignments
-     * GET /permissions/user-roles/:userId
+     * POST /iam/permissions/get-user-roles
      */
     getUserRoles(userId, query) {
-        let params = new HttpParams();
-        if (query?.branchId) {
-            params = params.set('branchId', query.branchId);
-        }
-        return this.http.get(this.getUrl(`permissions/user-roles/${userId}`), { params });
+        return this.http.post(this.getUrl('permissions/get-user-roles'), { userId, branchId: query?.branchId });
     }
     // =============================================================================
     // Role → Action (Role Permissions)
@@ -877,10 +867,10 @@ class PermissionApiService extends BaseApiService {
     }
     /**
      * Get role's action permissions
-     * GET /permissions/role-actions/:roleId
+     * POST /iam/permissions/get-role-actions
      */
     getRoleActions(roleId, query) {
-        return this.http.get(this.getUrl(`permissions/role-actions/${roleId}`));
+        return this.http.post(this.getUrl('permissions/get-role-actions'), { roleId });
     }
     // =============================================================================
     // Company → Action (Company Whitelisting)
@@ -894,10 +884,10 @@ class PermissionApiService extends BaseApiService {
     }
     /**
      * Get company's whitelisted actions
-     * GET /permissions/company-actions/:companyId
+     * POST /iam/permissions/get-company-actions
      */
     getCompanyActions(companyId) {
-        return this.http.get(this.getUrl(`permissions/company-actions/${companyId}`));
+        return this.http.post(this.getUrl('permissions/get-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' });
@@ -1037,77 +1027,85 @@ class LogicBuilderComponent {
     actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : []));
     logicChange = output();
     availableActions = computed(() => this.actions(), ...(ngDevMode ? [{ debugName: "availableActions" }] : []));
-    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" }] : []));
+    /** 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 });
+    }
     initializeLogic() {
-        this.builderTree = {
+        this._builderTree.set({
             id: crypto.randomUUID(),
             type: 'group',
             operator: 'AND',
             children: [],
-        };
+        });
         this.emitChange();
     }
     clearLogic() {
-        this.builderTree = null;
+        this._builderTree.set(null);
         this.logicChange.emit(null);
     }
     toggleOperator(nodeId) {
-        if (!this.builderTree)
+        const tree = this._builderTree();
+        if (!tree)
             return;
-        this.builderTree = this.updateNodeInTree(this.builderTree, nodeId, (node) => ({
+        this._builderTree.set(this.updateNodeInTree(tree, nodeId, (node) => ({
             ...node,
             operator: node.operator === 'AND' ? 'OR' : 'AND',
-        }));
+        })));
         this.emitChange();
     }
     addChildNode(parentId, type) {
-        if (!this.builderTree)
+        const tree = this._builderTree();
+        if (!tree)
             return;
         const newNode = type === 'group'
             ? { id: crypto.randomUUID(), type: 'group', operator: 'AND', children: [] }
             : { id: crypto.randomUUID(), type: 'action', actionId: '' };
-        this.builderTree = this.updateNodeInTree(this.builderTree, parentId, (node) => ({
+        this._builderTree.set(this.updateNodeInTree(tree, parentId, (node) => ({
             ...node,
             children: [...(node.children || []), newNode],
-        }));
+        })));
         this.emitChange();
     }
     removeNode(nodeId) {
-        if (!this.builderTree)
+        const tree = this._builderTree();
+        if (!tree)
             return;
-        if (this.builderTree.id === nodeId) {
+        if (tree.id === nodeId) {
             this.clearLogic();
             return;
         }
-        this.builderTree = this.removeNodeFromTree(this.builderTree, nodeId);
+        this._builderTree.set(this.removeNodeFromTree(tree, nodeId));
         this.emitChange();
     }
     updateActionId(nodeId, actionId) {
-        if (!this.builderTree)
+        const tree = this._builderTree();
+        if (!tree)
             return;
-        this.builderTree = this.updateNodeInTree(this.builderTree, nodeId, (node) => ({
+        this._builderTree.set(this.updateNodeInTree(tree, nodeId, (node) => ({
             ...node,
             actionId,
-        }));
+        })));
         this.emitChange();
     }
     emitChange() {
-        if (!this.builderTree) {
+        const tree = this._builderTree();
+        if (!tree) {
             this.logicChange.emit(null);
             return;
         }
-        this.logicChange.emit(toLogicNode(this.builderTree));
+        this.logicChange.emit(toLogicNode(tree));
     }
     updateNodeInTree(node, targetId, updater) {
         if (node.id === targetId)
@@ -1135,7 +1133,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">Permission Logic</h4>
+        <h4 class="text-sm font-semibold m-0">Permission Logic</h4>
         @if (!builderLogic()) {
           <p-button
             label="Add Logic"
@@ -1154,13 +1152,13 @@ class LogicBuilderComponent {
       </div>
 
       @if (builderLogic()) {
-        <div class="border rounded p-3 bg-gray-50">
-          <div class="mb-3 text-sm text-gray-600">
+        <div class="border border-surface 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="logic-tree bg-white rounded border">
+          <div class="text-sm bg-surface-0 rounded border border-surface">
             <ng-container *ngTemplateOutlet="nodeTemplate; context: { $implicit: builderLogic()!, depth: 0 }"></ng-container>
           </div>
         </div>
@@ -1169,11 +1167,11 @@ class LogicBuilderComponent {
 
     <!-- Recursive Node Template -->
     <ng-template #nodeTemplate let-node let-depth="depth">
-      <div class="node" [style.background-color]="depth % 2 === 0 ? '#ffffff' : '#f9fafb'">
-        <div class="node-header">
+      <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">
           <span class="node-type" [ngClass]="node.type">{{ node.type.toUpperCase() }}</span>
 
-          <div class="node-content">
+          <div class="flex-1 flex items-center gap-2">
             @if (node.type === 'group') {
               <!-- Group: show operator toggle -->
               <span
@@ -1183,13 +1181,13 @@ class LogicBuilderComponent {
                 title="Click to toggle">
                 {{ node.operator }}
               </span>
-              <span class="text-gray-600 text-xs">({{ node.children?.length || 0 }} conditions)</span>
+              <span class="text-muted-color text-xs">({{ node.children?.length || 0 }} conditions)</span>
             }
 
             @if (node.type === 'action') {
               <!-- Action: show action selector -->
               <select
-                class="flex-1"
+                class="action-select flex-1 p-2 border border-surface rounded text-sm"
                 [ngModel]="node.actionId"
                 (ngModelChange)="updateActionId(node.id, $event)">
                 <option [value]="null">Select Action... ({{ availableActions().length }} available)</option>
@@ -1200,7 +1198,7 @@ class LogicBuilderComponent {
             }
           </div>
 
-          <div class="node-actions">
+          <div class="flex gap-1">
             <p-button
               icon="pi pi-trash"
               [text]="true"
@@ -1213,7 +1211,7 @@ class LogicBuilderComponent {
 
         <!-- Children for group nodes -->
         @if (node.type === 'group' && node.children && node.children.length > 0) {
-          <div class="node-children">
+          <div class="ml-5 mt-2 pl-3 border-l-2 border-surface">
             @for (child of node.children; track child.id) {
               <ng-container *ngTemplateOutlet="nodeTemplate; context: { $implicit: child, depth: depth + 1 }"></ng-container>
             }
@@ -1222,9 +1220,9 @@ class LogicBuilderComponent {
 
         <!-- Add child buttons for group nodes -->
         @if (node.type === 'group') {
-          <div class="add-child-section">
-            <div class="text-xs font-semibold text-gray-600 mb-2">Add Condition:</div>
-            <div class="add-child-buttons">
+          <div class="mt-3 p-3 bg-surface-50 rounded border border-dashed border-surface">
+            <div class="text-xs font-semibold text-muted-color mb-2">Add Condition:</div>
+            <div class="flex gap-2 flex-wrap">
               <p-button
                 label="Group"
                 icon="pi pi-sitemap"
@@ -1243,14 +1241,14 @@ class LogicBuilderComponent {
         }
       </div>
     </ng-template>
-  `, isInline: true, styles: [":host{display:block}.logic-tree{font-size:.875rem}.node{padding:.75rem;border-bottom:1px solid #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:#dbeafe;color:#1e40af}.node-type.action{background-color:#d1fae5;color:#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 #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:#fef3c7;color:#92400e}.operator-badge.or{background-color:#e0e7ff;color:#3730a3}.operator-badge:hover{opacity:.8}select{padding:.375rem .75rem;border:1px solid #d1d5db;border-radius:.375rem;font-size:.875rem;background-color:#fff}select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.add-child-section{margin-top:.75rem;padding:.75rem;background-color:#f9fafb;border-radius:.375rem;border:1px dashed #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: i3.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: i5.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 });
+  `, 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 });
 }
 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: [CommonModule, FormsModule, AngularModule, PrimeModule, ButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'lib-logic-builder', standalone: true, imports: [AngularModule, PrimeModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div class="logic-builder">
       <div class="flex justify-between items-center mb-3">
-        <h4 class="text-sm font-semibold">Permission Logic</h4>
+        <h4 class="text-sm font-semibold m-0">Permission Logic</h4>
         @if (!builderLogic()) {
           <p-button
             label="Add Logic"
@@ -1269,13 +1267,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
       </div>
 
       @if (builderLogic()) {
-        <div class="border rounded p-3 bg-gray-50">
-          <div class="mb-3 text-sm text-gray-600">
+        <div class="border border-surface 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="logic-tree bg-white rounded border">
+          <div class="text-sm bg-surface-0 rounded border border-surface">
             <ng-container *ngTemplateOutlet="nodeTemplate; context: { $implicit: builderLogic()!, depth: 0 }"></ng-container>
           </div>
         </div>
@@ -1284,11 +1282,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="node" [style.background-color]="depth % 2 === 0 ? '#ffffff' : '#f9fafb'">
-        <div class="node-header">
+      <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">
           <span class="node-type" [ngClass]="node.type">{{ node.type.toUpperCase() }}</span>
 
-          <div class="node-content">
+          <div class="flex-1 flex items-center gap-2">
             @if (node.type === 'group') {
               <!-- Group: show operator toggle -->
               <span
@@ -1298,13 +1296,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 title="Click to toggle">
                 {{ node.operator }}
               </span>
-              <span class="text-gray-600 text-xs">({{ node.children?.length || 0 }} conditions)</span>
+              <span class="text-muted-color text-xs">({{ node.children?.length || 0 }} conditions)</span>
             }
 
             @if (node.type === 'action') {
               <!-- Action: show action selector -->
               <select
-                class="flex-1"
+                class="action-select flex-1 p-2 border border-surface rounded text-sm"
                 [ngModel]="node.actionId"
                 (ngModelChange)="updateActionId(node.id, $event)">
                 <option [value]="null">Select Action... ({{ availableActions().length }} available)</option>
@@ -1315,7 +1313,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }
           </div>
 
-          <div class="node-actions">
+          <div class="flex gap-1">
             <p-button
               icon="pi pi-trash"
               [text]="true"
@@ -1328,7 +1326,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="node-children">
+          <div class="ml-5 mt-2 pl-3 border-l-2 border-surface">
             @for (child of node.children; track child.id) {
               <ng-container *ngTemplateOutlet="nodeTemplate; context: { $implicit: child, depth: depth + 1 }"></ng-container>
             }
@@ -1337,9 +1335,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 
         <!-- Add child buttons for group nodes -->
         @if (node.type === 'group') {
-          <div class="add-child-section">
-            <div class="text-xs font-semibold text-gray-600 mb-2">Add Condition:</div>
-            <div class="add-child-buttons">
+          <div class="mt-3 p-3 bg-surface-50 rounded border border-dashed border-surface">
+            <div class="text-xs font-semibold text-muted-color mb-2">Add Condition:</div>
+            <div class="flex gap-2 flex-wrap">
               <p-button
                 label="Group"
                 icon="pi pi-sitemap"
@@ -1358,8 +1356,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         }
       </div>
     </ng-template>
-  `, styles: [":host{display:block}.logic-tree{font-size:.875rem}.node{padding:.75rem;border-bottom:1px solid #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:#dbeafe;color:#1e40af}.node-type.action{background-color:#d1fae5;color:#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 #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:#fef3c7;color:#92400e}.operator-badge.or{background-color:#e0e7ff;color:#3730a3}.operator-badge:hover{opacity:.8}select{padding:.375rem .75rem;border:1px solid #d1d5db;border-radius:.375rem;font-size:.875rem;background-color:#fff}select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.add-child-section{margin-top:.75rem;padding:.75rem;background-color:#f9fafb;border-radius:.375rem;border:1px dashed #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"] }] } });
+  `, 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"] }] } });
 
 /**
  * Tree Utility Functions
@@ -1556,7 +1554,10 @@ 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);
@@ -1637,6 +1638,10 @@ 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();
@@ -1646,11 +1651,7 @@ class RoleActionSelectorComponent {
                 this.loadDataAbortController = new AbortController();
                 this.onRoleChange(this.loadDataAbortController.signal).catch((err) => {
                     if (err.name !== 'AbortError') {
-                        this.messageService.add({
-                            severity: 'error',
-                            summary: 'Error',
-                            detail: 'Failed to load role permissions. Please refresh.',
-                        });
+                        // Error toast handled by global interceptor
                         this.loading.set(false);
                     }
                 });
@@ -1660,9 +1661,6 @@ class RoleActionSelectorComponent {
             }
         });
     }
-    ngOnDestroy() {
-        this.loadDataAbortController?.abort();
-    }
     /**
      * Load roles from API
      */
@@ -1674,11 +1672,7 @@ class RoleActionSelectorComponent {
             this.roles.set(response?.data ?? []);
         }
         catch {
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: 'Failed to load roles',
-            });
+            // Error toast handled by global interceptor
         }
     }
     /**
@@ -1836,13 +1830,8 @@ class RoleActionSelectorComponent {
             // Update baseline
             this._initialSelection.set({ ...this.selectionMap() });
         }
-        catch (err) {
-            const error = err;
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: error?.error?.message || 'Failed to update role permissions',
-            });
+        catch {
+            // Error toast handled by global interceptor
         }
         finally {
             this.saving.set(false);
@@ -1862,11 +1851,12 @@ class RoleActionSelectorComponent {
     <div class="role-action-selector">
       <!-- Role Selector -->
       <div class="mb-4">
-        <div class="grid">
-          <div class="col-12 md:col-6 lg:col-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div>
             <label class="block font-semibold mb-2">Select Role</label>
             <p-select
-              [(ngModel)]="selectedRoleId"
+              [ngModel]="selectedRoleId()"
+              (ngModelChange)="selectedRoleId.set($event)"
               [options]="roles()"
               optionLabel="name"
               optionValue="id"
@@ -1883,24 +1873,21 @@ class RoleActionSelectorComponent {
         <!-- Loading State -->
         @if (loading()) {
           <div
-            class="surface-card p-5 border-round shadow-1 flex justify-content-center"
+            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
           >
-            <i
-              class="pi pi-spin pi-spinner text-primary"
-              style="font-size: 3rem"
-            ></i>
+            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
           </div>
         }
 
         <!-- Action List -->
         @if (!loading() && actions().length > 0) {
-          <div class="surface-card p-4 border-round shadow-1">
+          <div class="surface-card p-4 rounded-border shadow-sm">
             <div
-              class="flex flex-column md:flex-row justify-content-between align-items-start md:align-items-center gap-3 mb-4"
+              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
             >
               <div>
                 <h5 class="m-0 mb-1">Action Permissions</h5>
-                <p class="text-sm text-color-secondary m-0">
+                <p class="text-sm text-muted-color m-0">
                   {{ actions().length }} actions available
                 </p>
               </div>
@@ -1922,6 +1909,7 @@ class RoleActionSelectorComponent {
                   (onClick)="deselectAll()"
                 />
                 <p-button
+                  *hasPermission="ROLE_ACTION_PERMISSIONS.ASSIGN"
                   label="Save Changes"
                   icon="pi pi-save"
                   [disabled]="!canSave()"
@@ -1935,14 +1923,12 @@ class RoleActionSelectorComponent {
 
             <!-- Validation Warning -->
             @if (invalidActionsCount() > 0) {
-              <div class="bg-orange-50 border-l-4 border-orange-500 p-4 mb-4">
-                <div class="flex items-center">
-                  <i
-                    class="pi pi-exclamation-triangle text-orange-500 mr-2"
-                  ></i>
-                  <div>
-                    <strong class="text-orange-800">Validation Warning:</strong>
-                    <p class="text-sm text-orange-700 mt-1">
+              <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
@@ -1954,33 +1940,33 @@ class RoleActionSelectorComponent {
             }
 
             <!-- Action Tree Table -->
-            <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-red-50]="hasUnmetPrerequisites(rowData)">
-                  <td style="width: 3rem">
+            <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-checkbox
                       [ngModel]="selectionMap()[rowData.id]"
                       [binary]="true"
@@ -1991,7 +1977,7 @@ class RoleActionSelectorComponent {
                   </td>
                   <td>
                     <p-treeTableToggler [rowNode]="rowNode" />
-                    <span class="inline-flex align-items-center gap-2">
+                    <span class="inline-flex items-center gap-2">
                       {{ rowData.name }}
                       @if (hasUnmetPrerequisites(rowData)) {
                         <i
@@ -2002,7 +1988,7 @@ class RoleActionSelectorComponent {
                       }
                     </span>
                   </td>
-                  <td>{{ rowData.code || '-' }}</td>
+                  <td class="hidden md:table-cell">{{ rowData.code || '-' }}</td>
                   <td>
                     <p-tag
                       [value]="rowData.actionType"
@@ -2011,42 +1997,41 @@ class RoleActionSelectorComponent {
                       "
                     />
                   </td>
-                  <td>
+                  <td class="hidden lg:table-cell">
                     @if (rowData.permissionLogic) {
-                      <span class="text-sm text-muted">Has prerequisites</span>
+                      <span class="text-sm text-muted-color">Has prerequisites</span>
                     } @else {
-                      <span class="text-muted">-</span>
+                      <span class="text-muted-color">-</span>
                     }
                   </td>
                 </tr>
               </ng-template>
-              <ng-template pTemplate="emptymessage">
+              <ng-template #emptymessage>
                 <tr>
-                  <td colspan="5" class="text-center p-4">
+                  <td colspan="5" class="text-center p-4 text-muted-color">
                     @if (loading()) {
                       <i class="pi pi-spin pi-spinner"></i> Loading actions...
                     } @else { No actions available. }
                   </td>
                 </tr>
               </ng-template>
-            </p-treeTable>
+              </p-treeTable>
+            </div>
           </div>
 
           <!-- Change Summary -->
           @if (hasChanges()) {
-            <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-blue-500 content-center"></i>
-                <p class="m-0 mb-1 font-bold">Pending Changes</p>
+            <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>
-              <div class="flex flex-col md:flex-row gap-4">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 @if (pendingAdd().length > 0) {
-                  <div class="w-full md:w-1/2">
-                    <div class="flex align-items-center gap-2 mb-2">
+                  <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
-                      >
+                      <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) {
@@ -2056,12 +2041,10 @@ class RoleActionSelectorComponent {
                   </div>
                 }
                 @if (pendingRemove().length > 0) {
-                  <div class="w-full md:w-1/2">
-                    <div class="flex align-items-center gap-2 mb-2">
+                  <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
-                      >
+                      <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) {
@@ -2076,31 +2059,29 @@ class RoleActionSelectorComponent {
         }
 
         @if (!loading() && actions().length === 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">
+          <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">
               No actions available for this role.
             </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.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3.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: i5.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: i6.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: i7.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: 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 });
+  `, 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 });
 }
 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], template: `
+            args: [{ selector: 'flusys-role-action-selector', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, PrimeModule, HasPermissionDirective], template: `
     <div class="role-action-selector">
       <!-- Role Selector -->
       <div class="mb-4">
-        <div class="grid">
-          <div class="col-12 md:col-6 lg:col-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div>
             <label class="block font-semibold mb-2">Select Role</label>
             <p-select
-              [(ngModel)]="selectedRoleId"
+              [ngModel]="selectedRoleId()"
+              (ngModelChange)="selectedRoleId.set($event)"
               [options]="roles()"
               optionLabel="name"
               optionValue="id"
@@ -2117,24 +2098,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         <!-- Loading State -->
         @if (loading()) {
           <div
-            class="surface-card p-5 border-round shadow-1 flex justify-content-center"
+            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
           >
-            <i
-              class="pi pi-spin pi-spinner text-primary"
-              style="font-size: 3rem"
-            ></i>
+            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
           </div>
         }
 
         <!-- Action List -->
         @if (!loading() && actions().length > 0) {
-          <div class="surface-card p-4 border-round shadow-1">
+          <div class="surface-card p-4 rounded-border shadow-sm">
             <div
-              class="flex flex-column md:flex-row justify-content-between align-items-start md:align-items-center gap-3 mb-4"
+              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
             >
               <div>
                 <h5 class="m-0 mb-1">Action Permissions</h5>
-                <p class="text-sm text-color-secondary m-0">
+                <p class="text-sm text-muted-color m-0">
                   {{ actions().length }} actions available
                 </p>
               </div>
@@ -2156,6 +2134,7 @@ 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()"
@@ -2169,14 +2148,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 
             <!-- Validation Warning -->
             @if (invalidActionsCount() > 0) {
-              <div class="bg-orange-50 border-l-4 border-orange-500 p-4 mb-4">
-                <div class="flex items-center">
-                  <i
-                    class="pi pi-exclamation-triangle text-orange-500 mr-2"
-                  ></i>
-                  <div>
-                    <strong class="text-orange-800">Validation Warning:</strong>
-                    <p class="text-sm text-orange-700 mt-1">
+              <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
@@ -2188,33 +2165,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }
 
             <!-- Action Tree Table -->
-            <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-red-50]="hasUnmetPrerequisites(rowData)">
-                  <td style="width: 3rem">
+            <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-checkbox
                       [ngModel]="selectionMap()[rowData.id]"
                       [binary]="true"
@@ -2225,7 +2202,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   </td>
                   <td>
                     <p-treeTableToggler [rowNode]="rowNode" />
-                    <span class="inline-flex align-items-center gap-2">
+                    <span class="inline-flex items-center gap-2">
                       {{ rowData.name }}
                       @if (hasUnmetPrerequisites(rowData)) {
                         <i
@@ -2236,7 +2213,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                       }
                     </span>
                   </td>
-                  <td>{{ rowData.code || '-' }}</td>
+                  <td class="hidden md:table-cell">{{ rowData.code || '-' }}</td>
                   <td>
                     <p-tag
                       [value]="rowData.actionType"
@@ -2245,42 +2222,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                       "
                     />
                   </td>
-                  <td>
+                  <td class="hidden lg:table-cell">
                     @if (rowData.permissionLogic) {
-                      <span class="text-sm text-muted">Has prerequisites</span>
+                      <span class="text-sm text-muted-color">Has prerequisites</span>
                     } @else {
-                      <span class="text-muted">-</span>
+                      <span class="text-muted-color">-</span>
                     }
                   </td>
                 </tr>
               </ng-template>
-              <ng-template pTemplate="emptymessage">
+              <ng-template #emptymessage>
                 <tr>
-                  <td colspan="5" class="text-center p-4">
+                  <td colspan="5" class="text-center p-4 text-muted-color">
                     @if (loading()) {
                       <i class="pi pi-spin pi-spinner"></i> Loading actions...
                     } @else { No actions available. }
                   </td>
                 </tr>
               </ng-template>
-            </p-treeTable>
+              </p-treeTable>
+            </div>
           </div>
 
           <!-- Change Summary -->
           @if (hasChanges()) {
-            <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-blue-500 content-center"></i>
-                <p class="m-0 mb-1 font-bold">Pending Changes</p>
+            <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>
-              <div class="flex flex-col md:flex-row gap-4">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 @if (pendingAdd().length > 0) {
-                  <div class="w-full md:w-1/2">
-                    <div class="flex align-items-center gap-2 mb-2">
+                  <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
-                      >
+                      <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) {
@@ -2290,12 +2266,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   </div>
                 }
                 @if (pendingRemove().length > 0) {
-                  <div class="w-full md:w-1/2">
-                    <div class="flex align-items-center gap-2 mb-2">
+                  <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
-                      >
+                      <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) {
@@ -2310,19 +2284,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         }
 
         @if (!loading() && actions().length === 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">
+          <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">
               No actions available for this role.
             </p>
           </div>
         }
       }
     </div>
-  `, styles: [":host{display:block}\n"] }]
+  `, 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"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -2360,6 +2331,8 @@ 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);
@@ -2367,6 +2340,7 @@ 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" }] : []));
@@ -2441,6 +2415,10 @@ 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(() => {
@@ -2451,11 +2429,7 @@ class CompanyActionSelectorComponent {
                 this.loadDataAbortController = new AbortController();
                 this.loadData(this.loadDataAbortController.signal).catch((err) => {
                     if (err.name !== 'AbortError') {
-                        this.messageService.add({
-                            severity: 'error',
-                            summary: 'Error',
-                            detail: 'Failed to load company actions. Please refresh.',
-                        });
+                        // Error toast handled by global interceptor
                         this.loading.set(false);
                     }
                 });
@@ -2465,9 +2439,6 @@ class CompanyActionSelectorComponent {
             }
         });
     }
-    ngOnDestroy() {
-        this.loadDataAbortController?.abort();
-    }
     /**
      * Load companies from API
      */
@@ -2480,11 +2451,7 @@ class CompanyActionSelectorComponent {
             this.companies.set(response?.data ?? []);
         }
         catch {
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: 'Failed to load companies',
-            });
+            // Error toast handled by global interceptor
         }
     }
     /**
@@ -2649,13 +2616,8 @@ class CompanyActionSelectorComponent {
             // Update baseline
             this._initialSelection.set({ ...this.selectionMap() });
         }
-        catch (err) {
-            const error = err;
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: error?.error?.message || 'Failed to update company action whitelist',
-            });
+        catch {
+            // Error toast handled by global interceptor
         }
         finally {
             this.saving.set(false);
@@ -2722,11 +2684,12 @@ class CompanyActionSelectorComponent {
     <div class="company-action-selector">
       <!-- Company Selector -->
       <div class="mb-4">
-        <div class="grid">
-          <div class="col-12 md:col-6 lg:col-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div>
             <label class="block font-semibold mb-2">Select Company</label>
             <p-select
-              [(ngModel)]="selectedCompanyId"
+              [ngModel]="selectedCompanyId()"
+              (ngModelChange)="selectedCompanyId.set($event)"
               [options]="companies()"
               optionLabel="name"
               optionValue="id"
@@ -2743,24 +2706,21 @@ class CompanyActionSelectorComponent {
         <!-- Loading State -->
         @if (loading()) {
           <div
-            class="surface-card p-5 border-round shadow-1 flex justify-content-center"
+            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
           >
-            <i
-              class="pi pi-spin pi-spinner text-primary"
-              style="font-size: 3rem"
-            ></i>
+            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
           </div>
         }
 
         <!-- Action List -->
         @if (!loading() && actions().length > 0) {
-          <div class="surface-card p-4 border-round shadow-1">
+          <div class="surface-card p-4 rounded-border shadow-sm">
             <div
-              class="flex flex-column md:flex-row justify-content-between align-items-start md:align-items-center gap-3 mb-4"
+              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
             >
               <div>
                 <h5 class="m-0 mb-1">Action Whitelist</h5>
-                <p class="text-sm text-color-secondary m-0">
+                <p class="text-sm text-muted-color m-0">
                   {{ actions().length }} actions available
                 </p>
               </div>
@@ -2782,6 +2742,7 @@ class CompanyActionSelectorComponent {
                   (onClick)="deselectAll()"
                 />
                 <p-button
+                  *hasPermission="COMPANY_ACTION_PERMISSIONS.ASSIGN"
                   label="Save Changes"
                   icon="pi pi-save"
                   [disabled]="!canSave()"
@@ -2795,14 +2756,12 @@ class CompanyActionSelectorComponent {
 
             <!-- Validation Warning -->
             @if (invalidActionsCount() > 0) {
-              <div class="bg-orange-50 border-l-4 border-orange-500 p-4 mb-4">
-                <div class="flex items-center">
-                  <i
-                    class="pi pi-exclamation-triangle text-orange-500 mr-2"
-                  ></i>
-                  <div>
-                    <strong class="text-orange-800">Validation Warning:</strong>
-                    <p class="text-sm text-orange-700 mt-1">
+              <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
@@ -2814,33 +2773,33 @@ class CompanyActionSelectorComponent {
             }
 
             <!-- Action Tree Table -->
-            <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-red-50]="hasUnmetPrerequisites(rowData)">
-                  <td style="width: 3rem">
+            <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-checkbox
                       [ngModel]="selectionMap()[rowData.id]"
                       [binary]="true"
@@ -2851,7 +2810,7 @@ class CompanyActionSelectorComponent {
                   </td>
                   <td>
                     <p-treeTableToggler [rowNode]="rowNode" />
-                    <span class="inline-flex align-items-center gap-2">
+                    <span class="inline-flex items-center gap-2">
                       {{ rowData.name }}
                       @if (hasUnmetPrerequisites(rowData)) {
                         <i
@@ -2862,7 +2821,7 @@ class CompanyActionSelectorComponent {
                       }
                     </span>
                   </td>
-                  <td>{{ rowData.code || '-' }}</td>
+                  <td class="hidden md:table-cell">{{ rowData.code || '-' }}</td>
                   <td>
                     <p-tag
                       [value]="rowData.actionType"
@@ -2871,36 +2830,35 @@ class CompanyActionSelectorComponent {
                       "
                     />
                   </td>
-                  <td>{{ rowData.description || '-' }}</td>
+                  <td class="hidden lg:table-cell">{{ rowData.description || '-' }}</td>
                 </tr>
               </ng-template>
-              <ng-template pTemplate="emptymessage">
+              <ng-template #emptymessage>
                 <tr>
-                  <td colspan="5" class="text-center p-4">
+                  <td colspan="5" class="text-center p-4 text-muted-color">
                     @if (loading()) {
                       <i class="pi pi-spin pi-spinner"></i> Loading actions...
                     } @else { No actions available. }
                   </td>
                 </tr>
               </ng-template>
-            </p-treeTable>
+              </p-treeTable>
+            </div>
           </div>
 
           <!-- Change Summary -->
           @if (hasChanges()) {
-            <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-blue-500 content-center"></i>
-                <p class="m-0 mb-1 font-bold">Pending Changes</p>
+            <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>
-              <div class="flex flex-col md:flex-row gap-4">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 @if (pendingAdd().length > 0) {
-                  <div class="w-full md:w-1/2">
+                  <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 Whitelist ({{ pendingAdd().length }})
-                      </strong>
+                      <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) {
@@ -2909,14 +2867,11 @@ class CompanyActionSelectorComponent {
                     </ul>
                   </div>
                 }
-
                 @if (pendingRemove().length > 0) {
-                  <div class="w-full md:w-1/2">
+                  <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>
+                      <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) {
@@ -2931,31 +2886,29 @@ class CompanyActionSelectorComponent {
         }
 
         @if (!loading() && actions().length === 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">
+          <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">
               No actions available for this company.
             </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.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3.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: i5.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: i6.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: i7.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: 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 });
+  `, 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 });
 }
 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], template: `
+            args: [{ selector: 'flusys-company-action-selector', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, PrimeModule, HasPermissionDirective], template: `
     <div class="company-action-selector">
       <!-- Company Selector -->
       <div class="mb-4">
-        <div class="grid">
-          <div class="col-12 md:col-6 lg:col-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div>
             <label class="block font-semibold mb-2">Select Company</label>
             <p-select
-              [(ngModel)]="selectedCompanyId"
+              [ngModel]="selectedCompanyId()"
+              (ngModelChange)="selectedCompanyId.set($event)"
               [options]="companies()"
               optionLabel="name"
               optionValue="id"
@@ -2972,24 +2925,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         <!-- Loading State -->
         @if (loading()) {
           <div
-            class="surface-card p-5 border-round shadow-1 flex justify-content-center"
+            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
           >
-            <i
-              class="pi pi-spin pi-spinner text-primary"
-              style="font-size: 3rem"
-            ></i>
+            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
           </div>
         }
 
         <!-- Action List -->
         @if (!loading() && actions().length > 0) {
-          <div class="surface-card p-4 border-round shadow-1">
+          <div class="surface-card p-4 rounded-border shadow-sm">
             <div
-              class="flex flex-column md:flex-row justify-content-between align-items-start md:align-items-center gap-3 mb-4"
+              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
             >
               <div>
                 <h5 class="m-0 mb-1">Action Whitelist</h5>
-                <p class="text-sm text-color-secondary m-0">
+                <p class="text-sm text-muted-color m-0">
                   {{ actions().length }} actions available
                 </p>
               </div>
@@ -3011,6 +2961,7 @@ 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()"
@@ -3024,14 +2975,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 
             <!-- Validation Warning -->
             @if (invalidActionsCount() > 0) {
-              <div class="bg-orange-50 border-l-4 border-orange-500 p-4 mb-4">
-                <div class="flex items-center">
-                  <i
-                    class="pi pi-exclamation-triangle text-orange-500 mr-2"
-                  ></i>
-                  <div>
-                    <strong class="text-orange-800">Validation Warning:</strong>
-                    <p class="text-sm text-orange-700 mt-1">
+              <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
@@ -3043,33 +2992,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }
 
             <!-- Action Tree Table -->
-            <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-red-50]="hasUnmetPrerequisites(rowData)">
-                  <td style="width: 3rem">
+            <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-checkbox
                       [ngModel]="selectionMap()[rowData.id]"
                       [binary]="true"
@@ -3080,7 +3029,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   </td>
                   <td>
                     <p-treeTableToggler [rowNode]="rowNode" />
-                    <span class="inline-flex align-items-center gap-2">
+                    <span class="inline-flex items-center gap-2">
                       {{ rowData.name }}
                       @if (hasUnmetPrerequisites(rowData)) {
                         <i
@@ -3091,7 +3040,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                       }
                     </span>
                   </td>
-                  <td>{{ rowData.code || '-' }}</td>
+                  <td class="hidden md:table-cell">{{ rowData.code || '-' }}</td>
                   <td>
                     <p-tag
                       [value]="rowData.actionType"
@@ -3100,36 +3049,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                       "
                     />
                   </td>
-                  <td>{{ rowData.description || '-' }}</td>
+                  <td class="hidden lg:table-cell">{{ rowData.description || '-' }}</td>
                 </tr>
               </ng-template>
-              <ng-template pTemplate="emptymessage">
+              <ng-template #emptymessage>
                 <tr>
-                  <td colspan="5" class="text-center p-4">
+                  <td colspan="5" class="text-center p-4 text-muted-color">
                     @if (loading()) {
                       <i class="pi pi-spin pi-spinner"></i> Loading actions...
                     } @else { No actions available. }
                   </td>
                 </tr>
               </ng-template>
-            </p-treeTable>
+              </p-treeTable>
+            </div>
           </div>
 
           <!-- Change Summary -->
           @if (hasChanges()) {
-            <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-blue-500 content-center"></i>
-                <p class="m-0 mb-1 font-bold">Pending Changes</p>
+            <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>
-              <div class="flex flex-col md:flex-row gap-4">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 @if (pendingAdd().length > 0) {
-                  <div class="w-full md:w-1/2">
+                  <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 Whitelist ({{ pendingAdd().length }})
-                      </strong>
+                      <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) {
@@ -3138,14 +3086,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                     </ul>
                   </div>
                 }
-
                 @if (pendingRemove().length > 0) {
-                  <div class="w-full md:w-1/2">
+                  <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>
+                      <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) {
@@ -3160,19 +3105,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         }
 
         @if (!loading() && actions().length === 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">
+          <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">
               No actions available for this company.
             </p>
           </div>
         }
       }
     </div>
-  `, styles: [":host{display:block}\n"] }]
+  `, 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"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -3206,6 +3148,8 @@ 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);
@@ -3213,6 +3157,9 @@ 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" }] : []));
@@ -3249,7 +3196,11 @@ class UserRoleSelectorComponent {
     hasChanges = computed(() => {
         const current = this.selectionMap();
         const initial = this.initialSelection();
-        return JSON.stringify(current) !== JSON.stringify(initial);
+        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]);
     }, ...(ngDevMode ? [{ debugName: "hasChanges" }] : []));
     // Computed - Pending Changes
     pendingAdd = computed(() => {
@@ -3269,6 +3220,10 @@ 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();
@@ -3316,11 +3271,7 @@ class UserRoleSelectorComponent {
             this.branches.set(userBranches);
         }
         catch {
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: 'Failed to load user permitted branches',
-            });
+            // Error toast handled by global interceptor
         }
     }
     /**
@@ -3358,11 +3309,7 @@ class UserRoleSelectorComponent {
             this._initialSelection.set({ ...selMap });
         }
         catch {
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: 'Failed to load user role assignments',
-            });
+            // Error toast handled by global interceptor
         }
         finally {
             this.loading.set(false);
@@ -3469,13 +3416,8 @@ class UserRoleSelectorComponent {
             // Update baseline
             this._initialSelection.set({ ...this.selectionMap() });
         }
-        catch (err) {
-            const error = err;
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: error?.error?.message || 'Failed to update user role assignments',
-            });
+        catch {
+            // Error toast handled by global interceptor
         }
         finally {
             this.saving.set(false);
@@ -3493,28 +3435,30 @@ 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 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">
+      <div class="surface-card p-4 rounded-border mb-4 shadow-sm">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
+          <div>
+            <label class="block font-semibold mb-2">
               <i class="pi pi-user mr-2 text-primary"></i>
               Select User
             </label>
             <lib-user-select
-              [(value)]="selectedUserId"
+              [value]="selectedUserId()"
+              (valueChange)="selectedUserId.set($event)"
               [isEditMode]="true"
               placeHolder="Select a user"
             />
           </div>
 
           @if (showBranchSelector()) {
-            <div class="field col-12 sm:col-6 mb-0">
-              <label class="block font-semibold mb-2 text-900">
+            <div>
+              <label class="block font-semibold mb-2">
                 <i class="pi pi-building mr-2 text-primary"></i>
                 Select Branch
               </label>
               <p-select
-                [(ngModel)]="selectedBranchId"
+                [ngModel]="selectedBranchId()"
+                (ngModelChange)="selectedBranchId.set($event)"
                 [options]="filteredBranches()"
                 optionLabel="name"
                 optionValue="id"
@@ -3525,20 +3469,20 @@ class UserRoleSelectorComponent {
               >
                 <ng-template #selectedItem let-branch>
                   @if (branch) {
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex 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 align-items-center gap-2">
-                    <i class="pi pi-building text-color-secondary"></i>
+                  <div class="flex items-center gap-2">
+                    <i class="pi pi-building text-muted-color"></i>
                     <span>{{ branch.name }}</span>
                   </div>
                 </ng-template>
               </p-select>
-              <small class="text-color-secondary block mt-1">
+              <small class="text-muted-color block mt-1">
                 {{ filteredBranches().length }} permitted branch{{
                   filteredBranches().length !== 1 ? 'es' : ''
                 }}
@@ -3553,24 +3497,21 @@ class UserRoleSelectorComponent {
         <!-- Loading State -->
         @if (loading()) {
           <div
-            class="surface-card p-5 border-round shadow-1 flex justify-content-center"
+            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
           >
-            <i
-              class="pi pi-spin pi-spinner text-primary"
-              style="font-size: 3rem"
-            ></i>
+            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
           </div>
         }
 
         <!-- Role List -->
         @if (!loading() && roles().length > 0) {
-          <div class="surface-card p-4 border-round shadow-1">
+          <div class="surface-card p-4 rounded-border shadow-sm">
             <div
-              class="flex flex-column md:flex-row justify-content-between align-items-start md:align-items-center gap-3 mb-4"
+              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
             >
               <div>
                 <h5 class="m-0 mb-1">Role Assignments</h5>
-                <p class="text-sm text-color-secondary m-0">
+                <p class="text-sm text-muted-color m-0">
                   {{ roles().length }} roles available
                 </p>
               </div>
@@ -3592,6 +3533,7 @@ class UserRoleSelectorComponent {
                   (onClick)="deselectAll()"
                 />
                 <p-button
+                  *hasPermission="USER_ROLE_PERMISSIONS.ASSIGN"
                   label="Save Changes"
                   icon="pi pi-save"
                   [disabled]="!canSave()"
@@ -3604,77 +3546,78 @@ class UserRoleSelectorComponent {
             </div>
 
             <!-- Role Table -->
-            <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 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>
           </div>
 
           <!-- Change Summary -->
           @if (hasChanges()) {
-            <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-blue-500 content-center"></i>
-                <p class="m-0 mb-1 font-bold">Pending Changes</p>
+            <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>
-              <div class="flex flex-col md:flex-row gap-4">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 @if (pendingAdd().length > 0) {
-                  <div class="w-full md:w-1/2">
-                    <div class="flex align-items-center gap-2 mb-2">
+                  <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
-                      >
+                      <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) {
@@ -3684,12 +3627,10 @@ class UserRoleSelectorComponent {
                   </div>
                 }
                 @if (pendingRemove().length > 0) {
-                  <div class="w-full md:w-1/2">
-                    <div class="flex align-items-center gap-2 mb-2">
+                  <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
-                      >
+                      <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) {
@@ -3704,47 +3645,46 @@ class UserRoleSelectorComponent {
         }
 
         @if (!loading() && roles().length === 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">
+          <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">
               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: i3.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: i5.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: i6.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$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: "component", type: i7.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: 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: 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 });
 }
 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, UserSelectComponent], template: `
+            args: [{ selector: 'flusys-user-role-selector', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, PrimeModule, HasPermissionDirective, UserSelectComponent], template: `
     <div class="user-role-selector">
       <!-- User and Branch Selectors -->
-      <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">
+      <div class="surface-card p-4 rounded-border mb-4 shadow-sm">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
+          <div>
+            <label class="block font-semibold mb-2">
               <i class="pi pi-user mr-2 text-primary"></i>
               Select User
             </label>
             <lib-user-select
-              [(value)]="selectedUserId"
+              [value]="selectedUserId()"
+              (valueChange)="selectedUserId.set($event)"
               [isEditMode]="true"
               placeHolder="Select a user"
             />
           </div>
 
           @if (showBranchSelector()) {
-            <div class="field col-12 sm:col-6 mb-0">
-              <label class="block font-semibold mb-2 text-900">
+            <div>
+              <label class="block font-semibold mb-2">
                 <i class="pi pi-building mr-2 text-primary"></i>
                 Select Branch
               </label>
               <p-select
-                [(ngModel)]="selectedBranchId"
+                [ngModel]="selectedBranchId()"
+                (ngModelChange)="selectedBranchId.set($event)"
                 [options]="filteredBranches()"
                 optionLabel="name"
                 optionValue="id"
@@ -3755,20 +3695,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
               >
                 <ng-template #selectedItem let-branch>
                   @if (branch) {
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex 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 align-items-center gap-2">
-                    <i class="pi pi-building text-color-secondary"></i>
+                  <div class="flex items-center gap-2">
+                    <i class="pi pi-building text-muted-color"></i>
                     <span>{{ branch.name }}</span>
                   </div>
                 </ng-template>
               </p-select>
-              <small class="text-color-secondary block mt-1">
+              <small class="text-muted-color block mt-1">
                 {{ filteredBranches().length }} permitted branch{{
                   filteredBranches().length !== 1 ? 'es' : ''
                 }}
@@ -3783,24 +3723,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         <!-- Loading State -->
         @if (loading()) {
           <div
-            class="surface-card p-5 border-round shadow-1 flex justify-content-center"
+            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
           >
-            <i
-              class="pi pi-spin pi-spinner text-primary"
-              style="font-size: 3rem"
-            ></i>
+            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
           </div>
         }
 
         <!-- Role List -->
         @if (!loading() && roles().length > 0) {
-          <div class="surface-card p-4 border-round shadow-1">
+          <div class="surface-card p-4 rounded-border shadow-sm">
             <div
-              class="flex flex-column md:flex-row justify-content-between align-items-start md:align-items-center gap-3 mb-4"
+              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
             >
               <div>
                 <h5 class="m-0 mb-1">Role Assignments</h5>
-                <p class="text-sm text-color-secondary m-0">
+                <p class="text-sm text-muted-color m-0">
                   {{ roles().length }} roles available
                 </p>
               </div>
@@ -3822,6 +3759,7 @@ 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()"
@@ -3834,77 +3772,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             </div>
 
             <!-- Role Table -->
-            <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 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>
           </div>
 
           <!-- Change Summary -->
           @if (hasChanges()) {
-            <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-blue-500 content-center"></i>
-                <p class="m-0 mb-1 font-bold">Pending Changes</p>
+            <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>
-              <div class="flex flex-col md:flex-row gap-4">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 @if (pendingAdd().length > 0) {
-                  <div class="w-full md:w-1/2">
-                    <div class="flex align-items-center gap-2 mb-2">
+                  <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
-                      >
+                      <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) {
@@ -3914,12 +3853,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   </div>
                 }
                 @if (pendingRemove().length > 0) {
-                  <div class="w-full md:w-1/2">
-                    <div class="flex align-items-center gap-2 mb-2">
+                  <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
-                      >
+                      <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) {
@@ -3934,12 +3871,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         }
 
         @if (!loading() && roles().length === 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">
+          <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">
               No roles available for this user.
             </p>
           </div>
@@ -3981,6 +3915,8 @@ 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);
@@ -3989,6 +3925,9 @@ 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" }] : []));
@@ -4030,7 +3969,11 @@ class UserActionSelectorComponent {
     hasChanges = computed(() => {
         const current = this.selectionMap();
         const initial = this.initialSelection();
-        return JSON.stringify(current) !== JSON.stringify(initial);
+        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]);
     }, ...(ngDevMode ? [{ debugName: "hasChanges" }] : []));
     // Computed - Validation
     actionsWithUnmetPrerequisites = computed(() => {
@@ -4066,6 +4009,10 @@ 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();
@@ -4113,11 +4060,7 @@ class UserActionSelectorComponent {
             this.branches.set(userBranches);
         }
         catch {
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: 'Failed to load user permitted branches',
-            });
+            // Error toast handled by global interceptor
         }
     }
     /**
@@ -4158,11 +4101,7 @@ class UserActionSelectorComponent {
             this._initialSelection.set({ ...selMap });
         }
         catch {
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: 'Failed to load user action permissions',
-            });
+            // Error toast handled by global interceptor
         }
         finally {
             this.loading.set(false);
@@ -4197,12 +4136,17 @@ class UserActionSelectorComponent {
             : false;
     }
     /**
-     * Handle action checkbox toggle
+     * Handle action toggle with dependency management
      */
     onActionToggle(action, newValue) {
-        const selMap = { ...this.selectionMap() };
-        selMap[action.id] = newValue;
-        this._selectionMap.set(selMap);
+        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));
+        }
     }
     /**
      * Toggle all actions
@@ -4253,6 +4197,12 @@ 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) => {
@@ -4292,13 +4242,8 @@ class UserActionSelectorComponent {
             // Update baseline
             this._initialSelection.set({ ...this.selectionMap() });
         }
-        catch (err) {
-            const error = err;
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: error?.error?.message || 'Failed to update user action permissions',
-            });
+        catch {
+            // Error toast handled by global interceptor
         }
         finally {
             this.saving.set(false);
@@ -4317,28 +4262,30 @@ 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 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">
+      <div class="surface-card p-4 rounded-border mb-4 shadow-sm">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
+          <div>
+            <label class="block font-semibold mb-2">
               <i class="pi pi-user mr-2 text-primary"></i>
               Select User
             </label>
             <lib-user-select
-              [(value)]="selectedUserId"
+              [value]="selectedUserId()"
+              (valueChange)="selectedUserId.set($event)"
               [isEditMode]="true"
               placeHolder="Select a user"
             />
           </div>
 
           @if (showBranchSelector()) {
-            <div class="field col-12 sm:col-6 mb-0">
-              <label class="block font-semibold mb-2 text-900">
+            <div>
+              <label class="block font-semibold mb-2">
                 <i class="pi pi-building mr-2 text-primary"></i>
                 Select Branch
               </label>
               <p-select
-                [(ngModel)]="selectedBranchId"
+                [ngModel]="selectedBranchId()"
+                (ngModelChange)="selectedBranchId.set($event)"
                 [options]="filteredBranches()"
                 optionLabel="name"
                 optionValue="id"
@@ -4349,20 +4296,20 @@ class UserActionSelectorComponent {
               >
                 <ng-template #selectedItem let-branch>
                   @if (branch) {
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex 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 align-items-center gap-2">
-                    <i class="pi pi-building text-color-secondary"></i>
+                  <div class="flex items-center gap-2">
+                    <i class="pi pi-building text-muted-color"></i>
                     <span>{{ branch.name }}</span>
                   </div>
                 </ng-template>
               </p-select>
-              <small class="text-color-secondary block mt-1">
+              <small class="text-muted-color block mt-1">
                 {{ filteredBranches().length }} permitted branch{{
                   filteredBranches().length !== 1 ? 'es' : ''
                 }}
@@ -4376,20 +4323,20 @@ class UserActionSelectorComponent {
       @if (selectedUserId()) {
         <!-- Loading State -->
         @if (loading()) {
-          <div class="flex justify-content-center p-5">
-            <i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
+          <div class="flex justify-center p-5">
+            <i class="pi pi-spin pi-spinner text-4xl"></i>
           </div>
         }
 
         <!-- Action List -->
         @if (!loading() && actions().length > 0) {
-          <div class="surface-card p-4 border-round shadow-1">
+          <div class="surface-card p-4 rounded-border shadow-sm">
             <div
-              class="flex flex-column md:flex-row justify-content-between align-items-start md:align-items-center gap-3 mb-4"
+              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
             >
               <div>
                 <h5 class="m-0 mb-1">Direct Action Permissions</h5>
-                <p class="text-sm text-color-secondary m-0">
+                <p class="text-sm text-muted-color m-0">
                   {{ actions().length }} actions available
                 </p>
               </div>
@@ -4411,6 +4358,7 @@ class UserActionSelectorComponent {
                   (onClick)="deselectAll()"
                 />
                 <p-button
+                  *hasPermission="USER_ACTION_PERMISSIONS.ASSIGN"
                   label="Save Changes"
                   icon="pi pi-save"
                   [disabled]="!canSave()"
@@ -4422,34 +4370,52 @@ 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 -->
-            <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">
+            <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-checkbox
                       [ngModel]="selectionMap()[rowData.id]"
                       [binary]="true"
@@ -4460,9 +4426,18 @@ class UserActionSelectorComponent {
                   </td>
                   <td>
                     <p-treeTableToggler [rowNode]="rowNode" />
-                    <span>{{ rowData.name }}</span>
+                    <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>
                   </td>
-                  <td>{{ rowData.code || '-' }}</td>
+                  <td class="hidden md:table-cell">{{ rowData.code || '-' }}</td>
                   <td>
                     <p-tag
                       [value]="rowData.actionType"
@@ -4471,12 +4446,12 @@ class UserActionSelectorComponent {
                       "
                     />
                   </td>
-                  <td>{{ rowData.description || '-' }}</td>
+                  <td class="hidden lg:table-cell">{{ rowData.description || '-' }}</td>
                 </tr>
               </ng-template>
-              <ng-template pTemplate="emptymessage">
+              <ng-template #emptymessage>
                 <tr>
-                  <td colspan="5" class="text-center p-4">
+                  <td colspan="5" class="text-center p-4 text-muted-color">
                     @if (loading()) {
                       <i class="pi pi-spin pi-spinner"></i> Loading actions...
                     } @else {
@@ -4485,24 +4460,23 @@ class UserActionSelectorComponent {
                   </td>
                 </tr>
               </ng-template>
-            </p-treeTable>
+              </p-treeTable>
+            </div>
           </div>
 
           <!-- Change Summary -->
           @if (hasChanges()) {
-            <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-blue-500 content-center"></i>
-                <p class="m-0 mb-1 font-bold">Pending Changes</p>
+            <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>
-              <div class="flex flex-col md:flex-row gap-4">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 @if (pendingAdd().length > 0) {
-                  <div class="w-full md:w-1/2">
-                    <div class="flex align-items-center gap-2 mb-2">
+                  <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
-                      >
+                      <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) {
@@ -4512,12 +4486,10 @@ class UserActionSelectorComponent {
                   </div>
                 }
                 @if (pendingRemove().length > 0) {
-                  <div class="w-full md:w-1/2">
-                    <div class="flex align-items-center gap-2 mb-2">
+                  <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
-                      >
+                      <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) {
@@ -4532,47 +4504,46 @@ class UserActionSelectorComponent {
         }
 
         @if (!loading() && actions().length === 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">
+          <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">
               No actions 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.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3.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: i5.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: i6.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: i7.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: 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 });
+  `, 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 });
 }
 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, UserSelectComponent], template: `
+            args: [{ selector: 'flusys-user-action-selector', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, PrimeModule, HasPermissionDirective, UserSelectComponent], template: `
     <div class="user-action-selector">
       <!-- User and Branch Selectors -->
-      <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">
+      <div class="surface-card p-4 rounded-border mb-4 shadow-sm">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
+          <div>
+            <label class="block font-semibold mb-2">
               <i class="pi pi-user mr-2 text-primary"></i>
               Select User
             </label>
             <lib-user-select
-              [(value)]="selectedUserId"
+              [value]="selectedUserId()"
+              (valueChange)="selectedUserId.set($event)"
               [isEditMode]="true"
               placeHolder="Select a user"
             />
           </div>
 
           @if (showBranchSelector()) {
-            <div class="field col-12 sm:col-6 mb-0">
-              <label class="block font-semibold mb-2 text-900">
+            <div>
+              <label class="block font-semibold mb-2">
                 <i class="pi pi-building mr-2 text-primary"></i>
                 Select Branch
               </label>
               <p-select
-                [(ngModel)]="selectedBranchId"
+                [ngModel]="selectedBranchId()"
+                (ngModelChange)="selectedBranchId.set($event)"
                 [options]="filteredBranches()"
                 optionLabel="name"
                 optionValue="id"
@@ -4583,20 +4554,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
               >
                 <ng-template #selectedItem let-branch>
                   @if (branch) {
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex 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 align-items-center gap-2">
-                    <i class="pi pi-building text-color-secondary"></i>
+                  <div class="flex items-center gap-2">
+                    <i class="pi pi-building text-muted-color"></i>
                     <span>{{ branch.name }}</span>
                   </div>
                 </ng-template>
               </p-select>
-              <small class="text-color-secondary block mt-1">
+              <small class="text-muted-color block mt-1">
                 {{ filteredBranches().length }} permitted branch{{
                   filteredBranches().length !== 1 ? 'es' : ''
                 }}
@@ -4610,20 +4581,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
       @if (selectedUserId()) {
         <!-- Loading State -->
         @if (loading()) {
-          <div class="flex justify-content-center p-5">
-            <i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
+          <div class="flex justify-center p-5">
+            <i class="pi pi-spin pi-spinner text-4xl"></i>
           </div>
         }
 
         <!-- Action List -->
         @if (!loading() && actions().length > 0) {
-          <div class="surface-card p-4 border-round shadow-1">
+          <div class="surface-card p-4 rounded-border shadow-sm">
             <div
-              class="flex flex-column md:flex-row justify-content-between align-items-start md:align-items-center gap-3 mb-4"
+              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
             >
               <div>
                 <h5 class="m-0 mb-1">Direct Action Permissions</h5>
-                <p class="text-sm text-color-secondary m-0">
+                <p class="text-sm text-muted-color m-0">
                   {{ actions().length }} actions available
                 </p>
               </div>
@@ -4645,6 +4616,7 @@ 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()"
@@ -4656,34 +4628,52 @@ 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 -->
-            <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">
+            <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-checkbox
                       [ngModel]="selectionMap()[rowData.id]"
                       [binary]="true"
@@ -4694,9 +4684,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   </td>
                   <td>
                     <p-treeTableToggler [rowNode]="rowNode" />
-                    <span>{{ rowData.name }}</span>
+                    <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>
                   </td>
-                  <td>{{ rowData.code || '-' }}</td>
+                  <td class="hidden md:table-cell">{{ rowData.code || '-' }}</td>
                   <td>
                     <p-tag
                       [value]="rowData.actionType"
@@ -4705,12 +4704,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                       "
                     />
                   </td>
-                  <td>{{ rowData.description || '-' }}</td>
+                  <td class="hidden lg:table-cell">{{ rowData.description || '-' }}</td>
                 </tr>
               </ng-template>
-              <ng-template pTemplate="emptymessage">
+              <ng-template #emptymessage>
                 <tr>
-                  <td colspan="5" class="text-center p-4">
+                  <td colspan="5" class="text-center p-4 text-muted-color">
                     @if (loading()) {
                       <i class="pi pi-spin pi-spinner"></i> Loading actions...
                     } @else {
@@ -4719,24 +4718,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   </td>
                 </tr>
               </ng-template>
-            </p-treeTable>
+              </p-treeTable>
+            </div>
           </div>
 
           <!-- Change Summary -->
           @if (hasChanges()) {
-            <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-blue-500 content-center"></i>
-                <p class="m-0 mb-1 font-bold">Pending Changes</p>
+            <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>
-              <div class="flex flex-col md:flex-row gap-4">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 @if (pendingAdd().length > 0) {
-                  <div class="w-full md:w-1/2">
-                    <div class="flex align-items-center gap-2 mb-2">
+                  <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
-                      >
+                      <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) {
@@ -4746,12 +4744,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   </div>
                 }
                 @if (pendingRemove().length > 0) {
-                  <div class="w-full md:w-1/2">
-                    <div class="flex align-items-center gap-2 mb-2">
+                  <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
-                      >
+                      <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) {
@@ -4766,23 +4762,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         }
 
         @if (!loading() && actions().length === 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">
+          <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">
               No actions available for this user.
             </p>
           </div>
         }
       }
     </div>
-  `, styles: [":host{display:block}\n"] }]
+  `, 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"] }]
         }], ctorParameters: () => [] });
 
 // Logic Builder Component
 
+/**
+ * Profile Permission Provider Adapter
+ *
+ * Implements IProfilePermissionProvider using ng-iam's PermissionApiService.
+ * Allows ng-auth profile page to display user permissions without
+ * depending on ng-iam directly.
+ *
+ * @example
+ * // In app.config.ts
+ * providers: [
+ *   ...provideIamProviders()
+ * ]
+ *
+ * // In profile component
+ * private readonly permissionProvider = inject(PROFILE_PERMISSION_PROVIDER, { optional: true });
+ */
+class ProfilePermissionProviderAdapter {
+    permissionApi = inject(PermissionApiService);
+    getUserRoles(userId, branchId) {
+        return this.permissionApi
+            .getUserRoles(userId, branchId ? { branchId } : undefined)
+            .pipe(map$1((response) => ({
+            success: response.success,
+            message: response.message,
+            data: (response.data ?? []).map((role) => ({
+                id: role.roleId,
+                name: role.roleName,
+                description: null,
+            })),
+        })));
+    }
+    getUserActions(userId, branchId) {
+        return this.permissionApi
+            .getUserActions(userId, branchId ? { branchId } : undefined)
+            .pipe(map$1((response) => ({
+            success: response.success,
+            message: response.message,
+            data: (response.data ?? []).map((action) => ({
+                id: action.actionId,
+                name: action.actionName,
+                code: action.actionCode,
+                description: null,
+            })),
+        })));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ProfilePermissionProviderAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ProfilePermissionProviderAdapter });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ProfilePermissionProviderAdapter, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Provide IAM Provider Adapters
+ *
+ * Registers IAM implementations for provider interfaces from ng-shared.
+ * This allows ng-auth profile page to display permissions without direct dependencies.
+ *
+ * @example
+ * // In app.config.ts
+ * import { provideIamProviders } from '@flusys/ng-iam';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     ...provideIamProviders(),
+ *     // ... other providers
+ *   ]
+ * };
+ *
+ * @returns Array of Angular providers
+ */
+function provideIamProviders() {
+    return [
+        // Profile permission provider (for auth profile page)
+        {
+            provide: PROFILE_PERMISSION_PROVIDER,
+            useClass: ProfilePermissionProviderAdapter,
+        },
+    ];
+}
+
 /**
  * IAM Routes Configuration
  *
@@ -4796,7 +4870,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 const IAM_ROUTES = [
     {
         path: '',
-        loadComponent: () => import('./flusys-ng-iam-iam-container.component-Chl5MDkV.mjs').then((m) => m.IamContainerComponent),
+        loadComponent: () => import('./flusys-ng-iam-iam-container.component-Bn4kQtxW.mjs').then((m) => m.IamContainerComponent),
         children: [
             // Actions Management
             {
@@ -4804,15 +4878,15 @@ const IAM_ROUTES = [
                 children: [
                     {
                         path: '',
-                        loadComponent: () => import('./flusys-ng-iam-action-list-page.component-BpvewEGL.mjs').then((m) => m.ActionListPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-action-list-page.component-Daf93zpS.mjs').then((m) => m.ActionListPageComponent),
                     },
                     {
                         path: 'new',
-                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-0b9GwJqa.mjs').then((m) => m.ActionFormPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-C_BRrrWW.mjs').then((m) => m.ActionFormPageComponent),
                     },
                     {
                         path: ':id',
-                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-0b9GwJqa.mjs').then((m) => m.ActionFormPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-C_BRrrWW.mjs').then((m) => m.ActionFormPageComponent),
                     },
                 ],
             },
@@ -4822,22 +4896,22 @@ const IAM_ROUTES = [
                 children: [
                     {
                         path: '',
-                        loadComponent: () => import('./flusys-ng-iam-role-list-page.component-BgzxmHjk.mjs').then((m) => m.RoleListPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-role-list-page.component-CFly5KnH.mjs').then((m) => m.RoleListPageComponent),
                     },
                     {
                         path: 'new',
-                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-eZM1EPps.mjs').then((m) => m.RoleFormPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-ByNueI1a.mjs').then((m) => m.RoleFormPageComponent),
                     },
                     {
                         path: ':id',
-                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-eZM1EPps.mjs').then((m) => m.RoleFormPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-ByNueI1a.mjs').then((m) => m.RoleFormPageComponent),
                     },
                 ],
             },
             // Permissions Management (User permission assignment)
             {
                 path: 'permissions',
-                loadComponent: () => import('./flusys-ng-iam-permission-page.component-e_RX5mky.mjs').then((m) => m.PermissionPageComponent),
+                loadComponent: () => import('./flusys-ng-iam-permission-page.component-CmxOBJPu.mjs').then((m) => m.PermissionPageComponent),
             },
             // Default redirect to actions
             {
@@ -4855,5 +4929,5 @@ const IAM_ROUTES = [
  * Generated bundle index. Do not edit.
  */
 
-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 };
-//# sourceMappingURL=flusys-ng-iam-flusys-ng-iam-C-MQjakK.mjs.map
+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