@flusys/ng-iam 0.1.0-beta.3 → 1.0.0-rc

package/fesm2022/{flusys-ng-iam-flusys-ng-iam-D_i24Gub.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_PROVIDER, USER_PERMISSION_PROVIDER } 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';
 
@@ -60,10 +58,10 @@ class RoleApiService extends ApiResourceService {
         const http = inject(HttpClient);
         super('iam/roles', http);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RoleApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RoleApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RoleApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RoleApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RoleApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RoleApiService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -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
@@ -112,10 +110,10 @@ class ActionApiService extends ApiResourceService {
         }
         return this.http.post(`${this.appConfig.apiBaseUrl}/iam/actions/tree`, body);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ActionApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ActionApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ActionApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ActionApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ActionApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ActionApiService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -435,7 +433,7 @@ class ActionPermissionLogicService {
         const selectedActionIds = new Set(Object.keys(currentSelection).filter((id) => currentSelection[id]));
         const validationResult = validateActionPrerequisites(action, selectedActionIds, allActions);
         if (validationResult.valid) {
-            return '✓ Prerequisites Satisfied\n\nAll required actions are already selected.\nYou can safely add this action.';
+            return '[OK] Prerequisites Satisfied\n\nAll required actions are already selected.\nYou can safely add this action.';
         }
         const allMissingActions = this.getAllMissingPrerequisitesRecursive(action, currentSelection, allActions);
         const logicTree = this.buildTooltipLogicTree(action.permissionLogic, currentSelection, allActions, 0);
@@ -497,13 +495,11 @@ class ActionPermissionLogicService {
             if (!targetAction.permissionLogic || !targetAction.id)
                 return;
             if (depth > 50) {
-                console.error('[Permission Logic] Circular dependency detected', targetAction.id);
                 return;
             }
             if (visited.has(targetAction.id))
                 return;
             if (stack.has(targetAction.id)) {
-                console.warn('[Permission Logic] Circular reference detected:', targetAction.id);
                 return;
             }
             visited.add(targetAction.id);
@@ -800,10 +796,10 @@ class ActionPermissionLogicService {
         }
         return `${indent}(invalid)`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ActionPermissionLogicService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ActionPermissionLogicService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ActionPermissionLogicService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ActionPermissionLogicService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ActionPermissionLogicService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ActionPermissionLogicService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -837,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)
@@ -858,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)
@@ -879,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)
@@ -896,15 +884,15 @@ 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.0", ngImport: i0, type: PermissionApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PermissionApiService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PermissionApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PermissionApiService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -933,10 +921,10 @@ class MyPermissionsApiService {
     getMyPermissions(dto = {}) {
         return this.http.post(`${this.baseUrl}/my-permissions`, dto);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MyPermissionsApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MyPermissionsApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MyPermissionsApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MyPermissionsApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MyPermissionsApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MyPermissionsApiService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -986,11 +974,9 @@ class PermissionStateService {
             // Update shared permission validator
             const actionCodes = response.data?.frontendActions.map((a) => a.code) ?? [];
             this.permissionValidator.setPermissions(actionCodes);
-        }), catchError((error) => {
-            console.error('Failed to load permissions:', error);
+        }), catchError(() => {
             this._permissions.set(null);
             this._isLoading.set(false);
-            // Clear shared permission validator
             this.permissionValidator.clearPermissions();
             return of(void 0);
         }), map(() => void 0));
