@flusys/ng-iam 1.1.1-beta → 1.2.0-rc.1

package/fesm2022/flusys-ng-iam-flusys-ng-iam-CrycDULz.mjs

@@ -0,0 +1,4561 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, signal, input, output, effect, Component, computed, DestroyRef } from '@angular/core';
+import { ApiResourceService, TranslateService, PermissionValidatorService, AngularModule, TranslatePipe, ROLE_ACTION_PERMISSIONS, HasPermissionDirective, COMPANY_ACTION_PERMISSIONS, COMPANY_API_PROVIDER, USER_ROLE_PERMISSIONS, USER_PERMISSION_PROVIDER, UserSelectComponent, USER_ACTION_PERMISSIONS, PROFILE_PERMISSION_PROVIDER, permissionGuard, ACTION_PERMISSIONS, ROLE_PERMISSIONS, anyPermissionGuard, resolveTranslationModule, SHARED_MESSAGES } from '@flusys/ng-shared';
+import { APP_CONFIG, getServiceUrl, BaseApiService, isCompanyFeatureEnabled } from '@flusys/ng-core';
+import * as i2 from '@flusys/ng-ui';
+import { ConfirmationService, MessageService, UiModule } from '@flusys/ng-ui';
+import { HttpClient } from '@angular/common/http';
+import { of, firstValueFrom, map as map$1 } from 'rxjs';
+import { tap, catchError, map } from 'rxjs/operators';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { LAYOUT_AUTH_STATE } from '@flusys/ng-layout';
+
+/** Must match backend ActionType enum */
+var ActionType;
+(function (ActionType) {
+    ActionType["BACKEND"] = "backend";
+    ActionType["FRONTEND"] = "frontend";
+    ActionType["BOTH"] = "both";
+})(ActionType || (ActionType = {}));
+
+// Company interfaces
+
+/** Maximum items for dropdown lists (companies, roles, users, branches) */
+const MAX_DROPDOWN_ITEMS = 100;
+
+const IAM_MESSAGES = {
+    // Action CRUD (API keys)
+    'action.create.success': 'Action created successfully',
+    'action.create.many.success': '{{count}} actions created successfully',
+    'action.get.success': 'Action retrieved successfully',
+    'action.get.by.ids.success': 'Actions retrieved successfully by Ids',
+    'action.get.by.filter.success': 'Actions retrieved successfully by filter',
+    'action.get.all.success': 'Actions retrieved successfully',
+    'action.update.success': 'Action updated successfully',
+    'action.update.many.success': '{{count}} actions updated successfully',
+    'action.delete.success': 'Action deleted successfully',
+    'action.restore.success': 'Action restored successfully',
+    // Role CRUD (API keys)
+    'role.create.success': 'Role created successfully',
+    'role.create.many.success': '{{count}} roles created successfully',
+    'role.get.success': 'Role retrieved successfully',
+    'role.get.by.ids.success': 'Roles retrieved successfully by Ids',
+    'role.get.by.filter.success': 'Roles retrieved successfully by filter',
+    'role.get.all.success': 'Roles retrieved successfully',
+    'role.update.success': 'Role updated successfully',
+    'role.update.many.success': '{{count}} roles updated successfully',
+    'role.delete.success': 'Role deleted successfully',
+    'role.restore.success': 'Role restored successfully',
+    // PERMISSION_OPERATION_MESSAGES (API keys)
+    'permission.process.success': 'Successfully processed {{total}} items: {{added}} added, {{removed}} removed',
+    'permission.user.required': 'User is required for {{method}}',
+    'permission.already.exists': 'Permission already exists',
+    // ROLE_PERMISSION_MESSAGES (API keys)
+    'role.permission.actions.success': 'Role actions retrieved successfully',
+    'role.permission.user.roles.success': 'User roles retrieved successfully',
+    // USER_ACTION_PERMISSION_MESSAGES (API keys)
+    'user.action.permission.get.success': 'User action permissions retrieved successfully',
+    // COMPANY_ACTION_PERMISSION_MESSAGES (API keys)
+    'company.action.permission.get.success': 'Company action permissions retrieved successfully',
+    // MY_PERMISSION_MESSAGES (API keys)
+    'my.permission.get.success': 'Permissions loaded successfully',
+    // IAM_MODE_MESSAGES (API keys)
+    'iam.direct.mode.unavailable': 'Direct permission assignment not available in RBAC-only mode',
+    'iam.rbac.mode.unavailable': 'Role-based permission assignment not available in direct-only mode',
+    'iam.role.assignment.unavailable': 'Role assignment not available in direct-only mode',
+    // pages/iam-container/iam-container.component.ts
+    'iam.title': 'Identity & Access Management',
+    'iam.subtitle': 'Manage roles, permissions, and access control',
+    'iam.action.title': 'Actions',
+    'iam.role.title': 'Roles',
+    'iam.permission.title': 'Permissions',
+    // pages/action/action-list-page.component.ts
+    'iam.action.new': 'New Action',
+    'iam.action.name': 'Action Name',
+    'iam.action.code': 'Action Code',
+    'iam.action.type': 'Type',
+    'iam.action.no.actions': 'No actions found',
+    'iam.action.type.backend': 'Backend',
+    'iam.action.type.frontend': 'Frontend',
+    'iam.action.type.both': 'Both',
+    'iam.action.delete.title': 'Delete Action',
+    // pages/action/action-form-page.component.ts
+    'iam.action.edit': 'Edit Action',
+    'iam.action.name.placeholder': 'Enter action name',
+    'iam.action.code.placeholder': 'Enter action code',
+    'iam.action.parent': 'Parent Action',
+    'iam.action.select.parent': 'Select Parent Action',
+    'iam.action.type.backend.label': 'Backend Only',
+    'iam.action.type.frontend.label': 'Frontend Only',
+    'iam.action.type.both.label': 'Backend & Frontend',
+    // pages/role/role-list-page.component.ts
+    'iam.company.title': 'Companies',
+    'iam.role.new': 'New Role',
+    'iam.role.name': 'Role Name',
+    'iam.role.no.roles': 'No roles found',
+    'iam.role.delete.title': 'Delete Role',
+    // pages/role/role-form-page.component.ts
+    'iam.role.edit': 'Edit Role',
+    'iam.role.name.placeholder': 'Enter role name',
+    // pages/permission/permission-page.component.ts
+    'iam.permission.role.actions': 'Role Actions',
+    'iam.permission.user.roles': 'User Roles',
+    'iam.permission.user.actions': 'User Actions',
+    'iam.permission.company.actions': 'Company Actions',
+    // components/logic-builder.component.ts
+    'iam.logic.title': 'Permission Logic',
+    'iam.logic.add.logic': 'Add Logic',
+    'iam.logic.clear.logic': 'Clear Logic',
+    'iam.logic.description': 'Define permission requirements using AND/OR logic with actions',
+    'iam.logic.click.to.toggle': 'Click to toggle',
+    'iam.logic.conditions': '{{count}} conditions',
+    'iam.logic.select.action': 'Select Action...',
+    'iam.logic.actions.available': '{{count}} available',
+    'iam.logic.add.condition': 'Add Condition:',
+    'iam.logic.group': 'Group',
+    'iam.logic.action': 'Action',
+    // components/role-action-selector.component.ts
+    'iam.permission.select.role': 'Select Role',
+    'iam.permission.select.role.placeholder': 'Search and select a role',
+    'iam.permission.action.permissions': 'Action Permissions',
+    'iam.permission.actions.available': '{{count}} actions available',
+    'iam.validation.warning.title': 'Validation Warning',
+    'iam.validation.unmet.prerequisites.plural': '{{count}} selected actions have unmet prerequisites. Fix before saving or use auto-fix on save.',
+    'iam.validation.unmet.prerequisites.singular': '{{count}} selected action has unmet prerequisites. Fix before saving or use auto-fix on save.',
+    'iam.permission.requirements': 'Requirements',
+    'iam.validation.unmet.prerequisites.tooltip': 'This action has unmet prerequisites and will fail validation on save',
+    'iam.permission.has.prerequisites': 'Has prerequisites',
+    'iam.permission.no.actions.available': 'No actions available',
+    'iam.permission.no.actions.for.role': 'No actions available for this role',
+    'iam.tooltip.remove.action': 'Click to remove',
+    'iam.tooltip.add.action': 'Click to add (auto-selects required)',
+    'iam.tooltip.assigned.to.role': 'Assigned to role',
+    'iam.tooltip.click.to.remove.role': 'Click to remove',
+    'iam.tooltip.click.to.assign.role': 'Click to assign to role',
+    // components/user-action-selector.component.ts
+    'iam.permission.select.user': 'Select User',
+    'iam.permission.select.user.placeholder': 'Search and select a user',
+    'iam.permission.select.branch': 'Select Branch',
+    'iam.permission.select.branch.placeholder': 'Search and select a branch',
+    'iam.branch.permitted.count.plural': '{{count}} permitted branches in current company',
+    'iam.branch.permitted.count': '{{count}} permitted branch in current company',
+    'iam.permission.direct.action.permissions': 'Direct Action Permissions',
+    'iam.permission.no.actions.for.user': 'No actions available for this user',
+    'iam.tooltip.assigned.to.user': 'Assigned to user',
+    'iam.tooltip.click.to.remove.user': 'Click to remove direct permission',
+    'iam.tooltip.click.to.assign.user': 'Click to assign direct permission',
+    'iam.permission.company.required': 'Please select a company first',
+    // components/company-action-selector.component.ts
+    'iam.permission.select.company': 'Select Company',
+    'iam.permission.select.company.placeholder': 'Search and select a company',
+    'iam.permission.action.whitelist': 'Action Whitelist',
+    'iam.permission.no.actions.for.company': 'No actions available for this company',
+    'iam.tooltip.selected': 'Selected',
+    'iam.tooltip.click.to.remove': 'Click to remove from company whitelist',
+    'iam.tooltip.click.to.add': 'Click to add to company whitelist',
+    'iam.permission.requires': 'requires',
+    'iam.permission.prerequisite.validation.failed': 'Prerequisite Validation Failed',
+    'iam.permission.prerequisite.error.message': 'The following actions have unmet prerequisites:',
+    'iam.permission.auto.select.required': 'Auto-select Required',
+    'iam.permission.actions.selected': 'Actions Selected',
+    'iam.permission.auto.selected.prerequisites': 'Required prerequisites have been auto-selected. Click Save to apply changes.',
+    'iam.permission.changes.reverted': 'Changes Reverted',
+    'iam.permission.selection.reverted': 'Selection has been reverted to the initial state.',
+    // components/user-role-selector.component.ts
+    'iam.permission.role.assignments': 'Role Assignments',
+    'iam.permission.roles.available': '{{count}} roles available',
+    'iam.pagination.roles.template': 'Showing {first} to {last} of {totalRecords} roles',
+    'iam.permission.no.roles.available': 'No roles available',
+    'iam.permission.no.roles.for.user': 'No roles available for this user',
+    'iam.tooltip.click.to.remove.role.from.user': 'Click to remove role',
+    'iam.tooltip.click.to.assign.role.to.user': 'Click to assign role to user',
+    // services/action-permission-logic.service.ts
+    'iam.logic.unknown.action': 'Unknown Action',
+    'iam.logic.validation.failed': 'Validation Failed',
+    'iam.logic.validation.failed.message': 'The following actions have unmet prerequisites:',
+    'iam.logic.validation.failed.prompt': 'Would you like to:',
+    'iam.logic.auto.fix': 'Auto-fix (Remove Invalid)',
+    'iam.logic.invalid.actions.removed': 'Invalid Actions Removed',
+    'iam.logic.removed.actions.detail': 'Removed {{count}} action(s) with unmet prerequisites. You can now save.',
+    'iam.logic.save.cancelled': 'Save Cancelled',
+    'iam.logic.fix.prerequisites.manually': 'Please fix the prerequisites manually before saving',
+    'iam.logic.prerequisites.satisfied': '[OK] Prerequisites Satisfied',
+    'iam.logic.all.required.selected': 'All required actions are already selected.\nYou can safely add this action.',
+    'iam.logic.prerequisites.required': 'Prerequisites Required ({{count}} missing)',
+    'iam.logic.click.to.auto.select': 'Click to auto-select required actions',
+    'iam.logic.select.action.label': 'Select Action',
+    'iam.logic.auto.select.actions': 'Auto-select Actions',
+    'iam.logic.action.selected.detail': 'Action selected successfully (prerequisites already satisfied)',
+    'iam.logic.auto.selected.detail': 'Automatically selected {{count}} action(s) including prerequisites',
+    'iam.logic.minimum.required': ' (minimum required)',
+    'iam.logic.auto.select.prompt': 'Auto-select will choose {{count}} action(s){{suffix}}.',
+    'iam.logic.missing.prerequisites': 'Missing Prerequisites',
+    'iam.logic.requires.conditions': 'requires the following conditions to be satisfied:',
+    'iam.logic.would.you.continue': 'Would you like to continue?',
+    'iam.logic.actions.selected.summary': 'Actions Selected',
+    'iam.logic.selection.cancelled': 'Selection Cancelled',
+    'iam.logic.action.not.added': 'Action not added to whitelist',
+    'iam.logic.required.by.actions': 'is required by the following action(s):',
+    'iam.logic.alternatives.available': 'Alternative options available:',
+    'iam.logic.switch.to.alternatives': 'Would you like to automatically switch to alternatives?',
+    'iam.logic.remove.dependents': 'Removing this will also remove the dependent action(s).',
+    'iam.logic.dependency.warning': 'Dependency Warning',
+    'iam.logic.use.alternatives': 'Use Alternatives',
+    'iam.logic.remove.all': 'Remove All',
+    'iam.logic.alternatives.applied': 'Alternatives Applied',
+    'iam.logic.switched.to.alternatives': 'Automatically switched to alternative action(s)',
+    'iam.logic.actions.removed': 'Actions Removed',
+    'iam.logic.removed.with.dependents': 'Removed {{name}} and {{count}} dependent action(s)',
+    'iam.logic.cancelled': 'Cancelled',
+    'iam.logic.no.changes.made': 'No changes made',
+    'iam.logic.satisfied': '(satisfied)',
+    'iam.logic.missing': '(missing)',
+    'iam.logic.invalid.node': 'Invalid logic node',
+    'iam.logic.invalid': '(invalid)',
+};
+
+class RoleApiService extends ApiResourceService {
+    constructor() {
+        super('roles', 'iam');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RoleApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RoleApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RoleApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class ActionApiService extends ApiResourceService {
+    appConfig = inject(APP_CONFIG);
+    constructor() {
+        super('actions', 'iam');
+    }
+    /** Get actions filtered by company whitelist for permission assignment */
+    getActionsForPermission() {
+        const iamBaseUrl = getServiceUrl(this.appConfig, 'iam');
+        return this.http.post(`${iamBaseUrl}/actions/tree-for-permission`, {});
+    }
+    /** Get actions in hierarchical tree structure */
+    getTree(search, isActive, withDeleted) {
+        const body = {};
+        if (search?.trim())
+            body.search = search.trim();
+        if (isActive !== undefined)
+            body.isActive = isActive;
+        if (withDeleted !== undefined)
+            body.withDeleted = withDeleted;
+        const iamBaseUrl = getServiceUrl(this.appConfig, 'iam');
+        return this.http.post(`${iamBaseUrl}/actions/tree`, body);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ActionApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ActionApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ActionApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+function extractRequiredActionIds(logic) {
+    const actionIds = new Set();
+    if (logic) {
+        collectActionIds(logic, actionIds);
+    }
+    return actionIds;
+}
+function collectActionIds(node, actionIds) {
+    if (node.type === 'action' && node.actionId) {
+        actionIds.add(node.actionId);
+    }
+    else if (node.type === 'group' && node.children) {
+        node.children.forEach((child) => collectActionIds(child, actionIds));
+    }
+}
+function validateActionPrerequisites(action, selectedActionIds, allActions) {
+    if (!action.permissionLogic) {
+        return { valid: true, missingActions: [] };
+    }
+    const result = evaluateLogicNodeWithMissing(action.permissionLogic, selectedActionIds);
+    if (result.valid) {
+        return { valid: true, missingActions: [] };
+    }
+    const missingActions = allActions.filter((a) => a.id && result.missingActionIds.has(a.id));
+    return { valid: false, missingActions };
+}
+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]) };
+    }
+    if (node.type === 'group' && node.children?.length) {
+        const operator = node.operator || 'AND';
+        if (operator === 'AND') {
+            const missingIds = new Set();
+            let allValid = true;
+            for (const child of node.children) {
+                const childResult = evaluateLogicNodeWithMissing(child, selectedActionIds);
+                if (!childResult.valid) {
+                    allValid = false;
+                    childResult.missingActionIds.forEach((id) => missingIds.add(id));
+                }
+            }
+            return { valid: allValid, missingActionIds: missingIds };
+        }
+        // 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 };
+    }
+    return { valid: true, missingActionIds: new Set() };
+}
+
+/** Shared service for smart dependency management across action selectors */
+class ActionPermissionLogicService {
+    confirmationService = inject(ConfirmationService);
+    messageService = inject(MessageService);
+    translateAdapter = inject(TranslateService, {
+        optional: true,
+    });
+    t(key, variables) {
+        return this.translateAdapter?.translate(key, variables) ?? key;
+    }
+    /** 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 = this.getSelectedIds(currentSelection);
+            const validationResult = validateActionPrerequisites(action, selectedActionIds, allActions);
+            if (!validationResult.valid) {
+                // Store previous state
+                const previousState = { ...currentSelection };
+                // Temporarily check the box
+                const tempMap = { ...currentSelection };
+                tempMap[action.id] = true;
+                onUpdate(tempMap);
+                // CRITICAL: Recursively collect ALL missing prerequisites (deep scan)
+                const allMissingActions = this.getAllMissingPrerequisitesRecursive(action, currentSelection, allActions);
+                // Show prerequisite dialog with COMPLETE dependency chain
+                this.showPrerequisiteDialog(action, allMissingActions, currentSelection, allActions, previousState, onUpdate, onCancel);
+                return;
+            }
+        }
+        // All prerequisites satisfied, allow selection
+        const selMap = { ...currentSelection };
+        selMap[action.id] = true;
+        onUpdate(selMap);
+    }
+    /** Handle unchecking an action with dependency detection */
+    handleUncheck(action, currentSelection, allActions, onUpdate) {
+        const affectedActions = this.findActionsDependingOn(action.id, currentSelection, allActions);
+        if (affectedActions.length > 0) {
+            this.showDependencyDialog(action, affectedActions, currentSelection, allActions, onUpdate);
+            return;
+        }
+        // No dependencies, safe to uncheck
+        const selMap = { ...currentSelection };
+        selMap[action.id] = false;
+        onUpdate(selMap);
+    }
+    /** Check if an action has unmet prerequisites */
+    hasUnmetPrerequisites(action, currentSelection, allActions) {
+        const isSelected = currentSelection[action.id];
+        if (!isSelected || !action.permissionLogic) {
+            return false;
+        }
+        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 */
+    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 */
+    showValidationErrorDialog(invalidActions, currentSelection, allActions, onUpdate) {
+        const errorList = invalidActions
+            .map((action) => {
+            const selectedActionIds = this.getSelectedIds(currentSelection);
+            selectedActionIds.delete(action.id);
+            const validationResult = validateActionPrerequisites(action, selectedActionIds, allActions);
+            const sanitizedActionName = this.sanitizeHtml(action.name ?? this.t('iam.logic.unknown.action'));
+            const missingNames = validationResult.missingActions
+                .map((a) => this.sanitizeHtml(a.name ?? this.t('iam.logic.unknown.action')))
+                .join(', ');
+            return `<li><strong>${sanitizedActionName}</strong> requires: ${missingNames}</li>`;
+        })
+            .join('');
+        this.confirmationService.confirm({
+            header: this.t('iam.logic.validation.failed'),
+            message: `${this.t('iam.logic.validation.failed.message')}<br/><br/><ul class="pl-4">${errorList}</ul><br/>${this.t('iam.logic.validation.failed.prompt')}`,
+            icon: 'exclamation-triangle',
+            acceptLabel: this.t('iam.logic.auto.fix'),
+            rejectLabel: this.t('shared.cancel'),
+            acceptIcon: 'trash',
+            rejectIcon: 'times',
+            acceptButtonStyleClass: 'p-button-warning',
+            closeOnEscape: false,
+            closable: false,
+            accept: () => {
+                // Remove all invalid actions
+                const selMap = { ...currentSelection };
+                invalidActions.forEach((action) => {
+                    selMap[action.id] = false;
+                });
+                onUpdate(selMap);
+                this.messageService.add({
+                    severity: 'warn',
+                    summary: this.t('iam.logic.invalid.actions.removed'),
+                    detail: this.t('iam.logic.removed.actions.detail', {
+                        count: invalidActions.length,
+                    }),
+                });
+            },
+            reject: () => {
+                this.messageService.add({
+                    severity: 'info',
+                    summary: this.t('iam.logic.save.cancelled'),
+                    detail: this.t('iam.logic.fix.prerequisites.manually'),
+                });
+            },
+        });
+    }
+    /** Get prerequisite description for tooltip display */
+    getPrerequisiteTooltip(action, currentSelection, allActions) {
+        if (!action.permissionLogic) {
+            return '';
+        }
+        const selectedActionIds = this.getSelectedIds(currentSelection);
+        const validationResult = validateActionPrerequisites(action, selectedActionIds, allActions);
+        if (validationResult.valid) {
+            return `${this.t('iam.logic.prerequisites.satisfied')}\n\n${this.t('iam.logic.all.required.selected')}`;
+        }
+        const allMissingActions = this.getAllMissingPrerequisitesRecursive(action, currentSelection, allActions);
+        const logicTree = this.buildTooltipLogicTree(action.permissionLogic, currentSelection, allActions, 0);
+        const missingCount = allMissingActions.length;
+        const header = `⚠ ${this.t('iam.logic.prerequisites.required', { count: missingCount })}`;
+        const hint = `\n\n💡 ${this.t('iam.logic.click.to.auto.select')}`;
+        return `${header}\n\n${logicTree}${hint}`;
+    }
+    /** 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);
+    }
+    /** 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, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#x27;');
+    }
+    /** Recursively collect ALL missing prerequisites at all dependency levels */
+    getAllMissingPrerequisitesRecursive(action, currentSelection, allActions) {
+        if (!action.id)
+            return [];
+        const visited = new Set();
+        const allMissing = new Map();
+        const stack = new Set();
+        const collectMissing = (targetAction, depth = 0) => {
+            if (!targetAction.permissionLogic || !targetAction.id)
+                return;
+            if (depth > 50) {
+                return;
+            }
+            if (visited.has(targetAction.id))
+                return;
+            if (stack.has(targetAction.id)) {
+                return;
+            }
+            visited.add(targetAction.id);
+            stack.add(targetAction.id);
+            const selectedActionIds = this.getSelectedIds(currentSelection);
+            const result = validateActionPrerequisites(targetAction, selectedActionIds, allActions);
+            if (!result.valid) {
+                result.missingActions.forEach((missingAction) => {
+                    if (missingAction.id && missingAction.id !== action.id) {
+                        allMissing.set(missingAction.id, missingAction);
+                        collectMissing(missingAction, depth + 1);
+                    }
+                });
+            }
+            stack.delete(targetAction.id);
+        };
+        collectMissing(action);
+        return Array.from(allMissing.values());
+    }
+    showPrerequisiteDialog(action, missingActions, currentSelection, allActions, previousState, onUpdate, onCancel) {
+        const logicMessage = action.permissionLogic
+            ? this.buildLogicMessage(action.permissionLogic, missingActions, allActions, currentSelection)
+            : this.buildSimpleMessage(missingActions);
+        const actionsToSelect = action.permissionLogic
+            ? this.calculateSmartSelection(action.permissionLogic, missingActions, currentSelection, allActions)
+            : missingActions;
+        const selectionCount = actionsToSelect.length;
+        const sanitizedActionName = this.sanitizeHtml(action.name ?? this.t('iam.logic.unknown.action'));
+        const acceptLabel = selectionCount === 0
+            ? this.t('iam.logic.select.action.label')
+            : this.t('iam.logic.auto.select.actions');
+        const detailMessage = selectionCount === 0
+            ? this.t('iam.logic.action.selected.detail')
+            : this.t('iam.logic.auto.selected.detail', { count: selectionCount });
+        const suffix = selectionCount < missingActions.length
+            ? this.t('iam.logic.minimum.required')
+            : '';
+        const autoSelectPrompt = this.t('iam.logic.auto.select.prompt', {
+            count: selectionCount,
+            suffix,
+        });
+        this.confirmationService.confirm({
+            header: this.t('iam.logic.missing.prerequisites'),
+            message: `<strong>${sanitizedActionName}</strong> ${this.t('iam.logic.requires.conditions')}<br/><br/>${logicMessage}<br/><br/><strong>${autoSelectPrompt}</strong><br/>${this.t('iam.logic.would.you.continue')}`,
+            icon: 'exclamation-triangle',
+            acceptLabel,
+            rejectLabel: this.t('shared.cancel'),
+            acceptIcon: 'check',
+            rejectIcon: 'times',
+            closeOnEscape: false,
+            closable: false,
+            accept: () => {
+                const selMap = { ...currentSelection };
+                selMap[action.id] = true;
+                actionsToSelect.forEach((a) => {
+                    selMap[a.id] = true;
+                });
+                onUpdate(selMap);
+                this.messageService.add({
+                    severity: 'info',
+                    summary: this.t('iam.logic.actions.selected.summary'),
+                    detail: detailMessage,
+                });
+            },
+            reject: () => {
+                onCancel(previousState);
+                this.messageService.add({
+                    severity: 'info',
+                    summary: this.t('iam.logic.selection.cancelled'),
+                    detail: this.t('iam.logic.action.not.added'),
+                });
+            },
+        });
+    }
+    showDependencyDialog(action, affectedActions, currentSelection, _allActions, onUpdate) {
+        if (!action.id)
+            return;
+        const alternatives = this.findAlternatives(action.id, affectedActions, currentSelection);
+        const sanitizedActionName = this.sanitizeHtml(action.name ?? this.t('iam.logic.unknown.action'));
+        let message = `<strong>${sanitizedActionName}</strong> ${this.t('iam.logic.required.by.actions')}<br/><br/><ul class="pl-4">`;
+        affectedActions.forEach((a) => {
+            const sanitizedName = this.sanitizeHtml(a.name ?? this.t('iam.logic.unknown.action'));
+            message += `<li>${sanitizedName}</li>`;
+        });
+        message += '</ul><br/>';
+        if (alternatives.length > 0) {
+            message += `<strong>${this.t('iam.logic.alternatives.available')}</strong><br/><br/>`;
+            message += `<em>${this.t('iam.logic.switch.to.alternatives')}</em>`;
+        }
+        else {
+            message += `<em>${this.t('iam.logic.remove.dependents')}</em><br/><br/>`;
+            message += this.t('iam.logic.would.you.continue');
+        }
+        this.confirmationService.confirm({
+            header: this.t('iam.logic.dependency.warning'),
+            message,
+            icon: 'exclamation-triangle',
+            acceptLabel: alternatives.length > 0
+                ? this.t('iam.logic.use.alternatives')
+                : this.t('iam.logic.remove.all'),
+            rejectLabel: this.t('shared.cancel'),
+            acceptIcon: 'check',
+            rejectIcon: 'times',
+            closeOnEscape: false,
+            closable: false,
+            accept: () => {
+                const selMap = { ...currentSelection };
+                if (alternatives.length > 0) {
+                    // Apply alternatives
+                    alternatives.forEach(({ alternativeId }) => {
+                        selMap[alternativeId] = true;
+                    });
+                    selMap[action.id] = false;
+                    this.messageService.add({
+                        severity: 'success',
+                        summary: this.t('iam.logic.alternatives.applied'),
+                        detail: this.t('iam.logic.switched.to.alternatives'),
+                    });
+                }
+                else {
+                    // Remove action and all dependents
+                    selMap[action.id] = false;
+                    affectedActions.forEach((a) => {
+                        selMap[a.id] = false;
+                    });
+                    this.messageService.add({
+                        severity: 'warn',
+                        summary: this.t('iam.logic.actions.removed'),
+                        detail: this.t('iam.logic.removed.with.dependents', {
+                            name: action.name ?? '',
+                            count: affectedActions.length,
+                        }),
+                    });
+                }
+                onUpdate(selMap);
+            },
+            reject: () => {
+                this.messageService.add({
+                    severity: 'info',
+                    summary: this.t('iam.logic.cancelled'),
+                    detail: this.t('iam.logic.no.changes.made'),
+                });
+            },
+        });
+    }
+    findActionsDependingOn(actionId, currentSelection, allActions) {
+        const selectedActions = allActions.filter((a) => currentSelection[a.id] && a.id !== actionId);
+        return selectedActions.filter((action) => {
+            if (!action.permissionLogic)
+                return false;
+            return this.doesLogicDependOn(action.permissionLogic, actionId);
+        });
+    }
+    doesLogicDependOn(node, targetActionId) {
+        if (node.type === 'action') {
+            return node.actionId === targetActionId;
+        }
+        if (node.type === 'group' && node.children) {
+            return node.children.some((child) => this.doesLogicDependOn(child, targetActionId));
+        }
+        return false;
+    }
+    findAlternatives(removingActionId, affectedActions, currentSelection) {
+        const alternatives = [];
+        for (const affectedAction of affectedActions) {
+            if (!affectedAction.permissionLogic)
+                continue;
+            const alternative = this.findAlternativeInLogic(affectedAction.permissionLogic, removingActionId, currentSelection);
+            if (alternative) {
+                alternatives.push({ alternativeId: alternative });
+            }
+        }
+        return alternatives;
+    }
+    findAlternativeInLogic(node, removingActionId, currentSelection) {
+        if (node.type === 'group' && node.operator === 'OR' && node.children) {
+            const hasRemoving = node.children.some((child) => child.type === 'action' && child.actionId === removingActionId);
+            if (hasRemoving) {
+                for (const child of node.children) {
+                    if (child.type === 'action' &&
+                        child.actionId &&
+                        child.actionId !== removingActionId &&
+                        !currentSelection[child.actionId]) {
+                        return child.actionId;
+                    }
+                }
+            }
+        }
+        if (node.type === 'group' && node.children) {
+            for (const child of node.children) {
+                const alternative = this.findAlternativeInLogic(child, removingActionId, currentSelection);
+                if (alternative)
+                    return alternative;
+            }
+        }
+        return null;
+    }
+    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 = this.getSelectedIds(currentSelection);
+        const requiredIds = this.findRequiredActionIds(logic, missingIds, selectedIds);
+        return Array.from(requiredIds)
+            .map((id) => actionMap.get(id))
+            .filter((a) => !!a);
+    }
+    findRequiredActionIds(node, missingIds, selectedIds) {
+        if (node.type === 'action' && node.actionId) {
+            if (missingIds.has(node.actionId)) {
+                return new Set([node.actionId]);
+            }
+            return new Set();
+        }
+        if (node.type === 'group' && node.children && node.children.length > 0) {
+            const operator = node.operator || 'AND';
+            if (operator === 'AND') {
+                const required = new Set();
+                for (const child of node.children) {
+                    const childRequired = this.findRequiredActionIds(child, missingIds, selectedIds);
+                    childRequired.forEach((id) => required.add(id));
+                }
+                return required;
+            }
+            else {
+                let minRequired = null;
+                let minSize = Infinity;
+                for (const child of node.children) {
+                    const childRequired = this.findRequiredActionIds(child, missingIds, selectedIds);
+                    if (childRequired.size === 0) {
+                        return new Set();
+                    }
+                    if (childRequired.size < minSize) {
+                        minSize = childRequired.size;
+                        minRequired = childRequired;
+                    }
+                }
+                return minRequired || new Set();
+            }
+        }
+        return new Set();
+    }
+    buildSimpleMessage(missingActions) {
+        return `<ul class="pl-4">${missingActions.map((a) => `<li>${this.sanitizeHtml(a.name ?? this.t('iam.logic.unknown.action'))}</li>`).join('')}</ul>`;
+    }
+    formatLogicNode(node, selectedIds, actionMap, depth) {
+        const indent = '&nbsp;&nbsp;&nbsp;&nbsp;'.repeat(depth);
+        if (node.type === 'action' && node.actionId) {
+            const action = actionMap.get(node.actionId);
+            const actionName = this.sanitizeHtml(action?.name || this.t('iam.logic.unknown.action'));
+            const isSelected = selectedIds.has(node.actionId);
+            if (isSelected) {
+                return `${indent}<span style="color: #10b981; font-weight: 500;">✓ ${actionName}</span> <em style="color: #059669;">${this.t('iam.logic.satisfied')}</em>`;
+            }
+            else {
+                return `${indent}<span style="color: #ef4444;">✗ ${actionName}</span> <em style="color: #dc2626;">${this.t('iam.logic.missing')}</em>`;
+            }
+        }
+        if (node.type === 'group' && node.children) {
+            const operator = node.operator || 'AND';
+            const operatorColor = operator === 'AND' ? '#3b82f6' : '#8b5cf6';
+            const lines = [];
+            lines.push(`${indent}<strong style="color: ${operatorColor};">${operator}</strong> <span style="color: #6b7280;">(${node.children.length} condition${node.children.length !== 1 ? 's' : ''})</span>`);
+            node.children.forEach((child, index) => {
+                const childHtml = this.formatLogicNode(child, selectedIds, actionMap, depth + 1);
+                lines.push(childHtml);
+                if (node.children && index < node.children.length - 1) {
+                    lines.push(`${indent}&nbsp;&nbsp;<em style="color: ${operatorColor}; font-size: 0.75rem;">${operator.toLowerCase()}</em>`);
+                }
+            });
+            return lines.join('<br/>');
+        }
+        return `${indent}<em style="color: #9ca3af;">${this.t('iam.logic.invalid.node')}</em>`;
+    }
+    /** Build clean text-based logic tree for tooltips */
+    buildTooltipLogicTree(node, currentSelection, allActions, depth) {
+        const indent = '  '.repeat(depth);
+        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);
+            const actionName = action?.name || this.t('iam.logic.unknown.action');
+            const isSelected = selectedIds.has(node.actionId);
+            if (isSelected) {
+                return `${indent}✓ ${actionName}`;
+            }
+            else {
+                return `${indent}✗ ${actionName}`;
+            }
+        }
+        if (node.type === 'group' && node.children) {
+            const operator = node.operator || 'AND';
+            const lines = [];
+            lines.push(`${indent}${operator}:`);
+            node.children.forEach((child, index) => {
+                const childText = this.buildTooltipLogicTree(child, currentSelection, allActions, depth + 1);
+                lines.push(childText);
+                if (node.children &&
+                    index < node.children.length - 1 &&
+                    operator === 'OR') {
+                    lines.push(`${indent}  ${operator.toLowerCase()}`);
+                }
+            });
+            return lines.join('\n');
+        }
+        return `${indent}${this.t('iam.logic.invalid')}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ActionPermissionLogicService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ActionPermissionLogicService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ActionPermissionLogicService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class PermissionApiService extends BaseApiService {
+    constructor() {
+        super('iam');
+    }
+    assignUserActions(data) {
+        return this.http.post(this.getUrl('permissions/user-actions/assign'), data);
+    }
+    getUserActions(userId, query) {
+        return this.http.post(this.getUrl('permissions/get-user-actions'), { userId, branchId: query?.branchId });
+    }
+    assignUserRoles(data) {
+        return this.http.post(this.getUrl('permissions/user-roles/assign'), data);
+    }
+    getUserRoles(userId, query) {
+        return this.http.post(this.getUrl('permissions/get-user-roles'), { userId, branchId: query?.branchId });
+    }
+    assignRoleActions(data) {
+        return this.http.post(this.getUrl('permissions/role-actions/assign'), data);
+    }
+    getRoleActions(roleId) {
+        return this.http.post(this.getUrl('permissions/get-role-actions'), { roleId });
+    }
+    assignCompanyActions(data) {
+        return this.http.post(this.getUrl('permissions/company-actions/assign'), data);
+    }
+    getCompanyActions(companyId) {
+        return this.http.post(this.getUrl('permissions/get-company-actions'), { companyId });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PermissionApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PermissionApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PermissionApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * My Permissions API Service
+ * Get current user's complete permissions
+ * Endpoint: POST /iam/permissions/my-permissions
+ * Always enabled
+ */
+class MyPermissionsApiService {
+    http = inject(HttpClient);
+    appConfig = inject(APP_CONFIG);
+    baseUrl = `${getServiceUrl(this.appConfig, 'iam')}/permissions`;
+    /**
+     * Get current user's complete permissions
+     * POST /iam/permissions/my-permissions
+     * Returns menus, frontend actions, and cached endpoint count
+     * @param dto Optional filter by parent codes (only affects frontend actions)
+     */
+    getMyPermissions(dto = {}) {
+        return this.http.post(`${this.baseUrl}/my-permissions`, dto);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MyPermissionsApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MyPermissionsApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MyPermissionsApiService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class PermissionStateService {
+    permissionApi = inject(MyPermissionsApiService);
+    permissionValidator = inject(PermissionValidatorService);
+    _permissions = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_permissions" }] : /* istanbul ignore next */ []));
+    permissions = this._permissions.asReadonly();
+    _isLoading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isLoading" }] : /* istanbul ignore next */ []));
+    isLoading = this._isLoading.asReadonly();
+    loadPermissions(dto) {
+        this._isLoading.set(true);
+        return this.permissionApi.getMyPermissions(dto).pipe(tap((response) => {
+            this._permissions.set(response.data ?? null);
+            this._isLoading.set(false);
+            const actionCodes = response.data?.frontendActions.map((a) => a.code) ?? [];
+            this.permissionValidator.setPermissions(actionCodes);
+        }), catchError(() => {
+            this._permissions.set(null);
+            this._isLoading.set(false);
+            this.permissionValidator.clearPermissions();
+            return of(void 0);
+        }), map(() => void 0));
+    }
+    isLoaded() {
+        return this._permissions() !== null && this.permissionValidator.isPermissionsLoaded();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PermissionStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PermissionStateService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PermissionStateService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+// Role services
+
+function toLogicNode(node) {
+    if (node.type === 'action') {
+        return { type: 'action', actionId: node.actionId };
+    }
+    return {
+        type: 'group',
+        operator: node.operator,
+        children: node.children?.map(toLogicNode) ?? [],
+    };
+}
+function toBuilderNode(node) {
+    if (node.type === 'action') {
+        return createActionNode(node.actionId);
+    }
+    return {
+        ...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, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "logic" }] : /* istanbul ignore next */ []));
+    actions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+    logicChange = output();
+    /** Internal builder tree state (private writable + public readonly pattern) */
+    _builderTree = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_builderTree" }] : /* istanbul ignore next */ []));
+    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));
+            }
+        });
+    }
+    initializeLogic() {
+        this.updateTreeAndEmit(createGroupNode());
+    }
+    clearLogic() {
+        this._builderTree.set(null);
+        this.logicChange.emit(null);
+    }
+    toggleOperator(nodeId) {
+        this.updateNode(nodeId, (node) => ({
+            ...node,
+            operator: node.operator === 'AND' ? 'OR' : 'AND',
+        }));
+    }
+    addChildNode(parentId, type) {
+        const newNode = type === 'group' ? createGroupNode() : createActionNode();
+        this.updateNode(parentId, (node) => ({
+            ...node,
+            children: [...(node.children || []), newNode],
+        }));
+    }
+    removeNode(nodeId) {
+        const tree = this._builderTree();
+        if (!tree)
+            return;
+        if (tree.id === nodeId) {
+            this.clearLogic();
+            return;
+        }
+        this.updateTreeAndEmit(this.removeNodeFromTree(tree, nodeId));
+    }
+    updateActionId(nodeId, actionId) {
+        this.updateNode(nodeId, (node) => ({ ...node, actionId }));
+    }
+    /** Updates a node in the tree and emits the change */
+    updateNode(nodeId, updater) {
+        const tree = this._builderTree();
+        if (!tree)
+            return;
+        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;
+        return {
+            ...node,
+            children: node.children.map((child) => this.updateNodeInTree(child, targetId, updater)),
+        };
+    }
+    removeNodeFromTree(node, targetId) {
+        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: "22.0.6", ngImport: i0, type: LogicBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: LogicBuilderComponent, isStandalone: true, selector: "lib-logic-builder", inputs: { logic: { classPropertyName: "logic", publicName: "logic", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { logicChange: "logicChange" }, ngImport: i0, template: `
+    <div class="logic-builder">
+      <div class="flex justify-between items-center mb-3">
+        <h4 class="text-sm font-semibold m-0">
+          {{ 'iam.logic.title' | translate }}
+        </h4>
+        @if (!builderLogic()) {
+          <button
+            fButton
+            size="small"
+            (click)="initializeLogic()"
+          >
+            <ui-icon pButtonIcon name="plus"></ui-icon>
+            <span pButtonLabel>{{ 'iam.logic.add.logic' | translate }}</span>
+          </button>
+        } @else {
+          <button
+            fButton
+            size="small"
+            severity="danger"
+            [outlined]="true"
+            (click)="clearLogic()"
+          >
+            <ui-icon pButtonIcon name="trash"></ui-icon>
+            <span pButtonLabel>{{ 'iam.logic.clear.logic' | translate }}</span>
+          </button>
+        }
+      </div>
+
+      @if (builderLogic()) {
+        <div class="border border-surface rounded p-3 bg-surface-50">
+          <div class="mb-3 text-sm text-muted-color">
+            {{ 'iam.logic.description' | translate }}
+          </div>
+
+          <!-- Root Node -->
+          <div class="text-sm bg-surface-0 rounded border border-surface">
+            <ng-container
+              *ngTemplateOutlet="
+                nodeTemplate;
+                context: { $implicit: builderLogic()!, depth: 0 }
+              "
+            ></ng-container>
+          </div>
+        </div>
+      }
+    </div>
+
+    <!-- Recursive Node Template -->
+    <ng-template #nodeTemplate let-node let-depth="depth">
+      <div
+        class="p-3 border-b border-surface"
+        [class.bg-surface-0]="depth % 2 === 0"
+        [class.bg-surface-50]="depth % 2 !== 0"
+      >
+        <div class="flex items-center gap-3 mb-2">
+          <span
+            class="node-type"
+            [class.group]="node.type === 'group'"
+            [class.action]="node.type === 'action'"
+            >{{ node.type.toUpperCase() }}</span
+          >
+
+          <div class="flex-1 flex items-center gap-2">
+            @if (node.type === 'group') {
+              <!-- Group: show operator toggle -->
+              <span
+                class="operator-badge"
+                [class.and]="node.operator === 'AND'"
+                [class.or]="node.operator !== 'AND'"
+                (click)="toggleOperator(node.id)"
+                [fTooltip]="'iam.logic.click.to.toggle' | translate"
+              >
+                {{ node.operator }}
+              </span>
+              <span class="text-muted-color text-xs"
+                >({{
+                  'iam.logic.conditions'
+                    | translate: { count: node.children?.length || 0 }
+                }})</span
+              >
+            }
+
+            @if (node.type === 'action') {
+              <f-select
+                class="flex-1"
+                [options]="actions()"
+                optionLabel="name"
+                optionValue="id"
+                [ngModel]="node.actionId"
+                (ngModelChange)="updateActionId(node.id, $event)"
+                [placeholder]="'iam.logic.select.action' | translate"
+                [filter]="true"
+              />
+            }
+          </div>
+
+          <div class="flex gap-1">
+            <button
+              fButton
+              [text]="true"
+              severity="danger"
+              size="small"
+              (click)="removeNode(node.id)"
+              [fTooltip]="'shared.remove' | translate"
+            >
+              <ui-icon pButtonIcon name="trash"></ui-icon>
+            </button>
+          </div>
+        </div>
+
+        <!-- Children for group nodes -->
+        @if (
+          node.type === 'group' && node.children && node.children.length > 0
+        ) {
+          <div class="ml-5 mt-2 pl-3 border-l-2 border-surface">
+            @for (child of node.children; track child.id) {
+              <ng-container
+                *ngTemplateOutlet="
+                  nodeTemplate;
+                  context: { $implicit: child, depth: depth + 1 }
+                "
+              ></ng-container>
+            }
+          </div>
+        }
+
+        <!-- Add child buttons for group nodes -->
+        @if (node.type === 'group') {
+          <div
+            class="mt-3 p-3 bg-surface-50 rounded border border-dashed border-surface"
+          >
+            <div class="text-xs font-semibold text-muted-color mb-2">
+              {{ 'iam.logic.add.condition' | translate }}
+            </div>
+            <div class="flex gap-2 flex-wrap">
+              <button
+                fButton
+                size="small"
+                [outlined]="true"
+                (click)="addChildNode(node.id, 'group')"
+              >
+                <ui-icon pButtonIcon name="sitemap"></ui-icon>
+                <span pButtonLabel>{{ 'iam.logic.group' | translate }}</span>
+              </button>
+              <button
+                fButton
+                size="small"
+                severity="success"
+                [outlined]="true"
+                (click)="addChildNode(node.id, 'action')"
+              >
+                <ui-icon pButtonIcon name="bolt"></ui-icon>
+                <span pButtonLabel>{{ 'iam.logic.action' | translate }}</span>
+              </button>
+            </div>
+          </div>
+        }
+      </div>
+    </ng-template>
+  `, isInline: true, styles: [":host{display:block}.node-type{display:inline-flex;align-items:center;padding:.25rem .5rem;border-radius:.25rem;font-weight:600;font-size:.75rem;text-transform:uppercase}.node-type.group{background-color:var(--f-blue-100, #dbeafe);color:var(--f-blue-700, #1e40af)}.node-type.action{background-color:var(--f-green-100, #d1fae5);color:var(--f-green-700, #065f46)}:host-context(.p-dark) .node-type.group{background-color:#3b82f633;color:var(--f-blue-400, #60a5fa)}:host-context(.p-dark) .node-type.action{background-color:#22c55e33;color:var(--f-green-400, #4ade80)}.operator-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:9999px;font-weight:600;font-size:.75rem;cursor:pointer;transition:opacity .2s}.operator-badge.and{background-color:var(--f-yellow-100, #fef3c7);color:var(--f-yellow-700, #92400e)}.operator-badge.or{background-color:var(--f-indigo-100, #e0e7ff);color:var(--f-indigo-700, #3730a3)}:host-context(.p-dark) .operator-badge.and{background-color:#eab30833;color:var(--f-yellow-400, #facc15)}:host-context(.p-dark) .operator-badge.or{background-color:#6366f133;color:var(--f-indigo-400, #818cf8)}.operator-badge:hover{opacity:.8}.action-select{background-color:var(--f-surface-0, #ffffff);color:var(--f-text-color, #1f2937)}:host-context(.p-dark) .action-select{background-color:var(--f-surface-900, #1f2937);color:var(--f-text-color, #f9fafb)}.action-select:focus{outline:none;border-color:var(--f-primary-color, #3b82f6)}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i2.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i2.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "filterBy", "filterMatchMode", "filterLocale", "filterPlaceholder", "resetFilterOnHide", "autofocusFilter", "emptyMessage", "emptyFilterMessage", "showClear", "loading", "loadingIcon", "dropdownIcon", "clearIcon", "inputId", "invalid", "touched", "styleClass", "style", "editable", "readonly", "autofocus", "checkmark", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "directive", type: i2.TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "positionStyle", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay", "life", "autoHide", "positionTop", "positionLeft", "escape"] }, { kind: "component", type: i2.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LogicBuilderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-logic-builder', imports: [AngularModule, UiModule, TranslatePipe], template: `
+    <div class="logic-builder">
+      <div class="flex justify-between items-center mb-3">
+        <h4 class="text-sm font-semibold m-0">
+          {{ 'iam.logic.title' | translate }}
+        </h4>
+        @if (!builderLogic()) {
+          <button
+            fButton
+            size="small"
+            (click)="initializeLogic()"
+          >
+            <ui-icon pButtonIcon name="plus"></ui-icon>
+            <span pButtonLabel>{{ 'iam.logic.add.logic' | translate }}</span>
+          </button>
+        } @else {
+          <button
+            fButton
+            size="small"
+            severity="danger"
+            [outlined]="true"
+            (click)="clearLogic()"
+          >
+            <ui-icon pButtonIcon name="trash"></ui-icon>
+            <span pButtonLabel>{{ 'iam.logic.clear.logic' | translate }}</span>
+          </button>
+        }
+      </div>
+
+      @if (builderLogic()) {
+        <div class="border border-surface rounded p-3 bg-surface-50">
+          <div class="mb-3 text-sm text-muted-color">
+            {{ 'iam.logic.description' | translate }}
+          </div>
+
+          <!-- Root Node -->
+          <div class="text-sm bg-surface-0 rounded border border-surface">
+            <ng-container
+              *ngTemplateOutlet="
+                nodeTemplate;
+                context: { $implicit: builderLogic()!, depth: 0 }
+              "
+            ></ng-container>
+          </div>
+        </div>
+      }
+    </div>
+
+    <!-- Recursive Node Template -->
+    <ng-template #nodeTemplate let-node let-depth="depth">
+      <div
+        class="p-3 border-b border-surface"
+        [class.bg-surface-0]="depth % 2 === 0"
+        [class.bg-surface-50]="depth % 2 !== 0"
+      >
+        <div class="flex items-center gap-3 mb-2">
+          <span
+            class="node-type"
+            [class.group]="node.type === 'group'"
+            [class.action]="node.type === 'action'"
+            >{{ node.type.toUpperCase() }}</span
+          >
+
+          <div class="flex-1 flex items-center gap-2">
+            @if (node.type === 'group') {
+              <!-- Group: show operator toggle -->
+              <span
+                class="operator-badge"
+                [class.and]="node.operator === 'AND'"
+                [class.or]="node.operator !== 'AND'"
+                (click)="toggleOperator(node.id)"
+                [fTooltip]="'iam.logic.click.to.toggle' | translate"
+              >
+                {{ node.operator }}
+              </span>
+              <span class="text-muted-color text-xs"
+                >({{
+                  'iam.logic.conditions'
+                    | translate: { count: node.children?.length || 0 }
+                }})</span
+              >
+            }
+
+            @if (node.type === 'action') {
+              <f-select
+                class="flex-1"
+                [options]="actions()"
+                optionLabel="name"
+                optionValue="id"
+                [ngModel]="node.actionId"
+                (ngModelChange)="updateActionId(node.id, $event)"
+                [placeholder]="'iam.logic.select.action' | translate"
+                [filter]="true"
+              />
+            }
+          </div>
+
+          <div class="flex gap-1">
+            <button
+              fButton
+              [text]="true"
+              severity="danger"
+              size="small"
+              (click)="removeNode(node.id)"
+              [fTooltip]="'shared.remove' | translate"
+            >
+              <ui-icon pButtonIcon name="trash"></ui-icon>
+            </button>
+          </div>
+        </div>
+
+        <!-- Children for group nodes -->
+        @if (
+          node.type === 'group' && node.children && node.children.length > 0
+        ) {
+          <div class="ml-5 mt-2 pl-3 border-l-2 border-surface">
+            @for (child of node.children; track child.id) {
+              <ng-container
+                *ngTemplateOutlet="
+                  nodeTemplate;
+                  context: { $implicit: child, depth: depth + 1 }
+                "
+              ></ng-container>
+            }
+          </div>
+        }
+
+        <!-- Add child buttons for group nodes -->
+        @if (node.type === 'group') {
+          <div
+            class="mt-3 p-3 bg-surface-50 rounded border border-dashed border-surface"
+          >
+            <div class="text-xs font-semibold text-muted-color mb-2">
+              {{ 'iam.logic.add.condition' | translate }}
+            </div>
+            <div class="flex gap-2 flex-wrap">
+              <button
+                fButton
+                size="small"
+                [outlined]="true"
+                (click)="addChildNode(node.id, 'group')"
+              >
+                <ui-icon pButtonIcon name="sitemap"></ui-icon>
+                <span pButtonLabel>{{ 'iam.logic.group' | translate }}</span>
+              </button>
+              <button
+                fButton
+                size="small"
+                severity="success"
+                [outlined]="true"
+                (click)="addChildNode(node.id, 'action')"
+              >
+                <ui-icon pButtonIcon name="bolt"></ui-icon>
+                <span pButtonLabel>{{ 'iam.logic.action' | translate }}</span>
+              </button>
+            </div>
+          </div>
+        }
+      </div>
+    </ng-template>
+  `, styles: [":host{display:block}.node-type{display:inline-flex;align-items:center;padding:.25rem .5rem;border-radius:.25rem;font-weight:600;font-size:.75rem;text-transform:uppercase}.node-type.group{background-color:var(--f-blue-100, #dbeafe);color:var(--f-blue-700, #1e40af)}.node-type.action{background-color:var(--f-green-100, #d1fae5);color:var(--f-green-700, #065f46)}:host-context(.p-dark) .node-type.group{background-color:#3b82f633;color:var(--f-blue-400, #60a5fa)}:host-context(.p-dark) .node-type.action{background-color:#22c55e33;color:var(--f-green-400, #4ade80)}.operator-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:9999px;font-weight:600;font-size:.75rem;cursor:pointer;transition:opacity .2s}.operator-badge.and{background-color:var(--f-yellow-100, #fef3c7);color:var(--f-yellow-700, #92400e)}.operator-badge.or{background-color:var(--f-indigo-100, #e0e7ff);color:var(--f-indigo-700, #3730a3)}:host-context(.p-dark) .operator-badge.and{background-color:#eab30833;color:var(--f-yellow-400, #facc15)}:host-context(.p-dark) .operator-badge.or{background-color:#6366f133;color:var(--f-indigo-400, #818cf8)}.operator-badge:hover{opacity:.8}.action-select{background-color:var(--f-surface-0, #ffffff);color:var(--f-text-color, #1f2937)}:host-context(.p-dark) .action-select{background-color:var(--f-surface-900, #1f2937);color:var(--f-text-color, #f9fafb)}.action-select:focus{outline:none;border-color:var(--f-primary-color, #3b82f6)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { logic: [{ type: i0.Input, args: [{ isSignal: true, alias: "logic", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], logicChange: [{ type: i0.Output, args: ["logicChange"] }] } });
+
+function flattenTree(tree) {
+    if (!tree?.length)
+        return [];
+    const result = [];
+    const flatten = (nodes) => {
+        for (const node of nodes) {
+            result.push(node);
+            if (node.children?.length)
+                flatten(node.children);
+        }
+    };
+    flatten(tree);
+    return result;
+}
+function buildTreeFromFlat(flatList) {
+    if (!flatList?.length)
+        return [];
+    const itemMap = new Map();
+    const rootItems = [];
+    flatList.forEach((item) => {
+        if (item.id)
+            itemMap.set(item.id, { ...item, children: [] });
+    });
+    flatList.forEach((item) => {
+        if (!item.id)
+            return;
+        const node = itemMap.get(item.id);
+        if (!node)
+            return;
+        if (!item.parentId) {
+            rootItems.push(node);
+        }
+        else {
+            const parent = itemMap.get(item.parentId);
+            if (parent) {
+                parent.children.push(node);
+            }
+            else {
+                rootItems.push(node);
+            }
+        }
+    });
+    return rootItems;
+}
+function convertActionToTreeNode(actions) {
+    if (!actions?.length)
+        return [];
+    const convert = (action) => {
+        const { children, ...actionData } = action;
+        return {
+            data: actionData,
+            children: children?.map(convert) ?? [],
+            leaf: !children?.length,
+            expanded: false,
+        };
+    };
+    return actions.map(convert);
+}
+
+class BaseActionSelectorComponent {
+    permissionLogic = inject(ActionPermissionLogicService);
+    translateAdapter = inject(TranslateService, {
+        optional: true,
+    });
+    loading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    saving = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []));
+    _actions = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_actions" }] : /* istanbul ignore next */ []));
+    actions = this._actions.asReadonly();
+    _actionsTree = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_actionsTree" }] : /* istanbul ignore next */ []));
+    actionsTree = this._actionsTree.asReadonly();
+    _selectionMap = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_selectionMap" }] : /* istanbul ignore next */ []));
+    selectionMap = this._selectionMap.asReadonly();
+    _initialSelection = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_initialSelection" }] : /* istanbul ignore next */ []));
+    initialSelection = this._initialSelection.asReadonly();
+    treeNodes = computed(() => convertActionToTreeNode(this.actionsTree()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "treeNodes" }] : /* istanbul ignore next */ []));
+    allSelected = computed(() => {
+        const selMap = this.selectionMap();
+        const total = this.actions().length;
+        if (total === 0)
+            return false;
+        return Object.values(selMap).filter((v) => v).length === total;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
+    hasChanges = computed(() => {
+        const current = this.selectionMap();
+        const initial = this.initialSelection();
+        const currentKeys = Object.keys(current);
+        if (currentKeys.length !== Object.keys(initial).length)
+            return true;
+        return currentKeys.some((key) => current[key] !== initial[key]);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasChanges" }] : /* istanbul ignore next */ []));
+    actionsWithUnmetPrerequisites = computed(() => {
+        const selMap = this.selectionMap();
+        const allActions = this.actions();
+        const unmetSet = new Set();
+        for (const action of allActions) {
+            if (action.id &&
+                this.permissionLogic.hasUnmetPrerequisites(action, selMap, allActions)) {
+                unmetSet.add(action.id);
+            }
+        }
+        return unmetSet;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actionsWithUnmetPrerequisites" }] : /* istanbul ignore next */ []));
+    invalidActionsCount = computed(() => this.actionsWithUnmetPrerequisites().size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalidActionsCount" }] : /* istanbul ignore next */ []));
+    pendingAdd = computed(() => {
+        const current = this.selectionMap();
+        const initial = this.initialSelection();
+        return this.actions().filter((a) => current[a.id] && !initial[a.id]);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingAdd" }] : /* istanbul ignore next */ []));
+    pendingRemove = computed(() => {
+        const current = this.selectionMap();
+        const initial = this.initialSelection();
+        return this.actions().filter((a) => !current[a.id] && initial[a.id]);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingRemove" }] : /* istanbul ignore next */ []));
+    canSave = computed(() => this.hasChanges() && !this.saving() && this.invalidActionsCount() === 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canSave" }] : /* istanbul ignore next */ []));
+    translate(key, vars) {
+        return this.translateAdapter?.translate(key, vars) ?? key;
+    }
+    hasUnmetPrerequisites(action) {
+        return action.id
+            ? this.actionsWithUnmetPrerequisites().has(action.id)
+            : false;
+    }
+    getTooltip(action) {
+        const selMap = this.selectionMap();
+        const isCurrentlySelected = selMap[action.id];
+        if (action.permissionLogic) {
+            const prerequisiteInfo = this.permissionLogic.getPrerequisiteTooltip(action, selMap, this.actions());
+            if (prerequisiteInfo) {
+                const actionHint = isCurrentlySelected
+                    ? `\n\n---\n[${this.translate('shared.remove')}] ${this.translate('iam.tooltip.remove.action')}`
+                    : `\n\n---\n[${this.translate('shared.add')}] ${this.translate('iam.tooltip.add.action')}`;
+                return `${prerequisiteInfo}${actionHint}`;
+            }
+        }
+        return this.getDefaultTooltip(isCurrentlySelected);
+    }
+    onActionToggle(action, newValue) {
+        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));
+        }
+    }
+    toggleAll() {
+        this.setAllSelection(!this.allSelected());
+    }
+    selectAll() {
+        this.setAllSelection(true);
+    }
+    deselectAll() {
+        this.setAllSelection(false);
+    }
+    setAllSelection(value) {
+        this._selectionMap.set(this.buildSelectionMap(this.actions(), () => value));
+    }
+    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;
+    }
+    resetState() {
+        this._actionsTree.set([]);
+        this._actions.set([]);
+        this._selectionMap.set({});
+        this._initialSelection.set({});
+    }
+}
+
+class RoleActionSelectorComponent extends BaseActionSelectorComponent {
+    ROLE_ACTION_PERMISSIONS = ROLE_ACTION_PERMISSIONS;
+    destroyRef = inject(DestroyRef);
+    roleApi = inject(RoleApiService);
+    actionApi = inject(ActionApiService);
+    permissionApi = inject(PermissionApiService);
+    messageService = inject(MessageService);
+    selectedRoleId = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedRoleId" }] : /* istanbul ignore next */ []));
+    roles = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "roles" }] : /* istanbul ignore next */ []));
+    loadDataAbortController = null;
+    constructor() {
+        super();
+        this.destroyRef.onDestroy(() => {
+            this.loadDataAbortController?.abort();
+        });
+        this.loadRoles();
+        effect(() => {
+            const roleId = this.selectedRoleId();
+            this.loadDataAbortController?.abort();
+            if (roleId) {
+                this.loadDataAbortController = new AbortController();
+                this.onRoleChange(this.loadDataAbortController.signal).catch((err) => {
+                    if (err.name !== 'AbortError') {
+                        this.loading.set(false);
+                    }
+                });
+            }
+            else {
+                this.resetState();
+            }
+        });
+    }
+    getDefaultTooltip(isSelected) {
+        if (isSelected) {
+            return `[${this.translate('shared.assigned')}] ${this.translate('iam.tooltip.assigned.to.role')}\n\n[${this.translate('shared.remove')}] ${this.translate('iam.tooltip.click.to.remove.role')}`;
+        }
+        return `[${this.translate('shared.add')}] ${this.translate('iam.tooltip.click.to.assign.role')}`;
+    }
+    async loadRoles() {
+        try {
+            const response = await this.roleApi.getAll({
+                pagination: { currentPage: 0, pageSize: MAX_DROPDOWN_ITEMS },
+            });
+            this.roles.set(response?.data ?? []);
+        }
+        catch { }
+    }
+    async onRoleChange(signal) {
+        const roleId = this.selectedRoleId();
+        if (!roleId)
+            return;
+        this.loading.set(true);
+        try {
+            const actionsResponse = await firstValueFrom(this.actionApi.getActionsForPermission());
+            if (signal.aborted)
+                return;
+            const flatActions = (actionsResponse?.data ?? []).filter((a) => !!a.id);
+            const actionsTree = buildTreeFromFlat(flatActions);
+            this._actionsTree.set(actionsTree);
+            this._actions.set(flatActions);
+            const assignedResponse = await firstValueFrom(this.permissionApi.getRoleActions(roleId));
+            if (signal.aborted)
+                return;
+            const assignedIds = new Set((assignedResponse?.data || []).map((a) => a.actionId));
+            const selMap = this.buildSelectionMap(flatActions, (action) => assignedIds.has(action.id));
+            this._selectionMap.set(selMap);
+            this._initialSelection.set({ ...selMap });
+        }
+        finally {
+            if (!signal.aborted) {
+                this.loading.set(false);
+            }
+        }
+    }
+    async saveChanges() {
+        const roleId = this.selectedRoleId();
+        if (!roleId)
+            return;
+        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.buildPayloadItems();
+        if (items.length === 0)
+            return;
+        this.saving.set(true);
+        try {
+            const response = await firstValueFrom(this.permissionApi.assignRoleActions({ roleId, items }));
+            this.messageService.add({
+                severity: 'success',
+                summary: this.translate('shared.success'),
+                detail: response?.messageKey
+                    ? this.translate(response.messageKey, response.messageVariables)
+                    : response?.message,
+            });
+            this._initialSelection.set({ ...this.selectionMap() });
+        }
+        catch {
+        }
+        finally {
+            this.saving.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RoleActionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: RoleActionSelectorComponent, isStandalone: true, selector: "flusys-role-action-selector", usesInheritance: true, ngImport: i0, template: `
+    <div class="role-action-selector">
+      <div class="mb-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div>
+            <label class="block font-semibold mb-2">{{
+              'iam.permission.select.role' | translate
+            }}</label>
+            <f-select
+              [ngModel]="selectedRoleId()"
+              (ngModelChange)="selectedRoleId.set($event)"
+              [options]="roles()"
+              optionLabel="name"
+              optionValue="id"
+              [placeholder]="
+                'iam.permission.select.role.placeholder' | translate
+              "
+              [showClear]="true"
+              [filter]="true"
+              class="w-full"
+            />
+          </div>
+        </div>
+      </div>
+
+      @if (selectedRoleId()) {
+        @if (loading()) {
+          <div
+            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
+          >
+            <ui-icon name="loader-circle" spin class="text-primary text-5xl"></ui-icon>
+          </div>
+        }
+
+        @if (!loading() && actions().length > 0) {
+          <div class="surface-card p-4 rounded-border shadow-sm">
+            <div
+              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">
+                  {{ 'iam.permission.action.permissions' | translate }}
+                </h5>
+                <p class="text-sm text-muted-color m-0">
+                  {{
+                    'iam.permission.actions.available'
+                      | translate: { count: actions().length }
+                  }}
+                </p>
+              </div>
+              <div class="flex flex-wrap gap-2">
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="selectAll()"
+                >
+                  <ui-icon pButtonIcon name="check"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="deselectAll()"
+                >
+                  <ui-icon pButtonIcon name="times"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  *hasPermission="ROLE_ACTION_PERMISSIONS.ASSIGN"
+                  [disabled]="!canSave() || saving()"
+                  size="small"
+                  (click)="saveChanges()"
+                >
+                  @if (saving()) {
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                  } @else {
+                    <ui-icon pButtonIcon name="save"></ui-icon>
+                  }
+                  <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
+                </button>
+              </div>
+            </div>
+
+            @if (invalidActionsCount() > 0) {
+              <div class="validation-warning rounded-border p-3 mb-4">
+                <div class="flex items-start gap-2">
+                  <ui-icon name="exclamation-triangle" class="text-xl"></ui-icon>
+                  <div class="flex-1">
+                    <span class="font-semibold"
+                      >{{ 'iam.validation.warning.title' | translate }}:</span
+                    >
+                    <p class="text-sm mt-1 mb-0">
+                      {{
+                        (invalidActionsCount() > 1
+                          ? 'iam.validation.unmet.prerequisites.plural'
+                          : 'iam.validation.unmet.prerequisites.singular'
+                        ) | translate: { count: invalidActionsCount() }
+                      }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            }
+
+            <div class="overflow-x-auto -mx-4 sm:mx-0">
+              <f-treetable
+                [value]="treeNodes()"
+                dataKey="id"
+                [tableStyle]="{ 'min-width': '50rem' }"
+              >
+                <ng-template #header>
+                  <tr>
+                    <th class="w-12">
+                      <f-checkbox
+                        [ngModel]="allSelected()"
+                        [binary]="true"
+                        (ngModelChange)="toggleAll()"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
+                        tooltipPosition="top"
+                      />
+                    </th>
+                    <th>{{ 'shared.name' | translate }}</th>
+                    <th class="hidden md:table-cell">
+                      {{ 'shared.code' | translate }}
+                    </th>
+                    <th>{{ 'iam.action.type' | translate }}</th>
+                    <th class="hidden lg:table-cell">
+                      {{ 'iam.permission.requirements' | translate }}
+                    </th>
+                  </tr>
+                </ng-template>
+                <ng-template #body let-rowNode let-rowData="rowData">
+                  @let hasUnmet = hasUnmetPrerequisites(rowData);
+                  @let tooltip = getTooltip(rowData);
+                  <tr [class.highlight-warning]="hasUnmet">
+                    <td class="w-12">
+                      <f-checkbox
+                        [ngModel]="selectionMap()[rowData.id]"
+                        [binary]="true"
+                        (ngModelChange)="onActionToggle(rowData, $event)"
+                        [fTooltip]="tooltip"
+                        tooltipPosition="top"
+                      />
+                    </td>
+                    <td>
+                      <f-treetabletoggler [rowNode]="rowNode" />
+                      <span class="inline-flex items-center gap-2">
+                        {{ rowData.name }}
+                        @if (hasUnmet) {
+                          <ui-icon name="exclamation-triangle" class="text-orange-500" [fTooltip]="
+                              'iam.validation.unmet.prerequisites.tooltip'
+                                | translate
+                            "
+                            tooltipPosition="top"></ui-icon>
+                        }
+                      </span>
+                    </td>
+                    <td class="hidden md:table-cell">
+                      {{ rowData.code || '-' }}
+                    </td>
+                    <td>
+                      <f-tag
+                        [value]="rowData.actionType"
+                        [severity]="
+                          rowData.actionType === 'backend' ? 'info' : 'success'
+                        "
+                      />
+                    </td>
+                    <td class="hidden lg:table-cell">
+                      @if (rowData.permissionLogic) {
+                        <span class="text-sm text-muted-color">{{
+                          'iam.permission.has.prerequisites' | translate
+                        }}</span>
+                      } @else {
+                        <span class="text-muted-color">-</span>
+                      }
+                    </td>
+                  </tr>
+                </ng-template>
+                <ng-template #emptymessage>
+                  <tr>
+                    <td colspan="5" class="text-center p-4 text-muted-color">
+                      @if (loading()) {
+                        <ui-icon name="loader-circle" spin></ui-icon>
+                        {{ 'shared.loading.actions' | translate }}
+                      } @else {
+                        {{ 'iam.permission.no.actions.available' | translate }}
+                      }
+                    </td>
+                  </tr>
+                </ng-template>
+              </f-treetable>
+            </div>
+          </div>
+
+          @if (hasChanges()) {
+            <div class="border border-surface rounded-border p-3 mt-4">
+              <div class="flex items-center gap-2 mb-3">
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
+                <span class="font-bold">{{
+                  'shared.pending.changes' | translate
+                }}</span>
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                @if (pendingAdd().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.add' | translate }} ({{
+                          pendingAdd().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (action of pendingAdd(); track action.id) {
+                        <li class="text-sm mb-1">{{ action.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+                @if (pendingRemove().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.remove' | translate }} ({{
+                          pendingRemove().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (action of pendingRemove(); track action.id) {
+                        <li class="text-sm mb-1">{{ action.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+        }
+
+        @if (!loading() && actions().length === 0) {
+          <div class="surface-card p-5 rounded-border shadow-sm text-center">
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
+            <p class="text-muted-color m-0">
+              {{ 'iam.permission.no.actions.for.role' | translate }}
+            </p>
+          </div>
+        }
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}.validation-warning{background-color:var(--f-yellow-50, #fefce8);border-left:4px solid var(--f-yellow-500, #eab308);color:var(--f-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--f-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--f-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i2.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i2.TagComponent, selector: "f-tag", inputs: ["value", "severity", "icon", "rounded", "color", "styleClass", "style"] }, { kind: "component", type: i2.CheckboxComponent, selector: "f-checkbox", inputs: ["label", "binary", "disabled", "readonly", "inputId", "invalid", "indeterminate", "variant", "size", "touched", "styleClass", "style", "checked"], outputs: ["onChange", "onBlur", "touch", "checkedChange"] }, { kind: "component", type: i2.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "filterBy", "filterMatchMode", "filterLocale", "filterPlaceholder", "resetFilterOnHide", "autofocusFilter", "emptyMessage", "emptyFilterMessage", "showClear", "loading", "loadingIcon", "dropdownIcon", "clearIcon", "inputId", "invalid", "touched", "styleClass", "style", "editable", "readonly", "autofocus", "checkmark", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "directive", type: i2.TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "positionStyle", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay", "life", "autoHide", "positionTop", "positionLeft", "escape"] }, { kind: "component", type: i2.TreeTableComponent, selector: "f-treetable", inputs: ["value", "loading", "dataKey", "styleClass", "tableStyle", "scrollable", "scrollHeight", "resizableColumns", "lazy", "totalRecords", "paginator", "first", "rows", "rowsPerPageOptions", "showCurrentPageReport", "currentPageReportTemplate", "globalFilterFields", "filterDelay", "selectionMode", "sortMode", "virtualScroll", "virtualScrollItemSize", "sortField", "sortOrder", "multiSortMeta", "filters", "selection", "contextMenuSelection"], outputs: ["sortFieldChange", "sortOrderChange", "multiSortMetaChange", "filtersChange", "selectionChange", "contextMenuSelectionChange", "onLazyLoad", "onSort", "onFilter", "onNodeExpand", "onNodeCollapse", "onNodeSelect", "onNodeUnselect", "onRowContextMenu"] }, { kind: "component", type: i2.TreeTableTogglerComponent, selector: "f-treetabletoggler", inputs: ["rowNode"] }, { kind: "component", type: i2.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RoleActionSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'flusys-role-action-selector', imports: [FormsModule, UiModule, HasPermissionDirective, TranslatePipe], template: `
+    <div class="role-action-selector">
+      <div class="mb-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div>
+            <label class="block font-semibold mb-2">{{
+              'iam.permission.select.role' | translate
+            }}</label>
+            <f-select
+              [ngModel]="selectedRoleId()"
+              (ngModelChange)="selectedRoleId.set($event)"
+              [options]="roles()"
+              optionLabel="name"
+              optionValue="id"
+              [placeholder]="
+                'iam.permission.select.role.placeholder' | translate
+              "
+              [showClear]="true"
+              [filter]="true"
+              class="w-full"
+            />
+          </div>
+        </div>
+      </div>
+
+      @if (selectedRoleId()) {
+        @if (loading()) {
+          <div
+            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
+          >
+            <ui-icon name="loader-circle" spin class="text-primary text-5xl"></ui-icon>
+          </div>
+        }
+
+        @if (!loading() && actions().length > 0) {
+          <div class="surface-card p-4 rounded-border shadow-sm">
+            <div
+              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">
+                  {{ 'iam.permission.action.permissions' | translate }}
+                </h5>
+                <p class="text-sm text-muted-color m-0">
+                  {{
+                    'iam.permission.actions.available'
+                      | translate: { count: actions().length }
+                  }}
+                </p>
+              </div>
+              <div class="flex flex-wrap gap-2">
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="selectAll()"
+                >
+                  <ui-icon pButtonIcon name="check"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="deselectAll()"
+                >
+                  <ui-icon pButtonIcon name="times"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  *hasPermission="ROLE_ACTION_PERMISSIONS.ASSIGN"
+                  [disabled]="!canSave() || saving()"
+                  size="small"
+                  (click)="saveChanges()"
+                >
+                  @if (saving()) {
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                  } @else {
+                    <ui-icon pButtonIcon name="save"></ui-icon>
+                  }
+                  <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
+                </button>
+              </div>
+            </div>
+
+            @if (invalidActionsCount() > 0) {
+              <div class="validation-warning rounded-border p-3 mb-4">
+                <div class="flex items-start gap-2">
+                  <ui-icon name="exclamation-triangle" class="text-xl"></ui-icon>
+                  <div class="flex-1">
+                    <span class="font-semibold"
+                      >{{ 'iam.validation.warning.title' | translate }}:</span
+                    >
+                    <p class="text-sm mt-1 mb-0">
+                      {{
+                        (invalidActionsCount() > 1
+                          ? 'iam.validation.unmet.prerequisites.plural'
+                          : 'iam.validation.unmet.prerequisites.singular'
+                        ) | translate: { count: invalidActionsCount() }
+                      }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            }
+
+            <div class="overflow-x-auto -mx-4 sm:mx-0">
+              <f-treetable
+                [value]="treeNodes()"
+                dataKey="id"
+                [tableStyle]="{ 'min-width': '50rem' }"
+              >
+                <ng-template #header>
+                  <tr>
+                    <th class="w-12">
+                      <f-checkbox
+                        [ngModel]="allSelected()"
+                        [binary]="true"
+                        (ngModelChange)="toggleAll()"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
+                        tooltipPosition="top"
+                      />
+                    </th>
+                    <th>{{ 'shared.name' | translate }}</th>
+                    <th class="hidden md:table-cell">
+                      {{ 'shared.code' | translate }}
+                    </th>
+                    <th>{{ 'iam.action.type' | translate }}</th>
+                    <th class="hidden lg:table-cell">
+                      {{ 'iam.permission.requirements' | translate }}
+                    </th>
+                  </tr>
+                </ng-template>
+                <ng-template #body let-rowNode let-rowData="rowData">
+                  @let hasUnmet = hasUnmetPrerequisites(rowData);
+                  @let tooltip = getTooltip(rowData);
+                  <tr [class.highlight-warning]="hasUnmet">
+                    <td class="w-12">
+                      <f-checkbox
+                        [ngModel]="selectionMap()[rowData.id]"
+                        [binary]="true"
+                        (ngModelChange)="onActionToggle(rowData, $event)"
+                        [fTooltip]="tooltip"
+                        tooltipPosition="top"
+                      />
+                    </td>
+                    <td>
+                      <f-treetabletoggler [rowNode]="rowNode" />
+                      <span class="inline-flex items-center gap-2">
+                        {{ rowData.name }}
+                        @if (hasUnmet) {
+                          <ui-icon name="exclamation-triangle" class="text-orange-500" [fTooltip]="
+                              'iam.validation.unmet.prerequisites.tooltip'
+                                | translate
+                            "
+                            tooltipPosition="top"></ui-icon>
+                        }
+                      </span>
+                    </td>
+                    <td class="hidden md:table-cell">
+                      {{ rowData.code || '-' }}
+                    </td>
+                    <td>
+                      <f-tag
+                        [value]="rowData.actionType"
+                        [severity]="
+                          rowData.actionType === 'backend' ? 'info' : 'success'
+                        "
+                      />
+                    </td>
+                    <td class="hidden lg:table-cell">
+                      @if (rowData.permissionLogic) {
+                        <span class="text-sm text-muted-color">{{
+                          'iam.permission.has.prerequisites' | translate
+                        }}</span>
+                      } @else {
+                        <span class="text-muted-color">-</span>
+                      }
+                    </td>
+                  </tr>
+                </ng-template>
+                <ng-template #emptymessage>
+                  <tr>
+                    <td colspan="5" class="text-center p-4 text-muted-color">
+                      @if (loading()) {
+                        <ui-icon name="loader-circle" spin></ui-icon>
+                        {{ 'shared.loading.actions' | translate }}
+                      } @else {
+                        {{ 'iam.permission.no.actions.available' | translate }}
+                      }
+                    </td>
+                  </tr>
+                </ng-template>
+              </f-treetable>
+            </div>
+          </div>
+
+          @if (hasChanges()) {
+            <div class="border border-surface rounded-border p-3 mt-4">
+              <div class="flex items-center gap-2 mb-3">
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
+                <span class="font-bold">{{
+                  'shared.pending.changes' | translate
+                }}</span>
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                @if (pendingAdd().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.add' | translate }} ({{
+                          pendingAdd().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (action of pendingAdd(); track action.id) {
+                        <li class="text-sm mb-1">{{ action.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+                @if (pendingRemove().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.remove' | translate }} ({{
+                          pendingRemove().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (action of pendingRemove(); track action.id) {
+                        <li class="text-sm mb-1">{{ action.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+        }
+
+        @if (!loading() && actions().length === 0) {
+          <div class="surface-card p-5 rounded-border shadow-sm text-center">
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
+            <p class="text-muted-color m-0">
+              {{ 'iam.permission.no.actions.for.role' | translate }}
+            </p>
+          </div>
+        }
+      }
+    </div>
+  `, styles: [":host{display:block}.validation-warning{background-color:var(--f-yellow-50, #fefce8);border-left:4px solid var(--f-yellow-500, #eab308);color:var(--f-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--f-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--f-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"] }]
+        }], ctorParameters: () => [] });
+
+class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
+    COMPANY_ACTION_PERMISSIONS = COMPANY_ACTION_PERMISSIONS;
+    companyApiProvider = inject(COMPANY_API_PROVIDER);
+    actionApi = inject(ActionApiService);
+    permissionApi = inject(PermissionApiService);
+    messageService = inject(MessageService);
+    confirmationService = inject(ConfirmationService);
+    destroyRef = inject(DestroyRef);
+    selectedCompanyId = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedCompanyId" }] : /* istanbul ignore next */ []));
+    companies = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "companies" }] : /* istanbul ignore next */ []));
+    loadDataAbortController = null;
+    constructor() {
+        super();
+        this.destroyRef.onDestroy(() => {
+            this.loadDataAbortController?.abort();
+        });
+        this.loadCompanies();
+        effect(() => {
+            const companyId = this.selectedCompanyId();
+            this.loadDataAbortController?.abort();
+            if (companyId) {
+                this.loadDataAbortController = new AbortController();
+                this.loadData(this.loadDataAbortController.signal).catch((err) => {
+                    if (err.name !== 'AbortError') {
+                        this.loading.set(false);
+                    }
+                });
+            }
+            else {
+                this.resetState();
+            }
+        });
+    }
+    getDefaultTooltip(isSelected) {
+        if (isSelected) {
+            return `[${this.translate('iam.tooltip.selected')}] ${this.translate('iam.tooltip.selected')}\n\n[${this.translate('shared.remove')}] ${this.translate('iam.tooltip.click.to.remove')}`;
+        }
+        return `[${this.translate('shared.add')}] ${this.translate('iam.tooltip.click.to.add')}`;
+    }
+    async loadCompanies() {
+        try {
+            const response = await firstValueFrom(this.companyApiProvider.getCompanies({
+                page: 0,
+                pageSize: MAX_DROPDOWN_ITEMS,
+            }));
+            this.companies.set(response?.data ?? []);
+        }
+        catch { }
+    }
+    async loadData(signal) {
+        const companyId = this.selectedCompanyId();
+        if (!companyId)
+            return;
+        this.loading.set(true);
+        try {
+            const actionsResponse = await firstValueFrom(this.actionApi.getTree(undefined, undefined, false));
+            if (signal.aborted)
+                return;
+            const actionsTree = actionsResponse?.data ?? [];
+            const actionsList = flattenTree(actionsTree).filter((a) => !!a.id);
+            this._actionsTree.set(actionsTree);
+            this._actions.set(actionsList);
+            const assignedResponse = await firstValueFrom(this.permissionApi.getCompanyActions(companyId));
+            if (signal.aborted)
+                return;
+            const assignedIds = new Set((assignedResponse?.data || []).map((a) => a.actionId));
+            const selMap = this.buildSelectionMap(actionsList, (action) => assignedIds.has(action.id));
+            this._selectionMap.set(selMap);
+            this._initialSelection.set({ ...selMap });
+        }
+        finally {
+            if (!signal.aborted) {
+                this.loading.set(false);
+            }
+        }
+    }
+    async saveChanges() {
+        const companyId = this.selectedCompanyId();
+        if (!companyId)
+            return;
+        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.buildPayloadItems();
+        if (items.length === 0)
+            return;
+        this.saving.set(true);
+        try {
+            const response = await firstValueFrom(this.permissionApi.assignCompanyActions({ companyId, items }));
+            if (response?.data?.prerequisiteErrors &&
+                response.data.prerequisiteErrors.length > 0) {
+                this.handleBackendPrerequisiteErrors(response.data.prerequisiteErrors);
+                return;
+            }
+            this.messageService.add({
+                severity: 'success',
+                summary: this.translate('shared.success'),
+                detail: response?.messageKey
+                    ? this.translate(response.messageKey, response.messageVariables)
+                    : (response?.message ?? ''),
+            });
+            this._initialSelection.set({ ...this.selectionMap() });
+        }
+        catch {
+        }
+        finally {
+            this.saving.set(false);
+        }
+    }
+    handleBackendPrerequisiteErrors(prerequisiteErrors) {
+        const errorList = prerequisiteErrors
+            .map((error) => {
+            const requiredNames = error.requiredActions
+                .map((a) => a.actionName)
+                .join(', ');
+            return `${error.actionName} ${this.translate('iam.permission.requires')}: ${requiredNames}`;
+        })
+            .join('\n');
+        this.confirmationService.confirm({
+            header: this.translate('iam.permission.prerequisite.validation.failed'),
+            message: `${this.translate('iam.permission.prerequisite.error.message')}\n\n${errorList}\n\n${this.translate('iam.permission.auto.select.prompt')}`,
+            icon: 'exclamation-triangle',
+            acceptLabel: this.translate('iam.permission.auto.select.required'),
+            rejectLabel: this.translate('shared.cancel'),
+            acceptIcon: 'check',
+            rejectIcon: 'times',
+            accept: () => {
+                const selMap = { ...this.selectionMap() };
+                prerequisiteErrors.forEach((error) => {
+                    error.requiredActions.forEach((a) => {
+                        selMap[a.actionId] = true;
+                    });
+                });
+                this._selectionMap.set(selMap);
+                this.messageService.add({
+                    severity: 'info',
+                    summary: this.translate('iam.permission.actions.selected'),
+                    detail: this.translate('iam.permission.auto.selected.prerequisites'),
+                });
+            },
+            reject: () => {
+                this._selectionMap.set({ ...this.initialSelection() });
+                this.messageService.add({
+                    severity: 'info',
+                    summary: this.translate('iam.permission.changes.reverted'),
+                    detail: this.translate('iam.permission.selection.reverted'),
+                });
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CompanyActionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CompanyActionSelectorComponent, isStandalone: true, selector: "flusys-company-action-selector", usesInheritance: true, ngImport: i0, template: `
+    <div class="company-action-selector">
+      <div class="mb-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div>
+            <label class="block font-semibold mb-2">{{
+              'iam.permission.select.company' | translate
+            }}</label>
+            <f-select
+              [ngModel]="selectedCompanyId()"
+              (ngModelChange)="selectedCompanyId.set($event)"
+              [options]="companies()"
+              optionLabel="name"
+              optionValue="id"
+              [placeholder]="
+                'iam.permission.select.company.placeholder' | translate
+              "
+              [showClear]="true"
+              [filter]="true"
+              class="w-full"
+            />
+          </div>
+        </div>
+      </div>
+
+      @if (selectedCompanyId()) {
+        @if (loading()) {
+          <div
+            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
+          >
+            <ui-icon name="loader-circle" spin class="text-primary text-5xl"></ui-icon>
+          </div>
+        }
+
+        @if (!loading() && actions().length > 0) {
+          <div class="surface-card p-4 rounded-border shadow-sm">
+            <div
+              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">
+                  {{ 'iam.permission.action.whitelist' | translate }}
+                </h5>
+                <p class="text-sm text-muted-color m-0">
+                  {{
+                    'iam.permission.actions.available'
+                      | translate: { count: actions().length }
+                  }}
+                </p>
+              </div>
+              <div class="flex flex-wrap gap-2">
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="selectAll()"
+                >
+                  <ui-icon pButtonIcon name="check"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="deselectAll()"
+                >
+                  <ui-icon pButtonIcon name="times"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  *hasPermission="COMPANY_ACTION_PERMISSIONS.ASSIGN"
+                  [disabled]="!canSave() || saving()"
+                  size="small"
+                  (click)="saveChanges()"
+                >
+                  @if (saving()) {
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                  } @else {
+                    <ui-icon pButtonIcon name="save"></ui-icon>
+                  }
+                  <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
+                </button>
+              </div>
+            </div>
+
+            @if (invalidActionsCount() > 0) {
+              <div class="validation-warning rounded-border p-3 mb-4">
+                <div class="flex items-start gap-2">
+                  <ui-icon name="exclamation-triangle" class="text-xl"></ui-icon>
+                  <div class="flex-1">
+                    <span class="font-semibold"
+                      >{{ 'iam.validation.warning.title' | translate }}:</span
+                    >
+                    <p class="text-sm mt-1 mb-0">
+                      {{
+                        (invalidActionsCount() > 1
+                          ? 'iam.validation.unmet.prerequisites.plural'
+                          : 'iam.validation.unmet.prerequisites.singular'
+                        ) | translate: { count: invalidActionsCount() }
+                      }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            }
+
+            <div class="overflow-x-auto -mx-4 sm:mx-0">
+              <f-treetable
+                [value]="treeNodes()"
+                dataKey="id"
+                [tableStyle]="{ 'min-width': '50rem' }"
+              >
+                <ng-template #header>
+                  <tr>
+                    <th class="w-12">
+                      <f-checkbox
+                        [ngModel]="allSelected()"
+                        [binary]="true"
+                        (ngModelChange)="toggleAll()"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
+                        tooltipPosition="top"
+                      />
+                    </th>
+                    <th>{{ 'shared.name' | translate }}</th>
+                    <th class="hidden md:table-cell">
+                      {{ 'shared.code' | translate }}
+                    </th>
+                    <th>{{ 'iam.action.type' | translate }}</th>
+                    <th class="hidden lg:table-cell">
+                      {{ 'shared.description' | translate }}
+                    </th>
+                  </tr>
+                </ng-template>
+                <ng-template #body let-rowNode let-rowData="rowData">
+                  @let hasUnmet = hasUnmetPrerequisites(rowData);
+                  <tr [class.highlight-warning]="hasUnmet">
+                    <td class="w-12">
+                      <f-checkbox
+                        [ngModel]="selectionMap()[rowData.id]"
+                        [binary]="true"
+                        (ngModelChange)="onActionToggle(rowData, $event)"
+                        [fTooltip]="getTooltip(rowData)"
+                        tooltipPosition="top"
+                      />
+                    </td>
+                    <td>
+                      <f-treetabletoggler [rowNode]="rowNode" />
+                      <span class="inline-flex items-center gap-2">
+                        {{ rowData.name }}
+                        @if (hasUnmet) {
+                          <ui-icon name="exclamation-triangle" class="text-orange-500" [fTooltip]="
+                              'iam.validation.unmet.prerequisites.tooltip'
+                                | translate
+                            "
+                            tooltipPosition="top"></ui-icon>
+                        }
+                      </span>
+                    </td>
+                    <td class="hidden md:table-cell">
+                      {{ rowData.code || '-' }}
+                    </td>
+                    <td>
+                      <f-tag
+                        [value]="rowData.actionType"
+                        [severity]="
+                          rowData.actionType === 'backend' ? 'info' : 'success'
+                        "
+                      />
+                    </td>
+                    <td class="hidden lg:table-cell">
+                      {{ rowData.description || '-' }}
+                    </td>
+                  </tr>
+                </ng-template>
+                <ng-template #emptymessage>
+                  <tr>
+                    <td colspan="5" class="text-center p-4 text-muted-color">
+                      @if (loading()) {
+                        <ui-icon name="loader-circle" spin></ui-icon>
+                        {{ 'shared.loading.actions' | translate }}
+                      } @else {
+                        {{ 'iam.permission.no.actions.available' | translate }}
+                      }
+                    </td>
+                  </tr>
+                </ng-template>
+              </f-treetable>
+            </div>
+          </div>
+
+          @if (hasChanges()) {
+            <div class="border border-surface rounded-border p-3 mt-4">
+              <div class="flex items-center gap-2 mb-3">
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
+                <span class="font-bold">{{
+                  'shared.pending.changes' | translate
+                }}</span>
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                @if (pendingAdd().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.whitelist' | translate }} ({{
+                          pendingAdd().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (action of pendingAdd(); track action.id) {
+                        <li class="text-sm mb-1">{{ action.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+                @if (pendingRemove().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.remove' | translate }} ({{
+                          pendingRemove().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (action of pendingRemove(); track action.id) {
+                        <li class="text-sm mb-1">{{ action.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+        }
+
+        @if (!loading() && actions().length === 0) {
+          <div class="surface-card p-5 rounded-border shadow-sm text-center">
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
+            <p class="text-muted-color m-0">
+              {{ 'iam.permission.no.actions.for.company' | translate }}
+            </p>
+          </div>
+        }
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}.validation-warning{background-color:var(--f-yellow-50, #fefce8);border-left:4px solid var(--f-yellow-500, #eab308);color:var(--f-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--f-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--f-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"], dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i2.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i2.TagComponent, selector: "f-tag", inputs: ["value", "severity", "icon", "rounded", "color", "styleClass", "style"] }, { kind: "component", type: i2.CheckboxComponent, selector: "f-checkbox", inputs: ["label", "binary", "disabled", "readonly", "inputId", "invalid", "indeterminate", "variant", "size", "touched", "styleClass", "style", "checked"], outputs: ["onChange", "onBlur", "touch", "checkedChange"] }, { kind: "component", type: i2.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "filterBy", "filterMatchMode", "filterLocale", "filterPlaceholder", "resetFilterOnHide", "autofocusFilter", "emptyMessage", "emptyFilterMessage", "showClear", "loading", "loadingIcon", "dropdownIcon", "clearIcon", "inputId", "invalid", "touched", "styleClass", "style", "editable", "readonly", "autofocus", "checkmark", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "directive", type: i2.TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "positionStyle", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay", "life", "autoHide", "positionTop", "positionLeft", "escape"] }, { kind: "component", type: i2.TreeTableComponent, selector: "f-treetable", inputs: ["value", "loading", "dataKey", "styleClass", "tableStyle", "scrollable", "scrollHeight", "resizableColumns", "lazy", "totalRecords", "paginator", "first", "rows", "rowsPerPageOptions", "showCurrentPageReport", "currentPageReportTemplate", "globalFilterFields", "filterDelay", "selectionMode", "sortMode", "virtualScroll", "virtualScrollItemSize", "sortField", "sortOrder", "multiSortMeta", "filters", "selection", "contextMenuSelection"], outputs: ["sortFieldChange", "sortOrderChange", "multiSortMetaChange", "filtersChange", "selectionChange", "contextMenuSelectionChange", "onLazyLoad", "onSort", "onFilter", "onNodeExpand", "onNodeCollapse", "onNodeSelect", "onNodeUnselect", "onRowContextMenu"] }, { kind: "component", type: i2.TreeTableTogglerComponent, selector: "f-treetabletoggler", inputs: ["rowNode"] }, { kind: "component", type: i2.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CompanyActionSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'flusys-company-action-selector', imports: [UiModule, FormsModule, HasPermissionDirective, TranslatePipe], template: `
+    <div class="company-action-selector">
+      <div class="mb-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div>
+            <label class="block font-semibold mb-2">{{
+              'iam.permission.select.company' | translate
+            }}</label>
+            <f-select
+              [ngModel]="selectedCompanyId()"
+              (ngModelChange)="selectedCompanyId.set($event)"
+              [options]="companies()"
+              optionLabel="name"
+              optionValue="id"
+              [placeholder]="
+                'iam.permission.select.company.placeholder' | translate
+              "
+              [showClear]="true"
+              [filter]="true"
+              class="w-full"
+            />
+          </div>
+        </div>
+      </div>
+
+      @if (selectedCompanyId()) {
+        @if (loading()) {
+          <div
+            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
+          >
+            <ui-icon name="loader-circle" spin class="text-primary text-5xl"></ui-icon>
+          </div>
+        }
+
+        @if (!loading() && actions().length > 0) {
+          <div class="surface-card p-4 rounded-border shadow-sm">
+            <div
+              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">
+                  {{ 'iam.permission.action.whitelist' | translate }}
+                </h5>
+                <p class="text-sm text-muted-color m-0">
+                  {{
+                    'iam.permission.actions.available'
+                      | translate: { count: actions().length }
+                  }}
+                </p>
+              </div>
+              <div class="flex flex-wrap gap-2">
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="selectAll()"
+                >
+                  <ui-icon pButtonIcon name="check"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="deselectAll()"
+                >
+                  <ui-icon pButtonIcon name="times"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  *hasPermission="COMPANY_ACTION_PERMISSIONS.ASSIGN"
+                  [disabled]="!canSave() || saving()"
+                  size="small"
+                  (click)="saveChanges()"
+                >
+                  @if (saving()) {
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                  } @else {
+                    <ui-icon pButtonIcon name="save"></ui-icon>
+                  }
+                  <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
+                </button>
+              </div>
+            </div>
+
+            @if (invalidActionsCount() > 0) {
+              <div class="validation-warning rounded-border p-3 mb-4">
+                <div class="flex items-start gap-2">
+                  <ui-icon name="exclamation-triangle" class="text-xl"></ui-icon>
+                  <div class="flex-1">
+                    <span class="font-semibold"
+                      >{{ 'iam.validation.warning.title' | translate }}:</span
+                    >
+                    <p class="text-sm mt-1 mb-0">
+                      {{
+                        (invalidActionsCount() > 1
+                          ? 'iam.validation.unmet.prerequisites.plural'
+                          : 'iam.validation.unmet.prerequisites.singular'
+                        ) | translate: { count: invalidActionsCount() }
+                      }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            }
+
+            <div class="overflow-x-auto -mx-4 sm:mx-0">
+              <f-treetable
+                [value]="treeNodes()"
+                dataKey="id"
+                [tableStyle]="{ 'min-width': '50rem' }"
+              >
+                <ng-template #header>
+                  <tr>
+                    <th class="w-12">
+                      <f-checkbox
+                        [ngModel]="allSelected()"
+                        [binary]="true"
+                        (ngModelChange)="toggleAll()"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
+                        tooltipPosition="top"
+                      />
+                    </th>
+                    <th>{{ 'shared.name' | translate }}</th>
+                    <th class="hidden md:table-cell">
+                      {{ 'shared.code' | translate }}
+                    </th>
+                    <th>{{ 'iam.action.type' | translate }}</th>
+                    <th class="hidden lg:table-cell">
+                      {{ 'shared.description' | translate }}
+                    </th>
+                  </tr>
+                </ng-template>
+                <ng-template #body let-rowNode let-rowData="rowData">
+                  @let hasUnmet = hasUnmetPrerequisites(rowData);
+                  <tr [class.highlight-warning]="hasUnmet">
+                    <td class="w-12">
+                      <f-checkbox
+                        [ngModel]="selectionMap()[rowData.id]"
+                        [binary]="true"
+                        (ngModelChange)="onActionToggle(rowData, $event)"
+                        [fTooltip]="getTooltip(rowData)"
+                        tooltipPosition="top"
+                      />
+                    </td>
+                    <td>
+                      <f-treetabletoggler [rowNode]="rowNode" />
+                      <span class="inline-flex items-center gap-2">
+                        {{ rowData.name }}
+                        @if (hasUnmet) {
+                          <ui-icon name="exclamation-triangle" class="text-orange-500" [fTooltip]="
+                              'iam.validation.unmet.prerequisites.tooltip'
+                                | translate
+                            "
+                            tooltipPosition="top"></ui-icon>
+                        }
+                      </span>
+                    </td>
+                    <td class="hidden md:table-cell">
+                      {{ rowData.code || '-' }}
+                    </td>
+                    <td>
+                      <f-tag
+                        [value]="rowData.actionType"
+                        [severity]="
+                          rowData.actionType === 'backend' ? 'info' : 'success'
+                        "
+                      />
+                    </td>
+                    <td class="hidden lg:table-cell">
+                      {{ rowData.description || '-' }}
+                    </td>
+                  </tr>
+                </ng-template>
+                <ng-template #emptymessage>
+                  <tr>
+                    <td colspan="5" class="text-center p-4 text-muted-color">
+                      @if (loading()) {
+                        <ui-icon name="loader-circle" spin></ui-icon>
+                        {{ 'shared.loading.actions' | translate }}
+                      } @else {
+                        {{ 'iam.permission.no.actions.available' | translate }}
+                      }
+                    </td>
+                  </tr>
+                </ng-template>
+              </f-treetable>
+            </div>
+          </div>
+
+          @if (hasChanges()) {
+            <div class="border border-surface rounded-border p-3 mt-4">
+              <div class="flex items-center gap-2 mb-3">
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
+                <span class="font-bold">{{
+                  'shared.pending.changes' | translate
+                }}</span>
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                @if (pendingAdd().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.whitelist' | translate }} ({{
+                          pendingAdd().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (action of pendingAdd(); track action.id) {
+                        <li class="text-sm mb-1">{{ action.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+                @if (pendingRemove().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.remove' | translate }} ({{
+                          pendingRemove().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (action of pendingRemove(); track action.id) {
+                        <li class="text-sm mb-1">{{ action.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+        }
+
+        @if (!loading() && actions().length === 0) {
+          <div class="surface-card p-5 rounded-border shadow-sm text-center">
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
+            <p class="text-muted-color m-0">
+              {{ 'iam.permission.no.actions.for.company' | translate }}
+            </p>
+          </div>
+        }
+      }
+    </div>
+  `, styles: [":host{display:block}.validation-warning{background-color:var(--f-yellow-50, #fefce8);border-left:4px solid var(--f-yellow-500, #eab308);color:var(--f-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--f-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--f-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * User-Role Selector Component
+ *
+ * Manages user role assignments with branch-level granularity.
+ *
+ * **Architecture:**
+ * - Presentation: DataTable for role list
+ * - Business Logic: Role assignment without dependency validation
+ * - State: Signals with computed dependencies
+ *
+ * **Core Features:**
+ * - User dropdown with async loading
+ * - Branch selector (if company feature enabled)
+ * - Role assignment management (add/remove)
+ * - Real-time change tracking
+ *
+ * **Granularity:**
+ * - Company-wide: branchId = undefined
+ * - Branch-specific: branchId = selected value
+ *
+ * **Performance:**
+ * - Computed signals for reactive updates
+ * - Branch filtering on company context change
+ *
+ * @example
+ * ```html
+ * <flusys-user-role-selector />
+ * ```
+ */
+class UserRoleSelectorComponent {
+    // Permission constants for template
+    USER_ROLE_PERMISSIONS = USER_ROLE_PERMISSIONS;
+    // Dependencies
+    appConfig = inject(APP_CONFIG);
+    companyContext = inject(LAYOUT_AUTH_STATE);
+    userPermissionProvider = inject(USER_PERMISSION_PROVIDER);
+    roleApi = inject(RoleApiService);
+    permissionApi = inject(PermissionApiService);
+    messageService = inject(MessageService);
+    translateAdapter = inject(TranslateService, {
+        optional: true,
+    });
+    translate(key, vars) {
+        return this.translateAdapter?.translate(key, vars) ?? key;
+    }
+    // State - User/Branch Selection
+    selectedUserId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedUserId" }] : /* istanbul ignore next */ []));
+    selectedBranchId = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedBranchId" }] : /* istanbul ignore next */ []));
+    branches = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "branches" }] : /* istanbul ignore next */ []));
+    // State - Loading/Saving
+    loading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    saving = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []));
+    // State - Roles (Business Logic)
+    _roles = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_roles" }] : /* istanbul ignore next */ []));
+    roles = this._roles.asReadonly();
+    // State - Selection
+    _selectionMap = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_selectionMap" }] : /* istanbul ignore next */ []));
+    selectionMap = this._selectionMap.asReadonly();
+    _initialSelection = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_initialSelection" }] : /* istanbul ignore next */ []));
+    initialSelection = this._initialSelection.asReadonly();
+    // Computed - UI Flags
+    showBranchSelector = computed(() => isCompanyFeatureEnabled(this.appConfig) === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showBranchSelector" }] : /* istanbul ignore next */ []));
+    filteredBranches = computed(() => {
+        const currentCompanyId = this.companyContext.currentCompanyInfo()?.id || undefined;
+        if (!currentCompanyId)
+            return this.branches();
+        return this.branches().filter((b) => b.companyId === currentCompanyId);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredBranches" }] : /* istanbul ignore next */ []));
+    // Computed - Selection State
+    allSelected = computed(() => {
+        const selMap = this.selectionMap();
+        const total = this.roles().length;
+        if (total === 0)
+            return false;
+        const selected = Object.values(selMap).filter((v) => v).length;
+        return selected === total;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
+    // Computed - Change Detection
+    hasChanges = computed(() => {
+        const current = this.selectionMap();
+        const initial = this.initialSelection();
+        const currentKeys = Object.keys(current);
+        const initialKeys = Object.keys(initial);
+        if (currentKeys.length !== initialKeys.length)
+            return true;
+        return currentKeys.some((key) => current[key] !== initial[key]);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasChanges" }] : /* istanbul ignore next */ []));
+    // Computed - Pending Changes
+    pendingAdd = computed(() => {
+        const current = this.selectionMap();
+        const initial = this.initialSelection();
+        const allRoles = this.roles();
+        return allRoles.filter((role) => current[role.id] && !initial[role.id]);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingAdd" }] : /* istanbul ignore next */ []));
+    pendingRemove = computed(() => {
+        const current = this.selectionMap();
+        const initial = this.initialSelection();
+        const allRoles = this.roles();
+        return allRoles.filter((role) => !current[role.id] && initial[role.id]);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingRemove" }] : /* istanbul ignore next */ []));
+    // Computed - Save Button State
+    canSave = computed(() => {
+        return this.hasChanges() && !this.saving();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canSave" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Effect: Load user branches and data when user changes
+        effect(() => {
+            const userId = this.selectedUserId();
+            if (userId) {
+                if (isCompanyFeatureEnabled(this.appConfig)) {
+                    this.loadUserBranches(userId);
+                }
+                this.loadData();
+            }
+            else {
+                this.branches.set([]);
+                this.selectedBranchId.set(undefined);
+                this.resetState();
+            }
+        });
+        // Effect: Reload data when branch changes
+        effect(() => {
+            const userId = this.selectedUserId();
+            const branchId = this.selectedBranchId();
+            if (isCompanyFeatureEnabled(this.appConfig) &&
+                userId &&
+                branchId !== undefined) {
+                this.loadData();
+            }
+        });
+    }
+    /**
+     * Load user's permitted branches
+     */
+    async loadUserBranches(userId) {
+        try {
+            const companyId = this.companyContext.currentCompanyInfo()?.id || undefined;
+            if (!companyId) {
+                this.branches.set([]);
+                return;
+            }
+            const response = await firstValueFrom(this.userPermissionProvider.getUserBranchPermissions(userId));
+            const userBranches = response?.data?.map((ub) => ({
+                id: ub.branchId,
+                name: ub.branchName,
+                companyId: ub.companyId,
+            })) ?? [];
+            this.branches.set(userBranches);
+        }
+        catch {
+            // Error toast handled by global interceptor
+        }
+    }
+    /**
+     * Load roles and assignments for selected user
+     */
+    async loadData() {
+        const userId = this.selectedUserId();
+        if (!userId)
+            return;
+        const branchId = this.selectedBranchId();
+        this.loading.set(true);
+        try {
+            // Load all roles
+            const rolesResponse = await this.roleApi.getAll({
+                pagination: { currentPage: 0, pageSize: MAX_DROPDOWN_ITEMS },
+            });
+            const rolesList = rolesResponse?.data ?? [];
+            this._roles.set(rolesList);
+            // Load existing user-role assignments
+            const query = isCompanyFeatureEnabled(this.appConfig) && branchId
+                ? { branchId }
+                : undefined;
+            const assignedResponse = await firstValueFrom(this.permissionApi.getUserRoles(userId, query));
+            const assignedIds = new Set((assignedResponse?.data || []).map((r) => r.roleId));
+            // Build selection map
+            const selMap = {};
+            rolesList.forEach((role) => {
+                selMap[role.id] = assignedIds.has(role.id);
+            });
+            this._selectionMap.set(selMap);
+            this._initialSelection.set({ ...selMap });
+        }
+        catch {
+            // Error toast handled by global interceptor
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    /**
+     * Get tooltip for role checkbox
+     */
+    getTooltip(role) {
+        const selMap = this.selectionMap();
+        const isCurrentlySelected = selMap[role.id];
+        if (isCurrentlySelected) {
+            return `[${this.translate('shared.assigned')}] ${this.translate('iam.tooltip.assigned.to.user')}\n\n[${this.translate('shared.remove')}] ${this.translate('iam.tooltip.click.to.remove.role.from.user')}`;
+        }
+        return `[${this.translate('shared.add')}] ${this.translate('iam.tooltip.click.to.assign.role.to.user')}`;
+    }
+    /**
+     * Handle role checkbox toggle
+     */
+    onRoleToggle(role, newValue) {
+        const selMap = { ...this.selectionMap() };
+        selMap[role.id] = newValue;
+        this._selectionMap.set(selMap);
+    }
+    /**
+     * Toggle all roles
+     */
+    toggleAll() {
+        this.setAllSelections(!this.allSelected());
+    }
+    /**
+     * Select all roles
+     */
+    selectAll() {
+        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] = value;
+        });
+        this._selectionMap.set(selMap);
+    }
+    /**
+     * 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) {
+            this.messageService.add({
+                severity: 'warn',
+                summary: this.translate('shared.warning'),
+                detail: this.translate('iam.permission.company.required'),
+            });
+            return;
+        }
+        // Build payload
+        const items = [];
+        this.pendingAdd().forEach((role) => {
+            items.push({ id: role.id, action: 'add' });
+        });
+        this.pendingRemove().forEach((role) => {
+            items.push({ id: role.id, action: 'remove' });
+        });
+        if (items.length === 0)
+            return;
+        this.saving.set(true);
+        try {
+            const payload = { userId, items };
+            if (isCompanyFeatureEnabled(this.appConfig)) {
+                if (companyId) {
+                    payload.companyId = companyId;
+                }
+                if (branchId) {
+                    payload.branchId = branchId;
+                }
+            }
+            const response = await firstValueFrom(this.permissionApi.assignUserRoles(payload));
+            this.messageService.add({
+                severity: 'success',
+                summary: this.translate('shared.success'),
+                detail: response?.messageKey
+                    ? this.translate(response.messageKey, response.messageVariables)
+                    : response?.message,
+            });
+            // Update baseline
+            this._initialSelection.set({ ...this.selectionMap() });
+        }
+        catch {
+            // Error toast handled by global interceptor
+        }
+        finally {
+            this.saving.set(false);
+        }
+    }
+    /**
+     * Reset component state
+     */
+    resetState() {
+        this._roles.set([]);
+        this._selectionMap.set({});
+        this._initialSelection.set({});
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: UserRoleSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: UserRoleSelectorComponent, isStandalone: true, selector: "flusys-user-role-selector", ngImport: i0, template: `
+    <div class="user-role-selector">
+      <!-- User and Branch Selectors -->
+      <div class="surface-card p-4 rounded-border mb-4 shadow-sm">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
+          <div>
+            <label class="block font-semibold mb-2">
+              <ui-icon name="user" class="mr-2 text-primary"></ui-icon>
+              {{ 'iam.permission.select.user' | translate }}
+            </label>
+            <lib-user-select
+              [value]="selectedUserId()"
+              (valueChange)="selectedUserId.set($event)"
+              [isEditMode]="true"
+              [placeHolder]="
+                'iam.permission.select.user.placeholder' | translate
+              "
+            />
+          </div>
+
+          @if (showBranchSelector()) {
+            <div>
+              <label class="block font-semibold mb-2">
+                <ui-icon name="building" class="mr-2 text-primary"></ui-icon>
+                {{ 'iam.permission.select.branch' | translate }}
+              </label>
+              <f-select
+                [ngModel]="selectedBranchId()"
+                (ngModelChange)="selectedBranchId.set($event)"
+                [options]="filteredBranches()"
+                optionLabel="name"
+                optionValue="id"
+                [placeholder]="
+                  'iam.permission.select.branch.placeholder' | translate
+                "
+                [showClear]="true"
+                [filter]="true"
+                styleClass="w-full"
+              >
+                <ng-template #selectedItem let-branch>
+                  @if (branch) {
+                    <div class="flex items-center gap-2">
+                      <ui-icon name="building" class="text-primary"></ui-icon>
+                      <span class="font-semibold">{{ branch.name }}</span>
+                    </div>
+                  }
+                </ng-template>
+                <ng-template #item let-branch>
+                  <div class="flex items-center gap-2">
+                    <ui-icon name="building" class="text-muted-color"></ui-icon>
+                    <span>{{ branch.name }}</span>
+                  </div>
+                </ng-template>
+              </f-select>
+              <small class="text-muted-color block mt-1">
+                {{
+                  (filteredBranches().length !== 1
+                    ? 'iam.branch.permitted.count.plural'
+                    : 'iam.branch.permitted.count'
+                  ) | translate: { count: filteredBranches().length }
+                }}
+              </small>
+            </div>
+          }
+        </div>
+      </div>
+
+      @if (selectedUserId()) {
+        <!-- Loading State -->
+        @if (loading()) {
+          <div
+            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
+          >
+            <ui-icon name="loader-circle" spin class="text-primary text-5xl"></ui-icon>
+          </div>
+        }
+
+        <!-- Role List -->
+        @if (!loading() && roles().length > 0) {
+          <div class="surface-card p-4 rounded-border shadow-sm">
+            <div
+              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">
+                  {{ 'iam.permission.role.assignments' | translate }}
+                </h5>
+                <p class="text-sm text-muted-color m-0">
+                  {{
+                    'iam.permission.roles.available'
+                      | translate: { count: roles().length }
+                  }}
+                </p>
+              </div>
+              <div class="flex flex-wrap gap-2">
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="selectAll()"
+                >
+                  <ui-icon pButtonIcon name="check"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="deselectAll()"
+                >
+                  <ui-icon pButtonIcon name="times"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  *hasPermission="USER_ROLE_PERMISSIONS.ASSIGN"
+                  [disabled]="!canSave() || saving()"
+                  size="small"
+                  (click)="saveChanges()"
+                >
+                  @if (saving()) {
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                  } @else {
+                    <ui-icon pButtonIcon name="save"></ui-icon>
+                  }
+                  <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
+                </button>
+              </div>
+            </div>
+
+            <!-- Role Table -->
+            <div class="overflow-x-auto -mx-4 sm:mx-0">
+              <f-table
+                [value]="roles()"
+                [rows]="10"
+                [paginator]="roles().length > 10"
+                [rowsPerPageOptions]="[10, 20, 50]"
+                [globalFilterFields]="['name', 'code', 'description']"
+                [showCurrentPageReport]="true"
+                [currentPageReportTemplate]="
+                  'iam.pagination.roles.template' | translate
+                "
+                [tableStyle]="{ 'min-width': '35rem' }"
+              >
+                <ng-template #header>
+                  <tr>
+                    <th style="width: 3rem">
+                      <f-checkbox
+                        [ngModel]="allSelected()"
+                        [binary]="true"
+                        (ngModelChange)="toggleAll()"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
+                        tooltipPosition="top"
+                      />
+                    </th>
+                    <th>{{ 'shared.name' | translate }}</th>
+                    <th class="hidden sm:table-cell">
+                      {{ 'shared.code' | translate }}
+                    </th>
+                    <th class="hidden md:table-cell">
+                      {{ 'shared.description' | translate }}
+                    </th>
+                  </tr>
+                </ng-template>
+                <ng-template #body let-role>
+                  <tr>
+                    <td>
+                      <f-checkbox
+                        [ngModel]="selectionMap()[role.id]"
+                        [binary]="true"
+                        (ngModelChange)="onRoleToggle(role, $event)"
+                        [fTooltip]="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()) {
+                        <ui-icon name="loader-circle" spin></ui-icon>
+                        {{ 'shared.loading.roles' | translate }}
+                      } @else {
+                        {{ 'iam.permission.no.roles.available' | translate }}
+                      }
+                    </td>
+                  </tr>
+                </ng-template>
+              </f-table>
+            </div>
+          </div>
+
+          <!-- Change Summary -->
+          @if (hasChanges()) {
+            <div class="border border-surface rounded-border p-3 mt-4">
+              <div class="flex items-center gap-2 mb-3">
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
+                <span class="font-bold">{{
+                  'shared.pending.changes' | translate
+                }}</span>
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                @if (pendingAdd().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.assign' | translate }} ({{
+                          pendingAdd().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (role of pendingAdd(); track role.id) {
+                        <li class="text-sm mb-1">{{ role.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+                @if (pendingRemove().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.remove' | translate }} ({{
+                          pendingRemove().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (role of pendingRemove(); track role.id) {
+                        <li class="text-sm mb-1">{{ role.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+        }
+
+        @if (!loading() && roles().length === 0) {
+          <div class="surface-card p-5 rounded-border shadow-sm text-center">
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
+            <p class="text-muted-color m-0">
+              {{ 'iam.permission.no.roles.for.user' | translate }}
+            </p>
+          </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: UiModule }, { kind: "directive", type: i2.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i2.CheckboxComponent, selector: "f-checkbox", inputs: ["label", "binary", "disabled", "readonly", "inputId", "invalid", "indeterminate", "variant", "size", "touched", "styleClass", "style", "checked"], outputs: ["onChange", "onBlur", "touch", "checkedChange"] }, { kind: "component", type: i2.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "filterBy", "filterMatchMode", "filterLocale", "filterPlaceholder", "resetFilterOnHide", "autofocusFilter", "emptyMessage", "emptyFilterMessage", "showClear", "loading", "loadingIcon", "dropdownIcon", "clearIcon", "inputId", "invalid", "touched", "styleClass", "style", "editable", "readonly", "autofocus", "checkmark", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "component", type: i2.TableComponent, selector: "f-table", inputs: ["value", "lazy", "loading", "rows", "totalRecords", "rowHover", "dataKey", "scrollable", "scrollHeight", "paginator", "first", "rowsPerPageOptions", "showCurrentPageReport", "currentPageReportTemplate", "tableStyle", "styleClass", "globalFilterFields", "filterDelay", "responsiveLayout", "selectionMode", "sortMode", "rowExpandMode", "resizableColumns", "rowStyleClass", "virtualScroll", "virtualScrollItemSize", "sortField", "sortOrder", "multiSortMeta", "filters", "selection", "expandedRowKeys", "contextMenuSelection"], outputs: ["sortFieldChange", "sortOrderChange", "multiSortMetaChange", "filtersChange", "selectionChange", "expandedRowKeysChange", "contextMenuSelectionChange", "onLazyLoad", "onSort", "onFilter", "onRowSelect", "onRowUnselect", "onSelectAllChange", "onRowExpand", "onRowCollapse", "onColResize", "onRowContextMenu"] }, { kind: "directive", type: i2.TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "positionStyle", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay", "life", "autoHide", "positionTop", "positionLeft", "escape"] }, { kind: "component", type: i2.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "component", type: UserSelectComponent, selector: "lib-user-select", inputs: ["showClear", "value"], outputs: ["valueChange", "userSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: UserRoleSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'flusys-user-role-selector', imports: [
+                        CommonModule,
+                        FormsModule,
+                        UiModule,
+                        HasPermissionDirective,
+                        UserSelectComponent,
+                        TranslatePipe,
+                    ], template: `
+    <div class="user-role-selector">
+      <!-- User and Branch Selectors -->
+      <div class="surface-card p-4 rounded-border mb-4 shadow-sm">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
+          <div>
+            <label class="block font-semibold mb-2">
+              <ui-icon name="user" class="mr-2 text-primary"></ui-icon>
+              {{ 'iam.permission.select.user' | translate }}
+            </label>
+            <lib-user-select
+              [value]="selectedUserId()"
+              (valueChange)="selectedUserId.set($event)"
+              [isEditMode]="true"
+              [placeHolder]="
+                'iam.permission.select.user.placeholder' | translate
+              "
+            />
+          </div>
+
+          @if (showBranchSelector()) {
+            <div>
+              <label class="block font-semibold mb-2">
+                <ui-icon name="building" class="mr-2 text-primary"></ui-icon>
+                {{ 'iam.permission.select.branch' | translate }}
+              </label>
+              <f-select
+                [ngModel]="selectedBranchId()"
+                (ngModelChange)="selectedBranchId.set($event)"
+                [options]="filteredBranches()"
+                optionLabel="name"
+                optionValue="id"
+                [placeholder]="
+                  'iam.permission.select.branch.placeholder' | translate
+                "
+                [showClear]="true"
+                [filter]="true"
+                styleClass="w-full"
+              >
+                <ng-template #selectedItem let-branch>
+                  @if (branch) {
+                    <div class="flex items-center gap-2">
+                      <ui-icon name="building" class="text-primary"></ui-icon>
+                      <span class="font-semibold">{{ branch.name }}</span>
+                    </div>
+                  }
+                </ng-template>
+                <ng-template #item let-branch>
+                  <div class="flex items-center gap-2">
+                    <ui-icon name="building" class="text-muted-color"></ui-icon>
+                    <span>{{ branch.name }}</span>
+                  </div>
+                </ng-template>
+              </f-select>
+              <small class="text-muted-color block mt-1">
+                {{
+                  (filteredBranches().length !== 1
+                    ? 'iam.branch.permitted.count.plural'
+                    : 'iam.branch.permitted.count'
+                  ) | translate: { count: filteredBranches().length }
+                }}
+              </small>
+            </div>
+          }
+        </div>
+      </div>
+
+      @if (selectedUserId()) {
+        <!-- Loading State -->
+        @if (loading()) {
+          <div
+            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
+          >
+            <ui-icon name="loader-circle" spin class="text-primary text-5xl"></ui-icon>
+          </div>
+        }
+
+        <!-- Role List -->
+        @if (!loading() && roles().length > 0) {
+          <div class="surface-card p-4 rounded-border shadow-sm">
+            <div
+              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">
+                  {{ 'iam.permission.role.assignments' | translate }}
+                </h5>
+                <p class="text-sm text-muted-color m-0">
+                  {{
+                    'iam.permission.roles.available'
+                      | translate: { count: roles().length }
+                  }}
+                </p>
+              </div>
+              <div class="flex flex-wrap gap-2">
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="selectAll()"
+                >
+                  <ui-icon pButtonIcon name="check"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="deselectAll()"
+                >
+                  <ui-icon pButtonIcon name="times"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  *hasPermission="USER_ROLE_PERMISSIONS.ASSIGN"
+                  [disabled]="!canSave() || saving()"
+                  size="small"
+                  (click)="saveChanges()"
+                >
+                  @if (saving()) {
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                  } @else {
+                    <ui-icon pButtonIcon name="save"></ui-icon>
+                  }
+                  <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
+                </button>
+              </div>
+            </div>
+
+            <!-- Role Table -->
+            <div class="overflow-x-auto -mx-4 sm:mx-0">
+              <f-table
+                [value]="roles()"
+                [rows]="10"
+                [paginator]="roles().length > 10"
+                [rowsPerPageOptions]="[10, 20, 50]"
+                [globalFilterFields]="['name', 'code', 'description']"
+                [showCurrentPageReport]="true"
+                [currentPageReportTemplate]="
+                  'iam.pagination.roles.template' | translate
+                "
+                [tableStyle]="{ 'min-width': '35rem' }"
+              >
+                <ng-template #header>
+                  <tr>
+                    <th style="width: 3rem">
+                      <f-checkbox
+                        [ngModel]="allSelected()"
+                        [binary]="true"
+                        (ngModelChange)="toggleAll()"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
+                        tooltipPosition="top"
+                      />
+                    </th>
+                    <th>{{ 'shared.name' | translate }}</th>
+                    <th class="hidden sm:table-cell">
+                      {{ 'shared.code' | translate }}
+                    </th>
+                    <th class="hidden md:table-cell">
+                      {{ 'shared.description' | translate }}
+                    </th>
+                  </tr>
+                </ng-template>
+                <ng-template #body let-role>
+                  <tr>
+                    <td>
+                      <f-checkbox
+                        [ngModel]="selectionMap()[role.id]"
+                        [binary]="true"
+                        (ngModelChange)="onRoleToggle(role, $event)"
+                        [fTooltip]="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()) {
+                        <ui-icon name="loader-circle" spin></ui-icon>
+                        {{ 'shared.loading.roles' | translate }}
+                      } @else {
+                        {{ 'iam.permission.no.roles.available' | translate }}
+                      }
+                    </td>
+                  </tr>
+                </ng-template>
+              </f-table>
+            </div>
+          </div>
+
+          <!-- Change Summary -->
+          @if (hasChanges()) {
+            <div class="border border-surface rounded-border p-3 mt-4">
+              <div class="flex items-center gap-2 mb-3">
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
+                <span class="font-bold">{{
+                  'shared.pending.changes' | translate
+                }}</span>
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                @if (pendingAdd().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.assign' | translate }} ({{
+                          pendingAdd().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (role of pendingAdd(); track role.id) {
+                        <li class="text-sm mb-1">{{ role.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+                @if (pendingRemove().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.remove' | translate }} ({{
+                          pendingRemove().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (role of pendingRemove(); track role.id) {
+                        <li class="text-sm mb-1">{{ role.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+        }
+
+        @if (!loading() && roles().length === 0) {
+          <div class="surface-card p-5 rounded-border shadow-sm text-center">
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
+            <p class="text-muted-color m-0">
+              {{ 'iam.permission.no.roles.for.user' | translate }}
+            </p>
+          </div>
+        }
+      }
+    </div>
+  `, styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [] });
+
+class UserActionSelectorComponent extends BaseActionSelectorComponent {
+    USER_ACTION_PERMISSIONS = USER_ACTION_PERMISSIONS;
+    appConfig = inject(APP_CONFIG);
+    companyContext = inject(LAYOUT_AUTH_STATE);
+    userPermissionProvider = inject(USER_PERMISSION_PROVIDER);
+    actionApi = inject(ActionApiService);
+    permissionApi = inject(PermissionApiService);
+    messageService = inject(MessageService);
+    selectedUserId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedUserId" }] : /* istanbul ignore next */ []));
+    selectedBranchId = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedBranchId" }] : /* istanbul ignore next */ []));
+    branches = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "branches" }] : /* istanbul ignore next */ []));
+    isCompanyFeatureActive = computed(() => isCompanyFeatureEnabled(this.appConfig) === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isCompanyFeatureActive" }] : /* istanbul ignore next */ []));
+    showBranchSelector = this.isCompanyFeatureActive;
+    filteredBranches = computed(() => {
+        const currentCompanyId = this.companyContext.currentCompanyInfo()?.id || undefined;
+        if (!currentCompanyId)
+            return this.branches();
+        return this.branches().filter((b) => b.companyId === currentCompanyId);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredBranches" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        effect(() => {
+            const userId = this.selectedUserId();
+            this.selectedBranchId.set(undefined);
+            if (userId) {
+                if (this.isCompanyFeatureActive()) {
+                    this.loadUserBranches(userId);
+                }
+                this.loadData();
+            }
+            else {
+                this.branches.set([]);
+                this.resetState();
+            }
+        });
+        effect(() => {
+            const branchId = this.selectedBranchId();
+            const userId = this.selectedUserId();
+            if (this.isCompanyFeatureActive() && userId && branchId !== undefined) {
+                this.loadData();
+            }
+        });
+    }
+    getDefaultTooltip(isSelected) {
+        if (isSelected) {
+            return `[${this.translate('shared.assigned')}] ${this.translate('iam.tooltip.assigned.to.user')}\n\n[${this.translate('shared.remove')}] ${this.translate('iam.tooltip.click.to.remove.user')}`;
+        }
+        return `[${this.translate('shared.add')}] ${this.translate('iam.tooltip.click.to.assign.user')}`;
+    }
+    async loadUserBranches(userId) {
+        const companyId = this.companyContext.currentCompanyInfo()?.id;
+        if (!companyId) {
+            this.branches.set([]);
+            return;
+        }
+        try {
+            const response = await firstValueFrom(this.userPermissionProvider.getUserBranchPermissions(userId));
+            const userBranches = response?.data?.map((ub) => ({
+                id: ub.branchId,
+                name: ub.branchName,
+                companyId: ub.companyId,
+            })) ?? [];
+            this.branches.set(userBranches);
+        }
+        catch { }
+    }
+    async loadData() {
+        const userId = this.selectedUserId();
+        if (!userId)
+            return;
+        const branchId = this.selectedBranchId();
+        this.loading.set(true);
+        try {
+            const actionsResponse = await firstValueFrom(this.actionApi.getActionsForPermission());
+            const flatActions = actionsResponse?.data ?? [];
+            const actionsTree = buildTreeFromFlat(flatActions);
+            this._actionsTree.set(actionsTree);
+            this._actions.set(flatActions);
+            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));
+            const selMap = this.buildSelectionMap(flatActions, (action) => assignedIds.has(action.id));
+            this._selectionMap.set(selMap);
+            this._initialSelection.set({ ...selMap });
+        }
+        catch {
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    async saveChanges() {
+        const userId = this.selectedUserId();
+        if (!userId)
+            return;
+        const branchId = this.selectedBranchId();
+        const companyId = this.companyContext.currentCompanyInfo()?.id;
+        if (this.isCompanyFeatureActive() && !companyId) {
+            this.messageService.add({
+                severity: 'warn',
+                summary: this.translate('shared.warning'),
+                detail: this.translate('iam.permission.company.required'),
+            });
+            return;
+        }
+        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.buildPayloadItems();
+        if (items.length === 0)
+            return;
+        this.saving.set(true);
+        try {
+            const payload = { userId, items };
+            if (this.isCompanyFeatureActive()) {
+                if (companyId)
+                    payload.companyId = companyId;
+                if (branchId)
+                    payload.branchId = branchId;
+            }
+            const response = await firstValueFrom(this.permissionApi.assignUserActions(payload));
+            this.messageService.add({
+                severity: 'success',
+                summary: this.translate('shared.success'),
+                detail: response?.messageKey
+                    ? this.translate(response.messageKey, response.messageVariables)
+                    : response?.message,
+            });
+            this._initialSelection.set({ ...this.selectionMap() });
+        }
+        catch {
+        }
+        finally {
+            this.saving.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: UserActionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: UserActionSelectorComponent, isStandalone: true, selector: "flusys-user-action-selector", usesInheritance: true, ngImport: i0, template: `
+    <div class="user-action-selector">
+      <div class="surface-card p-4 rounded-border mb-4 shadow-sm">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
+          <div>
+            <label class="block font-semibold mb-2">
+              <ui-icon name="user" class="mr-2 text-primary"></ui-icon>
+              {{ 'iam.permission.select.user' | translate }}
+            </label>
+            <lib-user-select
+              [value]="selectedUserId()"
+              (valueChange)="selectedUserId.set($event)"
+              [isEditMode]="true"
+              [placeHolder]="
+                'iam.permission.select.user.placeholder' | translate
+              "
+            />
+          </div>
+
+          @if (showBranchSelector()) {
+            <div>
+              <label class="block font-semibold mb-2">
+                <ui-icon name="building" class="mr-2 text-primary"></ui-icon>
+                {{ 'iam.permission.select.branch' | translate }}
+              </label>
+              <f-select
+                [ngModel]="selectedBranchId()"
+                (ngModelChange)="selectedBranchId.set($event)"
+                [options]="filteredBranches()"
+                optionLabel="name"
+                optionValue="id"
+                [placeholder]="
+                  'iam.permission.select.branch.placeholder' | translate
+                "
+                [showClear]="true"
+                [filter]="true"
+                class="w-full"
+              >
+                <ng-template #selectedItem let-branch>
+                  @if (branch) {
+                    <div class="flex items-center gap-2">
+                      <ui-icon name="building" class="text-primary"></ui-icon>
+                      <span class="font-semibold">{{ branch.name }}</span>
+                    </div>
+                  }
+                </ng-template>
+                <ng-template #item let-branch>
+                  <div class="flex items-center gap-2">
+                    <ui-icon name="building" class="text-muted-color"></ui-icon>
+                    <span>{{ branch.name }}</span>
+                  </div>
+                </ng-template>
+              </f-select>
+              <small class="text-muted-color block mt-1">
+                {{
+                  (filteredBranches().length !== 1
+                    ? 'iam.branch.permitted.count.plural'
+                    : 'iam.branch.permitted.count'
+                  ) | translate: { count: filteredBranches().length }
+                }}
+              </small>
+            </div>
+          }
+        </div>
+      </div>
+
+      @if (selectedUserId()) {
+        @if (loading()) {
+          <div class="flex justify-center p-5">
+            <ui-icon name="loader-circle" spin class="text-4xl"></ui-icon>
+          </div>
+        }
+
+        @if (!loading() && actions().length > 0) {
+          <div class="surface-card p-4 rounded-border shadow-sm">
+            <div
+              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">
+                  {{ 'iam.permission.direct.action.permissions' | translate }}
+                </h5>
+                <p class="text-sm text-muted-color m-0">
+                  {{
+                    'iam.permission.actions.available'
+                      | translate: { count: actions().length }
+                  }}
+                </p>
+              </div>
+              <div class="flex flex-wrap gap-2">
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="selectAll()"
+                >
+                  <ui-icon pButtonIcon name="check"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="deselectAll()"
+                >
+                  <ui-icon pButtonIcon name="times"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  *hasPermission="USER_ACTION_PERMISSIONS.ASSIGN"
+                  [disabled]="!canSave() || saving()"
+                  size="small"
+                  (click)="saveChanges()"
+                >
+                  @if (saving()) {
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                  } @else {
+                    <ui-icon pButtonIcon name="save"></ui-icon>
+                  }
+                  <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
+                </button>
+              </div>
+            </div>
+
+            @if (invalidActionsCount() > 0) {
+              <div class="validation-warning rounded-border p-3 mb-4">
+                <div class="flex items-start gap-2">
+                  <ui-icon name="exclamation-triangle" class="text-xl"></ui-icon>
+                  <div class="flex-1">
+                    <span class="font-semibold"
+                      >{{ 'iam.validation.warning.title' | translate }}:</span
+                    >
+                    <p class="text-sm mt-1 mb-0">
+                      {{
+                        (invalidActionsCount() > 1
+                          ? 'iam.validation.unmet.prerequisites.plural'
+                          : 'iam.validation.unmet.prerequisites.singular'
+                        ) | translate: { count: invalidActionsCount() }
+                      }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            }
+
+            <div class="overflow-x-auto -mx-4 sm:mx-0">
+              <f-treetable
+                [value]="treeNodes()"
+                dataKey="id"
+                [tableStyle]="{ 'min-width': '50rem' }"
+              >
+                <ng-template #header>
+                  <tr>
+                    <th class="w-12">
+                      <f-checkbox
+                        [ngModel]="allSelected()"
+                        [binary]="true"
+                        (ngModelChange)="toggleAll()"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
+                        tooltipPosition="top"
+                      />
+                    </th>
+                    <th>{{ 'shared.name' | translate }}</th>
+                    <th class="hidden md:table-cell">
+                      {{ 'shared.code' | translate }}
+                    </th>
+                    <th>{{ 'iam.action.type' | translate }}</th>
+                    <th class="hidden lg:table-cell">
+                      {{ 'shared.description' | translate }}
+                    </th>
+                  </tr>
+                </ng-template>
+                <ng-template #body let-rowNode let-rowData="rowData">
+                  @let hasUnmet = hasUnmetPrerequisites(rowData);
+                  @let tooltip = getTooltip(rowData);
+                  <tr [class.highlight-warning]="hasUnmet">
+                    <td class="w-12">
+                      <f-checkbox
+                        [ngModel]="selectionMap()[rowData.id]"
+                        [binary]="true"
+                        (ngModelChange)="onActionToggle(rowData, $event)"
+                        [fTooltip]="tooltip"
+                        tooltipPosition="top"
+                      />
+                    </td>
+                    <td>
+                      <f-treetabletoggler [rowNode]="rowNode" />
+                      <span class="inline-flex items-center gap-2">
+                        {{ rowData.name }}
+                        @if (hasUnmet) {
+                          <ui-icon name="exclamation-triangle" class="text-orange-500" [fTooltip]="
+                              'iam.validation.unmet.prerequisites.tooltip'
+                                | translate
+                            "
+                            tooltipPosition="top"></ui-icon>
+                        }
+                      </span>
+                    </td>
+                    <td class="hidden md:table-cell">
+                      {{ rowData.code || '-' }}
+                    </td>
+                    <td>
+                      <f-tag
+                        [value]="rowData.actionType"
+                        [severity]="
+                          rowData.actionType === 'backend' ? 'info' : 'success'
+                        "
+                      />
+                    </td>
+                    <td class="hidden lg:table-cell">
+                      {{ rowData.description || '-' }}
+                    </td>
+                  </tr>
+                </ng-template>
+                <ng-template #emptymessage>
+                  <tr>
+                    <td colspan="5" class="text-center p-4 text-muted-color">
+                      @if (loading()) {
+                        <ui-icon name="loader-circle" spin></ui-icon>
+                        {{ 'shared.loading.actions' | translate }}
+                      } @else {
+                        {{ 'iam.permission.no.actions.available' | translate }}
+                      }
+                    </td>
+                  </tr>
+                </ng-template>
+              </f-treetable>
+            </div>
+          </div>
+
+          @if (hasChanges()) {
+            <div class="border border-surface rounded-border p-3 mt-4">
+              <div class="flex items-center gap-2 mb-3">
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
+                <span class="font-bold">{{
+                  'shared.pending.changes' | translate
+                }}</span>
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                @if (pendingAdd().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.assign' | translate }} ({{
+                          pendingAdd().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (action of pendingAdd(); track action.id) {
+                        <li class="text-sm mb-1">{{ action.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+                @if (pendingRemove().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.remove' | translate }} ({{
+                          pendingRemove().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (action of pendingRemove(); track action.id) {
+                        <li class="text-sm mb-1">{{ action.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+        }
+
+        @if (!loading() && actions().length === 0) {
+          <div class="surface-card p-5 rounded-border shadow-sm text-center">
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
+            <p class="text-muted-color m-0">
+              {{ 'iam.permission.no.actions.for.user' | translate }}
+            </p>
+          </div>
+        }
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}.validation-warning{background-color:var(--f-yellow-50, #fefce8);border-left:4px solid var(--f-yellow-500, #eab308);color:var(--f-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--f-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--f-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i2.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i2.TagComponent, selector: "f-tag", inputs: ["value", "severity", "icon", "rounded", "color", "styleClass", "style"] }, { kind: "component", type: i2.CheckboxComponent, selector: "f-checkbox", inputs: ["label", "binary", "disabled", "readonly", "inputId", "invalid", "indeterminate", "variant", "size", "touched", "styleClass", "style", "checked"], outputs: ["onChange", "onBlur", "touch", "checkedChange"] }, { kind: "component", type: i2.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "filterBy", "filterMatchMode", "filterLocale", "filterPlaceholder", "resetFilterOnHide", "autofocusFilter", "emptyMessage", "emptyFilterMessage", "showClear", "loading", "loadingIcon", "dropdownIcon", "clearIcon", "inputId", "invalid", "touched", "styleClass", "style", "editable", "readonly", "autofocus", "checkmark", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "directive", type: i2.TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "positionStyle", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay", "life", "autoHide", "positionTop", "positionLeft", "escape"] }, { kind: "component", type: i2.TreeTableComponent, selector: "f-treetable", inputs: ["value", "loading", "dataKey", "styleClass", "tableStyle", "scrollable", "scrollHeight", "resizableColumns", "lazy", "totalRecords", "paginator", "first", "rows", "rowsPerPageOptions", "showCurrentPageReport", "currentPageReportTemplate", "globalFilterFields", "filterDelay", "selectionMode", "sortMode", "virtualScroll", "virtualScrollItemSize", "sortField", "sortOrder", "multiSortMeta", "filters", "selection", "contextMenuSelection"], outputs: ["sortFieldChange", "sortOrderChange", "multiSortMetaChange", "filtersChange", "selectionChange", "contextMenuSelectionChange", "onLazyLoad", "onSort", "onFilter", "onNodeExpand", "onNodeCollapse", "onNodeSelect", "onNodeUnselect", "onRowContextMenu"] }, { kind: "component", type: i2.TreeTableTogglerComponent, selector: "f-treetabletoggler", inputs: ["rowNode"] }, { kind: "component", type: i2.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "component", type: UserSelectComponent, selector: "lib-user-select", inputs: ["showClear", "value"], outputs: ["valueChange", "userSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: UserActionSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'flusys-user-action-selector', imports: [
+                        FormsModule,
+                        UiModule,
+                        HasPermissionDirective,
+                        UserSelectComponent,
+                        TranslatePipe,
+                    ], template: `
+    <div class="user-action-selector">
+      <div class="surface-card p-4 rounded-border mb-4 shadow-sm">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
+          <div>
+            <label class="block font-semibold mb-2">
+              <ui-icon name="user" class="mr-2 text-primary"></ui-icon>
+              {{ 'iam.permission.select.user' | translate }}
+            </label>
+            <lib-user-select
+              [value]="selectedUserId()"
+              (valueChange)="selectedUserId.set($event)"
+              [isEditMode]="true"
+              [placeHolder]="
+                'iam.permission.select.user.placeholder' | translate
+              "
+            />
+          </div>
+
+          @if (showBranchSelector()) {
+            <div>
+              <label class="block font-semibold mb-2">
+                <ui-icon name="building" class="mr-2 text-primary"></ui-icon>
+                {{ 'iam.permission.select.branch' | translate }}
+              </label>
+              <f-select
+                [ngModel]="selectedBranchId()"
+                (ngModelChange)="selectedBranchId.set($event)"
+                [options]="filteredBranches()"
+                optionLabel="name"
+                optionValue="id"
+                [placeholder]="
+                  'iam.permission.select.branch.placeholder' | translate
+                "
+                [showClear]="true"
+                [filter]="true"
+                class="w-full"
+              >
+                <ng-template #selectedItem let-branch>
+                  @if (branch) {
+                    <div class="flex items-center gap-2">
+                      <ui-icon name="building" class="text-primary"></ui-icon>
+                      <span class="font-semibold">{{ branch.name }}</span>
+                    </div>
+                  }
+                </ng-template>
+                <ng-template #item let-branch>
+                  <div class="flex items-center gap-2">
+                    <ui-icon name="building" class="text-muted-color"></ui-icon>
+                    <span>{{ branch.name }}</span>
+                  </div>
+                </ng-template>
+              </f-select>
+              <small class="text-muted-color block mt-1">
+                {{
+                  (filteredBranches().length !== 1
+                    ? 'iam.branch.permitted.count.plural'
+                    : 'iam.branch.permitted.count'
+                  ) | translate: { count: filteredBranches().length }
+                }}
+              </small>
+            </div>
+          }
+        </div>
+      </div>
+
+      @if (selectedUserId()) {
+        @if (loading()) {
+          <div class="flex justify-center p-5">
+            <ui-icon name="loader-circle" spin class="text-4xl"></ui-icon>
+          </div>
+        }
+
+        @if (!loading() && actions().length > 0) {
+          <div class="surface-card p-4 rounded-border shadow-sm">
+            <div
+              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">
+                  {{ 'iam.permission.direct.action.permissions' | translate }}
+                </h5>
+                <p class="text-sm text-muted-color m-0">
+                  {{
+                    'iam.permission.actions.available'
+                      | translate: { count: actions().length }
+                  }}
+                </p>
+              </div>
+              <div class="flex flex-wrap gap-2">
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="selectAll()"
+                >
+                  <ui-icon pButtonIcon name="check"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="deselectAll()"
+                >
+                  <ui-icon pButtonIcon name="times"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  *hasPermission="USER_ACTION_PERMISSIONS.ASSIGN"
+                  [disabled]="!canSave() || saving()"
+                  size="small"
+                  (click)="saveChanges()"
+                >
+                  @if (saving()) {
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                  } @else {
+                    <ui-icon pButtonIcon name="save"></ui-icon>
+                  }
+                  <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
+                </button>
+              </div>
+            </div>
+
+            @if (invalidActionsCount() > 0) {
+              <div class="validation-warning rounded-border p-3 mb-4">
+                <div class="flex items-start gap-2">
+                  <ui-icon name="exclamation-triangle" class="text-xl"></ui-icon>
+                  <div class="flex-1">
+                    <span class="font-semibold"
+                      >{{ 'iam.validation.warning.title' | translate }}:</span
+                    >
+                    <p class="text-sm mt-1 mb-0">
+                      {{
+                        (invalidActionsCount() > 1
+                          ? 'iam.validation.unmet.prerequisites.plural'
+                          : 'iam.validation.unmet.prerequisites.singular'
+                        ) | translate: { count: invalidActionsCount() }
+                      }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            }
+
+            <div class="overflow-x-auto -mx-4 sm:mx-0">
+              <f-treetable
+                [value]="treeNodes()"
+                dataKey="id"
+                [tableStyle]="{ 'min-width': '50rem' }"
+              >
+                <ng-template #header>
+                  <tr>
+                    <th class="w-12">
+                      <f-checkbox
+                        [ngModel]="allSelected()"
+                        [binary]="true"
+                        (ngModelChange)="toggleAll()"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
+                        tooltipPosition="top"
+                      />
+                    </th>
+                    <th>{{ 'shared.name' | translate }}</th>
+                    <th class="hidden md:table-cell">
+                      {{ 'shared.code' | translate }}
+                    </th>
+                    <th>{{ 'iam.action.type' | translate }}</th>
+                    <th class="hidden lg:table-cell">
+                      {{ 'shared.description' | translate }}
+                    </th>
+                  </tr>
+                </ng-template>
+                <ng-template #body let-rowNode let-rowData="rowData">
+                  @let hasUnmet = hasUnmetPrerequisites(rowData);
+                  @let tooltip = getTooltip(rowData);
+                  <tr [class.highlight-warning]="hasUnmet">
+                    <td class="w-12">
+                      <f-checkbox
+                        [ngModel]="selectionMap()[rowData.id]"
+                        [binary]="true"
+                        (ngModelChange)="onActionToggle(rowData, $event)"
+                        [fTooltip]="tooltip"
+                        tooltipPosition="top"
+                      />
+                    </td>
+                    <td>
+                      <f-treetabletoggler [rowNode]="rowNode" />
+                      <span class="inline-flex items-center gap-2">
+                        {{ rowData.name }}
+                        @if (hasUnmet) {
+                          <ui-icon name="exclamation-triangle" class="text-orange-500" [fTooltip]="
+                              'iam.validation.unmet.prerequisites.tooltip'
+                                | translate
+                            "
+                            tooltipPosition="top"></ui-icon>
+                        }
+                      </span>
+                    </td>
+                    <td class="hidden md:table-cell">
+                      {{ rowData.code || '-' }}
+                    </td>
+                    <td>
+                      <f-tag
+                        [value]="rowData.actionType"
+                        [severity]="
+                          rowData.actionType === 'backend' ? 'info' : 'success'
+                        "
+                      />
+                    </td>
+                    <td class="hidden lg:table-cell">
+                      {{ rowData.description || '-' }}
+                    </td>
+                  </tr>
+                </ng-template>
+                <ng-template #emptymessage>
+                  <tr>
+                    <td colspan="5" class="text-center p-4 text-muted-color">
+                      @if (loading()) {
+                        <ui-icon name="loader-circle" spin></ui-icon>
+                        {{ 'shared.loading.actions' | translate }}
+                      } @else {
+                        {{ 'iam.permission.no.actions.available' | translate }}
+                      }
+                    </td>
+                  </tr>
+                </ng-template>
+              </f-treetable>
+            </div>
+          </div>
+
+          @if (hasChanges()) {
+            <div class="border border-surface rounded-border p-3 mt-4">
+              <div class="flex items-center gap-2 mb-3">
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
+                <span class="font-bold">{{
+                  'shared.pending.changes' | translate
+                }}</span>
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                @if (pendingAdd().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.assign' | translate }} ({{
+                          pendingAdd().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (action of pendingAdd(); track action.id) {
+                        <li class="text-sm mb-1">{{ action.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+                @if (pendingRemove().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.remove' | translate }} ({{
+                          pendingRemove().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (action of pendingRemove(); track action.id) {
+                        <li class="text-sm mb-1">{{ action.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+        }
+
+        @if (!loading() && actions().length === 0) {
+          <div class="surface-card p-5 rounded-border shadow-sm text-center">
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
+            <p class="text-muted-color m-0">
+              {{ 'iam.permission.no.actions.for.user' | translate }}
+            </p>
+          </div>
+        }
+      }
+    </div>
+  `, styles: [":host{display:block}.validation-warning{background-color:var(--f-yellow-50, #fefce8);border-left:4px solid var(--f-yellow-500, #eab308);color:var(--f-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--f-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--f-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"] }]
+        }], ctorParameters: () => [] });
+
+// Logic Builder Component
+
+/**
+ * Profile Permission Provider Adapter
+ *
+ * Implements IProfilePermissionProvider using ng-iam's PermissionApiService.
+ * Allows ng-auth profile page to display user permissions without
+ * depending on ng-iam directly.
+ *
+ * @example
+ * // In app.config.ts
+ * providers: [
+ *   ...provideIamProviders()
+ * ]
+ *
+ * // In profile component
+ * private readonly permissionProvider = inject(PROFILE_PERMISSION_PROVIDER, { optional: true });
+ */
+class ProfilePermissionProviderAdapter {
+    permissionApi = inject(PermissionApiService);
+    getUserRoles(userId, branchId) {
+        return this.permissionApi
+            .getUserRoles(userId, branchId ? { branchId } : undefined)
+            .pipe(map$1((response) => ({
+            success: response.success,
+            message: response.message,
+            data: (response.data ?? []).map((role) => ({
+                id: role.roleId,
+                name: role.roleName,
+                description: null,
+            })),
+        })));
+    }
+    getUserActions(userId, branchId) {
+        return this.permissionApi
+            .getUserActions(userId, branchId ? { branchId } : undefined)
+            .pipe(map$1((response) => ({
+            success: response.success,
+            message: response.message,
+            data: (response.data ?? []).map((action) => ({
+                id: action.actionId,
+                name: action.actionName,
+                code: action.actionCode,
+                description: null,
+            })),
+        })));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProfilePermissionProviderAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProfilePermissionProviderAdapter });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProfilePermissionProviderAdapter, decorators: [{
+            type: Injectable
+        }] });
+
+/** Registers IAM provider adapters for ng-shared interfaces */
+function provideIamProviders() {
+    return [
+        { provide: PROFILE_PERMISSION_PROVIDER, useClass: ProfilePermissionProviderAdapter },
+    ];
+}
+
+/**
+ * IAM Routes Configuration
+ *
+ * Identity and Access Management routing with permission guards.
+ * - Actions: Permission actions management
+ * - Roles: Role management (conditional on RBAC/FULL mode)
+ * - Permissions: User permission assignments
+ */
+const IAM_ROUTES = [
+    {
+        path: '',
+        resolve: { translations: resolveTranslationModule({ modules: ['iam'], fallbackMessages: { ...IAM_MESSAGES, ...SHARED_MESSAGES } }) },
+        loadComponent: () => import('./flusys-ng-iam-iam-container.component-D0m8u6nu.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-UGKclpFx.mjs').then((m) => m.ActionListPageComponent),
+                    },
+                    {
+                        path: 'new',
+                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-Vc5Toouu.mjs').then((m) => m.ActionFormPageComponent),
+                    },
+                    {
+                        path: ':id',
+                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-Vc5Toouu.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-8NGXCeSZ.mjs').then((m) => m.RoleListPageComponent),
+                    },
+                    {
+                        path: 'new',
+                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-InsxdriD.mjs').then((m) => m.RoleFormPageComponent),
+                    },
+                    {
+                        path: ':id',
+                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-InsxdriD.mjs').then((m) => m.RoleFormPageComponent),
+                    },
+                ],
+            },
+            // Permissions Management (requires any permission tab access)
+            {
+                path: 'permissions',
+                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-x88X4AgJ.mjs').then((m) => m.PermissionPageComponent),
+            },
+            // Default redirect to actions
+            {
+                path: '',
+                redirectTo: 'actions',
+                pathMatch: 'full',
+            },
+        ],
+    },
+];
+
+// ==================== INTERFACES ====================
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ActionApiService as A, CompanyActionSelectorComponent as C, IAM_MESSAGES as I, LogicBuilderComponent as L, MAX_DROPDOWN_ITEMS as M, PermissionApiService as P, RoleApiService as R, UserRoleSelectorComponent as U, ActionType as a, RoleActionSelectorComponent as b, convertActionToTreeNode as c, UserActionSelectorComponent as d, ActionPermissionLogicService as e, IAM_ROUTES as f, MyPermissionsApiService as g, PermissionStateService as h, ProfilePermissionProviderAdapter as i, provideIamProviders as p };
+//# sourceMappingURL=flusys-ng-iam-flusys-ng-iam-CrycDULz.mjs.map