@flusys/ng-iam 1.1.0-beta → 2.0.0-rc.0

package/fesm2022/{flusys-ng-iam-flusys-ng-iam-BjdM-Vgz.mjs → flusys-ng-iam-flusys-ng-iam-DrGHlTiz.mjs}

@@ -1,9 +1,8 @@
+import { HttpClient } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { inject, Injectable, signal, input, output, computed, ChangeDetectionStrategy, Component, effect } from '@angular/core';
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { ApiResourceService, PermissionValidatorService, AngularModule, PrimeModule, COMPANY_API_PROVIDER, USER_PERMISSION_PROVIDER, UserSelectComponent, PROFILE_PERMISSION_PROVIDER } from '@flusys/ng-shared';
+import { inject, Injectable, signal, input, output, effect, ChangeDetectionStrategy, Component, DestroyRef, computed } from '@angular/core';
+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, permissionGuard, ACTION_PERMISSIONS, ROLE_PERMISSIONS, anyPermissionGuard } from '@flusys/ng-shared';
 import { APP_CONFIG, BaseApiService, isCompanyFeatureEnabled } from '@flusys/ng-core';
-import * as i2$1 from 'primeng/api';
 import { ConfirmationService, MessageService } from 'primeng/api';
 import { of, firstValueFrom, map as map$1 } from 'rxjs';
 import { tap, catchError, map } from 'rxjs/operators';
@@ -12,20 +11,15 @@ import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i2 from 'primeng/button';
-import { ButtonModule } from 'primeng/button';
-import * as i7 from 'primeng/tooltip';
-import * as i4 from 'primeng/checkbox';
-import * as i5 from 'primeng/select';
-import * as i6 from 'primeng/tag';
-import * as i8 from 'primeng/treetable';
+import * 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';
 