@@ -1004,10 +990,10 @@ class PermissionStateService {
         return (this._permissions() !== null &&
             this.permissionValidator.isPermissionsLoaded());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PermissionStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PermissionStateService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PermissionStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PermissionStateService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PermissionStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PermissionStateService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1041,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,11 +1129,11 @@ class LogicBuilderComponent {
         }
         return node;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LogicBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: LogicBuilderComponent, isStandalone: true, selector: "lib-logic-builder", inputs: { logic: { classPropertyName: "logic", publicName: "logic", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { logicChange: "logicChange" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LogicBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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"
@@ -1158,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>
@@ -1173,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
@@ -1187,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>
@@ -1204,7 +1198,7 @@ class LogicBuilderComponent {
             }
           </div>
 
-          <div class="node-actions">
+          <div class="flex gap-1">
             <p-button
               icon="pi pi-trash"
               [text]="true"
@@ -1217,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>
             }
@@ -1226,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"
@@ -1247,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", "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.0", ngImport: i0, type: LogicBuilderComponent, decorators: [{
+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"
@@ -1273,13 +1267,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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>
@@ -1288,11 +1282,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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
@@ -1302,13 +1296,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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>
@@ -1319,7 +1313,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
             }
           </div>
 
-          <div class="node-actions">
+          <div class="flex gap-1">
             <p-button
               icon="pi pi-trash"
               [text]="true"
@@ -1332,7 +1326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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>
             }
@@ -1341,9 +1335,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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"
@@ -1362,8 +1356,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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
@@ -1560,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);
@@ -1641,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();
@@ -1650,12 +1651,7 @@ class RoleActionSelectorComponent {
                 this.loadDataAbortController = new AbortController();
                 this.onRoleChange(this.loadDataAbortController.signal).catch((err) => {
                     if (err.name !== 'AbortError') {
-                        console.error('[Role Selector] Failed to load data:', err);
-                        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);
                     }
                 });
@@ -1665,9 +1661,6 @@ class RoleActionSelectorComponent {
             }
         });
     }
-    ngOnDestroy() {
-        this.loadDataAbortController?.abort();
-    }
     /**
      * Load roles from API
      */
@@ -1678,13 +1671,8 @@ class RoleActionSelectorComponent {
             }));
             this.roles.set(response?.data ?? []);
         }
