@flusys/ng-iam 9.1.0-rc.1 → 9.1.1

package/fesm2022/flusys-ng-iam-user-action-selector.component-CAXEmJWx.mjs

@@ -0,0 +1,4592 @@
+import { t as RoleApiService } from "./flusys-ng-iam-role-api.service-OwPgmSFc.mjs";
+import { a as ActionApiService, i as flattenTree, n as buildTreeFromFlat, r as convertActionToTreeNode } from "./flusys-ng-iam-tree-utils-B1pBG4At.mjs";
+import { t as PermissionApiService } from "./flusys-ng-iam-permission-api.service-C7-Yxvz8.mjs";
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, Service, computed, effect, inject, signal, viewChild } from "@angular/core";
+import { COMPANY_ACTION_PERMISSIONS, COMPANY_API_PROVIDER, HasPermissionDirective, ROLE_ACTION_PERMISSIONS, TranslatePipe, TranslateService, USER_ACTION_PERMISSIONS, USER_PERMISSION_PROVIDER, USER_ROLE_PERMISSIONS, UserSelectComponent, buildBranchTreeNodes } from "@flusys/ng-shared";
+import { APP_CONFIG, isCompanyFeatureEnabled } from "@flusys/ng-core";
+import { CheckboxComponent, ConfirmationService, FButtonDirective, MessageService, SelectComponent, TableComponent, TagComponent, TooltipDirective, TreeSelectComponent, TreeTableComponent, TreeTableTogglerComponent, UiIconComponent } from "@flusys/ng-ui";
+import { firstValueFrom } from "rxjs";
+import * as i1 from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+import { LAYOUT_AUTH_STATE } from "@flusys/ng-layout";
+const MAX_DROPDOWN_ITEMS = 100;
+function validateActionPrerequisites(action, selectedActionIds, allActions) {
+	if (!action.permissionLogic) return {
+		valid: true,
+		missingActions: []
+	};
+	const result = evaluateLogicNodeWithMissing(action.permissionLogic, selectedActionIds);
+	if (result.valid) return {
+		valid: true,
+		missingActions: []
+	};
+	return {
+		valid: false,
+		missingActions: allActions.filter((a) => a.id && result.missingActionIds.has(a.id))
+	};
+}
+function evaluateLogicNodeWithMissing(node, selectedActionIds) {
+	if (node.type === "action" && node.actionId) {
+		const valid = selectedActionIds.has(node.actionId);
+		return {
+			valid,
+			missingActionIds: valid ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([node.actionId])
+		};
+	}
+	if (node.type === "group" && node.children?.length) {
+		if ((node.operator || "AND") === "AND") {
+			const missingIds = /* @__PURE__ */ new Set();
+			let allValid = true;
+			for (const child of node.children) {
+				const childResult = evaluateLogicNodeWithMissing(child, selectedActionIds);
+				if (!childResult.valid) {
+					allValid = false;
+					childResult.missingActionIds.forEach((id) => missingIds.add(id));
+				}
+			}
+			return {
+				valid: allValid,
+				missingActionIds: missingIds
+			};
+		}
+		for (const child of node.children) if (evaluateLogicNodeWithMissing(child, selectedActionIds).valid) return {
+			valid: true,
+			missingActionIds: /* @__PURE__ */ new Set()
+		};
+		return {
+			valid: false,
+			missingActionIds: evaluateLogicNodeWithMissing(node.children[0], selectedActionIds).missingActionIds
+		};
+	}
+	return {
+		valid: true,
+		missingActionIds: /* @__PURE__ */ new Set()
+	};
+}
+var ActionPermissionLogicService = class ActionPermissionLogicService {
+	confirmationService = inject(ConfirmationService);
+	messageService = inject(MessageService);
+	translateAdapter = inject(TranslateService, { optional: true });
+	t(key, variables) {
+		return this.translateAdapter?.translate(key, variables) ?? key;
+	}
+	handleCheck(action, currentSelection, allActions, onUpdate, onCancel) {
+		if (action.permissionLogic) {
+			if (!validateActionPrerequisites(action, this.getSelectedIds(currentSelection), allActions).valid) {
+				const previousState = { ...currentSelection };
+				const tempMap = { ...currentSelection };
+				tempMap[action.id] = true;
+				onUpdate(tempMap);
+				const allMissingActions = this.getAllMissingPrerequisitesRecursive(action, currentSelection, allActions);
+				this.showPrerequisiteDialog(action, allMissingActions, currentSelection, allActions, previousState, onUpdate, onCancel);
+				return;
+			}
+		}
+		const selMap = { ...currentSelection };
+		selMap[action.id] = true;
+		onUpdate(selMap);
+	}
+	handleUncheck(action, currentSelection, allActions, onUpdate) {
+		const affectedActions = this.findActionsDependingOn(action.id, currentSelection, allActions);
+		if (affectedActions.length > 0) {
+			this.showDependencyDialog(action, affectedActions, currentSelection, allActions, onUpdate);
+			return;
+		}
+		const selMap = { ...currentSelection };
+		selMap[action.id] = false;
+		onUpdate(selMap);
+	}
+	hasUnmetPrerequisites(action, currentSelection, allActions) {
+		if (!currentSelection[action.id] || !action.permissionLogic) return false;
+		const selectedActionIds = this.getSelectedIds(currentSelection);
+		selectedActionIds.delete(action.id);
+		return !validateActionPrerequisites(action, selectedActionIds, allActions).valid;
+	}
+	getActionsWithUnmetPrerequisites(currentSelection, allActions) {
+		return allActions.filter((a) => currentSelection[a.id]).filter((action) => this.hasUnmetPrerequisites(action, currentSelection, allActions));
+	}
+	showValidationErrorDialog(invalidActions, currentSelection, allActions, onUpdate) {
+		const errorList = invalidActions.map((action) => {
+			const selectedActionIds = this.getSelectedIds(currentSelection);
+			selectedActionIds.delete(action.id);
+			const validationResult = validateActionPrerequisites(action, selectedActionIds, allActions);
+			return `<li><strong>${this.sanitizeHtml(action.name ?? this.t("iam.logic.unknown.action"))}</strong> requires: ${validationResult.missingActions.map((a) => this.sanitizeHtml(a.name ?? this.t("iam.logic.unknown.action"))).join(", ")}</li>`;
+		}).join("");
+		this.confirmationService.confirm({
+			header: this.t("iam.logic.validation.failed"),
+			message: `${this.t("iam.logic.validation.failed.message")}<br/><br/><ul class="pl-4">${errorList}</ul><br/>${this.t("iam.logic.validation.failed.prompt")}`,
+			icon: "exclamation-triangle",
+			acceptLabel: this.t("iam.logic.auto.fix"),
+			rejectLabel: this.t("shared.cancel"),
+			acceptIcon: "trash",
+			rejectIcon: "times",
+			acceptButtonStyleClass: "p-button-warning",
+			closeOnEscape: false,
+			closable: false,
+			accept: () => {
+				const selMap = { ...currentSelection };
+				invalidActions.forEach((action) => {
+					selMap[action.id] = false;
+				});
+				onUpdate(selMap);
+				this.messageService.add({
+					severity: "warn",
+					summary: this.t("iam.logic.invalid.actions.removed"),
+					detail: this.t("iam.logic.removed.actions.detail", { count: invalidActions.length })
+				});
+			},
+			reject: () => {
+				this.messageService.add({
+					severity: "info",
+					summary: this.t("iam.logic.save.cancelled"),
+					detail: this.t("iam.logic.fix.prerequisites.manually")
+				});
+			}
+		});
+	}
+	getPrerequisiteTooltip(action, currentSelection, allActions) {
+		if (!action.permissionLogic) return "";
+		if (validateActionPrerequisites(action, this.getSelectedIds(currentSelection), allActions).valid) return `${this.t("iam.logic.prerequisites.satisfied")}\n\n${this.t("iam.logic.all.required.selected")}`;
+		const allMissingActions = this.getAllMissingPrerequisitesRecursive(action, currentSelection, allActions);
+		const logicTree = this.buildTooltipLogicTree(action.permissionLogic, currentSelection, allActions, 0);
+		const missingCount = allMissingActions.length;
+		return `${`⚠ ${this.t("iam.logic.prerequisites.required", { count: missingCount })}`}\n\n${logicTree}${`\n\n💡 ${this.t("iam.logic.click.to.auto.select")}`}`;
+	}
+	buildLogicMessage(logic, _missingActions, allActions, currentSelection) {
+		const selectedIds = currentSelection ? this.getSelectedIds(currentSelection) : /* @__PURE__ */ new Set();
+		const actionMap = new Map(allActions.map((a) => [a.id, a]));
+		return this.formatLogicNode(logic, selectedIds, actionMap, 0);
+	}
+	getSelectedIds(currentSelection) {
+		return new Set(Object.keys(currentSelection).filter((id) => currentSelection[id]));
+	}
+	sanitizeHtml(text) {
+		return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#x27;");
+	}
+	getAllMissingPrerequisitesRecursive(action, currentSelection, allActions) {
+		if (!action.id) return [];
+		const visited = /* @__PURE__ */ new Set();
+		const allMissing = /* @__PURE__ */ new Map();
+		const stack = /* @__PURE__ */ new Set();
+		const collectMissing = (targetAction, depth = 0) => {
+			if (!targetAction.permissionLogic || !targetAction.id) return;
+			if (depth > 50) return;
+			if (visited.has(targetAction.id)) return;
+			if (stack.has(targetAction.id)) return;
+			visited.add(targetAction.id);
+			stack.add(targetAction.id);
+			const result = validateActionPrerequisites(targetAction, this.getSelectedIds(currentSelection), allActions);
+			if (!result.valid) result.missingActions.forEach((missingAction) => {
+				if (missingAction.id && missingAction.id !== action.id) {
+					allMissing.set(missingAction.id, missingAction);
+					collectMissing(missingAction, depth + 1);
+				}
+			});
+			stack.delete(targetAction.id);
+		};
+		collectMissing(action);
+		return Array.from(allMissing.values());
+	}
+	showPrerequisiteDialog(action, missingActions, currentSelection, allActions, previousState, onUpdate, onCancel) {
+		const logicMessage = action.permissionLogic ? this.buildLogicMessage(action.permissionLogic, missingActions, allActions, currentSelection) : this.buildSimpleMessage(missingActions);
+		const actionsToSelect = action.permissionLogic ? this.calculateSmartSelection(action.permissionLogic, missingActions, currentSelection, allActions) : missingActions;
+		const selectionCount = actionsToSelect.length;
+		const sanitizedActionName = this.sanitizeHtml(action.name ?? this.t("iam.logic.unknown.action"));
+		const acceptLabel = selectionCount === 0 ? this.t("iam.logic.select.action.label") : this.t("iam.logic.auto.select.actions");
+		const detailMessage = selectionCount === 0 ? this.t("iam.logic.action.selected.detail") : this.t("iam.logic.auto.selected.detail", { count: selectionCount });
+		const suffix = selectionCount < missingActions.length ? this.t("iam.logic.minimum.required") : "";
+		const autoSelectPrompt = this.t("iam.logic.auto.select.prompt", {
+			count: selectionCount,
+			suffix
+		});
+		this.confirmationService.confirm({
+			header: this.t("iam.logic.missing.prerequisites"),
+			message: `<strong>${sanitizedActionName}</strong> ${this.t("iam.logic.requires.conditions")}<br/><br/>${logicMessage}<br/><br/><strong>${autoSelectPrompt}</strong><br/>${this.t("iam.logic.would.you.continue")}`,
+			icon: "exclamation-triangle",
+			acceptLabel,
+			rejectLabel: this.t("shared.cancel"),
+			acceptIcon: "check",
+			rejectIcon: "times",
+			closeOnEscape: false,
+			closable: false,
+			accept: () => {
+				const selMap = { ...currentSelection };
+				selMap[action.id] = true;
+				actionsToSelect.forEach((a) => {
+					selMap[a.id] = true;
+				});
+				onUpdate(selMap);
+				this.messageService.add({
+					severity: "info",
+					summary: this.t("iam.logic.actions.selected.summary"),
+					detail: detailMessage
+				});
+			},
+			reject: () => {
+				onCancel(previousState);
+				this.messageService.add({
+					severity: "info",
+					summary: this.t("iam.logic.selection.cancelled"),
+					detail: this.t("iam.logic.action.not.added")
+				});
+			}
+		});
+	}
+	showDependencyDialog(action, affectedActions, currentSelection, _allActions, onUpdate) {
+		if (!action.id) return;
+		const alternatives = this.findAlternatives(action.id, affectedActions, currentSelection);
+		let message = `<strong>${this.sanitizeHtml(action.name ?? this.t("iam.logic.unknown.action"))}</strong> ${this.t("iam.logic.required.by.actions")}<br/><br/><ul class="pl-4">`;
+		affectedActions.forEach((a) => {
+			const sanitizedName = this.sanitizeHtml(a.name ?? this.t("iam.logic.unknown.action"));
+			message += `<li>${sanitizedName}</li>`;
+		});
+		message += "</ul><br/>";
+		if (alternatives.length > 0) {
+			message += `<strong>${this.t("iam.logic.alternatives.available")}</strong><br/><br/>`;
+			message += `<em>${this.t("iam.logic.switch.to.alternatives")}</em>`;
+		} else {
+			message += `<em>${this.t("iam.logic.remove.dependents")}</em><br/><br/>`;
+			message += this.t("iam.logic.would.you.continue");
+		}
+		this.confirmationService.confirm({
+			header: this.t("iam.logic.dependency.warning"),
+			message,
+			icon: "exclamation-triangle",
+			acceptLabel: alternatives.length > 0 ? this.t("iam.logic.use.alternatives") : this.t("iam.logic.remove.all"),
+			rejectLabel: this.t("shared.cancel"),
+			acceptIcon: "check",
+			rejectIcon: "times",
+			closeOnEscape: false,
+			closable: false,
+			accept: () => {
+				const selMap = { ...currentSelection };
+				if (alternatives.length > 0) {
+					alternatives.forEach(({ alternativeId }) => {
+						selMap[alternativeId] = true;
+					});
+					selMap[action.id] = false;
+					this.messageService.add({
+						severity: "success",
+						summary: this.t("iam.logic.alternatives.applied"),
+						detail: this.t("iam.logic.switched.to.alternatives")
+					});
+				} else {
+					selMap[action.id] = false;
+					affectedActions.forEach((a) => {
+						selMap[a.id] = false;
+					});
+					this.messageService.add({
+						severity: "warn",
+						summary: this.t("iam.logic.actions.removed"),
+						detail: this.t("iam.logic.removed.with.dependents", {
+							name: action.name ?? "",
+							count: affectedActions.length
+						})
+					});
+				}
+				onUpdate(selMap);
+			},
+			reject: () => {
+				this.messageService.add({
+					severity: "info",
+					summary: this.t("iam.logic.cancelled"),
+					detail: this.t("iam.logic.no.changes.made")
+				});
+			}
+		});
+	}
+	findActionsDependingOn(actionId, currentSelection, allActions) {
+		return allActions.filter((a) => currentSelection[a.id] && a.id !== actionId).filter((action) => {
+			if (!action.permissionLogic) return false;
+			return this.doesLogicDependOn(action.permissionLogic, actionId);
+		});
+	}
+	doesLogicDependOn(node, targetActionId) {
+		if (node.type === "action") return node.actionId === targetActionId;
+		if (node.type === "group" && node.children) return node.children.some((child) => this.doesLogicDependOn(child, targetActionId));
+		return false;
+	}
+	findAlternatives(removingActionId, affectedActions, currentSelection) {
+		const alternatives = [];
+		for (const affectedAction of affectedActions) {
+			if (!affectedAction.permissionLogic) continue;
+			const alternative = this.findAlternativeInLogic(affectedAction.permissionLogic, removingActionId, currentSelection);
+			if (alternative) alternatives.push({ alternativeId: alternative });
+		}
+		return alternatives;
+	}
+	findAlternativeInLogic(node, removingActionId, currentSelection) {
+		if (node.type === "group" && node.operator === "OR" && node.children) {
+			if (node.children.some((child) => child.type === "action" && child.actionId === removingActionId)) {
+				for (const child of node.children) if (child.type === "action" && child.actionId && child.actionId !== removingActionId && !currentSelection[child.actionId]) return child.actionId;
+			}
+		}
+		if (node.type === "group" && node.children) for (const child of node.children) {
+			const alternative = this.findAlternativeInLogic(child, removingActionId, currentSelection);
+			if (alternative) return alternative;
+		}
+		return null;
+	}
+	calculateSmartSelection(logic, missingActions, currentSelection, allActions) {
+		const missingIds = new Set(missingActions.map((a) => a.id));
+		const actionMap = new Map(allActions.map((a) => [a.id, a]));
+		const selectedIds = this.getSelectedIds(currentSelection);
+		const requiredIds = this.findRequiredActionIds(logic, missingIds, selectedIds);
+		return Array.from(requiredIds).map((id) => actionMap.get(id)).filter((a) => !!a);
+	}
+	findRequiredActionIds(node, missingIds, selectedIds) {
+		if (node.type === "action" && node.actionId) {
+			if (missingIds.has(node.actionId)) return /* @__PURE__ */ new Set([node.actionId]);
+			return /* @__PURE__ */ new Set();
+		}
+		if (node.type === "group" && node.children && node.children.length > 0) {
+			if ((node.operator || "AND") === "AND") {
+				const required = /* @__PURE__ */ new Set();
+				for (const child of node.children) this.findRequiredActionIds(child, missingIds, selectedIds).forEach((id) => required.add(id));
+				return required;
+			} else {
+				let minRequired = null;
+				let minSize = Infinity;
+				for (const child of node.children) {
+					const childRequired = this.findRequiredActionIds(child, missingIds, selectedIds);
+					if (childRequired.size === 0) return /* @__PURE__ */ new Set();
+					if (childRequired.size < minSize) {
+						minSize = childRequired.size;
+						minRequired = childRequired;
+					}
+				}
+				return minRequired || /* @__PURE__ */ new Set();
+			}
+		}
+		return /* @__PURE__ */ new Set();
+	}
+	buildSimpleMessage(missingActions) {
+		return `<ul class="pl-4">${missingActions.map((a) => `<li>${this.sanitizeHtml(a.name ?? this.t("iam.logic.unknown.action"))}</li>`).join("")}</ul>`;
+	}
+	formatLogicNode(node, selectedIds, actionMap, depth) {
+		const indent = "&nbsp;&nbsp;&nbsp;&nbsp;".repeat(depth);
+		if (node.type === "action" && node.actionId) {
+			const action = actionMap.get(node.actionId);
+			const actionName = this.sanitizeHtml(action?.name || this.t("iam.logic.unknown.action"));
+			if (selectedIds.has(node.actionId)) return `${indent}<span style="color: #10b981; font-weight: 500;">✓ ${actionName}</span> <em style="color: #059669;">${this.t("iam.logic.satisfied")}</em>`;
+			else return `${indent}<span style="color: #ef4444;">✗ ${actionName}</span> <em style="color: #dc2626;">${this.t("iam.logic.missing")}</em>`;
+		}
+		if (node.type === "group" && node.children) {
+			const operator = node.operator || "AND";
+			const operatorColor = operator === "AND" ? "#3b82f6" : "#8b5cf6";
+			const lines = [];
+			lines.push(`${indent}<strong style="color: ${operatorColor};">${operator}</strong> <span style="color: #6b7280;">(${node.children.length} condition${node.children.length !== 1 ? "s" : ""})</span>`);
+			node.children.forEach((child, index) => {
+				const childHtml = this.formatLogicNode(child, selectedIds, actionMap, depth + 1);
+				lines.push(childHtml);
+				if (node.children && index < node.children.length - 1) lines.push(`${indent}&nbsp;&nbsp;<em style="color: ${operatorColor}; font-size: 0.75rem;">${operator.toLowerCase()}</em>`);
+			});
+			return lines.join("<br/>");
+		}
+		return `${indent}<em style="color: #9ca3af;">${this.t("iam.logic.invalid.node")}</em>`;
+	}
+	buildTooltipLogicTree(node, currentSelection, allActions, depth) {
+		const indent = "  ".repeat(depth);
+		const selectedIds = this.getSelectedIds(currentSelection);
+		const actionMap = new Map(allActions.map((a) => [a.id, a]));
+		if (node.type === "action" && node.actionId) {
+			const actionName = actionMap.get(node.actionId)?.name || this.t("iam.logic.unknown.action");
+			if (selectedIds.has(node.actionId)) return `${indent}✓ ${actionName}`;
+			else return `${indent}✗ ${actionName}`;
+		}
+		if (node.type === "group" && node.children) {
+			const operator = node.operator || "AND";
+			const lines = [];
+			lines.push(`${indent}${operator}:`);
+			node.children.forEach((child, index) => {
+				const childText = this.buildTooltipLogicTree(child, currentSelection, allActions, depth + 1);
+				lines.push(childText);
+				if (node.children && index < node.children.length - 1 && operator === "OR") lines.push(`${indent}  ${operator.toLowerCase()}`);
+			});
+			return lines.join("\n");
+		}
+		return `${indent}${this.t("iam.logic.invalid")}`;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ActionPermissionLogicService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Service
+	});
+	static ɵprov = i0.ɵɵngDeclareService({
+		minVersion: "22.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ActionPermissionLogicService
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: ActionPermissionLogicService,
+	decorators: [{ type: Service }]
+});
+var BaseActionSelectorComponent = class {
+	permissionLogic = inject(ActionPermissionLogicService);
+	confirmationService = inject(ConfirmationService);
+	translateAdapter = inject(TranslateService, { optional: true });
+	loading = signal(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+	saving = signal(false, ...ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []);
+	_actions = signal([], ...ngDevMode ? [{ debugName: "_actions" }] : /* istanbul ignore next */ []);
+	actions = this._actions.asReadonly();
+	_actionsTree = signal([], ...ngDevMode ? [{ debugName: "_actionsTree" }] : /* istanbul ignore next */ []);
+	actionsTree = this._actionsTree.asReadonly();
+	_selectionMap = signal({}, ...ngDevMode ? [{ debugName: "_selectionMap" }] : /* istanbul ignore next */ []);
+	selectionMap = this._selectionMap.asReadonly();
+	_initialSelection = signal({}, ...ngDevMode ? [{ debugName: "_initialSelection" }] : /* istanbul ignore next */ []);
+	initialSelection = this._initialSelection.asReadonly();
+	treeNodes = computed(() => convertActionToTreeNode(this.actionsTree()), ...ngDevMode ? [{ debugName: "treeNodes" }] : /* istanbul ignore next */ []);
+	allSelected = computed(() => {
+		const selMap = this.selectionMap();
+		const total = this.actions().length;
+		if (total === 0) return false;
+		return Object.values(selMap).filter((v) => v).length === total;
+	}, ...ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []);
+	hasChanges = computed(() => {
+		const current = this.selectionMap();
+		const initial = this.initialSelection();
+		const currentKeys = Object.keys(current);
+		if (currentKeys.length !== Object.keys(initial).length) return true;
+		return currentKeys.some((key) => current[key] !== initial[key]);
+	}, ...ngDevMode ? [{ debugName: "hasChanges" }] : /* istanbul ignore next */ []);
+	actionsWithUnmetPrerequisites = computed(() => {
+		const selMap = this.selectionMap();
+		const allActions = this.actions();
+		const unmetSet = /* @__PURE__ */ 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" }] : /* istanbul ignore next */ []);
+	invalidActionsCount = computed(() => this.actionsWithUnmetPrerequisites().size, ...ngDevMode ? [{ debugName: "invalidActionsCount" }] : /* istanbul ignore next */ []);
+	pendingAdd = computed(() => {
+		const current = this.selectionMap();
+		const initial = this.initialSelection();
+		return this.actions().filter((a) => current[a.id] && !initial[a.id]);
+	}, ...ngDevMode ? [{ debugName: "pendingAdd" }] : /* istanbul ignore next */ []);
+	pendingRemove = computed(() => {
+		const current = this.selectionMap();
+		const initial = this.initialSelection();
+		return this.actions().filter((a) => !current[a.id] && initial[a.id]);
+	}, ...ngDevMode ? [{ debugName: "pendingRemove" }] : /* istanbul ignore next */ []);
+	canSave = computed(() => this.hasChanges() && !this.saving() && this.invalidActionsCount() === 0, ...ngDevMode ? [{ debugName: "canSave" }] : /* istanbul ignore next */ []);
+	translate(key, vars) {
+		return this.translateAdapter?.translate(key, vars) ?? key;
+	}
+	confirmSelectionChange(onAccept, onReject) {
+		if (!this.hasChanges()) {
+			onAccept();
+			return;
+		}
+		this.confirmationService.confirm({
+			header: this.translate("iam.permission.unsaved.changes.title"),
+			message: this.translate("iam.permission.unsaved.changes.message"),
+			icon: "exclamation-triangle",
+			acceptLabel: this.translate("iam.permission.unsaved.changes.discard"),
+			rejectLabel: this.translate("shared.cancel"),
+			accept: onAccept,
+			reject: onReject
+		});
+	}
+	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) return `${prerequisiteInfo}${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 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());
+	}
+	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({});
+	}
+};
+var RoleActionSelectorComponent = 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(void 0, ...ngDevMode ? [{ debugName: "selectedRoleId" }] : /* istanbul ignore next */ []);
+	roles = signal([], ...ngDevMode ? [{ debugName: "roles" }] : /* istanbul ignore next */ []);
+	roleSelectRef = viewChild("roleSelect", ...ngDevMode ? [{ debugName: "roleSelectRef" }] : /* istanbul ignore next */ []);
+	loadDataAbortController = null;
+	constructor() {
+		super();
+		this.destroyRef.onDestroy(() => {
+			this.loadDataAbortController?.abort();
+		});
+		this.loadRoles();
+		effect(() => {
+			const roleId = this.selectedRoleId();
+			this.loadDataAbortController?.abort();
+			if (roleId) {
+				this.loadDataAbortController = new AbortController();
+				this.onRoleChange(this.loadDataAbortController.signal).catch((err) => {
+					if (err.name !== "AbortError") this.loading.set(false);
+				});
+			} else this.resetState();
+		});
+	}
+	onRoleSelect(roleId) {
+		const previousRoleId = this.selectedRoleId();
+		if (roleId === previousRoleId) return;
+		this.confirmSelectionChange(() => this.selectedRoleId.set(roleId), () => this.roleSelectRef()?.writeValue(previousRoleId));
+	}
+	getDefaultTooltip(isSelected) {
+		if (isSelected) return `[${this.translate("shared.assigned")}] ${this.translate("iam.tooltip.assigned.to.role")}\n\n[${this.translate("shared.remove")}] ${this.translate("iam.tooltip.click.to.remove.role")}`;
+		return `[${this.translate("shared.add")}] ${this.translate("iam.tooltip.click.to.assign.role")}`;
+	}
+	async loadRoles() {
+		try {
+			const response = await this.roleApi.getAll({ pagination: {
+				currentPage: 0,
+				pageSize: 100
+			} });
+			this.roles.set(response?.data ?? []);
+		} catch {}
+	}
+	async onRoleChange(signal) {
+		const roleId = this.selectedRoleId();
+		if (!roleId) return;
+		this.loading.set(true);
+		try {
+			const actionsResponse = await firstValueFrom(this.actionApi.getActionsForPermission());
+			if (signal.aborted) return;
+			const flatActions = (actionsResponse?.data ?? []).filter((a) => !!a.id);
+			const actionsTree = buildTreeFromFlat(flatActions);
+			this._actionsTree.set(actionsTree);
+			this._actions.set(flatActions);
+			const assignedResponse = await firstValueFrom(this.permissionApi.getRoleActions(roleId));
+			if (signal.aborted) return;
+			const assignedIds = new Set((assignedResponse?.data || []).map((a) => a.actionId));
+			const selMap = this.buildSelectionMap(flatActions, (action) => assignedIds.has(action.id));
+			this._selectionMap.set(selMap);
+			this._initialSelection.set({ ...selMap });
+		} finally {
+			if (!signal.aborted) this.loading.set(false);
+		}
+	}
+	async saveChanges() {
+		const roleId = this.selectedRoleId();
+		if (!roleId) return;
+		const invalidActions = this.permissionLogic.getActionsWithUnmetPrerequisites(this.selectionMap(), this.actions());
+		if (invalidActions.length > 0) {
+			this.permissionLogic.showValidationErrorDialog(invalidActions, this.selectionMap(), this.actions(), (newMap) => this._selectionMap.set(newMap));
+			return;
+		}
+		const items = this.buildPayloadItems();
+		if (items.length === 0) return;
+		this.saving.set(true);
+		try {
+			const response = await firstValueFrom(this.permissionApi.assignRoleActions({
+				roleId,
+				items
+			}));
+			this.messageService.add({
+				severity: "success",
+				summary: this.translate("shared.success"),
+				detail: response?.messageKey ? this.translate(response.messageKey, response.messageVariables) : response?.message
+			});
+			this._initialSelection.set({ ...this.selectionMap() });
+		} catch {} finally {
+			this.saving.set(false);
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: RoleActionSelectorComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: RoleActionSelectorComponent,
+		isStandalone: true,
+		selector: "flusys-role-action-selector",
+		viewQueries: [{
+			propertyName: "roleSelectRef",
+			first: true,
+			predicate: ["roleSelect"],
+			descendants: true,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		ngImport: i0,
+		template: `
+    <div class="role-action-selector">
+      <div class="surface-card p-4 rounded-border mb-4 shadow-sm">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
+          <div>
+            <label class="block font-semibold mb-2">
+              <ui-icon name="shield" class="mr-2 text-primary"></ui-icon>
+              {{ 'iam.permission.select.role' | translate }}
+            </label>
+            <f-select
+              #roleSelect
+              [ngModel]="selectedRoleId()"
+              (ngModelChange)="onRoleSelect($event)"
+              [options]="roles()"
+              optionLabel="name"
+              optionValue="id"
+              [placeholder]="
+                'iam.permission.select.role.placeholder' | translate
+              "
+              [showClear]="true"
+              [filter]="true"
+              class="w-full"
+            />
+          </div>
+        </div>
+      </div>
+
+      @if (!selectedRoleId()) {
+        <div class="empty-state border border-dashed border-surface rounded-border p-8 text-center">
+          <div class="empty-state-icon mx-auto mb-3">
+            <ui-icon name="arrow-up" class="text-primary"></ui-icon>
+          </div>
+          <h5 class="m-0 mb-1">
+            {{ 'iam.permission.empty.role.actions.title' | translate }}
+          </h5>
+          <p class="text-sm text-muted-color m-0">
+            {{ 'iam.permission.empty.role.actions.description' | translate }}
+          </p>
+        </div>
+      }
+
+      @if (selectedRoleId()) {
+        @if (loading()) {
+          <div
+            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
+          >
+            <ui-icon name="loader-circle" spin class="text-primary text-5xl"></ui-icon>
+          </div>
+        }
+
+        @if (!loading() && actions().length > 0) {
+          <div class="surface-card p-4 rounded-border shadow-sm">
+            <div
+              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
+            >
+              <div>
+                <h5 class="m-0 mb-1">
+                  {{ 'iam.permission.action.permissions' | translate }}
+                </h5>
+                <p class="text-sm text-muted-color m-0">
+                  {{
+                    'iam.permission.actions.available'
+                      | translate: { count: actions().length }
+                  }}
+                </p>
+              </div>
+              <div class="flex flex-wrap gap-2">
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="setAllSelection(true)"
+                >
+                  <ui-icon pButtonIcon name="check"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="setAllSelection(false)"
+                >
+                  <ui-icon pButtonIcon name="times"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  *hasPermission="ROLE_ACTION_PERMISSIONS.ASSIGN"
+                  [disabled]="!canSave() || saving()"
+                  size="small"
+                  (click)="saveChanges()"
+                >
+                  @if (saving()) {
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                  } @else {
+                    <ui-icon pButtonIcon name="save"></ui-icon>
+                  }
+                  <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
+                </button>
+              </div>
+            </div>
+
+            @if (invalidActionsCount() > 0) {
+              <div class="validation-warning rounded-border p-3 mb-4">
+                <div class="flex items-start gap-2">
+                  <ui-icon name="exclamation-triangle" class="text-xl"></ui-icon>
+                  <div class="flex-1">
+                    <span class="font-semibold"
+                      >{{ 'iam.validation.warning.title' | translate }}:</span
+                    >
+                    <p class="text-sm mt-1 mb-0">
+                      {{
+                        (invalidActionsCount() > 1
+                          ? 'iam.validation.unmet.prerequisites.plural'
+                          : 'iam.validation.unmet.prerequisites.singular'
+                        ) | translate: { count: invalidActionsCount() }
+                      }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            }
+
+            <div class="overflow-x-auto -mx-4 sm:mx-0">
+              <f-treetable
+                [value]="treeNodes()"
+                dataKey="id"
+                [tableStyle]="{ 'min-width': '50rem' }"
+              >
+                <ng-template #header>
+                  <tr>
+                    <th class="w-12">
+                      <f-checkbox
+                        [ngModel]="allSelected()"
+                        [binary]="true"
+                        (ngModelChange)="toggleAll()"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
+                        tooltipPosition="top"
+                      />
+                    </th>
+                    <th>{{ 'shared.name' | translate }}</th>
+                    <th class="hidden md:table-cell">
+                      {{ 'shared.code' | translate }}
+                    </th>
+                    <th>{{ 'iam.action.type' | translate }}</th>
+                    <th class="hidden lg:table-cell">
+                      {{ 'iam.permission.requirements' | translate }}
+                    </th>
+                  </tr>
+                </ng-template>
+                <ng-template #body let-rowNode let-rowData="rowData">
+                  @let hasUnmet = hasUnmetPrerequisites(rowData);
+                  @let tooltip = getTooltip(rowData);
+                  <tr [class.highlight-warning]="hasUnmet">
+                    <td class="w-12">
+                      <f-checkbox
+                        [ngModel]="selectionMap()[rowData.id]"
+                        [binary]="true"
+                        (ngModelChange)="onActionToggle(rowData, $event)"
+                        [fTooltip]="tooltip"
+                        tooltipPosition="top"
+                      />
+                    </td>
+                    <td>
+                      <f-treetabletoggler [rowNode]="rowNode" />
+                      <span class="inline-flex items-center gap-2">
+                        {{ rowData.name }}
+                        @if (hasUnmet) {
+                          <ui-icon name="exclamation-triangle" class="text-orange-500" [fTooltip]="
+                              'iam.validation.unmet.prerequisites.tooltip'
+                                | translate
+                            "
+                            tooltipPosition="top"></ui-icon>
+                        }
+                      </span>
+                    </td>
+                    <td class="hidden md:table-cell">
+                      {{ rowData.code || '-' }}
+                    </td>
+                    <td>
+                      <f-tag
+                        [value]="rowData.actionType"
+                        [severity]="
+                          rowData.actionType === 'backend' ? 'info' : 'success'
+                        "
+                      />
+                    </td>
+                    <td class="hidden lg:table-cell">
+                      @if (rowData.permissionLogic) {
+                        <span class="text-sm text-muted-color">{{
+                          'iam.permission.has.prerequisites' | translate
+                        }}</span>
+                      } @else {
+                        <span class="text-muted-color">-</span>
+                      }
+                    </td>
+                  </tr>
+                </ng-template>
+                <ng-template #emptymessage>
+                  <tr>
+                    <td colspan="5" class="text-center p-4 text-muted-color">
+                      @if (loading()) {
+                        <ui-icon name="loader-circle" spin></ui-icon>
+                        {{ 'shared.loading.actions' | translate }}
+                      } @else {
+                        {{ 'iam.permission.no.actions.available' | translate }}
+                      }
+                    </td>
+                  </tr>
+                </ng-template>
+              </f-treetable>
+            </div>
+          </div>
+
+          @if (hasChanges()) {
+            <div class="border border-surface rounded-border p-3 mt-4">
+              <div class="flex items-center gap-2 mb-3">
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
+                <span class="font-bold">{{
+                  'shared.pending.changes' | translate
+                }}</span>
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                @if (pendingAdd().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.add' | translate }} ({{
+                          pendingAdd().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (action of pendingAdd(); track action.id) {
+                        <li class="text-sm mb-1">{{ action.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+                @if (pendingRemove().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.remove' | translate }} ({{
+                          pendingRemove().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (action of pendingRemove(); track action.id) {
+                        <li class="text-sm mb-1">{{ action.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+        }
+
+        @if (!loading() && actions().length === 0) {
+          <div class="surface-card p-5 rounded-border shadow-sm text-center">
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
+            <p class="text-muted-color m-0">
+              {{ 'iam.permission.no.actions.for.role' | translate }}
+            </p>
+          </div>
+        }
+      }
+    </div>
+  `,
+		isInline: true,
+		styles: [":host{display:block}.empty-state-icon{width:3rem;height:3rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;background-color:var(--f-primary-50, rgba(59, 130, 246, .08))}:host-context(.app-dark) .empty-state-icon{background-color:#60a5fa1f}.validation-warning{background-color:var(--f-yellow-50, #fefce8);border-left:4px solid var(--f-yellow-500, #eab308);color:var(--f-yellow-700, #a16207)}:host-context(.app-dark) .validation-warning{background-color:#eab3081a;color:var(--f-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--f-red-50, rgba(239, 68, 68, .1))!important}:host-context(.app-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"],
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: FormsModule
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgModel,
+				selector: "[ngModel]:not([formControlName]):not([formControl])",
+				inputs: [
+					"name",
+					"disabled",
+					"ngModel",
+					"ngModelOptions"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngModel"]
+			},
+			{
+				kind: "component",
+				type: CheckboxComponent,
+				selector: "f-checkbox",
+				inputs: [
+					"label",
+					"binary",
+					"disabled",
+					"readonly",
+					"inputId",
+					"invalid",
+					"indeterminate",
+					"variant",
+					"size",
+					"touched",
+					"styleClass",
+					"style",
+					"checked"
+				],
+				outputs: [
+					"onChange",
+					"onBlur",
+					"touch",
+					"checkedChange"
+				]
+			},
+			{
+				kind: "directive",
+				type: FButtonDirective,
+				selector: "[fButton]",
+				inputs: [
+					"severity",
+					"text",
+					"outlined",
+					"link",
+					"variant",
+					"rounded",
+					"raised",
+					"fluid",
+					"disabled",
+					"loading",
+					"loadingIcon",
+					"size",
+					"label",
+					"icon",
+					"iconPos",
+					"ariaLabel",
+					"plain"
+				]
+			},
+			{
+				kind: "component",
+				type: SelectComponent,
+				selector: "f-select",
+				inputs: [
+					"options",
+					"optionLabel",
+					"optionValue",
+					"placeholder",
+					"disabled",
+					"filter",
+					"filterBy",
+					"filterMatchMode",
+					"filterLocale",
+					"filterPlaceholder",
+					"resetFilterOnHide",
+					"autofocusFilter",
+					"emptyMessage",
+					"emptyFilterMessage",
+					"showClear",
+					"loading",
+					"loadingIcon",
+					"dropdownIcon",
+					"clearIcon",
+					"inputId",
+					"invalid",
+					"touched",
+					"styleClass",
+					"style",
+					"appendTo",
+					"editable",
+					"readonly",
+					"autofocus",
+					"checkmark",
+					"group",
+					"optionGroupLabel",
+					"optionGroupChildren",
+					"virtualScroll",
+					"virtualScrollItemSize",
+					"lazy",
+					"selectedObject"
+				],
+				outputs: [
+					"onFilter",
+					"onChange",
+					"onShow",
+					"onHide",
+					"onBlur",
+					"onFocus",
+					"onClear",
+					"onLazyLoad"
+				]
+			},
+			{
+				kind: "component",
+				type: TagComponent,
+				selector: "f-tag",
+				inputs: [
+					"value",
+					"severity",
+					"icon",
+					"rounded",
+					"color",
+					"styleClass",
+					"style"
+				]
+			},
+			{
+				kind: "directive",
+				type: TooltipDirective,
+				selector: "[fTooltip]",
+				inputs: [
+					"fTooltip",
+					"tooltipPosition",
+					"positionStyle",
+					"tooltipStyleClass",
+					"disabled",
+					"tooltipEvent",
+					"showDelay",
+					"hideDelay",
+					"life",
+					"autoHide",
+					"positionTop",
+					"positionLeft",
+					"escape"
+				]
+			},
+			{
+				kind: "component",
+				type: TreeTableComponent,
+				selector: "f-treetable",
+				inputs: [
+					"value",
+					"loading",
+					"dataKey",
+					"styleClass",
+					"tableStyle",
+					"scrollable",
+					"scrollHeight",
+					"resizableColumns",
+					"lazy",
+					"totalRecords",
+					"paginator",
+					"first",
+					"rows",
+					"rowsPerPageOptions",
+					"showCurrentPageReport",
+					"currentPageReportTemplate",
+					"globalFilterFields",
+					"filterDelay",
+					"selectionMode",
+					"sortMode",
+					"virtualScroll",
+					"virtualScrollItemSize",
+					"sortField",
+					"sortOrder",
+					"multiSortMeta",
+					"filters",
+					"selection",
+					"contextMenuSelection"
+				],
+				outputs: [
+					"sortFieldChange",
+					"sortOrderChange",
+					"multiSortMetaChange",
+					"filtersChange",
+					"selectionChange",
+					"contextMenuSelectionChange",
+					"onLazyLoad",
+					"onSort",
+					"onFilter",
+					"onNodeExpand",
+					"onNodeCollapse",
+					"onNodeSelect",
+					"onNodeUnselect",
+					"onRowContextMenu"
+				]
+			},
+			{
+				kind: "component",
+				type: TreeTableTogglerComponent,
+				selector: "f-treetabletoggler",
+				inputs: ["rowNode"]
+			},
+			{
+				kind: "component",
+				type: UiIconComponent,
+				selector: "ui-icon",
+				inputs: [
+					"name",
+					"size",
+					"spin",
+					"fill",
+					"severity"
+				]
+			},
+			{
+				kind: "directive",
+				type: HasPermissionDirective,
+				selector: "[hasPermission]",
+				inputs: ["hasPermission"]
+			},
+			{
+				kind: "pipe",
+				type: TranslatePipe,
+				name: "translate"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: RoleActionSelectorComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "flusys-role-action-selector",
+			imports: [
+				FormsModule,
+				CheckboxComponent,
+				FButtonDirective,
+				SelectComponent,
+				TagComponent,
+				TooltipDirective,
+				TreeTableComponent,
+				TreeTableTogglerComponent,
+				UiIconComponent,
+				HasPermissionDirective,
+				TranslatePipe
+			],
+			template: `
+    <div class="role-action-selector">
+      <div class="surface-card p-4 rounded-border mb-4 shadow-sm">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
+          <div>
+            <label class="block font-semibold mb-2">
+              <ui-icon name="shield" class="mr-2 text-primary"></ui-icon>
+              {{ 'iam.permission.select.role' | translate }}
+            </label>
+            <f-select
+              #roleSelect
+              [ngModel]="selectedRoleId()"
+              (ngModelChange)="onRoleSelect($event)"
+              [options]="roles()"
+              optionLabel="name"
+              optionValue="id"
+              [placeholder]="
+                'iam.permission.select.role.placeholder' | translate
+              "
+              [showClear]="true"
+              [filter]="true"
+              class="w-full"
+            />
+          </div>
+        </div>
+      </div>
+
+      @if (!selectedRoleId()) {
+        <div class="empty-state border border-dashed border-surface rounded-border p-8 text-center">
+          <div class="empty-state-icon mx-auto mb-3">
+            <ui-icon name="arrow-up" class="text-primary"></ui-icon>
+          </div>
+          <h5 class="m-0 mb-1">
+            {{ 'iam.permission.empty.role.actions.title' | translate }}
+          </h5>
+          <p class="text-sm text-muted-color m-0">
+            {{ 'iam.permission.empty.role.actions.description' | translate }}
+          </p>
+        </div>
+      }
+
+      @if (selectedRoleId()) {
+        @if (loading()) {
+          <div
+            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
+          >
+            <ui-icon name="loader-circle" spin class="text-primary text-5xl"></ui-icon>
+          </div>
+        }
+
+        @if (!loading() && actions().length > 0) {
+          <div class="surface-card p-4 rounded-border shadow-sm">
+            <div
+              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
+            >
+              <div>
+                <h5 class="m-0 mb-1">
+                  {{ 'iam.permission.action.permissions' | translate }}
+                </h5>
+                <p class="text-sm text-muted-color m-0">
+                  {{
+                    'iam.permission.actions.available'
+                      | translate: { count: actions().length }
+                  }}
+                </p>
+              </div>
+              <div class="flex flex-wrap gap-2">
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="setAllSelection(true)"
+                >
+                  <ui-icon pButtonIcon name="check"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="setAllSelection(false)"
+                >
+                  <ui-icon pButtonIcon name="times"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  *hasPermission="ROLE_ACTION_PERMISSIONS.ASSIGN"
+                  [disabled]="!canSave() || saving()"
+                  size="small"
+                  (click)="saveChanges()"
+                >
+                  @if (saving()) {
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                  } @else {
+                    <ui-icon pButtonIcon name="save"></ui-icon>
+                  }
+                  <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
+                </button>
+              </div>
+            </div>
+
+            @if (invalidActionsCount() > 0) {
+              <div class="validation-warning rounded-border p-3 mb-4">
+                <div class="flex items-start gap-2">
+                  <ui-icon name="exclamation-triangle" class="text-xl"></ui-icon>
+                  <div class="flex-1">
+                    <span class="font-semibold"
+                      >{{ 'iam.validation.warning.title' | translate }}:</span
+                    >
+                    <p class="text-sm mt-1 mb-0">
+                      {{
+                        (invalidActionsCount() > 1
+                          ? 'iam.validation.unmet.prerequisites.plural'
+                          : 'iam.validation.unmet.prerequisites.singular'
+                        ) | translate: { count: invalidActionsCount() }
+                      }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            }
+
+            <div class="overflow-x-auto -mx-4 sm:mx-0">
+              <f-treetable
+                [value]="treeNodes()"
+                dataKey="id"
+                [tableStyle]="{ 'min-width': '50rem' }"
+              >
+                <ng-template #header>
+                  <tr>
+                    <th class="w-12">
+                      <f-checkbox
+                        [ngModel]="allSelected()"
+                        [binary]="true"
+                        (ngModelChange)="toggleAll()"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
+                        tooltipPosition="top"
+                      />
+                    </th>
+                    <th>{{ 'shared.name' | translate }}</th>
+                    <th class="hidden md:table-cell">
+                      {{ 'shared.code' | translate }}
+                    </th>
+                    <th>{{ 'iam.action.type' | translate }}</th>
+                    <th class="hidden lg:table-cell">
+                      {{ 'iam.permission.requirements' | translate }}
+                    </th>
+                  </tr>
+                </ng-template>
+                <ng-template #body let-rowNode let-rowData="rowData">
+                  @let hasUnmet = hasUnmetPrerequisites(rowData);
+                  @let tooltip = getTooltip(rowData);
+                  <tr [class.highlight-warning]="hasUnmet">
+                    <td class="w-12">
+                      <f-checkbox
+                        [ngModel]="selectionMap()[rowData.id]"
+                        [binary]="true"
+                        (ngModelChange)="onActionToggle(rowData, $event)"
+                        [fTooltip]="tooltip"
+                        tooltipPosition="top"
+                      />
+                    </td>
+                    <td>
+                      <f-treetabletoggler [rowNode]="rowNode" />
+                      <span class="inline-flex items-center gap-2">
+                        {{ rowData.name }}
+                        @if (hasUnmet) {
+                          <ui-icon name="exclamation-triangle" class="text-orange-500" [fTooltip]="
+                              'iam.validation.unmet.prerequisites.tooltip'
+                                | translate
+                            "
+                            tooltipPosition="top"></ui-icon>
+                        }
+                      </span>
+                    </td>
+                    <td class="hidden md:table-cell">
+                      {{ rowData.code || '-' }}
+                    </td>
+                    <td>
+                      <f-tag
+                        [value]="rowData.actionType"
+                        [severity]="
+                          rowData.actionType === 'backend' ? 'info' : 'success'
+                        "
+                      />
+                    </td>
+                    <td class="hidden lg:table-cell">
+                      @if (rowData.permissionLogic) {
+                        <span class="text-sm text-muted-color">{{
+                          'iam.permission.has.prerequisites' | translate
+                        }}</span>
+                      } @else {
+                        <span class="text-muted-color">-</span>
+                      }
+                    </td>
+                  </tr>
+                </ng-template>
+                <ng-template #emptymessage>
+                  <tr>
+                    <td colspan="5" class="text-center p-4 text-muted-color">
+                      @if (loading()) {
+                        <ui-icon name="loader-circle" spin></ui-icon>
+                        {{ 'shared.loading.actions' | translate }}
+                      } @else {
+                        {{ 'iam.permission.no.actions.available' | translate }}
+                      }
+                    </td>
+                  </tr>
+                </ng-template>
+              </f-treetable>
+            </div>
+          </div>
+
+          @if (hasChanges()) {
+            <div class="border border-surface rounded-border p-3 mt-4">
+              <div class="flex items-center gap-2 mb-3">
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
+                <span class="font-bold">{{
+                  'shared.pending.changes' | translate
+                }}</span>
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                @if (pendingAdd().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.add' | translate }} ({{
+                          pendingAdd().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (action of pendingAdd(); track action.id) {
+                        <li class="text-sm mb-1">{{ action.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+                @if (pendingRemove().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.remove' | translate }} ({{
+                          pendingRemove().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (action of pendingRemove(); track action.id) {
+                        <li class="text-sm mb-1">{{ action.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+        }
+
+        @if (!loading() && actions().length === 0) {
+          <div class="surface-card p-5 rounded-border shadow-sm text-center">
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
+            <p class="text-muted-color m-0">
+              {{ 'iam.permission.no.actions.for.role' | translate }}
+            </p>
+          </div>
+        }
+      }
+    </div>
+  `,
+			styles: [":host{display:block}.empty-state-icon{width:3rem;height:3rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;background-color:var(--f-primary-50, rgba(59, 130, 246, .08))}:host-context(.app-dark) .empty-state-icon{background-color:#60a5fa1f}.validation-warning{background-color:var(--f-yellow-50, #fefce8);border-left:4px solid var(--f-yellow-500, #eab308);color:var(--f-yellow-700, #a16207)}:host-context(.app-dark) .validation-warning{background-color:#eab3081a;color:var(--f-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--f-red-50, rgba(239, 68, 68, .1))!important}:host-context(.app-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { roleSelectRef: [{
+		type: i0.ViewChild,
+		args: ["roleSelect", { isSignal: true }]
+	}] }
+});
+var CompanyActionSelectorComponent = class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
+	COMPANY_ACTION_PERMISSIONS = COMPANY_ACTION_PERMISSIONS;
+	companyApiProvider = inject(COMPANY_API_PROVIDER);
+	actionApi = inject(ActionApiService);
+	permissionApi = inject(PermissionApiService);
+	messageService = inject(MessageService);
+	destroyRef = inject(DestroyRef);
+	selectedCompanyId = signal(void 0, ...ngDevMode ? [{ debugName: "selectedCompanyId" }] : /* istanbul ignore next */ []);
+	companies = signal([], ...ngDevMode ? [{ debugName: "companies" }] : /* istanbul ignore next */ []);
+	companySelectRef = viewChild("companySelect", ...ngDevMode ? [{ debugName: "companySelectRef" }] : /* istanbul ignore next */ []);
+	loadDataAbortController = null;
+	constructor() {
+		super();
+		this.destroyRef.onDestroy(() => {
+			this.loadDataAbortController?.abort();
+		});
+		this.loadCompanies();
+		effect(() => {
+			const companyId = this.selectedCompanyId();
+			this.loadDataAbortController?.abort();
+			if (companyId) {
+				this.loadDataAbortController = new AbortController();
+				this.loadData(this.loadDataAbortController.signal).catch((err) => {
+					if (err.name !== "AbortError") this.loading.set(false);
+				});
+			} else this.resetState();
+		});
+	}
+	onCompanyChange(companyId) {
+		const previousCompanyId = this.selectedCompanyId();
+		if (companyId === previousCompanyId) return;
+		this.confirmSelectionChange(() => this.selectedCompanyId.set(companyId), () => this.companySelectRef()?.writeValue(previousCompanyId));
+	}
+	getDefaultTooltip(isSelected) {
+		if (isSelected) return `[${this.translate("iam.tooltip.selected")}] ${this.translate("iam.tooltip.selected")}\n\n[${this.translate("shared.remove")}] ${this.translate("iam.tooltip.click.to.remove")}`;
+		return `[${this.translate("shared.add")}] ${this.translate("iam.tooltip.click.to.add")}`;
+	}
+	async loadCompanies() {
+		try {
+			const response = await firstValueFrom(this.companyApiProvider.getCompanies({
+				page: 0,
+				pageSize: 100
+			}));
+			this.companies.set(response?.data ?? []);
+		} catch {}
+	}
+	async loadData(signal) {
+		const companyId = this.selectedCompanyId();
+		if (!companyId) return;
+		this.loading.set(true);
+		try {
+			const actionsResponse = await firstValueFrom(this.actionApi.getTree(void 0, void 0, false));
+			if (signal.aborted) return;
+			const actionsTree = actionsResponse?.data ?? [];
+			const actionsList = flattenTree(actionsTree).filter((a) => !!a.id);
+			this._actionsTree.set(actionsTree);
+			this._actions.set(actionsList);
+			const assignedResponse = await firstValueFrom(this.permissionApi.getCompanyActions(companyId));
+			if (signal.aborted) return;
+			const assignedIds = new Set((assignedResponse?.data || []).map((a) => a.actionId));
+			const selMap = this.buildSelectionMap(actionsList, (action) => assignedIds.has(action.id));
+			this._selectionMap.set(selMap);
+			this._initialSelection.set({ ...selMap });
+		} finally {
+			if (!signal.aborted) this.loading.set(false);
+		}
+	}
+	async saveChanges() {
+		const companyId = this.selectedCompanyId();
+		if (!companyId) return;
+		const invalidActions = this.permissionLogic.getActionsWithUnmetPrerequisites(this.selectionMap(), this.actions());
+		if (invalidActions.length > 0) {
+			this.permissionLogic.showValidationErrorDialog(invalidActions, this.selectionMap(), this.actions(), (newMap) => this._selectionMap.set(newMap));
+			return;
+		}
+		const items = this.buildPayloadItems();
+		if (items.length === 0) return;
+		this.saving.set(true);
+		try {
+			const response = await firstValueFrom(this.permissionApi.assignCompanyActions({
+				companyId,
+				items
+			}));
+			if (response?.data?.prerequisiteErrors && response.data.prerequisiteErrors.length > 0) {
+				this.handleBackendPrerequisiteErrors(response.data.prerequisiteErrors);
+				return;
+			}
+			this.messageService.add({
+				severity: "success",
+				summary: this.translate("shared.success"),
+				detail: response?.messageKey ? this.translate(response.messageKey, response.messageVariables) : response?.message ?? ""
+			});
+			this._initialSelection.set({ ...this.selectionMap() });
+		} catch {} finally {
+			this.saving.set(false);
+		}
+	}
+	handleBackendPrerequisiteErrors(prerequisiteErrors) {
+		const errorList = prerequisiteErrors.map((error) => {
+			const requiredNames = error.requiredActions.map((a) => a.actionName).join(", ");
+			return `${error.actionName} ${this.translate("iam.permission.requires")}: ${requiredNames}`;
+		}).join("\n");
+		this.confirmationService.confirm({
+			header: this.translate("iam.permission.prerequisite.validation.failed"),
+			message: `${this.translate("iam.permission.prerequisite.error.message")}\n\n${errorList}\n\n${this.translate("iam.permission.auto.select.prompt")}`,
+			icon: "exclamation-triangle",
+			acceptLabel: this.translate("iam.permission.auto.select.required"),
+			rejectLabel: this.translate("shared.cancel"),
+			acceptIcon: "check",
+			rejectIcon: "times",
+			accept: () => {
+				const selMap = { ...this.selectionMap() };
+				prerequisiteErrors.forEach((error) => {
+					error.requiredActions.forEach((a) => {
+						selMap[a.actionId] = true;
+					});
+				});
+				this._selectionMap.set(selMap);
+				this.messageService.add({
+					severity: "info",
+					summary: this.translate("iam.permission.actions.selected"),
+					detail: this.translate("iam.permission.auto.selected.prerequisites")
+				});
+			},
+			reject: () => {
+				this._selectionMap.set({ ...this.initialSelection() });
+				this.messageService.add({
+					severity: "info",
+					summary: this.translate("iam.permission.changes.reverted"),
+					detail: this.translate("iam.permission.selection.reverted")
+				});
+			}
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: CompanyActionSelectorComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: CompanyActionSelectorComponent,
+		isStandalone: true,
+		selector: "flusys-company-action-selector",
+		viewQueries: [{
+			propertyName: "companySelectRef",
+			first: true,
+			predicate: ["companySelect"],
+			descendants: true,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		ngImport: i0,
+		template: `
+    <div class="company-action-selector">
+      <div class="surface-card p-4 rounded-border mb-4 shadow-sm">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
+          <div>
+            <label class="block font-semibold mb-2">
+              <ui-icon name="building" class="mr-2 text-primary"></ui-icon>
+              {{ 'iam.permission.select.company' | translate }}
+            </label>
+            <f-select
+              #companySelect
+              [ngModel]="selectedCompanyId()"
+              (ngModelChange)="onCompanyChange($event)"
+              [options]="companies()"
+              optionLabel="name"
+              optionValue="id"
+              [placeholder]="
+                'iam.permission.select.company.placeholder' | translate
+              "
+              [showClear]="true"
+              [filter]="true"
+              class="w-full"
+            />
+          </div>
+        </div>
+      </div>
+
+      @if (!selectedCompanyId()) {
+        <div class="empty-state border border-dashed border-surface rounded-border p-8 text-center">
+          <div class="empty-state-icon mx-auto mb-3">
+            <ui-icon name="building" class="text-primary"></ui-icon>
+          </div>
+          <h5 class="m-0 mb-1">
+            {{ 'iam.permission.empty.company.actions.title' | translate }}
+          </h5>
+          <p class="text-sm text-muted-color m-0">
+            {{ 'iam.permission.empty.company.actions.description' | translate }}
+          </p>
+        </div>
+      }
+
+      @if (selectedCompanyId()) {
+        @if (loading()) {
+          <div
+            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
+          >
+            <ui-icon name="loader-circle" spin class="text-primary text-5xl"></ui-icon>
+          </div>
+        }
+
+        @if (!loading() && actions().length > 0) {
+          <div class="surface-card p-4 rounded-border shadow-sm">
+            <div
+              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
+            >
+              <div>
+                <h5 class="m-0 mb-1">
+                  {{ 'iam.permission.action.whitelist' | translate }}
+                </h5>
+                <p class="text-sm text-muted-color m-0">
+                  {{
+                    'iam.permission.actions.available'
+                      | translate: { count: actions().length }
+                  }}
+                </p>
+              </div>
+              <div class="flex flex-wrap gap-2">
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="setAllSelection(true)"
+                >
+                  <ui-icon pButtonIcon name="check"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="setAllSelection(false)"
+                >
+                  <ui-icon pButtonIcon name="times"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  *hasPermission="COMPANY_ACTION_PERMISSIONS.ASSIGN"
+                  [disabled]="!canSave() || saving()"
+                  size="small"
+                  (click)="saveChanges()"
+                >
+                  @if (saving()) {
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                  } @else {
+                    <ui-icon pButtonIcon name="save"></ui-icon>
+                  }
+                  <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
+                </button>
+              </div>
+            </div>
+
+            @if (invalidActionsCount() > 0) {
+              <div class="validation-warning rounded-border p-3 mb-4">
+                <div class="flex items-start gap-2">
+                  <ui-icon name="exclamation-triangle" class="text-xl"></ui-icon>
+                  <div class="flex-1">
+                    <span class="font-semibold"
+                      >{{ 'iam.validation.warning.title' | translate }}:</span
+                    >
+                    <p class="text-sm mt-1 mb-0">
+                      {{
+                        (invalidActionsCount() > 1
+                          ? 'iam.validation.unmet.prerequisites.plural'
+                          : 'iam.validation.unmet.prerequisites.singular'
+                        ) | translate: { count: invalidActionsCount() }
+                      }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            }
+
+            <div class="overflow-x-auto -mx-4 sm:mx-0">
+              <f-treetable
+                [value]="treeNodes()"
+                dataKey="id"
+                [tableStyle]="{ 'min-width': '50rem' }"
+              >
+                <ng-template #header>
+                  <tr>
+                    <th class="w-12">
+                      <f-checkbox
+                        [ngModel]="allSelected()"
+                        [binary]="true"
+                        (ngModelChange)="toggleAll()"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
+                        tooltipPosition="top"
+                      />
+                    </th>
+                    <th>{{ 'shared.name' | translate }}</th>
+                    <th class="hidden md:table-cell">
+                      {{ 'shared.code' | translate }}
+                    </th>
+                    <th>{{ 'iam.action.type' | translate }}</th>
+                    <th class="hidden lg:table-cell">
+                      {{ 'shared.description' | translate }}
+                    </th>
+                  </tr>
+                </ng-template>
+                <ng-template #body let-rowNode let-rowData="rowData">
+                  @let hasUnmet = hasUnmetPrerequisites(rowData);
+                  <tr [class.highlight-warning]="hasUnmet">
+                    <td class="w-12">
+                      <f-checkbox
+                        [ngModel]="selectionMap()[rowData.id]"
+                        [binary]="true"
+                        (ngModelChange)="onActionToggle(rowData, $event)"
+                        [fTooltip]="getTooltip(rowData)"
+                        tooltipPosition="top"
+                      />
+                    </td>
+                    <td>
+                      <f-treetabletoggler [rowNode]="rowNode" />
+                      <span class="inline-flex items-center gap-2">
+                        {{ rowData.name }}
+                        @if (hasUnmet) {
+                          <ui-icon name="exclamation-triangle" class="text-orange-500" [fTooltip]="
+                              'iam.validation.unmet.prerequisites.tooltip'
+                                | translate
+                            "
+                            tooltipPosition="top"></ui-icon>
+                        }
+                      </span>
+                    </td>
+                    <td class="hidden md:table-cell">
+                      {{ rowData.code || '-' }}
+                    </td>
+                    <td>
+                      <f-tag
+                        [value]="rowData.actionType"
+                        [severity]="
+                          rowData.actionType === 'backend' ? 'info' : 'success'
+                        "
+                      />
+                    </td>
+                    <td class="hidden lg:table-cell">
+                      {{ rowData.description || '-' }}
+                    </td>
+                  </tr>
+                </ng-template>
+                <ng-template #emptymessage>
+                  <tr>
+                    <td colspan="5" class="text-center p-4 text-muted-color">
+                      @if (loading()) {
+                        <ui-icon name="loader-circle" spin></ui-icon>
+                        {{ 'shared.loading.actions' | translate }}
+                      } @else {
+                        {{ 'iam.permission.no.actions.available' | translate }}
+                      }
+                    </td>
+                  </tr>
+                </ng-template>
+              </f-treetable>
+            </div>
+          </div>
+
+          @if (hasChanges()) {
+            <div class="border border-surface rounded-border p-3 mt-4">
+              <div class="flex items-center gap-2 mb-3">
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
+                <span class="font-bold">{{
+                  'shared.pending.changes' | translate
+                }}</span>
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                @if (pendingAdd().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.whitelist' | translate }} ({{
+                          pendingAdd().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (action of pendingAdd(); track action.id) {
+                        <li class="text-sm mb-1">{{ action.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+                @if (pendingRemove().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.remove' | translate }} ({{
+                          pendingRemove().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (action of pendingRemove(); track action.id) {
+                        <li class="text-sm mb-1">{{ action.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+        }
+
+        @if (!loading() && actions().length === 0) {
+          <div class="surface-card p-5 rounded-border shadow-sm text-center">
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
+            <p class="text-muted-color m-0">
+              {{ 'iam.permission.no.actions.for.company' | translate }}
+            </p>
+          </div>
+        }
+      }
+    </div>
+  `,
+		isInline: true,
+		styles: [":host{display:block}.empty-state-icon{width:3rem;height:3rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;background-color:var(--f-primary-50, rgba(59, 130, 246, .08))}:host-context(.app-dark) .empty-state-icon{background-color:#60a5fa1f}.validation-warning{background-color:var(--f-yellow-50, #fefce8);border-left:4px solid var(--f-yellow-500, #eab308);color:var(--f-yellow-700, #a16207)}:host-context(.app-dark) .validation-warning{background-color:#eab3081a;color:var(--f-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--f-red-50, rgba(239, 68, 68, .1))!important}:host-context(.app-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: CheckboxComponent,
+				selector: "f-checkbox",
+				inputs: [
+					"label",
+					"binary",
+					"disabled",
+					"readonly",
+					"inputId",
+					"invalid",
+					"indeterminate",
+					"variant",
+					"size",
+					"touched",
+					"styleClass",
+					"style",
+					"checked"
+				],
+				outputs: [
+					"onChange",
+					"onBlur",
+					"touch",
+					"checkedChange"
+				]
+			},
+			{
+				kind: "directive",
+				type: FButtonDirective,
+				selector: "[fButton]",
+				inputs: [
+					"severity",
+					"text",
+					"outlined",
+					"link",
+					"variant",
+					"rounded",
+					"raised",
+					"fluid",
+					"disabled",
+					"loading",
+					"loadingIcon",
+					"size",
+					"label",
+					"icon",
+					"iconPos",
+					"ariaLabel",
+					"plain"
+				]
+			},
+			{
+				kind: "component",
+				type: SelectComponent,
+				selector: "f-select",
+				inputs: [
+					"options",
+					"optionLabel",
+					"optionValue",
+					"placeholder",
+					"disabled",
+					"filter",
+					"filterBy",
+					"filterMatchMode",
+					"filterLocale",
+					"filterPlaceholder",
+					"resetFilterOnHide",
+					"autofocusFilter",
+					"emptyMessage",
+					"emptyFilterMessage",
+					"showClear",
+					"loading",
+					"loadingIcon",
+					"dropdownIcon",
+					"clearIcon",
+					"inputId",
+					"invalid",
+					"touched",
+					"styleClass",
+					"style",
+					"appendTo",
+					"editable",
+					"readonly",
+					"autofocus",
+					"checkmark",
+					"group",
+					"optionGroupLabel",
+					"optionGroupChildren",
+					"virtualScroll",
+					"virtualScrollItemSize",
+					"lazy",
+					"selectedObject"
+				],
+				outputs: [
+					"onFilter",
+					"onChange",
+					"onShow",
+					"onHide",
+					"onBlur",
+					"onFocus",
+					"onClear",
+					"onLazyLoad"
+				]
+			},
+			{
+				kind: "component",
+				type: TagComponent,
+				selector: "f-tag",
+				inputs: [
+					"value",
+					"severity",
+					"icon",
+					"rounded",
+					"color",
+					"styleClass",
+					"style"
+				]
+			},
+			{
+				kind: "directive",
+				type: TooltipDirective,
+				selector: "[fTooltip]",
+				inputs: [
+					"fTooltip",
+					"tooltipPosition",
+					"positionStyle",
+					"tooltipStyleClass",
+					"disabled",
+					"tooltipEvent",
+					"showDelay",
+					"hideDelay",
+					"life",
+					"autoHide",
+					"positionTop",
+					"positionLeft",
+					"escape"
+				]
+			},
+			{
+				kind: "component",
+				type: TreeTableComponent,
+				selector: "f-treetable",
+				inputs: [
+					"value",
+					"loading",
+					"dataKey",
+					"styleClass",
+					"tableStyle",
+					"scrollable",
+					"scrollHeight",
+					"resizableColumns",
+					"lazy",
+					"totalRecords",
+					"paginator",
+					"first",
+					"rows",
+					"rowsPerPageOptions",
+					"showCurrentPageReport",
+					"currentPageReportTemplate",
+					"globalFilterFields",
+					"filterDelay",
+					"selectionMode",
+					"sortMode",
+					"virtualScroll",
+					"virtualScrollItemSize",
+					"sortField",
+					"sortOrder",
+					"multiSortMeta",
+					"filters",
+					"selection",
+					"contextMenuSelection"
+				],
+				outputs: [
+					"sortFieldChange",
+					"sortOrderChange",
+					"multiSortMetaChange",
+					"filtersChange",
+					"selectionChange",
+					"contextMenuSelectionChange",
+					"onLazyLoad",
+					"onSort",
+					"onFilter",
+					"onNodeExpand",
+					"onNodeCollapse",
+					"onNodeSelect",
+					"onNodeUnselect",
+					"onRowContextMenu"
+				]
+			},
+			{
+				kind: "component",
+				type: TreeTableTogglerComponent,
+				selector: "f-treetabletoggler",
+				inputs: ["rowNode"]
+			},
+			{
+				kind: "component",
+				type: UiIconComponent,
+				selector: "ui-icon",
+				inputs: [
+					"name",
+					"size",
+					"spin",
+					"fill",
+					"severity"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: FormsModule
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgModel,
+				selector: "[ngModel]:not([formControlName]):not([formControl])",
+				inputs: [
+					"name",
+					"disabled",
+					"ngModel",
+					"ngModelOptions"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngModel"]
+			},
+			{
+				kind: "directive",
+				type: HasPermissionDirective,
+				selector: "[hasPermission]",
+				inputs: ["hasPermission"]
+			},
+			{
+				kind: "pipe",
+				type: TranslatePipe,
+				name: "translate"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: CompanyActionSelectorComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "flusys-company-action-selector",
+			imports: [
+				CheckboxComponent,
+				FButtonDirective,
+				SelectComponent,
+				TagComponent,
+				TooltipDirective,
+				TreeTableComponent,
+				TreeTableTogglerComponent,
+				UiIconComponent,
+				FormsModule,
+				HasPermissionDirective,
+				TranslatePipe
+			],
+			template: `
+    <div class="company-action-selector">
+      <div class="surface-card p-4 rounded-border mb-4 shadow-sm">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
+          <div>
+            <label class="block font-semibold mb-2">
+              <ui-icon name="building" class="mr-2 text-primary"></ui-icon>
+              {{ 'iam.permission.select.company' | translate }}
+            </label>
+            <f-select
+              #companySelect
+              [ngModel]="selectedCompanyId()"
+              (ngModelChange)="onCompanyChange($event)"
+              [options]="companies()"
+              optionLabel="name"
+              optionValue="id"
+              [placeholder]="
+                'iam.permission.select.company.placeholder' | translate
+              "
+              [showClear]="true"
+              [filter]="true"
+              class="w-full"
+            />
+          </div>
+        </div>
+      </div>
+
+      @if (!selectedCompanyId()) {
+        <div class="empty-state border border-dashed border-surface rounded-border p-8 text-center">
+          <div class="empty-state-icon mx-auto mb-3">
+            <ui-icon name="building" class="text-primary"></ui-icon>
+          </div>
+          <h5 class="m-0 mb-1">
+            {{ 'iam.permission.empty.company.actions.title' | translate }}
+          </h5>
+          <p class="text-sm text-muted-color m-0">
+            {{ 'iam.permission.empty.company.actions.description' | translate }}
+          </p>
+        </div>
+      }
+
+      @if (selectedCompanyId()) {
+        @if (loading()) {
+          <div
+            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
+          >
+            <ui-icon name="loader-circle" spin class="text-primary text-5xl"></ui-icon>
+          </div>
+        }
+
+        @if (!loading() && actions().length > 0) {
+          <div class="surface-card p-4 rounded-border shadow-sm">
+            <div
+              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
+            >
+              <div>
+                <h5 class="m-0 mb-1">
+                  {{ 'iam.permission.action.whitelist' | translate }}
+                </h5>
+                <p class="text-sm text-muted-color m-0">
+                  {{
+                    'iam.permission.actions.available'
+                      | translate: { count: actions().length }
+                  }}
+                </p>
+              </div>
+              <div class="flex flex-wrap gap-2">
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="setAllSelection(true)"
+                >
+                  <ui-icon pButtonIcon name="check"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="setAllSelection(false)"
+                >
+                  <ui-icon pButtonIcon name="times"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  *hasPermission="COMPANY_ACTION_PERMISSIONS.ASSIGN"
+                  [disabled]="!canSave() || saving()"
+                  size="small"
+                  (click)="saveChanges()"
+                >
+                  @if (saving()) {
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                  } @else {
+                    <ui-icon pButtonIcon name="save"></ui-icon>
+                  }
+                  <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
+                </button>
+              </div>
+            </div>
+
+            @if (invalidActionsCount() > 0) {
+              <div class="validation-warning rounded-border p-3 mb-4">
+                <div class="flex items-start gap-2">
+                  <ui-icon name="exclamation-triangle" class="text-xl"></ui-icon>
+                  <div class="flex-1">
+                    <span class="font-semibold"
+                      >{{ 'iam.validation.warning.title' | translate }}:</span
+                    >
+                    <p class="text-sm mt-1 mb-0">
+                      {{
+                        (invalidActionsCount() > 1
+                          ? 'iam.validation.unmet.prerequisites.plural'
+                          : 'iam.validation.unmet.prerequisites.singular'
+                        ) | translate: { count: invalidActionsCount() }
+                      }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            }
+
+            <div class="overflow-x-auto -mx-4 sm:mx-0">
+              <f-treetable
+                [value]="treeNodes()"
+                dataKey="id"
+                [tableStyle]="{ 'min-width': '50rem' }"
+              >
+                <ng-template #header>
+                  <tr>
+                    <th class="w-12">
+                      <f-checkbox
+                        [ngModel]="allSelected()"
+                        [binary]="true"
+                        (ngModelChange)="toggleAll()"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
+                        tooltipPosition="top"
+                      />
+                    </th>
+                    <th>{{ 'shared.name' | translate }}</th>
+                    <th class="hidden md:table-cell">
+                      {{ 'shared.code' | translate }}
+                    </th>
+                    <th>{{ 'iam.action.type' | translate }}</th>
+                    <th class="hidden lg:table-cell">
+                      {{ 'shared.description' | translate }}
+                    </th>
+                  </tr>
+                </ng-template>
+                <ng-template #body let-rowNode let-rowData="rowData">
+                  @let hasUnmet = hasUnmetPrerequisites(rowData);
+                  <tr [class.highlight-warning]="hasUnmet">
+                    <td class="w-12">
+                      <f-checkbox
+                        [ngModel]="selectionMap()[rowData.id]"
+                        [binary]="true"
+                        (ngModelChange)="onActionToggle(rowData, $event)"
+                        [fTooltip]="getTooltip(rowData)"
+                        tooltipPosition="top"
+                      />
+                    </td>
+                    <td>
+                      <f-treetabletoggler [rowNode]="rowNode" />
+                      <span class="inline-flex items-center gap-2">
+                        {{ rowData.name }}
+                        @if (hasUnmet) {
+                          <ui-icon name="exclamation-triangle" class="text-orange-500" [fTooltip]="
+                              'iam.validation.unmet.prerequisites.tooltip'
+                                | translate
+                            "
+                            tooltipPosition="top"></ui-icon>
+                        }
+                      </span>
+                    </td>
+                    <td class="hidden md:table-cell">
+                      {{ rowData.code || '-' }}
+                    </td>
+                    <td>
+                      <f-tag
+                        [value]="rowData.actionType"
+                        [severity]="
+                          rowData.actionType === 'backend' ? 'info' : 'success'
+                        "
+                      />
+                    </td>
+                    <td class="hidden lg:table-cell">
+                      {{ rowData.description || '-' }}
+                    </td>
+                  </tr>
+                </ng-template>
+                <ng-template #emptymessage>
+                  <tr>
+                    <td colspan="5" class="text-center p-4 text-muted-color">
+                      @if (loading()) {
+                        <ui-icon name="loader-circle" spin></ui-icon>
+                        {{ 'shared.loading.actions' | translate }}
+                      } @else {
+                        {{ 'iam.permission.no.actions.available' | translate }}
+                      }
+                    </td>
+                  </tr>
+                </ng-template>
+              </f-treetable>
+            </div>
+          </div>
+
+          @if (hasChanges()) {
+            <div class="border border-surface rounded-border p-3 mt-4">
+              <div class="flex items-center gap-2 mb-3">
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
+                <span class="font-bold">{{
+                  'shared.pending.changes' | translate
+                }}</span>
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                @if (pendingAdd().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.whitelist' | translate }} ({{
+                          pendingAdd().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (action of pendingAdd(); track action.id) {
+                        <li class="text-sm mb-1">{{ action.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+                @if (pendingRemove().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.remove' | translate }} ({{
+                          pendingRemove().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (action of pendingRemove(); track action.id) {
+                        <li class="text-sm mb-1">{{ action.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+        }
+
+        @if (!loading() && actions().length === 0) {
+          <div class="surface-card p-5 rounded-border shadow-sm text-center">
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
+            <p class="text-muted-color m-0">
+              {{ 'iam.permission.no.actions.for.company' | translate }}
+            </p>
+          </div>
+        }
+      }
+    </div>
+  `,
+			styles: [":host{display:block}.empty-state-icon{width:3rem;height:3rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;background-color:var(--f-primary-50, rgba(59, 130, 246, .08))}:host-context(.app-dark) .empty-state-icon{background-color:#60a5fa1f}.validation-warning{background-color:var(--f-yellow-50, #fefce8);border-left:4px solid var(--f-yellow-500, #eab308);color:var(--f-yellow-700, #a16207)}:host-context(.app-dark) .validation-warning{background-color:#eab3081a;color:var(--f-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--f-red-50, rgba(239, 68, 68, .1))!important}:host-context(.app-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { companySelectRef: [{
+		type: i0.ViewChild,
+		args: ["companySelect", { isSignal: true }]
+	}] }
+});
+function toUserBranches(permissions) {
+	return (permissions ?? []).map((permission) => ({
+		id: permission.branchId,
+		name: permission.branchName,
+		companyId: permission.companyId,
+		parentId: permission.parentId ?? null,
+		serial: permission.serial ?? null,
+		displayParentId: permission.displayParentId
+	}));
+}
+var UserRoleSelectorComponent = class UserRoleSelectorComponent {
+	USER_ROLE_PERMISSIONS = USER_ROLE_PERMISSIONS;
+	appConfig = inject(APP_CONFIG);
+	companyContext = inject(LAYOUT_AUTH_STATE);
+	userPermissionProvider = inject(USER_PERMISSION_PROVIDER);
+	roleApi = inject(RoleApiService);
+	permissionApi = inject(PermissionApiService);
+	messageService = inject(MessageService);
+	confirmationService = inject(ConfirmationService);
+	translateAdapter = inject(TranslateService, { optional: true });
+	userSelectRef = viewChild("userSelect", ...ngDevMode ? [{ debugName: "userSelectRef" }] : /* istanbul ignore next */ []);
+	translate(key, vars) {
+		return this.translateAdapter?.translate(key, vars) ?? key;
+	}
+	onUserChange(userId) {
+		const previousUserId = this.selectedUserId();
+		if (userId === previousUserId) return;
+		if (this.hasChanges()) {
+			this.confirmationService.confirm({
+				header: this.translate("iam.permission.unsaved.changes.title"),
+				message: this.translate("iam.permission.unsaved.changes.message"),
+				icon: "exclamation-triangle",
+				acceptLabel: this.translate("iam.permission.unsaved.changes.discard"),
+				rejectLabel: this.translate("shared.cancel"),
+				accept: () => this.selectedUserId.set(userId),
+				reject: () => this.userSelectRef()?.value.set(previousUserId)
+			});
+			return;
+		}
+		this.selectedUserId.set(userId);
+	}
+	selectedUserId = signal(null, ...ngDevMode ? [{ debugName: "selectedUserId" }] : /* istanbul ignore next */ []);
+	selectedBranchId = signal(void 0, ...ngDevMode ? [{ debugName: "selectedBranchId" }] : /* istanbul ignore next */ []);
+	_branches = signal([], ...ngDevMode ? [{ debugName: "_branches" }] : /* istanbul ignore next */ []);
+	branches = this._branches.asReadonly();
+	loading = signal(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+	saving = signal(false, ...ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []);
+	_roles = signal([], ...ngDevMode ? [{ debugName: "_roles" }] : /* istanbul ignore next */ []);
+	roles = this._roles.asReadonly();
+	_selectionMap = signal({}, ...ngDevMode ? [{ debugName: "_selectionMap" }] : /* istanbul ignore next */ []);
+	selectionMap = this._selectionMap.asReadonly();
+	_initialSelection = signal({}, ...ngDevMode ? [{ debugName: "_initialSelection" }] : /* istanbul ignore next */ []);
+	initialSelection = this._initialSelection.asReadonly();
+	showBranchSelector = computed(() => isCompanyFeatureEnabled(this.appConfig) === true, ...ngDevMode ? [{ debugName: "showBranchSelector" }] : /* istanbul ignore next */ []);
+	branchTreeNodes = computed(() => buildBranchTreeNodes(this.branches()), ...ngDevMode ? [{ debugName: "branchTreeNodes" }] : /* istanbul ignore next */ []);
+	allSelected = computed(() => {
+		const selMap = this.selectionMap();
+		const total = this.roles().length;
+		if (total === 0) return false;
+		return Object.values(selMap).filter((v) => v).length === total;
+	}, ...ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []);
+	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" }] : /* istanbul ignore next */ []);
+	pendingAdd = computed(() => {
+		const current = this.selectionMap();
+		const initial = this.initialSelection();
+		return this.roles().filter((role) => current[role.id] && !initial[role.id]);
+	}, ...ngDevMode ? [{ debugName: "pendingAdd" }] : /* istanbul ignore next */ []);
+	pendingRemove = computed(() => {
+		const current = this.selectionMap();
+		const initial = this.initialSelection();
+		return this.roles().filter((role) => !current[role.id] && initial[role.id]);
+	}, ...ngDevMode ? [{ debugName: "pendingRemove" }] : /* istanbul ignore next */ []);
+	canSave = computed(() => {
+		return this.hasChanges() && !this.saving();
+	}, ...ngDevMode ? [{ debugName: "canSave" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			const userId = this.selectedUserId();
+			if (userId) {
+				if (isCompanyFeatureEnabled(this.appConfig)) this.loadUserBranches(userId);
+				this.loadData();
+			} else {
+				this._branches.set([]);
+				this.selectedBranchId.set(void 0);
+				this.resetState();
+			}
+		});
+		effect(() => {
+			const userId = this.selectedUserId();
+			const branchId = this.selectedBranchId();
+			if (isCompanyFeatureEnabled(this.appConfig) && userId && branchId !== void 0) this.loadData();
+		});
+	}
+	async loadUserBranches(userId) {
+		try {
+			const companyId = this.companyContext.currentCompanyInfo()?.id || void 0;
+			if (!companyId) {
+				this._branches.set([]);
+				return;
+			}
+			const response = await firstValueFrom(this.userPermissionProvider.getUserBranchPermissions(userId, companyId));
+			if (this.selectedUserId() !== userId) return;
+			this._branches.set(toUserBranches(response?.data));
+		} catch {}
+	}
+	async loadData() {
+		const userId = this.selectedUserId();
+		if (!userId) return;
+		const branchId = this.selectedBranchId();
+		this.loading.set(true);
+		try {
+			const rolesList = (await this.roleApi.getAll({ pagination: {
+				currentPage: 0,
+				pageSize: 100
+			} }))?.data ?? [];
+			this._roles.set(rolesList);
+			const query = isCompanyFeatureEnabled(this.appConfig) && branchId ? { branchId } : void 0;
+			const assignedResponse = await firstValueFrom(this.permissionApi.getUserRoles(userId, query));
+			const assignedIds = new Set((assignedResponse?.data || []).map((r) => r.roleId));
+			const selMap = {};
+			rolesList.forEach((role) => {
+				selMap[role.id] = assignedIds.has(role.id);
+			});
+			this._selectionMap.set(selMap);
+			this._initialSelection.set({ ...selMap });
+		} catch {} finally {
+			this.loading.set(false);
+		}
+	}
+	getTooltip(role) {
+		if (this.selectionMap()[role.id]) return `[${this.translate("shared.assigned")}] ${this.translate("iam.tooltip.assigned.to.user")}\n\n[${this.translate("shared.remove")}] ${this.translate("iam.tooltip.click.to.remove.role.from.user")}`;
+		return `[${this.translate("shared.add")}] ${this.translate("iam.tooltip.click.to.assign.role.to.user")}`;
+	}
+	onRoleToggle(role, newValue) {
+		const selMap = { ...this.selectionMap() };
+		selMap[role.id] = newValue;
+		this._selectionMap.set(selMap);
+	}
+	toggleAll() {
+		this.setAllSelections(!this.allSelected());
+	}
+	setAllSelections(value) {
+		const selMap = {};
+		this.roles().forEach((role) => {
+			selMap[role.id] = value;
+		});
+		this._selectionMap.set(selMap);
+	}
+	async saveChanges() {
+		const userId = this.selectedUserId();
+		if (!userId) return;
+		const branchId = this.selectedBranchId();
+		const companyId = this.companyContext.currentCompanyInfo()?.id || void 0;
+		if (isCompanyFeatureEnabled(this.appConfig) && !companyId) {
+			this.messageService.add({
+				severity: "warn",
+				summary: this.translate("shared.warning"),
+				detail: this.translate("iam.permission.company.required")
+			});
+			return;
+		}
+		const items = [];
+		this.pendingAdd().forEach((role) => {
+			items.push({
+				id: role.id,
+				action: "add"
+			});
+		});
+		this.pendingRemove().forEach((role) => {
+			items.push({
+				id: role.id,
+				action: "remove"
+			});
+		});
+		if (items.length === 0) return;
+		this.saving.set(true);
+		try {
+			const payload = {
+				userId,
+				items
+			};
+			if (isCompanyFeatureEnabled(this.appConfig)) {
+				if (companyId) payload.companyId = companyId;
+				if (branchId) payload.branchId = branchId;
+			}
+			const response = await firstValueFrom(this.permissionApi.assignUserRoles(payload));
+			this.messageService.add({
+				severity: "success",
+				summary: this.translate("shared.success"),
+				detail: response?.messageKey ? this.translate(response.messageKey, response.messageVariables) : response?.message
+			});
+			this._initialSelection.set({ ...this.selectionMap() });
+		} catch {} finally {
+			this.saving.set(false);
+		}
+	}
+	resetState() {
+		this._roles.set([]);
+		this._selectionMap.set({});
+		this._initialSelection.set({});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UserRoleSelectorComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UserRoleSelectorComponent,
+		isStandalone: true,
+		selector: "flusys-user-role-selector",
+		viewQueries: [{
+			propertyName: "userSelectRef",
+			first: true,
+			predicate: ["userSelect"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <div class="user-role-selector">
+      <!-- User and Branch Selectors -->
+      <div class="surface-card p-4 rounded-border mb-4 shadow-sm">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
+          <div>
+            <label class="block font-semibold mb-2">
+              <ui-icon name="user" class="mr-2 text-primary"></ui-icon>
+              {{ 'iam.permission.select.user' | translate }}
+            </label>
+            <lib-user-select
+              #userSelect
+              [value]="selectedUserId()"
+              (valueChange)="onUserChange($event)"
+              [isEditMode]="true"
+              [placeHolder]="
+                'iam.permission.select.user.placeholder' | translate
+              "
+            />
+          </div>
+
+          @if (showBranchSelector()) {
+            <div>
+              <label class="block font-semibold mb-2">
+                <ui-icon name="building" class="mr-2 text-primary"></ui-icon>
+                {{ 'iam.permission.select.branch' | translate }}
+              </label>
+              <f-treeselect
+                [ngModel]="selectedBranchId()"
+                (ngModelChange)="selectedBranchId.set($event ?? undefined)"
+                [options]="branchTreeNodes()"
+                [placeholder]="
+                  'iam.permission.select.branch.placeholder' | translate
+                "
+                [showClear]="true"
+                [filter]="true"
+                [filterPlaceholder]="'shared.search' | translate"
+                [emptyMessage]="'shared.no.results' | translate"
+                class="w-full"
+              />
+              <small class="text-muted-color block mt-1">
+                {{
+                  (branches().length !== 1
+                    ? 'iam.branch.permitted.count.plural'
+                    : 'iam.branch.permitted.count'
+                  ) | translate: { count: branches().length }
+                }}
+              </small>
+            </div>
+          }
+        </div>
+      </div>
+
+      @if (!selectedUserId()) {
+        <div class="empty-state border border-dashed border-surface rounded-border p-8 text-center">
+          <div class="empty-state-icon mx-auto mb-3">
+            <ui-icon name="user" class="text-primary"></ui-icon>
+          </div>
+          <h5 class="m-0 mb-1">
+            {{ 'iam.permission.empty.user.roles.title' | translate }}
+          </h5>
+          <p class="text-sm text-muted-color m-0">
+            {{ 'iam.permission.empty.user.roles.description' | translate }}
+          </p>
+        </div>
+      }
+
+      @if (selectedUserId()) {
+        <!-- Loading State -->
+        @if (loading()) {
+          <div
+            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
+          >
+            <ui-icon name="loader-circle" spin class="text-primary text-5xl"></ui-icon>
+          </div>
+        }
+
+        <!-- Role List -->
+        @if (!loading() && roles().length > 0) {
+          <div class="surface-card p-4 rounded-border shadow-sm">
+            <div
+              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
+            >
+              <div>
+                <h5 class="m-0 mb-1">
+                  {{ 'iam.permission.role.assignments' | translate }}
+                </h5>
+                <p class="text-sm text-muted-color m-0">
+                  {{
+                    'iam.permission.roles.available'
+                      | translate: { count: roles().length }
+                  }}
+                </p>
+              </div>
+              <div class="flex flex-wrap gap-2">
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="setAllSelections(true)"
+                >
+                  <ui-icon pButtonIcon name="check"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="setAllSelections(false)"
+                >
+                  <ui-icon pButtonIcon name="times"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  *hasPermission="USER_ROLE_PERMISSIONS.ASSIGN"
+                  [disabled]="!canSave() || saving()"
+                  size="small"
+                  (click)="saveChanges()"
+                >
+                  @if (saving()) {
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                  } @else {
+                    <ui-icon pButtonIcon name="save"></ui-icon>
+                  }
+                  <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
+                </button>
+              </div>
+            </div>
+
+            <!-- Role Table -->
+            <div class="overflow-x-auto -mx-4 sm:mx-0">
+              <f-table
+                [value]="roles()"
+                [rows]="10"
+                [paginator]="roles().length > 10"
+                [rowsPerPageOptions]="[10, 20, 50]"
+                [globalFilterFields]="['name', 'code', 'description']"
+                [showCurrentPageReport]="true"
+                [currentPageReportTemplate]="
+                  'iam.pagination.roles.template' | translate
+                "
+                [tableStyle]="{ 'min-width': '35rem' }"
+              >
+                <ng-template #header>
+                  <tr>
+                    <th style="width: 3rem">
+                      <f-checkbox
+                        [ngModel]="allSelected()"
+                        [binary]="true"
+                        (ngModelChange)="toggleAll()"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
+                        tooltipPosition="top"
+                      />
+                    </th>
+                    <th>{{ 'shared.name' | translate }}</th>
+                    <th class="hidden sm:table-cell">
+                      {{ 'shared.code' | translate }}
+                    </th>
+                    <th class="hidden md:table-cell">
+                      {{ 'shared.description' | translate }}
+                    </th>
+                  </tr>
+                </ng-template>
+                <ng-template #body let-role>
+                  <tr>
+                    <td>
+                      <f-checkbox
+                        [ngModel]="selectionMap()[role.id]"
+                        [binary]="true"
+                        (ngModelChange)="onRoleToggle(role, $event)"
+                        [fTooltip]="getTooltip(role)"
+                        tooltipPosition="top"
+                      />
+                    </td>
+                    <td>{{ role.name }}</td>
+                    <td class="hidden sm:table-cell">{{ role.code || '-' }}</td>
+                    <td class="hidden md:table-cell">
+                      {{ role.description || '-' }}
+                    </td>
+                  </tr>
+                </ng-template>
+                <ng-template #emptymessage>
+                  <tr>
+                    <td colspan="4" class="text-center p-4 text-muted-color">
+                      @if (loading()) {
+                        <ui-icon name="loader-circle" spin></ui-icon>
+                        {{ 'shared.loading.roles' | translate }}
+                      } @else {
+                        {{ 'iam.permission.no.roles.available' | translate }}
+                      }
+                    </td>
+                  </tr>
+                </ng-template>
+              </f-table>
+            </div>
+          </div>
+
+          <!-- Change Summary -->
+          @if (hasChanges()) {
+            <div class="border border-surface rounded-border p-3 mt-4">
+              <div class="flex items-center gap-2 mb-3">
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
+                <span class="font-bold">{{
+                  'shared.pending.changes' | translate
+                }}</span>
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                @if (pendingAdd().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.assign' | translate }} ({{
+                          pendingAdd().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (role of pendingAdd(); track role.id) {
+                        <li class="text-sm mb-1">{{ role.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+                @if (pendingRemove().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.remove' | translate }} ({{
+                          pendingRemove().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (role of pendingRemove(); track role.id) {
+                        <li class="text-sm mb-1">{{ role.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+        }
+
+        @if (!loading() && roles().length === 0) {
+          <div class="surface-card p-5 rounded-border shadow-sm text-center">
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
+            <p class="text-muted-color m-0">
+              {{ 'iam.permission.no.roles.for.user' | translate }}
+            </p>
+          </div>
+        }
+      }
+    </div>
+  `,
+		isInline: true,
+		styles: [":host{display:block}.empty-state-icon{width:3rem;height:3rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;background-color:var(--f-primary-50, rgba(59, 130, 246, .08))}:host-context(.app-dark) .empty-state-icon{background-color:#60a5fa1f}\n"],
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: FormsModule
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgModel,
+				selector: "[ngModel]:not([formControlName]):not([formControl])",
+				inputs: [
+					"name",
+					"disabled",
+					"ngModel",
+					"ngModelOptions"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngModel"]
+			},
+			{
+				kind: "component",
+				type: CheckboxComponent,
+				selector: "f-checkbox",
+				inputs: [
+					"label",
+					"binary",
+					"disabled",
+					"readonly",
+					"inputId",
+					"invalid",
+					"indeterminate",
+					"variant",
+					"size",
+					"touched",
+					"styleClass",
+					"style",
+					"checked"
+				],
+				outputs: [
+					"onChange",
+					"onBlur",
+					"touch",
+					"checkedChange"
+				]
+			},
+			{
+				kind: "directive",
+				type: FButtonDirective,
+				selector: "[fButton]",
+				inputs: [
+					"severity",
+					"text",
+					"outlined",
+					"link",
+					"variant",
+					"rounded",
+					"raised",
+					"fluid",
+					"disabled",
+					"loading",
+					"loadingIcon",
+					"size",
+					"label",
+					"icon",
+					"iconPos",
+					"ariaLabel",
+					"plain"
+				]
+			},
+			{
+				kind: "component",
+				type: TreeSelectComponent,
+				selector: "f-treeselect",
+				inputs: [
+					"options",
+					"placeholder",
+					"inputId",
+					"disabled",
+					"filter",
+					"filterBy",
+					"filterPlaceholder",
+					"selectionMode",
+					"display",
+					"propagateSelectionDown",
+					"propagateSelectionUp",
+					"showClear",
+					"virtualScroll",
+					"virtualScrollItemSize",
+					"emptyMessage",
+					"invalid",
+					"touched",
+					"styleClass",
+					"style",
+					"appendTo"
+				]
+			},
+			{
+				kind: "component",
+				type: TableComponent,
+				selector: "f-table",
+				inputs: [
+					"value",
+					"lazy",
+					"loading",
+					"rows",
+					"totalRecords",
+					"rowHover",
+					"dataKey",
+					"scrollable",
+					"scrollHeight",
+					"paginator",
+					"first",
+					"rowsPerPageOptions",
+					"showCurrentPageReport",
+					"currentPageReportTemplate",
+					"tableStyle",
+					"styleClass",
+					"globalFilterFields",
+					"filterDelay",
+					"responsiveLayout",
+					"selectionMode",
+					"sortMode",
+					"rowExpandMode",
+					"resizableColumns",
+					"rowStyleClass",
+					"virtualScroll",
+					"virtualScrollItemSize",
+					"sortField",
+					"sortOrder",
+					"multiSortMeta",
+					"filters",
+					"selection",
+					"expandedRowKeys",
+					"contextMenuSelection"
+				],
+				outputs: [
+					"sortFieldChange",
+					"sortOrderChange",
+					"multiSortMetaChange",
+					"filtersChange",
+					"selectionChange",
+					"expandedRowKeysChange",
+					"contextMenuSelectionChange",
+					"onLazyLoad",
+					"onSort",
+					"onFilter",
+					"onRowSelect",
+					"onRowUnselect",
+					"onSelectAllChange",
+					"onRowExpand",
+					"onRowCollapse",
+					"onColResize",
+					"onRowContextMenu"
+				]
+			},
+			{
+				kind: "directive",
+				type: TooltipDirective,
+				selector: "[fTooltip]",
+				inputs: [
+					"fTooltip",
+					"tooltipPosition",
+					"positionStyle",
+					"tooltipStyleClass",
+					"disabled",
+					"tooltipEvent",
+					"showDelay",
+					"hideDelay",
+					"life",
+					"autoHide",
+					"positionTop",
+					"positionLeft",
+					"escape"
+				]
+			},
+			{
+				kind: "component",
+				type: UiIconComponent,
+				selector: "ui-icon",
+				inputs: [
+					"name",
+					"size",
+					"spin",
+					"fill",
+					"severity"
+				]
+			},
+			{
+				kind: "directive",
+				type: HasPermissionDirective,
+				selector: "[hasPermission]",
+				inputs: ["hasPermission"]
+			},
+			{
+				kind: "component",
+				type: UserSelectComponent,
+				selector: "lib-user-select",
+				inputs: ["showClear", "value"],
+				outputs: ["valueChange", "userSelected"]
+			},
+			{
+				kind: "pipe",
+				type: TranslatePipe,
+				name: "translate"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UserRoleSelectorComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "flusys-user-role-selector",
+			imports: [
+				FormsModule,
+				CheckboxComponent,
+				FButtonDirective,
+				TreeSelectComponent,
+				TableComponent,
+				TooltipDirective,
+				UiIconComponent,
+				HasPermissionDirective,
+				UserSelectComponent,
+				TranslatePipe
+			],
+			template: `
+    <div class="user-role-selector">
+      <!-- User and Branch Selectors -->
+      <div class="surface-card p-4 rounded-border mb-4 shadow-sm">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
+          <div>
+            <label class="block font-semibold mb-2">
+              <ui-icon name="user" class="mr-2 text-primary"></ui-icon>
+              {{ 'iam.permission.select.user' | translate }}
+            </label>
+            <lib-user-select
+              #userSelect
+              [value]="selectedUserId()"
+              (valueChange)="onUserChange($event)"
+              [isEditMode]="true"
+              [placeHolder]="
+                'iam.permission.select.user.placeholder' | translate
+              "
+            />
+          </div>
+
+          @if (showBranchSelector()) {
+            <div>
+              <label class="block font-semibold mb-2">
+                <ui-icon name="building" class="mr-2 text-primary"></ui-icon>
+                {{ 'iam.permission.select.branch' | translate }}
+              </label>
+              <f-treeselect
+                [ngModel]="selectedBranchId()"
+                (ngModelChange)="selectedBranchId.set($event ?? undefined)"
+                [options]="branchTreeNodes()"
+                [placeholder]="
+                  'iam.permission.select.branch.placeholder' | translate
+                "
+                [showClear]="true"
+                [filter]="true"
+                [filterPlaceholder]="'shared.search' | translate"
+                [emptyMessage]="'shared.no.results' | translate"
+                class="w-full"
+              />
+              <small class="text-muted-color block mt-1">
+                {{
+                  (branches().length !== 1
+                    ? 'iam.branch.permitted.count.plural'
+                    : 'iam.branch.permitted.count'
+                  ) | translate: { count: branches().length }
+                }}
+              </small>
+            </div>
+          }
+        </div>
+      </div>
+
+      @if (!selectedUserId()) {
+        <div class="empty-state border border-dashed border-surface rounded-border p-8 text-center">
+          <div class="empty-state-icon mx-auto mb-3">
+            <ui-icon name="user" class="text-primary"></ui-icon>
+          </div>
+          <h5 class="m-0 mb-1">
+            {{ 'iam.permission.empty.user.roles.title' | translate }}
+          </h5>
+          <p class="text-sm text-muted-color m-0">
+            {{ 'iam.permission.empty.user.roles.description' | translate }}
+          </p>
+        </div>
+      }
+
+      @if (selectedUserId()) {
+        <!-- Loading State -->
+        @if (loading()) {
+          <div
+            class="surface-card p-5 rounded-border shadow-sm flex justify-center"
+          >
+            <ui-icon name="loader-circle" spin class="text-primary text-5xl"></ui-icon>
+          </div>
+        }
+
+        <!-- Role List -->
+        @if (!loading() && roles().length > 0) {
+          <div class="surface-card p-4 rounded-border shadow-sm">
+            <div
+              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
+            >
+              <div>
+                <h5 class="m-0 mb-1">
+                  {{ 'iam.permission.role.assignments' | translate }}
+                </h5>
+                <p class="text-sm text-muted-color m-0">
+                  {{
+                    'iam.permission.roles.available'
+                      | translate: { count: roles().length }
+                  }}
+                </p>
+              </div>
+              <div class="flex flex-wrap gap-2">
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="setAllSelections(true)"
+                >
+                  <ui-icon pButtonIcon name="check"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="setAllSelections(false)"
+                >
+                  <ui-icon pButtonIcon name="times"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  *hasPermission="USER_ROLE_PERMISSIONS.ASSIGN"
+                  [disabled]="!canSave() || saving()"
+                  size="small"
+                  (click)="saveChanges()"
+                >
+                  @if (saving()) {
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                  } @else {
+                    <ui-icon pButtonIcon name="save"></ui-icon>
+                  }
+                  <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
+                </button>
+              </div>
+            </div>
+
+            <!-- Role Table -->
+            <div class="overflow-x-auto -mx-4 sm:mx-0">
+              <f-table
+                [value]="roles()"
+                [rows]="10"
+                [paginator]="roles().length > 10"
+                [rowsPerPageOptions]="[10, 20, 50]"
+                [globalFilterFields]="['name', 'code', 'description']"
+                [showCurrentPageReport]="true"
+                [currentPageReportTemplate]="
+                  'iam.pagination.roles.template' | translate
+                "
+                [tableStyle]="{ 'min-width': '35rem' }"
+              >
+                <ng-template #header>
+                  <tr>
+                    <th style="width: 3rem">
+                      <f-checkbox
+                        [ngModel]="allSelected()"
+                        [binary]="true"
+                        (ngModelChange)="toggleAll()"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
+                        tooltipPosition="top"
+                      />
+                    </th>
+                    <th>{{ 'shared.name' | translate }}</th>
+                    <th class="hidden sm:table-cell">
+                      {{ 'shared.code' | translate }}
+                    </th>
+                    <th class="hidden md:table-cell">
+                      {{ 'shared.description' | translate }}
+                    </th>
+                  </tr>
+                </ng-template>
+                <ng-template #body let-role>
+                  <tr>
+                    <td>
+                      <f-checkbox
+                        [ngModel]="selectionMap()[role.id]"
+                        [binary]="true"
+                        (ngModelChange)="onRoleToggle(role, $event)"
+                        [fTooltip]="getTooltip(role)"
+                        tooltipPosition="top"
+                      />
+                    </td>
+                    <td>{{ role.name }}</td>
+                    <td class="hidden sm:table-cell">{{ role.code || '-' }}</td>
+                    <td class="hidden md:table-cell">
+                      {{ role.description || '-' }}
+                    </td>
+                  </tr>
+                </ng-template>
+                <ng-template #emptymessage>
+                  <tr>
+                    <td colspan="4" class="text-center p-4 text-muted-color">
+                      @if (loading()) {
+                        <ui-icon name="loader-circle" spin></ui-icon>
+                        {{ 'shared.loading.roles' | translate }}
+                      } @else {
+                        {{ 'iam.permission.no.roles.available' | translate }}
+                      }
+                    </td>
+                  </tr>
+                </ng-template>
+              </f-table>
+            </div>
+          </div>
+
+          <!-- Change Summary -->
+          @if (hasChanges()) {
+            <div class="border border-surface rounded-border p-3 mt-4">
+              <div class="flex items-center gap-2 mb-3">
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
+                <span class="font-bold">{{
+                  'shared.pending.changes' | translate
+                }}</span>
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                @if (pendingAdd().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.assign' | translate }} ({{
+                          pendingAdd().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (role of pendingAdd(); track role.id) {
+                        <li class="text-sm mb-1">{{ role.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+                @if (pendingRemove().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.remove' | translate }} ({{
+                          pendingRemove().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (role of pendingRemove(); track role.id) {
+                        <li class="text-sm mb-1">{{ role.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+        }
+
+        @if (!loading() && roles().length === 0) {
+          <div class="surface-card p-5 rounded-border shadow-sm text-center">
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
+            <p class="text-muted-color m-0">
+              {{ 'iam.permission.no.roles.for.user' | translate }}
+            </p>
+          </div>
+        }
+      }
+    </div>
+  `,
+			styles: [":host{display:block}.empty-state-icon{width:3rem;height:3rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;background-color:var(--f-primary-50, rgba(59, 130, 246, .08))}:host-context(.app-dark) .empty-state-icon{background-color:#60a5fa1f}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { userSelectRef: [{
+		type: i0.ViewChild,
+		args: ["userSelect", { isSignal: true }]
+	}] }
+});
+var UserActionSelectorComponent = class UserActionSelectorComponent extends BaseActionSelectorComponent {
+	USER_ACTION_PERMISSIONS = USER_ACTION_PERMISSIONS;
+	appConfig = inject(APP_CONFIG);
+	companyContext = inject(LAYOUT_AUTH_STATE);
+	userPermissionProvider = inject(USER_PERMISSION_PROVIDER);
+	actionApi = inject(ActionApiService);
+	permissionApi = inject(PermissionApiService);
+	messageService = inject(MessageService);
+	userSelectRef = viewChild("userSelect", ...ngDevMode ? [{ debugName: "userSelectRef" }] : /* istanbul ignore next */ []);
+	_selectedUserId = signal(null, ...ngDevMode ? [{ debugName: "_selectedUserId" }] : /* istanbul ignore next */ []);
+	selectedUserId = this._selectedUserId.asReadonly();
+	_selectedBranchId = signal(void 0, ...ngDevMode ? [{ debugName: "_selectedBranchId" }] : /* istanbul ignore next */ []);
+	selectedBranchId = this._selectedBranchId.asReadonly();
+	_selectedCompanyId = signal(void 0, ...ngDevMode ? [{ debugName: "_selectedCompanyId" }] : /* istanbul ignore next */ []);
+	selectedCompanyId = this._selectedCompanyId.asReadonly();
+	_branches = signal([], ...ngDevMode ? [{ debugName: "_branches" }] : /* istanbul ignore next */ []);
+	branches = this._branches.asReadonly();
+	_companies = signal([], ...ngDevMode ? [{ debugName: "_companies" }] : /* istanbul ignore next */ []);
+	companies = this._companies.asReadonly();
+	isCompanyFeatureActive = computed(() => isCompanyFeatureEnabled(this.appConfig) === true, ...ngDevMode ? [{ debugName: "isCompanyFeatureActive" }] : /* istanbul ignore next */ []);
+	showCompanySelector = computed(() => this.isCompanyFeatureActive() && this.companies().length > 1, ...ngDevMode ? [{ debugName: "showCompanySelector" }] : /* istanbul ignore next */ []);
+	showBranchSelector = this.isCompanyFeatureActive;
+	branchTreeNodes = computed(() => buildBranchTreeNodes(this.branches()), ...ngDevMode ? [{ debugName: "branchTreeNodes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		super();
+		effect(() => {
+			const userId = this.selectedUserId();
+			this._selectedBranchId.set(void 0);
+			this._selectedCompanyId.set(void 0);
+			if (!userId) {
+				this._branches.set([]);
+				this._companies.set([]);
+				this.resetState();
+				return;
+			}
+			if (this.isCompanyFeatureActive()) this.selectUser(userId);
+			else this.loadData();
+		});
+		effect(() => {
+			const branchId = this.selectedBranchId();
+			const userId = this.selectedUserId();
+			if (this.isCompanyFeatureActive() && userId && branchId !== void 0) this.loadData();
+		});
+	}
+	onUserSelect(userId) {
+		const previousUserId = this.selectedUserId();
+		if (userId === previousUserId) return;
+		this.confirmSelectionChange(() => this._selectedUserId.set(userId), () => this.userSelectRef()?.value.set(previousUserId));
+	}
+	onBranchChange(branchId) {
+		this._selectedBranchId.set(branchId);
+	}
+	onCompanyChange(companyId) {
+		this._selectedCompanyId.set(companyId);
+		const userId = this.selectedUserId();
+		if (!userId || !this.isCompanyFeatureActive()) return;
+		this.applyCompanySelection(userId, companyId);
+	}
+	async selectUser(userId) {
+		const companyId = await this.loadUserCompanies(userId);
+		await this.applyCompanySelection(userId, companyId);
+	}
+	async applyCompanySelection(userId, companyId) {
+		this._selectedBranchId.set(void 0);
+		this._branches.set([]);
+		if (!companyId) {
+			this._actionsTree.set([]);
+			this._actions.set([]);
+			return;
+		}
+		await this.loadUserBranches(userId, companyId);
+		await this.loadData();
+	}
+	async loadUserCompanies(userId) {
+		try {
+			const userCompanies = (await firstValueFrom(this.userPermissionProvider.getUserCompanyPermissions(userId)))?.data ?? [];
+			this._companies.set(userCompanies);
+			if (userCompanies.length === 1) {
+				this._selectedCompanyId.set(userCompanies[0].id);
+				return userCompanies[0].id;
+			}
+			const ownCompanyId = this.companyContext.currentCompanyInfo()?.id;
+			const fallbackId = userCompanies.find((c) => c.id === ownCompanyId)?.id;
+			this._selectedCompanyId.set(fallbackId);
+			return fallbackId;
+		} catch {
+			this._companies.set([]);
+			this._selectedCompanyId.set(void 0);
+			return;
+		}
+	}
+	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, companyId) {
+		try {
+			const response = await firstValueFrom(this.userPermissionProvider.getUserBranchPermissions(userId, companyId));
+			if (!this.isCurrentSelection(userId, companyId)) return;
+			this._branches.set(toUserBranches(response?.data));
+		} catch {
+			if (this.isCurrentSelection(userId, companyId)) this._branches.set([]);
+		}
+	}
+	isCurrentSelection(userId, companyId) {
+		return this.selectedUserId() === userId && this.selectedCompanyId() === companyId;
+	}
+	async loadData() {
+		const userId = this.selectedUserId();
+		if (!userId) return;
+		const branchId = this.selectedBranchId();
+		const companyId = this.selectedCompanyId();
+		this.loading.set(true);
+		try {
+			const flatActions = (await firstValueFrom(this.actionApi.getActionsForPermission(this.isCompanyFeatureActive() ? companyId : void 0)))?.data ?? [];
+			const actionsTree = buildTreeFromFlat(flatActions);
+			this._actionsTree.set(actionsTree);
+			this._actions.set(flatActions);
+			const query = this.isCompanyFeatureActive() ? {
+				companyId,
+				branchId
+			} : void 0;
+			const assignedResponse = await firstValueFrom(this.permissionApi.getUserActions(userId, query));
+			const assignedIds = new Set((assignedResponse?.data || []).map((a) => a.actionId));
+			const selMap = this.buildSelectionMap(flatActions, (action) => assignedIds.has(action.id));
+			this._selectionMap.set(selMap);
+			this._initialSelection.set({ ...selMap });
+		} catch {} finally {
+			this.loading.set(false);
+		}
+	}
+	async saveChanges() {
+		const userId = this.selectedUserId();
+		if (!userId) return;
+		const branchId = this.selectedBranchId();
+		const companyId = this.selectedCompanyId();
+		if (this.isCompanyFeatureActive() && !companyId) {
+			this.messageService.add({
+				severity: "warn",
+				summary: this.translate("shared.warning"),
+				detail: this.translate("iam.permission.company.required")
+			});
+			return;
+		}
+		const invalidActions = this.permissionLogic.getActionsWithUnmetPrerequisites(this.selectionMap(), this.actions());
+		if (invalidActions.length > 0) {
+			this.permissionLogic.showValidationErrorDialog(invalidActions, this.selectionMap(), this.actions(), (newMap) => this._selectionMap.set(newMap));
+			return;
+		}
+		const items = this.buildPayloadItems();
+		if (items.length === 0) return;
+		this.saving.set(true);
+		try {
+			const payload = {
+				userId,
+				items
+			};
+			if (this.isCompanyFeatureActive()) {
+				if (companyId) payload.companyId = companyId;
+				if (branchId) payload.branchId = branchId;
+			}
+			const response = await firstValueFrom(this.permissionApi.assignUserActions(payload));
+			this.messageService.add({
+				severity: "success",
+				summary: this.translate("shared.success"),
+				detail: response?.messageKey ? this.translate(response.messageKey, response.messageVariables) : response?.message
+			});
+			this._initialSelection.set({ ...this.selectionMap() });
+		} catch {} finally {
+			this.saving.set(false);
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UserActionSelectorComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UserActionSelectorComponent,
+		isStandalone: true,
+		selector: "flusys-user-action-selector",
+		viewQueries: [{
+			propertyName: "userSelectRef",
+			first: true,
+			predicate: ["userSelect"],
+			descendants: true,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		ngImport: i0,
+		template: `
+    <div class="user-action-selector">
+      <div class="surface-card p-4 rounded-border mb-4 shadow-sm">
+        <div
+          class="grid grid-cols-1 gap-5"
+          [class.sm:grid-cols-3]="showCompanySelector()"
+          [class.sm:grid-cols-2]="!showCompanySelector()"
+        >
+          <div>
+            <label class="block font-semibold mb-2">
+              <ui-icon name="user" class="mr-2 text-primary"></ui-icon>
+              {{ 'iam.permission.select.user' | translate }}
+            </label>
+            <lib-user-select
+              #userSelect
+              [value]="selectedUserId()"
+              (valueChange)="onUserSelect($event)"
+              [isEditMode]="true"
+              [placeHolder]="
+                'iam.permission.select.user.placeholder' | translate
+              "
+            />
+          </div>
+
+          @if (showCompanySelector()) {
+            <div>
+              <label class="block font-semibold mb-2">
+                <ui-icon name="building" class="mr-2 text-primary"></ui-icon>
+                {{ 'iam.permission.select.company' | translate }}
+              </label>
+              <f-select
+                [ngModel]="selectedCompanyId()"
+                (ngModelChange)="onCompanyChange($event)"
+                [options]="companies()"
+                optionLabel="name"
+                optionValue="id"
+                [placeholder]="
+                  'iam.permission.select.company.placeholder' | translate
+                "
+                [filter]="true"
+                class="w-full"
+              />
+            </div>
+          }
+
+          @if (showBranchSelector()) {
+            <div>
+              <label class="block font-semibold mb-2">
+                <ui-icon name="building" class="mr-2 text-primary"></ui-icon>
+                {{ 'iam.permission.select.branch' | translate }}
+              </label>
+              <f-treeselect
+                [ngModel]="selectedBranchId()"
+                (ngModelChange)="onBranchChange($event ?? undefined)"
+                [options]="branchTreeNodes()"
+                [placeholder]="
+                  'iam.permission.select.branch.placeholder' | translate
+                "
+                [showClear]="true"
+                [filter]="true"
+                [filterPlaceholder]="'shared.search' | translate"
+                [emptyMessage]="'shared.no.results' | translate"
+                class="w-full"
+              />
+              <small class="text-muted-color block mt-1">
+                {{
+                  (branches().length !== 1
+                    ? 'iam.branch.permitted.count.plural'
+                    : 'iam.branch.permitted.count'
+                  ) | translate: { count: branches().length }
+                }}
+              </small>
+            </div>
+          }
+        </div>
+      </div>
+
+      @if (!selectedUserId()) {
+        <div class="empty-state border border-dashed border-surface rounded-border p-8 text-center">
+          <div class="empty-state-icon mx-auto mb-3">
+            <ui-icon name="key" class="text-primary"></ui-icon>
+          </div>
+          <h5 class="m-0 mb-1">
+            {{ 'iam.permission.empty.user.actions.title' | translate }}
+          </h5>
+          <p class="text-sm text-muted-color m-0">
+            {{ 'iam.permission.empty.user.actions.description' | translate }}
+          </p>
+        </div>
+      }
+
+      @if (selectedUserId()) {
+        @if (loading()) {
+          <div class="flex justify-center p-5">
+            <ui-icon name="loader-circle" spin class="text-4xl"></ui-icon>
+          </div>
+        }
+
+        @if (!loading() && actions().length > 0) {
+          <div class="surface-card p-4 rounded-border shadow-sm">
+            <div
+              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
+            >
+              <div>
+                <h5 class="m-0 mb-1">
+                  {{ 'iam.permission.direct.action.permissions' | translate }}
+                </h5>
+                <p class="text-sm text-muted-color m-0">
+                  {{
+                    'iam.permission.actions.available'
+                      | translate: { count: actions().length }
+                  }}
+                </p>
+              </div>
+              <div class="flex flex-wrap gap-2">
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="setAllSelection(true)"
+                >
+                  <ui-icon pButtonIcon name="check"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="setAllSelection(false)"
+                >
+                  <ui-icon pButtonIcon name="times"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  *hasPermission="USER_ACTION_PERMISSIONS.ASSIGN"
+                  [disabled]="!canSave() || saving()"
+                  size="small"
+                  (click)="saveChanges()"
+                >
+                  @if (saving()) {
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                  } @else {
+                    <ui-icon pButtonIcon name="save"></ui-icon>
+                  }
+                  <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
+                </button>
+              </div>
+            </div>
+
+            @if (invalidActionsCount() > 0) {
+              <div class="validation-warning rounded-border p-3 mb-4">
+                <div class="flex items-start gap-2">
+                  <ui-icon name="exclamation-triangle" class="text-xl"></ui-icon>
+                  <div class="flex-1">
+                    <span class="font-semibold"
+                      >{{ 'iam.validation.warning.title' | translate }}:</span
+                    >
+                    <p class="text-sm mt-1 mb-0">
+                      {{
+                        (invalidActionsCount() > 1
+                          ? 'iam.validation.unmet.prerequisites.plural'
+                          : 'iam.validation.unmet.prerequisites.singular'
+                        ) | translate: { count: invalidActionsCount() }
+                      }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            }
+
+            <div class="overflow-x-auto -mx-4 sm:mx-0">
+              <f-treetable
+                [value]="treeNodes()"
+                dataKey="id"
+                [tableStyle]="{ 'min-width': '50rem' }"
+              >
+                <ng-template #header>
+                  <tr>
+                    <th class="w-12">
+                      <f-checkbox
+                        [ngModel]="allSelected()"
+                        [binary]="true"
+                        (ngModelChange)="toggleAll()"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
+                        tooltipPosition="top"
+                      />
+                    </th>
+                    <th>{{ 'shared.name' | translate }}</th>
+                    <th class="hidden md:table-cell">
+                      {{ 'shared.code' | translate }}
+                    </th>
+                    <th>{{ 'iam.action.type' | translate }}</th>
+                    <th class="hidden lg:table-cell">
+                      {{ 'shared.description' | translate }}
+                    </th>
+                  </tr>
+                </ng-template>
+                <ng-template #body let-rowNode let-rowData="rowData">
+                  @let hasUnmet = hasUnmetPrerequisites(rowData);
+                  @let tooltip = getTooltip(rowData);
+                  <tr [class.highlight-warning]="hasUnmet">
+                    <td class="w-12">
+                      <f-checkbox
+                        [ngModel]="selectionMap()[rowData.id]"
+                        [binary]="true"
+                        (ngModelChange)="onActionToggle(rowData, $event)"
+                        [fTooltip]="tooltip"
+                        tooltipPosition="top"
+                      />
+                    </td>
+                    <td>
+                      <f-treetabletoggler [rowNode]="rowNode" />
+                      <span class="inline-flex items-center gap-2">
+                        {{ rowData.name }}
+                        @if (hasUnmet) {
+                          <ui-icon name="exclamation-triangle" class="text-orange-500" [fTooltip]="
+                              'iam.validation.unmet.prerequisites.tooltip'
+                                | translate
+                            "
+                            tooltipPosition="top"></ui-icon>
+                        }
+                      </span>
+                    </td>
+                    <td class="hidden md:table-cell">
+                      {{ rowData.code || '-' }}
+                    </td>
+                    <td>
+                      <f-tag
+                        [value]="rowData.actionType"
+                        [severity]="
+                          rowData.actionType === 'backend' ? 'info' : 'success'
+                        "
+                      />
+                    </td>
+                    <td class="hidden lg:table-cell">
+                      {{ rowData.description || '-' }}
+                    </td>
+                  </tr>
+                </ng-template>
+                <ng-template #emptymessage>
+                  <tr>
+                    <td colspan="5" class="text-center p-4 text-muted-color">
+                      @if (loading()) {
+                        <ui-icon name="loader-circle" spin></ui-icon>
+                        {{ 'shared.loading.actions' | translate }}
+                      } @else {
+                        {{ 'iam.permission.no.actions.available' | translate }}
+                      }
+                    </td>
+                  </tr>
+                </ng-template>
+              </f-treetable>
+            </div>
+          </div>
+
+          @if (hasChanges()) {
+            <div class="border border-surface rounded-border p-3 mt-4">
+              <div class="flex items-center gap-2 mb-3">
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
+                <span class="font-bold">{{
+                  'shared.pending.changes' | translate
+                }}</span>
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                @if (pendingAdd().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.assign' | translate }} ({{
+                          pendingAdd().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (action of pendingAdd(); track action.id) {
+                        <li class="text-sm mb-1">{{ action.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+                @if (pendingRemove().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.remove' | translate }} ({{
+                          pendingRemove().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (action of pendingRemove(); track action.id) {
+                        <li class="text-sm mb-1">{{ action.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+        }
+
+        @if (!loading() && actions().length === 0) {
+          <div class="surface-card p-5 rounded-border shadow-sm text-center">
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
+            <p class="text-muted-color m-0">
+              {{ 'iam.permission.no.actions.for.user' | translate }}
+            </p>
+          </div>
+        }
+      }
+    </div>
+  `,
+		isInline: true,
+		styles: [":host{display:block}.empty-state-icon{width:3rem;height:3rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;background-color:var(--f-primary-50, rgba(59, 130, 246, .08))}:host-context(.app-dark) .empty-state-icon{background-color:#60a5fa1f}.validation-warning{background-color:var(--f-yellow-50, #fefce8);border-left:4px solid var(--f-yellow-500, #eab308);color:var(--f-yellow-700, #a16207)}:host-context(.app-dark) .validation-warning{background-color:#eab3081a;color:var(--f-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--f-red-50, rgba(239, 68, 68, .1))!important}:host-context(.app-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"],
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: FormsModule
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgModel,
+				selector: "[ngModel]:not([formControlName]):not([formControl])",
+				inputs: [
+					"name",
+					"disabled",
+					"ngModel",
+					"ngModelOptions"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngModel"]
+			},
+			{
+				kind: "component",
+				type: CheckboxComponent,
+				selector: "f-checkbox",
+				inputs: [
+					"label",
+					"binary",
+					"disabled",
+					"readonly",
+					"inputId",
+					"invalid",
+					"indeterminate",
+					"variant",
+					"size",
+					"touched",
+					"styleClass",
+					"style",
+					"checked"
+				],
+				outputs: [
+					"onChange",
+					"onBlur",
+					"touch",
+					"checkedChange"
+				]
+			},
+			{
+				kind: "directive",
+				type: FButtonDirective,
+				selector: "[fButton]",
+				inputs: [
+					"severity",
+					"text",
+					"outlined",
+					"link",
+					"variant",
+					"rounded",
+					"raised",
+					"fluid",
+					"disabled",
+					"loading",
+					"loadingIcon",
+					"size",
+					"label",
+					"icon",
+					"iconPos",
+					"ariaLabel",
+					"plain"
+				]
+			},
+			{
+				kind: "component",
+				type: SelectComponent,
+				selector: "f-select",
+				inputs: [
+					"options",
+					"optionLabel",
+					"optionValue",
+					"placeholder",
+					"disabled",
+					"filter",
+					"filterBy",
+					"filterMatchMode",
+					"filterLocale",
+					"filterPlaceholder",
+					"resetFilterOnHide",
+					"autofocusFilter",
+					"emptyMessage",
+					"emptyFilterMessage",
+					"showClear",
+					"loading",
+					"loadingIcon",
+					"dropdownIcon",
+					"clearIcon",
+					"inputId",
+					"invalid",
+					"touched",
+					"styleClass",
+					"style",
+					"appendTo",
+					"editable",
+					"readonly",
+					"autofocus",
+					"checkmark",
+					"group",
+					"optionGroupLabel",
+					"optionGroupChildren",
+					"virtualScroll",
+					"virtualScrollItemSize",
+					"lazy",
+					"selectedObject"
+				],
+				outputs: [
+					"onFilter",
+					"onChange",
+					"onShow",
+					"onHide",
+					"onBlur",
+					"onFocus",
+					"onClear",
+					"onLazyLoad"
+				]
+			},
+			{
+				kind: "component",
+				type: TreeSelectComponent,
+				selector: "f-treeselect",
+				inputs: [
+					"options",
+					"placeholder",
+					"inputId",
+					"disabled",
+					"filter",
+					"filterBy",
+					"filterPlaceholder",
+					"selectionMode",
+					"display",
+					"propagateSelectionDown",
+					"propagateSelectionUp",
+					"showClear",
+					"virtualScroll",
+					"virtualScrollItemSize",
+					"emptyMessage",
+					"invalid",
+					"touched",
+					"styleClass",
+					"style",
+					"appendTo"
+				]
+			},
+			{
+				kind: "component",
+				type: TagComponent,
+				selector: "f-tag",
+				inputs: [
+					"value",
+					"severity",
+					"icon",
+					"rounded",
+					"color",
+					"styleClass",
+					"style"
+				]
+			},
+			{
+				kind: "directive",
+				type: TooltipDirective,
+				selector: "[fTooltip]",
+				inputs: [
+					"fTooltip",
+					"tooltipPosition",
+					"positionStyle",
+					"tooltipStyleClass",
+					"disabled",
+					"tooltipEvent",
+					"showDelay",
+					"hideDelay",
+					"life",
+					"autoHide",
+					"positionTop",
+					"positionLeft",
+					"escape"
+				]
+			},
+			{
+				kind: "component",
+				type: TreeTableComponent,
+				selector: "f-treetable",
+				inputs: [
+					"value",
+					"loading",
+					"dataKey",
+					"styleClass",
+					"tableStyle",
+					"scrollable",
+					"scrollHeight",
+					"resizableColumns",
+					"lazy",
+					"totalRecords",
+					"paginator",
+					"first",
+					"rows",
+					"rowsPerPageOptions",
+					"showCurrentPageReport",
+					"currentPageReportTemplate",
+					"globalFilterFields",
+					"filterDelay",
+					"selectionMode",
+					"sortMode",
+					"virtualScroll",
+					"virtualScrollItemSize",
+					"sortField",
+					"sortOrder",
+					"multiSortMeta",
+					"filters",
+					"selection",
+					"contextMenuSelection"
+				],
+				outputs: [
+					"sortFieldChange",
+					"sortOrderChange",
+					"multiSortMetaChange",
+					"filtersChange",
+					"selectionChange",
+					"contextMenuSelectionChange",
+					"onLazyLoad",
+					"onSort",
+					"onFilter",
+					"onNodeExpand",
+					"onNodeCollapse",
+					"onNodeSelect",
+					"onNodeUnselect",
+					"onRowContextMenu"
+				]
+			},
+			{
+				kind: "component",
+				type: TreeTableTogglerComponent,
+				selector: "f-treetabletoggler",
+				inputs: ["rowNode"]
+			},
+			{
+				kind: "component",
+				type: UiIconComponent,
+				selector: "ui-icon",
+				inputs: [
+					"name",
+					"size",
+					"spin",
+					"fill",
+					"severity"
+				]
+			},
+			{
+				kind: "directive",
+				type: HasPermissionDirective,
+				selector: "[hasPermission]",
+				inputs: ["hasPermission"]
+			},
+			{
+				kind: "component",
+				type: UserSelectComponent,
+				selector: "lib-user-select",
+				inputs: ["showClear", "value"],
+				outputs: ["valueChange", "userSelected"]
+			},
+			{
+				kind: "pipe",
+				type: TranslatePipe,
+				name: "translate"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UserActionSelectorComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "flusys-user-action-selector",
+			imports: [
+				FormsModule,
+				CheckboxComponent,
+				FButtonDirective,
+				SelectComponent,
+				TreeSelectComponent,
+				TagComponent,
+				TooltipDirective,
+				TreeTableComponent,
+				TreeTableTogglerComponent,
+				UiIconComponent,
+				HasPermissionDirective,
+				UserSelectComponent,
+				TranslatePipe
+			],
+			template: `
+    <div class="user-action-selector">
+      <div class="surface-card p-4 rounded-border mb-4 shadow-sm">
+        <div
+          class="grid grid-cols-1 gap-5"
+          [class.sm:grid-cols-3]="showCompanySelector()"
+          [class.sm:grid-cols-2]="!showCompanySelector()"
+        >
+          <div>
+            <label class="block font-semibold mb-2">
+              <ui-icon name="user" class="mr-2 text-primary"></ui-icon>
+              {{ 'iam.permission.select.user' | translate }}
+            </label>
+            <lib-user-select
+              #userSelect
+              [value]="selectedUserId()"
+              (valueChange)="onUserSelect($event)"
+              [isEditMode]="true"
+              [placeHolder]="
+                'iam.permission.select.user.placeholder' | translate
+              "
+            />
+          </div>
+
+          @if (showCompanySelector()) {
+            <div>
+              <label class="block font-semibold mb-2">
+                <ui-icon name="building" class="mr-2 text-primary"></ui-icon>
+                {{ 'iam.permission.select.company' | translate }}
+              </label>
+              <f-select
+                [ngModel]="selectedCompanyId()"
+                (ngModelChange)="onCompanyChange($event)"
+                [options]="companies()"
+                optionLabel="name"
+                optionValue="id"
+                [placeholder]="
+                  'iam.permission.select.company.placeholder' | translate
+                "
+                [filter]="true"
+                class="w-full"
+              />
+            </div>
+          }
+
+          @if (showBranchSelector()) {
+            <div>
+              <label class="block font-semibold mb-2">
+                <ui-icon name="building" class="mr-2 text-primary"></ui-icon>
+                {{ 'iam.permission.select.branch' | translate }}
+              </label>
+              <f-treeselect
+                [ngModel]="selectedBranchId()"
+                (ngModelChange)="onBranchChange($event ?? undefined)"
+                [options]="branchTreeNodes()"
+                [placeholder]="
+                  'iam.permission.select.branch.placeholder' | translate
+                "
+                [showClear]="true"
+                [filter]="true"
+                [filterPlaceholder]="'shared.search' | translate"
+                [emptyMessage]="'shared.no.results' | translate"
+                class="w-full"
+              />
+              <small class="text-muted-color block mt-1">
+                {{
+                  (branches().length !== 1
+                    ? 'iam.branch.permitted.count.plural'
+                    : 'iam.branch.permitted.count'
+                  ) | translate: { count: branches().length }
+                }}
+              </small>
+            </div>
+          }
+        </div>
+      </div>
+
+      @if (!selectedUserId()) {
+        <div class="empty-state border border-dashed border-surface rounded-border p-8 text-center">
+          <div class="empty-state-icon mx-auto mb-3">
+            <ui-icon name="key" class="text-primary"></ui-icon>
+          </div>
+          <h5 class="m-0 mb-1">
+            {{ 'iam.permission.empty.user.actions.title' | translate }}
+          </h5>
+          <p class="text-sm text-muted-color m-0">
+            {{ 'iam.permission.empty.user.actions.description' | translate }}
+          </p>
+        </div>
+      }
+
+      @if (selectedUserId()) {
+        @if (loading()) {
+          <div class="flex justify-center p-5">
+            <ui-icon name="loader-circle" spin class="text-4xl"></ui-icon>
+          </div>
+        }
+
+        @if (!loading() && actions().length > 0) {
+          <div class="surface-card p-4 rounded-border shadow-sm">
+            <div
+              class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4"
+            >
+              <div>
+                <h5 class="m-0 mb-1">
+                  {{ 'iam.permission.direct.action.permissions' | translate }}
+                </h5>
+                <p class="text-sm text-muted-color m-0">
+                  {{
+                    'iam.permission.actions.available'
+                      | translate: { count: actions().length }
+                  }}
+                </p>
+              </div>
+              <div class="flex flex-wrap gap-2">
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="setAllSelection(true)"
+                >
+                  <ui-icon pButtonIcon name="check"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  [outlined]="true"
+                  size="small"
+                  severity="secondary"
+                  (click)="setAllSelection(false)"
+                >
+                  <ui-icon pButtonIcon name="times"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
+                  *hasPermission="USER_ACTION_PERMISSIONS.ASSIGN"
+                  [disabled]="!canSave() || saving()"
+                  size="small"
+                  (click)="saveChanges()"
+                >
+                  @if (saving()) {
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                  } @else {
+                    <ui-icon pButtonIcon name="save"></ui-icon>
+                  }
+                  <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
+                </button>
+              </div>
+            </div>
+
+            @if (invalidActionsCount() > 0) {
+              <div class="validation-warning rounded-border p-3 mb-4">
+                <div class="flex items-start gap-2">
+                  <ui-icon name="exclamation-triangle" class="text-xl"></ui-icon>
+                  <div class="flex-1">
+                    <span class="font-semibold"
+                      >{{ 'iam.validation.warning.title' | translate }}:</span
+                    >
+                    <p class="text-sm mt-1 mb-0">
+                      {{
+                        (invalidActionsCount() > 1
+                          ? 'iam.validation.unmet.prerequisites.plural'
+                          : 'iam.validation.unmet.prerequisites.singular'
+                        ) | translate: { count: invalidActionsCount() }
+                      }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            }
+
+            <div class="overflow-x-auto -mx-4 sm:mx-0">
+              <f-treetable
+                [value]="treeNodes()"
+                dataKey="id"
+                [tableStyle]="{ 'min-width': '50rem' }"
+              >
+                <ng-template #header>
+                  <tr>
+                    <th class="w-12">
+                      <f-checkbox
+                        [ngModel]="allSelected()"
+                        [binary]="true"
+                        (ngModelChange)="toggleAll()"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
+                        tooltipPosition="top"
+                      />
+                    </th>
+                    <th>{{ 'shared.name' | translate }}</th>
+                    <th class="hidden md:table-cell">
+                      {{ 'shared.code' | translate }}
+                    </th>
+                    <th>{{ 'iam.action.type' | translate }}</th>
+                    <th class="hidden lg:table-cell">
+                      {{ 'shared.description' | translate }}
+                    </th>
+                  </tr>
+                </ng-template>
+                <ng-template #body let-rowNode let-rowData="rowData">
+                  @let hasUnmet = hasUnmetPrerequisites(rowData);
+                  @let tooltip = getTooltip(rowData);
+                  <tr [class.highlight-warning]="hasUnmet">
+                    <td class="w-12">
+                      <f-checkbox
+                        [ngModel]="selectionMap()[rowData.id]"
+                        [binary]="true"
+                        (ngModelChange)="onActionToggle(rowData, $event)"
+                        [fTooltip]="tooltip"
+                        tooltipPosition="top"
+                      />
+                    </td>
+                    <td>
+                      <f-treetabletoggler [rowNode]="rowNode" />
+                      <span class="inline-flex items-center gap-2">
+                        {{ rowData.name }}
+                        @if (hasUnmet) {
+                          <ui-icon name="exclamation-triangle" class="text-orange-500" [fTooltip]="
+                              'iam.validation.unmet.prerequisites.tooltip'
+                                | translate
+                            "
+                            tooltipPosition="top"></ui-icon>
+                        }
+                      </span>
+                    </td>
+                    <td class="hidden md:table-cell">
+                      {{ rowData.code || '-' }}
+                    </td>
+                    <td>
+                      <f-tag
+                        [value]="rowData.actionType"
+                        [severity]="
+                          rowData.actionType === 'backend' ? 'info' : 'success'
+                        "
+                      />
+                    </td>
+                    <td class="hidden lg:table-cell">
+                      {{ rowData.description || '-' }}
+                    </td>
+                  </tr>
+                </ng-template>
+                <ng-template #emptymessage>
+                  <tr>
+                    <td colspan="5" class="text-center p-4 text-muted-color">
+                      @if (loading()) {
+                        <ui-icon name="loader-circle" spin></ui-icon>
+                        {{ 'shared.loading.actions' | translate }}
+                      } @else {
+                        {{ 'iam.permission.no.actions.available' | translate }}
+                      }
+                    </td>
+                  </tr>
+                </ng-template>
+              </f-treetable>
+            </div>
+          </div>
+
+          @if (hasChanges()) {
+            <div class="border border-surface rounded-border p-3 mt-4">
+              <div class="flex items-center gap-2 mb-3">
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
+                <span class="font-bold">{{
+                  'shared.pending.changes' | translate
+                }}</span>
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                @if (pendingAdd().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.assign' | translate }} ({{
+                          pendingAdd().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (action of pendingAdd(); track action.id) {
+                        <li class="text-sm mb-1">{{ action.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+                @if (pendingRemove().length > 0) {
+                  <div>
+                    <div class="flex items-center gap-2 mb-2">
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
+                      <strong class="text-sm"
+                        >{{ 'shared.to.remove' | translate }} ({{
+                          pendingRemove().length
+                        }})</strong
+                      >
+                    </div>
+                    <ul class="list-none p-0 m-0 pl-4">
+                      @for (action of pendingRemove(); track action.id) {
+                        <li class="text-sm mb-1">{{ action.name }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+        }
+
+        @if (!loading() && actions().length === 0) {
+          <div class="surface-card p-5 rounded-border shadow-sm text-center">
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
+            <p class="text-muted-color m-0">
+              {{ 'iam.permission.no.actions.for.user' | translate }}
+            </p>
+          </div>
+        }
+      }
+    </div>
+  `,
+			styles: [":host{display:block}.empty-state-icon{width:3rem;height:3rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;background-color:var(--f-primary-50, rgba(59, 130, 246, .08))}:host-context(.app-dark) .empty-state-icon{background-color:#60a5fa1f}.validation-warning{background-color:var(--f-yellow-50, #fefce8);border-left:4px solid var(--f-yellow-500, #eab308);color:var(--f-yellow-700, #a16207)}:host-context(.app-dark) .validation-warning{background-color:#eab3081a;color:var(--f-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--f-red-50, rgba(239, 68, 68, .1))!important}:host-context(.app-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { userSelectRef: [{
+		type: i0.ViewChild,
+		args: ["userSelect", { isSignal: true }]
+	}] }
+});
+export { ActionPermissionLogicService as a, RoleActionSelectorComponent as i, UserRoleSelectorComponent as n, MAX_DROPDOWN_ITEMS as o, CompanyActionSelectorComponent as r, UserActionSelectorComponent as t };
+
+//# sourceMappingURL=flusys-ng-iam-user-action-selector.component-CAXEmJWx.mjs.map