@flusys/ng-auth 9.1.0 → 9.1.2

package/fesm2022/flusys-ng-auth-profile-page.component-b-8rPEXQ.mjs

@@ -0,0 +1,1792 @@
+import { AUTH_PROFILE_EXTENSION, AUTH_USER_FORM_EXTENSION, AuthApiService, AuthStateService, PROFILE_FIELD_CONTEXT, PasswordPolicyService, UserApiService } from "./flusys-ng-auth.mjs";
+import { t as sortByOrder } from "./flusys-ng-auth-extension-order.util-2XWSLqii.mjs";
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, Injector, computed, effect, inject, signal } from "@angular/core";
+import { APP_CONFIG, getPermissionMode, isCompanyFeatureEnabled, isServiceEnabled } from "@flusys/ng-core";
+import { catchError, finalize, forkJoin, of } from "rxjs";
+import { FILE_PROVIDER, FileUploaderComponent, FileUrlService, HasPermissionDirective, PROFILE_PERMISSION_PROVIDER, TranslatePipe, TranslateService } from "@flusys/ng-shared";
+import { NgComponentOutlet, NgTemplateOutlet } from "@angular/common";
+import { AvatarComponent, CheckboxComponent, FButtonDirective, InputTextDirective, MessageService, PasswordComponent, SelectComponent, SkeletonComponent, TagComponent, TextareaDirective, UiIconComponent } from "@flusys/ng-ui";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import * as i1 from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+import { FormField, form, required } from "@angular/forms/signals";
+var ProfilePageComponent = class ProfilePageComponent {
+	destroyRef = inject(DestroyRef);
+	appConfig = inject(APP_CONFIG);
+	messageService = inject(MessageService);
+	authState = inject(AuthStateService);
+	userService = inject(UserApiService);
+	authApiService = inject(AuthApiService);
+	passwordPolicy = inject(PasswordPolicyService);
+	fileUrlService = inject(FileUrlService);
+	fileProvider = inject(FILE_PROVIDER, { optional: true });
+	permissionProvider = inject(PROFILE_PERMISSION_PROVIDER, { optional: true });
+	profileExtension = inject(AUTH_PROFILE_EXTENSION, { optional: true });
+	userFormExtension = inject(AUTH_USER_FORM_EXTENSION, { optional: true });
+	translateAdapter = inject(TranslateService, { optional: true });
+	translate(key, vars) {
+		return this.translateAdapter?.translate(key, vars) ?? key;
+	}
+	isLoading = signal(false, ...ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []);
+	isLoadingPermissions = signal(false, ...ngDevMode ? [{ debugName: "isLoadingPermissions" }] : /* istanbul ignore next */ []);
+	isLoadingExtraFields = signal(false, ...ngDevMode ? [{ debugName: "isLoadingExtraFields" }] : /* istanbul ignore next */ []);
+	_profilePictureUrl = signal(null, ...ngDevMode ? [{ debugName: "_profilePictureUrl" }] : /* istanbul ignore next */ []);
+	profilePictureUrl = this._profilePictureUrl.asReadonly();
+	_userRoles = signal([], ...ngDevMode ? [{ debugName: "_userRoles" }] : /* istanbul ignore next */ []);
+	userRoles = this._userRoles.asReadonly();
+	_userActions = signal([], ...ngDevMode ? [{ debugName: "_userActions" }] : /* istanbul ignore next */ []);
+	userActions = this._userActions.asReadonly();
+	extraSections = computed(() => {
+		if (!this.profileExtension?.getExtraSections) return [];
+		return sortByOrder(this.profileExtension.getExtraSections());
+	}, ...ngDevMode ? [{ debugName: "extraSections" }] : /* istanbul ignore next */ []);
+	editableFields = computed(() => {
+		if (!this.profileExtension?.getExtraFields) return [];
+		return sortByOrder(this.profileExtension.getExtraFields());
+	}, ...ngDevMode ? [{ debugName: "editableFields" }] : /* istanbul ignore next */ []);
+	viewOnlyFields = computed(() => {
+		if (!this.userFormExtension?.getExtraFields) return [];
+		return sortByOrder(this.userFormExtension.getExtraFields());
+	}, ...ngDevMode ? [{ debugName: "viewOnlyFields" }] : /* istanbul ignore next */ []);
+	hasExtraContent = computed(() => this.extraSections().length > 0 || this.editableFields().length > 0 || this.viewOnlyFields().length > 0, ...ngDevMode ? [{ debugName: "hasExtraContent" }] : /* istanbul ignore next */ []);
+	extraFieldsModel = signal({}, ...ngDevMode ? [{ debugName: "extraFieldsModel" }] : /* istanbul ignore next */ []);
+	originalExtraFieldsModel = signal({}, ...ngDevMode ? [{ debugName: "originalExtraFieldsModel" }] : /* istanbul ignore next */ []);
+	adminFieldsModel = signal({}, ...ngDevMode ? [{ debugName: "adminFieldsModel" }] : /* istanbul ignore next */ []);
+	isExtraFieldsDirty = computed(() => {
+		const current = this.extraFieldsModel();
+		const original = this.originalExtraFieldsModel();
+		return JSON.stringify(current) !== JSON.stringify(original);
+	}, ...ngDevMode ? [{ debugName: "isExtraFieldsDirty" }] : /* istanbul ignore next */ []);
+	extraFieldsValidationError = computed(() => {
+		if (!this.profileExtension?.validateExtraFields) return null;
+		return this.profileExtension.validateExtraFields(this.extraFieldsModel());
+	}, ...ngDevMode ? [{ debugName: "extraFieldsValidationError" }] : /* istanbul ignore next */ []);
+	userEmail = computed(() => this.authState.user()?.email ?? "", ...ngDevMode ? [{ debugName: "userEmail" }] : /* istanbul ignore next */ []);
+	userName = computed(() => this.authState.userName(), ...ngDevMode ? [{ debugName: "userName" }] : /* istanbul ignore next */ []);
+	userInitials = computed(() => {
+		return (this.authState.user()?.name ?? "").split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+	}, ...ngDevMode ? [{ debugName: "userInitials" }] : /* istanbul ignore next */ []);
+	companyName = computed(() => this.authState.companyName(), ...ngDevMode ? [{ debugName: "companyName" }] : /* istanbul ignore next */ []);
+	branchName = computed(() => this.authState.branchName(), ...ngDevMode ? [{ debugName: "branchName" }] : /* istanbul ignore next */ []);
+	showUploadSection = computed(() => isServiceEnabled(this.appConfig, "storage") && this.fileProvider !== null, ...ngDevMode ? [{ debugName: "showUploadSection" }] : /* istanbul ignore next */ []);
+	showCompanySection = computed(() => isCompanyFeatureEnabled(this.appConfig), ...ngDevMode ? [{ debugName: "showCompanySection" }] : /* istanbul ignore next */ []);
+	showPermissionsSection = computed(() => isServiceEnabled(this.appConfig, "iam") && this.permissionProvider !== null, ...ngDevMode ? [{ debugName: "showPermissionsSection" }] : /* istanbul ignore next */ []);
+	permissionMode = computed(() => getPermissionMode(this.appConfig), ...ngDevMode ? [{ debugName: "permissionMode" }] : /* istanbul ignore next */ []);
+	showRoles = computed(() => {
+		const mode = this.permissionMode();
+		return mode === "rbac" || mode === "full";
+	}, ...ngDevMode ? [{ debugName: "showRoles" }] : /* istanbul ignore next */ []);
+	showActions = computed(() => {
+		const mode = this.permissionMode();
+		return mode === "direct" || mode === "full";
+	}, ...ngDevMode ? [{ debugName: "showActions" }] : /* istanbul ignore next */ []);
+	showBottomRow = computed(() => this.showCompanySection() || this.showPermissionsSection(), ...ngDevMode ? [{ debugName: "showBottomRow" }] : /* istanbul ignore next */ []);
+	originalFormModel = signal({
+		name: "",
+		phone: ""
+	}, ...ngDevMode ? [{ debugName: "originalFormModel" }] : /* istanbul ignore next */ []);
+	formModel = signal({
+		name: "",
+		phone: ""
+	}, ...ngDevMode ? [{ debugName: "formModel" }] : /* istanbul ignore next */ []);
+	formTree = form(this.formModel, (f) => {
+		required(f.name, { message: this.translate("shared.name.required") });
+	});
+	isFormValid = computed(() => this.formModel().name.trim().length > 0, ...ngDevMode ? [{ debugName: "isFormValid" }] : /* istanbul ignore next */ []);
+	isFormDirty = computed(() => {
+		const current = this.formModel();
+		const original = this.originalFormModel();
+		return current.name !== original.name || current.phone !== original.phone || this.isExtraFieldsDirty();
+	}, ...ngDevMode ? [{ debugName: "isFormDirty" }] : /* istanbul ignore next */ []);
+	updateExtraField(key, value) {
+		this.extraFieldsModel.update((model) => ({
+			...model,
+			[key]: value
+		}));
+	}
+	getExtraFieldValue(key) {
+		return this.extraFieldsModel()[key];
+	}
+	getAdminFieldValue(key) {
+		return this.adminFieldsModel()[key];
+	}
+	getSelectLabel(field, value) {
+		if (!value || !field.options) return "-";
+		return field.options.find((opt) => opt.value === value)?.label ?? String(value);
+	}
+	getFieldTemplateContext(field) {
+		return {
+			field,
+			value: this.extraFieldsModel()[field.key],
+			updateValue: (value) => this.updateExtraField(field.key, value)
+		};
+	}
+	parentInjector = inject(Injector);
+	fieldInjectors = /* @__PURE__ */ new Map();
+	getFieldInjector(field) {
+		const cached = this.fieldInjectors.get(field.key);
+		if (cached) {
+			cached.setField(field);
+			return cached.injector;
+		}
+		let currentField = field;
+		const extraFieldsModel = this.extraFieldsModel;
+		const injector = Injector.create({
+			providers: [{
+				provide: PROFILE_FIELD_CONTEXT,
+				useValue: {
+					get field() {
+						return currentField;
+					},
+					get value() {
+						return extraFieldsModel()[currentField.key];
+					},
+					updateValue: (value) => this.updateExtraField(currentField.key, value)
+				}
+			}],
+			parent: field.injector ?? this.parentInjector
+		});
+		this.fieldInjectors.set(field.key, {
+			injector,
+			setField: (next) => currentField = next
+		});
+		return injector;
+	}
+	passwordModel = signal({
+		currentPassword: "",
+		newPassword: "",
+		confirmPassword: ""
+	}, ...ngDevMode ? [{ debugName: "passwordModel" }] : /* istanbul ignore next */ []);
+	passwordForm = form(this.passwordModel, (f) => {
+		required(f.currentPassword, { message: this.translate("auth.password.change.current.required") });
+		required(f.newPassword, { message: this.translate("auth.validation.password.required") });
+	});
+	isPasswordLoading = signal(false, ...ngDevMode ? [{ debugName: "isPasswordLoading" }] : /* istanbul ignore next */ []);
+	newPasswordError = computed(() => this.passwordPolicy.validate(this.passwordModel().newPassword), ...ngDevMode ? [{ debugName: "newPasswordError" }] : /* istanbul ignore next */ []);
+	isPasswordFormValid = computed(() => {
+		const model = this.passwordModel();
+		return model.currentPassword.length > 0 && model.newPassword.length > 0 && !this.newPasswordError() && model.newPassword === model.confirmPassword;
+	}, ...ngDevMode ? [{ debugName: "isPasswordFormValid" }] : /* istanbul ignore next */ []);
+	passwordsMatch = computed(() => {
+		const model = this.passwordModel();
+		return model.confirmPassword.length === 0 || model.newPassword === model.confirmPassword;
+	}, ...ngDevMode ? [{ debugName: "passwordsMatch" }] : /* istanbul ignore next */ []);
+	profileUploadOptions = {
+		folderPath: "profile-pictures",
+		compress: true,
+		maxWidth: 400,
+		maxHeight: 400,
+		isPrivate: true
+	};
+	constructor() {
+		this.loadUserData();
+		effect(() => {
+			if (this.showPermissionsSection()) this.loadPermissions();
+		});
+		effect(() => {
+			if (this.authState.user() && this.hasExtraContent()) this.loadExtraFields();
+		});
+	}
+	loadUserData() {
+		const user = this.authState.user();
+		if (user) {
+			const initialValues = {
+				name: user.name ?? "",
+				phone: user.phone ?? ""
+			};
+			this.originalFormModel.set(initialValues);
+			this.formModel.set(initialValues);
+			if (user.profilePictureId && isServiceEnabled(this.appConfig, "storage")) this.fileUrlService.fetchSingleFileUrl(user.profilePictureId).pipe(takeUntilDestroyed(this.destroyRef)).subscribe((file) => this._profilePictureUrl.set(file?.url ?? null));
+		}
+	}
+	loadPermissions() {
+		const user = this.authState.user();
+		const branch = this.authState.branch();
+		if (!user || !this.permissionProvider) return;
+		const loadRoles = this.showRoles();
+		const loadActions = this.showActions();
+		if (!loadRoles && !loadActions) return;
+		this.isLoadingPermissions.set(true);
+		const roles$ = loadRoles ? this.permissionProvider.getUserRoles(user.id, branch?.id).pipe(catchError(() => of({ data: [] }))) : of({ data: [] });
+		const actions$ = loadActions ? this.permissionProvider.getUserActions(user.id, branch?.id).pipe(catchError(() => of({ data: [] }))) : of({ data: [] });
+		forkJoin([roles$, actions$]).pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.isLoadingPermissions.set(false))).subscribe(([rolesResponse, actionsResponse]) => {
+			this._userRoles.set(rolesResponse.data ?? []);
+			this._userActions.set(actionsResponse.data ?? []);
+		});
+	}
+	loadExtraFields() {
+		const user = this.authState.user();
+		if (!user) return;
+		const hasProfileFields = !!this.profileExtension?.getExtraFieldValues;
+		const hasAdminFields = !!this.userFormExtension?.getExtraFieldValues;
+		if (!hasProfileFields && !hasAdminFields) return;
+		this.isLoadingExtraFields.set(true);
+		const profileFields$ = hasProfileFields ? this.profileExtension.getExtraFieldValues(user.id).pipe(catchError(() => {
+			const defaults = {};
+			for (const field of this.editableFields()) if (field.key) defaults[field.key] = void 0;
+			return of(defaults);
+		})) : of({});
+		const adminFields$ = hasAdminFields ? this.userFormExtension.getExtraFieldValues(user.id).pipe(catchError(() => {
+			const defaults = {};
+			for (const field of this.viewOnlyFields()) if (field.key) defaults[field.key] = void 0;
+			return of(defaults);
+		})) : of({});
+		forkJoin([profileFields$, adminFields$]).pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.isLoadingExtraFields.set(false))).subscribe(([profileValues, adminValues]) => {
+			this.extraFieldsModel.set(profileValues);
+			this.originalExtraFieldsModel.set(profileValues);
+			this.adminFieldsModel.set(adminValues);
+		});
+	}
+	onProfilePictureUploaded(file) {
+		const user = this.authState.user();
+		if (!user || !file.id) return;
+		const fileManagerId = file.id;
+		this.userService.updateProfile({
+			id: user.id,
+			profilePictureId: fileManagerId
+		}).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+			next: (response) => {
+				if (response.success && response.data) {
+					this.authState.setUser({
+						...user,
+						profilePictureId: fileManagerId
+					});
+					this.fileUrlService.fetchSingleFileUrl(fileManagerId, true).pipe(takeUntilDestroyed(this.destroyRef)).subscribe((fileInfo) => this._profilePictureUrl.set(fileInfo?.url ?? null));
+					this.messageService.add({
+						severity: "success",
+						summary: this.translate("shared.success"),
+						detail: response.messageKey ? this.translate(response.messageKey, response.messageVariables) : response.message
+					});
+				}
+			},
+			error: () => {}
+		});
+	}
+	onSubmit() {
+		if (!this.isFormValid()) return;
+		const extraFieldsError = this.extraFieldsValidationError();
+		if (extraFieldsError) {
+			this.messageService.add({
+				severity: "error",
+				summary: this.translate("shared.validation.error"),
+				detail: extraFieldsError
+			});
+			return;
+		}
+		const user = this.authState.user();
+		if (!user) return;
+		this.isLoading.set(true);
+		const model = this.formModel();
+		const updateData = {
+			id: user.id,
+			name: model.name,
+			phone: model.phone || void 0
+		};
+		const profileUpdate$ = this.userService.updateProfile(updateData);
+		const extraFieldsUpdate$ = this.isExtraFieldsDirty() && this.profileExtension?.saveExtraFieldValues ? this.profileExtension.saveExtraFieldValues(user.id, this.extraFieldsModel()) : of(void 0);
+		forkJoin([profileUpdate$, extraFieldsUpdate$]).pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.isLoading.set(false))).subscribe({
+			next: ([response]) => {
+				if (response.success && response.data) {
+					this.authState.setUser({
+						...user,
+						name: response.data.name,
+						phone: response.data.phone ?? null
+					});
+					this.originalFormModel.set({
+						name: response.data.name,
+						phone: response.data.phone ?? ""
+					});
+					this.originalExtraFieldsModel.set({ ...this.extraFieldsModel() });
+					this.messageService.add({
+						severity: "success",
+						summary: this.translate("shared.success"),
+						detail: response.messageKey ? this.translate(response.messageKey, response.messageVariables) : response.message
+					});
+				}
+			},
+			error: () => {}
+		});
+	}
+	updatePasswordField(field, value) {
+		this.passwordModel.update((model) => ({
+			...model,
+			[field]: value
+		}));
+	}
+	onChangePassword() {
+		if (!this.isPasswordFormValid()) return;
+		this.isPasswordLoading.set(true);
+		const model = this.passwordModel();
+		this.authApiService.changePassword({
+			currentPassword: model.currentPassword,
+			newPassword: model.newPassword
+		}).pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.isPasswordLoading.set(false))).subscribe({
+			next: (response) => {
+				this.messageService.add({
+					severity: "success",
+					summary: this.translate("shared.success"),
+					detail: response?.messageKey ? this.translate(response.messageKey, response.messageVariables) : response?.message
+				});
+				this.passwordModel.set({
+					currentPassword: "",
+					newPassword: "",
+					confirmPassword: ""
+				});
+			},
+			error: () => {}
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ProfilePageComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: ProfilePageComponent,
+		isStandalone: true,
+		selector: "lib-profile-page",
+		ngImport: i0,
+		template: `
+    <div class="mb-4 md:mb-6">
+      <h1 class="text-2xl font-bold text-color mb-2">
+        {{ 'profile.title' | translate }}
+      </h1>
+      <p class="text-muted-color">{{ 'profile.subtitle' | translate }}</p>
+    </div>
+
+    <div class="card mb-2 md:mb-4">
+      <div class="flex flex-col md:flex-row gap-4 md:gap-6">
+        <div
+          class="flex flex-col items-center gap-4 md:w-72 lg:w-80 md:border-r md:border-surface md:pr-6"
+        >
+          @if (profilePictureUrl()) {
+            <f-avatar
+              [image]="profilePictureUrl()!"
+              size="xlarge"
+              shape="circle"
+              styleClass="w-28 h-28"
+            />
+          } @else {
+            <f-avatar
+              [label]="userInitials()"
+              size="xlarge"
+              shape="circle"
+              styleClass="w-28 h-28 text-3xl bg-primary text-primary-contrast"
+            />
+          }
+          <div class="text-center">
+            <div class="font-semibold text-color">{{ userName() }}</div>
+            <div class="text-muted-color text-sm">{{ userEmail() }}</div>
+          </div>
+          @if (showUploadSection()) {
+            <lib-file-uploader
+              [acceptTypes]="['image/*']"
+              [multiple]="false"
+              [maxSizeMb]="5"
+              [showPreview]="false"
+              [uploadOptions]="profileUploadOptions"
+              (fileUploaded)="onProfilePictureUploaded($event)"
+              class="w-full"
+            />
+          } @else {
+            <div class="w-full p-3 bg-emphasis rounded-lg text-center">
+              <ui-icon
+                name="info-circle"
+                class="text-muted-color mr-2"
+              ></ui-icon>
+              <span class="text-sm text-muted-color">{{
+                'profile.storage.not.enabled' | translate
+              }}</span>
+            </div>
+          }
+        </div>
+
+        <div class="flex-1 min-w-0">
+          <form (ngSubmit)="onSubmit()" class="flex flex-col gap-4">
+            <div class="flex flex-col gap-2">
+              <label class="font-medium text-color">{{
+                'auth.email.label' | translate
+              }}</label>
+              <input
+                fInputText
+                [value]="userEmail()"
+                disabled
+                class="bg-(--f-form-field-filled-background)"
+                [placeholder]="'auth.email.placeholder' | translate"
+              />
+            </div>
+
+            <div class="flex flex-col gap-2">
+              <label for="name" class="font-medium text-color"
+                >{{ 'profile.name.label' | translate }} *</label
+              >
+              <input
+                fInputText
+                id="name"
+                [formField]="formTree.name"
+                [placeholder]="'profile.name.placeholder' | translate"
+              />
+            </div>
+
+            <div class="flex flex-col gap-2">
+              <label for="phone" class="font-medium text-color">{{
+                'profile.phone.label' | translate
+              }}</label>
+              <input
+                fInputText
+                id="phone"
+                [formField]="formTree.phone"
+                [placeholder]="'profile.phone.placeholder' | translate"
+              />
+            </div>
+
+            @if (editableFields().length > 0) {
+              <div class="border-t border-surface pt-4 mt-2">
+                <div class="text-sm font-medium text-muted-color mb-4">
+                  <ui-icon name="pencil" class="mr-2"></ui-icon
+                  >{{ 'profile.additional.info' | translate }}
+                </div>
+                @if (isLoadingExtraFields()) {
+                  <f-skeleton height="2rem" class="mb-2" />
+                  <f-skeleton height="2rem" />
+                } @else {
+                  <div class="flex flex-col gap-4">
+                    @for (field of editableFields(); track field.key) {
+                      <div class="flex flex-col gap-2">
+                        <label [for]="field.key" class="font-medium text-color">
+                          {{ field.labelKey | translate: null : field.label
+                          }}{{ field.required ? ' *' : '' }}
+                        </label>
+                        @if (field.component) {
+                          <ng-container
+                            [ngComponentOutlet]="field.component"
+                            [ngComponentOutletInjector]="getFieldInjector(field)"
+                          />
+                        } @else if (field.template) {
+                          <ng-container
+                            [ngTemplateOutlet]="field.template"
+                            [ngTemplateOutletContext]="
+                              getFieldTemplateContext(field)
+                            "
+                          />
+                        } @else {
+                          <ng-container
+                            [ngTemplateOutlet]="fieldTemplate"
+                            [ngTemplateOutletContext]="{ field: field }"
+                          />
+                        }
+                      </div>
+                    }
+                  </div>
+                  @if (extraFieldsValidationError()) {
+                    <small class="text-danger block mt-2">{{
+                      extraFieldsValidationError()
+                    }}</small>
+                  }
+                }
+              </div>
+            }
+
+            @if (viewOnlyFields().length > 0) {
+              <div class="border-t border-surface pt-4 mt-2">
+                <div class="flex items-center justify-between mb-4">
+                  <div class="text-sm font-medium text-muted-color">
+                    <ui-icon name="eye" class="mr-2"></ui-icon
+                    >{{ 'profile.employment.info' | translate }}
+                  </div>
+                  <f-tag
+                    [value]="'profile.managed.by.admin' | translate"
+                    severity="secondary"
+                  />
+                </div>
+                @if (isLoadingExtraFields()) {
+                  <f-skeleton height="2rem" class="mb-2" />
+                  <f-skeleton height="2rem" />
+                } @else {
+                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    @for (field of viewOnlyFields(); track field.key) {
+                      <div class="flex flex-col gap-1">
+                        <label class="text-sm text-muted-color">{{
+                          field.labelKey | translate: null : field.label
+                        }}</label>
+                        <span class="text-color font-medium">
+                          @if (field.type === 'select') {
+                            {{
+                              getSelectLabel(
+                                field,
+                                getAdminFieldValue(field.key)
+                              )
+                            }}
+                          } @else {
+                            {{ getAdminFieldValue(field.key) || '-' }}
+                          }
+                        </span>
+                      </div>
+                    }
+                  </div>
+                }
+              </div>
+            }
+
+            <ng-template #fieldTemplate let-field="field">
+              @switch (field.type) {
+                @case ('text') {
+                  <input
+                    fInputText
+                    [id]="field.key"
+                    [placeholder]="
+                      field.placeholderKey
+                        | translate: null : field.placeholder ?? ''
+                    "
+                    [value]="getExtraFieldValue(field.key) ?? ''"
+                    [disabled]="field.editable === false"
+                    (input)="
+                      updateExtraField(field.key, $any($event.target).value)
+                    "
+                    class="w-full"
+                  />
+                }
+                @case ('number') {
+                  <input
+                    fInputText
+                    type="number"
+                    [id]="field.key"
+                    [placeholder]="
+                      field.placeholderKey
+                        | translate: null : field.placeholder ?? ''
+                    "
+                    [value]="getExtraFieldValue(field.key) ?? ''"
+                    [disabled]="field.editable === false"
+                    (input)="
+                      updateExtraField(
+                        field.key,
+                        $any($event.target).valueAsNumber
+                      )
+                    "
+                    class="w-full"
+                  />
+                }
+                @case ('textarea') {
+                  <textarea
+                    fTextarea
+                    [id]="field.key"
+                    [placeholder]="
+                      field.placeholderKey
+                        | translate: null : field.placeholder ?? ''
+                    "
+                    [value]="getExtraFieldValue(field.key) ?? ''"
+                    [disabled]="field.editable === false"
+                    (input)="
+                      updateExtraField(field.key, $any($event.target).value)
+                    "
+                    class="w-full"
+                    rows="3"
+                  ></textarea>
+                }
+                @case ('select') {
+                  <f-select
+                    [id]="field.key"
+                    class="w-full"
+                    [options]="field.options ?? []"
+                    optionValue="value"
+                    [disabled]="field.editable === false"
+                    [ngModel]="getExtraFieldValue(field.key) ?? ''"
+                    [ngModelOptions]="{ standalone: true }"
+                    (ngModelChange)="updateExtraField(field.key, $event)"
+                    [placeholder]="
+                      field.placeholderKey
+                        | translate
+                          : null
+                          : field.placeholder ?? ('shared.select' | translate)
+                    "
+                  >
+                    <ng-template #item let-opt>{{
+                      opt.labelKey | translate: null : opt.label
+                    }}</ng-template>
+                    <ng-template #selectedItem let-opt>{{
+                      opt.labelKey | translate: null : opt.label
+                    }}</ng-template>
+                  </f-select>
+                }
+                @case ('checkbox') {
+                  <f-checkbox
+                    [inputId]="field.key"
+                    [checked]="$any(getExtraFieldValue(field.key) ?? false)"
+                    [disabled]="field.editable === false"
+                    (onChange)="updateExtraField(field.key, $event.checked)"
+                    [label]="
+                      field.placeholderKey
+                        | translate
+                          : null
+                          : field.placeholder ??
+                              (field.labelKey | translate: null : field.label)
+                    "
+                  />
+                }
+                @case ('date') {
+                  <input
+                    fInputText
+                    type="date"
+                    [id]="field.key"
+                    [value]="getExtraFieldValue(field.key) ?? ''"
+                    [disabled]="field.editable === false"
+                    (input)="
+                      updateExtraField(field.key, $any($event.target).value)
+                    "
+                    class="w-full"
+                  />
+                }
+              }
+            </ng-template>
+
+            <div class="flex justify-end pt-4">
+              <button
+                fButton
+                type="submit"
+                [disabled]="!isFormValid() || !isFormDirty() || isLoading()"
+              >
+                @if (isLoading()) {
+                  <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                } @else {
+                  <ui-icon pButtonIcon name="check"></ui-icon>
+                }
+                <span pButtonLabel>{{
+                  'shared.save.changes' | translate
+                }}</span>
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+
+    <div class="card mb-2 md:mb-4">
+      <div class="flex items-center gap-2 mb-4">
+        <ui-icon name="lock" class="text-primary"></ui-icon>
+        <span class="font-semibold text-color">{{
+          'profile.security' | translate
+        }}</span>
+      </div>
+      <form (ngSubmit)="onChangePassword()" class="flex flex-col gap-4">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div class="flex flex-col gap-2">
+            <label for="currentPassword" class="font-medium text-color"
+              >{{ 'profile.current.password' | translate }} *</label
+            >
+            <f-password
+              [inputId]="'currentPassword'"
+              [formField]="passwordForm.currentPassword"
+              [placeholder]="'profile.current.password.placeholder' | translate"
+              class="w-full"
+              autocomplete="current-password"
+            />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <label for="newPassword" class="font-medium text-color"
+              >{{ 'profile.new.password' | translate }} *</label
+            >
+            <f-password
+              [inputId]="'newPassword'"
+              [formField]="passwordForm.newPassword"
+              [placeholder]="'shared.min.characters' | translate: { count: passwordPolicy.minLength }"
+              class="w-full"
+              autocomplete="new-password"
+            />
+            @if (newPasswordError()) {
+              <small class="text-danger">{{ newPasswordError() }}</small>
+            }
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <label for="confirmPassword" class="font-medium text-color"
+              >{{ 'profile.confirm.password' | translate }} *</label
+            >
+            <f-password
+              [inputId]="'confirmPassword'"
+              [formField]="passwordForm.confirmPassword"
+              [placeholder]="'profile.confirm.password.placeholder' | translate"
+              class="w-full"
+              autocomplete="new-password"
+            />
+            @if (!passwordsMatch()) {
+              <small class="text-danger">{{
+                'auth.register.passwords.do.not.match' | translate
+              }}</small>
+            }
+          </div>
+        </div>
+
+        <div class="flex justify-end">
+          <button
+            fButton
+            type="submit"
+            [disabled]="!isPasswordFormValid() || isPasswordLoading()"
+          >
+            @if (isPasswordLoading()) {
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+            } @else {
+              <ui-icon pButtonIcon name="key"></ui-icon>
+            }
+            <span pButtonLabel>{{
+              'profile.change.password' | translate
+            }}</span>
+          </button>
+        </div>
+      </form>
+    </div>
+
+    @for (section of extraSections(); track section.key) {
+      @if (section.editPermission) {
+        <div *hasPermission="section.editPermission" class="card mb-2 md:mb-4">
+          <div class="flex items-center gap-2 mb-4">
+            @if (section.icon) {
+              <ui-icon [name]="section.icon" class="text-primary"></ui-icon>
+            }
+            <span class="font-semibold text-color">{{
+              section.titleKey | translate: null : section.title
+            }}</span>
+          </div>
+          <div class="section-content">
+            @if (section.component) {
+              <ng-container [ngComponentOutlet]="section.component" />
+            }
+          </div>
+        </div>
+      } @else {
+        <div class="card mb-2 md:mb-4">
+          <div class="flex items-center gap-2 mb-4">
+            @if (section.icon) {
+              <ui-icon [name]="section.icon" class="text-primary"></ui-icon>
+            }
+            <span class="font-semibold text-color">{{
+              section.titleKey | translate: null : section.title
+            }}</span>
+          </div>
+          <div class="section-content">
+            @if (section.component) {
+              <ng-container [ngComponentOutlet]="section.component" />
+            }
+          </div>
+        </div>
+      }
+    }
+
+    @if (showBottomRow()) {
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4 flex-1">
+        @if (showCompanySection()) {
+          <div class="card h-48 md:h-56 flex flex-col">
+            <div class="flex items-center gap-2 mb-4">
+              <ui-icon name="building" class="text-primary"></ui-icon>
+              <span class="font-semibold text-color">{{
+                'profile.company.branch' | translate
+              }}</span>
+            </div>
+            <div class="flex flex-col gap-4 flex-1 overflow-auto">
+              <div class="flex items-center gap-3">
+                <div
+                  class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0"
+                >
+                  <ui-icon name="briefcase" class="text-primary"></ui-icon>
+                </div>
+                <div>
+                  <div class="text-sm text-muted-color">
+                    {{ 'shared.company' | translate }}
+                  </div>
+                  <div class="font-medium text-color">
+                    {{ companyName() || ('shared.not.assigned' | translate) }}
+                  </div>
+                </div>
+              </div>
+              <div class="flex items-center gap-3">
+                <div
+                  class="w-10 h-10 rounded-lg bg-success/10 flex items-center justify-center flex-shrink-0"
+                >
+                  <ui-icon name="map-marker" class="text-success"></ui-icon>
+                </div>
+                <div>
+                  <div class="text-sm text-muted-color">
+                    {{ 'profile.branch.label' | translate }}
+                  </div>
+                  <div class="font-medium text-color">
+                    {{ branchName() || ('shared.not.assigned' | translate) }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        }
+
+        @if (showPermissionsSection()) {
+          <div class="card h-48 md:h-56 flex flex-col">
+            <div class="flex items-center justify-between mb-4">
+              <div class="flex items-center gap-2">
+                <ui-icon name="shield" class="text-primary"></ui-icon>
+                <span class="font-semibold text-color">{{
+                  'profile.permissions.label' | translate
+                }}</span>
+              </div>
+              <f-tag
+                [value]="'shared.read.only' | translate"
+                severity="secondary"
+              />
+            </div>
+            <div class="flex flex-col gap-4 flex-1 overflow-auto">
+              @if (showRoles()) {
+                <div>
+                  <div
+                    class="text-sm text-muted-color mb-2 flex items-center gap-2"
+                  >
+                    <ui-icon name="users"></ui-icon>
+                    {{ 'profile.roles.label' | translate }}
+                  </div>
+                  @if (isLoadingPermissions()) {
+                    <f-skeleton height="1.5rem" class="mb-2" />
+                  } @else if (userRoles().length === 0) {
+                    <span class="text-muted-color text-sm">{{
+                      'profile.roles.none.assigned' | translate
+                    }}</span>
+                  } @else {
+                    <div class="flex flex-wrap gap-2">
+                      @for (role of userRoles(); track role.id) {
+                        <f-tag [value]="role.name" severity="info" />
+                      }
+                    </div>
+                  }
+                </div>
+              }
+
+              @if (showActions()) {
+                <div>
+                  <div
+                    class="text-sm text-muted-color mb-2 flex items-center gap-2"
+                  >
+                    <ui-icon name="bolt"></ui-icon>
+                    {{ 'profile.actions.label' | translate }}
+                  </div>
+                  @if (isLoadingPermissions()) {
+                    <f-skeleton height="1.5rem" class="mb-2" />
+                  } @else if (userActions().length === 0) {
+                    <span class="text-muted-color text-sm">{{
+                      'profile.actions.none.assigned' | translate
+                    }}</span>
+                  } @else {
+                    <div class="flex flex-wrap gap-2">
+                      @for (action of userActions(); track action.id) {
+                        <f-tag [value]="action.name" severity="success" />
+                      }
+                    </div>
+                  }
+                </div>
+              }
+            </div>
+          </div>
+        }
+      </div>
+    }
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: AvatarComponent,
+				selector: "f-avatar",
+				inputs: [
+					"label",
+					"icon",
+					"image",
+					"shape",
+					"size",
+					"color",
+					"styleClass",
+					"ariaLabel",
+					"ariaLabelledBy"
+				],
+				outputs: ["onImageError"]
+			},
+			{
+				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: "directive",
+				type: InputTextDirective,
+				selector: "[fInputText]",
+				inputs: [
+					"invalid",
+					"touched",
+					"variant",
+					"size",
+					"fluid"
+				]
+			},
+			{
+				kind: "component",
+				type: PasswordComponent,
+				selector: "f-password",
+				inputs: [
+					"toggleMask",
+					"feedback",
+					"disabled",
+					"placeholder",
+					"inputId",
+					"invalid",
+					"touched",
+					"inputStyleClass",
+					"styleClass",
+					"style",
+					"ariaDescribedby",
+					"autocomplete",
+					"variant",
+					"size",
+					"fluid",
+					"appendTo",
+					"promptLabel",
+					"weakLabel",
+					"mediumLabel",
+					"strongLabel",
+					"mediumRegex",
+					"strongRegex"
+				],
+				outputs: ["onBlur", "onFocus"]
+			},
+			{
+				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: SkeletonComponent,
+				selector: "f-skeleton",
+				inputs: [
+					"width",
+					"height",
+					"size",
+					"borderRadius",
+					"shape",
+					"animation",
+					"styleClass"
+				]
+			},
+			{
+				kind: "component",
+				type: TagComponent,
+				selector: "f-tag",
+				inputs: [
+					"value",
+					"severity",
+					"icon",
+					"rounded",
+					"color",
+					"styleClass",
+					"style"
+				]
+			},
+			{
+				kind: "directive",
+				type: TextareaDirective,
+				selector: "[fTextarea]",
+				inputs: [
+					"invalid",
+					"touched",
+					"variant",
+					"fluid",
+					"autoResize"
+				],
+				outputs: ["onResize"]
+			},
+			{
+				kind: "component",
+				type: UiIconComponent,
+				selector: "ui-icon",
+				inputs: [
+					"name",
+					"size",
+					"spin",
+					"fill",
+					"severity"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: FormsModule
+			},
+			{
+				kind: "directive",
+				type: i1.ɵNgNoValidate,
+				selector: "form:not([ngNoForm]):not([ngNativeValidate])"
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatusGroup,
+				selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgModel,
+				selector: "[ngModel]:not([formControlName]):not([formControl])",
+				inputs: [
+					"name",
+					"disabled",
+					"ngModel",
+					"ngModelOptions"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngModel"]
+			},
+			{
+				kind: "directive",
+				type: i1.NgForm,
+				selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]",
+				inputs: ["ngFormOptions"],
+				outputs: ["ngSubmit"],
+				exportAs: ["ngForm"]
+			},
+			{
+				kind: "directive",
+				type: NgComponentOutlet,
+				selector: "[ngComponentOutlet]",
+				inputs: [
+					"ngComponentOutlet",
+					"ngComponentOutletInputs",
+					"ngComponentOutletInjector",
+					"ngComponentOutletEnvironmentInjector",
+					"ngComponentOutletContent",
+					"ngComponentOutletNgModule"
+				],
+				exportAs: ["ngComponentOutlet"]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "directive",
+				type: FormField,
+				selector: "[formField]",
+				inputs: ["formField"],
+				exportAs: ["formField"]
+			},
+			{
+				kind: "component",
+				type: FileUploaderComponent,
+				selector: "lib-file-uploader",
+				inputs: [
+					"uploadFile",
+					"uploadMultipleFiles",
+					"acceptTypes",
+					"multiple",
+					"maxFiles",
+					"maxSizeMb",
+					"uploadOptions",
+					"disabled",
+					"showPreview",
+					"autoUpload"
+				],
+				outputs: [
+					"fileUploaded",
+					"filesUploaded",
+					"onError",
+					"fileSelected"
+				]
+			},
+			{
+				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: ProfilePageComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lib-profile-page",
+			imports: [
+				AvatarComponent,
+				CheckboxComponent,
+				FButtonDirective,
+				InputTextDirective,
+				PasswordComponent,
+				SelectComponent,
+				SkeletonComponent,
+				TagComponent,
+				TextareaDirective,
+				UiIconComponent,
+				FormsModule,
+				NgComponentOutlet,
+				NgTemplateOutlet,
+				FormField,
+				FileUploaderComponent,
+				HasPermissionDirective,
+				TranslatePipe
+			],
+			template: `
+    <div class="mb-4 md:mb-6">
+      <h1 class="text-2xl font-bold text-color mb-2">
+        {{ 'profile.title' | translate }}
+      </h1>
+      <p class="text-muted-color">{{ 'profile.subtitle' | translate }}</p>
+    </div>
+
+    <div class="card mb-2 md:mb-4">
+      <div class="flex flex-col md:flex-row gap-4 md:gap-6">
+        <div
+          class="flex flex-col items-center gap-4 md:w-72 lg:w-80 md:border-r md:border-surface md:pr-6"
+        >
+          @if (profilePictureUrl()) {
+            <f-avatar
+              [image]="profilePictureUrl()!"
+              size="xlarge"
+              shape="circle"
+              styleClass="w-28 h-28"
+            />
+          } @else {
+            <f-avatar
+              [label]="userInitials()"
+              size="xlarge"
+              shape="circle"
+              styleClass="w-28 h-28 text-3xl bg-primary text-primary-contrast"
+            />
+          }
+          <div class="text-center">
+            <div class="font-semibold text-color">{{ userName() }}</div>
+            <div class="text-muted-color text-sm">{{ userEmail() }}</div>
+          </div>
+          @if (showUploadSection()) {
+            <lib-file-uploader
+              [acceptTypes]="['image/*']"
+              [multiple]="false"
+              [maxSizeMb]="5"
+              [showPreview]="false"
+              [uploadOptions]="profileUploadOptions"
+              (fileUploaded)="onProfilePictureUploaded($event)"
+              class="w-full"
+            />
+          } @else {
+            <div class="w-full p-3 bg-emphasis rounded-lg text-center">
+              <ui-icon
+                name="info-circle"
+                class="text-muted-color mr-2"
+              ></ui-icon>
+              <span class="text-sm text-muted-color">{{
+                'profile.storage.not.enabled' | translate
+              }}</span>
+            </div>
+          }
+        </div>
+
+        <div class="flex-1 min-w-0">
+          <form (ngSubmit)="onSubmit()" class="flex flex-col gap-4">
+            <div class="flex flex-col gap-2">
+              <label class="font-medium text-color">{{
+                'auth.email.label' | translate
+              }}</label>
+              <input
+                fInputText
+                [value]="userEmail()"
+                disabled
+                class="bg-(--f-form-field-filled-background)"
+                [placeholder]="'auth.email.placeholder' | translate"
+              />
+            </div>
+
+            <div class="flex flex-col gap-2">
+              <label for="name" class="font-medium text-color"
+                >{{ 'profile.name.label' | translate }} *</label
+              >
+              <input
+                fInputText
+                id="name"
+                [formField]="formTree.name"
+                [placeholder]="'profile.name.placeholder' | translate"
+              />
+            </div>
+
+            <div class="flex flex-col gap-2">
+              <label for="phone" class="font-medium text-color">{{
+                'profile.phone.label' | translate
+              }}</label>
+              <input
+                fInputText
+                id="phone"
+                [formField]="formTree.phone"
+                [placeholder]="'profile.phone.placeholder' | translate"
+              />
+            </div>
+
+            @if (editableFields().length > 0) {
+              <div class="border-t border-surface pt-4 mt-2">
+                <div class="text-sm font-medium text-muted-color mb-4">
+                  <ui-icon name="pencil" class="mr-2"></ui-icon
+                  >{{ 'profile.additional.info' | translate }}
+                </div>
+                @if (isLoadingExtraFields()) {
+                  <f-skeleton height="2rem" class="mb-2" />
+                  <f-skeleton height="2rem" />
+                } @else {
+                  <div class="flex flex-col gap-4">
+                    @for (field of editableFields(); track field.key) {
+                      <div class="flex flex-col gap-2">
+                        <label [for]="field.key" class="font-medium text-color">
+                          {{ field.labelKey | translate: null : field.label
+                          }}{{ field.required ? ' *' : '' }}
+                        </label>
+                        @if (field.component) {
+                          <ng-container
+                            [ngComponentOutlet]="field.component"
+                            [ngComponentOutletInjector]="getFieldInjector(field)"
+                          />
+                        } @else if (field.template) {
+                          <ng-container
+                            [ngTemplateOutlet]="field.template"
+                            [ngTemplateOutletContext]="
+                              getFieldTemplateContext(field)
+                            "
+                          />
+                        } @else {
+                          <ng-container
+                            [ngTemplateOutlet]="fieldTemplate"
+                            [ngTemplateOutletContext]="{ field: field }"
+                          />
+                        }
+                      </div>
+                    }
+                  </div>
+                  @if (extraFieldsValidationError()) {
+                    <small class="text-danger block mt-2">{{
+                      extraFieldsValidationError()
+                    }}</small>
+                  }
+                }
+              </div>
+            }
+
+            @if (viewOnlyFields().length > 0) {
+              <div class="border-t border-surface pt-4 mt-2">
+                <div class="flex items-center justify-between mb-4">
+                  <div class="text-sm font-medium text-muted-color">
+                    <ui-icon name="eye" class="mr-2"></ui-icon
+                    >{{ 'profile.employment.info' | translate }}
+                  </div>
+                  <f-tag
+                    [value]="'profile.managed.by.admin' | translate"
+                    severity="secondary"
+                  />
+                </div>
+                @if (isLoadingExtraFields()) {
+                  <f-skeleton height="2rem" class="mb-2" />
+                  <f-skeleton height="2rem" />
+                } @else {
+                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    @for (field of viewOnlyFields(); track field.key) {
+                      <div class="flex flex-col gap-1">
+                        <label class="text-sm text-muted-color">{{
+                          field.labelKey | translate: null : field.label
+                        }}</label>
+                        <span class="text-color font-medium">
+                          @if (field.type === 'select') {
+                            {{
+                              getSelectLabel(
+                                field,
+                                getAdminFieldValue(field.key)
+                              )
+                            }}
+                          } @else {
+                            {{ getAdminFieldValue(field.key) || '-' }}
+                          }
+                        </span>
+                      </div>
+                    }
+                  </div>
+                }
+              </div>
+            }
+
+            <ng-template #fieldTemplate let-field="field">
+              @switch (field.type) {
+                @case ('text') {
+                  <input
+                    fInputText
+                    [id]="field.key"
+                    [placeholder]="
+                      field.placeholderKey
+                        | translate: null : field.placeholder ?? ''
+                    "
+                    [value]="getExtraFieldValue(field.key) ?? ''"
+                    [disabled]="field.editable === false"
+                    (input)="
+                      updateExtraField(field.key, $any($event.target).value)
+                    "
+                    class="w-full"
+                  />
+                }
+                @case ('number') {
+                  <input
+                    fInputText
+                    type="number"
+                    [id]="field.key"
+                    [placeholder]="
+                      field.placeholderKey
+                        | translate: null : field.placeholder ?? ''
+                    "
+                    [value]="getExtraFieldValue(field.key) ?? ''"
+                    [disabled]="field.editable === false"
+                    (input)="
+                      updateExtraField(
+                        field.key,
+                        $any($event.target).valueAsNumber
+                      )
+                    "
+                    class="w-full"
+                  />
+                }
+                @case ('textarea') {
+                  <textarea
+                    fTextarea
+                    [id]="field.key"
+                    [placeholder]="
+                      field.placeholderKey
+                        | translate: null : field.placeholder ?? ''
+                    "
+                    [value]="getExtraFieldValue(field.key) ?? ''"
+                    [disabled]="field.editable === false"
+                    (input)="
+                      updateExtraField(field.key, $any($event.target).value)
+                    "
+                    class="w-full"
+                    rows="3"
+                  ></textarea>
+                }
+                @case ('select') {
+                  <f-select
+                    [id]="field.key"
+                    class="w-full"
+                    [options]="field.options ?? []"
+                    optionValue="value"
+                    [disabled]="field.editable === false"
+                    [ngModel]="getExtraFieldValue(field.key) ?? ''"
+                    [ngModelOptions]="{ standalone: true }"
+                    (ngModelChange)="updateExtraField(field.key, $event)"
+                    [placeholder]="
+                      field.placeholderKey
+                        | translate
+                          : null
+                          : field.placeholder ?? ('shared.select' | translate)
+                    "
+                  >
+                    <ng-template #item let-opt>{{
+                      opt.labelKey | translate: null : opt.label
+                    }}</ng-template>
+                    <ng-template #selectedItem let-opt>{{
+                      opt.labelKey | translate: null : opt.label
+                    }}</ng-template>
+                  </f-select>
+                }
+                @case ('checkbox') {
+                  <f-checkbox
+                    [inputId]="field.key"
+                    [checked]="$any(getExtraFieldValue(field.key) ?? false)"
+                    [disabled]="field.editable === false"
+                    (onChange)="updateExtraField(field.key, $event.checked)"
+                    [label]="
+                      field.placeholderKey
+                        | translate
+                          : null
+                          : field.placeholder ??
+                              (field.labelKey | translate: null : field.label)
+                    "
+                  />
+                }
+                @case ('date') {
+                  <input
+                    fInputText
+                    type="date"
+                    [id]="field.key"
+                    [value]="getExtraFieldValue(field.key) ?? ''"
+                    [disabled]="field.editable === false"
+                    (input)="
+                      updateExtraField(field.key, $any($event.target).value)
+                    "
+                    class="w-full"
+                  />
+                }
+              }
+            </ng-template>
+
+            <div class="flex justify-end pt-4">
+              <button
+                fButton
+                type="submit"
+                [disabled]="!isFormValid() || !isFormDirty() || isLoading()"
+              >
+                @if (isLoading()) {
+                  <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                } @else {
+                  <ui-icon pButtonIcon name="check"></ui-icon>
+                }
+                <span pButtonLabel>{{
+                  'shared.save.changes' | translate
+                }}</span>
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+
+    <div class="card mb-2 md:mb-4">
+      <div class="flex items-center gap-2 mb-4">
+        <ui-icon name="lock" class="text-primary"></ui-icon>
+        <span class="font-semibold text-color">{{
+          'profile.security' | translate
+        }}</span>
+      </div>
+      <form (ngSubmit)="onChangePassword()" class="flex flex-col gap-4">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div class="flex flex-col gap-2">
+            <label for="currentPassword" class="font-medium text-color"
+              >{{ 'profile.current.password' | translate }} *</label
+            >
+            <f-password
+              [inputId]="'currentPassword'"
+              [formField]="passwordForm.currentPassword"
+              [placeholder]="'profile.current.password.placeholder' | translate"
+              class="w-full"
+              autocomplete="current-password"
+            />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <label for="newPassword" class="font-medium text-color"
+              >{{ 'profile.new.password' | translate }} *</label
+            >
+            <f-password
+              [inputId]="'newPassword'"
+              [formField]="passwordForm.newPassword"
+              [placeholder]="'shared.min.characters' | translate: { count: passwordPolicy.minLength }"
+              class="w-full"
+              autocomplete="new-password"
+            />
+            @if (newPasswordError()) {
+              <small class="text-danger">{{ newPasswordError() }}</small>
+            }
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <label for="confirmPassword" class="font-medium text-color"
+              >{{ 'profile.confirm.password' | translate }} *</label
+            >
+            <f-password
+              [inputId]="'confirmPassword'"
+              [formField]="passwordForm.confirmPassword"
+              [placeholder]="'profile.confirm.password.placeholder' | translate"
+              class="w-full"
+              autocomplete="new-password"
+            />
+            @if (!passwordsMatch()) {
+              <small class="text-danger">{{
+                'auth.register.passwords.do.not.match' | translate
+              }}</small>
+            }
+          </div>
+        </div>
+
+        <div class="flex justify-end">
+          <button
+            fButton
+            type="submit"
+            [disabled]="!isPasswordFormValid() || isPasswordLoading()"
+          >
+            @if (isPasswordLoading()) {
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+            } @else {
+              <ui-icon pButtonIcon name="key"></ui-icon>
+            }
+            <span pButtonLabel>{{
+              'profile.change.password' | translate
+            }}</span>
+          </button>
+        </div>
+      </form>
+    </div>
+
+    @for (section of extraSections(); track section.key) {
+      @if (section.editPermission) {
+        <div *hasPermission="section.editPermission" class="card mb-2 md:mb-4">
+          <div class="flex items-center gap-2 mb-4">
+            @if (section.icon) {
+              <ui-icon [name]="section.icon" class="text-primary"></ui-icon>
+            }
+            <span class="font-semibold text-color">{{
+              section.titleKey | translate: null : section.title
+            }}</span>
+          </div>
+          <div class="section-content">
+            @if (section.component) {
+              <ng-container [ngComponentOutlet]="section.component" />
+            }
+          </div>
+        </div>
+      } @else {
+        <div class="card mb-2 md:mb-4">
+          <div class="flex items-center gap-2 mb-4">
+            @if (section.icon) {
+              <ui-icon [name]="section.icon" class="text-primary"></ui-icon>
+            }
+            <span class="font-semibold text-color">{{
+              section.titleKey | translate: null : section.title
+            }}</span>
+          </div>
+          <div class="section-content">
+            @if (section.component) {
+              <ng-container [ngComponentOutlet]="section.component" />
+            }
+          </div>
+        </div>
+      }
+    }
+
+    @if (showBottomRow()) {
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4 flex-1">
+        @if (showCompanySection()) {
+          <div class="card h-48 md:h-56 flex flex-col">
+            <div class="flex items-center gap-2 mb-4">
+              <ui-icon name="building" class="text-primary"></ui-icon>
+              <span class="font-semibold text-color">{{
+                'profile.company.branch' | translate
+              }}</span>
+            </div>
+            <div class="flex flex-col gap-4 flex-1 overflow-auto">
+              <div class="flex items-center gap-3">
+                <div
+                  class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0"
+                >
+                  <ui-icon name="briefcase" class="text-primary"></ui-icon>
+                </div>
+                <div>
+                  <div class="text-sm text-muted-color">
+                    {{ 'shared.company' | translate }}
+                  </div>
+                  <div class="font-medium text-color">
+                    {{ companyName() || ('shared.not.assigned' | translate) }}
+                  </div>
+                </div>
+              </div>
+              <div class="flex items-center gap-3">
+                <div
+                  class="w-10 h-10 rounded-lg bg-success/10 flex items-center justify-center flex-shrink-0"
+                >
+                  <ui-icon name="map-marker" class="text-success"></ui-icon>
+                </div>
+                <div>
+                  <div class="text-sm text-muted-color">
+                    {{ 'profile.branch.label' | translate }}
+                  </div>
+                  <div class="font-medium text-color">
+                    {{ branchName() || ('shared.not.assigned' | translate) }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        }
+
+        @if (showPermissionsSection()) {
+          <div class="card h-48 md:h-56 flex flex-col">
+            <div class="flex items-center justify-between mb-4">
+              <div class="flex items-center gap-2">
+                <ui-icon name="shield" class="text-primary"></ui-icon>
+                <span class="font-semibold text-color">{{
+                  'profile.permissions.label' | translate
+                }}</span>
+              </div>
+              <f-tag
+                [value]="'shared.read.only' | translate"
+                severity="secondary"
+              />
+            </div>
+            <div class="flex flex-col gap-4 flex-1 overflow-auto">
+              @if (showRoles()) {
+                <div>
+                  <div
+                    class="text-sm text-muted-color mb-2 flex items-center gap-2"
+                  >
+                    <ui-icon name="users"></ui-icon>
+                    {{ 'profile.roles.label' | translate }}
+                  </div>
+                  @if (isLoadingPermissions()) {
+                    <f-skeleton height="1.5rem" class="mb-2" />
+                  } @else if (userRoles().length === 0) {
+                    <span class="text-muted-color text-sm">{{
+                      'profile.roles.none.assigned' | translate
+                    }}</span>
+                  } @else {
+                    <div class="flex flex-wrap gap-2">
+                      @for (role of userRoles(); track role.id) {
+                        <f-tag [value]="role.name" severity="info" />
+                      }
+                    </div>
+                  }
+                </div>
+              }
+
+              @if (showActions()) {
+                <div>
+                  <div
+                    class="text-sm text-muted-color mb-2 flex items-center gap-2"
+                  >
+                    <ui-icon name="bolt"></ui-icon>
+                    {{ 'profile.actions.label' | translate }}
+                  </div>
+                  @if (isLoadingPermissions()) {
+                    <f-skeleton height="1.5rem" class="mb-2" />
+                  } @else if (userActions().length === 0) {
+                    <span class="text-muted-color text-sm">{{
+                      'profile.actions.none.assigned' | translate
+                    }}</span>
+                  } @else {
+                    <div class="flex flex-wrap gap-2">
+                      @for (action of userActions(); track action.id) {
+                        <f-tag [value]="action.name" severity="success" />
+                      }
+                    </div>
+                  }
+                </div>
+              }
+            </div>
+          </div>
+        }
+      </div>
+    }
+  `
+		}]
+	}],
+	ctorParameters: () => []
+});
+export { ProfilePageComponent };
+
+//# sourceMappingURL=flusys-ng-auth-profile-page.component-b-8rPEXQ.mjs.map