-        catch (err) {
-            console.error('[Role Selector] Failed to load roles:', err);
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: 'Failed to load roles',
-            });
+        catch {
+            // Error toast handled by global interceptor
         }
     }
     /**
@@ -1700,13 +1688,7 @@ class RoleActionSelectorComponent {
             if (signal.aborted)
                 return;
             // Get flat list (filtered by company if enabled)
-            const flatActions = (actionsResponse?.data ?? []).filter((a) => {
-                if (!a.id) {
-                    console.warn('[Role Selector] Skipping action without ID:', a.name);
-                    return false;
-                }
-                return true;
-            });
+            const flatActions = (actionsResponse?.data ?? []).filter((a) => !!a.id);
             // Build tree structure from flat list with parentId
             const actionsTree = buildTreeFromFlat(flatActions);
             // Store both representations
@@ -1743,15 +1725,15 @@ class RoleActionSelectorComponent {
             const prerequisiteInfo = this.permissionLogic.getPrerequisiteTooltip(action, selMap, this.actions());
             if (prerequisiteInfo) {
                 const actionHint = isCurrentlySelected
-                    ? '\n\n━━━━━━━━━━━━━━━━━━\n🗑️ Click to remove'
-                    : '\n\n━━━━━━━━━━━━━━━━━━\n✚ Click to add (auto-selects required)';
+                    ? '\n\n---\n[Remove] Click to remove'
+                    : '\n\n---\n[Add] Click to add (auto-selects required)';
                 return `${prerequisiteInfo}${actionHint}`;
             }
         }
         if (isCurrentlySelected) {
-            return '✓ Assigned to role\n\n🗑️ Click to remove';
+            return '[Assigned] Assigned to role\n\n[Remove] Click to remove';
         }
-        return '➕ Click to assign to role';
+        return '[Add] Click to assign to role';
     }
     /**
      * Check if action has unmet prerequisites
@@ -1848,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);
@@ -1869,16 +1846,17 @@ class RoleActionSelectorComponent {
         this._selectionMap.set({});
         this._initialSelection.set({});
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RoleActionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: RoleActionSelectorComponent, isStandalone: true, selector: "flusys-role-action-selector", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RoleActionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: RoleActionSelectorComponent, isStandalone: true, selector: "flusys-role-action-selector", ngImport: i0, 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"
@@ -1895,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>
@@ -1934,6 +1909,7 @@ class RoleActionSelectorComponent {
                   (onClick)="deselectAll()"
                 />
                 <p-button
+                  *hasPermission="ROLE_ACTION_PERMISSIONS.ASSIGN"
                   label="Save Changes"
                   icon="pi pi-save"
                   [disabled]="!canSave()"
@@ -1947,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
@@ -1966,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"
@@ -2003,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
@@ -2014,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"
@@ -2023,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) {
@@ -2068,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) {
@@ -2088,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", "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.0", ngImport: i0, type: RoleActionSelectorComponent, decorators: [{
+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"
@@ -2129,24 +2098,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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>
@@ -2168,6 +2134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                   (onClick)="deselectAll()"
                 />
                 <p-button
+                  *hasPermission="ROLE_ACTION_PERMISSIONS.ASSIGN"
                   label="Save Changes"
                   icon="pi pi-save"
                   [disabled]="!canSave()"
@@ -2181,14 +2148,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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
@@ -2200,33 +2165,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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"
@@ -2237,7 +2202,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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
@@ -2248,7 +2213,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                       }
                     </span>
                   </td>
-                  <td>{{ rowData.code || '-' }}</td>
+                  <td class="hidden md:table-cell">{{ rowData.code || '-' }}</td>
                   <td>
                     <p-tag
                       [value]="rowData.actionType"
@@ -2257,42 +2222,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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) {
@@ -2302,12 +2266,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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) {
@@ -2322,19 +2284,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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: () => [] });
 
 /**
@@ -2372,6 +2331,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * ```
  */
 class CompanyActionSelectorComponent {
+    // Permission constants for template
+    COMPANY_ACTION_PERMISSIONS = COMPANY_ACTION_PERMISSIONS;
     // Dependencies
     companyApiProvider = inject(COMPANY_API_PROVIDER);
     actionApi = inject(ActionApiService);
@@ -2379,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" }] : []));
@@ -2453,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(() => {
@@ -2463,12 +2429,7 @@ class CompanyActionSelectorComponent {
                 this.loadDataAbortController = new AbortController();
                 this.loadData(this.loadDataAbortController.signal).catch((err) => {
                     if (err.name !== 'AbortError') {
-                        console.error('[Company Selector] Failed to load data:', err);
-                        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);
                     }
                 });
@@ -2478,9 +2439,6 @@ class CompanyActionSelectorComponent {
             }
         });
     }
-    ngOnDestroy() {
-        this.loadDataAbortController?.abort();
-    }
     /**
      * Load companies from API
      */
@@ -2492,13 +2450,8 @@ class CompanyActionSelectorComponent {
             }));
             this.companies.set(response?.data ?? []);
         }