-// ==================== ENUMS ====================
-/**
- * Action Type - determines how action is used
- * CRITICAL: Must match backend ActionType enum exactly
- */
+/** Must match backend ActionType enum */
 var ActionType;
 (function (ActionType) {
     ActionType["BACKEND"] = "backend";
@@ -35,81 +29,40 @@ var ActionType;
 
 // Company interfaces
 
-/**
- * Pagination Constants
- *
- * Standard pagination limits for IAM components.
- * Prevents excessive data loading and potential DoS.
- */
-/**
- * Maximum items to fetch for dropdown lists
- * Used for: companies, roles, users, branches
- *
- * Security: Prevents memory exhaustion from loading excessive records
- */
+/** Maximum items for dropdown lists (companies, roles, users, branches) */
 const MAX_DROPDOWN_ITEMS = 100;
 
-/**
- * Role API Service
- * Handles role CRUD operations
- * Endpoint: POST /iam/roles/*
- * Conditional: Only available in RBAC/FULL mode
- */
 class RoleApiService extends ApiResourceService {
     constructor() {
-        const http = inject(HttpClient);
-        super('iam/roles', http);
+        super('iam/roles', inject(HttpClient));
     }
     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.3", ngImport: i0, type: RoleApiService, decorators: [{
             type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+            args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
-/**
- * Action API Service
- * Handles action CRUD operations
- * Endpoint: POST /iam/actions/*
- */
 class ActionApiService extends ApiResourceService {
     appConfig = inject(APP_CONFIG);
     constructor() {
         const http = inject(HttpClient);
         super('iam/actions', http);
     }
-    /**
-     * Get actions for permission assignment
-     * GET /iam/actions/tree-for-permission
-     * Returns actions filtered by company whitelist if enabled
-     */
+    /** Get actions filtered by company whitelist for permission assignment */
     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
-     * POST /iam/actions/tree
-     * Returns all actions organized in parent-child tree
-     *
-     * @param search - Optional search term (name or code)
-     * @param isActive - Optional filter by active status
-     * @param withDeleted - Include deleted actions (default: false)
-     * @returns Observable of action tree response
-     */
+    /** Get actions in hierarchical tree structure */
     getTree(search, isActive, withDeleted) {
         const body = {};
-        if (search?.trim()) {
+        if (search?.trim())
             body.search = search.trim();
-        }
-        if (isActive !== undefined) {
+        if (isActive !== undefined)
             body.isActive = isActive;
-        }
-        if (withDeleted !== undefined) {
+        if (withDeleted !== undefined)
             body.withDeleted = withDeleted;
-        }
         return this.http.post(`${this.appConfig.apiBaseUrl}/iam/actions/tree`, body);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ActionApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -117,48 +70,24 @@ class ActionApiService extends ApiResourceService {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ActionApiService, decorators: [{
             type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+            args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
-/**
- * Extract all required action IDs from a permission logic tree
- * This is useful for prerequisite validation
- *
- * @param logic - Permission logic to analyze
- * @returns Set of action IDs that are required
- */
 function extractRequiredActionIds(logic) {
     const actionIds = new Set();
-    if (!logic) {
-        return actionIds;
+    if (logic) {
+        collectActionIds(logic, actionIds);
     }
-    collectActionIds(logic, actionIds);
     return actionIds;
 }
-/**
- * Recursively collect action IDs from logic tree
- */
 function collectActionIds(node, actionIds) {
     if (node.type === 'action' && node.actionId) {
         actionIds.add(node.actionId);
     }
     else if (node.type === 'group' && node.children) {
-        for (const child of node.children) {
-            collectActionIds(child, actionIds);
-        }
+        node.children.forEach((child) => collectActionIds(child, actionIds));
     }
 }
-/**
- * Validate if an action's prerequisites are satisfied
- * Respects AND/OR logic operators in permission tree
- *
- * @param action - Action to validate
- * @param selectedActionIds - Set of currently selected action IDs
- * @param allActions - All available actions (to look up missing ones)
- * @returns Validation result with missing actions
- */
 function validateActionPrerequisites(action, selectedActionIds, allActions) {
     if (!action.permissionLogic) {
         return { valid: true, missingActions: [] };
@@ -170,20 +99,12 @@ function validateActionPrerequisites(action, selectedActionIds, allActions) {
     const missingActions = allActions.filter((a) => a.id && result.missingActionIds.has(a.id));
     return { valid: false, missingActions };
 }
-/**
- * Recursively evaluate logic node respecting AND/OR operators
- * Returns validation result with missing action IDs (for prerequisite dialogs)
- * Note: This differs from evaluateLogicNode in ng-shared which returns boolean only
- */
 function evaluateLogicNodeWithMissing(node, selectedActionIds) {
     if (node.type === 'action' && node.actionId) {
         const valid = selectedActionIds.has(node.actionId);
-        return {
-            valid,
-            missingActionIds: valid ? new Set() : new Set([node.actionId]),
-        };
+        return { valid, missingActionIds: valid ? new Set() : new Set([node.actionId]) };
     }
-    if (node.type === 'group' && node.children && node.children.length > 0) {
+    if (node.type === 'group' && node.children?.length) {
         const operator = node.operator || 'AND';
         if (operator === 'AND') {
             const missingIds = new Set();
@@ -197,109 +118,28 @@ function evaluateLogicNodeWithMissing(node, selectedActionIds) {
             }
             return { valid: allValid, missingActionIds: missingIds };
         }
-        else {
-            for (const child of node.children) {
-                const childResult = evaluateLogicNodeWithMissing(child, selectedActionIds);
-                if (childResult.valid) {
-                    return { valid: true, missingActionIds: new Set() };
-                }
+        // OR operator
+        for (const child of node.children) {
+            const childResult = evaluateLogicNodeWithMissing(child, selectedActionIds);
+            if (childResult.valid) {
+                return { valid: true, missingActionIds: new Set() };
             }
-            const firstChildResult = evaluateLogicNodeWithMissing(node.children[0], selectedActionIds);
-            return {
-                valid: false,
-                missingActionIds: firstChildResult.missingActionIds,
-            };
         }
+        const firstChildResult = evaluateLogicNodeWithMissing(node.children[0], selectedActionIds);
+        return { valid: false, missingActionIds: firstChildResult.missingActionIds };
     }
     return { valid: true, missingActionIds: new Set() };
 }
-/**
- * Get human-readable prerequisite description
- *
- * @param logic - Permission logic to describe
- * @param allActions - All available actions for name lookup
- * @returns Human-readable string describing prerequisites
- */
-function describePrerequisites(logic, allActions) {
-    if (!logic) {
-        return 'None';
-    }
-    const requiredIds = extractRequiredActionIds(logic);
-    if (requiredIds.size === 0) {
-        return 'None';
-    }
-    const actionMap = new Map(allActions.map((a) => [a.id, a]));
-    const names = Array.from(requiredIds)
-        .map((id) => actionMap.get(id)?.name || id)
-        .filter(Boolean);
-    if (names.length === 0) {
-        return 'Unknown prerequisites';
-    }
-    if (names.length === 1) {
-        return names[0];
-    }
-    return names.join(', ');
-}
 
-/**
- * Action Permission Logic Service
- *
- * Shared service for handling smart dependency management across all action selectors:
- * - Company-Action Selector
- * - Role-Action Selector
- * - User-Action Selector
- *
- * **Core Features:**
- * - Smart auto-selection (AND/OR optimization)
- * - Dependency detection and management
- * - Alternative suggestion for OR logic
- * - Visual formatting of permission logic trees
- * - Prerequisite validation
- *
- * @example
- * constructor() {
- *   this.permissionLogic = inject(ActionPermissionLogicService);
- * }
- *
- * onActionToggle(action: IAction, newValue: boolean) {
- *   if (!newValue) {
- *     this.permissionLogic.handleUncheck(
- *       action,
- *       this.selectionMap(),
- *       this.actions(),
- *       (newMap) => this.selectionMap.set(newMap)
- *     );
- *   } else {
- *     this.permissionLogic.handleCheck(
- *       action,
- *       this.selectionMap(),
- *       this.actions(),
- *       (newMap) => this.selectionMap.set(newMap),
- *       (previousState) => this.selectionMap.set(previousState)
- *     );
- *   }
- * }
- */
+/** Shared service for smart dependency management across action selectors */
 class ActionPermissionLogicService {
     confirmationService = inject(ConfirmationService);
     messageService = inject(MessageService);
-    /**
-     * Handle checking an action with prerequisite validation
-     *
-     * Uses recursive deep scan to find ALL missing prerequisites at all levels,
-     * not just direct dependencies. This ensures cascading dependencies are
-     * resolved in a single step.
-     *
-     * @param action - Action being checked
-     * @param currentSelection - Current selection map
-     * @param allActions - All available actions
-     * @param onUpdate - Callback to update selection
-     * @param onCancel - Callback when user cancels
-     */
+    /** Handle checking an action with prerequisite validation (recursive deep scan) */
     handleCheck(action, currentSelection, allActions, onUpdate, onCancel) {
         // Validate prerequisites with RECURSIVE DEEP SCAN
         if (action.permissionLogic) {
-            const selectedActionIds = new Set(Object.keys(currentSelection).filter((id) => currentSelection[id]));
+            const selectedActionIds = this.getSelectedIds(currentSelection);
             const validationResult = validateActionPrerequisites(action, selectedActionIds, allActions);
             if (!validationResult.valid) {
                 // Store previous state
@@ -320,14 +160,7 @@ class ActionPermissionLogicService {
         selMap[action.id] = true;
         onUpdate(selMap);
     }
-    /**
-     * Handle unchecking an action with dependency detection
-     *
-     * @param action - Action being unchecked
-     * @param currentSelection - Current selection map
-     * @param allActions - All available actions
-     * @param onUpdate - Callback to update selection
-     */
+    /** Handle unchecking an action with dependency detection */
     handleUncheck(action, currentSelection, allActions, onUpdate) {
         const affectedActions = this.findActionsDependingOn(action.id, currentSelection, allActions);
         if (affectedActions.length > 0) {
@@ -339,46 +172,28 @@ class ActionPermissionLogicService {
         selMap[action.id] = false;
         onUpdate(selMap);
     }
-    /**
-     * Check if an action has unmet prerequisites
-     *
-     * @param action - Action to check
-     * @param currentSelection - Current selection map
-     * @param allActions - All available actions
-     * @returns True if action has unmet prerequisites
-     */
+    /** Check if an action has unmet prerequisites */
     hasUnmetPrerequisites(action, currentSelection, allActions) {
         const isSelected = currentSelection[action.id];
         if (!isSelected || !action.permissionLogic) {
             return false;
         }
-        const selectedActionIds = new Set(Object.keys(currentSelection).filter((id) => currentSelection[id] && id !== action.id));
+        const selectedActionIds = this.getSelectedIds(currentSelection);
+        selectedActionIds.delete(action.id);
         const validationResult = validateActionPrerequisites(action, selectedActionIds, allActions);
         return !validationResult.valid;
     }
-    /**
-     * Get all selected actions that have unmet prerequisites
-     *
-     * @param currentSelection - Current selection map
-     * @param allActions - All available actions
-     * @returns Array of actions with unmet prerequisites
-     */
+    /** Get all selected actions that have unmet prerequisites */
     getActionsWithUnmetPrerequisites(currentSelection, allActions) {
         const selectedActions = allActions.filter((a) => currentSelection[a.id]);
         return selectedActions.filter((action) => this.hasUnmetPrerequisites(action, currentSelection, allActions));
     }
-    /**
-     * Show validation error dialog with auto-fix options
-     *
-     * @param invalidActions - Actions with unmet prerequisites
-     * @param currentSelection - Current selection map
-     * @param allActions - All available actions
-     * @param onUpdate - Callback to update selection
-     */
+    /** Show validation error dialog with auto-fix options */
     showValidationErrorDialog(invalidActions, currentSelection, allActions, onUpdate) {
         const errorList = invalidActions
             .map((action) => {
-            const selectedActionIds = new Set(Object.keys(currentSelection).filter((id) => currentSelection[id] && id !== action.id));
+            const selectedActionIds = this.getSelectedIds(currentSelection);
+            selectedActionIds.delete(action.id);
             const validationResult = validateActionPrerequisites(action, selectedActionIds, allActions);
             const sanitizedActionName = this.sanitizeHtml(action.name ?? 'Unknown');
             const missingNames = validationResult.missingActions
@@ -420,19 +235,12 @@ class ActionPermissionLogicService {
             },
         });
     }
-    /**
-     * Get prerequisite description for tooltip display
-     *
-     * @param action - Action to get prerequisites for
-     * @param currentSelection - Current selection map
-     * @param allActions - All available actions
-     * @returns Plain text prerequisite description
-     */
+    /** Get prerequisite description for tooltip display */
     getPrerequisiteTooltip(action, currentSelection, allActions) {
         if (!action.permissionLogic) {
             return '';
         }
-        const selectedActionIds = new Set(Object.keys(currentSelection).filter((id) => currentSelection[id]));
+        const selectedActionIds = this.getSelectedIds(currentSelection);
         const validationResult = validateActionPrerequisites(action, selectedActionIds, allActions);
         if (validationResult.valid) {
             return '[OK] Prerequisites Satisfied\n\nAll required actions are already selected.\nYou can safely add this action.';
@@ -444,23 +252,16 @@ class ActionPermissionLogicService {
         const hint = '\n\n💡 Click to auto-select required actions';
         return `${header}\n\n${logicTree}${hint}`;
     }
-    /**
-     * Build dynamic logic tree message with AND/OR operators and nesting
-     *
-     * @param logic - Permission logic tree
-     * @param missingActions - Actions that are missing
-     * @param allActions - All available actions
-     * @param currentSelection - Current selection map for accurate status
-     * @returns HTML formatted logic tree
-     */
-    buildLogicMessage(logic, missingActions, allActions, currentSelection) {
-        const selectedIds = currentSelection
-            ? new Set(Object.keys(currentSelection).filter((id) => currentSelection[id]))
-            : new Set();
+    /** Build dynamic logic tree message with AND/OR operators and nesting */
+    buildLogicMessage(logic, _missingActions, allActions, currentSelection) {
+        const selectedIds = currentSelection ? this.getSelectedIds(currentSelection) : new Set();
         const actionMap = new Map(allActions.map((a) => [a.id, a]));
         return this.formatLogicNode(logic, selectedIds, actionMap, 0);
     }
-    // ==================== Private Methods ====================
+    /** Extract selected action IDs from selection map */
+    getSelectedIds(currentSelection) {
+        return new Set(Object.keys(currentSelection).filter((id) => currentSelection[id]));
+    }
     sanitizeHtml(text) {
         return text
             .replace(/&/g, '&')
@@ -469,24 +270,7 @@ class ActionPermissionLogicService {
             .replace(/"/g, '"')
             .replace(/'/g, ''');
     }
-    /**
-     * Recursively collect ALL missing prerequisites at all dependency levels
-     *
-     * This prevents cascading prerequisite dialogs by finding the complete
-     * dependency chain upfront.
-     *
-     * **Example:**
-     * - Action 4 requires Action 3
-     * - Action 3 requires Action 2
-     * - Action 2 requires Action 1
-     *
-     * Instead of showing 3 separate dialogs, this returns: [Action 3, Action 2, Action 1]
-     *
-     * @param action - Starting action to check
-     * @param currentSelection - Current selection map
-     * @param allActions - All available actions
-     * @returns Complete set of missing prerequisites across all levels
-     */
+    /** Recursively collect ALL missing prerequisites at all dependency levels */
     getAllMissingPrerequisitesRecursive(action, currentSelection, allActions) {
         if (!action.id)
             return [];
@@ -506,7 +290,7 @@ class ActionPermissionLogicService {
             }
             visited.add(targetAction.id);
             stack.add(targetAction.id);
-            const selectedActionIds = new Set(Object.keys(currentSelection).filter((id) => currentSelection[id]));
+            const selectedActionIds = this.getSelectedIds(currentSelection);
             const result = validateActionPrerequisites(targetAction, selectedActionIds, allActions);
             if (!result.valid) {
                 result.missingActions.forEach((missingAction) => {
@@ -567,7 +351,7 @@ class ActionPermissionLogicService {
             },
         });
     }
-    showDependencyDialog(action, affectedActions, currentSelection, allActions, onUpdate) {
+    showDependencyDialog(action, affectedActions, currentSelection, _allActions, onUpdate) {
         if (!action.id)
             return;
         const alternatives = this.findAlternatives(action.id, affectedActions, currentSelection);
@@ -690,7 +474,7 @@ class ActionPermissionLogicService {
     calculateSmartSelection(logic, missingActions, currentSelection, allActions) {
         const missingIds = new Set(missingActions.map((a) => a.id));
         const actionMap = new Map(allActions.map((a) => [a.id, a]));
-        const selectedIds = new Set(Object.keys(currentSelection).filter((id) => currentSelection[id]));
+        const selectedIds = this.getSelectedIds(currentSelection);
         const requiredIds = this.findRequiredActionIds(logic, missingIds, selectedIds);
         return Array.from(requiredIds)
             .map((id) => actionMap.get(id))
@@ -763,12 +547,10 @@ class ActionPermissionLogicService {
         }
         return `${indent}<em style="color: #9ca3af;">Invalid logic node</em>`;
     }
-    /**
-     * Build clean text-based logic tree for tooltips
-     */
+    /** Build clean text-based logic tree for tooltips */
     buildTooltipLogicTree(node, currentSelection, allActions, depth) {
         const indent = '  '.repeat(depth);
-        const selectedIds = new Set(Object.keys(currentSelection).filter((id) => currentSelection[id]));
+        const selectedIds = this.getSelectedIds(currentSelection);
         const actionMap = new Map(allActions.map((a) => [a.id, a]));
         if (node.type === 'action' && node.actionId) {
             const action = actionMap.get(node.actionId);
@@ -803,110 +585,43 @@ class ActionPermissionLogicService {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ActionPermissionLogicService, decorators: [{
             type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+            args: [{ providedIn: 'root' }]
         }] });
 
-/**
- * Consolidated Permission API Service
- * Handles all permission-related operations in one service
- * Supports:
- * - User → Action (direct permissions)
- * - User → Role (role assignments)
- * - Role → Action (role permissions)
- * - Company → Action (company whitelisting)
- *
- * Endpoint: POST /permissions/*
- */
 class PermissionApiService extends BaseApiService {
     constructor() {
         super('iam');
     }
-    // =============================================================================
-    // User → Action (Direct Permissions)
-    // =============================================================================
-    /**
-     * Assign/remove actions directly to/from user
-     * POST /permissions/user-actions/assign
-     */
     assignUserActions(data) {
         return this.http.post(this.getUrl('permissions/user-actions/assign'), data);
     }
-    /**
-     * Get user's direct action permissions
-     * GET /permissions/user-actions/:userId
-     */
     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)
-    // =============================================================================
-    /**
-     * Assign/remove roles to/from user
-     * POST /permissions/user-roles/assign
-     */
     assignUserRoles(data) {
         return this.http.post(this.getUrl('permissions/user-roles/assign'), data);
     }
-    /**
-     * Get user's role assignments
-     * GET /permissions/user-roles/:userId
-     */
     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)
-    // =============================================================================
-    /**
-     * Assign/remove actions to/from role
-     * POST /permissions/role-actions/assign
-     */
     assignRoleActions(data) {
         return this.http.post(this.getUrl('permissions/role-actions/assign'), data);
     }
-    /**
-     * Get role's action permissions
-     * GET /permissions/role-actions/:roleId
-     */
-    getRoleActions(roleId, query) {
-        return this.http.get(this.getUrl(`permissions/role-actions/${roleId}`));
+    getRoleActions(roleId) {
+        return this.http.post(this.getUrl('permissions/get-role-actions'), { roleId });
     }
-    // =============================================================================
-    // Company → Action (Company Whitelisting)
-    // =============================================================================
-    /**
-     * Assign/remove actions to/from company (whitelisting)
-     * POST /permissions/company-actions/assign
-     */
     assignCompanyActions(data) {
         return this.http.post(this.getUrl('permissions/company-actions/assign'), data);
     }
-    /**
-     * Get company's whitelisted actions
-     * GET /permissions/company-actions/:companyId
-     */
     getCompanyActions(companyId) {
-        return this.http.get(this.getUrl(`permissions/company-actions/${companyId}`));
+        return this.http.post(this.getUrl('permissions/get-company-actions'), { companyId });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PermissionApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PermissionApiService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PermissionApiService, decorators: [{
             type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+            args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
 /**
@@ -941,47 +656,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-/**
- * Permission State Service
- * Manages user permissions state and provides permission checking methods
- *
- * Uses shared PermissionValidatorService for centralized permission checking.
- *
- * @example
- * ```typescript
- * // In component
- * readonly permissionState = inject(PermissionStateService);
- *
- * ngOnInit() {
- *   this.permissionState.loadPermissions();
- * }
- *
- * // Check permission
- * if (this.permissionState.hasAction('user.create')) {
- *   // Show create button
- * }
- * ```
- */
 class PermissionStateService {
     permissionApi = inject(MyPermissionsApiService);
     permissionValidator = inject(PermissionValidatorService);
-    // Permission state
     _permissions = signal(null, ...(ngDevMode ? [{ debugName: "_permissions" }] : []));
     permissions = this._permissions.asReadonly();
-    // Loading state
     _isLoading = signal(false, ...(ngDevMode ? [{ debugName: "_isLoading" }] : []));
     isLoading = this._isLoading.asReadonly();
-    /**
-     * Load current user's permissions from API
-     * Call this on app initialization or after login
-     * Returns Observable for reactive composition
-     */
     loadPermissions(dto) {
         this._isLoading.set(true);
         return this.permissionApi.getMyPermissions(dto).pipe(tap((response) => {
             this._permissions.set(response.data ?? null);
             this._isLoading.set(false);
-            // Update shared permission validator
             const actionCodes = response.data?.frontendActions.map((a) => a.code) ?? [];
             this.permissionValidator.setPermissions(actionCodes);
         }), catchError(() => {
@@ -991,14 +677,8 @@ class PermissionStateService {
             return of(void 0);
         }), map(() => void 0));
     }
-    /**
-     * Check if permissions are loaded
-     *
-     * @returns true if permissions are loaded
-     */
     isLoaded() {
-        return (this._permissions() !== null &&
-            this.permissionValidator.isPermissionsLoaded());
+        return this._permissions() !== null && this.permissionValidator.isPermissionsLoaded();
     }
     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' });
@@ -1022,120 +702,108 @@ function toLogicNode(node) {
 }
 function toBuilderNode(node) {
     if (node.type === 'action') {
-        return { id: crypto.randomUUID(), type: 'action', actionId: node.actionId };
+        return createActionNode(node.actionId);
     }
     return {
-        id: crypto.randomUUID(),
-        type: 'group',
-        operator: node.operator,
+        ...createGroupNode(node.operator),
         children: node.children?.map(toBuilderNode) ?? [],
     };
 }
+function createGroupNode(operator = 'AND') {
+    return { id: crypto.randomUUID(), type: 'group', operator, children: [] };
+}
+function createActionNode(actionId = '') {
+    return { id: crypto.randomUUID(), type: 'action', actionId };
+}
 /** Visual builder for AND/OR permission logic trees */
 class LogicBuilderComponent {
     logic = input(null, ...(ngDevMode ? [{ debugName: "logic" }] : []));
     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() {
+        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 = {
-            id: crypto.randomUUID(),
-            type: 'group',
-            operator: 'AND',
-            children: [],
-        };
-        this.emitChange();
+        this.updateTreeAndEmit(createGroupNode());
     }
     clearLogic() {
-        this.builderTree = null;
+        this._builderTree.set(null);
         this.logicChange.emit(null);
     }
     toggleOperator(nodeId) {
-        if (!this.builderTree)
-            return;
-        this.builderTree = this.updateNodeInTree(this.builderTree, nodeId, (node) => ({
+        this.updateNode(nodeId, (node) => ({
             ...node,
             operator: node.operator === 'AND' ? 'OR' : 'AND',
         }));
-        this.emitChange();
     }
     addChildNode(parentId, type) {
-        if (!this.builderTree)
-            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) => ({
+        const newNode = type === 'group' ? createGroupNode() : createActionNode();
+        this.updateNode(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.emitChange();
+        this.updateTreeAndEmit(this.removeNodeFromTree(tree, nodeId));
     }
     updateActionId(nodeId, actionId) {
-        if (!this.builderTree)
-            return;
-        this.builderTree = this.updateNodeInTree(this.builderTree, nodeId, (node) => ({
-            ...node,
-            actionId,
-        }));
-        this.emitChange();
+        this.updateNode(nodeId, (node) => ({ ...node, actionId }));
     }
-    emitChange() {
-        if (!this.builderTree) {
-            this.logicChange.emit(null);
+    /** Updates a node in the tree and emits the change */
+    updateNode(nodeId, updater) {
+        const tree = this._builderTree();
+        if (!tree)
             return;
-        }
-        this.logicChange.emit(toLogicNode(this.builderTree));
+        this.updateTreeAndEmit(this.updateNodeInTree(tree, nodeId, updater));
+    }
+    /** Sets the tree and emits the change */
+    updateTreeAndEmit(tree) {
+        this._builderTree.set(tree);
+        this.logicChange.emit(toLogicNode(tree));
     }
     updateNodeInTree(node, targetId, updater) {
         if (node.id === targetId)
             return updater(node);
-        if (node.children) {
-            return {
-                ...node,
-                children: node.children.map((child) => this.updateNodeInTree(child, targetId, updater)),
-            };
-        }
-        return node;
+        if (!node.children)
+            return node;
+        return {
+            ...node,
+            children: node.children.map((child) => this.updateNodeInTree(child, targetId, updater)),
+        };
     }
     removeNodeFromTree(node, targetId) {
-        if (node.children) {
-            return {
-                ...node,
-                children: node.children
-                    .filter((child) => child.id !== targetId)
-                    .map((child) => this.removeNodeFromTree(child, targetId)),
-            };
-        }
-        return node;
+        if (!node.children)
+            return node;
+        return {
+            ...node,
+            children: node.children
+                .filter((child) => child.id !== targetId)
+                .map((child) => this.removeNodeFromTree(child, targetId)),
+        };
     }
     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"
@@ -1154,13 +822,13 @@ class LogicBuilderComponent {
       </div>
 
       @if (builderLogic()) {
-        <div class="border rounded p-3 bg-gray-50">
-          <div class="mb-3 text-sm text-gray-600">
+        <div class="border border-surface rounded p-3 bg-surface-50">
+          <div class="mb-3 text-sm text-muted-color">
             Define permission requirements using AND/OR logic with actions
           </div>
 
           <!-- Root Node -->
-          <div class="logic-tree bg-white rounded border">
+          <div class="text-sm bg-surface-0 rounded border border-surface">
             <ng-container *ngTemplateOutlet="nodeTemplate; context: { $implicit: builderLogic()!, depth: 0 }"></ng-container>
           </div>
         </div>
@@ -1169,11 +837,11 @@ class LogicBuilderComponent {
 
     <!-- Recursive Node Template -->
     <ng-template #nodeTemplate let-node let-depth="depth">
-      <div class="node" [style.background-color]="depth % 2 === 0 ? '#ffffff' : '#f9fafb'">
-        <div class="node-header">
+      <div class="p-3 border-b border-surface" [ngClass]="depth % 2 === 0 ? 'bg-surface-0' : 'bg-surface-50'">
+        <div class="flex items-center gap-3 mb-2">
           <span class="node-type" [ngClass]="node.type">{{ node.type.toUpperCase() }}</span>
 
-          <div class="node-content">
+          <div class="flex-1 flex items-center gap-2">
             @if (node.type === 'group') {
               <!-- Group: show operator toggle -->
               <span
@@ -1183,24 +851,24 @@ 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>
-                @for (action of availableActions(); track action.id) {
+                <option [value]="null">Select Action... ({{ actions().length }} available)</option>
+                @for (action of actions(); track action.id) {
                   <option [ngValue]="action.id">{{ action.name }}</option>
                 }
               </select>
             }
           </div>
 
-          <div class="node-actions">
+          <div class="flex gap-1">
             <p-button
               icon="pi pi-trash"
               [text]="true"
@@ -1213,7 +881,7 @@ class LogicBuilderComponent {
 
         <!-- Children for group nodes -->
         @if (node.type === 'group' && node.children && node.children.length > 0) {
-          <div class="node-children">
+          <div class="ml-5 mt-2 pl-3 border-l-2 border-surface">
             @for (child of node.children; track child.id) {
               <ng-container *ngTemplateOutlet="nodeTemplate; context: { $implicit: child, depth: depth + 1 }"></ng-container>
             }
@@ -1222,9 +890,9 @@ class LogicBuilderComponent {
 
         <!-- Add child buttons for group nodes -->
         @if (node.type === 'group') {
-          <div class="add-child-section">
-            <div class="text-xs font-semibold text-gray-600 mb-2">Add Condition:</div>
-            <div class="add-child-buttons">
+          <div class="mt-3 p-3 bg-surface-50 rounded border border-dashed border-surface">
+            <div class="text-xs font-semibold text-muted-color mb-2">Add Condition:</div>
+            <div class="flex gap-2 flex-wrap">
               <p-button
                 label="Group"
                 icon="pi pi-sitemap"
@@ -1243,14 +911,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: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: ButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}.node-type{display:inline-flex;align-items:center;padding:.25rem .5rem;border-radius:.25rem;font-weight:600;font-size:.75rem;text-transform:uppercase}.node-type.group{background-color:var(--p-blue-100, #dbeafe);color:var(--p-blue-700, #1e40af)}.node-type.action{background-color:var(--p-green-100, #d1fae5);color:var(--p-green-700, #065f46)}:host-context(.p-dark) .node-type.group{background-color:#3b82f633;color:var(--p-blue-400, #60a5fa)}:host-context(.p-dark) .node-type.action{background-color:#22c55e33;color:var(--p-green-400, #4ade80)}.operator-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:9999px;font-weight:600;font-size:.75rem;cursor:pointer;transition:opacity .2s}.operator-badge.and{background-color:var(--p-yellow-100, #fef3c7);color:var(--p-yellow-700, #92400e)}.operator-badge.or{background-color:var(--p-indigo-100, #e0e7ff);color:var(--p-indigo-700, #3730a3)}:host-context(.p-dark) .operator-badge.and{background-color:#eab30833;color:var(--p-yellow-400, #facc15)}:host-context(.p-dark) .operator-badge.or{background-color:#6366f133;color:var(--p-indigo-400, #818cf8)}.operator-badge:hover{opacity:.8}.action-select{background-color:var(--p-surface-0, #ffffff);color:var(--p-text-color, #1f2937)}:host-context(.p-dark) .action-select{background-color:var(--p-surface-900, #1f2937);color:var(--p-text-color, #f9fafb)}.action-select:focus{outline:none;border-color:var(--p-primary-color, #3b82f6)}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LogicBuilderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-logic-builder', standalone: true, imports: [CommonModule, FormsModule, AngularModule, PrimeModule, ButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'lib-logic-builder', imports: [AngularModule, PrimeModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div class="logic-builder">
       <div class="flex justify-between items-center mb-3">
-        <h4 class="text-sm font-semibold">Permission Logic</h4>
+        <h4 class="text-sm font-semibold m-0">Permission Logic</h4>
         @if (!builderLogic()) {
           <p-button
             label="Add Logic"
@@ -1269,13 +937,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
       </div>
 
       @if (builderLogic()) {
-        <div class="border rounded p-3 bg-gray-50">
-          <div class="mb-3 text-sm text-gray-600">
+        <div class="border border-surface rounded p-3 bg-surface-50">
+          <div class="mb-3 text-sm text-muted-color">
             Define permission requirements using AND/OR logic with actions
           </div>
 
           <!-- Root Node -->
-          <div class="logic-tree bg-white rounded border">
+          <div class="text-sm bg-surface-0 rounded border border-surface">
             <ng-container *ngTemplateOutlet="nodeTemplate; context: { $implicit: builderLogic()!, depth: 0 }"></ng-container>
           </div>
         </div>
@@ -1284,11 +952,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 
     <!-- Recursive Node Template -->
     <ng-template #nodeTemplate let-node let-depth="depth">
-      <div class="node" [style.background-color]="depth % 2 === 0 ? '#ffffff' : '#f9fafb'">
-        <div class="node-header">
+      <div class="p-3 border-b border-surface" [ngClass]="depth % 2 === 0 ? 'bg-surface-0' : 'bg-surface-50'">
+        <div class="flex items-center gap-3 mb-2">
           <span class="node-type" [ngClass]="node.type">{{ node.type.toUpperCase() }}</span>
 
-          <div class="node-content">
+          <div class="flex-1 flex items-center gap-2">
             @if (node.type === 'group') {
               <!-- Group: show operator toggle -->
               <span
@@ -1298,24 +966,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 title="Click to toggle">
                 {{ node.operator }}
               </span>
-              <span class="text-gray-600 text-xs">({{ node.children?.length || 0 }} conditions)</span>
+              <span class="text-muted-color text-xs">({{ node.children?.length || 0 }} conditions)</span>
             }
 
             @if (node.type === 'action') {
               <!-- Action: show action selector -->
               <select
-                class="flex-1"
+                class="action-select flex-1 p-2 border border-surface rounded text-sm"
                 [ngModel]="node.actionId"
                 (ngModelChange)="updateActionId(node.id, $event)">
-                <option [value]="null">Select Action... ({{ availableActions().length }} available)</option>
-                @for (action of availableActions(); track action.id) {
+                <option [value]="null">Select Action... ({{ actions().length }} available)</option>
+                @for (action of actions(); track action.id) {
                   <option [ngValue]="action.id">{{ action.name }}</option>
                 }
               </select>
             }
           </div>
 
-          <div class="node-actions">
+          <div class="flex gap-1">
             <p-button
               icon="pi pi-trash"
               [text]="true"
@@ -1328,7 +996,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 
         <!-- Children for group nodes -->
         @if (node.type === 'group' && node.children && node.children.length > 0) {
-          <div class="node-children">
+          <div class="ml-5 mt-2 pl-3 border-l-2 border-surface">
             @for (child of node.children; track child.id) {
               <ng-container *ngTemplateOutlet="nodeTemplate; context: { $implicit: child, depth: depth + 1 }"></ng-container>
             }
@@ -1337,9 +1005,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 
         <!-- Add child buttons for group nodes -->
         @if (node.type === 'group') {
-          <div class="add-child-section">
-            <div class="text-xs font-semibold text-gray-600 mb-2">Add Condition:</div>
-            <div class="add-child-buttons">
+          <div class="mt-3 p-3 bg-surface-50 rounded border border-dashed border-surface">
+            <div class="text-xs font-semibold text-muted-color mb-2">Add Condition:</div>
+            <div class="flex gap-2 flex-wrap">
               <p-button
                 label="Group"
                 icon="pi pi-sitemap"
@@ -1358,105 +1026,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         }
       </div>
     </ng-template>
-  `, styles: [":host{display:block}.logic-tree{font-size:.875rem}.node{padding:.75rem;border-bottom:1px solid #e5e7eb}.node:last-child{border-bottom:none}.node-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.node-type{display:inline-flex;align-items:center;padding:.25rem .5rem;border-radius:.25rem;font-weight:600;font-size:.75rem;text-transform:uppercase}.node-type.group{background-color:#dbeafe;color:#1e40af}.node-type.action{background-color:#d1fae5;color:#065f46}.node-content{flex:1;display:flex;align-items:center;gap:.5rem}.node-actions{display:flex;gap:.25rem}.node-children{margin-left:1.5rem;margin-top:.5rem;padding-left:1rem;border-left:2px solid #e5e7eb}.operator-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:9999px;font-weight:600;font-size:.75rem;cursor:pointer;transition:all .2s}.operator-badge.and{background-color:#fef3c7;color:#92400e}.operator-badge.or{background-color:#e0e7ff;color:#3730a3}.operator-badge:hover{opacity:.8}select{padding:.375rem .75rem;border:1px solid #d1d5db;border-radius:.375rem;font-size:.875rem;background-color:#fff}select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.add-child-section{margin-top:.75rem;padding:.75rem;background-color:#f9fafb;border-radius:.375rem;border:1px dashed #d1d5db}.add-child-buttons{display:flex;gap:.5rem;flex-wrap:wrap}\n"] }]
-        }], propDecorators: { logic: [{ type: i0.Input, args: [{ isSignal: true, alias: "logic", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], logicChange: [{ type: i0.Output, args: ["logicChange"] }] } });
+  `, styles: [":host{display:block}.node-type{display:inline-flex;align-items:center;padding:.25rem .5rem;border-radius:.25rem;font-weight:600;font-size:.75rem;text-transform:uppercase}.node-type.group{background-color:var(--p-blue-100, #dbeafe);color:var(--p-blue-700, #1e40af)}.node-type.action{background-color:var(--p-green-100, #d1fae5);color:var(--p-green-700, #065f46)}:host-context(.p-dark) .node-type.group{background-color:#3b82f633;color:var(--p-blue-400, #60a5fa)}:host-context(.p-dark) .node-type.action{background-color:#22c55e33;color:var(--p-green-400, #4ade80)}.operator-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:9999px;font-weight:600;font-size:.75rem;cursor:pointer;transition:opacity .2s}.operator-badge.and{background-color:var(--p-yellow-100, #fef3c7);color:var(--p-yellow-700, #92400e)}.operator-badge.or{background-color:var(--p-indigo-100, #e0e7ff);color:var(--p-indigo-700, #3730a3)}:host-context(.p-dark) .operator-badge.and{background-color:#eab30833;color:var(--p-yellow-400, #facc15)}:host-context(.p-dark) .operator-badge.or{background-color:#6366f133;color:var(--p-indigo-400, #818cf8)}.operator-badge:hover{opacity:.8}.action-select{background-color:var(--p-surface-0, #ffffff);color:var(--p-text-color, #1f2937)}:host-context(.p-dark) .action-select{background-color:var(--p-surface-900, #1f2937);color:var(--p-text-color, #f9fafb)}.action-select:focus{outline:none;border-color:var(--p-primary-color, #3b82f6)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { logic: [{ type: i0.Input, args: [{ isSignal: true, alias: "logic", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], logicChange: [{ type: i0.Output, args: ["logicChange"] }] } });
 
-/**
- * Tree Utility Functions
- * Shared utilities for working with hierarchical tree structures
- */
-/**
- * Flattens a hierarchical tree structure into a flat array
- *
- * @template T - Type of tree node (must have optional children array)
- * @param tree - Array of tree nodes to flatten
- * @returns Flat array containing all nodes from the tree
- *
- * @example
- * ```typescript
- * const tree = [
- *   { id: '1', name: 'Parent', children: [
- *     { id: '2', name: 'Child 1' },
- *     { id: '3', name: 'Child 2' }
- *   ]}
- * ];
- * const flat = flattenTree(tree);
- * // Returns: [{ id: '1', ... }, { id: '2', ... }, { id: '3', ... }]
- * ```
- */
 function flattenTree(tree) {
-    if (!tree?.length) {
+    if (!tree?.length)
         return [];
-    }
     const result = [];
     const flatten = (nodes) => {
         for (const node of nodes) {
             result.push(node);
-            if (node.children?.length) {
+            if (node.children?.length)
                 flatten(node.children);
-            }
         }
     };
     flatten(tree);
     return result;
 }
-/**
- * Builds a map of items by their ID for quick lookup
- *
- * @template T - Type of item (must have id property)
- * @param items - Array of items to map
- * @returns Map with item IDs as keys and items as values
- *
- * @example
- * ```typescript
- * const actions = [{ id: '1', name: 'Action 1' }, { id: '2', name: 'Action 2' }];
- * const map = buildItemMap(actions);
- * const action = map.get('1'); // { id: '1', name: 'Action 1' }
- * ```
- */
-function buildItemMap(items) {
-    if (!items?.length) {
-        return new Map();
-    }
-    return new Map(items
-        .filter((item) => item?.id !== undefined && item?.id !== null)
-        .map((item) => [String(item.id), item]));
-}
-/**
- * Build tree structure from flat list using parentId
- *
- * Converts flat array with parentId references into hierarchical tree structure.
- * Used when backend returns flat list but tree structure is needed for display.
- *
- * @template T - Type of node (must have id and optional parentId)
- * @param flatList - Flat array of nodes with parentId references
- * @returns Hierarchical tree with children arrays
- *
- * @example
- * ```typescript
- * const flat = [
- *   { id: '1', name: 'Parent', parentId: null },
- *   { id: '2', name: 'Child 1', parentId: '1' },
- *   { id: '3', name: 'Child 2', parentId: '1' }
- * ];
- * const tree = buildTreeFromFlat(flat);
- * // Returns: [{ id: '1', name: 'Parent', children: [child1, child2] }]
- * ```
- */
 function buildTreeFromFlat(flatList) {
-    if (!flatList?.length) {
+    if (!flatList?.length)
         return [];
-    }
-    // Create map for O(1) lookup
     const itemMap = new Map();
     const rootItems = [];
-    // First pass: Create all nodes with empty children arrays
     flatList.forEach((item) => {
-        if (item.id) {
+        if (item.id)
             itemMap.set(item.id, { ...item, children: [] });
-        }
     });
-    // Second pass: Build parent-child relationships
     flatList.forEach((item) => {
         if (!item.id)
             return;
@@ -1464,51 +1059,23 @@ function buildTreeFromFlat(flatList) {
         if (!node)
             return;
         if (!item.parentId) {
-            // Root level item
             rootItems.push(node);
         }
         else {
-            // Child item - add to parent's children
             const parent = itemMap.get(item.parentId);
             if (parent) {
                 parent.children.push(node);
             }
             else {
-                // Parent not found - treat as root
                 rootItems.push(node);
             }
         }
     });
     return rootItems;
 }
-/**
- * Convert ActionTreeDto to PrimeNG TreeNode format
- *
- * Transforms hierarchical action data from backend into PrimeNG TreeTable format.
- * Recursively processes children and sets leaf/expanded properties.
- *
- * @param actions - Array of action tree DTOs from backend
- * @returns Array of TreeNodes for PrimeNG TreeTable
- *
- * @example
- * ```typescript
- * const actionsTree = [
- *   {
- *     id: '1',
- *     name: 'User Management',
- *     children: [
- *       { id: '2', name: 'Create User', children: [] }
- *     ]
- *   }
- * ];
- * const treeNodes = convertActionToTreeNode(actionsTree);
- * // Use with: <p-treeTable [value]="treeNodes">
- * ```
- */
 function convertActionToTreeNode(actions) {
-    if (!actions?.length) {
+    if (!actions?.length)
         return [];
-    }
     const convert = (action) => {
         const { children, ...actionData } = action;
         return {
@@ -1556,7 +1123,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);
@@ -1605,17 +1175,14 @@ class RoleActionSelectorComponent {
         const selMap = this.selectionMap();
         const allActions = this.actions();
         const unmetSet = new Set();
-        allActions.forEach((action) => {
-            if (action.id &&
-                this.permissionLogic.hasUnmetPrerequisites(action, selMap, allActions)) {
+        for (const action of allActions) {
+            if (action.id && this.permissionLogic.hasUnmetPrerequisites(action, selMap, allActions)) {
                 unmetSet.add(action.id);
             }
-        });
+        }
         return unmetSet;
     }, ...(ngDevMode ? [{ debugName: "actionsWithUnmetPrerequisites" }] : []));
-    invalidActionsCount = computed(() => {
-        return this.actionsWithUnmetPrerequisites().size;
-    }, ...(ngDevMode ? [{ debugName: "invalidActionsCount" }] : []));
+    invalidActionsCount = computed(() => this.actionsWithUnmetPrerequisites().size, ...(ngDevMode ? [{ debugName: "invalidActionsCount" }] : []));
     // Computed - Pending Changes
     pendingAdd = computed(() => {
         const current = this.selectionMap();
@@ -1637,6 +1204,10 @@ class RoleActionSelectorComponent {
     loadDataAbortController = null;
     constructor() {
         this.loadRoles();
+        // Cleanup on destroy
+        this.destroyRef.onDestroy(() => {
+            this.loadDataAbortController?.abort();
+        });
         // Effect: Load data when role selection changes
         effect(() => {
             const roleId = this.selectedRoleId();
@@ -1646,11 +1217,7 @@ class RoleActionSelectorComponent {
                 this.loadDataAbortController = new AbortController();
                 this.onRoleChange(this.loadDataAbortController.signal).catch((err) => {
                     if (err.name !== 'AbortError') {
-                        this.messageService.add({
-                            severity: 'error',
-                            summary: 'Error',
-                            detail: 'Failed to load role permissions. Please refresh.',
-                        });
+                        // Error toast handled by global interceptor
                         this.loading.set(false);
                     }
                 });
@@ -1660,9 +1227,6 @@ class RoleActionSelectorComponent {
             }
         });
     }
-    ngOnDestroy() {
-        this.loadDataAbortController?.abort();
-    }
     /**
      * Load roles from API
      */
@@ -1674,11 +1238,7 @@ class RoleActionSelectorComponent {
             this.roles.set(response?.data ?? []);
         }
         catch {
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: 'Failed to load roles',
-            });
+            // Error toast handled by global interceptor
         }
     }
     /**
@@ -1707,13 +1267,12 @@ class RoleActionSelectorComponent {
             const assignedIds = new Set((assignedResponse?.data || []).map((a) => a.actionId));
             // Build selection map
             const selMap = {};
-            flatActions.forEach((action) => {
+            for (const action of flatActions) {
                 if (action.id) {
                     selMap[action.id] = assignedIds.has(action.id);
                 }
-            });
-            this._selectionMap.set(selMap);
-            this._initialSelection.set({ ...selMap });
+            }
+            this.applySelection(selMap);
         }
         finally {
             if (!signal.aborted) {
@@ -1762,35 +1321,20 @@ class RoleActionSelectorComponent {
             this.permissionLogic.handleCheck(action, this.selectionMap(), this.actions(), (newMap) => this._selectionMap.set(newMap), (previousState) => this._selectionMap.set(previousState));
         }
     }
-    /**
-     * Toggle all actions
-     */
     toggleAll() {
-        const newValue = !this.allSelected();
-        const selMap = {};
-        this.actions().forEach((action) => {
-            selMap[action.id] = newValue;
-        });
-        this._selectionMap.set(selMap);
+        this.setAllSelection(!this.allSelected());
     }
-    /**
-     * Select all actions
-     */
     selectAll() {
-        const selMap = {};
-        this.actions().forEach((action) => {
-            selMap[action.id] = true;
-        });
-        this._selectionMap.set(selMap);
+        this.setAllSelection(true);
     }
-    /**
-     * Deselect all actions
-     */
     deselectAll() {
+        this.setAllSelection(false);
+    }
+    setAllSelection(value) {
         const selMap = {};
-        this.actions().forEach((action) => {
-            selMap[action.id] = false;
-        });
+        for (const action of this.actions()) {
+            selMap[action.id] = value;
+        }
         this._selectionMap.set(selMap);
     }
     /**
@@ -1807,19 +1351,7 @@ class RoleActionSelectorComponent {
             return;
         }
         // Build payload
-        const items = [];
-        this.pendingAdd().forEach((action) => {
-            items.push({
-                id: action.id,
-                action: 'add',
-            });
-        });
-        this.pendingRemove().forEach((action) => {
-            items.push({
-                id: action.id,
-                action: 'remove',
-            });
-        });
+        const items = this.buildPayloadItems();
         if (items.length === 0)
             return;
         this.saving.set(true);
@@ -1836,21 +1368,27 @@ 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);
         }
     }
-    /**
-     * Reset component state
-     */
+    applySelection(selMap) {
+        this._selectionMap.set(selMap);
+        this._initialSelection.set({ ...selMap });
+    }
+    buildPayloadItems() {
+        const items = [];
+        for (const action of this.pendingAdd()) {
+            items.push({ id: action.id, action: 'add' });
+        }
+        for (const action of this.pendingRemove()) {
+            items.push({ id: action.id, action: 'remove' });
+        }
+        return items;
+    }
     resetState() {
         this._actionsTree.set([]);
         this._actions.set([]);
@@ -1862,11 +1400,12 @@ class RoleActionSelectorComponent {
     <div class="role-action-selector">
       <!-- Role Selector -->
       <div class="mb-4">
-        <div class="grid">
-          <div class="col-12 md:col-6 lg:col-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div>
             <label class="block font-semibold mb-2">Select Role</label>
             <p-select
-              [(ngModel)]="selectedRoleId"
+              [ngModel]="selectedRoleId()"
+              (ngModelChange)="selectedRoleId.set($event)"
               [options]="roles()"
               optionLabel="name"
               optionValue="id"
@@ -1883,24 +1422,21 @@ class RoleActionSelectorComponent {
         <!-- Loading State -->
         @if (loading()) {
           <div
-            class="surface-card p-5 border-round shadow-1 flex justify-content-center"
+            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
           >
-            <i
-              class="pi pi-spin pi-spinner text-primary"
-              style="font-size: 3rem"
-            ></i>
+            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
           </div>
         }
 
         <!-- Action List -->
         @if (!loading() && actions().length > 0) {
-          <div class="surface-card p-4 border-round shadow-1">
+          <div class="surface-card p-4 rounded-border shadow-sm">
             <div
-              class="flex flex-column md:flex-row justify-content-between align-items-start md:align-items-center gap-3 mb-4"
+              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
             >
               <div>
                 <h5 class="m-0 mb-1">Action Permissions</h5>
-                <p class="text-sm text-color-secondary m-0">
+                <p class="text-sm text-muted-color m-0">
                   {{ actions().length }} actions available
                 </p>
               </div>
@@ -1922,6 +1458,7 @@ class RoleActionSelectorComponent {
                   (onClick)="deselectAll()"
                 />
                 <p-button
+                  *hasPermission="ROLE_ACTION_PERMISSIONS.ASSIGN"
                   label="Save Changes"
                   icon="pi pi-save"
                   [disabled]="!canSave()"
@@ -1935,14 +1472,12 @@ class RoleActionSelectorComponent {
 
             <!-- Validation Warning -->
             @if (invalidActionsCount() > 0) {
-              <div class="bg-orange-50 border-l-4 border-orange-500 p-4 mb-4">
-                <div class="flex items-center">
-                  <i
-                    class="pi pi-exclamation-triangle text-orange-500 mr-2"
-                  ></i>
-                  <div>
-                    <strong class="text-orange-800">Validation Warning:</strong>
-                    <p class="text-sm text-orange-700 mt-1">
+              <div class="validation-warning rounded-border p-3 mb-4">
+                <div class="flex items-start gap-2">
+                  <i class="pi pi-exclamation-triangle text-xl"></i>
+                  <div class="flex-1">
+                    <span class="font-semibold">Validation Warning:</span>
+                    <p class="text-sm mt-1 mb-0">
                       {{ invalidActionsCount() }} selected
                       action{{ invalidActionsCount() > 1 ? 's have' : ' has' }}
                       unmet prerequisites. Fix before saving or use auto-fix on
@@ -1954,33 +1489,33 @@ class RoleActionSelectorComponent {
             }
 
             <!-- Action Tree Table -->
-            <p-treeTable
-              [value]="treeNodes()"
-              [scrollable]="true"
-              scrollHeight="flex"
-              dataKey="id"
-              styleClass="p-treetable-sm"
-            >
-              <ng-template pTemplate="header">
-                <tr>
-                  <th style="width: 3rem">
-                    <p-checkbox
-                      [ngModel]="allSelected()"
-                      [binary]="true"
-                      (ngModelChange)="toggleAll()"
-                      pTooltip="Select/Deselect All"
-                      tooltipPosition="top"
-                    />
-                  </th>
-                  <th>Name</th>
-                  <th>Code</th>
-                  <th>Type</th>
-                  <th>Requirements</th>
-                </tr>
-              </ng-template>
-              <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
-                <tr [class.bg-red-50]="hasUnmetPrerequisites(rowData)">
-                  <td style="width: 3rem">
+            <div class="overflow-x-auto -mx-4 sm:mx-0">
+              <p-treeTable
+                [value]="treeNodes()"
+                dataKey="id"
+                styleClass="p-treetable-sm"
+                [tableStyle]="{ 'min-width': '50rem' }"
+              >
+                <ng-template #header>
+                  <tr>
+                    <th class="w-12">
+                      <p-checkbox
+                        [ngModel]="allSelected()"
+                        [binary]="true"
+                        (ngModelChange)="toggleAll()"
+                        pTooltip="Select/Deselect All"
+                        tooltipPosition="top"
+                      />
+                    </th>
+                    <th>Name</th>
+                    <th class="hidden md:table-cell">Code</th>
+                    <th>Type</th>
+                    <th class="hidden lg:table-cell">Requirements</th>
+                  </tr>
+                </ng-template>
+              <ng-template #body let-rowNode let-rowData="rowData">
+                <tr [class.highlight-warning]="hasUnmetPrerequisites(rowData)">
+                  <td class="w-12">
                     <p-checkbox
                       [ngModel]="selectionMap()[rowData.id]"
                       [binary]="true"
@@ -1991,7 +1526,7 @@ class RoleActionSelectorComponent {
                   </td>
                   <td>
                     <p-treeTableToggler [rowNode]="rowNode" />
-                    <span class="inline-flex align-items-center gap-2">
+                    <span class="inline-flex items-center gap-2">
                       {{ rowData.name }}
                       @if (hasUnmetPrerequisites(rowData)) {
                         <i
@@ -2002,7 +1537,7 @@ class RoleActionSelectorComponent {
                       }
                     </span>
                   </td>
-                  <td>{{ rowData.code || '-' }}</td>
+                  <td class="hidden md:table-cell">{{ rowData.code || '-' }}</td>
                   <td>
                     <p-tag
                       [value]="rowData.actionType"
@@ -2011,42 +1546,41 @@ class RoleActionSelectorComponent {
                       "
                     />
                   </td>
-                  <td>
+                  <td class="hidden lg:table-cell">
                     @if (rowData.permissionLogic) {
-                      <span class="text-sm text-muted">Has prerequisites</span>
+                      <span class="text-sm text-muted-color">Has prerequisites</span>
                     } @else {
-                      <span class="text-muted">-</span>
+                      <span class="text-muted-color">-</span>
                     }
                   </td>
                 </tr>
               </ng-template>
-              <ng-template pTemplate="emptymessage">
+              <ng-template #emptymessage>
                 <tr>
-                  <td colspan="5" class="text-center p-4">
+                  <td colspan="5" class="text-center p-4 text-muted-color">
                     @if (loading()) {
                       <i class="pi pi-spin pi-spinner"></i> Loading actions...
                     } @else { No actions available. }
                   </td>
                 </tr>
               </ng-template>
-            </p-treeTable>
+              </p-treeTable>
+            </div>
           </div>
 
           <!-- Change Summary -->
           @if (hasChanges()) {
-            <div class="surface-border border-1 border-round p-3 mt-4">
-              <div class="flex align-items-center gap-2 mb-3">
-                <i class="pi pi-info-circle text-blue-500 content-center"></i>
-                <p class="m-0 mb-1 font-bold">Pending Changes</p>
+            <div class="border border-surface rounded-border p-3 mt-4">
+              <div class="flex items-center gap-2 mb-3">
+                <i class="pi pi-info-circle text-primary"></i>
+                <span class="font-bold">Pending Changes</span>
               </div>
-              <div class="flex flex-col md:flex-row gap-4">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 @if (pendingAdd().length > 0) {
-                  <div class="w-full md:w-1/2">
-                    <div class="flex align-items-center gap-2 mb-2">
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
                       <i class="pi pi-plus-circle text-green-500"></i>
-                      <strong class="text-sm"
-                        >To Add ({{ pendingAdd().length }})</strong
-                      >
+                      <strong class="text-sm">To Add ({{ pendingAdd().length }})</strong>
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (action of pendingAdd(); track action.id) {
@@ -2056,12 +1590,10 @@ class RoleActionSelectorComponent {
                   </div>
                 }
                 @if (pendingRemove().length > 0) {
-                  <div class="w-full md:w-1/2">
-                    <div class="flex align-items-center gap-2 mb-2">
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
                       <i class="pi pi-minus-circle text-red-500"></i>
-                      <strong class="text-sm"
-                        >To Remove ({{ pendingRemove().length }})</strong
-                      >
+                      <strong class="text-sm">To Remove ({{ pendingRemove().length }})</strong>
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (action of pendingRemove(); track action.id) {
@@ -2076,31 +1608,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: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i6.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i8.TreeTable, selector: "p-treeTable, p-treetable, p-tree-table", inputs: ["columns", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight", "selectionKeys", "showGridlines"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "component", type: i8.TreeTableToggler, selector: "p-treeTableToggler, p-treetabletoggler, p-treetable-toggler", inputs: ["rowNode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}.validation-warning{background-color:var(--p-yellow-50, #fefce8);border-left:4px solid var(--p-yellow-500, #eab308);color:var(--p-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--p-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--p-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i7.TreeTable, selector: "p-treeTable, p-treetable, p-tree-table", inputs: ["columns", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight", "selectionKeys", "showGridlines"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "component", type: i7.TreeTableToggler, selector: "p-treeTableToggler, p-treetabletoggler, p-treetable-toggler", inputs: ["rowNode"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RoleActionSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'flusys-role-action-selector', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, PrimeModule], template: `
+            args: [{ selector: 'flusys-role-action-selector', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, PrimeModule, HasPermissionDirective], template: `
     <div class="role-action-selector">
       <!-- Role Selector -->
       <div class="mb-4">
-        <div class="grid">
-          <div class="col-12 md:col-6 lg:col-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div>
             <label class="block font-semibold mb-2">Select Role</label>
             <p-select
-              [(ngModel)]="selectedRoleId"
+              [ngModel]="selectedRoleId()"
+              (ngModelChange)="selectedRoleId.set($event)"
               [options]="roles()"
               optionLabel="name"
               optionValue="id"
@@ -2117,24 +1647,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         <!-- Loading State -->
         @if (loading()) {
           <div
-            class="surface-card p-5 border-round shadow-1 flex justify-content-center"
+            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
           >
-            <i
-              class="pi pi-spin pi-spinner text-primary"
-              style="font-size: 3rem"
-            ></i>
+            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
           </div>
         }
 
         <!-- Action List -->
         @if (!loading() && actions().length > 0) {
-          <div class="surface-card p-4 border-round shadow-1">
+          <div class="surface-card p-4 rounded-border shadow-sm">
             <div
-              class="flex flex-column md:flex-row justify-content-between align-items-start md:align-items-center gap-3 mb-4"
+              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
             >
               <div>
                 <h5 class="m-0 mb-1">Action Permissions</h5>
-                <p class="text-sm text-color-secondary m-0">
+                <p class="text-sm text-muted-color m-0">
                   {{ actions().length }} actions available
                 </p>
               </div>
@@ -2156,6 +1683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   (onClick)="deselectAll()"
                 />
                 <p-button
+                  *hasPermission="ROLE_ACTION_PERMISSIONS.ASSIGN"
                   label="Save Changes"
                   icon="pi pi-save"
                   [disabled]="!canSave()"
@@ -2169,14 +1697,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 
             <!-- Validation Warning -->
             @if (invalidActionsCount() > 0) {
-              <div class="bg-orange-50 border-l-4 border-orange-500 p-4 mb-4">
-                <div class="flex items-center">
-                  <i
-                    class="pi pi-exclamation-triangle text-orange-500 mr-2"
-                  ></i>
-                  <div>
-                    <strong class="text-orange-800">Validation Warning:</strong>
-                    <p class="text-sm text-orange-700 mt-1">
+              <div class="validation-warning rounded-border p-3 mb-4">
+                <div class="flex items-start gap-2">
+                  <i class="pi pi-exclamation-triangle text-xl"></i>
+                  <div class="flex-1">
+                    <span class="font-semibold">Validation Warning:</span>
+                    <p class="text-sm mt-1 mb-0">
                       {{ invalidActionsCount() }} selected
                       action{{ invalidActionsCount() > 1 ? 's have' : ' has' }}
                       unmet prerequisites. Fix before saving or use auto-fix on
@@ -2188,33 +1714,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }
 
             <!-- Action Tree Table -->
-            <p-treeTable
-              [value]="treeNodes()"
-              [scrollable]="true"
-              scrollHeight="flex"
-              dataKey="id"
-              styleClass="p-treetable-sm"
-            >
-              <ng-template pTemplate="header">
-                <tr>
-                  <th style="width: 3rem">
-                    <p-checkbox
-                      [ngModel]="allSelected()"
-                      [binary]="true"
-                      (ngModelChange)="toggleAll()"
-                      pTooltip="Select/Deselect All"
-                      tooltipPosition="top"
-                    />
-                  </th>
-                  <th>Name</th>
-                  <th>Code</th>
-                  <th>Type</th>
-                  <th>Requirements</th>
-                </tr>
-              </ng-template>
-              <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
-                <tr [class.bg-red-50]="hasUnmetPrerequisites(rowData)">
-                  <td style="width: 3rem">
+            <div class="overflow-x-auto -mx-4 sm:mx-0">
+              <p-treeTable
+                [value]="treeNodes()"
+                dataKey="id"
+                styleClass="p-treetable-sm"
+                [tableStyle]="{ 'min-width': '50rem' }"
+              >
+                <ng-template #header>
+                  <tr>
+                    <th class="w-12">
+                      <p-checkbox
+                        [ngModel]="allSelected()"
+                        [binary]="true"
+                        (ngModelChange)="toggleAll()"
+                        pTooltip="Select/Deselect All"
+                        tooltipPosition="top"
+                      />
+                    </th>
+                    <th>Name</th>
+                    <th class="hidden md:table-cell">Code</th>
+                    <th>Type</th>
+                    <th class="hidden lg:table-cell">Requirements</th>
+                  </tr>
+                </ng-template>
+              <ng-template #body let-rowNode let-rowData="rowData">
+                <tr [class.highlight-warning]="hasUnmetPrerequisites(rowData)">
+                  <td class="w-12">
                     <p-checkbox
                       [ngModel]="selectionMap()[rowData.id]"
                       [binary]="true"
@@ -2225,7 +1751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   </td>
                   <td>
                     <p-treeTableToggler [rowNode]="rowNode" />
-                    <span class="inline-flex align-items-center gap-2">
+                    <span class="inline-flex items-center gap-2">
                       {{ rowData.name }}
                       @if (hasUnmetPrerequisites(rowData)) {
                         <i
@@ -2236,7 +1762,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                       }
                     </span>
                   </td>
-                  <td>{{ rowData.code || '-' }}</td>
+                  <td class="hidden md:table-cell">{{ rowData.code || '-' }}</td>
                   <td>
                     <p-tag
                       [value]="rowData.actionType"
@@ -2245,42 +1771,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                       "
                     />
                   </td>
-                  <td>
+                  <td class="hidden lg:table-cell">
                     @if (rowData.permissionLogic) {
-                      <span class="text-sm text-muted">Has prerequisites</span>
+                      <span class="text-sm text-muted-color">Has prerequisites</span>
                     } @else {
-                      <span class="text-muted">-</span>
+                      <span class="text-muted-color">-</span>
                     }
                   </td>
                 </tr>
               </ng-template>
-              <ng-template pTemplate="emptymessage">
+              <ng-template #emptymessage>
                 <tr>
-                  <td colspan="5" class="text-center p-4">
+                  <td colspan="5" class="text-center p-4 text-muted-color">
                     @if (loading()) {
                       <i class="pi pi-spin pi-spinner"></i> Loading actions...
                     } @else { No actions available. }
                   </td>
                 </tr>
               </ng-template>
-            </p-treeTable>
+              </p-treeTable>
+            </div>
           </div>
 
           <!-- Change Summary -->
           @if (hasChanges()) {
-            <div class="surface-border border-1 border-round p-3 mt-4">
-              <div class="flex align-items-center gap-2 mb-3">
-                <i class="pi pi-info-circle text-blue-500 content-center"></i>
-                <p class="m-0 mb-1 font-bold">Pending Changes</p>
+            <div class="border border-surface rounded-border p-3 mt-4">
+              <div class="flex items-center gap-2 mb-3">
+                <i class="pi pi-info-circle text-primary"></i>
+                <span class="font-bold">Pending Changes</span>
               </div>
-              <div class="flex flex-col md:flex-row gap-4">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 @if (pendingAdd().length > 0) {
-                  <div class="w-full md:w-1/2">
-                    <div class="flex align-items-center gap-2 mb-2">
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
                       <i class="pi pi-plus-circle text-green-500"></i>
-                      <strong class="text-sm"
-                        >To Add ({{ pendingAdd().length }})</strong
-                      >
+                      <strong class="text-sm">To Add ({{ pendingAdd().length }})</strong>
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (action of pendingAdd(); track action.id) {
@@ -2290,12 +1815,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   </div>
                 }
                 @if (pendingRemove().length > 0) {
-                  <div class="w-full md:w-1/2">
-                    <div class="flex align-items-center gap-2 mb-2">
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
                       <i class="pi pi-minus-circle text-red-500"></i>
-                      <strong class="text-sm"
-                        >To Remove ({{ pendingRemove().length }})</strong
-                      >
+                      <strong class="text-sm">To Remove ({{ pendingRemove().length }})</strong>
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (action of pendingRemove(); track action.id) {
@@ -2310,19 +1833,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         }
 
         @if (!loading() && actions().length === 0) {
-          <div class="surface-card p-5 border-round shadow-1 text-center">
-            <i
-              class="pi pi-info-circle text-color-secondary mb-3"
-              style="font-size: 3rem; display: block;"
-            ></i>
-            <p class="text-color-secondary m-0">
+          <div class="surface-card p-5 rounded-border shadow-sm text-center">
+            <i class="pi pi-info-circle text-muted-color mb-3 block text-5xl"></i>
+            <p class="text-muted-color m-0">
               No actions available for this role.
             </p>
           </div>
         }
       }
     </div>
-  `, styles: [":host{display:block}\n"] }]
+  `, styles: [":host{display:block}.validation-warning{background-color:var(--p-yellow-50, #fefce8);border-left:4px solid var(--p-yellow-500, #eab308);color:var(--p-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--p-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--p-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -2360,6 +1880,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * ```
  */
 class CompanyActionSelectorComponent {
+    // Permission constants for template
+    COMPANY_ACTION_PERMISSIONS = COMPANY_ACTION_PERMISSIONS;
     // Dependencies
     companyApiProvider = inject(COMPANY_API_PROVIDER);
     actionApi = inject(ActionApiService);
@@ -2367,6 +1889,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" }] : []));
@@ -2410,17 +1933,14 @@ class CompanyActionSelectorComponent {
         const selMap = this.selectionMap();
         const allActions = this.actions();
         const unmetSet = new Set();
-        allActions.forEach((action) => {
-            if (action.id &&
-                this.permissionLogic.hasUnmetPrerequisites(action, selMap, allActions)) {
+        for (const action of allActions) {
+            if (action.id && this.permissionLogic.hasUnmetPrerequisites(action, selMap, allActions)) {
                 unmetSet.add(action.id);
             }
-        });
+        }
         return unmetSet;
     }, ...(ngDevMode ? [{ debugName: "actionsWithUnmetPrerequisites" }] : []));
-    invalidActionsCount = computed(() => {
-        return this.actionsWithUnmetPrerequisites().size;
-    }, ...(ngDevMode ? [{ debugName: "invalidActionsCount" }] : []));
+    invalidActionsCount = computed(() => this.actionsWithUnmetPrerequisites().size, ...(ngDevMode ? [{ debugName: "invalidActionsCount" }] : []));
     // Computed - Pending Changes
     pendingAdd = computed(() => {
         const current = this.selectionMap();
@@ -2441,6 +1961,10 @@ class CompanyActionSelectorComponent {
     // AbortController for data loading
     loadDataAbortController = null;
     constructor() {
+        // Cleanup on destroy
+        this.destroyRef.onDestroy(() => {
+            this.loadDataAbortController?.abort();
+        });
         this.loadCompanies();
         // Effect: Load data when company selection changes
         effect(() => {
@@ -2451,11 +1975,7 @@ class CompanyActionSelectorComponent {
                 this.loadDataAbortController = new AbortController();
                 this.loadData(this.loadDataAbortController.signal).catch((err) => {
                     if (err.name !== 'AbortError') {
-                        this.messageService.add({
-                            severity: 'error',
-                            summary: 'Error',
-                            detail: 'Failed to load company actions. Please refresh.',
-                        });
+                        // Error toast handled by global interceptor
                         this.loading.set(false);
                     }
                 });
@@ -2465,9 +1985,6 @@ class CompanyActionSelectorComponent {
             }
         });
     }
-    ngOnDestroy() {
-        this.loadDataAbortController?.abort();
-    }
     /**
      * Load companies from API
      */
@@ -2480,11 +1997,7 @@ class CompanyActionSelectorComponent {
             this.companies.set(response?.data ?? []);
         }
         catch {
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: 'Failed to load companies',
-            });
+            // Error toast handled by global interceptor
         }
     }
     /**
@@ -2511,13 +2024,7 @@ class CompanyActionSelectorComponent {
             if (signal.aborted)
                 return;
             const assignedIds = new Set((assignedResponse?.data || []).map((a) => a.actionId));
-            // Build selection map
-            const selMap = {};
-            actionsList.forEach((action) => {
-                if (action.id) {
-                    selMap[action.id] = assignedIds.has(action.id);
-                }
-            });
+            const selMap = this.buildSelectionMap(actionsList, (action) => assignedIds.has(action.id));
             this._selectionMap.set(selMap);
             this._initialSelection.set({ ...selMap });
         }
@@ -2568,36 +2075,17 @@ class CompanyActionSelectorComponent {
             this.permissionLogic.handleCheck(action, this.selectionMap(), this.actions(), (newMap) => this._selectionMap.set(newMap), (previousState) => this._selectionMap.set(previousState));
         }
     }
-    /**
-     * Toggle all actions
-     */
     toggleAll() {
-        const newValue = !this.allSelected();
-        const selMap = {};
-        this.actions().forEach((action) => {
-            selMap[action.id] = newValue;
-        });
-        this._selectionMap.set(selMap);
+        this.setAllSelection(!this.allSelected());
     }
-    /**
-     * Select all actions
-     */
     selectAll() {
-        const selMap = {};
-        this.actions().forEach((action) => {
-            selMap[action.id] = true;
-        });
-        this._selectionMap.set(selMap);
+        this.setAllSelection(true);
     }
-    /**
-     * Deselect all actions
-     */
     deselectAll() {
-        const selMap = {};
-        this.actions().forEach((action) => {
-            selMap[action.id] = false;
-        });
-        this._selectionMap.set(selMap);
+        this.setAllSelection(false);
+    }
+    setAllSelection(value) {
+        this._selectionMap.set(this.buildSelectionMap(this.actions(), () => value));
     }
     /**
      * Save changes to backend
@@ -2612,20 +2100,7 @@ class CompanyActionSelectorComponent {
             this.permissionLogic.showValidationErrorDialog(invalidActions, this.selectionMap(), this.actions(), (newMap) => this._selectionMap.set(newMap));
             return;
         }
-        // Build payload
-        const items = [];
-        this.pendingAdd().forEach((action) => {
-            items.push({
-                id: action.id,
-                action: 'add',
-            });
-        });
-        this.pendingRemove().forEach((action) => {
-            items.push({
-                id: action.id,
-                action: 'remove',
-            });
-        });
+        const items = this.buildPayloadItems();
         if (items.length === 0)
             return;
         this.saving.set(true);
@@ -2649,13 +2124,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);
@@ -2708,25 +2178,40 @@ class CompanyActionSelectorComponent {
             },
         });
     }
-    /**
-     * Reset component state
-     */
     resetState() {
         this._actionsTree.set([]);
         this._actions.set([]);
         this._selectionMap.set({});
         this._initialSelection.set({});
     }
+    buildSelectionMap(actions, predicate) {
+        const selMap = {};
+        for (const action of actions) {
+            selMap[action.id] = predicate(action);
+        }
+        return selMap;
+    }
+    buildPayloadItems() {
+        const items = [];
+        for (const action of this.pendingAdd()) {
+            items.push({ id: action.id, action: 'add' });
+        }
+        for (const action of this.pendingRemove()) {
+            items.push({ id: action.id, action: 'remove' });
+        }
+        return items;
+    }
     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"
@@ -2743,24 +2228,21 @@ class CompanyActionSelectorComponent {
         <!-- Loading State -->
         @if (loading()) {
           <div
-            class="surface-card p-5 border-round shadow-1 flex justify-content-center"
+            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
           >
-            <i
-              class="pi pi-spin pi-spinner text-primary"
-              style="font-size: 3rem"
-            ></i>
+            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
           </div>
         }
 
         <!-- Action List -->
         @if (!loading() && actions().length > 0) {
-          <div class="surface-card p-4 border-round shadow-1">
+          <div class="surface-card p-4 rounded-border shadow-sm">
             <div
-              class="flex flex-column md:flex-row justify-content-between align-items-start md:align-items-center gap-3 mb-4"
+              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
             >
               <div>
                 <h5 class="m-0 mb-1">Action Whitelist</h5>
-                <p class="text-sm text-color-secondary m-0">
+                <p class="text-sm text-muted-color m-0">
                   {{ actions().length }} actions available
                 </p>
               </div>
@@ -2782,6 +2264,7 @@ class CompanyActionSelectorComponent {
                   (onClick)="deselectAll()"
                 />
                 <p-button
+                  *hasPermission="COMPANY_ACTION_PERMISSIONS.ASSIGN"
                   label="Save Changes"
                   icon="pi pi-save"
                   [disabled]="!canSave()"
@@ -2795,14 +2278,12 @@ class CompanyActionSelectorComponent {
 
             <!-- Validation Warning -->
             @if (invalidActionsCount() > 0) {
-              <div class="bg-orange-50 border-l-4 border-orange-500 p-4 mb-4">
-                <div class="flex items-center">
-                  <i
-                    class="pi pi-exclamation-triangle text-orange-500 mr-2"
-                  ></i>
-                  <div>
-                    <strong class="text-orange-800">Validation Warning:</strong>
-                    <p class="text-sm text-orange-700 mt-1">
+              <div class="validation-warning rounded-border p-3 mb-4">
+                <div class="flex items-start gap-2">
+                  <i class="pi pi-exclamation-triangle text-xl"></i>
+                  <div class="flex-1">
+                    <span class="font-semibold">Validation Warning:</span>
+                    <p class="text-sm mt-1 mb-0">
                       {{ invalidActionsCount() }} selected
                       action{{ invalidActionsCount() > 1 ? 's have' : ' has' }}
                       unmet prerequisites. Fix before saving or use auto-fix on
@@ -2814,33 +2295,33 @@ class CompanyActionSelectorComponent {
             }
 
             <!-- Action Tree Table -->
-            <p-treeTable
-              [value]="treeNodes()"
-              [scrollable]="true"
-              scrollHeight="flex"
-              dataKey="id"
-              styleClass="p-treetable-sm"
-            >
-              <ng-template pTemplate="header">
-                <tr>
-                  <th style="width: 3rem">
-                    <p-checkbox
-                      [ngModel]="allSelected()"
-                      [binary]="true"
-                      (ngModelChange)="toggleAll()"
-                      pTooltip="Select/Deselect All"
-                      tooltipPosition="top"
-                    />
-                  </th>
-                  <th>Name</th>
-                  <th>Code</th>
-                  <th>Type</th>
-                  <th>Description</th>
-                </tr>
-              </ng-template>
-              <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
-                <tr [class.bg-red-50]="hasUnmetPrerequisites(rowData)">
-                  <td style="width: 3rem">
+            <div class="overflow-x-auto -mx-4 sm:mx-0">
+              <p-treeTable
+                [value]="treeNodes()"
+                dataKey="id"
+                styleClass="p-treetable-sm"
+                [tableStyle]="{ 'min-width': '50rem' }"
+              >
+                <ng-template #header>
+                  <tr>
+                    <th class="w-12">
+                      <p-checkbox
+                        [ngModel]="allSelected()"
+                        [binary]="true"
+                        (ngModelChange)="toggleAll()"
+                        pTooltip="Select/Deselect All"
+                        tooltipPosition="top"
+                      />
+                    </th>
+                    <th>Name</th>
+                    <th class="hidden md:table-cell">Code</th>
+                    <th>Type</th>
+                    <th class="hidden lg:table-cell">Description</th>
+                  </tr>
+                </ng-template>
+              <ng-template #body let-rowNode let-rowData="rowData">
+                <tr [class.highlight-warning]="hasUnmetPrerequisites(rowData)">
+                  <td class="w-12">
                     <p-checkbox
                       [ngModel]="selectionMap()[rowData.id]"
                       [binary]="true"
@@ -2851,7 +2332,7 @@ class CompanyActionSelectorComponent {
                   </td>
                   <td>
                     <p-treeTableToggler [rowNode]="rowNode" />
-                    <span class="inline-flex align-items-center gap-2">
+                    <span class="inline-flex items-center gap-2">
                       {{ rowData.name }}
                       @if (hasUnmetPrerequisites(rowData)) {
                         <i
@@ -2862,7 +2343,7 @@ class CompanyActionSelectorComponent {
                       }
                     </span>
                   </td>
-                  <td>{{ rowData.code || '-' }}</td>
+                  <td class="hidden md:table-cell">{{ rowData.code || '-' }}</td>
                   <td>
                     <p-tag
                       [value]="rowData.actionType"
@@ -2871,36 +2352,35 @@ class CompanyActionSelectorComponent {
                       "
                     />
                   </td>
-                  <td>{{ rowData.description || '-' }}</td>
+                  <td class="hidden lg:table-cell">{{ rowData.description || '-' }}</td>
                 </tr>
               </ng-template>
-              <ng-template pTemplate="emptymessage">
+              <ng-template #emptymessage>
                 <tr>
-                  <td colspan="5" class="text-center p-4">
+                  <td colspan="5" class="text-center p-4 text-muted-color">
                     @if (loading()) {
                       <i class="pi pi-spin pi-spinner"></i> Loading actions...
                     } @else { No actions available. }
                   </td>
                 </tr>
               </ng-template>
-            </p-treeTable>
+              </p-treeTable>
+            </div>
           </div>
 
           <!-- Change Summary -->
           @if (hasChanges()) {
-            <div class="surface-border border-1 border-round p-3 mt-4">
-              <div class="flex align-items-center gap-2 mb-3">
-                <i class="pi pi-info-circle text-blue-500 content-center"></i>
-                <p class="m-0 mb-1 font-bold">Pending Changes</p>
+            <div class="border border-surface rounded-border p-3 mt-4">
+              <div class="flex items-center gap-2 mb-3">
+                <i class="pi pi-info-circle text-primary"></i>
+                <span class="font-bold">Pending Changes</span>
               </div>
-              <div class="flex flex-col md:flex-row gap-4">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 @if (pendingAdd().length > 0) {
-                  <div class="w-full md:w-1/2">
+                  <div>
                     <div class="flex items-center gap-2 mb-2">
                       <i class="pi pi-plus-circle text-green-500"></i>
-                      <strong class="text-sm">
-                        To Whitelist ({{ pendingAdd().length }})
-                      </strong>
+                      <strong class="text-sm">To Whitelist ({{ pendingAdd().length }})</strong>
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (action of pendingAdd(); track action.id) {
@@ -2909,14 +2389,11 @@ class CompanyActionSelectorComponent {
                     </ul>
                   </div>
                 }
-
                 @if (pendingRemove().length > 0) {
-                  <div class="w-full md:w-1/2">
+                  <div>
                     <div class="flex items-center gap-2 mb-2">
                       <i class="pi pi-minus-circle text-red-500"></i>
-                      <strong class="text-sm">
-                        To Remove ({{ pendingRemove().length }})
-                      </strong>
+                      <strong class="text-sm">To Remove ({{ pendingRemove().length }})</strong>
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (action of pendingRemove(); track action.id) {
@@ -2931,31 +2408,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: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i6.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i8.TreeTable, selector: "p-treeTable, p-treetable, p-tree-table", inputs: ["columns", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight", "selectionKeys", "showGridlines"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "component", type: i8.TreeTableToggler, selector: "p-treeTableToggler, p-treetabletoggler, p-treetable-toggler", inputs: ["rowNode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}.validation-warning{background-color:var(--p-yellow-50, #fefce8);border-left:4px solid var(--p-yellow-500, #eab308);color:var(--p-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--p-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--p-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i7.TreeTable, selector: "p-treeTable, p-treetable, p-tree-table", inputs: ["columns", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight", "selectionKeys", "showGridlines"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "component", type: i7.TreeTableToggler, selector: "p-treeTableToggler, p-treetabletoggler, p-treetable-toggler", inputs: ["rowNode"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CompanyActionSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'flusys-company-action-selector', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, PrimeModule], template: `
+            args: [{ selector: 'flusys-company-action-selector', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, PrimeModule, HasPermissionDirective], template: `
     <div class="company-action-selector">
       <!-- Company Selector -->
       <div class="mb-4">
-        <div class="grid">
-          <div class="col-12 md:col-6 lg:col-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div>
             <label class="block font-semibold mb-2">Select Company</label>
             <p-select
-              [(ngModel)]="selectedCompanyId"
+              [ngModel]="selectedCompanyId()"
+              (ngModelChange)="selectedCompanyId.set($event)"
               [options]="companies()"
               optionLabel="name"
               optionValue="id"
@@ -2972,24 +2447,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         <!-- Loading State -->
         @if (loading()) {
           <div
-            class="surface-card p-5 border-round shadow-1 flex justify-content-center"
+            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
           >
-            <i
-              class="pi pi-spin pi-spinner text-primary"
-              style="font-size: 3rem"
-            ></i>
+            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
           </div>
         }
 
         <!-- Action List -->
         @if (!loading() && actions().length > 0) {
-          <div class="surface-card p-4 border-round shadow-1">
+          <div class="surface-card p-4 rounded-border shadow-sm">
             <div
-              class="flex flex-column md:flex-row justify-content-between align-items-start md:align-items-center gap-3 mb-4"
+              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
             >
               <div>
                 <h5 class="m-0 mb-1">Action Whitelist</h5>
-                <p class="text-sm text-color-secondary m-0">
+                <p class="text-sm text-muted-color m-0">
                   {{ actions().length }} actions available
                 </p>
               </div>
@@ -3011,6 +2483,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   (onClick)="deselectAll()"
                 />
                 <p-button
+                  *hasPermission="COMPANY_ACTION_PERMISSIONS.ASSIGN"
                   label="Save Changes"
                   icon="pi pi-save"
                   [disabled]="!canSave()"
@@ -3024,14 +2497,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 
             <!-- Validation Warning -->
             @if (invalidActionsCount() > 0) {
-              <div class="bg-orange-50 border-l-4 border-orange-500 p-4 mb-4">
-                <div class="flex items-center">
-                  <i
-                    class="pi pi-exclamation-triangle text-orange-500 mr-2"
-                  ></i>
-                  <div>
-                    <strong class="text-orange-800">Validation Warning:</strong>
-                    <p class="text-sm text-orange-700 mt-1">
+              <div class="validation-warning rounded-border p-3 mb-4">
+                <div class="flex items-start gap-2">
+                  <i class="pi pi-exclamation-triangle text-xl"></i>
+                  <div class="flex-1">
+                    <span class="font-semibold">Validation Warning:</span>
+                    <p class="text-sm mt-1 mb-0">
                       {{ invalidActionsCount() }} selected
                       action{{ invalidActionsCount() > 1 ? 's have' : ' has' }}
                       unmet prerequisites. Fix before saving or use auto-fix on
@@ -3043,33 +2514,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }
 
             <!-- Action Tree Table -->
-            <p-treeTable
-              [value]="treeNodes()"
-              [scrollable]="true"
-              scrollHeight="flex"
-              dataKey="id"
-              styleClass="p-treetable-sm"
-            >
-              <ng-template pTemplate="header">
-                <tr>
-                  <th style="width: 3rem">
-                    <p-checkbox
-                      [ngModel]="allSelected()"
-                      [binary]="true"
-                      (ngModelChange)="toggleAll()"
-                      pTooltip="Select/Deselect All"
-                      tooltipPosition="top"
-                    />
-                  </th>
-                  <th>Name</th>
-                  <th>Code</th>
-                  <th>Type</th>
-                  <th>Description</th>
-                </tr>
-              </ng-template>
-              <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
-                <tr [class.bg-red-50]="hasUnmetPrerequisites(rowData)">
-                  <td style="width: 3rem">
+            <div class="overflow-x-auto -mx-4 sm:mx-0">
+              <p-treeTable
+                [value]="treeNodes()"
+                dataKey="id"
+                styleClass="p-treetable-sm"
+                [tableStyle]="{ 'min-width': '50rem' }"
+              >
+                <ng-template #header>
+                  <tr>
+                    <th class="w-12">
+                      <p-checkbox
+                        [ngModel]="allSelected()"
+                        [binary]="true"
+                        (ngModelChange)="toggleAll()"
+                        pTooltip="Select/Deselect All"
+                        tooltipPosition="top"
+                      />
+                    </th>
+                    <th>Name</th>
+                    <th class="hidden md:table-cell">Code</th>
+                    <th>Type</th>
+                    <th class="hidden lg:table-cell">Description</th>
+                  </tr>
+                </ng-template>
+              <ng-template #body let-rowNode let-rowData="rowData">
+                <tr [class.highlight-warning]="hasUnmetPrerequisites(rowData)">
+                  <td class="w-12">
                     <p-checkbox
                       [ngModel]="selectionMap()[rowData.id]"
                       [binary]="true"
@@ -3080,7 +2551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   </td>
                   <td>
                     <p-treeTableToggler [rowNode]="rowNode" />
-                    <span class="inline-flex align-items-center gap-2">
+                    <span class="inline-flex items-center gap-2">
                       {{ rowData.name }}
                       @if (hasUnmetPrerequisites(rowData)) {
                         <i
@@ -3091,7 +2562,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                       }
                     </span>
                   </td>
-                  <td>{{ rowData.code || '-' }}</td>
+                  <td class="hidden md:table-cell">{{ rowData.code || '-' }}</td>
                   <td>
                     <p-tag
                       [value]="rowData.actionType"
@@ -3100,36 +2571,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                       "
                     />
                   </td>
-                  <td>{{ rowData.description || '-' }}</td>
+                  <td class="hidden lg:table-cell">{{ rowData.description || '-' }}</td>
                 </tr>
               </ng-template>
-              <ng-template pTemplate="emptymessage">
+              <ng-template #emptymessage>
                 <tr>
-                  <td colspan="5" class="text-center p-4">
+                  <td colspan="5" class="text-center p-4 text-muted-color">
                     @if (loading()) {
                       <i class="pi pi-spin pi-spinner"></i> Loading actions...
                     } @else { No actions available. }
                   </td>
                 </tr>
               </ng-template>
-            </p-treeTable>
+              </p-treeTable>
+            </div>
           </div>
 
           <!-- Change Summary -->
           @if (hasChanges()) {
-            <div class="surface-border border-1 border-round p-3 mt-4">
-              <div class="flex align-items-center gap-2 mb-3">
-                <i class="pi pi-info-circle text-blue-500 content-center"></i>
-                <p class="m-0 mb-1 font-bold">Pending Changes</p>
+            <div class="border border-surface rounded-border p-3 mt-4">
+              <div class="flex items-center gap-2 mb-3">
+                <i class="pi pi-info-circle text-primary"></i>
+                <span class="font-bold">Pending Changes</span>
               </div>
-              <div class="flex flex-col md:flex-row gap-4">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 @if (pendingAdd().length > 0) {
-                  <div class="w-full md:w-1/2">
+                  <div>
                     <div class="flex items-center gap-2 mb-2">
                       <i class="pi pi-plus-circle text-green-500"></i>
-                      <strong class="text-sm">
-                        To Whitelist ({{ pendingAdd().length }})
-                      </strong>
+                      <strong class="text-sm">To Whitelist ({{ pendingAdd().length }})</strong>
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (action of pendingAdd(); track action.id) {
@@ -3138,14 +2608,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                     </ul>
                   </div>
                 }
-
                 @if (pendingRemove().length > 0) {
-                  <div class="w-full md:w-1/2">
+                  <div>
                     <div class="flex items-center gap-2 mb-2">
                       <i class="pi pi-minus-circle text-red-500"></i>
-                      <strong class="text-sm">
-                        To Remove ({{ pendingRemove().length }})
-                      </strong>
+                      <strong class="text-sm">To Remove ({{ pendingRemove().length }})</strong>
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (action of pendingRemove(); track action.id) {
@@ -3160,19 +2627,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         }
 
         @if (!loading() && actions().length === 0) {
-          <div class="surface-card p-5 border-round shadow-1 text-center">
-            <i
-              class="pi pi-info-circle text-color-secondary mb-3"
-              style="font-size: 3rem; display: block;"
-            ></i>
-            <p class="text-color-secondary m-0">
+          <div class="surface-card p-5 rounded-border shadow-sm text-center">
+            <i class="pi pi-info-circle text-muted-color mb-3 block text-5xl"></i>
+            <p class="text-muted-color m-0">
               No actions available for this company.
             </p>
           </div>
         }
       }
     </div>
-  `, styles: [":host{display:block}\n"] }]
+  `, styles: [":host{display:block}.validation-warning{background-color:var(--p-yellow-50, #fefce8);border-left:4px solid var(--p-yellow-500, #eab308);color:var(--p-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--p-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--p-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -3206,6 +2670,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * ```
  */
 class UserRoleSelectorComponent {
+    // Permission constants for template
+    USER_ROLE_PERMISSIONS = USER_ROLE_PERMISSIONS;
     // Dependencies
     appConfig = inject(APP_CONFIG);
     companyContext = inject(LAYOUT_AUTH_STATE);
@@ -3249,7 +2715,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(() => {
@@ -3305,9 +2775,7 @@ class UserRoleSelectorComponent {
                 this.branches.set([]);
                 return;
             }
-            const response = await this.userPermissionProvider
-                .getUserBranchPermissions(userId)
-                .toPromise();
+            const response = await firstValueFrom(this.userPermissionProvider.getUserBranchPermissions(userId));
             const userBranches = response?.data?.map((ub) => ({
                 id: ub.branchId,
                 name: ub.branchName,
@@ -3316,11 +2784,7 @@ class UserRoleSelectorComponent {
             this.branches.set(userBranches);
         }
         catch {
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: 'Failed to load user permitted branches',
-            });
+            // Error toast handled by global interceptor
         }
     }
     /**
@@ -3334,20 +2798,16 @@ class UserRoleSelectorComponent {
         this.loading.set(true);
         try {
             // Load all roles
-            const rolesResponse = await this.roleApi
-                .getAll('', {
+            const rolesResponse = await firstValueFrom(this.roleApi.getAll('', {
                 pagination: { currentPage: 0, pageSize: MAX_DROPDOWN_ITEMS },
-            })
-                .toPromise();
+            }));
             const rolesList = rolesResponse?.data ?? [];
             this._roles.set(rolesList);
             // Load existing user-role assignments
             const query = isCompanyFeatureEnabled(this.appConfig) && branchId
                 ? { branchId }
                 : undefined;
-            const assignedResponse = await this.permissionApi
-                .getUserRoles(userId, query)
-                .toPromise();
+            const assignedResponse = await firstValueFrom(this.permissionApi.getUserRoles(userId, query));
             const assignedIds = new Set((assignedResponse?.data || []).map((r) => r.roleId));
             // Build selection map
             const selMap = {};
@@ -3358,11 +2818,7 @@ class UserRoleSelectorComponent {
             this._initialSelection.set({ ...selMap });
         }
         catch {
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: 'Failed to load user role assignments',
-            });
+            // Error toast handled by global interceptor
         }
         finally {
             this.loading.set(false);
@@ -3391,30 +2847,27 @@ class UserRoleSelectorComponent {
      * Toggle all roles
      */
     toggleAll() {
-        const newValue = !this.allSelected();
-        const selMap = {};
-        this.roles().forEach((role) => {
-            selMap[role.id] = newValue;
-        });
-        this._selectionMap.set(selMap);
+        this.setAllSelections(!this.allSelected());
     }
     /**
      * Select all roles
      */
     selectAll() {
-        const selMap = {};
-        this.roles().forEach((role) => {
-            selMap[role.id] = true;
-        });
-        this._selectionMap.set(selMap);
+        this.setAllSelections(true);
     }
     /**
      * Deselect all roles
      */
     deselectAll() {
+        this.setAllSelections(false);
+    }
+    /**
+     * Set all role selections to a given value
+     */
+    setAllSelections(value) {
         const selMap = {};
         this.roles().forEach((role) => {
-            selMap[role.id] = false;
+            selMap[role.id] = value;
         });
         this._selectionMap.set(selMap);
     }
@@ -3457,9 +2910,7 @@ class UserRoleSelectorComponent {
                     payload.branchId = branchId;
                 }
             }
-            const response = await this.permissionApi
-                .assignUserRoles(payload)
-                .toPromise();
+            const response = await firstValueFrom(this.permissionApi.assignUserRoles(payload));
             this.messageService.add({
                 severity: 'success',
                 summary: 'Success',
@@ -3469,13 +2920,8 @@ class UserRoleSelectorComponent {
             // Update baseline
             this._initialSelection.set({ ...this.selectionMap() });
         }
-        catch (err) {
-            const error = err;
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: error?.error?.message || 'Failed to update user role assignments',
-            });
+        catch {
+            // Error toast handled by global interceptor
         }
         finally {
             this.saving.set(false);
@@ -3493,28 +2939,30 @@ class UserRoleSelectorComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: UserRoleSelectorComponent, isStandalone: true, selector: "flusys-user-role-selector", ngImport: i0, template: `
     <div class="user-role-selector">
       <!-- User and Branch Selectors -->
-      <div class="surface-card p-4 border-round mb-4 shadow-1">
-        <div class="formgrid grid gap-5">
-          <div class="field col-12 sm:col-6 mb-0">
-            <label class="block font-semibold mb-2 text-900">
+      <div class="surface-card p-4 rounded-border mb-4 shadow-sm">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
+          <div>
+            <label class="block font-semibold mb-2">
               <i class="pi pi-user mr-2 text-primary"></i>
               Select User
             </label>
             <lib-user-select
-              [(value)]="selectedUserId"
+              [value]="selectedUserId()"
+              (valueChange)="selectedUserId.set($event)"
               [isEditMode]="true"
               placeHolder="Select a user"
             />
           </div>
 
           @if (showBranchSelector()) {
-            <div class="field col-12 sm:col-6 mb-0">
-              <label class="block font-semibold mb-2 text-900">
+            <div>
+              <label class="block font-semibold mb-2">
                 <i class="pi pi-building mr-2 text-primary"></i>
                 Select Branch
               </label>
               <p-select
-                [(ngModel)]="selectedBranchId"
+                [ngModel]="selectedBranchId()"
+                (ngModelChange)="selectedBranchId.set($event)"
                 [options]="filteredBranches()"
                 optionLabel="name"
                 optionValue="id"
@@ -3525,20 +2973,20 @@ class UserRoleSelectorComponent {
               >
                 <ng-template #selectedItem let-branch>
                   @if (branch) {
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                       <i class="pi pi-building text-primary"></i>
                       <span class="font-semibold">{{ branch.name }}</span>
                     </div>
                   }
                 </ng-template>
                 <ng-template #item let-branch>
-                  <div class="flex align-items-center gap-2">
-                    <i class="pi pi-building text-color-secondary"></i>
+                  <div class="flex items-center gap-2">
+                    <i class="pi pi-building text-muted-color"></i>
                     <span>{{ branch.name }}</span>
                   </div>
                 </ng-template>
               </p-select>
-              <small class="text-color-secondary block mt-1">
+              <small class="text-muted-color block mt-1">
                 {{ filteredBranches().length }} permitted branch{{
                   filteredBranches().length !== 1 ? 'es' : ''
                 }}
@@ -3553,24 +3001,21 @@ class UserRoleSelectorComponent {
         <!-- Loading State -->
         @if (loading()) {
           <div
-            class="surface-card p-5 border-round shadow-1 flex justify-content-center"
+            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
           >
-            <i
-              class="pi pi-spin pi-spinner text-primary"
-              style="font-size: 3rem"
-            ></i>
+            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
           </div>
         }
 
         <!-- Role List -->
         @if (!loading() && roles().length > 0) {
-          <div class="surface-card p-4 border-round shadow-1">
+          <div class="surface-card p-4 rounded-border shadow-sm">
             <div
-              class="flex flex-column md:flex-row justify-content-between align-items-start md:align-items-center gap-3 mb-4"
+              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
             >
               <div>
                 <h5 class="m-0 mb-1">Role Assignments</h5>
-                <p class="text-sm text-color-secondary m-0">
+                <p class="text-sm text-muted-color m-0">
                   {{ roles().length }} roles available
                 </p>
               </div>
@@ -3592,6 +3037,7 @@ class UserRoleSelectorComponent {
                   (onClick)="deselectAll()"
                 />
                 <p-button
+                  *hasPermission="USER_ROLE_PERMISSIONS.ASSIGN"
                   label="Save Changes"
                   icon="pi pi-save"
                   [disabled]="!canSave()"
@@ -3604,77 +3050,78 @@ class UserRoleSelectorComponent {
             </div>
 
             <!-- Role Table -->
-            <p-table
-              [value]="roles()"
-              [rows]="10"
-              [paginator]="roles().length > 10"
-              [rowsPerPageOptions]="[10, 20, 50]"
-              [globalFilterFields]="['name', 'code', 'description']"
-              [showCurrentPageReport]="true"
-              currentPageReportTemplate="Showing {first} to {last} of {totalRecords} roles"
-              styleClass="p-datatable-sm"
-            >
-              <ng-template #header>
-                <tr>
-                  <th style="width: 3rem">
-                    <p-checkbox
-                      [ngModel]="allSelected()"
-                      [binary]="true"
-                      (ngModelChange)="toggleAll()"
-                      pTooltip="Select/Deselect All"
-                      tooltipPosition="top"
-                    />
-                  </th>
-                  <th>Name</th>
-                  <th>Code</th>
-                  <th>Description</th>
-                </tr>
-              </ng-template>
-              <ng-template #body let-role>
-                <tr>
-                  <td>
-                    <p-checkbox
-                      [ngModel]="selectionMap()[role.id]"
-                      [binary]="true"
-                      (ngModelChange)="onRoleToggle(role, $event)"
-                      [pTooltip]="getTooltip(role)"
-                      tooltipPosition="top"
-                    />
-                  </td>
-                  <td>{{ role.name }}</td>
-                  <td>{{ role.code || '-' }}</td>
-                  <td>{{ role.description || '-' }}</td>
-                </tr>
-              </ng-template>
-              <ng-template #emptymessage>
-                <tr>
-                  <td colspan="4" class="text-center p-4">
-                    @if (loading()) {
-                      <i class="pi pi-spin pi-spinner"></i> Loading roles...
-                    } @else {
-                      No roles available.
-                    }
-                  </td>
-                </tr>
-              </ng-template>
-            </p-table>
+            <div class="overflow-x-auto -mx-4 sm:mx-0">
+              <p-table
+                [value]="roles()"
+                [rows]="10"
+                [paginator]="roles().length > 10"
+                [rowsPerPageOptions]="[10, 20, 50]"
+                [globalFilterFields]="['name', 'code', 'description']"
+                [showCurrentPageReport]="true"
+                currentPageReportTemplate="Showing {first} to {last} of {totalRecords} roles"
+                styleClass="p-datatable-sm"
+                [tableStyle]="{ 'min-width': '35rem' }"
+              >
+                <ng-template #header>
+                  <tr>
+                    <th style="width: 3rem">
+                      <p-checkbox
+                        [ngModel]="allSelected()"
+                        [binary]="true"
+                        (ngModelChange)="toggleAll()"
+                        pTooltip="Select/Deselect All"
+                        tooltipPosition="top"
+                      />
+                    </th>
+                    <th>Name</th>
+                    <th class="hidden sm:table-cell">Code</th>
+                    <th class="hidden md:table-cell">Description</th>
+                  </tr>
+                </ng-template>
+                <ng-template #body let-role>
+                  <tr>
+                    <td>
+                      <p-checkbox
+                        [ngModel]="selectionMap()[role.id]"
+                        [binary]="true"
+                        (ngModelChange)="onRoleToggle(role, $event)"
+                        [pTooltip]="getTooltip(role)"
+                        tooltipPosition="top"
+                      />
+                    </td>
+                    <td>{{ role.name }}</td>
+                    <td class="hidden sm:table-cell">{{ role.code || '-' }}</td>
+                    <td class="hidden md:table-cell">{{ role.description || '-' }}</td>
+                  </tr>
+                </ng-template>
+                <ng-template #emptymessage>
+                  <tr>
+                    <td colspan="4" class="text-center p-4 text-muted-color">
+                      @if (loading()) {
+                        <i class="pi pi-spin pi-spinner"></i> Loading roles...
+                      } @else {
+                        No roles available.
+                      }
+                    </td>
+                  </tr>
+                </ng-template>
+              </p-table>
+            </div>
           </div>
 
           <!-- Change Summary -->
           @if (hasChanges()) {
-            <div class="surface-border border-1 border-round p-3 mt-4">
-              <div class="flex align-items-center gap-2 mb-3">
-                <i class="pi pi-info-circle text-blue-500 content-center"></i>
-                <p class="m-0 mb-1 font-bold">Pending Changes</p>
+            <div class="border border-surface rounded-border p-3 mt-4">
+              <div class="flex items-center gap-2 mb-3">
+                <i class="pi pi-info-circle text-primary"></i>
+                <span class="font-bold">Pending Changes</span>
               </div>
-              <div class="flex flex-col md:flex-row gap-4">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 @if (pendingAdd().length > 0) {
-                  <div class="w-full md:w-1/2">
-                    <div class="flex align-items-center gap-2 mb-2">
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
                       <i class="pi pi-plus-circle text-green-500"></i>
-                      <strong class="text-sm"
-                        >To Assign ({{ pendingAdd().length }})</strong
-                      >
+                      <strong class="text-sm">To Assign ({{ pendingAdd().length }})</strong>
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (role of pendingAdd(); track role.id) {
@@ -3684,12 +3131,10 @@ class UserRoleSelectorComponent {
                   </div>
                 }
                 @if (pendingRemove().length > 0) {
-                  <div class="w-full md:w-1/2">
-                    <div class="flex align-items-center gap-2 mb-2">
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
                       <i class="pi pi-minus-circle text-red-500"></i>
-                      <strong class="text-sm"
-                        >To Remove ({{ pendingRemove().length }})</strong
-                      >
+                      <strong class="text-sm">To Remove ({{ pendingRemove().length }})</strong>
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (role of pendingRemove(); track role.id) {
@@ -3704,47 +3149,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: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: UserSelectComponent, selector: "lib-user-select", inputs: ["loadUsers", "placeHolder", "isEditMode", "filterActive", "additionalFilters", "pageSize", "value"], outputs: ["valueChange", "userSelected", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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: ["value"], outputs: ["valueChange", "userSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserRoleSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'flusys-user-role-selector', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, PrimeModule, UserSelectComponent], template: `
+            args: [{ selector: 'flusys-user-role-selector', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, PrimeModule, HasPermissionDirective, UserSelectComponent], template: `
     <div class="user-role-selector">
       <!-- User and Branch Selectors -->
-      <div class="surface-card p-4 border-round mb-4 shadow-1">
-        <div class="formgrid grid gap-5">
-          <div class="field col-12 sm:col-6 mb-0">
-            <label class="block font-semibold mb-2 text-900">
+      <div class="surface-card p-4 rounded-border mb-4 shadow-sm">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
+          <div>
+            <label class="block font-semibold mb-2">
               <i class="pi pi-user mr-2 text-primary"></i>
               Select User
             </label>
             <lib-user-select
-              [(value)]="selectedUserId"
+              [value]="selectedUserId()"
+              (valueChange)="selectedUserId.set($event)"
               [isEditMode]="true"
               placeHolder="Select a user"
             />
           </div>
 
           @if (showBranchSelector()) {
-            <div class="field col-12 sm:col-6 mb-0">
-              <label class="block font-semibold mb-2 text-900">
+            <div>
+              <label class="block font-semibold mb-2">
                 <i class="pi pi-building mr-2 text-primary"></i>
                 Select Branch
               </label>
               <p-select
-                [(ngModel)]="selectedBranchId"
+                [ngModel]="selectedBranchId()"
+                (ngModelChange)="selectedBranchId.set($event)"
                 [options]="filteredBranches()"
                 optionLabel="name"
                 optionValue="id"
@@ -3755,20 +3199,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
               >
                 <ng-template #selectedItem let-branch>
                   @if (branch) {
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                       <i class="pi pi-building text-primary"></i>
                       <span class="font-semibold">{{ branch.name }}</span>
                     </div>
                   }
                 </ng-template>
                 <ng-template #item let-branch>
-                  <div class="flex align-items-center gap-2">
-                    <i class="pi pi-building text-color-secondary"></i>
+                  <div class="flex items-center gap-2">
+                    <i class="pi pi-building text-muted-color"></i>
                     <span>{{ branch.name }}</span>
                   </div>
                 </ng-template>
               </p-select>
-              <small class="text-color-secondary block mt-1">
+              <small class="text-muted-color block mt-1">
                 {{ filteredBranches().length }} permitted branch{{
                   filteredBranches().length !== 1 ? 'es' : ''
                 }}
@@ -3783,24 +3227,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         <!-- Loading State -->
         @if (loading()) {
           <div
-            class="surface-card p-5 border-round shadow-1 flex justify-content-center"
+            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
           >
-            <i
-              class="pi pi-spin pi-spinner text-primary"
-              style="font-size: 3rem"
-            ></i>
+            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
           </div>
         }
 
         <!-- Role List -->
         @if (!loading() && roles().length > 0) {
-          <div class="surface-card p-4 border-round shadow-1">
+          <div class="surface-card p-4 rounded-border shadow-sm">
             <div
-              class="flex flex-column md:flex-row justify-content-between align-items-start md:align-items-center gap-3 mb-4"
+              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
             >
               <div>
                 <h5 class="m-0 mb-1">Role Assignments</h5>
-                <p class="text-sm text-color-secondary m-0">
+                <p class="text-sm text-muted-color m-0">
                   {{ roles().length }} roles available
                 </p>
               </div>
@@ -3822,6 +3263,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   (onClick)="deselectAll()"
                 />
                 <p-button
+                  *hasPermission="USER_ROLE_PERMISSIONS.ASSIGN"
                   label="Save Changes"
                   icon="pi pi-save"
                   [disabled]="!canSave()"
@@ -3834,77 +3276,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             </div>
 
             <!-- Role Table -->
-            <p-table
-              [value]="roles()"
-              [rows]="10"
-              [paginator]="roles().length > 10"
-              [rowsPerPageOptions]="[10, 20, 50]"
-              [globalFilterFields]="['name', 'code', 'description']"
-              [showCurrentPageReport]="true"
-              currentPageReportTemplate="Showing {first} to {last} of {totalRecords} roles"
-              styleClass="p-datatable-sm"
-            >
-              <ng-template #header>
-                <tr>
-                  <th style="width: 3rem">
-                    <p-checkbox
-                      [ngModel]="allSelected()"
-                      [binary]="true"
-                      (ngModelChange)="toggleAll()"
-                      pTooltip="Select/Deselect All"
-                      tooltipPosition="top"
-                    />
-                  </th>
-                  <th>Name</th>
-                  <th>Code</th>
-                  <th>Description</th>
-                </tr>
-              </ng-template>
-              <ng-template #body let-role>
-                <tr>
-                  <td>
-                    <p-checkbox
-                      [ngModel]="selectionMap()[role.id]"
-                      [binary]="true"
-                      (ngModelChange)="onRoleToggle(role, $event)"
-                      [pTooltip]="getTooltip(role)"
-                      tooltipPosition="top"
-                    />
-                  </td>
-                  <td>{{ role.name }}</td>
-                  <td>{{ role.code || '-' }}</td>
-                  <td>{{ role.description || '-' }}</td>
-                </tr>
-              </ng-template>
-              <ng-template #emptymessage>
-                <tr>
-                  <td colspan="4" class="text-center p-4">
-                    @if (loading()) {
-                      <i class="pi pi-spin pi-spinner"></i> Loading roles...
-                    } @else {
-                      No roles available.
-                    }
-                  </td>
-                </tr>
-              </ng-template>
-            </p-table>
+            <div class="overflow-x-auto -mx-4 sm:mx-0">
+              <p-table
+                [value]="roles()"
+                [rows]="10"
+                [paginator]="roles().length > 10"
+                [rowsPerPageOptions]="[10, 20, 50]"
+                [globalFilterFields]="['name', 'code', 'description']"
+                [showCurrentPageReport]="true"
+                currentPageReportTemplate="Showing {first} to {last} of {totalRecords} roles"
+                styleClass="p-datatable-sm"
+                [tableStyle]="{ 'min-width': '35rem' }"
+              >
+                <ng-template #header>
+                  <tr>
+                    <th style="width: 3rem">
+                      <p-checkbox
+                        [ngModel]="allSelected()"
+                        [binary]="true"
+                        (ngModelChange)="toggleAll()"
+                        pTooltip="Select/Deselect All"
+                        tooltipPosition="top"
+                      />
+                    </th>
+                    <th>Name</th>
+                    <th class="hidden sm:table-cell">Code</th>
+                    <th class="hidden md:table-cell">Description</th>
+                  </tr>
+                </ng-template>
+                <ng-template #body let-role>
+                  <tr>
+                    <td>
+                      <p-checkbox
+                        [ngModel]="selectionMap()[role.id]"
+                        [binary]="true"
+                        (ngModelChange)="onRoleToggle(role, $event)"
+                        [pTooltip]="getTooltip(role)"
+                        tooltipPosition="top"
+                      />
+                    </td>
+                    <td>{{ role.name }}</td>
+                    <td class="hidden sm:table-cell">{{ role.code || '-' }}</td>
+                    <td class="hidden md:table-cell">{{ role.description || '-' }}</td>
+                  </tr>
+                </ng-template>
+                <ng-template #emptymessage>
+                  <tr>
+                    <td colspan="4" class="text-center p-4 text-muted-color">
+                      @if (loading()) {
+                        <i class="pi pi-spin pi-spinner"></i> Loading roles...
+                      } @else {
+                        No roles available.
+                      }
+                    </td>
+                  </tr>
+                </ng-template>
+              </p-table>
+            </div>
           </div>
 
           <!-- Change Summary -->
           @if (hasChanges()) {
-            <div class="surface-border border-1 border-round p-3 mt-4">
-              <div class="flex align-items-center gap-2 mb-3">
-                <i class="pi pi-info-circle text-blue-500 content-center"></i>
-                <p class="m-0 mb-1 font-bold">Pending Changes</p>
+            <div class="border border-surface rounded-border p-3 mt-4">
+              <div class="flex items-center gap-2 mb-3">
+                <i class="pi pi-info-circle text-primary"></i>
+                <span class="font-bold">Pending Changes</span>
               </div>
-              <div class="flex flex-col md:flex-row gap-4">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 @if (pendingAdd().length > 0) {
-                  <div class="w-full md:w-1/2">
-                    <div class="flex align-items-center gap-2 mb-2">
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
                       <i class="pi pi-plus-circle text-green-500"></i>
-                      <strong class="text-sm"
-                        >To Assign ({{ pendingAdd().length }})</strong
-                      >
+                      <strong class="text-sm">To Assign ({{ pendingAdd().length }})</strong>
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (role of pendingAdd(); track role.id) {
@@ -3914,12 +3357,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   </div>
                 }
                 @if (pendingRemove().length > 0) {
-                  <div class="w-full md:w-1/2">
-                    <div class="flex align-items-center gap-2 mb-2">
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
                       <i class="pi pi-minus-circle text-red-500"></i>
-                      <strong class="text-sm"
-                        >To Remove ({{ pendingRemove().length }})</strong
-                      >
+                      <strong class="text-sm">To Remove ({{ pendingRemove().length }})</strong>
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (role of pendingRemove(); track role.id) {
@@ -3934,12 +3375,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         }
 
         @if (!loading() && roles().length === 0) {
-          <div class="surface-card p-5 border-round shadow-1 text-center">
-            <i
-              class="pi pi-info-circle text-color-secondary mb-3"
-              style="font-size: 3rem; display: block;"
-            ></i>
-            <p class="text-color-secondary m-0">
+          <div class="surface-card p-5 rounded-border shadow-sm text-center">
+            <i class="pi pi-info-circle text-muted-color mb-3 block text-5xl"></i>
+            <p class="text-muted-color m-0">
               No roles available for this user.
             </p>
           </div>
@@ -3981,6 +3419,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * ```
  */
 class UserActionSelectorComponent {
+    // Permission constants for template
+    USER_ACTION_PERMISSIONS = USER_ACTION_PERMISSIONS;
     // Dependencies
     appConfig = inject(APP_CONFIG);
     companyContext = inject(LAYOUT_AUTH_STATE);
@@ -4007,8 +3447,10 @@ class UserActionSelectorComponent {
     selectionMap = this._selectionMap.asReadonly();
     _initialSelection = signal({}, ...(ngDevMode ? [{ debugName: "_initialSelection" }] : []));
     initialSelection = this._initialSelection.asReadonly();
+    // Computed - Company Feature Flag (cached)
+    isCompanyFeatureActive = computed(() => isCompanyFeatureEnabled(this.appConfig) === true, ...(ngDevMode ? [{ debugName: "isCompanyFeatureActive" }] : []));
     // Computed - UI Flags
-    showBranchSelector = computed(() => isCompanyFeatureEnabled(this.appConfig) === true, ...(ngDevMode ? [{ debugName: "showBranchSelector" }] : []));
+    showBranchSelector = this.isCompanyFeatureActive;
     filteredBranches = computed(() => {
         const currentCompanyId = this.companyContext.currentCompanyInfo()?.id || undefined;
         if (!currentCompanyId)
@@ -4030,7 +3472,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(() => {
@@ -4070,7 +3516,7 @@ class UserActionSelectorComponent {
         effect(() => {
             const userId = this.selectedUserId();
             if (userId) {
-                if (isCompanyFeatureEnabled(this.appConfig)) {
+                if (this.isCompanyFeatureActive()) {
                     this.loadUserBranches(userId);
                 }
                 this.loadData();
@@ -4085,9 +3531,7 @@ class UserActionSelectorComponent {
         effect(() => {
             const userId = this.selectedUserId();
             const branchId = this.selectedBranchId();
-            if (isCompanyFeatureEnabled(this.appConfig) &&
-                userId &&
-                branchId !== undefined) {
+            if (this.isCompanyFeatureActive() && userId && branchId !== undefined) {
                 this.loadData();
             }
         });
@@ -4096,15 +3540,13 @@ class UserActionSelectorComponent {
      * Load user's permitted branches
      */
     async loadUserBranches(userId) {
+        const companyId = this.companyContext.currentCompanyInfo()?.id;
+        if (!companyId) {
+            this.branches.set([]);
+            return;
+        }
         try {
-            const companyId = this.companyContext.currentCompanyInfo()?.id || undefined;
-            if (!companyId) {
-                this.branches.set([]);
-                return;
-            }
-            const response = await this.userPermissionProvider
-                .getUserBranchPermissions(userId)
-                .toPromise();
+            const response = await firstValueFrom(this.userPermissionProvider.getUserBranchPermissions(userId));
             const userBranches = response?.data?.map((ub) => ({
                 id: ub.branchId,
                 name: ub.branchName,
@@ -4113,11 +3555,7 @@ class UserActionSelectorComponent {
             this.branches.set(userBranches);
         }
         catch {
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: 'Failed to load user permitted branches',
-            });
+            // Error toast handled by global interceptor
         }
     }
     /**
@@ -4130,39 +3568,20 @@ class UserActionSelectorComponent {
         const branchId = this.selectedBranchId();
         this.loading.set(true);
         try {
-            // Load actions filtered by company whitelist
-            const actionsResponse = await this.actionApi
-                .getActionsForPermission()
-                .toPromise();
-            // Get flat list (filtered by company if enabled)
+            const actionsResponse = await firstValueFrom(this.actionApi.getActionsForPermission());
             const flatActions = actionsResponse?.data ?? [];
-            // Build tree structure from flat list with parentId
             const actionsTree = buildTreeFromFlat(flatActions);
-            // Store both representations
             this._actionsTree.set(actionsTree);
             this._actions.set(flatActions);
-            // Load existing user-action assignments
-            const query = isCompanyFeatureEnabled(this.appConfig) && branchId
-                ? { branchId }
-                : undefined;
-            const assignedResponse = await this.permissionApi
-                .getUserActions(userId, query)
-                .toPromise();
+            const query = this.isCompanyFeatureActive() && branchId ? { branchId } : undefined;
+            const assignedResponse = await firstValueFrom(this.permissionApi.getUserActions(userId, query));
             const assignedIds = new Set((assignedResponse?.data || []).map((a) => a.actionId));
-            // Build selection map
-            const selMap = {};
-            flatActions.forEach((action) => {
-                selMap[action.id] = assignedIds.has(action.id);
-            });
+            const selMap = this.buildSelectionMap(flatActions, (action) => assignedIds.has(action.id));
             this._selectionMap.set(selMap);
             this._initialSelection.set({ ...selMap });
         }
         catch {
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: 'Failed to load user action permissions',
-            });
+            // Error toast handled by global interceptor
         }
         finally {
             this.loading.set(false);
@@ -4197,55 +3616,37 @@ 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
-     */
     toggleAll() {
-        const newValue = !this.allSelected();
-        const selMap = {};
-        this.actions().forEach((action) => {
-            selMap[action.id] = newValue;
-        });
-        this._selectionMap.set(selMap);
+        this.setAllActions(!this.allSelected());
     }
-    /**
-     * Select all actions
-     */
     selectAll() {
-        const selMap = {};
-        this.actions().forEach((action) => {
-            selMap[action.id] = true;
-        });
-        this._selectionMap.set(selMap);
+        this.setAllActions(true);
     }
-    /**
-     * Deselect all actions
-     */
     deselectAll() {
-        const selMap = {};
-        this.actions().forEach((action) => {
-            selMap[action.id] = false;
-        });
-        this._selectionMap.set(selMap);
+        this.setAllActions(false);
+    }
+    setAllActions(value) {
+        this._selectionMap.set(this.buildSelectionMap(this.actions(), () => value));
     }
-    /**
-     * Save changes to backend
-     */
     async saveChanges() {
         const userId = this.selectedUserId();
         if (!userId)
             return;
         const branchId = this.selectedBranchId();
-        const companyId = this.companyContext.currentCompanyInfo()?.id || undefined;
-        // Validate company context if feature enabled
-        if (isCompanyFeatureEnabled(this.appConfig) && !companyId) {
+        const companyId = this.companyContext.currentCompanyInfo()?.id;
+        if (this.isCompanyFeatureActive() && !companyId) {
             this.messageService.add({
                 severity: 'warn',
                 summary: 'Company Required',
@@ -4253,92 +3654,90 @@ class UserActionSelectorComponent {
             });
             return;
         }
-        // Build payload
-        const items = [];
-        this.pendingAdd().forEach((action) => {
-            items.push({
-                id: action.id,
-                action: 'add',
-            });
-        });
-        this.pendingRemove().forEach((action) => {
-            items.push({
-                id: action.id,
-                action: 'remove',
-            });
-        });
+        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;
+        }
+        const items = this.buildPermissionItems();
         if (items.length === 0)
             return;
         this.saving.set(true);
         try {
             const payload = { userId, items };
-            if (isCompanyFeatureEnabled(this.appConfig)) {
-                if (companyId) {
+            if (this.isCompanyFeatureActive()) {
+                if (companyId)
                     payload.companyId = companyId;
-                }
-                if (branchId) {
+                if (branchId)
                     payload.branchId = branchId;
-                }
             }
-            const response = await this.permissionApi
-                .assignUserActions(payload)
-                .toPromise();
+            const response = await firstValueFrom(this.permissionApi.assignUserActions(payload));
             this.messageService.add({
                 severity: 'success',
                 summary: 'Success',
                 detail: response?.data?.message ||
                     'User action permissions updated successfully',
             });
-            // 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);
         }
     }
-    /**
-     * Reset component state
-     */
     resetState() {
         this._actionsTree.set([]);
         this._actions.set([]);
         this._selectionMap.set({});
         this._initialSelection.set({});
     }
+    buildSelectionMap(actions, predicate) {
+        const selMap = {};
+        actions.forEach((action) => {
+            selMap[action.id] = predicate(action);
+        });
+        return selMap;
+    }
+    buildPermissionItems() {
+        const items = [];
+        this.pendingAdd().forEach((action) => {
+            items.push({ id: action.id, action: 'add' });
+        });
+        this.pendingRemove().forEach((action) => {
+            items.push({ id: action.id, action: 'remove' });
+        });
+        return items;
+    }
     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>
             <lib-user-select
-              [(value)]="selectedUserId"
+              [value]="selectedUserId()"
+              (valueChange)="selectedUserId.set($event)"
               [isEditMode]="true"
               placeHolder="Select a user"
             />
           </div>
 
           @if (showBranchSelector()) {
-            <div class="field col-12 sm:col-6 mb-0">
-              <label class="block font-semibold mb-2 text-900">
+            <div>
+              <label class="block font-semibold mb-2">
                 <i class="pi pi-building mr-2 text-primary"></i>
                 Select Branch
               </label>
               <p-select
-                [(ngModel)]="selectedBranchId"
+                [ngModel]="selectedBranchId()"
+                (ngModelChange)="selectedBranchId.set($event)"
                 [options]="filteredBranches()"
                 optionLabel="name"
                 optionValue="id"
@@ -4349,20 +3748,20 @@ class UserActionSelectorComponent {
               >
                 <ng-template #selectedItem let-branch>
                   @if (branch) {
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                       <i class="pi pi-building text-primary"></i>
                       <span class="font-semibold">{{ branch.name }}</span>
                     </div>
                   }
                 </ng-template>
                 <ng-template #item let-branch>
-                  <div class="flex align-items-center gap-2">
-                    <i class="pi pi-building text-color-secondary"></i>
+                  <div class="flex items-center gap-2">
+                    <i class="pi pi-building text-muted-color"></i>
                     <span>{{ branch.name }}</span>
                   </div>
                 </ng-template>
               </p-select>
-              <small class="text-color-secondary block mt-1">
+              <small class="text-muted-color block mt-1">
                 {{ filteredBranches().length }} permitted branch{{
                   filteredBranches().length !== 1 ? 'es' : ''
                 }}
@@ -4376,20 +3775,20 @@ class UserActionSelectorComponent {
       @if (selectedUserId()) {
         <!-- Loading State -->
         @if (loading()) {
-          <div class="flex justify-content-center p-5">
-            <i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
+          <div class="flex justify-center p-5">
+            <i class="pi pi-spin pi-spinner text-4xl"></i>
           </div>
         }
 
         <!-- Action List -->
         @if (!loading() && actions().length > 0) {
-          <div class="surface-card p-4 border-round shadow-1">
+          <div class="surface-card p-4 rounded-border shadow-sm">
             <div
-              class="flex flex-column md:flex-row justify-content-between align-items-start md:align-items-center gap-3 mb-4"
+              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
             >
               <div>
                 <h5 class="m-0 mb-1">Direct Action Permissions</h5>
-                <p class="text-sm text-color-secondary m-0">
+                <p class="text-sm text-muted-color m-0">
                   {{ actions().length }} actions available
                 </p>
               </div>
@@ -4411,6 +3810,7 @@ class UserActionSelectorComponent {
                   (onClick)="deselectAll()"
                 />
                 <p-button
+                  *hasPermission="USER_ACTION_PERMISSIONS.ASSIGN"
                   label="Save Changes"
                   icon="pi pi-save"
                   [disabled]="!canSave()"
@@ -4422,34 +3822,52 @@ class UserActionSelectorComponent {
               </div>
             </div>
 
+            <!-- Validation Warning -->
+            @if (invalidActionsCount() > 0) {
+              <div class="validation-warning rounded-border p-3 mb-4">
+                <div class="flex items-start gap-2">
+                  <i class="pi pi-exclamation-triangle text-xl"></i>
+                  <div class="flex-1">
+                    <span class="font-semibold">Validation Warning:</span>
+                    <p class="text-sm mt-1 mb-0">
+                      {{ invalidActionsCount() }} selected
+                      action{{ invalidActionsCount() > 1 ? 's have' : ' has' }}
+                      unmet prerequisites. Fix before saving or use auto-fix on
+                      save.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            }
+
             <!-- Action Tree Table -->
-            <p-treeTable
-              [value]="treeNodes()"
-              [scrollable]="true"
-              scrollHeight="flex"
-              dataKey="id"
-              styleClass="p-treetable-sm"
-            >
-              <ng-template pTemplate="header">
-                <tr>
-                  <th style="width: 3rem">
-                    <p-checkbox
-                      [ngModel]="allSelected()"
-                      [binary]="true"
-                      (ngModelChange)="toggleAll()"
-                      pTooltip="Select/Deselect All"
-                      tooltipPosition="top"
-                    />
-                  </th>
-                  <th>Name</th>
-                  <th>Code</th>
-                  <th>Type</th>
-                  <th>Description</th>
-                </tr>
-              </ng-template>
-              <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
-                <tr>
-                  <td style="width: 3rem">
+            <div class="overflow-x-auto -mx-4 sm:mx-0">
+              <p-treeTable
+                [value]="treeNodes()"
+                dataKey="id"
+                styleClass="p-treetable-sm"
+                [tableStyle]="{ 'min-width': '50rem' }"
+              >
+                <ng-template #header>
+                  <tr>
+                    <th class="w-12">
+                      <p-checkbox
+                        [ngModel]="allSelected()"
+                        [binary]="true"
+                        (ngModelChange)="toggleAll()"
+                        pTooltip="Select/Deselect All"
+                        tooltipPosition="top"
+                      />
+                    </th>
+                    <th>Name</th>
+                    <th class="hidden md:table-cell">Code</th>
+                    <th>Type</th>
+                    <th class="hidden lg:table-cell">Description</th>
+                  </tr>
+                </ng-template>
+              <ng-template #body let-rowNode let-rowData="rowData">
+                <tr [class.highlight-warning]="hasUnmetPrerequisites(rowData)">
+                  <td class="w-12">
                     <p-checkbox
                       [ngModel]="selectionMap()[rowData.id]"
                       [binary]="true"
@@ -4460,9 +3878,18 @@ class UserActionSelectorComponent {
                   </td>
                   <td>
                     <p-treeTableToggler [rowNode]="rowNode" />
-                    <span>{{ rowData.name }}</span>
+                    <span class="inline-flex items-center gap-2">
+                      {{ rowData.name }}
+                      @if (hasUnmetPrerequisites(rowData)) {
+                        <i
+                          class="pi pi-exclamation-triangle text-orange-500"
+                          pTooltip="This action has unmet prerequisites and will fail validation on save"
+                          tooltipPosition="top"
+                        ></i>
+                      }
+                    </span>
                   </td>
-                  <td>{{ rowData.code || '-' }}</td>
+                  <td class="hidden md:table-cell">{{ rowData.code || '-' }}</td>
                   <td>
                     <p-tag
                       [value]="rowData.actionType"
@@ -4471,12 +3898,12 @@ class UserActionSelectorComponent {
                       "
                     />
                   </td>
-                  <td>{{ rowData.description || '-' }}</td>
+                  <td class="hidden lg:table-cell">{{ rowData.description || '-' }}</td>
                 </tr>
               </ng-template>
-              <ng-template pTemplate="emptymessage">
+              <ng-template #emptymessage>
                 <tr>
-                  <td colspan="5" class="text-center p-4">
+                  <td colspan="5" class="text-center p-4 text-muted-color">
                     @if (loading()) {
                       <i class="pi pi-spin pi-spinner"></i> Loading actions...
                     } @else {
@@ -4485,24 +3912,23 @@ class UserActionSelectorComponent {
                   </td>
                 </tr>
               </ng-template>
-            </p-treeTable>
+              </p-treeTable>
+            </div>
           </div>
 
           <!-- Change Summary -->
           @if (hasChanges()) {
-            <div class="surface-border border-1 border-round p-3 mt-4">
-              <div class="flex align-items-center gap-2 mb-3">
-                <i class="pi pi-info-circle text-blue-500 content-center"></i>
-                <p class="m-0 mb-1 font-bold">Pending Changes</p>
+            <div class="border border-surface rounded-border p-3 mt-4">
+              <div class="flex items-center gap-2 mb-3">
+                <i class="pi pi-info-circle text-primary"></i>
+                <span class="font-bold">Pending Changes</span>
               </div>
-              <div class="flex flex-col md:flex-row gap-4">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 @if (pendingAdd().length > 0) {
-                  <div class="w-full md:w-1/2">
-                    <div class="flex align-items-center gap-2 mb-2">
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
                       <i class="pi pi-plus-circle text-green-500"></i>
-                      <strong class="text-sm"
-                        >To Assign ({{ pendingAdd().length }})</strong
-                      >
+                      <strong class="text-sm">To Assign ({{ pendingAdd().length }})</strong>
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (action of pendingAdd(); track action.id) {
@@ -4512,12 +3938,10 @@ class UserActionSelectorComponent {
                   </div>
                 }
                 @if (pendingRemove().length > 0) {
-                  <div class="w-full md:w-1/2">
-                    <div class="flex align-items-center gap-2 mb-2">
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
                       <i class="pi pi-minus-circle text-red-500"></i>
-                      <strong class="text-sm"
-                        >To Remove ({{ pendingRemove().length }})</strong
-                      >
+                      <strong class="text-sm">To Remove ({{ pendingRemove().length }})</strong>
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (action of pendingRemove(); track action.id) {
@@ -4532,47 +3956,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: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i6.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i8.TreeTable, selector: "p-treeTable, p-treetable, p-tree-table", inputs: ["columns", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight", "selectionKeys", "showGridlines"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "component", type: i8.TreeTableToggler, selector: "p-treeTableToggler, p-treetabletoggler, p-treetable-toggler", inputs: ["rowNode"] }, { kind: "component", type: UserSelectComponent, selector: "lib-user-select", inputs: ["loadUsers", "placeHolder", "isEditMode", "filterActive", "additionalFilters", "pageSize", "value"], outputs: ["valueChange", "userSelected", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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: ["value"], outputs: ["valueChange", "userSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserActionSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'flusys-user-action-selector', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, PrimeModule, UserSelectComponent], template: `
+            args: [{ selector: 'flusys-user-action-selector', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, PrimeModule, HasPermissionDirective, UserSelectComponent], template: `
     <div class="user-action-selector">
       <!-- User and Branch Selectors -->
-      <div class="surface-card p-4 border-round mb-4 shadow-1">
-        <div class="formgrid grid gap-5">
-          <div class="field col-12 sm:col-6 mb-0">
-            <label class="block font-semibold mb-2 text-900">
+      <div class="surface-card p-4 rounded-border mb-4 shadow-sm">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
+          <div>
+            <label class="block font-semibold mb-2">
               <i class="pi pi-user mr-2 text-primary"></i>
               Select User
             </label>
             <lib-user-select
-              [(value)]="selectedUserId"
+              [value]="selectedUserId()"
+              (valueChange)="selectedUserId.set($event)"
               [isEditMode]="true"
               placeHolder="Select a user"
             />
           </div>
 
           @if (showBranchSelector()) {
-            <div class="field col-12 sm:col-6 mb-0">
-              <label class="block font-semibold mb-2 text-900">
+            <div>
+              <label class="block font-semibold mb-2">
                 <i class="pi pi-building mr-2 text-primary"></i>
                 Select Branch
               </label>
               <p-select
-                [(ngModel)]="selectedBranchId"
+                [ngModel]="selectedBranchId()"
+                (ngModelChange)="selectedBranchId.set($event)"
                 [options]="filteredBranches()"
                 optionLabel="name"
                 optionValue="id"
@@ -4583,20 +4006,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
               >
                 <ng-template #selectedItem let-branch>
                   @if (branch) {
-                    <div class="flex align-items-center gap-2">
+                    <div class="flex items-center gap-2">
                       <i class="pi pi-building text-primary"></i>
                       <span class="font-semibold">{{ branch.name }}</span>
                     </div>
                   }
                 </ng-template>
                 <ng-template #item let-branch>
-                  <div class="flex align-items-center gap-2">
-                    <i class="pi pi-building text-color-secondary"></i>
+                  <div class="flex items-center gap-2">
+                    <i class="pi pi-building text-muted-color"></i>
                     <span>{{ branch.name }}</span>
                   </div>
                 </ng-template>
               </p-select>
-              <small class="text-color-secondary block mt-1">
+              <small class="text-muted-color block mt-1">
                 {{ filteredBranches().length }} permitted branch{{
                   filteredBranches().length !== 1 ? 'es' : ''
                 }}
@@ -4610,20 +4033,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
       @if (selectedUserId()) {
         <!-- Loading State -->
         @if (loading()) {
-          <div class="flex justify-content-center p-5">
-            <i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
+          <div class="flex justify-center p-5">
+            <i class="pi pi-spin pi-spinner text-4xl"></i>
           </div>
         }
 
         <!-- Action List -->
         @if (!loading() && actions().length > 0) {
-          <div class="surface-card p-4 border-round shadow-1">
+          <div class="surface-card p-4 rounded-border shadow-sm">
             <div
-              class="flex flex-column md:flex-row justify-content-between align-items-start md:align-items-center gap-3 mb-4"
+              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
             >
               <div>
                 <h5 class="m-0 mb-1">Direct Action Permissions</h5>
-                <p class="text-sm text-color-secondary m-0">
+                <p class="text-sm text-muted-color m-0">
                   {{ actions().length }} actions available
                 </p>
               </div>
@@ -4645,6 +4068,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   (onClick)="deselectAll()"
                 />
                 <p-button
+                  *hasPermission="USER_ACTION_PERMISSIONS.ASSIGN"
                   label="Save Changes"
                   icon="pi pi-save"
                   [disabled]="!canSave()"
@@ -4656,34 +4080,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
               </div>
             </div>
 
+            <!-- Validation Warning -->
+            @if (invalidActionsCount() > 0) {
+              <div class="validation-warning rounded-border p-3 mb-4">
+                <div class="flex items-start gap-2">
+                  <i class="pi pi-exclamation-triangle text-xl"></i>
+                  <div class="flex-1">
+                    <span class="font-semibold">Validation Warning:</span>
+                    <p class="text-sm mt-1 mb-0">
+                      {{ invalidActionsCount() }} selected
+                      action{{ invalidActionsCount() > 1 ? 's have' : ' has' }}
+                      unmet prerequisites. Fix before saving or use auto-fix on
+                      save.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            }
+
             <!-- Action Tree Table -->
-            <p-treeTable
-              [value]="treeNodes()"
-              [scrollable]="true"
-              scrollHeight="flex"
-              dataKey="id"
-              styleClass="p-treetable-sm"
-            >
-              <ng-template pTemplate="header">
-                <tr>
-                  <th style="width: 3rem">
-                    <p-checkbox
-                      [ngModel]="allSelected()"
-                      [binary]="true"
-                      (ngModelChange)="toggleAll()"
-                      pTooltip="Select/Deselect All"
-                      tooltipPosition="top"
-                    />
-                  </th>
-                  <th>Name</th>
-                  <th>Code</th>
-                  <th>Type</th>
-                  <th>Description</th>
-                </tr>
-              </ng-template>
-              <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
-                <tr>
-                  <td style="width: 3rem">
+            <div class="overflow-x-auto -mx-4 sm:mx-0">
+              <p-treeTable
+                [value]="treeNodes()"
+                dataKey="id"
+                styleClass="p-treetable-sm"
+                [tableStyle]="{ 'min-width': '50rem' }"
+              >
+                <ng-template #header>
+                  <tr>
+                    <th class="w-12">
+                      <p-checkbox
+                        [ngModel]="allSelected()"
+                        [binary]="true"
+                        (ngModelChange)="toggleAll()"
+                        pTooltip="Select/Deselect All"
+                        tooltipPosition="top"
+                      />
+                    </th>
+                    <th>Name</th>
+                    <th class="hidden md:table-cell">Code</th>
+                    <th>Type</th>
+                    <th class="hidden lg:table-cell">Description</th>
+                  </tr>
+                </ng-template>
+              <ng-template #body let-rowNode let-rowData="rowData">
+                <tr [class.highlight-warning]="hasUnmetPrerequisites(rowData)">
+                  <td class="w-12">
                     <p-checkbox
                       [ngModel]="selectionMap()[rowData.id]"
                       [binary]="true"
@@ -4694,9 +4136,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   </td>
                   <td>
                     <p-treeTableToggler [rowNode]="rowNode" />
-                    <span>{{ rowData.name }}</span>
+                    <span class="inline-flex items-center gap-2">
+                      {{ rowData.name }}
+                      @if (hasUnmetPrerequisites(rowData)) {
+                        <i
+                          class="pi pi-exclamation-triangle text-orange-500"
+                          pTooltip="This action has unmet prerequisites and will fail validation on save"
+                          tooltipPosition="top"
+                        ></i>
+                      }
+                    </span>
                   </td>
-                  <td>{{ rowData.code || '-' }}</td>
+                  <td class="hidden md:table-cell">{{ rowData.code || '-' }}</td>
                   <td>
                     <p-tag
                       [value]="rowData.actionType"
@@ -4705,12 +4156,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                       "
                     />
                   </td>
-                  <td>{{ rowData.description || '-' }}</td>
+                  <td class="hidden lg:table-cell">{{ rowData.description || '-' }}</td>
                 </tr>
               </ng-template>
-              <ng-template pTemplate="emptymessage">
+              <ng-template #emptymessage>
                 <tr>
-                  <td colspan="5" class="text-center p-4">
+                  <td colspan="5" class="text-center p-4 text-muted-color">
                     @if (loading()) {
                       <i class="pi pi-spin pi-spinner"></i> Loading actions...
                     } @else {
@@ -4719,24 +4170,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   </td>
                 </tr>
               </ng-template>
-            </p-treeTable>
+              </p-treeTable>
+            </div>
           </div>
 
           <!-- Change Summary -->
           @if (hasChanges()) {
-            <div class="surface-border border-1 border-round p-3 mt-4">
-              <div class="flex align-items-center gap-2 mb-3">
-                <i class="pi pi-info-circle text-blue-500 content-center"></i>
-                <p class="m-0 mb-1 font-bold">Pending Changes</p>
+            <div class="border border-surface rounded-border p-3 mt-4">
+              <div class="flex items-center gap-2 mb-3">
+                <i class="pi pi-info-circle text-primary"></i>
+                <span class="font-bold">Pending Changes</span>
               </div>
-              <div class="flex flex-col md:flex-row gap-4">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 @if (pendingAdd().length > 0) {
-                  <div class="w-full md:w-1/2">
-                    <div class="flex align-items-center gap-2 mb-2">
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
                       <i class="pi pi-plus-circle text-green-500"></i>
-                      <strong class="text-sm"
-                        >To Assign ({{ pendingAdd().length }})</strong
-                      >
+                      <strong class="text-sm">To Assign ({{ pendingAdd().length }})</strong>
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (action of pendingAdd(); track action.id) {
@@ -4746,12 +4196,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   </div>
                 }
                 @if (pendingRemove().length > 0) {
-                  <div class="w-full md:w-1/2">
-                    <div class="flex align-items-center gap-2 mb-2">
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
                       <i class="pi pi-minus-circle text-red-500"></i>
-                      <strong class="text-sm"
-                        >To Remove ({{ pendingRemove().length }})</strong
-                      >
+                      <strong class="text-sm">To Remove ({{ pendingRemove().length }})</strong>
                     </div>
                     <ul class="list-none p-0 m-0 pl-4">
                       @for (action of pendingRemove(); track action.id) {
@@ -4766,19 +4214,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         }
 
         @if (!loading() && actions().length === 0) {
-          <div class="surface-card p-5 border-round shadow-1 text-center">
-            <i
-              class="pi pi-info-circle text-color-secondary mb-3"
-              style="font-size: 3rem; display: block;"
-            ></i>
-            <p class="text-color-secondary m-0">
+          <div class="surface-card p-5 rounded-border shadow-sm text-center">
+            <i class="pi pi-info-circle text-muted-color mb-3 block text-5xl"></i>
+            <p class="text-muted-color m-0">
               No actions available for this 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
@@ -4835,90 +4280,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             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
- */
+/** Registers IAM provider adapters for ng-shared interfaces */
 function provideIamProviders() {
     return [
-        // Profile permission provider (for auth profile page)
-        {
-            provide: PROFILE_PERMISSION_PROVIDER,
-            useClass: ProfilePermissionProviderAdapter,
-        },
+        { provide: PROFILE_PERMISSION_PROVIDER, useClass: ProfilePermissionProviderAdapter },
     ];
 }
 
 /**
  * IAM Routes Configuration
  *
- * Identity and Access Management routing
- * - Actions: Permission actions (always visible)
+ * Identity and Access Management routing with permission guards.
+ * - Actions: Permission actions management
  * - Roles: Role management (conditional on RBAC/FULL mode)
- * - Permissions: User permission assignments (always visible)
- *
- * All routes are protected by permission guards to prevent direct URL access.
+ * - Permissions: User permission assignments
  */
 const IAM_ROUTES = [
     {
         path: '',
-        loadComponent: () => import('./flusys-ng-iam-iam-container.component-Chl5MDkV.mjs').then((m) => m.IamContainerComponent),
+        loadComponent: () => import('./flusys-ng-iam-iam-container.component-BToYxEej.mjs').then((m) => m.IamContainerComponent),
         children: [
             // Actions Management
             {
                 path: 'actions',
+                canActivate: [permissionGuard(ACTION_PERMISSIONS.READ)],
                 children: [
                     {
                         path: '',
-                        loadComponent: () => import('./flusys-ng-iam-action-list-page.component-Dfts0JCt.mjs').then((m) => m.ActionListPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-action-list-page.component-CQ6RazN0.mjs').then((m) => m.ActionListPageComponent),
                     },
                     {
                         path: 'new',
-                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-DBJzC5GS.mjs').then((m) => m.ActionFormPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-CVN8sV-c.mjs').then((m) => m.ActionFormPageComponent),
                     },
                     {
                         path: ':id',
-                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-DBJzC5GS.mjs').then((m) => m.ActionFormPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-CVN8sV-c.mjs').then((m) => m.ActionFormPageComponent),
                     },
                 ],
             },
             // Roles Management
             {
                 path: 'roles',
+                canActivate: [permissionGuard(ROLE_PERMISSIONS.READ)],
                 children: [
                     {
                         path: '',
-                        loadComponent: () => import('./flusys-ng-iam-role-list-page.component-BF-Z_TQK.mjs').then((m) => m.RoleListPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-role-list-page.component-Cz-jk-R_.mjs').then((m) => m.RoleListPageComponent),
                     },
                     {
                         path: 'new',
-                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-Ctigzpon.mjs').then((m) => m.RoleFormPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-BjPwXkip.mjs').then((m) => m.RoleFormPageComponent),
                     },
                     {
                         path: ':id',
-                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-Ctigzpon.mjs').then((m) => m.RoleFormPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-BjPwXkip.mjs').then((m) => m.RoleFormPageComponent),
                     },
                 ],
             },
-            // Permissions Management (User permission assignment)
+            // Permissions Management (requires any permission tab access)
             {
                 path: 'permissions',
-                loadComponent: () => import('./flusys-ng-iam-permission-page.component-cDrwUAQ_.mjs').then((m) => m.PermissionPageComponent),
+                canActivate: [
+                    anyPermissionGuard([
+                        ROLE_ACTION_PERMISSIONS.READ,
+                        USER_ROLE_PERMISSIONS.READ,
+                        USER_ACTION_PERMISSIONS.READ,
+                        COMPANY_ACTION_PERMISSIONS.READ,
+                    ]),
+                ],
+                loadComponent: () => import('./flusys-ng-iam-permission-page.component-BS7xXmsn.mjs').then((m) => m.PermissionPageComponent),
             },
             // Default redirect to actions
             {
@@ -4937,4 +4368,4 @@ const IAM_ROUTES = [
  */
 
 export { ActionApiService as A, CompanyActionSelectorComponent as C, IAM_ROUTES as I, LogicBuilderComponent as L, MAX_DROPDOWN_ITEMS as M, PermissionApiService as P, RoleApiService as R, UserRoleSelectorComponent as U, ActionType as a, RoleActionSelectorComponent as b, convertActionToTreeNode as c, UserActionSelectorComponent as d, ActionPermissionLogicService as e, MyPermissionsApiService as f, PermissionStateService as g, ProfilePermissionProviderAdapter as h, provideIamProviders as p };
-//# sourceMappingURL=flusys-ng-iam-flusys-ng-iam-BjdM-Vgz.mjs.map
+//# sourceMappingURL=flusys-ng-iam-flusys-ng-iam-DrGHlTiz.mjs.map