@flusys/ng-iam 4.1.1 → 5.0.1

package/fesm2022/{flusys-ng-iam-flusys-ng-iam-CnVOy_4s.mjs → flusys-ng-iam-flusys-ng-iam-C6I4k78L.mjs}

@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { inject, Injectable, signal, input, output, effect, Component, DestroyRef, computed } from '@angular/core';
+import { inject, Injectable, signal, input, output, effect, Component, computed, DestroyRef } from '@angular/core';
 import { ApiResourceService, PermissionValidatorService, AngularModule, PrimeModule, 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, TRANSLATE_ADAPTER, BaseApiService, isCompanyFeatureEnabled } from '@flusys/ng-core';
 import { ConfirmationService, MessageService } from 'primeng/api';
@@ -33,270 +33,153 @@ var ActionType;
 const MAX_DROPDOWN_ITEMS = 100;
 
 const IAM_MESSAGES = {
-    // Container page
-    'iam.title': 'Identity & Access Management',
-    'iam.subtitle': 'Manage roles, permissions, and access control',
-    // Tabs
-    'iam.tabs.roles': 'Roles',
-    'iam.tabs.actions': 'Actions',
-    'iam.tabs.permissions': 'Permissions',
-    // Administration
-    'iam.administration.title': 'Administration',
-    'iam.administration.subtitle': 'Manage users, companies, and branches',
-    // Users
-    'iam.user.title': 'Users',
-    'iam.user.add': 'Add User',
-    'iam.user.new': 'New User',
-    'iam.user.create': 'Create User',
-    'iam.user.edit': 'Edit User',
-    'iam.user.name': 'Name',
-    'iam.user.email': 'Email',
-    'iam.user.phone': 'Phone',
-    'iam.user.password': 'Password',
-    'iam.user.password.optional': 'Password (leave blank to keep current)',
-    'iam.user.password.placeholder': 'Enter password',
-    'iam.user.name.placeholder': 'Enter full name',
-    'iam.user.email.placeholder': 'Enter email address',
-    'iam.user.phone.placeholder': 'Enter phone number',
-    'iam.user.email.verified': 'Email Verified',
-    'iam.user.no.users': 'No users found',
-    'iam.user.details': 'User Details',
-    'iam.user.auto.assign.to': 'Auto-assign to',
-    'iam.user.assign.role': 'Assign Role',
-    'iam.user.remove.role': 'Remove Role',
-    'iam.user.activate': 'Activate User',
-    'iam.user.deactivate': 'Deactivate User',
-    'iam.user.reset.password': 'Reset Password',
-    'iam.user.assign.branch': 'Assign Branch',
-    'iam.user.delete.title': 'Delete User',
-    'iam.user.delete.success': 'User deleted successfully',
-    // Roles
-    'iam.role.title': 'Roles',
-    'iam.role.new': 'New Role',
-    'iam.role.create': 'Create Role',
-    'iam.role.edit': 'Edit Role',
-    'iam.role.name': 'Role Name',
-    'iam.role.name.placeholder': 'Enter role name',
-    'iam.role.description': 'Role Description',
-    'iam.role.description.placeholder': 'Enter role description',
-    'iam.role.permissions': 'Permissions',
-    'iam.role.assigned.users': 'Assigned Users',
-    'iam.role.no.roles': 'No roles found',
-    'iam.role.no.roles.assigned': 'No roles assigned',
-    'iam.role.delete.title': 'Delete Role',
-    'iam.role.delete.success': 'Role deleted successfully',
-    'iam.role.create.success': 'Role created successfully',
-    'iam.role.update.success': 'Role updated successfully',
+    // 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.update.success': 'Role updated successfully',
-    'role.delete.success': 'Role deleted 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',
-    // Actions
+    '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.create': 'Create Action',
-    'iam.action.edit': 'Edit Action',
     'iam.action.name': 'Action Name',
-    'iam.action.name.placeholder': 'Enter action name',
     'iam.action.code': 'Action Code',
-    'iam.action.code.placeholder': 'Enter action code',
     'iam.action.type': 'Type',
     'iam.action.no.actions': 'No actions found',
-    'iam.action.no.actions.assigned': 'No actions assigned',
-    'iam.action.direct.actions': 'Direct Actions',
     'iam.action.type.backend': 'Backend',
     'iam.action.type.frontend': 'Frontend',
     'iam.action.type.both': 'Both',
-    'iam.action.type.backend.label': 'Backend Only',
-    'iam.action.type.frontend.label': 'Frontend Only',
-    'iam.action.type.both.label': 'Backend & Frontend',
     'iam.action.delete.title': 'Delete Action',
-    'iam.action.delete.success': 'Action deleted successfully',
-    'iam.action.create.success': 'Action created successfully',
-    'iam.action.update.success': 'Action updated successfully',
+    // 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',
-    // Permissions
-    'iam.permission.title': 'Permissions',
-    'iam.permission.create': 'Create Permission',
-    'iam.permission.edit': 'Edit Permission',
-    'iam.permission.name': 'Permission Name',
-    'iam.permission.code': 'Permission Code',
-    'iam.permission.module': 'Module',
-    'iam.permission.action': 'Action',
-    'iam.permission.description': 'Description',
+    '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',
-    'iam.permission.company.permissions': 'Company Permissions',
-    'iam.permission.branch.permissions': 'Branch Permissions',
-    'iam.permission.my.permissions': 'My Permissions',
-    'iam.permission.select.company': 'Select Company',
-    'iam.permission.select.company.placeholder': 'Search and select a company',
+    // 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.permission.action.whitelist': 'Action Whitelist',
-    'iam.permission.action.permissions': 'Action Permissions',
+    '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.role.assignments': 'Role Assignments',
-    'iam.permission.actions.available': '{{count}} actions available',
-    'iam.permission.roles.available': '{{count}} roles available',
-    'iam.permission.no.actions.available': 'No actions available',
-    'iam.permission.no.roles.available': 'No roles available',
-    'iam.permission.no.actions.for.company': 'No actions available for this company',
-    'iam.permission.no.actions.for.role': 'No actions available for this role',
     'iam.permission.no.actions.for.user': 'No actions available for this user',
-    'iam.permission.no.roles.for.user': 'No roles 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',
-    'iam.permission.has.prerequisites': 'Has prerequisites',
-    'iam.permission.requirements': 'Requirements',
-    'iam.permission.company.actions.updated': 'Company actions updated successfully',
-    'iam.permission.role.permissions.updated': 'Role permissions updated successfully',
-    'iam.permission.user.actions.updated': 'User actions updated successfully',
-    'iam.permission.user.roles.updated': 'User roles updated successfully',
+    // 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.prompt': 'Would you like to auto-select the required actions?',
     '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.',
-    'permission.create.success': 'Permission created successfully',
-    'permission.update.success': 'Permission updated successfully',
-    'permission.delete.success': 'Permission deleted successfully',
-    'permission.get.success': 'Permission retrieved successfully',
-    'permission.get.all.success': 'Permissions retrieved successfully',
-    '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',
-    // Access control
-    'iam.access.denied': 'Access Denied',
-    'iam.no.permission': 'You do not have permission to perform this action.',
-    'iam.contact.admin': 'Please contact your administrator for access.',
-    'iam.insufficient.permissions': 'Insufficient permissions',
-    // Company
-    'iam.company.title': 'Companies',
-    'iam.company.add': 'Add Company',
-    'iam.company.new': 'New Company',
-    'iam.company.create': 'Create Company',
-    'iam.company.edit': 'Edit Company',
-    'iam.company.select': 'Select Company',
-    'iam.company.name': 'Company Name',
-    'iam.company.name.placeholder': 'Enter company name',
-    'iam.company.slug': 'Company Slug',
-    'iam.company.slug.placeholder': 'Enter company slug',
-    'iam.company.code': 'Company Code',
-    'iam.company.code.placeholder': 'Enter company code',
-    'iam.company.details': 'Company Details',
-    'iam.company.address': 'Address',
-    'iam.company.address.placeholder': 'Enter company address',
-    'iam.company.phone': 'Phone',
-    'iam.company.phone.placeholder': 'Enter phone number',
-    'iam.company.email': 'Email',
-    'iam.company.email.placeholder': 'Enter email address',
-    'iam.company.website': 'Website',
-    'iam.company.website.placeholder': 'Enter website URL',
-    'iam.company.no.companies': 'No companies found',
-    'iam.company.delete.title': 'Delete Company',
-    'iam.company.delete.success': 'Company deleted successfully',
-    'iam.company.slug.required': 'Company slug is required',
-    // Branch
-    'iam.branch.title': 'Branches',
-    'iam.branch.add': 'Add Branch',
-    'iam.branch.new': 'New Branch',
-    'iam.branch.create': 'Create Branch',
-    'iam.branch.edit': 'Edit Branch',
-    'iam.branch.name': 'Branch Name',
-    'iam.branch.name.placeholder': 'Enter branch name',
-    'iam.branch.slug': 'Branch Slug',
-    'iam.branch.slug.placeholder': 'Enter branch slug',
-    'iam.branch.code': 'Branch Code',
-    'iam.branch.code.placeholder': 'Enter branch code',
-    'iam.branch.company': 'Company',
-    'iam.branch.no.branches': 'No branches found',
-    'iam.branch.select.company.first': 'Please select a company first',
-    'iam.branch.view.branches': 'View Branches',
-    'iam.branch.delete.title': 'Delete Branch',
-    'iam.branch.delete.success': 'Branch deleted successfully',
-    'iam.branch.slug.required': 'Branch slug is required',
-    // Action CRUD messages (API keys)
-    'action.create.success': 'Action created successfully',
-    'action.create.many.success': '{{count}} actions created successfully',
-    'action.get.success': 'Action retrieved successfully',
-    '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',
-    'action.not.found': 'Action not found',
-    // Role CRUD messages (API keys)
-    'role.create.many.success': '{{count}} roles created successfully',
-    'role.update.many.success': '{{count}} roles updated successfully',
-    'role.restore.success': 'Role restored successfully',
-    'role.not.found': 'Role not found',
-    // Role permission messages (API keys)
-    'role.permission.get.success': 'Role permissions retrieved successfully',
-    'role.permission.assign.success': 'Role permissions assigned successfully',
-    'role.permission.actions.success': 'Role actions retrieved successfully',
-    'role.permission.users.success': 'Role users 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',
-    'user.action.permission.assign.success': 'User action permissions assigned successfully',
-    'user.action.permission.revoke.success': 'User action permissions revoked successfully',
-    // Company action permission messages (API keys)
-    'company.action.permission.get.success': 'Company action permissions retrieved successfully',
-    'company.action.permission.assign.success': 'Company action permissions assigned successfully',
-    'company.action.permission.revoke.success': 'Company action permissions revoked 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',
-    // Validation warnings
-    'iam.validation.warning.title': 'Validation Warning',
-    'iam.validation.unmet.prerequisites.singular': '{{count}} selected action has unmet prerequisites. Fix before saving or use auto-fix on save.',
-    'iam.validation.unmet.prerequisites.plural': '{{count}} selected actions have unmet prerequisites. Fix before saving or use auto-fix on save.',
-    'iam.validation.unmet.prerequisites.tooltip': 'This action has unmet prerequisites and will fail validation on save',
-    // Branch selector
-    'iam.branch.permitted.count': '{{count}} permitted branch in current company',
-    'iam.branch.permitted.count.plural': '{{count}} permitted branches in current company',
-    // Tooltips
-    'iam.tooltip.remove.action': 'Click to remove',
-    'iam.tooltip.add.action': 'Click to add (auto-selects required)',
-    '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.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',
-    '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',
+    // 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',
-    // Logic builder
-    '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.conditions': '{{count}} conditions',
-    'iam.logic.select.action': 'Select Action...',
-    'iam.logic.actions.available': '{{count}} available',
-    'iam.logic.remove': 'Remove',
-    'iam.logic.add.condition': 'Add Condition:',
-    'iam.logic.group': 'Group',
-    'iam.logic.action': 'Action',
-    // Permission logic dialogs
+    // 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:',
@@ -305,47 +188,39 @@ const IAM_MESSAGES = {
     '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.missing.prerequisites': 'Missing Prerequisites',
-    'iam.logic.requires.conditions': 'requires the following conditions to be satisfied:',
-    'iam.logic.auto.select.prompt': 'Auto-select will choose {{count}} action(s){{suffix}}.',
-    'iam.logic.minimum.required': ' (minimum required)',
-    'iam.logic.would.you.continue': 'Would you like to continue?',
+    '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.actions.selected.summary': 'Actions Selected',
     '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.dependency.warning': 'Dependency Warning',
     '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': 'Switched to alternative actions to maintain dependencies',
+    '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.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.satisfied': '(satisfied)',
     'iam.logic.missing': '(missing)',
-    'iam.logic.unknown.action': 'Unknown Action',
     'iam.logic.invalid.node': 'Invalid logic node',
     'iam.logic.invalid': '(invalid)',
-    'iam.logic.click.to.toggle': 'Click to toggle',
-    // Pagination templates
-    'iam.pagination.roles.template': 'Showing {first} to {last} of {totalRecords} roles',
-    'iam.pagination.actions.template': 'Showing {first} to {last} of {totalRecords} actions',
-    'iam.pagination.users.template': 'Showing {first} to {last} of {totalRecords} users',
-    'iam.pagination.companies.template': 'Showing {first} to {last} of {totalRecords} companies',
-    'iam.pagination.branches.template': 'Showing {first} to {last} of {totalRecords} branches',
 };
 
 class RoleApiService extends ApiResourceService {
@@ -1121,13 +996,16 @@ class LogicBuilderComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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>
+        <h4 class="text-sm font-semibold m-0">
+          {{ 'iam.logic.title' | translate }}
+        </h4>
         @if (!builderLogic()) {
           <p-button
             [label]="'iam.logic.add.logic' | translate"
             icon="pi pi-plus"
             size="small"
-            (onClick)="initializeLogic()" />
+            (onClick)="initializeLogic()"
+          />
         } @else {
           <p-button
             [label]="'iam.logic.clear.logic' | translate"
@@ -1135,7 +1013,8 @@ class LogicBuilderComponent {
             size="small"
             severity="danger"
             [outlined]="true"
-            (onClick)="clearLogic()" />
+            (onClick)="clearLogic()"
+          />
         }
       </div>
 
@@ -1147,7 +1026,12 @@ class LogicBuilderComponent {
 
           <!-- Root Node -->
           <div class="text-sm bg-surface-0 rounded border border-surface">
-            <ng-container *ngTemplateOutlet="nodeTemplate; context: { $implicit: builderLogic()!, depth: 0 }"></ng-container>
+            <ng-container
+              *ngTemplateOutlet="
+                nodeTemplate;
+                context: { $implicit: builderLogic()!, depth: 0 }
+              "
+            ></ng-container>
           </div>
         </div>
       }
@@ -1155,9 +1039,14 @@ class LogicBuilderComponent {
 
     <!-- Recursive Node Template -->
     <ng-template #nodeTemplate let-node let-depth="depth">
-      <div class="p-3 border-b border-surface" [ngClass]="depth % 2 === 0 ? 'bg-surface-0' : 'bg-surface-50'">
+      <div
+        class="p-3 border-b border-surface"
+        [ngClass]="depth % 2 === 0 ? 'bg-surface-0' : 'bg-surface-50'"
+      >
         <div class="flex items-center gap-3 mb-2">
-          <span class="node-type" [ngClass]="node.type">{{ node.type.toUpperCase() }}</span>
+          <span class="node-type" [ngClass]="node.type">{{
+            node.type.toUpperCase()
+          }}</span>
 
           <div class="flex-1 flex items-center gap-2">
             @if (node.type === 'group') {
@@ -1166,10 +1055,16 @@ class LogicBuilderComponent {
                 class="operator-badge"
                 [ngClass]="node.operator === 'AND' ? 'and' : 'or'"
                 (click)="toggleOperator(node.id)"
-                [title]="'iam.logic.click.to.toggle' | translate">
+                [title]="'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>
+              <span class="text-muted-color text-xs"
+                >({{
+                  'iam.logic.conditions'
+                    | translate: { count: node.children?.length || 0 }
+                }})</span
+              >
             }
 
             @if (node.type === 'action') {
@@ -1177,8 +1072,14 @@ class LogicBuilderComponent {
               <select
                 class="action-select flex-1 p-2 border border-surface rounded text-sm"
                 [ngModel]="node.actionId"
-                (ngModelChange)="updateActionId(node.id, $event)">
-                <option [value]="null">{{ 'iam.logic.select.action' | translate }} ({{ 'iam.logic.actions.available' | translate: { count: actions().length } }})</option>
+                (ngModelChange)="updateActionId(node.id, $event)"
+              >
+                <option [value]="null">
+                  {{ 'iam.logic.select.action' | translate }} ({{
+                    'iam.logic.actions.available'
+                      | translate: { count: actions().length }
+                  }})
+                </option>
                 @for (action of actions(); track action.id) {
                   <option [ngValue]="action.id">{{ action.name }}</option>
                 }
@@ -1193,37 +1094,51 @@ class LogicBuilderComponent {
               severity="danger"
               size="small"
               (onClick)="removeNode(node.id)"
-              [pTooltip]="'iam.logic.remove' | translate" />
+              [pTooltip]="'shared.remove' | translate"
+            />
           </div>
         </div>
 
         <!-- Children for group nodes -->
-        @if (node.type === 'group' && node.children && node.children.length > 0) {
+        @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>
+              <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="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">
               <p-button
                 [label]="'iam.logic.group' | translate"
                 icon="pi pi-sitemap"
                 size="small"
                 [outlined]="true"
-                (onClick)="addChildNode(node.id, 'group')" />
+                (onClick)="addChildNode(node.id, 'group')"
+              />
               <p-button
                 [label]="'iam.logic.action' | translate"
                 icon="pi pi-bolt"
                 size="small"
                 severity="success"
                 [outlined]="true"
-                (onClick)="addChildNode(node.id, 'action')" />
+                (onClick)="addChildNode(node.id, 'action')"
+              />
             </div>
           </div>
         }
@@ -1236,13 +1151,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             args: [{ selector: 'lib-logic-builder', imports: [AngularModule, PrimeModule, 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>
+        <h4 class="text-sm font-semibold m-0">
+          {{ 'iam.logic.title' | translate }}
+        </h4>
         @if (!builderLogic()) {
           <p-button
             [label]="'iam.logic.add.logic' | translate"
             icon="pi pi-plus"
             size="small"
-            (onClick)="initializeLogic()" />
+            (onClick)="initializeLogic()"
+          />
         } @else {
           <p-button
             [label]="'iam.logic.clear.logic' | translate"
@@ -1250,7 +1168,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             size="small"
             severity="danger"
             [outlined]="true"
-            (onClick)="clearLogic()" />
+            (onClick)="clearLogic()"
+          />
         }
       </div>
 
@@ -1262,7 +1181,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 
           <!-- Root Node -->
           <div class="text-sm bg-surface-0 rounded border border-surface">
-            <ng-container *ngTemplateOutlet="nodeTemplate; context: { $implicit: builderLogic()!, depth: 0 }"></ng-container>
+            <ng-container
+              *ngTemplateOutlet="
+                nodeTemplate;
+                context: { $implicit: builderLogic()!, depth: 0 }
+              "
+            ></ng-container>
           </div>
         </div>
       }
@@ -1270,9 +1194,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 
     <!-- Recursive Node Template -->
     <ng-template #nodeTemplate let-node let-depth="depth">
-      <div class="p-3 border-b border-surface" [ngClass]="depth % 2 === 0 ? 'bg-surface-0' : 'bg-surface-50'">
+      <div
+        class="p-3 border-b border-surface"
+        [ngClass]="depth % 2 === 0 ? 'bg-surface-0' : 'bg-surface-50'"
+      >
         <div class="flex items-center gap-3 mb-2">
-          <span class="node-type" [ngClass]="node.type">{{ node.type.toUpperCase() }}</span>
+          <span class="node-type" [ngClass]="node.type">{{
+            node.type.toUpperCase()
+          }}</span>
 
           <div class="flex-1 flex items-center gap-2">
             @if (node.type === 'group') {
@@ -1281,10 +1210,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 class="operator-badge"
                 [ngClass]="node.operator === 'AND' ? 'and' : 'or'"
                 (click)="toggleOperator(node.id)"
-                [title]="'iam.logic.click.to.toggle' | translate">
+                [title]="'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>
+              <span class="text-muted-color text-xs"
+                >({{
+                  'iam.logic.conditions'
+                    | translate: { count: node.children?.length || 0 }
+                }})</span
+              >
             }
 
             @if (node.type === 'action') {
@@ -1292,8 +1227,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               <select
                 class="action-select flex-1 p-2 border border-surface rounded text-sm"
                 [ngModel]="node.actionId"
-                (ngModelChange)="updateActionId(node.id, $event)">
-                <option [value]="null">{{ 'iam.logic.select.action' | translate }} ({{ 'iam.logic.actions.available' | translate: { count: actions().length } }})</option>
+                (ngModelChange)="updateActionId(node.id, $event)"
+              >
+                <option [value]="null">
+                  {{ 'iam.logic.select.action' | translate }} ({{
+                    'iam.logic.actions.available'
+                      | translate: { count: actions().length }
+                  }})
+                </option>
                 @for (action of actions(); track action.id) {
                   <option [ngValue]="action.id">{{ action.name }}</option>
                 }
@@ -1308,37 +1249,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               severity="danger"
               size="small"
               (onClick)="removeNode(node.id)"
-              [pTooltip]="'iam.logic.remove' | translate" />
+              [pTooltip]="'shared.remove' | translate"
+            />
           </div>
         </div>
 
         <!-- Children for group nodes -->
-        @if (node.type === 'group' && node.children && node.children.length > 0) {
+        @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>
+              <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="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">
               <p-button
                 [label]="'iam.logic.group' | translate"
                 icon="pi pi-sitemap"
                 size="small"
                 [outlined]="true"
-                (onClick)="addChildNode(node.id, 'group')" />
+                (onClick)="addChildNode(node.id, 'group')"
+              />
               <p-button
                 [label]="'iam.logic.action' | translate"
                 icon="pi pi-bolt"
                 size="small"
                 severity="success"
                 [outlined]="true"
-                (onClick)="addChildNode(node.id, 'action')" />
+                (onClick)="addChildNode(node.id, 'action')"
+              />
             </div>
           </div>
         }
@@ -1406,92 +1361,35 @@ function convertActionToTreeNode(actions) {
     return actions.map(convert);
 }
 
-/**
- * Role-Action Selector Component
- *
- * Manages role action permissions with hierarchical tree view and intelligent dependency management.
- *
- * **Architecture:**
- * - Presentation: TreeTable for hierarchical display
- * - Business Logic: Flat action list for selection/validation
- * - State: Signals with computed dependencies
- *
- * **Core Features:**
- * - Role dropdown with async loading
- * - Hierarchical TreeTable with expand/collapse
- * - Action permission assignment (add/remove)
- * - Real-time change tracking
- *
- * **Dependency Management:**
- * - Auto-selection with AND/OR logic
- * - Dependency detection on uncheck
- * - Cascade remove for AND dependencies
- * - Visual warnings for unmet prerequisites
- * - Pre-save validation with auto-fix
- *
- * **Performance:**
- * - Computed signals for reactive updates
- * - Memoized prerequisite validation
- * - AbortController for request cancellation
- *
- * @example
- * ```html
- * <flusys-role-action-selector />
- * ```
- */
-class RoleActionSelectorComponent {
-    // Permission constants for template
-    ROLE_ACTION_PERMISSIONS = ROLE_ACTION_PERMISSIONS;
-    // Dependencies
-    destroyRef = inject(DestroyRef);
-    roleApi = inject(RoleApiService);
-    actionApi = inject(ActionApiService);
-    permissionApi = inject(PermissionApiService);
-    messageService = inject(MessageService);
+class BaseActionSelectorComponent {
     permissionLogic = inject(ActionPermissionLogicService);
     translateAdapter = inject(TRANSLATE_ADAPTER, { optional: true });
-    translate(key, vars) {
-        return this.translateAdapter?.translate(key, vars) ?? key;
-    }
-    // State - Role Selection
-    selectedRoleId = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedRoleId" }] : []));
-    roles = signal([], ...(ngDevMode ? [{ debugName: "roles" }] : []));
-    // State - Loading/Saving
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     saving = signal(false, ...(ngDevMode ? [{ debugName: "saving" }] : []));
-    // State - Actions (Business Logic)
     _actions = signal([], ...(ngDevMode ? [{ debugName: "_actions" }] : []));
     actions = this._actions.asReadonly();
-    // State - Actions (Display)
     _actionsTree = signal([], ...(ngDevMode ? [{ debugName: "_actionsTree" }] : []));
     actionsTree = this._actionsTree.asReadonly();
-    // State - Selection
     _selectionMap = signal({}, ...(ngDevMode ? [{ debugName: "_selectionMap" }] : []));
     selectionMap = this._selectionMap.asReadonly();
     _initialSelection = signal({}, ...(ngDevMode ? [{ debugName: "_initialSelection" }] : []));
     initialSelection = this._initialSelection.asReadonly();
-    // Computed - Tree Nodes (for PrimeNG TreeTable)
     treeNodes = computed(() => convertActionToTreeNode(this.actionsTree()), ...(ngDevMode ? [{ debugName: "treeNodes" }] : []));
-    // Computed - Selection State
     allSelected = computed(() => {
         const selMap = this.selectionMap();
         const total = this.actions().length;
         if (total === 0)
             return false;
-        const selected = Object.values(selMap).filter((v) => v).length;
-        return selected === total;
+        return Object.values(selMap).filter((v) => v).length === total;
     }, ...(ngDevMode ? [{ debugName: "allSelected" }] : []));
-    // 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)
+        if (currentKeys.length !== Object.keys(initial).length)
             return true;
         return currentKeys.some((key) => current[key] !== initial[key]);
     }, ...(ngDevMode ? [{ debugName: "hasChanges" }] : []));
-    // Computed - Validation
     actionsWithUnmetPrerequisites = computed(() => {
         const selMap = this.selectionMap();
         const allActions = this.actions();
@@ -1504,41 +1402,105 @@ class RoleActionSelectorComponent {
         return unmetSet;
     }, ...(ngDevMode ? [{ debugName: "actionsWithUnmetPrerequisites" }] : []));
     invalidActionsCount = computed(() => this.actionsWithUnmetPrerequisites().size, ...(ngDevMode ? [{ debugName: "invalidActionsCount" }] : []));
-    // Computed - Pending Changes
     pendingAdd = computed(() => {
         const current = this.selectionMap();
         const initial = this.initialSelection();
-        const allActions = this.actions();
-        return allActions.filter((action) => current[action.id] && !initial[action.id]);
+        return this.actions().filter((a) => current[a.id] && !initial[a.id]);
     }, ...(ngDevMode ? [{ debugName: "pendingAdd" }] : []));
     pendingRemove = computed(() => {
         const current = this.selectionMap();
         const initial = this.initialSelection();
-        const allActions = this.actions();
-        return allActions.filter((action) => !current[action.id] && initial[action.id]);
+        return this.actions().filter((a) => !current[a.id] && initial[a.id]);
     }, ...(ngDevMode ? [{ debugName: "pendingRemove" }] : []));
-    // Computed - Save Button State
-    canSave = computed(() => {
-        return (this.hasChanges() && !this.saving() && this.invalidActionsCount() === 0);
-    }, ...(ngDevMode ? [{ debugName: "canSave" }] : []));
-    // AbortController for data loading
-    loadDataAbortController = null;
-    constructor() {
-        this.loadRoles();
-        // Cleanup on destroy
-        this.destroyRef.onDestroy(() => {
-            this.loadDataAbortController?.abort();
-        });
-        // Effect: Load data when role selection changes
+    canSave = computed(() => this.hasChanges() && !this.saving() && this.invalidActionsCount() === 0, ...(ngDevMode ? [{ debugName: "canSave" }] : []));
+    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, ...(ngDevMode ? [{ debugName: "selectedRoleId" }] : []));
+    roles = signal([], ...(ngDevMode ? [{ debugName: "roles" }] : []));
+    loadDataAbortController = null;
+    constructor() {
+        super();
+        this.destroyRef.onDestroy(() => {
+            this.loadDataAbortController?.abort();
+        });
+        this.loadRoles();
         effect(() => {
             const roleId = this.selectedRoleId();
-            // Abort previous request
             this.loadDataAbortController?.abort();
             if (roleId) {
                 this.loadDataAbortController = new AbortController();
                 this.onRoleChange(this.loadDataAbortController.signal).catch((err) => {
                     if (err.name !== 'AbortError') {
-                        // Error toast handled by global interceptor
                         this.loading.set(false);
                     }
                 });
@@ -1548,23 +1510,22 @@ class RoleActionSelectorComponent {
             }
         });
     }
-    /**
-     * Load roles from API
-     */
+    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 firstValueFrom(this.roleApi.getAll('', {
+            const response = await this.roleApi.getAll({
                 pagination: { currentPage: 0, pageSize: MAX_DROPDOWN_ITEMS },
-            }));
+            });
             this.roles.set(response?.data ?? []);
         }
         catch {
-            // Error toast handled by global interceptor
         }
     }
-    /**
-     * Load actions and assignments for selected role
-     */
     async onRoleChange(signal) {
         const roleId = this.selectedRoleId();
         if (!roleId)
@@ -1574,26 +1535,17 @@ class RoleActionSelectorComponent {
             const actionsResponse = await firstValueFrom(this.actionApi.getActionsForPermission());
             if (signal.aborted)
                 return;
-            // Get flat list (filtered by company if enabled)
             const flatActions = (actionsResponse?.data ?? []).filter((a) => !!a.id);
-            // Build tree structure from flat list with parentId
             const actionsTree = buildTreeFromFlat(flatActions);
-            // Store both representations
             this._actionsTree.set(actionsTree);
             this._actions.set(flatActions);
-            // Load existing assignments
             const assignedResponse = await firstValueFrom(this.permissionApi.getRoleActions(roleId));
             if (signal.aborted)
                 return;
             const assignedIds = new Set((assignedResponse?.data || []).map((a) => a.actionId));
-            // Build selection map
-            const selMap = {};
-            for (const action of flatActions) {
-                if (action.id) {
-                    selMap[action.id] = assignedIds.has(action.id);
-                }
-            }
-            this.applySelection(selMap);
+            const selMap = this.buildSelectionMap(flatActions, (action) => assignedIds.has(action.id));
+            this._selectionMap.set(selMap);
+            this._initialSelection.set({ ...selMap });
         }
         finally {
             if (!signal.aborted) {
@@ -1601,146 +1553,63 @@ class RoleActionSelectorComponent {
             }
         }
     }
-    /**
-     * Get tooltip for action checkbox
-     */
-    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}`;
-            }
-        }
-        if (isCurrentlySelected) {
-            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')}`;
-    }
-    /**
-     * Check if action has unmet prerequisites
-     */
-    hasUnmetPrerequisites(action) {
-        return action.id
-            ? this.actionsWithUnmetPrerequisites().has(action.id)
-            : false;
-    }
-    /**
-     * Handle action toggle with dependency management
-     */
-    onActionToggle(action, newValue) {
-        if (!newValue) {
-            // Unchecking - validate dependencies
-            this.permissionLogic.handleUncheck(action, this.selectionMap(), this.actions(), (newMap) => this._selectionMap.set(newMap));
-        }
-        else {
-            // Checking - validate prerequisites
-            this.permissionLogic.handleCheck(action, this.selectionMap(), this.actions(), (newMap) => this._selectionMap.set(newMap), (previousState) => this._selectionMap.set(previousState));
-        }
-    }
-    toggleAll() {
-        this.setAllSelection(!this.allSelected());
-    }
-    selectAll() {
-        this.setAllSelection(true);
-    }
-    deselectAll() {
-        this.setAllSelection(false);
-    }
-    setAllSelection(value) {
-        const selMap = {};
-        for (const action of this.actions()) {
-            selMap[action.id] = value;
-        }
-        this._selectionMap.set(selMap);
-    }
-    /**
-     * Save changes to backend
-     */
     async saveChanges() {
         const roleId = this.selectedRoleId();
         if (!roleId)
             return;
-        // Pre-save validation
         const invalidActions = this.permissionLogic.getActionsWithUnmetPrerequisites(this.selectionMap(), this.actions());
         if (invalidActions.length > 0) {
             this.permissionLogic.showValidationErrorDialog(invalidActions, this.selectionMap(), this.actions(), (newMap) => this._selectionMap.set(newMap));
             return;
         }
-        // Build payload
         const items = this.buildPayloadItems();
         if (items.length === 0)
             return;
         this.saving.set(true);
         try {
-            const response = await firstValueFrom(this.permissionApi.assignRoleActions({
-                roleId,
-                items,
-            }));
+            const response = await firstValueFrom(this.permissionApi.assignRoleActions({ roleId, items }));
             this.messageService.add({
                 severity: 'success',
                 summary: this.translate('shared.success'),
-                detail: response?.data?.message || this.translate('iam.permission.role.permissions.updated'),
+                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);
         }
     }
-    applySelection(selMap) {
-        this._selectionMap.set(selMap);
-        this._initialSelection.set({ ...selMap });
-    }
-    buildPayloadItems() {
-        const items = [];
-        for (const action of this.pendingAdd()) {
-            items.push({ id: action.id, action: 'add' });
-        }
-        for (const action of this.pendingRemove()) {
-            items.push({ id: action.id, action: 'remove' });
-        }
-        return items;
-    }
-    resetState() {
-        this._actionsTree.set([]);
-        this._actions.set([]);
-        this._selectionMap.set({});
-        this._initialSelection.set({});
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: RoleActionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: RoleActionSelectorComponent, isStandalone: true, selector: "flusys-role-action-selector", ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: RoleActionSelectorComponent, isStandalone: true, selector: "flusys-role-action-selector", usesInheritance: true, ngImport: i0, template: `
     <div class="role-action-selector">
-      <!-- Role Selector -->
       <div class="mb-4">
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           <div>
-            <label class="block font-semibold mb-2">{{ 'iam.permission.select.role' | translate }}</label>
+            <label class="block font-semibold mb-2">{{
+              'iam.permission.select.role' | translate
+            }}</label>
             <p-select
               [ngModel]="selectedRoleId()"
               (ngModelChange)="selectedRoleId.set($event)"
               [options]="roles()"
               optionLabel="name"
               optionValue="id"
-              [placeholder]="'iam.permission.select.role.placeholder' | translate"
+              [placeholder]="
+                'iam.permission.select.role.placeholder' | translate
+              "
               [showClear]="true"
               [filter]="true"
-              styleClass="w-full"
+              class="w-full"
             />
           </div>
         </div>
       </div>
 
       @if (selectedRoleId()) {
-        <!-- Loading State -->
         @if (loading()) {
           <div
             class="surface-card p-5 rounded-border shadow-sm flex justify-center"
@@ -1749,16 +1618,20 @@ class RoleActionSelectorComponent {
           </div>
         }
 
-        <!-- Action List -->
         @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>
+                <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 } }}
+                  {{
+                    'iam.permission.actions.available'
+                      | translate: { count: actions().length }
+                  }}
                 </p>
               </div>
               <div class="flex flex-wrap gap-2">
@@ -1791,27 +1664,32 @@ class RoleActionSelectorComponent {
               </div>
             </div>
 
-            <!-- Validation Warning -->
             @if (invalidActionsCount() > 0) {
               <div class="validation-warning rounded-border p-3 mb-4">
                 <div class="flex items-start gap-2">
                   <i class="pi pi-exclamation-triangle text-xl"></i>
                   <div class="flex-1">
-                    <span class="font-semibold">{{ 'iam.validation.warning.title' | translate }}:</span>
+                    <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() } }}
+                      {{
+                        (invalidActionsCount() > 1
+                          ? 'iam.validation.unmet.prerequisites.plural'
+                          : 'iam.validation.unmet.prerequisites.singular'
+                        ) | translate: { count: invalidActionsCount() }
+                      }}
                     </p>
                   </div>
                 </div>
               </div>
             }
 
-            <!-- Action Tree Table -->
             <div class="overflow-x-auto -mx-4 sm:mx-0">
               <p-treeTable
                 [value]="treeNodes()"
                 dataKey="id"
-                styleClass="p-treetable-sm"
+                class="p-treetable-sm"
                 [tableStyle]="{ 'min-width': '50rem' }"
               >
                 <ng-template #header>
@@ -1826,79 +1704,100 @@ class RoleActionSelectorComponent {
                       />
                     </th>
                     <th>{{ 'shared.name' | translate }}</th>
-                    <th class="hidden md:table-cell">{{ 'shared.code' | 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>
+                    <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">
+                      <p-checkbox
+                        [ngModel]="selectionMap()[rowData.id]"
+                        [binary]="true"
+                        (ngModelChange)="onActionToggle(rowData, $event)"
+                        [pTooltip]="tooltip"
+                        tooltipPosition="top"
+                      />
+                    </td>
+                    <td>
+                      <p-treeTableToggler [rowNode]="rowNode" />
+                      <span class="inline-flex items-center gap-2">
+                        {{ rowData.name }}
+                        @if (hasUnmet) {
+                          <i
+                            class="pi pi-exclamation-triangle text-orange-500"
+                            [pTooltip]="
+                              'iam.validation.unmet.prerequisites.tooltip'
+                                | translate
+                            "
+                            tooltipPosition="top"
+                          ></i>
+                        }
+                      </span>
+                    </td>
+                    <td class="hidden md:table-cell">
+                      {{ rowData.code || '-' }}
+                    </td>
+                    <td>
+                      <p-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 #body let-rowNode let-rowData="rowData">
-                <tr [class.highlight-warning]="hasUnmetPrerequisites(rowData)">
-                  <td class="w-12">
-                    <p-checkbox
-                      [ngModel]="selectionMap()[rowData.id]"
-                      [binary]="true"
-                      (ngModelChange)="onActionToggle(rowData, $event)"
-                      [pTooltip]="getTooltip(rowData)"
-                      tooltipPosition="top"
-                    />
-                  </td>
-                  <td>
-                    <p-treeTableToggler [rowNode]="rowNode" />
-                    <span class="inline-flex items-center gap-2">
-                      {{ rowData.name }}
-                      @if (hasUnmetPrerequisites(rowData)) {
-                        <i
-                          class="pi pi-exclamation-triangle text-orange-500"
-                          [pTooltip]="'iam.validation.unmet.prerequisites.tooltip' | translate"
-                          tooltipPosition="top"
-                        ></i>
+                <ng-template #emptymessage>
+                  <tr>
+                    <td colspan="5" class="text-center p-4 text-muted-color">
+                      @if (loading()) {
+                        <i class="pi pi-spin pi-spinner"></i>
+                        {{ 'shared.loading.actions' | translate }}
+                      } @else {
+                        {{ 'iam.permission.no.actions.available' | translate }}
                       }
-                    </span>
-                  </td>
-                  <td class="hidden md:table-cell">{{ rowData.code || '-' }}</td>
-                  <td>
-                    <p-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()) {
-                      <i class="pi pi-spin pi-spinner"></i> {{ 'shared.loading.actions' | translate }}
-                    } @else { {{ 'iam.permission.no.actions.available' | translate }} }
-                  </td>
-                </tr>
-              </ng-template>
+                    </td>
+                  </tr>
+                </ng-template>
               </p-treeTable>
             </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">
                 <i class="pi pi-info-circle text-primary"></i>
-                <span class="font-bold">{{ 'shared.pending.changes' | translate }}</span>
+                <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">
                       <i class="pi pi-plus-circle text-green-500"></i>
-                      <strong class="text-sm">{{ 'shared.to.add' | translate }} ({{ pendingAdd().length }})</strong>
+                      <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) {
@@ -1911,7 +1810,11 @@ class RoleActionSelectorComponent {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
                       <i class="pi pi-minus-circle text-red-500"></i>
-                      <strong class="text-sm">{{ 'shared.to.remove' | translate }} ({{ pendingRemove().length }})</strong>
+                      <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) {
@@ -1927,7 +1830,9 @@ class RoleActionSelectorComponent {
 
         @if (!loading() && actions().length === 0) {
           <div class="surface-card p-5 rounded-border shadow-sm text-center">
-            <i class="pi pi-info-circle text-muted-color mb-3 block text-5xl"></i>
+            <i
+              class="pi pi-info-circle text-muted-color mb-3 block text-5xl"
+            ></i>
             <p class="text-muted-color m-0">
               {{ 'iam.permission.no.actions.for.role' | translate }}
             </p>
@@ -1935,34 +1840,36 @@ class RoleActionSelectorComponent {
         }
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}.validation-warning{background-color:var(--p-yellow-50, #fefce8);border-left:4px solid var(--p-yellow-500, #eab308);color:var(--p-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--p-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--p-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i7.TreeTable, selector: "p-treeTable, p-treetable, p-tree-table", inputs: ["columns", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight", "selectionKeys", "showGridlines"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "component", type: i7.TreeTableToggler, selector: "p-treeTableToggler, p-treetabletoggler, p-treetable-toggler", inputs: ["rowNode"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, styles: [":host{display:block}.validation-warning{background-color:var(--p-yellow-50, #fefce8);border-left:4px solid var(--p-yellow-500, #eab308);color:var(--p-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--p-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--p-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i7.TreeTable, selector: "p-treeTable, p-treetable, p-tree-table", inputs: ["columns", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight", "selectionKeys", "showGridlines"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "component", type: i7.TreeTableToggler, selector: "p-treeTableToggler, p-treetabletoggler, p-treetable-toggler", inputs: ["rowNode"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: RoleActionSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'flusys-role-action-selector', imports: [CommonModule, FormsModule, PrimeModule, HasPermissionDirective, TranslatePipe], template: `
+            args: [{ selector: 'flusys-role-action-selector', imports: [FormsModule, PrimeModule, HasPermissionDirective, TranslatePipe], template: `
     <div class="role-action-selector">
-      <!-- Role Selector -->
       <div class="mb-4">
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           <div>
-            <label class="block font-semibold mb-2">{{ 'iam.permission.select.role' | translate }}</label>
+            <label class="block font-semibold mb-2">{{
+              'iam.permission.select.role' | translate
+            }}</label>
             <p-select
               [ngModel]="selectedRoleId()"
               (ngModelChange)="selectedRoleId.set($event)"
               [options]="roles()"
               optionLabel="name"
               optionValue="id"
-              [placeholder]="'iam.permission.select.role.placeholder' | translate"
+              [placeholder]="
+                'iam.permission.select.role.placeholder' | translate
+              "
               [showClear]="true"
               [filter]="true"
-              styleClass="w-full"
+              class="w-full"
             />
           </div>
         </div>
       </div>
 
       @if (selectedRoleId()) {
-        <!-- Loading State -->
         @if (loading()) {
           <div
             class="surface-card p-5 rounded-border shadow-sm flex justify-center"
@@ -1971,16 +1878,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           </div>
         }
 
-        <!-- Action List -->
         @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>
+                <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 } }}
+                  {{
+                    'iam.permission.actions.available'
+                      | translate: { count: actions().length }
+                  }}
                 </p>
               </div>
               <div class="flex flex-wrap gap-2">
@@ -2013,27 +1924,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               </div>
             </div>
 
-            <!-- Validation Warning -->
             @if (invalidActionsCount() > 0) {
               <div class="validation-warning rounded-border p-3 mb-4">
                 <div class="flex items-start gap-2">
                   <i class="pi pi-exclamation-triangle text-xl"></i>
                   <div class="flex-1">
-                    <span class="font-semibold">{{ 'iam.validation.warning.title' | translate }}:</span>
+                    <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() } }}
+                      {{
+                        (invalidActionsCount() > 1
+                          ? 'iam.validation.unmet.prerequisites.plural'
+                          : 'iam.validation.unmet.prerequisites.singular'
+                        ) | translate: { count: invalidActionsCount() }
+                      }}
                     </p>
                   </div>
                 </div>
               </div>
             }
 
-            <!-- Action Tree Table -->
             <div class="overflow-x-auto -mx-4 sm:mx-0">
               <p-treeTable
                 [value]="treeNodes()"
                 dataKey="id"
-                styleClass="p-treetable-sm"
+                class="p-treetable-sm"
                 [tableStyle]="{ 'min-width': '50rem' }"
               >
                 <ng-template #header>
@@ -2048,79 +1964,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                       />
                     </th>
                     <th>{{ 'shared.name' | translate }}</th>
-                    <th class="hidden md:table-cell">{{ 'shared.code' | 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>
+                    <th class="hidden lg:table-cell">
+                      {{ 'iam.permission.requirements' | translate }}
+                    </th>
                   </tr>
                 </ng-template>
-              <ng-template #body let-rowNode let-rowData="rowData">
-                <tr [class.highlight-warning]="hasUnmetPrerequisites(rowData)">
-                  <td class="w-12">
-                    <p-checkbox
-                      [ngModel]="selectionMap()[rowData.id]"
-                      [binary]="true"
-                      (ngModelChange)="onActionToggle(rowData, $event)"
-                      [pTooltip]="getTooltip(rowData)"
-                      tooltipPosition="top"
-                    />
-                  </td>
-                  <td>
-                    <p-treeTableToggler [rowNode]="rowNode" />
-                    <span class="inline-flex items-center gap-2">
-                      {{ rowData.name }}
-                      @if (hasUnmetPrerequisites(rowData)) {
-                        <i
-                          class="pi pi-exclamation-triangle text-orange-500"
-                          [pTooltip]="'iam.validation.unmet.prerequisites.tooltip' | translate"
-                          tooltipPosition="top"
-                        ></i>
+                <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">
+                      <p-checkbox
+                        [ngModel]="selectionMap()[rowData.id]"
+                        [binary]="true"
+                        (ngModelChange)="onActionToggle(rowData, $event)"
+                        [pTooltip]="tooltip"
+                        tooltipPosition="top"
+                      />
+                    </td>
+                    <td>
+                      <p-treeTableToggler [rowNode]="rowNode" />
+                      <span class="inline-flex items-center gap-2">
+                        {{ rowData.name }}
+                        @if (hasUnmet) {
+                          <i
+                            class="pi pi-exclamation-triangle text-orange-500"
+                            [pTooltip]="
+                              'iam.validation.unmet.prerequisites.tooltip'
+                                | translate
+                            "
+                            tooltipPosition="top"
+                          ></i>
+                        }
+                      </span>
+                    </td>
+                    <td class="hidden md:table-cell">
+                      {{ rowData.code || '-' }}
+                    </td>
+                    <td>
+                      <p-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>
                       }
-                    </span>
-                  </td>
-                  <td class="hidden md:table-cell">{{ rowData.code || '-' }}</td>
-                  <td>
-                    <p-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()) {
-                      <i class="pi pi-spin pi-spinner"></i> {{ 'shared.loading.actions' | translate }}
-                    } @else { {{ 'iam.permission.no.actions.available' | translate }} }
-                  </td>
-                </tr>
-              </ng-template>
+                    </td>
+                  </tr>
+                </ng-template>
+                <ng-template #emptymessage>
+                  <tr>
+                    <td colspan="5" class="text-center p-4 text-muted-color">
+                      @if (loading()) {
+                        <i class="pi pi-spin pi-spinner"></i>
+                        {{ 'shared.loading.actions' | translate }}
+                      } @else {
+                        {{ 'iam.permission.no.actions.available' | translate }}
+                      }
+                    </td>
+                  </tr>
+                </ng-template>
               </p-treeTable>
             </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">
                 <i class="pi pi-info-circle text-primary"></i>
-                <span class="font-bold">{{ 'shared.pending.changes' | translate }}</span>
+                <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">
                       <i class="pi pi-plus-circle text-green-500"></i>
-                      <strong class="text-sm">{{ 'shared.to.add' | translate }} ({{ pendingAdd().length }})</strong>
+                      <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) {
@@ -2133,7 +2070,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                   <div>
                     <div class="flex items-center gap-2 mb-2">
                       <i class="pi pi-minus-circle text-red-500"></i>
-                      <strong class="text-sm">{{ 'shared.to.remove' | translate }} ({{ pendingRemove().length }})</strong>
+                      <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) {
@@ -2149,7 +2090,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 
         @if (!loading() && actions().length === 0) {
           <div class="surface-card p-5 rounded-border shadow-sm text-center">
-            <i class="pi pi-info-circle text-muted-color mb-3 block text-5xl"></i>
+            <i
+              class="pi pi-info-circle text-muted-color mb-3 block text-5xl"
+            ></i>
             <p class="text-muted-color m-0">
               {{ 'iam.permission.no.actions.for.role' | translate }}
             </p>
@@ -2160,140 +2103,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
   `, styles: [":host{display:block}.validation-warning{background-color:var(--p-yellow-50, #fefce8);border-left:4px solid var(--p-yellow-500, #eab308);color:var(--p-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--p-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--p-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"] }]
         }], ctorParameters: () => [] });
 
-/**
- * Company-Action Selector Component
- *
- * Manages company action whitelisting with hierarchical tree view and intelligent dependency management.
- *
- * **Architecture:**
- * - Presentation: TreeTable for hierarchical display
- * - Business Logic: Flat action list for selection/validation
- * - State: Signals with computed dependencies
- *
- * **Core Features:**
- * - Company dropdown with async loading
- * - Hierarchical TreeTable with expand/collapse
- * - Action whitelist management (add/remove)
- * - Real-time change tracking
- *
- * **Dependency Management:**
- * - Auto-selection with AND/OR logic
- * - Dependency detection on uncheck
- * - Cascade remove for AND dependencies
- * - Visual warnings for unmet prerequisites
- * - Pre-save validation with auto-fix
- *
- * **Performance:**
- * - Computed signals for reactive updates
- * - Memoized prerequisite validation
- * - AbortController for request cancellation
- *
- * @example
- * ```html
- * <flusys-company-action-selector />
- * ```
- */
-class CompanyActionSelectorComponent {
-    // Permission constants for template
+class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
     COMPANY_ACTION_PERMISSIONS = COMPANY_ACTION_PERMISSIONS;
-    // Dependencies
     companyApiProvider = inject(COMPANY_API_PROVIDER);
     actionApi = inject(ActionApiService);
     permissionApi = inject(PermissionApiService);
     messageService = inject(MessageService);
     confirmationService = inject(ConfirmationService);
-    permissionLogic = inject(ActionPermissionLogicService);
     destroyRef = inject(DestroyRef);
-    translateAdapter = inject(TRANSLATE_ADAPTER, { optional: true });
-    translate(key, vars) {
-        return this.translateAdapter?.translate(key, vars) ?? key;
-    }
-    // State - Company Selection
     selectedCompanyId = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedCompanyId" }] : []));
     companies = signal([], ...(ngDevMode ? [{ debugName: "companies" }] : []));
-    // State - Loading/Saving
-    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-    saving = signal(false, ...(ngDevMode ? [{ debugName: "saving" }] : []));
-    // State - Actions (Business Logic)
-    _actions = signal([], ...(ngDevMode ? [{ debugName: "_actions" }] : []));
-    actions = this._actions.asReadonly();
-    // State - Actions (Display)
-    _actionsTree = signal([], ...(ngDevMode ? [{ debugName: "_actionsTree" }] : []));
-    actionsTree = this._actionsTree.asReadonly();
-    // State - Selection
-    _selectionMap = signal({}, ...(ngDevMode ? [{ debugName: "_selectionMap" }] : []));
-    selectionMap = this._selectionMap.asReadonly();
-    _initialSelection = signal({}, ...(ngDevMode ? [{ debugName: "_initialSelection" }] : []));
-    initialSelection = this._initialSelection.asReadonly();
-    // Computed - Tree Nodes (for PrimeNG TreeTable)
-    treeNodes = computed(() => convertActionToTreeNode(this.actionsTree()), ...(ngDevMode ? [{ debugName: "treeNodes" }] : []));
-    // Computed - Selection State
-    allSelected = computed(() => {
-        const selMap = this.selectionMap();
-        const total = this.actions().length;
-        if (total === 0)
-            return false;
-        const selected = Object.values(selMap).filter((v) => v).length;
-        return selected === total;
-    }, ...(ngDevMode ? [{ debugName: "allSelected" }] : []));
-    // 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]);
-    }, ...(ngDevMode ? [{ debugName: "hasChanges" }] : []));
-    // Computed - Validation
-    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;
-    }, ...(ngDevMode ? [{ debugName: "actionsWithUnmetPrerequisites" }] : []));
-    invalidActionsCount = computed(() => this.actionsWithUnmetPrerequisites().size, ...(ngDevMode ? [{ debugName: "invalidActionsCount" }] : []));
-    // Computed - Pending Changes
-    pendingAdd = computed(() => {
-        const current = this.selectionMap();
-        const initial = this.initialSelection();
-        const allActions = this.actions();
-        return allActions.filter((action) => current[action.id] && !initial[action.id]);
-    }, ...(ngDevMode ? [{ debugName: "pendingAdd" }] : []));
-    pendingRemove = computed(() => {
-        const current = this.selectionMap();
-        const initial = this.initialSelection();
-        const allActions = this.actions();
-        return allActions.filter((action) => !current[action.id] && initial[action.id]);
-    }, ...(ngDevMode ? [{ debugName: "pendingRemove" }] : []));
-    // Computed - Save Button State
-    canSave = computed(() => {
-        return this.hasChanges() && !this.saving() && this.invalidActionsCount() === 0;
-    }, ...(ngDevMode ? [{ debugName: "canSave" }] : []));
-    // AbortController for data loading
     loadDataAbortController = null;
     constructor() {
-        // Cleanup on destroy
+        super();
         this.destroyRef.onDestroy(() => {
             this.loadDataAbortController?.abort();
         });
         this.loadCompanies();
-        // Effect: Load data when company selection changes
         effect(() => {
             const companyId = this.selectedCompanyId();
-            // Abort previous request
             this.loadDataAbortController?.abort();
             if (companyId) {
                 this.loadDataAbortController = new AbortController();
                 this.loadData(this.loadDataAbortController.signal).catch((err) => {
                     if (err.name !== 'AbortError') {
-                        // Error toast handled by global interceptor
                         this.loading.set(false);
                     }
                 });
@@ -2303,9 +2136,12 @@ class CompanyActionSelectorComponent {
             }
         });
     }
-    /**
-     * Load companies from API
-     */
+    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({
@@ -2315,29 +2151,21 @@ class CompanyActionSelectorComponent {
             this.companies.set(response?.data ?? []);
         }
         catch {
-            // Error toast handled by global interceptor
         }
     }
-    /**
-     * Load actions and assignments for selected company
-     */
     async loadData(signal) {
         const companyId = this.selectedCompanyId();
         if (!companyId)
             return;
         this.loading.set(true);
         try {
-            // Fetch hierarchical action tree
             const actionsResponse = await firstValueFrom(this.actionApi.getTree(undefined, undefined, false));
             if (signal.aborted)
                 return;
             const actionsTree = actionsResponse?.data ?? [];
-            // Flatten tree for business logic
             const actionsList = flattenTree(actionsTree).filter((a) => !!a.id);
-            // Store both representations
             this._actionsTree.set(actionsTree);
             this._actions.set(actionsList);
-            // Load existing assignments
             const assignedResponse = await firstValueFrom(this.permissionApi.getCompanyActions(companyId));
             if (signal.aborted)
                 return;
@@ -2352,67 +2180,10 @@ class CompanyActionSelectorComponent {
             }
         }
     }
-    /**
-     * Check if action has unmet prerequisites
-     */
-    hasUnmetPrerequisites(action) {
-        return action.id
-            ? this.actionsWithUnmetPrerequisites().has(action.id)
-            : false;
-    }
-    /**
-     * Get tooltip for action checkbox
-     */
-    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}`;
-            }
-        }
-        if (isCurrentlySelected) {
-            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')}`;
-    }
-    /**
-     * Handle action checkbox toggle
-     */
-    onActionToggle(action, newValue) {
-        if (!newValue) {
-            // Unchecking - validate dependencies
-            this.permissionLogic.handleUncheck(action, this.selectionMap(), this.actions(), (newMap) => this._selectionMap.set(newMap));
-        }
-        else {
-            // Checking - validate prerequisites
-            this.permissionLogic.handleCheck(action, this.selectionMap(), this.actions(), (newMap) => this._selectionMap.set(newMap), (previousState) => this._selectionMap.set(previousState));
-        }
-    }
-    toggleAll() {
-        this.setAllSelection(!this.allSelected());
-    }
-    selectAll() {
-        this.setAllSelection(true);
-    }
-    deselectAll() {
-        this.setAllSelection(false);
-    }
-    setAllSelection(value) {
-        this._selectionMap.set(this.buildSelectionMap(this.actions(), () => value));
-    }
-    /**
-     * Save changes to backend
-     */
     async saveChanges() {
         const companyId = this.selectedCompanyId();
         if (!companyId)
             return;
-        // Pre-save validation
         const invalidActions = this.permissionLogic.getActionsWithUnmetPrerequisites(this.selectionMap(), this.actions());
         if (invalidActions.length > 0) {
             this.permissionLogic.showValidationErrorDialog(invalidActions, this.selectionMap(), this.actions(), (newMap) => this._selectionMap.set(newMap));
@@ -2423,11 +2194,7 @@ class CompanyActionSelectorComponent {
             return;
         this.saving.set(true);
         try {
-            const response = await firstValueFrom(this.permissionApi.assignCompanyActions({
-                companyId,
-                items,
-            }));
-            // Handle backend prerequisite errors
+            const response = await firstValueFrom(this.permissionApi.assignCompanyActions({ companyId, items }));
             if (response?.data?.prerequisiteErrors &&
                 response.data.prerequisiteErrors.length > 0) {
                 this.handleBackendPrerequisiteErrors(response.data.prerequisiteErrors);
@@ -2436,22 +2203,18 @@ class CompanyActionSelectorComponent {
             this.messageService.add({
                 severity: 'success',
                 summary: this.translate('shared.success'),
-                detail: response?.data?.message || this.translate('iam.permission.company.actions.updated'),
+                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);
         }
     }
-    /**
-     * Handle backend prerequisite validation errors
-     * Shows confirmation dialog with auto-fix option
-     */
     handleBackendPrerequisiteErrors(prerequisiteErrors) {
         const errorList = prerequisiteErrors
             .map((error) => {
@@ -2470,7 +2233,6 @@ class CompanyActionSelectorComponent {
             acceptIcon: 'pi pi-check',
             rejectIcon: 'pi pi-times',
             accept: () => {
-                // Auto-select missing prerequisites
                 const selMap = { ...this.selectionMap() };
                 prerequisiteErrors.forEach((error) => {
                     error.requiredActions.forEach((a) => {
@@ -2485,7 +2247,6 @@ class CompanyActionSelectorComponent {
                 });
             },
             reject: () => {
-                // Revert to initial state
                 this._selectionMap.set({ ...this.initialSelection() });
                 this.messageService.add({
                     severity: 'info',
@@ -2495,54 +2256,33 @@ class CompanyActionSelectorComponent {
             },
         });
     }
-    resetState() {
-        this._actionsTree.set([]);
-        this._actions.set([]);
-        this._selectionMap.set({});
-        this._initialSelection.set({});
-    }
-    buildSelectionMap(actions, predicate) {
-        const selMap = {};
-        for (const action of actions) {
-            selMap[action.id] = predicate(action);
-        }
-        return selMap;
-    }
-    buildPayloadItems() {
-        const items = [];
-        for (const action of this.pendingAdd()) {
-            items.push({ id: action.id, action: 'add' });
-        }
-        for (const action of this.pendingRemove()) {
-            items.push({ id: action.id, action: 'remove' });
-        }
-        return items;
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CompanyActionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: CompanyActionSelectorComponent, isStandalone: true, selector: "flusys-company-action-selector", ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: CompanyActionSelectorComponent, isStandalone: true, selector: "flusys-company-action-selector", usesInheritance: true, ngImport: i0, template: `
     <div class="company-action-selector">
-      <!-- Company Selector -->
       <div class="mb-4">
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           <div>
-            <label class="block font-semibold mb-2">{{ 'iam.permission.select.company' | translate }}</label>
+            <label class="block font-semibold mb-2">{{
+              'iam.permission.select.company' | translate
+            }}</label>
             <p-select
               [ngModel]="selectedCompanyId()"
               (ngModelChange)="selectedCompanyId.set($event)"
               [options]="companies()"
               optionLabel="name"
               optionValue="id"
-              [placeholder]="'iam.permission.select.company.placeholder' | translate"
+              [placeholder]="
+                'iam.permission.select.company.placeholder' | translate
+              "
               [showClear]="true"
               [filter]="true"
-              styleClass="w-full"
+              class="w-full"
             />
           </div>
         </div>
       </div>
 
       @if (selectedCompanyId()) {
-        <!-- Loading State -->
         @if (loading()) {
           <div
             class="surface-card p-5 rounded-border shadow-sm flex justify-center"
@@ -2551,16 +2291,20 @@ class CompanyActionSelectorComponent {
           </div>
         }
 
-        <!-- Action List -->
         @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>
+                <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 } }}
+                  {{
+                    'iam.permission.actions.available'
+                      | translate: { count: actions().length }
+                  }}
                 </p>
               </div>
               <div class="flex flex-wrap gap-2">
@@ -2593,27 +2337,32 @@ class CompanyActionSelectorComponent {
               </div>
             </div>
 
-            <!-- Validation Warning -->
             @if (invalidActionsCount() > 0) {
               <div class="validation-warning rounded-border p-3 mb-4">
                 <div class="flex items-start gap-2">
                   <i class="pi pi-exclamation-triangle text-xl"></i>
                   <div class="flex-1">
-                    <span class="font-semibold">{{ 'iam.validation.warning.title' | translate }}:</span>
+                    <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() } }}
+                      {{
+                        (invalidActionsCount() > 1
+                          ? 'iam.validation.unmet.prerequisites.plural'
+                          : 'iam.validation.unmet.prerequisites.singular'
+                        ) | translate: { count: invalidActionsCount() }
+                      }}
                     </p>
                   </div>
                 </div>
               </div>
             }
 
-            <!-- Action Tree Table -->
             <div class="overflow-x-auto -mx-4 sm:mx-0">
               <p-treeTable
                 [value]="treeNodes()"
                 dataKey="id"
-                styleClass="p-treetable-sm"
+                class="p-treetable-sm"
                 [tableStyle]="{ 'min-width': '50rem' }"
               >
                 <ng-template #header>
@@ -2628,73 +2377,93 @@ class CompanyActionSelectorComponent {
                       />
                     </th>
                     <th>{{ 'shared.name' | translate }}</th>
-                    <th class="hidden md:table-cell">{{ 'shared.code' | 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>
+                    <th class="hidden lg:table-cell">
+                      {{ 'shared.description' | translate }}
+                    </th>
                   </tr>
                 </ng-template>
-              <ng-template #body let-rowNode let-rowData="rowData">
-                <tr [class.highlight-warning]="hasUnmetPrerequisites(rowData)">
-                  <td class="w-12">
-                    <p-checkbox
-                      [ngModel]="selectionMap()[rowData.id]"
-                      [binary]="true"
-                      (ngModelChange)="onActionToggle(rowData, $event)"
-                      [pTooltip]="getTooltip(rowData)"
-                      tooltipPosition="top"
-                    />
-                  </td>
-                  <td>
-                    <p-treeTableToggler [rowNode]="rowNode" />
-                    <span class="inline-flex items-center gap-2">
-                      {{ rowData.name }}
-                      @if (hasUnmetPrerequisites(rowData)) {
-                        <i
-                          class="pi pi-exclamation-triangle text-orange-500"
-                          [pTooltip]="'iam.validation.unmet.prerequisites.tooltip' | translate"
-                          tooltipPosition="top"
-                        ></i>
+                <ng-template #body let-rowNode let-rowData="rowData">
+                  @let hasUnmet = hasUnmetPrerequisites(rowData);
+                  <tr [class.highlight-warning]="hasUnmet">
+                    <td class="w-12">
+                      <p-checkbox
+                        [ngModel]="selectionMap()[rowData.id]"
+                        [binary]="true"
+                        (ngModelChange)="onActionToggle(rowData, $event)"
+                        [pTooltip]="getTooltip(rowData)"
+                        tooltipPosition="top"
+                      />
+                    </td>
+                    <td>
+                      <p-treeTableToggler [rowNode]="rowNode" />
+                      <span class="inline-flex items-center gap-2">
+                        {{ rowData.name }}
+                        @if (hasUnmet) {
+                          <i
+                            class="pi pi-exclamation-triangle text-orange-500"
+                            [pTooltip]="
+                              'iam.validation.unmet.prerequisites.tooltip'
+                                | translate
+                            "
+                            tooltipPosition="top"
+                          ></i>
+                        }
+                      </span>
+                    </td>
+                    <td class="hidden md:table-cell">
+                      {{ rowData.code || '-' }}
+                    </td>
+                    <td>
+                      <p-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()) {
+                        <i class="pi pi-spin pi-spinner"></i>
+                        {{ 'shared.loading.actions' | translate }}
+                      } @else {
+                        {{ 'iam.permission.no.actions.available' | translate }}
                       }
-                    </span>
-                  </td>
-                  <td class="hidden md:table-cell">{{ rowData.code || '-' }}</td>
-                  <td>
-                    <p-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()) {
-                      <i class="pi pi-spin pi-spinner"></i> {{ 'shared.loading.actions' | translate }}
-                    } @else { {{ 'iam.permission.no.actions.available' | translate }} }
-                  </td>
-                </tr>
-              </ng-template>
+                    </td>
+                  </tr>
+                </ng-template>
               </p-treeTable>
             </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">
                 <i class="pi pi-info-circle text-primary"></i>
-                <span class="font-bold">{{ 'shared.pending.changes' | translate }}</span>
+                <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">
                       <i class="pi pi-plus-circle text-green-500"></i>
-                      <strong class="text-sm">{{ 'shared.to.whitelist' | translate }} ({{ pendingAdd().length }})</strong>
+                      <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) {
@@ -2707,7 +2476,11 @@ class CompanyActionSelectorComponent {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
                       <i class="pi pi-minus-circle text-red-500"></i>
-                      <strong class="text-sm">{{ 'shared.to.remove' | translate }} ({{ pendingRemove().length }})</strong>
+                      <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) {
@@ -2723,7 +2496,9 @@ class CompanyActionSelectorComponent {
 
         @if (!loading() && actions().length === 0) {
           <div class="surface-card p-5 rounded-border shadow-sm text-center">
-            <i class="pi pi-info-circle text-muted-color mb-3 block text-5xl"></i>
+            <i
+              class="pi pi-info-circle text-muted-color mb-3 block text-5xl"
+            ></i>
             <p class="text-muted-color m-0">
               {{ 'iam.permission.no.actions.for.company' | translate }}
             </p>
@@ -2731,34 +2506,41 @@ class CompanyActionSelectorComponent {
         }
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}.validation-warning{background-color:var(--p-yellow-50, #fefce8);border-left:4px solid var(--p-yellow-500, #eab308);color:var(--p-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--p-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--p-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i7.TreeTable, selector: "p-treeTable, p-treetable, p-tree-table", inputs: ["columns", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight", "selectionKeys", "showGridlines"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "component", type: i7.TreeTableToggler, selector: "p-treeTableToggler, p-treetabletoggler, p-treetable-toggler", inputs: ["rowNode"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, styles: [":host{display:block}.validation-warning{background-color:var(--p-yellow-50, #fefce8);border-left:4px solid var(--p-yellow-500, #eab308);color:var(--p-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--p-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--p-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i7.TreeTable, selector: "p-treeTable, p-treetable, p-tree-table", inputs: ["columns", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight", "selectionKeys", "showGridlines"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "component", type: i7.TreeTableToggler, selector: "p-treeTableToggler, p-treetabletoggler, p-treetable-toggler", inputs: ["rowNode"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CompanyActionSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'flusys-company-action-selector', imports: [CommonModule, FormsModule, PrimeModule, HasPermissionDirective, TranslatePipe], template: `
+            args: [{ selector: 'flusys-company-action-selector', imports: [
+                        FormsModule,
+                        PrimeModule,
+                        HasPermissionDirective,
+                        TranslatePipe,
+                    ], template: `
     <div class="company-action-selector">
-      <!-- Company Selector -->
       <div class="mb-4">
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           <div>
-            <label class="block font-semibold mb-2">{{ 'iam.permission.select.company' | translate }}</label>
+            <label class="block font-semibold mb-2">{{
+              'iam.permission.select.company' | translate
+            }}</label>
             <p-select
               [ngModel]="selectedCompanyId()"
               (ngModelChange)="selectedCompanyId.set($event)"
               [options]="companies()"
               optionLabel="name"
               optionValue="id"
-              [placeholder]="'iam.permission.select.company.placeholder' | translate"
+              [placeholder]="
+                'iam.permission.select.company.placeholder' | translate
+              "
               [showClear]="true"
               [filter]="true"
-              styleClass="w-full"
+              class="w-full"
             />
           </div>
         </div>
       </div>
 
       @if (selectedCompanyId()) {
-        <!-- Loading State -->
         @if (loading()) {
           <div
             class="surface-card p-5 rounded-border shadow-sm flex justify-center"
@@ -2767,16 +2549,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           </div>
         }
 
-        <!-- Action List -->
         @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>
+                <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 } }}
+                  {{
+                    'iam.permission.actions.available'
+                      | translate: { count: actions().length }
+                  }}
                 </p>
               </div>
               <div class="flex flex-wrap gap-2">
@@ -2809,27 +2595,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               </div>
             </div>
 
-            <!-- Validation Warning -->
             @if (invalidActionsCount() > 0) {
               <div class="validation-warning rounded-border p-3 mb-4">
                 <div class="flex items-start gap-2">
                   <i class="pi pi-exclamation-triangle text-xl"></i>
                   <div class="flex-1">
-                    <span class="font-semibold">{{ 'iam.validation.warning.title' | translate }}:</span>
+                    <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() } }}
+                      {{
+                        (invalidActionsCount() > 1
+                          ? 'iam.validation.unmet.prerequisites.plural'
+                          : 'iam.validation.unmet.prerequisites.singular'
+                        ) | translate: { count: invalidActionsCount() }
+                      }}
                     </p>
                   </div>
                 </div>
               </div>
             }
 
-            <!-- Action Tree Table -->
             <div class="overflow-x-auto -mx-4 sm:mx-0">
               <p-treeTable
                 [value]="treeNodes()"
                 dataKey="id"
-                styleClass="p-treetable-sm"
+                class="p-treetable-sm"
                 [tableStyle]="{ 'min-width': '50rem' }"
               >
                 <ng-template #header>
@@ -2844,73 +2635,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                       />
                     </th>
                     <th>{{ 'shared.name' | translate }}</th>
-                    <th class="hidden md:table-cell">{{ 'shared.code' | 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>
+                    <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">
+                      <p-checkbox
+                        [ngModel]="selectionMap()[rowData.id]"
+                        [binary]="true"
+                        (ngModelChange)="onActionToggle(rowData, $event)"
+                        [pTooltip]="getTooltip(rowData)"
+                        tooltipPosition="top"
+                      />
+                    </td>
+                    <td>
+                      <p-treeTableToggler [rowNode]="rowNode" />
+                      <span class="inline-flex items-center gap-2">
+                        {{ rowData.name }}
+                        @if (hasUnmet) {
+                          <i
+                            class="pi pi-exclamation-triangle text-orange-500"
+                            [pTooltip]="
+                              'iam.validation.unmet.prerequisites.tooltip'
+                                | translate
+                            "
+                            tooltipPosition="top"
+                          ></i>
+                        }
+                      </span>
+                    </td>
+                    <td class="hidden md:table-cell">
+                      {{ rowData.code || '-' }}
+                    </td>
+                    <td>
+                      <p-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 #body let-rowNode let-rowData="rowData">
-                <tr [class.highlight-warning]="hasUnmetPrerequisites(rowData)">
-                  <td class="w-12">
-                    <p-checkbox
-                      [ngModel]="selectionMap()[rowData.id]"
-                      [binary]="true"
-                      (ngModelChange)="onActionToggle(rowData, $event)"
-                      [pTooltip]="getTooltip(rowData)"
-                      tooltipPosition="top"
-                    />
-                  </td>
-                  <td>
-                    <p-treeTableToggler [rowNode]="rowNode" />
-                    <span class="inline-flex items-center gap-2">
-                      {{ rowData.name }}
-                      @if (hasUnmetPrerequisites(rowData)) {
-                        <i
-                          class="pi pi-exclamation-triangle text-orange-500"
-                          [pTooltip]="'iam.validation.unmet.prerequisites.tooltip' | translate"
-                          tooltipPosition="top"
-                        ></i>
+                <ng-template #emptymessage>
+                  <tr>
+                    <td colspan="5" class="text-center p-4 text-muted-color">
+                      @if (loading()) {
+                        <i class="pi pi-spin pi-spinner"></i>
+                        {{ 'shared.loading.actions' | translate }}
+                      } @else {
+                        {{ 'iam.permission.no.actions.available' | translate }}
                       }
-                    </span>
-                  </td>
-                  <td class="hidden md:table-cell">{{ rowData.code || '-' }}</td>
-                  <td>
-                    <p-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()) {
-                      <i class="pi pi-spin pi-spinner"></i> {{ 'shared.loading.actions' | translate }}
-                    } @else { {{ 'iam.permission.no.actions.available' | translate }} }
-                  </td>
-                </tr>
-              </ng-template>
+                    </td>
+                  </tr>
+                </ng-template>
               </p-treeTable>
             </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">
                 <i class="pi pi-info-circle text-primary"></i>
-                <span class="font-bold">{{ 'shared.pending.changes' | translate }}</span>
+                <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">
                       <i class="pi pi-plus-circle text-green-500"></i>
-                      <strong class="text-sm">{{ 'shared.to.whitelist' | translate }} ({{ pendingAdd().length }})</strong>
+                      <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) {
@@ -2923,7 +2734,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                   <div>
                     <div class="flex items-center gap-2 mb-2">
                       <i class="pi pi-minus-circle text-red-500"></i>
-                      <strong class="text-sm">{{ 'shared.to.remove' | translate }} ({{ pendingRemove().length }})</strong>
+                      <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) {
@@ -2939,7 +2754,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 
         @if (!loading() && actions().length === 0) {
           <div class="surface-card p-5 rounded-border shadow-sm text-center">
-            <i class="pi pi-info-circle text-muted-color mb-3 block text-5xl"></i>
+            <i
+              class="pi pi-info-circle text-muted-color mb-3 block text-5xl"
+            ></i>
             <p class="text-muted-color m-0">
               {{ 'iam.permission.no.actions.for.company' | translate }}
             </p>
@@ -2989,7 +2806,9 @@ class UserRoleSelectorComponent {
     roleApi = inject(RoleApiService);
     permissionApi = inject(PermissionApiService);
     messageService = inject(MessageService);
-    translateAdapter = inject(TRANSLATE_ADAPTER, { optional: true });
+    translateAdapter = inject(TRANSLATE_ADAPTER, {
+        optional: true,
+    });
     translate(key, vars) {
         return this.translateAdapter?.translate(key, vars) ?? key;
     }
@@ -3112,9 +2931,9 @@ class UserRoleSelectorComponent {
         this.loading.set(true);
         try {
             // Load all roles
-            const rolesResponse = await firstValueFrom(this.roleApi.getAll('', {
+            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
@@ -3228,7 +3047,9 @@ class UserRoleSelectorComponent {
             this.messageService.add({
                 severity: 'success',
                 summary: this.translate('shared.success'),
-                detail: response?.data?.message || this.translate('iam.permission.user.roles.updated'),
+                detail: response?.messageKey
+                    ? this.translate(response.messageKey, response.messageVariables)
+                    : response?.message,
             });
             // Update baseline
             this._initialSelection.set({ ...this.selectionMap() });
@@ -3263,7 +3084,9 @@ class UserRoleSelectorComponent {
               [value]="selectedUserId()"
               (valueChange)="selectedUserId.set($event)"
               [isEditMode]="true"
-              [placeHolder]="'iam.permission.select.user.placeholder' | translate"
+              [placeHolder]="
+                'iam.permission.select.user.placeholder' | translate
+              "
             />
           </div>
 
@@ -3279,7 +3102,9 @@ class UserRoleSelectorComponent {
                 [options]="filteredBranches()"
                 optionLabel="name"
                 optionValue="id"
-                [placeholder]="'iam.permission.select.branch.placeholder' | translate"
+                [placeholder]="
+                  'iam.permission.select.branch.placeholder' | translate
+                "
                 [showClear]="true"
                 [filter]="true"
                 styleClass="w-full"
@@ -3300,7 +3125,12 @@ class UserRoleSelectorComponent {
                 </ng-template>
               </p-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 } }}
+                {{
+                  (filteredBranches().length !== 1
+                    ? 'iam.branch.permitted.count.plural'
+                    : 'iam.branch.permitted.count'
+                  ) | translate: { count: filteredBranches().length }
+                }}
               </small>
             </div>
           }
@@ -3324,9 +3154,14 @@ class UserRoleSelectorComponent {
               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>
+                <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 } }}
+                  {{
+                    'iam.permission.roles.available'
+                      | translate: { count: roles().length }
+                  }}
                 </p>
               </div>
               <div class="flex flex-wrap gap-2">
@@ -3368,7 +3203,9 @@ class UserRoleSelectorComponent {
                 [rowsPerPageOptions]="[10, 20, 50]"
                 [globalFilterFields]="['name', 'code', 'description']"
                 [showCurrentPageReport]="true"
-                [currentPageReportTemplate]="'iam.pagination.roles.template' | translate"
+                [currentPageReportTemplate]="
+                  'iam.pagination.roles.template' | translate
+                "
                 styleClass="p-datatable-sm"
                 [tableStyle]="{ 'min-width': '35rem' }"
               >
@@ -3384,8 +3221,12 @@ class UserRoleSelectorComponent {
                       />
                     </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>
+                    <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>
@@ -3401,14 +3242,17 @@ class UserRoleSelectorComponent {
                     </td>
                     <td>{{ role.name }}</td>
                     <td class="hidden sm:table-cell">{{ role.code || '-' }}</td>
-                    <td class="hidden md:table-cell">{{ role.description || '-' }}</td>
+                    <td class="hidden md:table-cell">
+                      {{ role.description || '-' }}
+                    </td>
                   </tr>
                 </ng-template>
                 <ng-template #emptymessage>
                   <tr>
                     <td colspan="4" class="text-center p-4 text-muted-color">
                       @if (loading()) {
-                        <i class="pi pi-spin pi-spinner"></i> {{ 'shared.loading.roles' | translate }}
+                        <i class="pi pi-spin pi-spinner"></i>
+                        {{ 'shared.loading.roles' | translate }}
                       } @else {
                         {{ 'iam.permission.no.roles.available' | translate }}
                       }
@@ -3424,14 +3268,20 @@ class UserRoleSelectorComponent {
             <div class="border border-surface rounded-border p-3 mt-4">
               <div class="flex items-center gap-2 mb-3">
                 <i class="pi pi-info-circle text-primary"></i>
-                <span class="font-bold">{{ 'shared.pending.changes' | translate }}</span>
+                <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">
                       <i class="pi pi-plus-circle text-green-500"></i>
-                      <strong class="text-sm">{{ 'shared.to.assign' | translate }} ({{ pendingAdd().length }})</strong>
+                      <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) {
@@ -3444,7 +3294,11 @@ class UserRoleSelectorComponent {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
                       <i class="pi pi-minus-circle text-red-500"></i>
-                      <strong class="text-sm">{{ 'shared.to.remove' | translate }} ({{ pendingRemove().length }})</strong>
+                      <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) {
@@ -3460,7 +3314,9 @@ class UserRoleSelectorComponent {
 
         @if (!loading() && roles().length === 0) {
           <div class="surface-card p-5 rounded-border shadow-sm text-center">
-            <i class="pi pi-info-circle text-muted-color mb-3 block text-5xl"></i>
+            <i
+              class="pi pi-info-circle text-muted-color mb-3 block text-5xl"
+            ></i>
             <p class="text-muted-color m-0">
               {{ 'iam.permission.no.roles.for.user' | translate }}
             </p>
@@ -3472,7 +3328,14 @@ class UserRoleSelectorComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UserRoleSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'flusys-user-role-selector', imports: [CommonModule, FormsModule, PrimeModule, HasPermissionDirective, UserSelectComponent, TranslatePipe], template: `
+            args: [{ selector: 'flusys-user-role-selector', imports: [
+                        CommonModule,
+                        FormsModule,
+                        PrimeModule,
+                        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">
@@ -3486,7 +3349,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               [value]="selectedUserId()"
               (valueChange)="selectedUserId.set($event)"
               [isEditMode]="true"
-              [placeHolder]="'iam.permission.select.user.placeholder' | translate"
+              [placeHolder]="
+                'iam.permission.select.user.placeholder' | translate
+              "
             />
           </div>
 
@@ -3502,7 +3367,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 [options]="filteredBranches()"
                 optionLabel="name"
                 optionValue="id"
-                [placeholder]="'iam.permission.select.branch.placeholder' | translate"
+                [placeholder]="
+                  'iam.permission.select.branch.placeholder' | translate
+                "
                 [showClear]="true"
                 [filter]="true"
                 styleClass="w-full"
@@ -3523,7 +3390,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 </ng-template>
               </p-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 } }}
+                {{
+                  (filteredBranches().length !== 1
+                    ? 'iam.branch.permitted.count.plural'
+                    : 'iam.branch.permitted.count'
+                  ) | translate: { count: filteredBranches().length }
+                }}
               </small>
             </div>
           }
@@ -3547,9 +3419,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               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>
+                <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 } }}
+                  {{
+                    'iam.permission.roles.available'
+                      | translate: { count: roles().length }
+                  }}
                 </p>
               </div>
               <div class="flex flex-wrap gap-2">
@@ -3591,7 +3468,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 [rowsPerPageOptions]="[10, 20, 50]"
                 [globalFilterFields]="['name', 'code', 'description']"
                 [showCurrentPageReport]="true"
-                [currentPageReportTemplate]="'iam.pagination.roles.template' | translate"
+                [currentPageReportTemplate]="
+                  'iam.pagination.roles.template' | translate
+                "
                 styleClass="p-datatable-sm"
                 [tableStyle]="{ 'min-width': '35rem' }"
               >
@@ -3607,8 +3486,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                       />
                     </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>
+                    <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>
@@ -3624,14 +3507,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                     </td>
                     <td>{{ role.name }}</td>
                     <td class="hidden sm:table-cell">{{ role.code || '-' }}</td>
-                    <td class="hidden md:table-cell">{{ role.description || '-' }}</td>
+                    <td class="hidden md:table-cell">
+                      {{ role.description || '-' }}
+                    </td>
                   </tr>
                 </ng-template>
                 <ng-template #emptymessage>
                   <tr>
                     <td colspan="4" class="text-center p-4 text-muted-color">
                       @if (loading()) {
-                        <i class="pi pi-spin pi-spinner"></i> {{ 'shared.loading.roles' | translate }}
+                        <i class="pi pi-spin pi-spinner"></i>
+                        {{ 'shared.loading.roles' | translate }}
                       } @else {
                         {{ 'iam.permission.no.roles.available' | translate }}
                       }
@@ -3647,14 +3533,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             <div class="border border-surface rounded-border p-3 mt-4">
               <div class="flex items-center gap-2 mb-3">
                 <i class="pi pi-info-circle text-primary"></i>
-                <span class="font-bold">{{ 'shared.pending.changes' | translate }}</span>
+                <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">
                       <i class="pi pi-plus-circle text-green-500"></i>
-                      <strong class="text-sm">{{ 'shared.to.assign' | translate }} ({{ pendingAdd().length }})</strong>
+                      <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) {
@@ -3667,7 +3559,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                   <div>
                     <div class="flex items-center gap-2 mb-2">
                       <i class="pi pi-minus-circle text-red-500"></i>
-                      <strong class="text-sm">{{ 'shared.to.remove' | translate }} ({{ pendingRemove().length }})</strong>
+                      <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) {
@@ -3683,7 +3579,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 
         @if (!loading() && roles().length === 0) {
           <div class="surface-card p-5 rounded-border shadow-sm text-center">
-            <i class="pi pi-info-circle text-muted-color mb-3 block text-5xl"></i>
+            <i
+              class="pi pi-info-circle text-muted-color mb-3 block text-5xl"
+            ></i>
             <p class="text-muted-color m-0">
               {{ 'iam.permission.no.roles.for.user' | translate }}
             </p>
@@ -3694,72 +3592,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
   `, styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [] });
 
-/**
- * User-Action Selector Component
- *
- * Manages direct user action permissions with hierarchical tree view.
- *
- * **Architecture:**
- * - Presentation: TreeTable for hierarchical display
- * - Business Logic: Flat action list for selection/validation
- * - State: Signals with computed dependencies
- *
- * **Core Features:**
- * - User dropdown with async loading
- * - Branch selector (if company feature enabled)
- * - Hierarchical TreeTable with expand/collapse
- * - Direct user-action permission assignment (bypassing roles)
- * - 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-action-selector />
- * ```
- */
-class UserActionSelectorComponent {
-    // Permission constants for template
+class UserActionSelectorComponent extends BaseActionSelectorComponent {
     USER_ACTION_PERMISSIONS = USER_ACTION_PERMISSIONS;
-    // Dependencies
     appConfig = inject(APP_CONFIG);
     companyContext = inject(LAYOUT_AUTH_STATE);
     userPermissionProvider = inject(USER_PERMISSION_PROVIDER);
     actionApi = inject(ActionApiService);
     permissionApi = inject(PermissionApiService);
-    permissionLogic = inject(ActionPermissionLogicService);
     messageService = inject(MessageService);
-    translateAdapter = inject(TRANSLATE_ADAPTER, { optional: true });
-    translate(key, vars) {
-        return this.translateAdapter?.translate(key, vars) ?? key;
-    }
-    // State - User/Branch Selection
     selectedUserId = signal(null, ...(ngDevMode ? [{ debugName: "selectedUserId" }] : []));
     selectedBranchId = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedBranchId" }] : []));
     branches = signal([], ...(ngDevMode ? [{ debugName: "branches" }] : []));
-    // State - Loading/Saving
-    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-    saving = signal(false, ...(ngDevMode ? [{ debugName: "saving" }] : []));
-    // State - Actions (Business Logic)
-    _actions = signal([], ...(ngDevMode ? [{ debugName: "_actions" }] : []));
-    actions = this._actions.asReadonly();
-    // State - Actions (Display)
-    _actionsTree = signal([], ...(ngDevMode ? [{ debugName: "_actionsTree" }] : []));
-    actionsTree = this._actionsTree.asReadonly();
-    // State - Selection
-    _selectionMap = signal({}, ...(ngDevMode ? [{ debugName: "_selectionMap" }] : []));
-    selectionMap = this._selectionMap.asReadonly();
-    _initialSelection = signal({}, ...(ngDevMode ? [{ debugName: "_initialSelection" }] : []));
-    initialSelection = this._initialSelection.asReadonly();
-    // Computed - Company Feature Flag (cached)
     isCompanyFeatureActive = computed(() => isCompanyFeatureEnabled(this.appConfig) === true, ...(ngDevMode ? [{ debugName: "isCompanyFeatureActive" }] : []));
-    // Computed - UI Flags
     showBranchSelector = this.isCompanyFeatureActive;
     filteredBranches = computed(() => {
         const currentCompanyId = this.companyContext.currentCompanyInfo()?.id || undefined;
@@ -3767,64 +3611,11 @@ class UserActionSelectorComponent {
             return this.branches();
         return this.branches().filter((b) => b.companyId === currentCompanyId);
     }, ...(ngDevMode ? [{ debugName: "filteredBranches" }] : []));
-    // Computed - Tree Nodes (for PrimeNG TreeTable)
-    treeNodes = computed(() => convertActionToTreeNode(this.actionsTree()), ...(ngDevMode ? [{ debugName: "treeNodes" }] : []));
-    // Computed - Selection State
-    allSelected = computed(() => {
-        const selMap = this.selectionMap();
-        const total = this.actions().length;
-        if (total === 0)
-            return false;
-        const selected = Object.values(selMap).filter((v) => v).length;
-        return selected === total;
-    }, ...(ngDevMode ? [{ debugName: "allSelected" }] : []));
-    // 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]);
-    }, ...(ngDevMode ? [{ debugName: "hasChanges" }] : []));
-    // Computed - Validation
-    actionsWithUnmetPrerequisites = computed(() => {
-        const selMap = this.selectionMap();
-        const allActions = this.actions();
-        const unmetSet = new Set();
-        allActions.forEach((action) => {
-            if (action.id &&
-                this.permissionLogic.hasUnmetPrerequisites(action, selMap, allActions)) {
-                unmetSet.add(action.id);
-            }
-        });
-        return unmetSet;
-    }, ...(ngDevMode ? [{ debugName: "actionsWithUnmetPrerequisites" }] : []));
-    invalidActionsCount = computed(() => {
-        return this.actionsWithUnmetPrerequisites().size;
-    }, ...(ngDevMode ? [{ debugName: "invalidActionsCount" }] : []));
-    // Computed - Pending Changes
-    pendingAdd = computed(() => {
-        const current = this.selectionMap();
-        const initial = this.initialSelection();
-        const allActions = this.actions();
-        return allActions.filter((action) => current[action.id] && !initial[action.id]);
-    }, ...(ngDevMode ? [{ debugName: "pendingAdd" }] : []));
-    pendingRemove = computed(() => {
-        const current = this.selectionMap();
-        const initial = this.initialSelection();
-        const allActions = this.actions();
-        return allActions.filter((action) => !current[action.id] && initial[action.id]);
-    }, ...(ngDevMode ? [{ debugName: "pendingRemove" }] : []));
-    // Computed - Save Button State
-    canSave = computed(() => {
-        return (this.hasChanges() && !this.saving() && this.invalidActionsCount() === 0);
-    }, ...(ngDevMode ? [{ debugName: "canSave" }] : []));
     constructor() {
-        // Effect: Load user branches and data when user changes
+        super();
         effect(() => {
             const userId = this.selectedUserId();
+            this.selectedBranchId.set(undefined);
             if (userId) {
                 if (this.isCompanyFeatureActive()) {
                     this.loadUserBranches(userId);
@@ -3833,22 +3624,23 @@ class UserActionSelectorComponent {
             }
             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();
+            const userId = this.selectedUserId();
             if (this.isCompanyFeatureActive() && userId && branchId !== undefined) {
                 this.loadData();
             }
         });
     }
-    /**
-     * Load user's permitted branches
-     */
+    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) {
@@ -3865,12 +3657,8 @@ class UserActionSelectorComponent {
             this.branches.set(userBranches);
         }
         catch {
-            // Error toast handled by global interceptor
         }
     }
-    /**
-     * Load actions and assignments for selected user
-     */
     async loadData() {
         const userId = this.selectedUserId();
         if (!userId)
@@ -3891,65 +3679,11 @@ class UserActionSelectorComponent {
             this._initialSelection.set({ ...selMap });
         }
         catch {
-            // Error toast handled by global interceptor
         }
         finally {
             this.loading.set(false);
         }
     }
-    /**
-     * Get tooltip for action checkbox
-     */
-    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}`;
-            }
-        }
-        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.user')}`;
-        }
-        return `[${this.translate('shared.add')}] ${this.translate('iam.tooltip.click.to.assign.user')}`;
-    }
-    /**
-     * Check if action has unmet prerequisites
-     */
-    hasUnmetPrerequisites(action) {
-        return action.id
-            ? this.actionsWithUnmetPrerequisites().has(action.id)
-            : false;
-    }
-    /**
-     * Handle action toggle with dependency management
-     */
-    onActionToggle(action, newValue) {
-        if (!newValue) {
-            // Unchecking - validate dependencies
-            this.permissionLogic.handleUncheck(action, this.selectionMap(), this.actions(), (newMap) => this._selectionMap.set(newMap));
-        }
-        else {
-            // Checking - validate prerequisites
-            this.permissionLogic.handleCheck(action, this.selectionMap(), this.actions(), (newMap) => this._selectionMap.set(newMap), (previousState) => this._selectionMap.set(previousState));
-        }
-    }
-    toggleAll() {
-        this.setAllActions(!this.allSelected());
-    }
-    selectAll() {
-        this.setAllActions(true);
-    }
-    deselectAll() {
-        this.setAllActions(false);
-    }
-    setAllActions(value) {
-        this._selectionMap.set(this.buildSelectionMap(this.actions(), () => value));
-    }
     async saveChanges() {
         const userId = this.selectedUserId();
         if (!userId)
@@ -3969,7 +3703,7 @@ class UserActionSelectorComponent {
             this.permissionLogic.showValidationErrorDialog(invalidActions, this.selectionMap(), this.actions(), (newMap) => this._selectionMap.set(newMap));
             return;
         }
-        const items = this.buildPermissionItems();
+        const items = this.buildPayloadItems();
         if (items.length === 0)
             return;
         this.saving.set(true);
@@ -3985,44 +3719,21 @@ class UserActionSelectorComponent {
             this.messageService.add({
                 severity: 'success',
                 summary: this.translate('shared.success'),
-                detail: response?.data?.message || this.translate('iam.permission.user.actions.updated'),
+                detail: response?.messageKey
+                    ? this.translate(response.messageKey, response.messageVariables)
+                    : response?.message,
             });
             this._initialSelection.set({ ...this.selectionMap() });
         }
         catch {
-            // Error toast handled by global interceptor
         }
         finally {
             this.saving.set(false);
         }
     }
-    resetState() {
-        this._actionsTree.set([]);
-        this._actions.set([]);
-        this._selectionMap.set({});
-        this._initialSelection.set({});
-    }
-    buildSelectionMap(actions, predicate) {
-        const selMap = {};
-        actions.forEach((action) => {
-            selMap[action.id] = predicate(action);
-        });
-        return selMap;
-    }
-    buildPermissionItems() {
-        const items = [];
-        this.pendingAdd().forEach((action) => {
-            items.push({ id: action.id, action: 'add' });
-        });
-        this.pendingRemove().forEach((action) => {
-            items.push({ id: action.id, action: 'remove' });
-        });
-        return items;
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UserActionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: UserActionSelectorComponent, isStandalone: true, selector: "flusys-user-action-selector", ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: UserActionSelectorComponent, isStandalone: true, selector: "flusys-user-action-selector", usesInheritance: true, ngImport: i0, template: `
     <div class="user-action-selector">
-      <!-- User and Branch Selectors -->
       <div class="surface-card p-4 rounded-border mb-4 shadow-sm">
         <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
           <div>
@@ -4034,7 +3745,9 @@ class UserActionSelectorComponent {
               [value]="selectedUserId()"
               (valueChange)="selectedUserId.set($event)"
               [isEditMode]="true"
-              [placeHolder]="'iam.permission.select.user.placeholder' | translate"
+              [placeHolder]="
+                'iam.permission.select.user.placeholder' | translate
+              "
             />
           </div>
 
@@ -4050,10 +3763,12 @@ class UserActionSelectorComponent {
                 [options]="filteredBranches()"
                 optionLabel="name"
                 optionValue="id"
-                [placeholder]="'iam.permission.select.branch.placeholder' | translate"
+                [placeholder]="
+                  'iam.permission.select.branch.placeholder' | translate
+                "
                 [showClear]="true"
                 [filter]="true"
-                styleClass="w-full"
+                class="w-full"
               >
                 <ng-template #selectedItem let-branch>
                   @if (branch) {
@@ -4071,7 +3786,12 @@ class UserActionSelectorComponent {
                 </ng-template>
               </p-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 } }}
+                {{
+                  (filteredBranches().length !== 1
+                    ? 'iam.branch.permitted.count.plural'
+                    : 'iam.branch.permitted.count'
+                  ) | translate: { count: filteredBranches().length }
+                }}
               </small>
             </div>
           }
@@ -4079,23 +3799,26 @@ class UserActionSelectorComponent {
       </div>
 
       @if (selectedUserId()) {
-        <!-- Loading State -->
         @if (loading()) {
           <div class="flex justify-center p-5">
             <i class="pi pi-spin pi-spinner text-4xl"></i>
           </div>
         }
 
-        <!-- Action List -->
         @if (!loading() && actions().length > 0) {
           <div class="surface-card p-4 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>
+                <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 } }}
+                  {{
+                    'iam.permission.actions.available'
+                      | translate: { count: actions().length }
+                  }}
                 </p>
               </div>
               <div class="flex flex-wrap gap-2">
@@ -4128,27 +3851,32 @@ class UserActionSelectorComponent {
               </div>
             </div>
 
-            <!-- Validation Warning -->
             @if (invalidActionsCount() > 0) {
               <div class="validation-warning rounded-border p-3 mb-4">
                 <div class="flex items-start gap-2">
                   <i class="pi pi-exclamation-triangle text-xl"></i>
                   <div class="flex-1">
-                    <span class="font-semibold">{{ 'iam.validation.warning.title' | translate }}:</span>
+                    <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() } }}
+                      {{
+                        (invalidActionsCount() > 1
+                          ? 'iam.validation.unmet.prerequisites.plural'
+                          : 'iam.validation.unmet.prerequisites.singular'
+                        ) | translate: { count: invalidActionsCount() }
+                      }}
                     </p>
                   </div>
                 </div>
               </div>
             }
 
-            <!-- Action Tree Table -->
             <div class="overflow-x-auto -mx-4 sm:mx-0">
               <p-treeTable
                 [value]="treeNodes()"
                 dataKey="id"
-                styleClass="p-treetable-sm"
+                class="p-treetable-sm"
                 [tableStyle]="{ 'min-width': '50rem' }"
               >
                 <ng-template #header>
@@ -4163,75 +3891,94 @@ class UserActionSelectorComponent {
                       />
                     </th>
                     <th>{{ 'shared.name' | translate }}</th>
-                    <th class="hidden md:table-cell">{{ 'shared.code' | 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>
+                    <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">
+                      <p-checkbox
+                        [ngModel]="selectionMap()[rowData.id]"
+                        [binary]="true"
+                        (ngModelChange)="onActionToggle(rowData, $event)"
+                        [pTooltip]="tooltip"
+                        tooltipPosition="top"
+                      />
+                    </td>
+                    <td>
+                      <p-treeTableToggler [rowNode]="rowNode" />
+                      <span class="inline-flex items-center gap-2">
+                        {{ rowData.name }}
+                        @if (hasUnmet) {
+                          <i
+                            class="pi pi-exclamation-triangle text-orange-500"
+                            [pTooltip]="
+                              'iam.validation.unmet.prerequisites.tooltip'
+                                | translate
+                            "
+                            tooltipPosition="top"
+                          ></i>
+                        }
+                      </span>
+                    </td>
+                    <td class="hidden md:table-cell">
+                      {{ rowData.code || '-' }}
+                    </td>
+                    <td>
+                      <p-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 #body let-rowNode let-rowData="rowData">
-                <tr [class.highlight-warning]="hasUnmetPrerequisites(rowData)">
-                  <td class="w-12">
-                    <p-checkbox
-                      [ngModel]="selectionMap()[rowData.id]"
-                      [binary]="true"
-                      (ngModelChange)="onActionToggle(rowData, $event)"
-                      [pTooltip]="getTooltip(rowData)"
-                      tooltipPosition="top"
-                    />
-                  </td>
-                  <td>
-                    <p-treeTableToggler [rowNode]="rowNode" />
-                    <span class="inline-flex items-center gap-2">
-                      {{ rowData.name }}
-                      @if (hasUnmetPrerequisites(rowData)) {
-                        <i
-                          class="pi pi-exclamation-triangle text-orange-500"
-                          [pTooltip]="'iam.validation.unmet.prerequisites.tooltip' | translate"
-                          tooltipPosition="top"
-                        ></i>
+                <ng-template #emptymessage>
+                  <tr>
+                    <td colspan="5" class="text-center p-4 text-muted-color">
+                      @if (loading()) {
+                        <i class="pi pi-spin pi-spinner"></i>
+                        {{ 'shared.loading.actions' | translate }}
+                      } @else {
+                        {{ 'iam.permission.no.actions.available' | translate }}
                       }
-                    </span>
-                  </td>
-                  <td class="hidden md:table-cell">{{ rowData.code || '-' }}</td>
-                  <td>
-                    <p-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()) {
-                      <i class="pi pi-spin pi-spinner"></i> {{ 'shared.loading.actions' | translate }}
-                    } @else {
-                      {{ 'iam.permission.no.actions.available' | translate }}
-                    }
-                  </td>
-                </tr>
-              </ng-template>
+                    </td>
+                  </tr>
+                </ng-template>
               </p-treeTable>
             </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">
                 <i class="pi pi-info-circle text-primary"></i>
-                <span class="font-bold">{{ 'shared.pending.changes' | translate }}</span>
+                <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">
                       <i class="pi pi-plus-circle text-green-500"></i>
-                      <strong class="text-sm">{{ 'shared.to.assign' | translate }} ({{ pendingAdd().length }})</strong>
+                      <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) {
@@ -4244,7 +3991,11 @@ class UserActionSelectorComponent {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
                       <i class="pi pi-minus-circle text-red-500"></i>
-                      <strong class="text-sm">{{ 'shared.to.remove' | translate }} ({{ pendingRemove().length }})</strong>
+                      <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) {
@@ -4260,7 +4011,9 @@ class UserActionSelectorComponent {
 
         @if (!loading() && actions().length === 0) {
           <div class="surface-card p-5 rounded-border shadow-sm text-center">
-            <i class="pi pi-info-circle text-muted-color mb-3 block text-5xl"></i>
+            <i
+              class="pi pi-info-circle text-muted-color mb-3 block text-5xl"
+            ></i>
             <p class="text-muted-color m-0">
               {{ 'iam.permission.no.actions.for.user' | translate }}
             </p>
@@ -4268,13 +4021,18 @@ class UserActionSelectorComponent {
         }
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}.validation-warning{background-color:var(--p-yellow-50, #fefce8);border-left:4px solid var(--p-yellow-500, #eab308);color:var(--p-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--p-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--p-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i7.TreeTable, selector: "p-treeTable, p-treetable, p-tree-table", inputs: ["columns", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight", "selectionKeys", "showGridlines"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "component", type: i7.TreeTableToggler, selector: "p-treeTableToggler, p-treetabletoggler, p-treetable-toggler", inputs: ["rowNode"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "component", type: UserSelectComponent, selector: "lib-user-select", inputs: ["showClear", "value"], outputs: ["valueChange", "userSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, styles: [":host{display:block}.validation-warning{background-color:var(--p-yellow-50, #fefce8);border-left:4px solid var(--p-yellow-500, #eab308);color:var(--p-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--p-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--p-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i7.TreeTable, selector: "p-treeTable, p-treetable, p-tree-table", inputs: ["columns", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight", "selectionKeys", "showGridlines"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "component", type: i7.TreeTableToggler, selector: "p-treeTableToggler, p-treetabletoggler, p-treetable-toggler", inputs: ["rowNode"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "component", type: UserSelectComponent, selector: "lib-user-select", inputs: ["showClear", "value"], outputs: ["valueChange", "userSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UserActionSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'flusys-user-action-selector', imports: [CommonModule, FormsModule, PrimeModule, HasPermissionDirective, UserSelectComponent, TranslatePipe], template: `
+            args: [{ selector: 'flusys-user-action-selector', imports: [
+                        FormsModule,
+                        PrimeModule,
+                        HasPermissionDirective,
+                        UserSelectComponent,
+                        TranslatePipe,
+                    ], template: `
     <div class="user-action-selector">
-      <!-- User and Branch Selectors -->
       <div class="surface-card p-4 rounded-border mb-4 shadow-sm">
         <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
           <div>
@@ -4286,7 +4044,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               [value]="selectedUserId()"
               (valueChange)="selectedUserId.set($event)"
               [isEditMode]="true"
-              [placeHolder]="'iam.permission.select.user.placeholder' | translate"
+              [placeHolder]="
+                'iam.permission.select.user.placeholder' | translate
+              "
             />
           </div>
 
@@ -4302,10 +4062,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 [options]="filteredBranches()"
                 optionLabel="name"
                 optionValue="id"
-                [placeholder]="'iam.permission.select.branch.placeholder' | translate"
+                [placeholder]="
+                  'iam.permission.select.branch.placeholder' | translate
+                "
                 [showClear]="true"
                 [filter]="true"
-                styleClass="w-full"
+                class="w-full"
               >
                 <ng-template #selectedItem let-branch>
                   @if (branch) {
@@ -4323,7 +4085,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 </ng-template>
               </p-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 } }}
+                {{
+                  (filteredBranches().length !== 1
+                    ? 'iam.branch.permitted.count.plural'
+                    : 'iam.branch.permitted.count'
+                  ) | translate: { count: filteredBranches().length }
+                }}
               </small>
             </div>
           }
@@ -4331,23 +4098,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
       </div>
 
       @if (selectedUserId()) {
-        <!-- Loading State -->
         @if (loading()) {
           <div class="flex justify-center p-5">
             <i class="pi pi-spin pi-spinner text-4xl"></i>
           </div>
         }
 
-        <!-- Action List -->
         @if (!loading() && actions().length > 0) {
           <div class="surface-card p-4 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>
+                <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 } }}
+                  {{
+                    'iam.permission.actions.available'
+                      | translate: { count: actions().length }
+                  }}
                 </p>
               </div>
               <div class="flex flex-wrap gap-2">
@@ -4380,27 +4150,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               </div>
             </div>
 
-            <!-- Validation Warning -->
             @if (invalidActionsCount() > 0) {
               <div class="validation-warning rounded-border p-3 mb-4">
                 <div class="flex items-start gap-2">
                   <i class="pi pi-exclamation-triangle text-xl"></i>
                   <div class="flex-1">
-                    <span class="font-semibold">{{ 'iam.validation.warning.title' | translate }}:</span>
+                    <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() } }}
+                      {{
+                        (invalidActionsCount() > 1
+                          ? 'iam.validation.unmet.prerequisites.plural'
+                          : 'iam.validation.unmet.prerequisites.singular'
+                        ) | translate: { count: invalidActionsCount() }
+                      }}
                     </p>
                   </div>
                 </div>
               </div>
             }
 
-            <!-- Action Tree Table -->
             <div class="overflow-x-auto -mx-4 sm:mx-0">
               <p-treeTable
                 [value]="treeNodes()"
                 dataKey="id"
-                styleClass="p-treetable-sm"
+                class="p-treetable-sm"
                 [tableStyle]="{ 'min-width': '50rem' }"
               >
                 <ng-template #header>
@@ -4415,75 +4190,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                       />
                     </th>
                     <th>{{ 'shared.name' | translate }}</th>
-                    <th class="hidden md:table-cell">{{ 'shared.code' | 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>
+                    <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">
+                      <p-checkbox
+                        [ngModel]="selectionMap()[rowData.id]"
+                        [binary]="true"
+                        (ngModelChange)="onActionToggle(rowData, $event)"
+                        [pTooltip]="tooltip"
+                        tooltipPosition="top"
+                      />
+                    </td>
+                    <td>
+                      <p-treeTableToggler [rowNode]="rowNode" />
+                      <span class="inline-flex items-center gap-2">
+                        {{ rowData.name }}
+                        @if (hasUnmet) {
+                          <i
+                            class="pi pi-exclamation-triangle text-orange-500"
+                            [pTooltip]="
+                              'iam.validation.unmet.prerequisites.tooltip'
+                                | translate
+                            "
+                            tooltipPosition="top"
+                          ></i>
+                        }
+                      </span>
+                    </td>
+                    <td class="hidden md:table-cell">
+                      {{ rowData.code || '-' }}
+                    </td>
+                    <td>
+                      <p-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 #body let-rowNode let-rowData="rowData">
-                <tr [class.highlight-warning]="hasUnmetPrerequisites(rowData)">
-                  <td class="w-12">
-                    <p-checkbox
-                      [ngModel]="selectionMap()[rowData.id]"
-                      [binary]="true"
-                      (ngModelChange)="onActionToggle(rowData, $event)"
-                      [pTooltip]="getTooltip(rowData)"
-                      tooltipPosition="top"
-                    />
-                  </td>
-                  <td>
-                    <p-treeTableToggler [rowNode]="rowNode" />
-                    <span class="inline-flex items-center gap-2">
-                      {{ rowData.name }}
-                      @if (hasUnmetPrerequisites(rowData)) {
-                        <i
-                          class="pi pi-exclamation-triangle text-orange-500"
-                          [pTooltip]="'iam.validation.unmet.prerequisites.tooltip' | translate"
-                          tooltipPosition="top"
-                        ></i>
+                <ng-template #emptymessage>
+                  <tr>
+                    <td colspan="5" class="text-center p-4 text-muted-color">
+                      @if (loading()) {
+                        <i class="pi pi-spin pi-spinner"></i>
+                        {{ 'shared.loading.actions' | translate }}
+                      } @else {
+                        {{ 'iam.permission.no.actions.available' | translate }}
                       }
-                    </span>
-                  </td>
-                  <td class="hidden md:table-cell">{{ rowData.code || '-' }}</td>
-                  <td>
-                    <p-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()) {
-                      <i class="pi pi-spin pi-spinner"></i> {{ 'shared.loading.actions' | translate }}
-                    } @else {
-                      {{ 'iam.permission.no.actions.available' | translate }}
-                    }
-                  </td>
-                </tr>
-              </ng-template>
+                    </td>
+                  </tr>
+                </ng-template>
               </p-treeTable>
             </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">
                 <i class="pi pi-info-circle text-primary"></i>
-                <span class="font-bold">{{ 'shared.pending.changes' | translate }}</span>
+                <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">
                       <i class="pi pi-plus-circle text-green-500"></i>
-                      <strong class="text-sm">{{ 'shared.to.assign' | translate }} ({{ pendingAdd().length }})</strong>
+                      <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) {
@@ -4496,7 +4290,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                   <div>
                     <div class="flex items-center gap-2 mb-2">
                       <i class="pi pi-minus-circle text-red-500"></i>
-                      <strong class="text-sm">{{ 'shared.to.remove' | translate }} ({{ pendingRemove().length }})</strong>
+                      <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) {
@@ -4512,7 +4310,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 
         @if (!loading() && actions().length === 0) {
           <div class="surface-card p-5 rounded-border shadow-sm text-center">
-            <i class="pi pi-info-circle text-muted-color mb-3 block text-5xl"></i>
+            <i
+              class="pi pi-info-circle text-muted-color mb-3 block text-5xl"
+            ></i>
             <p class="text-muted-color m-0">
               {{ 'iam.permission.no.actions.for.user' | translate }}
             </p>
@@ -4605,15 +4405,15 @@ const IAM_ROUTES = [
                 children: [
                     {
                         path: '',
-                        loadComponent: () => import('./flusys-ng-iam-action-list-page.component-DYnYC7Nn.mjs').then((m) => m.ActionListPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-action-list-page.component-DRK79zUR.mjs').then((m) => m.ActionListPageComponent),
                     },
                     {
                         path: 'new',
-                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-DJbMu2aV.mjs').then((m) => m.ActionFormPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-D_vwcCjG.mjs').then((m) => m.ActionFormPageComponent),
                     },
                     {
                         path: ':id',
-                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-DJbMu2aV.mjs').then((m) => m.ActionFormPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-D_vwcCjG.mjs').then((m) => m.ActionFormPageComponent),
                     },
                 ],
             },
@@ -4624,15 +4424,15 @@ const IAM_ROUTES = [
                 children: [
                     {
                         path: '',
-                        loadComponent: () => import('./flusys-ng-iam-role-list-page.component-C7GVYYIn.mjs').then((m) => m.RoleListPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-role-list-page.component-CT7CvvHj.mjs').then((m) => m.RoleListPageComponent),
                     },
                     {
                         path: 'new',
-                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-BuZmko2b.mjs').then((m) => m.RoleFormPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-49dKMKOj.mjs').then((m) => m.RoleFormPageComponent),
                     },
                     {
                         path: ':id',
-                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-BuZmko2b.mjs').then((m) => m.RoleFormPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-49dKMKOj.mjs').then((m) => m.RoleFormPageComponent),
                     },
                 ],
             },
@@ -4647,7 +4447,7 @@ const IAM_ROUTES = [
                         COMPANY_ACTION_PERMISSIONS.READ,
                     ]),
                 ],
-                loadComponent: () => import('./flusys-ng-iam-permission-page.component-_cLVilgz.mjs').then((m) => m.PermissionPageComponent),
+                loadComponent: () => import('./flusys-ng-iam-permission-page.component-CZebeUhC.mjs').then((m) => m.PermissionPageComponent),
             },
             // Default redirect to actions
             {
@@ -4666,4 +4466,4 @@ const IAM_ROUTES = [
  */
 
 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-CnVOy_4s.mjs.map
+//# sourceMappingURL=flusys-ng-iam-flusys-ng-iam-C6I4k78L.mjs.map