-        catch (err) {
-            console.error('[Company Selector] Failed to load companies:', err);
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: 'Failed to load companies',
-            });
+        catch {
+            // Error toast handled by global interceptor
         }
     }
     /**
@@ -2516,13 +2469,7 @@ class CompanyActionSelectorComponent {
                 return;
             const actionsTree = actionsResponse?.data ?? [];
             // Flatten tree for business logic
-            const actionsList = flattenTree(actionsTree).filter((a) => {
-                if (!a.id) {
-                    console.warn('[Company Selector] Skipping action without ID:', a.name);
-                    return false;
-                }
-                return true;
-            });
+            const actionsList = flattenTree(actionsTree).filter((a) => !!a.id);
             // Store both representations
             this._actionsTree.set(actionsTree);
             this._actions.set(actionsList);
@@ -2565,15 +2512,15 @@ class CompanyActionSelectorComponent {
             const prerequisiteInfo = this.permissionLogic.getPrerequisiteTooltip(action, selMap, this.actions());
             if (prerequisiteInfo) {
                 const actionHint = isCurrentlySelected
-                    ? '\n\n━━━━━━━━━━━━━━━━━━\n🗑️ Click to remove'
-                    : '\n\n━━━━━━━━━━━━━━━━━━\n✚ Click to add (auto-selects required)';
+                    ? '\n\n---\n[Remove] Click to remove'
+                    : '\n\n---\n[Add] Click to add (auto-selects required)';
                 return `${prerequisiteInfo}${actionHint}`;
             }
         }
         if (isCurrentlySelected) {
-            return '✓ Selected\n\n🗑️ Click to remove from company whitelist';
+            return '[Selected] Selected\n\n[Remove] Click to remove from company whitelist';
         }
-        return '➕ Click to add to company whitelist';
+        return '[Add] Click to add to company whitelist';
     }
     /**
      * Handle action checkbox toggle
@@ -2669,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);
@@ -2737,16 +2679,17 @@ class CompanyActionSelectorComponent {
         this._selectionMap.set({});
         this._initialSelection.set({});
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CompanyActionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: CompanyActionSelectorComponent, isStandalone: true, selector: "flusys-company-action-selector", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CompanyActionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CompanyActionSelectorComponent, isStandalone: true, selector: "flusys-company-action-selector", ngImport: i0, 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"
@@ -2763,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>
@@ -2802,6 +2742,7 @@ class CompanyActionSelectorComponent {
                   (onClick)="deselectAll()"
                 />
                 <p-button
+                  *hasPermission="COMPANY_ACTION_PERMISSIONS.ASSIGN"
                   label="Save Changes"
                   icon="pi pi-save"
                   [disabled]="!canSave()"
@@ -2815,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
@@ -2834,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"
@@ -2871,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
@@ -2882,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"
@@ -2891,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) {
@@ -2929,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) {
@@ -2951,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", "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.0", ngImport: i0, type: CompanyActionSelectorComponent, decorators: [{
+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"
@@ -2992,24 +2925,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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>
@@ -3031,6 +2961,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                   (onClick)="deselectAll()"
                 />
                 <p-button
+                  *hasPermission="COMPANY_ACTION_PERMISSIONS.ASSIGN"
                   label="Save Changes"
                   icon="pi pi-save"
                   [disabled]="!canSave()"
@@ -3044,14 +2975,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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
@@ -3063,33 +2992,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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"
@@ -3100,7 +3029,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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
@@ -3111,7 +3040,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                       }
                     </span>
                   </td>
-                  <td>{{ rowData.code || '-' }}</td>
+                  <td class="hidden md:table-cell">{{ rowData.code || '-' }}</td>
                   <td>
                     <p-tag
                       [value]="rowData.actionType"
@@ -3120,36 +3049,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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) {
@@ -3158,14 +3086,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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) {
@@ -3180,19 +3105,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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: () => [] });
 
 /**
@@ -3226,18 +3148,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * ```
  */
 class UserRoleSelectorComponent {
+    // Permission constants for template
+    USER_ROLE_PERMISSIONS = USER_ROLE_PERMISSIONS;
     // Dependencies
     appConfig = inject(APP_CONFIG);
     companyContext = inject(LAYOUT_AUTH_STATE);
-    userProvider = inject(USER_PROVIDER);
     userPermissionProvider = inject(USER_PERMISSION_PROVIDER);
     roleApi = inject(RoleApiService);
     permissionApi = inject(PermissionApiService);
     messageService = inject(MessageService);
+    destroyRef = inject(DestroyRef);
+    // AbortController for data loading
+    loadDataAbortController = null;
     // State - User/Branch Selection
-    selectedUserId = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedUserId" }] : []));
+    selectedUserId = signal(null, ...(ngDevMode ? [{ debugName: "selectedUserId" }] : []));
     selectedBranchId = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedBranchId" }] : []));
-    users = signal([], ...(ngDevMode ? [{ debugName: "users" }] : []));
     branches = signal([], ...(ngDevMode ? [{ debugName: "branches" }] : []));
     // State - Loading/Saving
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
@@ -3271,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(() => {
@@ -3291,7 +3220,10 @@ class UserRoleSelectorComponent {
         return this.hasChanges() && !this.saving();
     }, ...(ngDevMode ? [{ debugName: "canSave" }] : []));
     constructor() {
-        this.loadUsers();
+        // Cleanup on destroy
+        this.destroyRef.onDestroy(() => {
+            this.loadDataAbortController?.abort();
+        });
         // Effect: Load user branches and data when user changes
         effect(() => {
             const userId = this.selectedUserId();
@@ -3318,28 +3250,6 @@ class UserRoleSelectorComponent {
             }
         });
     }
-    /**
-     * Load users from provider
-     */
-    async loadUsers() {
-        try {
-            const response = await this.userProvider
-                .getUsers({
-                page: 0,
-                pageSize: MAX_DROPDOWN_ITEMS,
-            })
-                .toPromise();
-            this.users.set(response?.data ?? []);
-        }
-        catch (err) {
-            console.error('[User Role Selector] Failed to load users:', err);
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: 'Failed to load users',
-            });
-        }
-    }
     /**
      * Load user's permitted branches
      */
@@ -3360,13 +3270,8 @@ class UserRoleSelectorComponent {
             })) ?? [];
             this.branches.set(userBranches);
         }
-        catch (err) {
-            console.error('[User Role Selector] Failed to load user branches:', err);
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: 'Failed to load user permitted branches',
-            });
+        catch {
+            // Error toast handled by global interceptor
         }
     }
     /**
@@ -3403,13 +3308,8 @@ class UserRoleSelectorComponent {
             this._selectionMap.set(selMap);
             this._initialSelection.set({ ...selMap });
         }
-        catch (err) {
-            console.error('[User Role Selector] Failed to load user roles:', err);
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: 'Failed to load user role assignments',
-            });
+        catch {
+            // Error toast handled by global interceptor
         }
         finally {
             this.loading.set(false);
@@ -3422,9 +3322,9 @@ class UserRoleSelectorComponent {
         const selMap = this.selectionMap();
         const isCurrentlySelected = selMap[role.id];
         if (isCurrentlySelected) {
-            return '✓ Assigned to user\n\n🗑️ Click to remove role';
+            return '[Assigned] Assigned to user\n\n[Remove] Click to remove role';
         }
-        return '➕ Click to assign role to user';
+        return '[Add] Click to assign role to user';
     }
     /**
      * Handle role checkbox toggle
@@ -3516,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);
@@ -3536,62 +3431,34 @@ class UserRoleSelectorComponent {
         this._selectionMap.set({});
         this._initialSelection.set({});
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UserRoleSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: UserRoleSelectorComponent, isStandalone: true, selector: "flusys-user-role-selector", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserRoleSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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>
-            <p-select
-              [(ngModel)]="selectedUserId"
-              [options]="users()"
-              optionLabel="name"
-              optionValue="id"
-              placeholder="Select a user"
-              [showClear]="true"
-              [filter]="true"
-              styleClass="w-full"
-            >
-              <ng-template #selectedItem let-user>
-                @if (user) {
-                  <div class="flex align-items-center gap-2">
-                    <i class="pi pi-user text-primary"></i>
-                    <div>
-                      <div class="font-semibold">{{ user.name }}</div>
-                      <div class="text-xs text-color-secondary">
-                        {{ user.email }}
-                      </div>
-                    </div>
-                  </div>
-                }
-              </ng-template>
-              <ng-template #item let-user>
-                <div class="flex align-items-center gap-2">
-                  <i class="pi pi-user text-color-secondary"></i>
-                  <div>
-                    <div class="font-semibold">{{ user.name }}</div>
-                    <div class="text-xs text-color-secondary">
-                      {{ user.email }}
-                    </div>
-                  </div>
-                </div>
-              </ng-template>
-            </p-select>
+            <lib-user-select
+              [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"
@@ -3602,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' : ''
                 }}
@@ -3630,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>
@@ -3669,6 +3533,7 @@ class UserRoleSelectorComponent {
                   (onClick)="deselectAll()"
                 />
                 <p-button
+                  *hasPermission="USER_ROLE_PERMISSIONS.ASSIGN"
                   label="Save Changes"
                   icon="pi pi-save"
                   [disabled]="!canSave()"
@@ -3681,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) {
@@ -3761,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) {
@@ -3781,77 +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", "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"] }], 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.0", ngImport: i0, type: UserRoleSelectorComponent, decorators: [{
+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], 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>
-            <p-select
-              [(ngModel)]="selectedUserId"
-              [options]="users()"
-              optionLabel="name"
-              optionValue="id"
-              placeholder="Select a user"
-              [showClear]="true"
-              [filter]="true"
-              styleClass="w-full"
-            >
-              <ng-template #selectedItem let-user>
-                @if (user) {
-                  <div class="flex align-items-center gap-2">
-                    <i class="pi pi-user text-primary"></i>
-                    <div>
-                      <div class="font-semibold">{{ user.name }}</div>
-                      <div class="text-xs text-color-secondary">
-                        {{ user.email }}
-                      </div>
-                    </div>
-                  </div>
-                }
-              </ng-template>
-              <ng-template #item let-user>
-                <div class="flex align-items-center gap-2">
-                  <i class="pi pi-user text-color-secondary"></i>
-                  <div>
-                    <div class="font-semibold">{{ user.name }}</div>
-                    <div class="text-xs text-color-secondary">
-                      {{ user.email }}
-                    </div>
-                  </div>
-                </div>
-              </ng-template>
-            </p-select>
+            <lib-user-select
+              [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"
@@ -3862,20 +3695,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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' : ''
                 }}
@@ -3890,24 +3723,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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>
@@ -3929,6 +3759,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                   (onClick)="deselectAll()"
                 />
                 <p-button
+                  *hasPermission="USER_ROLE_PERMISSIONS.ASSIGN"
                   label="Save Changes"
                   icon="pi pi-save"
                   [disabled]="!canSave()"
@@ -3941,77 +3772,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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) {
@@ -4021,12 +3853,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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) {
@@ -4041,12 +3871,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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>
@@ -4088,19 +3915,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * ```
  */
 class UserActionSelectorComponent {
+    // Permission constants for template
+    USER_ACTION_PERMISSIONS = USER_ACTION_PERMISSIONS;
     // Dependencies
     appConfig = inject(APP_CONFIG);
     companyContext = inject(LAYOUT_AUTH_STATE);
-    userProvider = inject(USER_PROVIDER);
     userPermissionProvider = inject(USER_PERMISSION_PROVIDER);
     actionApi = inject(ActionApiService);
     permissionApi = inject(PermissionApiService);
     permissionLogic = inject(ActionPermissionLogicService);
     messageService = inject(MessageService);
+    destroyRef = inject(DestroyRef);
+    // AbortController for data loading
+    loadDataAbortController = null;
     // State - User/Branch Selection
-    selectedUserId = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedUserId" }] : []));
+    selectedUserId = signal(null, ...(ngDevMode ? [{ debugName: "selectedUserId" }] : []));
     selectedBranchId = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedBranchId" }] : []));
-    users = signal([], ...(ngDevMode ? [{ debugName: "users" }] : []));
     branches = signal([], ...(ngDevMode ? [{ debugName: "branches" }] : []));
     // State - Loading/Saving
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
@@ -4139,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(() => {
@@ -4175,7 +4009,10 @@ class UserActionSelectorComponent {
         return (this.hasChanges() && !this.saving() && this.invalidActionsCount() === 0);
     }, ...(ngDevMode ? [{ debugName: "canSave" }] : []));
     constructor() {
-        this.loadUsers();
+        // Cleanup on destroy
+        this.destroyRef.onDestroy(() => {
+            this.loadDataAbortController?.abort();
+        });
         // Effect: Load user branches and data when user changes
         effect(() => {
             const userId = this.selectedUserId();
@@ -4202,28 +4039,6 @@ class UserActionSelectorComponent {
             }
         });
     }
-    /**
-     * Load users from provider
-     */
-    async loadUsers() {
-        try {
-            const response = await this.userProvider
-                .getUsers({
-                page: 0,
-                pageSize: MAX_DROPDOWN_ITEMS,
-            })
-                .toPromise();
-            this.users.set(response?.data ?? []);
-        }
-        catch (err) {
-            console.error('[User Selector] Failed to load users:', err);
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: 'Failed to load users',
-            });
-        }
-    }
     /**
      * Load user's permitted branches
      */
@@ -4244,13 +4059,8 @@ class UserActionSelectorComponent {
             })) ?? [];
             this.branches.set(userBranches);
         }
-        catch (err) {
-            console.error('[User Selector] Failed to load user branches:', err);
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: 'Failed to load user permitted branches',
-            });
+        catch {
+            // Error toast handled by global interceptor
         }
     }
     /**
@@ -4290,13 +4100,8 @@ class UserActionSelectorComponent {
             this._selectionMap.set(selMap);
             this._initialSelection.set({ ...selMap });
         }
-        catch (err) {
-            console.error('[User Selector] Failed to load user actions:', err);
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: 'Failed to load user action permissions',
-            });
+        catch {
+            // Error toast handled by global interceptor
         }
         finally {
             this.loading.set(false);
@@ -4312,15 +4117,15 @@ class UserActionSelectorComponent {
             const prerequisiteInfo = this.permissionLogic.getPrerequisiteTooltip(action, selMap, this.actions());
             if (prerequisiteInfo) {
                 const actionHint = isCurrentlySelected
-                    ? '\n\n━━━━━━━━━━━━━━━━━━\n🗑️ Click to remove'
-                    : '\n\n━━━━━━━━━━━━━━━━━━\n✚ Click to add (auto-selects required)';
+                    ? '\n\n---\n[Remove] Click to remove'
+                    : '\n\n---\n[Add] Click to add (auto-selects required)';
                 return `${prerequisiteInfo}${actionHint}`;
             }
         }
         if (isCurrentlySelected) {
-            return '✓ Assigned to user\n\n🗑️ Click to remove direct permission';
+            return '[Assigned] Assigned to user\n\n[Remove] Click to remove direct permission';
         }
-        return '➕ Click to assign direct permission';
+        return '[Add] Click to assign direct permission';
     }
     /**
      * Check if action has unmet prerequisites
@@ -4331,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
@@ -4387,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) => {
@@ -4426,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);
@@ -4447,62 +4258,34 @@ class UserActionSelectorComponent {
         this._selectionMap.set({});
         this._initialSelection.set({});
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UserActionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: UserActionSelectorComponent, isStandalone: true, selector: "flusys-user-action-selector", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserActionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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>
-            <p-select
-              [(ngModel)]="selectedUserId"
-              [options]="users()"
-              optionLabel="name"
-              optionValue="id"
-              placeholder="Select a user"
-              [showClear]="true"
-              [filter]="true"
-              styleClass="w-full"
-            >
-              <ng-template #selectedItem let-user>
-                @if (user) {
-                  <div class="flex align-items-center gap-2">
-                    <i class="pi pi-user text-primary"></i>
-                    <div>
-                      <div class="font-semibold">{{ user.name }}</div>
-                      <div class="text-xs text-color-secondary">
-                        {{ user.email }}
-                      </div>
-                    </div>
-                  </div>
-                }
-              </ng-template>
-              <ng-template #item let-user>
-                <div class="flex align-items-center gap-2">
-                  <i class="pi pi-user text-color-secondary"></i>
-                  <div>
-                    <div class="font-semibold">{{ user.name }}</div>
-                    <div class="text-xs text-color-secondary">
-                      {{ user.email }}
-                    </div>
-                  </div>
-                </div>
-              </ng-template>
-            </p-select>
+            <lib-user-select
+              [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"
@@ -4513,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' : ''
                 }}
@@ -4540,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>
@@ -4575,6 +4358,7 @@ class UserActionSelectorComponent {
                   (onClick)="deselectAll()"
                 />
                 <p-button
+                  *hasPermission="USER_ACTION_PERMISSIONS.ASSIGN"
                   label="Save Changes"
                   icon="pi pi-save"
                   [disabled]="!canSave()"
@@ -4586,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"
@@ -4624,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"
@@ -4635,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 {
@@ -4649,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) {
@@ -4676,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) {
@@ -4696,77 +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", "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"] }, { 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.0", ngImport: i0, type: UserActionSelectorComponent, decorators: [{
+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], 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>
-            <p-select
-              [(ngModel)]="selectedUserId"
-              [options]="users()"
-              optionLabel="name"
-              optionValue="id"
-              placeholder="Select a user"
-              [showClear]="true"
-              [filter]="true"
-              styleClass="w-full"
-            >
-              <ng-template #selectedItem let-user>
-                @if (user) {
-                  <div class="flex align-items-center gap-2">
-                    <i class="pi pi-user text-primary"></i>
-                    <div>
-                      <div class="font-semibold">{{ user.name }}</div>
-                      <div class="text-xs text-color-secondary">
-                        {{ user.email }}
-                      </div>
-                    </div>
-                  </div>
-                }
-              </ng-template>
-              <ng-template #item let-user>
-                <div class="flex align-items-center gap-2">
-                  <i class="pi pi-user text-color-secondary"></i>
-                  <div>
-                    <div class="font-semibold">{{ user.name }}</div>
-                    <div class="text-xs text-color-secondary">
-                      {{ user.email }}
-                    </div>
-                  </div>
-                </div>
-              </ng-template>
-            </p-select>
+            <lib-user-select
+              [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"
@@ -4777,20 +4554,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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' : ''
                 }}
@@ -4804,20 +4581,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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>
@@ -4839,6 +4616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                   (onClick)="deselectAll()"
                 />
                 <p-button
+                  *hasPermission="USER_ACTION_PERMISSIONS.ASSIGN"
                   label="Save Changes"
                   icon="pi pi-save"
                   [disabled]="!canSave()"
@@ -4850,34 +4628,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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"
@@ -4888,9 +4684,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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"
@@ -4899,12 +4704,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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 {
@@ -4913,24 +4718,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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) {
@@ -4940,12 +4744,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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) {
@@ -4960,23 +4762,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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
  *
@@ -4990,7 +4870,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
 const IAM_ROUTES = [
     {
         path: '',
-        loadComponent: () => import('./flusys-ng-iam-iam-container.component-BFKoNtdz.mjs').then((m) => m.IamContainerComponent),
+        loadComponent: () => import('./flusys-ng-iam-iam-container.component-Bn4kQtxW.mjs').then((m) => m.IamContainerComponent),
         children: [
             // Actions Management
             {
@@ -4998,15 +4878,15 @@ const IAM_ROUTES = [
                 children: [
                     {
                         path: '',
-                        loadComponent: () => import('./flusys-ng-iam-action-list-page.component-CCp7M7xo.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-BVWZMlLU.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-BVWZMlLU.mjs').then((m) => m.ActionFormPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-C_BRrrWW.mjs').then((m) => m.ActionFormPageComponent),
                     },
                 ],
             },
@@ -5016,22 +4896,22 @@ const IAM_ROUTES = [
                 children: [
                     {
                         path: '',
-                        loadComponent: () => import('./flusys-ng-iam-role-list-page.component-KJUVOrf0.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-Co6bbHik.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-Co6bbHik.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-C0yLMdW5.mjs').then((m) => m.PermissionPageComponent),
+                loadComponent: () => import('./flusys-ng-iam-permission-page.component-CmxOBJPu.mjs').then((m) => m.PermissionPageComponent),
             },
             // Default redirect to actions
             {
@@ -5049,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-D_i24Gub.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