@flusys/ng-auth 3.0.0-rc → 3.0.1

package/fesm2022/flusys-ng-auth.mjs

@@ -1,33 +1,34 @@
-import * as i1 from '@angular/common/http';
 import { HttpClient } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { inject, Injectable, signal, computed, effect, PLATFORM_ID, ChangeDetectionStrategy, Component, untracked, DestroyRef, input, output, makeStateKey, TransferState } from '@angular/core';
-import { APP_CONFIG, getServiceUrl, isCompanyFeatureEnabled, isFeatureEnabled, getPermissionMode } from '@flusys/ng-core';
+import { inject, Injectable, signal, computed, effect, PLATFORM_ID, InjectionToken, ChangeDetectionStrategy, Component, untracked, DestroyRef, input, Injector, output, makeStateKey, TransferState } from '@angular/core';
+import { APP_CONFIG, getServiceUrl, isCompanyFeatureEnabled, isEmailFeatureEnabled, isSignUpEnabled, isFeatureEnabled, getPermissionMode, getDefaultCompanySlug, getDefaultBranchSlug } from '@flusys/ng-core';
 import * as i2$1 from '@angular/router';
 import { Router, RouterOutlet, RouterLink, RouterLinkActive, ActivatedRoute } from '@angular/router';
-import { of, timeout, switchMap, map, tap, catchError, shareReplay, finalize, BehaviorSubject, throwError, filter, take, firstValueFrom } from 'rxjs';
+import { of, timeout, switchMap, map, tap, catchError, shareReplay, finalize, BehaviorSubject, throwError, filter, take, forkJoin, firstValueFrom } from 'rxjs';
 import { PlatformService, ApiResourceService, CookieService, permissionGuard, USER_PERMISSIONS, COMPANY_PERMISSIONS, BRANCH_PERMISSIONS, USER_PROVIDER, COMPANY_API_PROVIDER, USER_PERMISSION_PROVIDER, AUTH_STATE_PROVIDER, PermissionValidatorService, AngularModule, PrimeModule, HasPermissionDirective, FileUrlService, PROFILE_UPLOAD_PROVIDER, PROFILE_PERMISSION_PROVIDER, FileUploaderComponent } from '@flusys/ng-shared';
 import { map as map$1, catchError as catchError$1, tap as tap$1 } from 'rxjs/operators';
+import * as i1$1 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import { MessageService, ConfirmationService } from 'primeng/api';
 import { LAYOUT_AUTH_STATE, LAYOUT_AUTH_API, AppFloatingConfigurator } from '@flusys/ng-layout';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { form, required, FormField, email, minLength } from '@angular/forms/signals';
-import * as i1$1 from '@angular/forms';
+import * as i1 from '@angular/forms';
 import * as i2 from 'primeng/button';
 import * as i3 from 'primeng/card';
 import * as i4 from 'primeng/inputtext';
-import * as i4$2 from 'primeng/tag';
+import * as i6 from 'primeng/tag';
 import { TagModule } from 'primeng/tag';
 import * as i4$1 from 'primeng/select';
-import * as i3$1 from 'primeng/table';
-import * as i5 from 'primeng/tooltip';
-import * as i2$2 from 'primeng/avatar';
-import * as i5$1 from 'primeng/password';
-import * as i6 from 'primeng/skeleton';
-import * as i4$3 from 'primeng/dialog';
+import * as i5 from 'primeng/table';
+import * as i7 from 'primeng/tooltip';
+import * as i3$1 from 'primeng/avatar';
+import * as i6$1 from 'primeng/password';
+import * as i7$1 from 'primeng/skeleton';
+import * as i9 from 'primeng/textarea';
+import * as i4$2 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
-import * as i5$2 from 'primeng/progressspinner';
+import * as i5$1 from 'primeng/progressspinner';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
 import * as i3$2 from 'primeng/checkbox';
 
@@ -144,10 +145,10 @@ class AuthApiService {
             token,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -347,10 +348,10 @@ class AuthStateService {
         if (!this.platform.isServer)
             localStorage.removeItem(key);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthStateService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthStateService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthStateService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -457,10 +458,10 @@ class AuthInitService {
         }));
         return this.initializationCache$;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthInitService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthInitService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthInitService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthInitService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthInitService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthInitService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -471,8 +472,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  */
 class BranchApiService extends ApiResourceService {
     _currentCompanyId = signal(null, ...(ngDevMode ? [{ debugName: "_currentCompanyId" }] : []));
-    constructor(http) {
-        super('administration/branch', http);
+    constructor() {
+        super('branch', inject(HttpClient), 'administration');
     }
     setCurrentCompanyId(companyId) {
         this._currentCompanyId.set(companyId);
@@ -481,29 +482,29 @@ class BranchApiService extends ApiResourceService {
         this.setCurrentCompanyId(companyId);
         this.fetchList(search, { filter: { companyId } });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: BranchApiService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: BranchApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BranchApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BranchApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: BranchApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BranchApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Company API Service
  * Signal-based service for company CRUD operations
  */
 class CompanyApiService extends ApiResourceService {
-    constructor(http) {
-        super('administration/company', http);
+    constructor() {
+        super('company', inject(HttpClient), 'administration');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CompanyApiService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CompanyApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CompanyApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CompanyApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CompanyApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CompanyApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Token Refresh State Service
@@ -526,10 +527,10 @@ class TokenRefreshStateService {
     failRefresh() {
         this._isRefreshing.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TokenRefreshStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TokenRefreshStateService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TokenRefreshStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TokenRefreshStateService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TokenRefreshStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TokenRefreshStateService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -539,28 +540,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * Signal-based service for user CRUD operations
  */
 class UserApiService extends ApiResourceService {
-    constructor(http) {
-        super('administration/users', http);
+    constructor() {
+        super('users', inject(HttpClient), 'administration');
     }
     updateProfile(data) {
         return this.http.post(`${this.baseUrl}/profile`, data);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserApiService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UserApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UserApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UserApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }] });
+        }], ctorParameters: () => [] });
 
 /**
  * User Permission API Service
  * Handles user-company and user-branch permission assignments.
+ * Endpoint: POST /administration/permissions/*
  */
 class UserPermissionApiService {
     appConfig = inject(APP_CONFIG);
     http = inject(HttpClient);
-    baseUrl = this.appConfig.apiBaseUrl + '/administration/permissions';
+    baseUrl = `${getServiceUrl(this.appConfig, 'administration')}/permissions`;
     // Company Permissions
     assignUserCompanies(data) {
         return this.http.post(`${this.baseUrl}/user-company/assign`, data);
@@ -590,10 +592,10 @@ class UserPermissionApiService {
             ...(companyId && { companyId }),
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserPermissionApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserPermissionApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UserPermissionApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UserPermissionApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserPermissionApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UserPermissionApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -672,6 +674,22 @@ const companyFeatureGuard = () => {
         return router.createUrlTree(['/']);
     return true;
 };
+/** Protects routes requiring email feature to be enabled */
+const emailFeatureGuard = () => {
+    const router = inject(Router);
+    const appConfig = inject(APP_CONFIG);
+    if (!appConfig.services.email?.enabled)
+        return router.createUrlTree([AUTH_ENDPOINTS.LOGIN]);
+    return true;
+};
+/** Protects routes requiring sign-up feature to be enabled */
+const signUpFeatureGuard = () => {
+    const router = inject(Router);
+    const appConfig = inject(APP_CONFIG);
+    if (appConfig.enableSignUp === false)
+        return router.createUrlTree([AUTH_ENDPOINTS.LOGIN]);
+    return true;
+};
 
 /** Endpoints that need withCredentials for cookie handling */
 const COOKIE_ENDPOINTS = [
@@ -789,21 +807,22 @@ const AUTH_ROUTES = [
             {
                 path: 'register',
                 loadComponent: () => Promise.resolve().then(function () { return registerPage_component; }).then((m) => m.RegisterPageComponent),
-                canActivate: [guestGuard],
+                canActivate: [signUpFeatureGuard, guestGuard],
             },
             {
                 path: 'forgot-password',
                 loadComponent: () => Promise.resolve().then(function () { return forgotPasswordPage_component; }).then((m) => m.ForgotPasswordPageComponent),
-                canActivate: [guestGuard],
+                canActivate: [emailFeatureGuard, guestGuard],
             },
             {
                 path: 'reset-password',
                 loadComponent: () => Promise.resolve().then(function () { return resetPasswordPage_component; }).then((m) => m.ResetPasswordPageComponent),
-                canActivate: [guestGuard],
+                canActivate: [emailFeatureGuard, guestGuard],
             },
             {
                 path: 'verify-email',
                 loadComponent: () => Promise.resolve().then(function () { return verifyEmailPage_component; }).then((m) => m.VerifyEmailPageComponent),
+                canActivate: [emailFeatureGuard],
             },
             {
                 path: '',
@@ -953,10 +972,10 @@ class AuthLayoutStateAdapter {
         }
         return null;
     }, ...(ngDevMode ? [{ debugName: "loginUserData" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthLayoutStateAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthLayoutStateAdapter, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthLayoutStateAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthLayoutStateAdapter, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthLayoutStateAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthLayoutStateAdapter, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1010,10 +1029,10 @@ class AuthLayoutApiAdapter {
             slug: permission.branchSlug ?? '',
         }))));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthLayoutApiAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthLayoutApiAdapter, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthLayoutApiAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthLayoutApiAdapter, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthLayoutApiAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthLayoutApiAdapter, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1059,10 +1078,10 @@ class AuthUserProviderAdapter {
             meta: response.meta,
         })));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthUserProviderAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthUserProviderAdapter });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthUserProviderAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthUserProviderAdapter });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthUserProviderAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthUserProviderAdapter, decorators: [{
             type: Injectable
         }] });
 // =============================================================================
@@ -1089,10 +1108,10 @@ class AuthCompanyApiProviderAdapter {
             meta: response.meta,
         })));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthCompanyApiProviderAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthCompanyApiProviderAdapter });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthCompanyApiProviderAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthCompanyApiProviderAdapter });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthCompanyApiProviderAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthCompanyApiProviderAdapter, decorators: [{
             type: Injectable
         }] });
 // =============================================================================
@@ -1103,10 +1122,10 @@ class AuthUserPermissionProviderAdapter {
     getUserBranchPermissions(userId, companyId) {
         return this.userPermissionApi.getUserBranches(userId, companyId);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthUserPermissionProviderAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthUserPermissionProviderAdapter });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthUserPermissionProviderAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthUserPermissionProviderAdapter });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthUserPermissionProviderAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthUserPermissionProviderAdapter, decorators: [{
             type: Injectable
         }] });
 // =============================================================================
@@ -1121,10 +1140,10 @@ class AuthStateProviderAdapter {
     initialize() {
         return this.authInit.initialize().pipe(map(() => undefined));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthStateProviderAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthStateProviderAdapter });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthStateProviderAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthStateProviderAdapter });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthStateProviderAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthStateProviderAdapter, decorators: [{
             type: Injectable
         }] });
 
@@ -1146,6 +1165,51 @@ function provideAuthProviders() {
     ];
 }
 
+const AUTH_VALIDATION_CONFIG = new InjectionToken('AUTH_VALIDATION_CONFIG');
+const REGISTRATION_FIELD_CONTEXT = new InjectionToken('REGISTRATION_FIELD_CONTEXT');
+const AUTH_REGISTRATION_EXTENSION = new InjectionToken('AUTH_REGISTRATION_EXTENSION');
+const AUTH_USER_LIST_EXTENSION = new InjectionToken('AUTH_USER_LIST_EXTENSION');
+const PROFILE_FIELD_CONTEXT = new InjectionToken('PROFILE_FIELD_CONTEXT');
+const AUTH_PROFILE_EXTENSION = new InjectionToken('AUTH_PROFILE_EXTENSION');
+const AUTH_USER_DETAIL_CONFIG = new InjectionToken('AUTH_USER_DETAIL_CONFIG');
+function validatePassword(password, config) {
+    const minLen = config.minLength ?? 8;
+    const maxLen = config.maxLength;
+    if (password.length < minLen) {
+        return config.message ?? `Password must be at least ${minLen} characters`;
+    }
+    if (maxLen && password.length > maxLen) {
+        return config.message ?? `Password must be at most ${maxLen} characters`;
+    }
+    if (config.pattern) {
+        if (!config.pattern.test(password)) {
+            return config.message ?? 'Password does not meet requirements';
+        }
+    }
+    else {
+        if (config.requireUppercase && !/[A-Z]/.test(password)) {
+            return config.message ?? 'Password must contain at least one uppercase letter';
+        }
+        if (config.requireLowercase && !/[a-z]/.test(password)) {
+            return config.message ?? 'Password must contain at least one lowercase letter';
+        }
+        if (config.requireNumbers && !/\d/.test(password)) {
+            return config.message ?? 'Password must contain at least one number';
+        }
+        if (config.requireSpecialChars && !/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password)) {
+            return config.message ?? 'Password must contain at least one special character';
+        }
+    }
+    return null;
+}
+function validateEmail(email, config) {
+    const pattern = config?.pattern ?? /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    const message = config?.message ?? 'Please enter a valid email address';
+    if (!pattern.test(email))
+        return message;
+    return null;
+}
+
 /**
  * Administration Page Component
  * Unified administration page with tabs for:
@@ -1199,8 +1263,8 @@ class AdministrationPageComponent {
             return 'No permissions available';
         return `Manage ${tabs.map((t) => t.label.toLowerCase()).join(', ')}`;
     }, ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AdministrationPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AdministrationPageComponent, isStandalone: true, selector: "lib-administration-page", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AdministrationPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AdministrationPageComponent, isStandalone: true, selector: "lib-administration-page", ngImport: i0, template: `
     <div class="p-4">
       <div class="mb-4">
         <h1 class="text-2xl font-bold m-0">Administration</h1>
@@ -1225,7 +1289,7 @@ class AdministrationPageComponent {
     </div>
   `, isInline: true, styles: [".scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AdministrationPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AdministrationPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-administration-page', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive], template: `
     <div class="p-4">
@@ -1441,8 +1505,8 @@ class BranchFormComponent {
     onCancel() {
         this.navigateToList();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: BranchFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: BranchFormComponent, isStandalone: true, selector: "lib-branch-form", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BranchFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: BranchFormComponent, isStandalone: true, selector: "lib-branch-form", ngImport: i0, template: `
     <p-card>
       <ng-template #header>
         <div class="flex justify-between items-center p-4">
@@ -1553,9 +1617,9 @@ class BranchFormComponent {
         </div>
       </form>
     </p-card>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: BranchFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BranchFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-branch-form',
@@ -1783,8 +1847,8 @@ class BranchListComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: BranchListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: BranchListComponent, isStandalone: true, selector: "lib-branch-list", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BranchListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: BranchListComponent, isStandalone: true, selector: "lib-branch-list", ngImport: i0, template: `
     <p-card>
       <ng-template #header>
         <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 p-4">
@@ -1881,9 +1945,9 @@ class BranchListComponent {
         </p-table>
       </div>
     </p-card>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: i4$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i3$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i4$2.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: TagModule }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { 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: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: i4$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i6.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: TagModule }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: BranchListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BranchListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-branch-list',
@@ -2134,8 +2198,8 @@ class CompanyFormComponent {
             isActive: model.isActive,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CompanyFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: CompanyFormComponent, isStandalone: true, selector: "lib-company-form", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CompanyFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: CompanyFormComponent, isStandalone: true, selector: "lib-company-form", ngImport: i0, template: `
     <p-card>
       <ng-template #header>
         <div class="flex justify-between items-center p-4">
@@ -2241,9 +2305,9 @@ class CompanyFormComponent {
         </div>
       </form>
     </p-card>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CompanyFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CompanyFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-company-form',
@@ -2424,8 +2488,8 @@ class CompanyListComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CompanyListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CompanyListComponent, isStandalone: true, selector: "lib-company-list", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CompanyListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: CompanyListComponent, isStandalone: true, selector: "lib-company-list", ngImport: i0, template: `
     <p-card>
       <ng-template #header>
         <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 p-4">
@@ -2513,9 +2577,9 @@ class CompanyListComponent {
         </p-table>
       </div>
     </p-card>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: i3$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i4$2.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: TagModule }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: i5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i6.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: TagModule }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CompanyListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CompanyListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-company-list',
@@ -2657,8 +2721,8 @@ class ForgotPasswordPageComponent {
         this.submittedEmail.set('');
         this.formModel.set({ email: '' });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ForgotPasswordPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ForgotPasswordPageComponent, isStandalone: true, selector: "lib-forgot-password-page", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ForgotPasswordPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ForgotPasswordPageComponent, isStandalone: true, selector: "lib-forgot-password-page", ngImport: i0, template: `
     <app-floating-configurator />
     <div class="bg-surface-ground flex items-center justify-center min-h-screen">
       <div class="flex flex-col items-center justify-center w-full max-w-[32rem] px-4">
@@ -2735,9 +2799,9 @@ class ForgotPasswordPageComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "component", type: AppFloatingConfigurator, selector: "app-floating-configurator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { 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: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "component", type: AppFloatingConfigurator, selector: "app-floating-configurator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ForgotPasswordPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ForgotPasswordPageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-forgot-password-page',
@@ -2835,6 +2899,7 @@ class LoginPageComponent {
     messageService = inject(MessageService);
     authApi = inject(AuthApiService);
     authState = inject(AuthStateService);
+    validationConfig = inject(AUTH_VALIDATION_CONFIG, { optional: true });
     returnUrl = input('', ...(ngDevMode ? [{ debugName: "returnUrl" }] : []));
     currentStep = signal('credentials', ...(ngDevMode ? [{ debugName: "currentStep" }] : []));
     isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
@@ -2844,13 +2909,35 @@ class LoginPageComponent {
         password: '',
         rememberMe: true,
     }, ...(ngDevMode ? [{ debugName: "loginFormModel" }] : []));
+    emailErrorMessage = computed(() => this.validationConfig?.email?.message ?? 'Please enter a valid email address', ...(ngDevMode ? [{ debugName: "emailErrorMessage" }] : []));
+    passwordMinLength = computed(() => this.validationConfig?.password?.minLength ?? 8, ...(ngDevMode ? [{ debugName: "passwordMinLength" }] : []));
+    passwordErrorMessage = computed(() => this.validationConfig?.password?.message ?? `Password must be at least ${this.passwordMinLength()} characters`, ...(ngDevMode ? [{ debugName: "passwordErrorMessage" }] : []));
     loginForm = form(this.loginFormModel, (f) => {
         required(f.email, { message: 'Email is required' });
-        email(f.email, { message: 'Please enter a valid email address' });
+        email(f.email, { message: this.emailErrorMessage() });
         required(f.password, { message: 'Password is required' });
-        minLength(f.password, 8, { message: 'Password must be at least 8 characters' });
+        minLength(f.password, this.passwordMinLength(), { message: this.passwordErrorMessage() });
     });
-    isLoginFormValid = computed(() => this.loginForm().valid(), ...(ngDevMode ? [{ debugName: "isLoginFormValid" }] : []));
+    emailValidationError = computed(() => {
+        const email = this.loginFormModel().email;
+        if (!email)
+            return null;
+        return validateEmail(email, this.validationConfig?.email ?? undefined);
+    }, ...(ngDevMode ? [{ debugName: "emailValidationError" }] : []));
+    passwordValidationError = computed(() => {
+        const password = this.loginFormModel().password;
+        if (!password)
+            return null;
+        if (!this.validationConfig?.password)
+            return null;
+        return validatePassword(password, this.validationConfig.password);
+    }, ...(ngDevMode ? [{ debugName: "passwordValidationError" }] : []));
+    isLoginFormValid = computed(() => {
+        const formValid = this.loginForm().valid();
+        const emailError = this.emailValidationError();
+        const passwordError = this.passwordValidationError();
+        return formValid && !emailError && !passwordError;
+    }, ...(ngDevMode ? [{ debugName: "isLoginFormValid" }] : []));
     selectionFormModel = signal({
         companyId: '',
         branchId: '',
@@ -2862,6 +2949,8 @@ class LoginPageComponent {
     });
     isSelectionFormValid = computed(() => this.selectionForm().valid(), ...(ngDevMode ? [{ debugName: "isSelectionFormValid" }] : []));
     companyFeatureEnabled = computed(() => isCompanyFeatureEnabled(this.appConfig), ...(ngDevMode ? [{ debugName: "companyFeatureEnabled" }] : []));
+    emailFeatureEnabled = computed(() => isEmailFeatureEnabled(this.appConfig), ...(ngDevMode ? [{ debugName: "emailFeatureEnabled" }] : []));
+    signUpEnabled = computed(() => isSignUpEnabled(this.appConfig), ...(ngDevMode ? [{ debugName: "signUpEnabled" }] : []));
     sessionId = null;
     companies = signal([], ...(ngDevMode ? [{ debugName: "companies" }] : []));
     userName = signal('', ...(ngDevMode ? [{ debugName: "userName" }] : []));
@@ -3066,8 +3155,8 @@ class LoginPageComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LoginPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: LoginPageComponent, isStandalone: true, selector: "lib-login-page", inputs: { returnUrl: { classPropertyName: "returnUrl", publicName: "returnUrl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LoginPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: LoginPageComponent, isStandalone: true, selector: "lib-login-page", inputs: { returnUrl: { classPropertyName: "returnUrl", publicName: "returnUrl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <app-floating-configurator />
     <div class="bg-surface-ground flex items-center justify-center min-h-screen">
       <div class="flex flex-col items-center justify-center w-full max-w-[32rem] px-4">
@@ -3119,9 +3208,13 @@ class LoginPageComponent {
                   id="email"
                   type="email"
                   placeholder="Email address"
-                  class="w-full md:w-[25rem] mb-4"
+                  class="w-full md:w-[25rem]"
                   [formField]="loginForm.email"
                   autocomplete="email" />
+                @if (emailValidationError() && loginFormModel().email) {
+                  <small class="text-danger block mt-1">{{ emailValidationError() }}</small>
+                }
+                <div class="mb-4"></div>
 
                 <label for="password" class="block font-medium text-lg mb-2 text-color">
                   Password
@@ -3135,6 +3228,9 @@ class LoginPageComponent {
                     class="w-full md:w-[25rem]"
                     [formField]="loginForm.password"
                     autocomplete="current-password" />
+                  @if (passwordValidationError() && loginFormModel().password) {
+                    <small class="text-danger block mt-1">{{ passwordValidationError() }}</small>
+                  }
                 </div>
 
                 <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between mt-2 mb-8 gap-4">
@@ -3144,11 +3240,13 @@ class LoginPageComponent {
                       [formField]="loginForm.rememberMe" />
                     <span>Remember me</span>
                   </label>
-                  <span
-                    class="font-medium no-underline ml-2 text-right cursor-pointer text-primary"
-                    routerLink="/auth/forgot-password">
-                    Forgot password?
-                  </span>
+                  @if (emailFeatureEnabled()) {
+                    <span
+                      class="font-medium no-underline ml-2 text-right cursor-pointer text-primary"
+                      routerLink="/auth/forgot-password">
+                      Forgot password?
+                    </span>
+                  }
                 </div>
 
                 <p-button
@@ -3158,12 +3256,14 @@ class LoginPageComponent {
                   [loading]="isLoading()"
                   [disabled]="!isLoginFormValid() || isLoading()" />
 
-                <div class="flex items-center justify-center mt-4 gap-2">
-                  <span class="font-medium">Don't have an account?</span>
-                  <a routerLink="/auth/register" class="font-semibold text-primary cursor-pointer">
-                    Sign Up
-                  </a>
-                </div>
+                @if (signUpEnabled()) {
+                  <div class="flex items-center justify-center mt-4 gap-2">
+                    <span class="font-medium">Don't have an account?</span>
+                    <a routerLink="/auth/register" class="font-semibold text-primary cursor-pointer">
+                      Sign Up
+                    </a>
+                  </div>
+                }
               </form>
             }
 
@@ -3263,9 +3363,9 @@ class LoginPageComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "component", type: AppFloatingConfigurator, selector: "app-floating-configurator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { 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: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "component", type: AppFloatingConfigurator, selector: "app-floating-configurator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LoginPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LoginPageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-login-page',
@@ -3323,9 +3423,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   id="email"
                   type="email"
                   placeholder="Email address"
-                  class="w-full md:w-[25rem] mb-4"
+                  class="w-full md:w-[25rem]"
                   [formField]="loginForm.email"
                   autocomplete="email" />
+                @if (emailValidationError() && loginFormModel().email) {
+                  <small class="text-danger block mt-1">{{ emailValidationError() }}</small>
+                }
+                <div class="mb-4"></div>
 
                 <label for="password" class="block font-medium text-lg mb-2 text-color">
                   Password
@@ -3339,6 +3443,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                     class="w-full md:w-[25rem]"
                     [formField]="loginForm.password"
                     autocomplete="current-password" />
+                  @if (passwordValidationError() && loginFormModel().password) {
+                    <small class="text-danger block mt-1">{{ passwordValidationError() }}</small>
+                  }
                 </div>
 
                 <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between mt-2 mb-8 gap-4">
@@ -3348,11 +3455,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                       [formField]="loginForm.rememberMe" />
                     <span>Remember me</span>
                   </label>
-                  <span
-                    class="font-medium no-underline ml-2 text-right cursor-pointer text-primary"
-                    routerLink="/auth/forgot-password">
-                    Forgot password?
-                  </span>
+                  @if (emailFeatureEnabled()) {
+                    <span
+                      class="font-medium no-underline ml-2 text-right cursor-pointer text-primary"
+                      routerLink="/auth/forgot-password">
+                      Forgot password?
+                    </span>
+                  }
                 </div>
 
                 <p-button
@@ -3362,12 +3471,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   [loading]="isLoading()"
                   [disabled]="!isLoginFormValid() || isLoading()" />
 
-                <div class="flex items-center justify-center mt-4 gap-2">
-                  <span class="font-medium">Don't have an account?</span>
-                  <a routerLink="/auth/register" class="font-semibold text-primary cursor-pointer">
-                    Sign Up
-                  </a>
-                </div>
+                @if (signUpEnabled()) {
+                  <div class="flex items-center justify-center mt-4 gap-2">
+                    <span class="font-medium">Don't have an account?</span>
+                    <a routerLink="/auth/register" class="font-semibold text-primary cursor-pointer">
+                      Sign Up
+                    </a>
+                  </div>
+                }
               </form>
             }
 
@@ -3476,20 +3587,6 @@ var loginPage_component = /*#__PURE__*/Object.freeze({
     LoginPageComponent: LoginPageComponent
 });
 
-/**
- * Profile Page Component
- *
- * Allows users to view and update their profile information.
- * Features:
- * - Update name, phone, profile picture (if storage enabled)
- * - View company/branch info (read-only, if company feature enabled)
- * - View roles/actions (read-only, if IAM enabled via optional injection)
- *
- * Package Independence:
- * - Uses PROFILE_UPLOAD_PROVIDER (optional) for storage functionality
- * - Uses PROFILE_PERMISSION_PROVIDER (optional) for IAM functionality
- * - No direct imports from ng-storage or ng-iam
- */
 class ProfilePageComponent {
     destroyRef = inject(DestroyRef);
     appConfig = inject(APP_CONFIG);
@@ -3498,44 +3595,56 @@ class ProfilePageComponent {
     userService = inject(UserApiService);
     authApiService = inject(AuthApiService);
     fileUrlService = inject(FileUrlService);
-    // Optional injection - null if storage not configured
-    uploadProvider = inject(PROFILE_UPLOAD_PROVIDER, {
-        optional: true,
-    });
-    // Optional injection - null if IAM not configured
-    permissionProvider = inject(PROFILE_PERMISSION_PROVIDER, {
-        optional: true,
-    });
-    // State
+    uploadProvider = inject(PROFILE_UPLOAD_PROVIDER, { optional: true });
+    permissionProvider = inject(PROFILE_PERMISSION_PROVIDER, { optional: true });
+    profileExtension = inject(AUTH_PROFILE_EXTENSION, { optional: true });
     isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
     isLoadingPermissions = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingPermissions" }] : []));
+    isLoadingExtraFields = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingExtraFields" }] : []));
     _profilePictureUrl = signal(null, ...(ngDevMode ? [{ debugName: "_profilePictureUrl" }] : []));
     profilePictureUrl = this._profilePictureUrl.asReadonly();
-    // Permission data
     _userRoles = signal([], ...(ngDevMode ? [{ debugName: "_userRoles" }] : []));
     userRoles = this._userRoles.asReadonly();
     _userActions = signal([], ...(ngDevMode ? [{ debugName: "_userActions" }] : []));
     userActions = this._userActions.asReadonly();
-    // Computed from auth state
+    extraSections = computed(() => {
+        if (!this.profileExtension?.getExtraSections)
+            return [];
+        const sections = this.profileExtension.getExtraSections();
+        return sections.sort((a, b) => (a.order ?? 100) - (b.order ?? 100));
+    }, ...(ngDevMode ? [{ debugName: "extraSections" }] : []));
+    extraFields = computed(() => {
+        if (!this.profileExtension?.getExtraFields)
+            return [];
+        const fields = this.profileExtension.getExtraFields();
+        return fields.sort((a, b) => (a.order ?? 100) - (b.order ?? 100));
+    }, ...(ngDevMode ? [{ debugName: "extraFields" }] : []));
+    viewOnlyFields = computed(() => this.extraFields().filter(f => f.editable === false), ...(ngDevMode ? [{ debugName: "viewOnlyFields" }] : []));
+    editableFields = computed(() => this.extraFields().filter(f => f.editable !== false), ...(ngDevMode ? [{ debugName: "editableFields" }] : []));
+    hasExtraContent = computed(() => this.extraSections().length > 0 || this.extraFields().length > 0, ...(ngDevMode ? [{ debugName: "hasExtraContent" }] : []));
+    extraFieldsModel = signal({}, ...(ngDevMode ? [{ debugName: "extraFieldsModel" }] : []));
+    originalExtraFieldsModel = signal({}, ...(ngDevMode ? [{ debugName: "originalExtraFieldsModel" }] : []));
+    isExtraFieldsDirty = computed(() => {
+        const current = this.extraFieldsModel();
+        const original = this.originalExtraFieldsModel();
+        return JSON.stringify(current) !== JSON.stringify(original);
+    }, ...(ngDevMode ? [{ debugName: "isExtraFieldsDirty" }] : []));
+    extraFieldsValidationError = computed(() => {
+        if (!this.profileExtension?.validateExtraFields)
+            return null;
+        return this.profileExtension.validateExtraFields(this.extraFieldsModel());
+    }, ...(ngDevMode ? [{ debugName: "extraFieldsValidationError" }] : []));
     userEmail = computed(() => this.authState.user()?.email ?? '', ...(ngDevMode ? [{ debugName: "userEmail" }] : []));
     userName = computed(() => this.authState.user()?.name ?? 'User', ...(ngDevMode ? [{ debugName: "userName" }] : []));
     userInitials = computed(() => {
         const name = this.authState.user()?.name ?? '';
-        return name
-            .split(' ')
-            .map((n) => n[0])
-            .join('')
-            .toUpperCase()
-            .slice(0, 2);
+        return name.split(' ').map((n) => n[0]).join('').toUpperCase().slice(0, 2);
     }, ...(ngDevMode ? [{ debugName: "userInitials" }] : []));
     companyName = computed(() => this.authState.companyName(), ...(ngDevMode ? [{ debugName: "companyName" }] : []));
     branchName = computed(() => this.authState.branchName(), ...(ngDevMode ? [{ debugName: "branchName" }] : []));
-    // Feature flags - Storage feature check
-    showUploadSection = computed(() => isFeatureEnabled(this.appConfig, 'storage') &&
-        this.uploadProvider !== null, ...(ngDevMode ? [{ debugName: "showUploadSection" }] : []));
+    showUploadSection = computed(() => isFeatureEnabled(this.appConfig, 'storage') && this.uploadProvider !== null, ...(ngDevMode ? [{ debugName: "showUploadSection" }] : []));
     showCompanySection = computed(() => isCompanyFeatureEnabled(this.appConfig), ...(ngDevMode ? [{ debugName: "showCompanySection" }] : []));
-    showPermissionsSection = computed(() => isFeatureEnabled(this.appConfig, 'iam') &&
-        this.permissionProvider !== null, ...(ngDevMode ? [{ debugName: "showPermissionsSection" }] : []));
+    showPermissionsSection = computed(() => isFeatureEnabled(this.appConfig, 'iam') && this.permissionProvider !== null, ...(ngDevMode ? [{ debugName: "showPermissionsSection" }] : []));
     permissionMode = computed(() => getPermissionMode(this.appConfig), ...(ngDevMode ? [{ debugName: "permissionMode" }] : []));
     showRoles = computed(() => {
         const mode = this.permissionMode();
@@ -3545,30 +3654,45 @@ class ProfilePageComponent {
         const mode = this.permissionMode();
         return mode === 'direct' || mode === 'full';
     }, ...(ngDevMode ? [{ debugName: "showActions" }] : []));
-    // Show bottom row only if at least one section is visible
     showBottomRow = computed(() => this.showCompanySection() || this.showPermissionsSection(), ...(ngDevMode ? [{ debugName: "showBottomRow" }] : []));
-    // Form
-    originalFormModel = signal({
-        name: '',
-        phone: '',
-    }, ...(ngDevMode ? [{ debugName: "originalFormModel" }] : []));
-    formModel = signal({
-        name: '',
-        phone: '',
-    }, ...(ngDevMode ? [{ debugName: "formModel" }] : []));
+    originalFormModel = signal({ name: '', phone: '' }, ...(ngDevMode ? [{ debugName: "originalFormModel" }] : []));
+    formModel = signal({ name: '', phone: '' }, ...(ngDevMode ? [{ debugName: "formModel" }] : []));
     formTree = form(this.formModel, (f) => {
         required(f.name, { message: 'Name is required' });
     });
-    isFormValid = computed(() => {
-        const model = this.formModel();
-        return model.name.trim().length > 0;
-    }, ...(ngDevMode ? [{ debugName: "isFormValid" }] : []));
+    isFormValid = computed(() => this.formModel().name.trim().length > 0, ...(ngDevMode ? [{ debugName: "isFormValid" }] : []));
     isFormDirty = computed(() => {
         const current = this.formModel();
         const original = this.originalFormModel();
-        return current.name !== original.name || current.phone !== original.phone;
+        const basicDirty = current.name !== original.name || current.phone !== original.phone;
+        return basicDirty || this.isExtraFieldsDirty();
     }, ...(ngDevMode ? [{ debugName: "isFormDirty" }] : []));
-    // Password form
+    updateExtraField(key, value) {
+        this.extraFieldsModel.update((model) => ({ ...model, [key]: value }));
+    }
+    getExtraFieldValue(key) {
+        return this.extraFieldsModel()[key];
+    }
+    getSelectLabel(field, value) {
+        if (!value || !field.options)
+            return '-';
+        const option = field.options.find(opt => opt.value === value);
+        return option?.label ?? String(value);
+    }
+    getFieldTemplateContext(field) {
+        return {
+            field,
+            value: this.extraFieldsModel()[field.key],
+            updateValue: (value) => this.updateExtraField(field.key, value),
+        };
+    }
+    parentInjector = inject(Injector);
+    getFieldInjector(field) {
+        return Injector.create({
+            providers: [{ provide: PROFILE_FIELD_CONTEXT, useValue: this.getFieldTemplateContext(field) }],
+            parent: field.injector ?? this.parentInjector,
+        });
+    }
     passwordModel = signal({
         currentPassword: '',
         newPassword: '',
@@ -3577,19 +3701,15 @@ class ProfilePageComponent {
     isPasswordLoading = signal(false, ...(ngDevMode ? [{ debugName: "isPasswordLoading" }] : []));
     isPasswordFormValid = computed(() => {
         const model = this.passwordModel();
-        return (model.currentPassword.length > 0 &&
-            model.newPassword.length >= 6 &&
-            model.newPassword === model.confirmPassword);
+        return model.currentPassword.length > 0 && model.newPassword.length >= 6 && model.newPassword === model.confirmPassword;
     }, ...(ngDevMode ? [{ debugName: "isPasswordFormValid" }] : []));
     passwordsMatch = computed(() => {
         const model = this.passwordModel();
         return model.confirmPassword.length === 0 || model.newPassword === model.confirmPassword;
     }, ...(ngDevMode ? [{ debugName: "passwordsMatch" }] : []));
-    // Upload function for FileUploader - uses provider if available
     uploadFileFn = (file, options) => {
-        if (!this.uploadProvider) {
+        if (!this.uploadProvider)
             throw new Error('Upload provider not available');
-        }
         return this.uploadProvider
             .uploadProfilePicture(file, {
             folderPath: options?.folderPath ?? 'profile-pictures',
@@ -3600,15 +3720,12 @@ class ProfilePageComponent {
             .pipe(map((response) => ({
             success: response.success,
             message: response.message,
-            data: response.data
-                ? this.mapUploadResultToUploadedFile(response.data)
-                : undefined,
+            data: response.data ? this.mapUploadResultToUploadedFile(response.data) : undefined,
         })));
     };
-    /** Map upload result to IUploadedFile format */
     mapUploadResultToUploadedFile(result) {
         return {
-            id: result.id, // UUID for storing in profilePictureId
+            id: result.id,
             name: result.name,
             key: result.key,
             size: result.size,
@@ -3616,32 +3733,28 @@ class ProfilePageComponent {
         };
     }
     constructor() {
-        // Initialize user data on construction
         this.loadUserData();
-        // Effect for permissions loading when section is visible
         effect(() => {
-            if (this.showPermissionsSection()) {
+            if (this.showPermissionsSection())
                 this.loadPermissions();
-            }
+        });
+        effect(() => {
+            const user = this.authState.user();
+            if (user && this.hasExtraContent())
+                this.loadExtraFields();
         });
     }
     loadUserData() {
         const user = this.authState.user();
         if (user) {
-            const initialValues = {
-                name: user.name ?? '',
-                phone: user.phone ?? '',
-            };
+            const initialValues = { name: user.name ?? '', phone: user.phone ?? '' };
             this.originalFormModel.set(initialValues);
             this.formModel.set(initialValues);
-            // Load profile picture URL (only if storage is enabled)
             if (user.profilePictureId && isFeatureEnabled(this.appConfig, 'storage')) {
                 this.fileUrlService
                     .fetchSingleFileUrl(user.profilePictureId)
                     .pipe(takeUntilDestroyed(this.destroyRef))
-                    .subscribe((file) => {
-                    this._profilePictureUrl.set(file?.url ?? null);
-                });
+                    .subscribe((file) => this._profilePictureUrl.set(file?.url ?? null));
             }
         }
     }
@@ -3655,52 +3768,44 @@ class ProfilePageComponent {
         if (!loadRoles && !loadActions)
             return;
         this.isLoadingPermissions.set(true);
-        let rolesLoaded = !loadRoles;
-        let actionsLoaded = !loadActions;
-        const checkComplete = () => {
-            if (rolesLoaded && actionsLoaded) {
-                this.isLoadingPermissions.set(false);
-            }
-        };
-        // Load roles (if applicable)
-        if (loadRoles) {
-            this.permissionProvider
-                .getUserRoles(user.id, branch?.id)
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe({
-                next: (response) => {
-                    this._userRoles.set(response.data ?? []);
-                    rolesLoaded = true;
-                    checkComplete();
-                },
-                error: () => {
-                    this._userRoles.set([]);
-                    rolesLoaded = true;
-                    checkComplete();
-                },
-            });
-        }
-        // Load actions (if applicable)
-        if (loadActions) {
-            this.permissionProvider
-                .getUserActions(user.id, branch?.id)
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe({
-                next: (response) => {
-                    this._userActions.set(response.data ?? []);
-                    actionsLoaded = true;
-                    checkComplete();
-                },
-                error: () => {
-                    this._userActions.set([]);
-                    actionsLoaded = true;
-                    checkComplete();
-                },
-            });
-        }
+        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 || !this.profileExtension?.getExtraFieldValues)
+            return;
+        this.isLoadingExtraFields.set(true);
+        this.profileExtension
+            .getExtraFieldValues(user.id)
+            .pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.isLoadingExtraFields.set(false)))
+            .subscribe({
+            next: (values) => {
+                this.extraFieldsModel.set(values);
+                this.originalExtraFieldsModel.set(values);
+            },
+            error: () => {
+                const defaults = {};
+                for (const field of this.extraFields()) {
+                    if (field.key)
+                        defaults[field.key] = undefined;
+                }
+                this.extraFieldsModel.set(defaults);
+                this.originalExtraFieldsModel.set(defaults);
+            },
+        });
     }
     onProfilePictureUploaded(file) {
-        // Update user with new profile picture ID (file.id is the FileManager UUID)
         const user = this.authState.user();
         if (!user || !file.id)
             return;
@@ -3711,33 +3816,25 @@ class ProfilePageComponent {
             .subscribe({
             next: (response) => {
                 if (response.success && response.data) {
-                    // Update auth state with new profile picture ID
-                    this.authState.setUser({
-                        ...user,
-                        profilePictureId: fileManagerId,
-                    });
-                    // Fetch new profile picture URL (force refresh to get fresh URL)
+                    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: 'Success',
-                        detail: 'Profile picture updated',
-                    });
+                        .subscribe((fileInfo) => this._profilePictureUrl.set(fileInfo?.url ?? null));
+                    this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Profile picture updated' });
                 }
             },
-            error: () => {
-                // Error toast handled by global interceptor
-            },
+            error: () => { },
         });
     }
     onSubmit() {
         if (!this.isFormValid())
             return;
+        const extraFieldsError = this.extraFieldsValidationError();
+        if (extraFieldsError) {
+            this.messageService.add({ severity: 'error', summary: 'Validation Error', detail: extraFieldsError });
+            return;
+        }
         const user = this.authState.user();
         if (!user)
             return;
@@ -3748,33 +3845,22 @@ class ProfilePageComponent {
             name: model.name,
             phone: model.phone || undefined,
         };
-        this.userService
-            .updateProfile(updateData)
+        const profileUpdate$ = this.userService.updateProfile(updateData);
+        const extraFieldsUpdate$ = this.isExtraFieldsDirty() && this.profileExtension?.saveExtraFieldValues
+            ? this.profileExtension.saveExtraFieldValues(user.id, this.extraFieldsModel())
+            : of(undefined);
+        forkJoin([profileUpdate$, extraFieldsUpdate$])
             .pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.isLoading.set(false)))
             .subscribe({
-            next: (response) => {
+            next: ([response]) => {
                 if (response.success && response.data) {
-                    // Update auth state with new user data (name and phone)
-                    this.authState.setUser({
-                        ...user,
-                        name: response.data.name,
-                        phone: response.data.phone ?? null,
-                    });
-                    // Update original form model to reset dirty state
-                    this.originalFormModel.set({
-                        name: response.data.name,
-                        phone: response.data.phone ?? '',
-                    });
-                    this.messageService.add({
-                        severity: 'success',
-                        summary: 'Success',
-                        detail: 'Profile updated successfully',
-                    });
+                    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: 'Success', detail: 'Profile updated successfully' });
                 }
             },
-            error: () => {
-                // Error toast handled by global interceptor
-            },
+            error: () => { },
         });
     }
     updatePasswordField(field, value) {
@@ -3786,42 +3872,25 @@ class ProfilePageComponent {
         this.isPasswordLoading.set(true);
         const model = this.passwordModel();
         this.authApiService
-            .changePassword({
-            currentPassword: model.currentPassword,
-            newPassword: model.newPassword,
-        })
+            .changePassword({ currentPassword: model.currentPassword, newPassword: model.newPassword })
             .pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.isPasswordLoading.set(false)))
             .subscribe({
             next: () => {
-                this.messageService.add({
-                    severity: 'success',
-                    summary: 'Success',
-                    detail: 'Password changed successfully',
-                });
-                // Reset password form
-                this.passwordModel.set({
-                    currentPassword: '',
-                    newPassword: '',
-                    confirmPassword: '',
-                });
-            },
-            error: () => {
-                // Error toast handled by global interceptor
+                this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Password changed successfully' });
+                this.passwordModel.set({ currentPassword: '', newPassword: '', confirmPassword: '' });
             },
+            error: () => { },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ProfilePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ProfilePageComponent, isStandalone: true, selector: "lib-profile-page", ngImport: i0, template: `
-    <!-- Page Header -->
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ProfilePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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">My Profile</h1>
       <p class="text-muted-color">Manage your account settings and preferences.</p>
     </div>
 
-    <!-- Profile Form Card (full width) -->
     <div class="card mb-2 md:mb-4">
       <div class="flex flex-col md:flex-row gap-4 md:gap-6">
-        <!-- Avatar Section -->
         <div class="flex flex-col items-center gap-4 md:w-72 lg:w-80 md:border-r md:border-surface-200 md:pr-6">
           @if (profilePictureUrl()) {
             <p-avatar
@@ -3840,7 +3909,6 @@ class ProfilePageComponent {
             <div class="font-semibold text-color">{{ userName() }}</div>
             <div class="text-muted-color text-sm">{{ userEmail() }}</div>
           </div>
-          <!-- Upload section - only show if storage is enabled and provider is available -->
           @if (showUploadSection()) {
             <lib-file-uploader
               [uploadFile]="uploadFileFn"
@@ -3858,10 +3926,8 @@ class ProfilePageComponent {
           }
         </div>
 
-        <!-- Form Section -->
         <div class="flex-1">
           <form (ngSubmit)="onSubmit()" class="flex flex-col gap-4">
-            <!-- Email (read-only) -->
             <div class="flex flex-col gap-2">
               <label class="font-medium text-color">Email</label>
               <input
@@ -3871,7 +3937,6 @@ class ProfilePageComponent {
                 class="bg-surface-50" />
             </div>
 
-            <!-- Name -->
             <div class="flex flex-col gap-2">
               <label for="name" class="font-medium text-color">Name *</label>
               <input
@@ -3881,7 +3946,6 @@ class ProfilePageComponent {
                 placeholder="Your full name" />
             </div>
 
-            <!-- Phone -->
             <div class="flex flex-col gap-2">
               <label for="phone" class="font-medium text-color">Phone</label>
               <input
@@ -3891,7 +3955,140 @@ class ProfilePageComponent {
                 placeholder="+1 234 567 8900" />
             </div>
 
-            <!-- Submit -->
+            @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">
+                  <i class="pi pi-pencil mr-2"></i>Additional Information
+                </div>
+                @if (isLoadingExtraFields()) {
+                  <p-skeleton height="2rem" styleClass="mb-2" />
+                  <p-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.label }}{{ field.required ? ' *' : '' }}
+                        </label>
+                        @if (field.component) {
+                          <ng-container *ngComponentOutlet="field.component; injector: 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">
+                    <i class="pi pi-eye mr-2"></i>Employment Information
+                  </div>
+                  <p-tag value="Managed by Admin" severity="secondary" />
+                </div>
+                @if (isLoadingExtraFields()) {
+                  <p-skeleton height="2rem" styleClass="mb-2" />
+                  <p-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.label }}</label>
+                        <span class="text-color font-medium">
+                          @if (field.type === 'select') {
+                            {{ getSelectLabel(field, getExtraFieldValue(field.key)) }}
+                          } @else {
+                            {{ getExtraFieldValue(field.key) || '-' }}
+                          }
+                        </span>
+                      </div>
+                    }
+                  </div>
+                }
+              </div>
+            }
+
+            <ng-template #fieldTemplate let-field="field">
+              @switch (field.type) {
+                @case ('text') {
+                  <input
+                    pInputText
+                    [id]="field.key"
+                    [placeholder]="field.placeholder ?? ''"
+                    [value]="getExtraFieldValue(field.key) ?? ''"
+                    [disabled]="field.editable === false"
+                    (input)="updateExtraField(field.key, $any($event.target).value)"
+                    class="w-full" />
+                }
+                @case ('number') {
+                  <input
+                    pInputText
+                    type="number"
+                    [id]="field.key"
+                    [placeholder]="field.placeholder ?? ''"
+                    [value]="getExtraFieldValue(field.key) ?? ''"
+                    [disabled]="field.editable === false"
+                    (input)="updateExtraField(field.key, $any($event.target).valueAsNumber)"
+                    class="w-full" />
+                }
+                @case ('textarea') {
+                  <textarea
+                    pInputTextarea
+                    [id]="field.key"
+                    [placeholder]="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') {
+                  <select
+                    [id]="field.key"
+                    class="p-select-native w-full"
+                    [ngModel]="getExtraFieldValue(field.key) ?? ''"
+                    [ngModelOptions]="{standalone: true}"
+                    [disabled]="field.editable === false"
+                    (ngModelChange)="updateExtraField(field.key, $event)">
+                    <option value="">{{ field.placeholder ?? 'Select...' }}</option>
+                    @for (opt of field.options; track opt.value) {
+                      <option [value]="opt.value">{{ opt.label }}</option>
+                    }
+                  </select>
+                }
+                @case ('checkbox') {
+                  <label class="p-checkbox-native">
+                    <input
+                      type="checkbox"
+                      [id]="field.key"
+                      [checked]="getExtraFieldValue(field.key) ?? false"
+                      [disabled]="field.editable === false"
+                      (change)="updateExtraField(field.key, $any($event.target).checked)" />
+                    <span>{{ field.placeholder ?? field.label }}</span>
+                  </label>
+                }
+                @case ('date') {
+                  <input
+                    pInputText
+                    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">
               <p-button
                 label="Save Changes"
@@ -3905,7 +4102,6 @@ class ProfilePageComponent {
       </div>
     </div>
 
-    <!-- Security Card -->
     <div class="card mb-2 md:mb-4">
       <div class="flex items-center gap-2 mb-4">
         <i class="pi pi-lock text-primary"></i>
@@ -3913,7 +4109,6 @@ class ProfilePageComponent {
       </div>
       <form (ngSubmit)="onChangePassword()" class="flex flex-col gap-4">
         <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <!-- Current Password -->
           <div class="flex flex-col gap-2">
             <label for="currentPassword" class="font-medium text-color">Current Password *</label>
             <p-password
@@ -3928,7 +4123,6 @@ class ProfilePageComponent {
               inputStyleClass="w-full" />
           </div>
 
-          <!-- New Password -->
           <div class="flex flex-col gap-2">
             <label for="newPassword" class="font-medium text-color">New Password *</label>
             <p-password
@@ -3943,7 +4137,6 @@ class ProfilePageComponent {
               inputStyleClass="w-full" />
           </div>
 
-          <!-- Confirm Password -->
           <div class="flex flex-col gap-2">
             <label for="confirmPassword" class="font-medium text-color">Confirm Password *</label>
             <p-password
@@ -3962,7 +4155,6 @@ class ProfilePageComponent {
           </div>
         </div>
 
-        <!-- Submit -->
         <div class="flex justify-end">
           <p-button
             label="Change Password"
@@ -3974,10 +4166,40 @@ class ProfilePageComponent {
       </form>
     </div>
 
-    <!-- Company & Permissions Row (50/50 on desktop, stacked on mobile) -->
+    @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) {
+              <i [class]="section.icon + ' text-primary'"></i>
+            }
+            <span class="font-semibold text-color">{{ 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) {
+              <i [class]="section.icon + ' text-primary'"></i>
+            }
+            <span class="font-semibold text-color">{{ 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">
-        <!-- Company/Branch Info -->
         @if (showCompanySection()) {
         <div class="card h-48 md:h-56 flex flex-col">
           <div class="flex items-center gap-2 mb-4">
@@ -4007,7 +4229,6 @@ class ProfilePageComponent {
         </div>
       }
 
-      <!-- Permissions -->
       @if (showPermissionsSection()) {
         <div class="card h-48 md:h-56 flex flex-col">
           <div class="flex items-center justify-between mb-4">
@@ -4018,7 +4239,6 @@ class ProfilePageComponent {
             <p-tag value="Read-only" severity="secondary" />
           </div>
           <div class="flex flex-col gap-4 flex-1 overflow-auto">
-            <!-- Roles -->
             @if (showRoles()) {
               <div>
                 <div class="text-sm text-muted-color mb-2 flex items-center gap-2">
@@ -4038,7 +4258,6 @@ class ProfilePageComponent {
               </div>
             }
 
-            <!-- Actions -->
             @if (showActions()) {
               <div>
                 <div class="text-sm text-muted-color mb-2 flex items-center gap-2">
@@ -4062,24 +4281,21 @@ class ProfilePageComponent {
       }
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i5$1.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo", "motionOptions", "overlayOptions"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "component", type: i6.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i4$2.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "component", type: FileUploaderComponent, selector: "lib-file-uploader", inputs: ["uploadFile", "acceptTypes", "multiple", "maxFiles", "maxSizeMb", "uploadOptions", "disabled", "showPreview", "autoUpload"], outputs: ["fileUploaded", "filesUploaded", "onError", "fileSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "ngmodule", type: PrimeModule }, { kind: "component", type: i3$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6$1.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo", "motionOptions", "overlayOptions"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "component", type: i7$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i6.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i9.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "component", type: FileUploaderComponent, selector: "lib-file-uploader", inputs: ["uploadFile", "acceptTypes", "multiple", "maxFiles", "maxSizeMb", "uploadOptions", "disabled", "showPreview", "autoUpload"], outputs: ["fileUploaded", "filesUploaded", "onError", "fileSelected"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ProfilePageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ProfilePageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-profile-page',
-                    imports: [AngularModule, PrimeModule, FormField, FileUploaderComponent],
+                    imports: [AngularModule, PrimeModule, FormField, FileUploaderComponent, HasPermissionDirective],
                     template: `
-    <!-- Page Header -->
     <div class="mb-4 md:mb-6">
       <h1 class="text-2xl font-bold text-color mb-2">My Profile</h1>
       <p class="text-muted-color">Manage your account settings and preferences.</p>
     </div>
 
-    <!-- Profile Form Card (full width) -->
     <div class="card mb-2 md:mb-4">
       <div class="flex flex-col md:flex-row gap-4 md:gap-6">
-        <!-- Avatar Section -->
         <div class="flex flex-col items-center gap-4 md:w-72 lg:w-80 md:border-r md:border-surface-200 md:pr-6">
           @if (profilePictureUrl()) {
             <p-avatar
@@ -4098,7 +4314,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             <div class="font-semibold text-color">{{ userName() }}</div>
             <div class="text-muted-color text-sm">{{ userEmail() }}</div>
           </div>
-          <!-- Upload section - only show if storage is enabled and provider is available -->
           @if (showUploadSection()) {
             <lib-file-uploader
               [uploadFile]="uploadFileFn"
@@ -4116,10 +4331,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
           }
         </div>
 
-        <!-- Form Section -->
         <div class="flex-1">
           <form (ngSubmit)="onSubmit()" class="flex flex-col gap-4">
-            <!-- Email (read-only) -->
             <div class="flex flex-col gap-2">
               <label class="font-medium text-color">Email</label>
               <input
@@ -4129,7 +4342,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 class="bg-surface-50" />
             </div>
 
-            <!-- Name -->
             <div class="flex flex-col gap-2">
               <label for="name" class="font-medium text-color">Name *</label>
               <input
@@ -4139,7 +4351,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 placeholder="Your full name" />
             </div>
 
-            <!-- Phone -->
             <div class="flex flex-col gap-2">
               <label for="phone" class="font-medium text-color">Phone</label>
               <input
@@ -4149,7 +4360,140 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 placeholder="+1 234 567 8900" />
             </div>
 
-            <!-- Submit -->
+            @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">
+                  <i class="pi pi-pencil mr-2"></i>Additional Information
+                </div>
+                @if (isLoadingExtraFields()) {
+                  <p-skeleton height="2rem" styleClass="mb-2" />
+                  <p-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.label }}{{ field.required ? ' *' : '' }}
+                        </label>
+                        @if (field.component) {
+                          <ng-container *ngComponentOutlet="field.component; injector: 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">
+                    <i class="pi pi-eye mr-2"></i>Employment Information
+                  </div>
+                  <p-tag value="Managed by Admin" severity="secondary" />
+                </div>
+                @if (isLoadingExtraFields()) {
+                  <p-skeleton height="2rem" styleClass="mb-2" />
+                  <p-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.label }}</label>
+                        <span class="text-color font-medium">
+                          @if (field.type === 'select') {
+                            {{ getSelectLabel(field, getExtraFieldValue(field.key)) }}
+                          } @else {
+                            {{ getExtraFieldValue(field.key) || '-' }}
+                          }
+                        </span>
+                      </div>
+                    }
+                  </div>
+                }
+              </div>
+            }
+
+            <ng-template #fieldTemplate let-field="field">
+              @switch (field.type) {
+                @case ('text') {
+                  <input
+                    pInputText
+                    [id]="field.key"
+                    [placeholder]="field.placeholder ?? ''"
+                    [value]="getExtraFieldValue(field.key) ?? ''"
+                    [disabled]="field.editable === false"
+                    (input)="updateExtraField(field.key, $any($event.target).value)"
+                    class="w-full" />
+                }
+                @case ('number') {
+                  <input
+                    pInputText
+                    type="number"
+                    [id]="field.key"
+                    [placeholder]="field.placeholder ?? ''"
+                    [value]="getExtraFieldValue(field.key) ?? ''"
+                    [disabled]="field.editable === false"
+                    (input)="updateExtraField(field.key, $any($event.target).valueAsNumber)"
+                    class="w-full" />
+                }
+                @case ('textarea') {
+                  <textarea
+                    pInputTextarea
+                    [id]="field.key"
+                    [placeholder]="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') {
+                  <select
+                    [id]="field.key"
+                    class="p-select-native w-full"
+                    [ngModel]="getExtraFieldValue(field.key) ?? ''"
+                    [ngModelOptions]="{standalone: true}"
+                    [disabled]="field.editable === false"
+                    (ngModelChange)="updateExtraField(field.key, $event)">
+                    <option value="">{{ field.placeholder ?? 'Select...' }}</option>
+                    @for (opt of field.options; track opt.value) {
+                      <option [value]="opt.value">{{ opt.label }}</option>
+                    }
+                  </select>
+                }
+                @case ('checkbox') {
+                  <label class="p-checkbox-native">
+                    <input
+                      type="checkbox"
+                      [id]="field.key"
+                      [checked]="getExtraFieldValue(field.key) ?? false"
+                      [disabled]="field.editable === false"
+                      (change)="updateExtraField(field.key, $any($event.target).checked)" />
+                    <span>{{ field.placeholder ?? field.label }}</span>
+                  </label>
+                }
+                @case ('date') {
+                  <input
+                    pInputText
+                    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">
               <p-button
                 label="Save Changes"
@@ -4163,7 +4507,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
       </div>
     </div>
 
-    <!-- Security Card -->
     <div class="card mb-2 md:mb-4">
       <div class="flex items-center gap-2 mb-4">
         <i class="pi pi-lock text-primary"></i>
@@ -4171,7 +4514,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
       </div>
       <form (ngSubmit)="onChangePassword()" class="flex flex-col gap-4">
         <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <!-- Current Password -->
           <div class="flex flex-col gap-2">
             <label for="currentPassword" class="font-medium text-color">Current Password *</label>
             <p-password
@@ -4186,7 +4528,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
               inputStyleClass="w-full" />
           </div>
 
-          <!-- New Password -->
           <div class="flex flex-col gap-2">
             <label for="newPassword" class="font-medium text-color">New Password *</label>
             <p-password
@@ -4201,7 +4542,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
               inputStyleClass="w-full" />
           </div>
 
-          <!-- Confirm Password -->
           <div class="flex flex-col gap-2">
             <label for="confirmPassword" class="font-medium text-color">Confirm Password *</label>
             <p-password
@@ -4220,7 +4560,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
           </div>
         </div>
 
-        <!-- Submit -->
         <div class="flex justify-end">
           <p-button
             label="Change Password"
@@ -4232,10 +4571,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
       </form>
     </div>
 
-    <!-- Company & Permissions Row (50/50 on desktop, stacked on mobile) -->
+    @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) {
+              <i [class]="section.icon + ' text-primary'"></i>
+            }
+            <span class="font-semibold text-color">{{ 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) {
+              <i [class]="section.icon + ' text-primary'"></i>
+            }
+            <span class="font-semibold text-color">{{ 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">
-        <!-- Company/Branch Info -->
         @if (showCompanySection()) {
         <div class="card h-48 md:h-56 flex flex-col">
           <div class="flex items-center gap-2 mb-4">
@@ -4265,7 +4634,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         </div>
       }
 
-      <!-- Permissions -->
       @if (showPermissionsSection()) {
         <div class="card h-48 md:h-56 flex flex-col">
           <div class="flex items-center justify-between mb-4">
@@ -4276,7 +4644,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             <p-tag value="Read-only" severity="secondary" />
           </div>
           <div class="flex flex-col gap-4 flex-1 overflow-auto">
-            <!-- Roles -->
             @if (showRoles()) {
               <div>
                 <div class="text-sm text-muted-color mb-2 flex items-center gap-2">
@@ -4296,7 +4663,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
               </div>
             }
 
-            <!-- Actions -->
             @if (showActions()) {
               <div>
                 <div class="text-sm text-muted-color mb-2 flex items-center gap-2">
@@ -4338,11 +4704,33 @@ class RegisterPageComponent {
     authState = inject(AuthStateService);
     route = inject(ActivatedRoute);
     router = inject(Router);
+    validationConfig = inject(AUTH_VALIDATION_CONFIG, {
+        optional: true,
+    });
+    registrationExtension = inject(AUTH_REGISTRATION_EXTENSION, {
+        optional: true,
+    });
     queryParamMap = toSignal(this.route.queryParamMap);
     companySlugInitialized = false;
     returnUrl = input('', ...(ngDevMode ? [{ debugName: "returnUrl" }] : []));
     isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
     companyFeatureEnabled = computed(() => isCompanyFeatureEnabled(this.appConfig), ...(ngDevMode ? [{ debugName: "companyFeatureEnabled" }] : []));
+    defaultCompanySlug = computed(() => getDefaultCompanySlug(this.appConfig), ...(ngDevMode ? [{ debugName: "defaultCompanySlug" }] : []));
+    defaultBranchSlug = computed(() => getDefaultBranchSlug(this.appConfig), ...(ngDevMode ? [{ debugName: "defaultBranchSlug" }] : []));
+    hasDefaultCompany = computed(() => !!this.defaultCompanySlug(), ...(ngDevMode ? [{ debugName: "hasDefaultCompany" }] : []));
+    hasDefaultBranch = computed(() => !!this.defaultBranchSlug(), ...(ngDevMode ? [{ debugName: "hasDefaultBranch" }] : []));
+    extraFields = computed(() => {
+        if (!this.registrationExtension)
+            return [];
+        const fields = this.registrationExtension.getExtraFields();
+        return fields.sort((a, b) => (a.order ?? 100) - (b.order ?? 100));
+    }, ...(ngDevMode ? [{ debugName: "extraFields" }] : []));
+    extraFieldsModel = signal({}, ...(ngDevMode ? [{ debugName: "extraFieldsModel" }] : []));
+    emailErrorMessage = computed(() => this.validationConfig?.email?.message ??
+        'Please enter a valid email address', ...(ngDevMode ? [{ debugName: "emailErrorMessage" }] : []));
+    passwordMinLength = computed(() => this.validationConfig?.password?.minLength ?? 8, ...(ngDevMode ? [{ debugName: "passwordMinLength" }] : []));
+    passwordErrorMessage = computed(() => this.validationConfig?.password?.message ??
+        `Password must be at least ${this.passwordMinLength()} characters`, ...(ngDevMode ? [{ debugName: "passwordErrorMessage" }] : []));
     userFormModel = signal({
         name: '',
         email: '',
@@ -4354,10 +4742,10 @@ class RegisterPageComponent {
         required(f.name, { message: 'Name is required' });
         minLength(f.name, 2, { message: 'Name must be at least 2 characters' });
         required(f.email, { message: 'Email is required' });
-        email(f.email, { message: 'Please enter a valid email address' });
+        email(f.email, { message: this.emailErrorMessage() });
         required(f.password, { message: 'Password is required' });
-        minLength(f.password, 8, {
-            message: 'Password must be at least 8 characters',
+        minLength(f.password, this.passwordMinLength(), {
+            message: this.passwordErrorMessage(),
         });
         required(f.confirmPassword, { message: 'Please confirm your password' });
     });
@@ -4369,35 +4757,106 @@ class RegisterPageComponent {
         newCompanyPhone: '',
         newCompanyAddress: '',
     }, ...(ngDevMode ? [{ debugName: "companyFormModel" }] : []));
-    companyForm = form(this.companyFormModel, (f) => { });
+    companyForm = form(this.companyFormModel);
+    emailValidationError = computed(() => {
+        const email = this.userFormModel().email;
+        if (!email)
+            return null;
+        return validateEmail(email, this.validationConfig?.email ?? undefined);
+    }, ...(ngDevMode ? [{ debugName: "emailValidationError" }] : []));
+    passwordValidationError = computed(() => {
+        const password = this.userFormModel().password;
+        if (!password)
+            return null;
+        if (!this.validationConfig?.password)
+            return null;
+        return validatePassword(password, this.validationConfig.password);
+    }, ...(ngDevMode ? [{ debugName: "passwordValidationError" }] : []));
+    extraFieldsValidationError = computed(() => {
+        if (!this.registrationExtension?.validateExtraFields)
+            return null;
+        return this.registrationExtension.validateExtraFields(this.extraFieldsModel());
+    }, ...(ngDevMode ? [{ debugName: "extraFieldsValidationError" }] : []));
     passwordsMatch = computed(() => {
         const model = this.userFormModel();
         return model.password === model.confirmPassword;
     }, ...(ngDevMode ? [{ debugName: "passwordsMatch" }] : []));
     isFormValid = computed(() => {
         const userModel = this.userFormModel();
+        const emailError = this.emailValidationError();
+        const passwordError = this.passwordValidationError();
+        const extraFieldsError = this.extraFieldsValidationError();
         const userValid = userModel.name.trim().length >= 2 &&
             userModel.email.includes('@') &&
-            userModel.password.length >= 8 &&
+            !emailError &&
+            userModel.password.length >= this.passwordMinLength() &&
+            !passwordError &&
             userModel.confirmPassword.length > 0 &&
-            this.passwordsMatch();
+            this.passwordsMatch() &&
+            !extraFieldsError;
+        const extraFieldsValid = this.validateRequiredExtraFields();
         if (!isCompanyFeatureEnabled(this.appConfig))
-            return userValid;
+            return userValid && extraFieldsValid;
         const companyModel = this.companyFormModel();
         if (companyModel.createNewCompany) {
-            return userValid && companyModel.newCompanyName.trim().length > 0;
+            return (userValid &&
+                extraFieldsValid &&
+                companyModel.newCompanyName.trim().length > 0);
         }
-        return userValid;
+        return userValid && extraFieldsValid;
     }, ...(ngDevMode ? [{ debugName: "isFormValid" }] : []));
+    validateRequiredExtraFields() {
+        const fields = this.extraFields();
+        const values = this.extraFieldsModel();
+        for (const field of fields) {
+            if (field.required) {
+                const value = values[field.key];
+                if (value === undefined || value === null || value === '') {
+                    return false;
+                }
+            }
+        }
+        return true;
+    }
+    updateExtraField(key, value) {
+        this.extraFieldsModel.update((model) => ({ ...model, [key]: value }));
+    }
+    getFieldTemplateContext(field) {
+        return {
+            field,
+            value: this.extraFieldsModel()[field.key] ?? field.defaultValue,
+            updateValue: (value) => this.updateExtraField(field.key, value),
+        };
+    }
+    parentInjector = inject(Injector);
+    getFieldInjector(field) {
+        return Injector.create({
+            providers: [
+                {
+                    provide: REGISTRATION_FIELD_CONTEXT,
+                    useValue: this.getFieldTemplateContext(field),
+                },
+            ],
+            parent: field.injector ?? this.parentInjector,
+        });
+    }
     constructor() {
         effect(() => {
             const params = this.queryParamMap();
             if (!params || this.companySlugInitialized)
                 return;
             this.companySlugInitialized = true;
-            const companySlug = params.get('companySlug');
-            if (companySlug) {
-                this.companyFormModel.update((model) => ({ ...model, companySlug }));
+            const configCompanySlug = this.defaultCompanySlug();
+            const configBranchSlug = this.defaultBranchSlug();
+            const queryCompanySlug = params.get('companySlug');
+            const companySlug = configCompanySlug || queryCompanySlug || '';
+            const branchSlug = configBranchSlug || '';
+            if (companySlug || branchSlug) {
+                this.companyFormModel.update((model) => ({
+                    ...model,
+                    companySlug,
+                    branchSlug,
+                }));
             }
         });
     }
@@ -4433,24 +4892,32 @@ class RegisterPageComponent {
         this.isLoading.set(true);
         const userModel = this.userFormModel();
         const companyModel = this.companyFormModel();
-        const registrationData = {
+        let registrationData = {
             name: userModel.name,
             email: userModel.email,
             password: userModel.password,
             phone: userModel.phone || undefined,
         };
+        const extraFieldsData = this.extraFieldsModel();
+        if (Object.keys(extraFieldsData).length > 0) {
+            registrationData['additionalFields'] = extraFieldsData;
+        }
+        if (this.registrationExtension?.transformRegistrationData) {
+            registrationData =
+                this.registrationExtension.transformRegistrationData(registrationData);
+        }
         if (isCompanyFeatureEnabled(this.appConfig)) {
             if (companyModel.createNewCompany) {
-                registrationData.newCompanyName =
+                registrationData['newCompanyName'] =
                     companyModel.newCompanyName || undefined;
-                registrationData.newCompanyPhone =
+                registrationData['newCompanyPhone'] =
                     companyModel.newCompanyPhone || undefined;
-                registrationData.newCompanyAddress =
+                registrationData['newCompanyAddress'] =
                     companyModel.newCompanyAddress || undefined;
             }
             else {
-                registrationData.companySlug = companyModel.companySlug || undefined;
-                registrationData.branchSlug = companyModel.branchSlug || undefined;
+                registrationData['companySlug'] = companyModel.companySlug || undefined;
+                registrationData['branchSlug'] = companyModel.branchSlug || undefined;
             }
         }
         this.authApi
@@ -4490,8 +4957,8 @@ class RegisterPageComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RegisterPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: RegisterPageComponent, isStandalone: true, selector: "lib-register-page", inputs: { returnUrl: { classPropertyName: "returnUrl", publicName: "returnUrl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: RegisterPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: RegisterPageComponent, isStandalone: true, selector: "lib-register-page", inputs: { returnUrl: { classPropertyName: "returnUrl", publicName: "returnUrl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <app-floating-configurator />
     <div
       class="bg-surface-ground flex items-center justify-center min-h-screen py-8"
@@ -4557,6 +5024,11 @@ class RegisterPageComponent {
                   class="w-full"
                   autocomplete="email"
                 />
+                @if (emailValidationError() && userFormModel().email) {
+                  <small class="text-danger block mt-1">{{
+                    emailValidationError()
+                  }}</small>
+                }
               </div>
 
               <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
@@ -4569,10 +5041,15 @@ class RegisterPageComponent {
                     id="password"
                     type="password"
                     [formField]="userForm.password"
-                    placeholder="Min. 8 characters"
+                    placeholder="Min. {{ passwordMinLength() }} characters"
                     class="w-full"
                     autocomplete="new-password"
                   />
+                  @if (passwordValidationError() && userFormModel().password) {
+                    <small class="text-danger block mt-1">{{
+                      passwordValidationError()
+                    }}</small>
+                  }
                 </div>
 
                 <div>
@@ -4596,29 +5073,193 @@ class RegisterPageComponent {
                 </div>
               </div>
 
+              @if (extraFields().length > 0) {
+                <div class="border-t border-surface pt-4 mt-4 mb-4">
+                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    @for (field of extraFields(); track field.key) {
+                      <div [class]="field.containerClass ?? ''">
+                        <label [for]="field.key" class="block font-medium mb-2">
+                          {{ field.label }}{{ field.required ? ' *' : '' }}
+                        </label>
+                        @if (field.component) {
+                          <ng-container
+                            *ngComponentOutlet="field.component; injector: getFieldInjector(field)"
+                          ></ng-container>
+                        } @else if (field.template) {
+                          <ng-container
+                            [ngTemplateOutlet]="field.template"
+                            [ngTemplateOutletContext]="getFieldTemplateContext(field)"
+                          ></ng-container>
+                        } @else {
+                          @switch (field.type) {
+                            @case ('text') {
+                              <input
+                                pInputText
+                                [id]="field.key"
+                                [placeholder]="field.placeholder ?? ''"
+                                [value]="
+                                  extraFieldsModel()[field.key] ??
+                                  field.defaultValue ??
+                                  ''
+                                "
+                                (input)="
+                                  updateExtraField(
+                                    field.key,
+                                    $any($event.target).value
+                                  )
+                                "
+                                class="w-full"
+                              />
+                            }
+                            @case ('number') {
+                              <input
+                                pInputText
+                                type="number"
+                                [id]="field.key"
+                                [placeholder]="field.placeholder ?? ''"
+                                [value]="
+                                  extraFieldsModel()[field.key] ??
+                                  field.defaultValue ??
+                                  ''
+                                "
+                                (input)="
+                                  updateExtraField(
+                                    field.key,
+                                    $any($event.target).valueAsNumber
+                                  )
+                                "
+                                class="w-full"
+                              />
+                            }
+                            @case ('textarea') {
+                              <textarea
+                                pInputTextarea
+                                [id]="field.key"
+                                [placeholder]="field.placeholder ?? ''"
+                                [value]="
+                                  extraFieldsModel()[field.key] ??
+                                  field.defaultValue ??
+                                  ''
+                                "
+                                (input)="
+                                  updateExtraField(
+                                    field.key,
+                                    $any($event.target).value
+                                  )
+                                "
+                                class="w-full"
+                                rows="3"
+                              ></textarea>
+                            }
+                            @case ('select') {
+                              <select
+                                [id]="field.key"
+                                class="p-select-native w-full"
+                                [value]="
+                                  extraFieldsModel()[field.key] ??
+                                  field.defaultValue ??
+                                  ''
+                                "
+                                (change)="
+                                  updateExtraField(
+                                    field.key,
+                                    $any($event.target).value
+                                  )
+                                "
+                              >
+                                <option value="">
+                                  {{ field.placeholder ?? 'Select...' }}
+                                </option>
+                                @for (opt of field.options; track opt.value) {
+                                  <option [value]="opt.value">
+                                    {{ opt.label }}
+                                  </option>
+                                }
+                              </select>
+                            }
+                            @case ('checkbox') {
+                              <label class="p-checkbox-native">
+                                <input
+                                  type="checkbox"
+                                  [id]="field.key"
+                                  [checked]="
+                                    extraFieldsModel()[field.key] ??
+                                    field.defaultValue ??
+                                    false
+                                  "
+                                  (change)="
+                                    updateExtraField(
+                                      field.key,
+                                      $any($event.target).checked
+                                    )
+                                  "
+                                />
+                                <span>{{
+                                  field.placeholder ?? field.label
+                                }}</span>
+                              </label>
+                            }
+                            @case ('date') {
+                              <input
+                                pInputText
+                                type="date"
+                                [id]="field.key"
+                                [value]="
+                                  extraFieldsModel()[field.key] ??
+                                  field.defaultValue ??
+                                  ''
+                                "
+                                (input)="
+                                  updateExtraField(
+                                    field.key,
+                                    $any($event.target).value
+                                  )
+                                "
+                                class="w-full"
+                              />
+                            }
+                          }
+                        }
+                      </div>
+                    }
+                  </div>
+                  @if (extraFieldsValidationError()) {
+                    <small class="text-danger block mt-2">{{
+                      extraFieldsValidationError()
+                    }}</small>
+                  }
+                </div>
+              }
+
               @if (companyFeatureEnabled()) {
                 <div class="border-t border-surface pt-6 mt-6">
                   <div class="text-center mb-6">
                     <div class="text-2xl font-medium mb-2 text-color">
                       Company Details
                     </div>
-                    <span class="text-muted-color font-medium"
-                      >Join existing or create new company</span
-                    >
+                    <span class="text-muted-color font-medium">
+                      @if (hasDefaultCompany()) {
+                        You will join the default company
+                      } @else {
+                        Join existing or create new company
+                      }
+                    </span>
                   </div>
 
-                  <div class="mb-4">
-                    <label
-                      class="p-checkbox-native"
-                      (click)="onCreateCompanyToggle()"
-                    >
-                      <input
-                        type="checkbox"
-                        [formField]="companyForm.createNewCompany"
-                      />
-                      <span>Create new company</span>
-                    </label>
-                  </div>
+                  @if (!hasDefaultCompany()) {
+                    <div class="mb-4">
+                      <label
+                        class="p-checkbox-native"
+                        (click)="onCreateCompanyToggle()"
+                      >
+                        <input
+                          type="checkbox"
+                          [formField]="companyForm.createNewCompany"
+                        />
+                        <span>Create new company</span>
+                      </label>
+                    </div>
+                  }
 
                   @if (!companyFormModel().createNewCompany) {
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
@@ -4626,29 +5267,55 @@ class RegisterPageComponent {
                         <label for="companySlug" class="block font-medium mb-2"
                           >Company Code</label
                         >
-                        <input
-                          pInputText
-                          id="companySlug"
-                          [formField]="companyForm.companySlug"
-                          placeholder="Company code/slug"
-                          class="w-full"
-                        />
-                        <small class="text-muted-color"
-                          >Enter company code to join</small
-                        >
+                        @if (hasDefaultCompany()) {
+                          <input
+                            pInputText
+                            id="companySlug"
+                            [value]="defaultCompanySlug()"
+                            class="w-full bg-surface-100"
+                            readonly
+                          />
+                          <small class="text-muted-color"
+                            >Pre-configured company</small
+                          >
+                        } @else {
+                          <input
+                            pInputText
+                            id="companySlug"
+                            [formField]="companyForm.companySlug"
+                            placeholder="Company code/slug"
+                            class="w-full"
+                          />
+                          <small class="text-muted-color"
+                            >Enter company code to join</small
+                          >
+                        }
                       </div>
 
                       <div>
                         <label for="branchSlug" class="block font-medium mb-2"
                           >Branch Code</label
                         >
-                        <input
-                          pInputText
-                          id="branchSlug"
-                          [formField]="companyForm.branchSlug"
-                          placeholder="Branch code (optional)"
-                          class="w-full"
-                        />
+                        @if (hasDefaultBranch()) {
+                          <input
+                            pInputText
+                            id="branchSlug"
+                            [value]="defaultBranchSlug()"
+                            class="w-full bg-surface-100"
+                            readonly
+                          />
+                          <small class="text-muted-color"
+                            >Pre-configured branch</small
+                          >
+                        } @else {
+                          <input
+                            pInputText
+                            id="branchSlug"
+                            [formField]="companyForm.branchSlug"
+                            placeholder="Branch code (optional)"
+                            class="w-full"
+                          />
+                        }
                       </div>
                     </div>
                   } @else {
@@ -4722,9 +5389,9 @@ class RegisterPageComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "component", type: AppFloatingConfigurator, selector: "app-floating-configurator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { 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: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: i9.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "component", type: AppFloatingConfigurator, selector: "app-floating-configurator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RegisterPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: RegisterPageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-register-page',
@@ -4796,6 +5463,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   class="w-full"
                   autocomplete="email"
                 />
+                @if (emailValidationError() && userFormModel().email) {
+                  <small class="text-danger block mt-1">{{
+                    emailValidationError()
+                  }}</small>
+                }
               </div>
 
               <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
@@ -4808,10 +5480,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                     id="password"
                     type="password"
                     [formField]="userForm.password"
-                    placeholder="Min. 8 characters"
+                    placeholder="Min. {{ passwordMinLength() }} characters"
                     class="w-full"
                     autocomplete="new-password"
                   />
+                  @if (passwordValidationError() && userFormModel().password) {
+                    <small class="text-danger block mt-1">{{
+                      passwordValidationError()
+                    }}</small>
+                  }
                 </div>
 
                 <div>
@@ -4835,29 +5512,193 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 </div>
               </div>
 
+              @if (extraFields().length > 0) {
+                <div class="border-t border-surface pt-4 mt-4 mb-4">
+                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    @for (field of extraFields(); track field.key) {
+                      <div [class]="field.containerClass ?? ''">
+                        <label [for]="field.key" class="block font-medium mb-2">
+                          {{ field.label }}{{ field.required ? ' *' : '' }}
+                        </label>
+                        @if (field.component) {
+                          <ng-container
+                            *ngComponentOutlet="field.component; injector: getFieldInjector(field)"
+                          ></ng-container>
+                        } @else if (field.template) {
+                          <ng-container
+                            [ngTemplateOutlet]="field.template"
+                            [ngTemplateOutletContext]="getFieldTemplateContext(field)"
+                          ></ng-container>
+                        } @else {
+                          @switch (field.type) {
+                            @case ('text') {
+                              <input
+                                pInputText
+                                [id]="field.key"
+                                [placeholder]="field.placeholder ?? ''"
+                                [value]="
+                                  extraFieldsModel()[field.key] ??
+                                  field.defaultValue ??
+                                  ''
+                                "
+                                (input)="
+                                  updateExtraField(
+                                    field.key,
+                                    $any($event.target).value
+                                  )
+                                "
+                                class="w-full"
+                              />
+                            }
+                            @case ('number') {
+                              <input
+                                pInputText
+                                type="number"
+                                [id]="field.key"
+                                [placeholder]="field.placeholder ?? ''"
+                                [value]="
+                                  extraFieldsModel()[field.key] ??
+                                  field.defaultValue ??
+                                  ''
+                                "
+                                (input)="
+                                  updateExtraField(
+                                    field.key,
+                                    $any($event.target).valueAsNumber
+                                  )
+                                "
+                                class="w-full"
+                              />
+                            }
+                            @case ('textarea') {
+                              <textarea
+                                pInputTextarea
+                                [id]="field.key"
+                                [placeholder]="field.placeholder ?? ''"
+                                [value]="
+                                  extraFieldsModel()[field.key] ??
+                                  field.defaultValue ??
+                                  ''
+                                "
+                                (input)="
+                                  updateExtraField(
+                                    field.key,
+                                    $any($event.target).value
+                                  )
+                                "
+                                class="w-full"
+                                rows="3"
+                              ></textarea>
+                            }
+                            @case ('select') {
+                              <select
+                                [id]="field.key"
+                                class="p-select-native w-full"
+                                [value]="
+                                  extraFieldsModel()[field.key] ??
+                                  field.defaultValue ??
+                                  ''
+                                "
+                                (change)="
+                                  updateExtraField(
+                                    field.key,
+                                    $any($event.target).value
+                                  )
+                                "
+                              >
+                                <option value="">
+                                  {{ field.placeholder ?? 'Select...' }}
+                                </option>
+                                @for (opt of field.options; track opt.value) {
+                                  <option [value]="opt.value">
+                                    {{ opt.label }}
+                                  </option>
+                                }
+                              </select>
+                            }
+                            @case ('checkbox') {
+                              <label class="p-checkbox-native">
+                                <input
+                                  type="checkbox"
+                                  [id]="field.key"
+                                  [checked]="
+                                    extraFieldsModel()[field.key] ??
+                                    field.defaultValue ??
+                                    false
+                                  "
+                                  (change)="
+                                    updateExtraField(
+                                      field.key,
+                                      $any($event.target).checked
+                                    )
+                                  "
+                                />
+                                <span>{{
+                                  field.placeholder ?? field.label
+                                }}</span>
+                              </label>
+                            }
+                            @case ('date') {
+                              <input
+                                pInputText
+                                type="date"
+                                [id]="field.key"
+                                [value]="
+                                  extraFieldsModel()[field.key] ??
+                                  field.defaultValue ??
+                                  ''
+                                "
+                                (input)="
+                                  updateExtraField(
+                                    field.key,
+                                    $any($event.target).value
+                                  )
+                                "
+                                class="w-full"
+                              />
+                            }
+                          }
+                        }
+                      </div>
+                    }
+                  </div>
+                  @if (extraFieldsValidationError()) {
+                    <small class="text-danger block mt-2">{{
+                      extraFieldsValidationError()
+                    }}</small>
+                  }
+                </div>
+              }
+
               @if (companyFeatureEnabled()) {
                 <div class="border-t border-surface pt-6 mt-6">
                   <div class="text-center mb-6">
                     <div class="text-2xl font-medium mb-2 text-color">
                       Company Details
                     </div>
-                    <span class="text-muted-color font-medium"
-                      >Join existing or create new company</span
-                    >
+                    <span class="text-muted-color font-medium">
+                      @if (hasDefaultCompany()) {
+                        You will join the default company
+                      } @else {
+                        Join existing or create new company
+                      }
+                    </span>
                   </div>
 
-                  <div class="mb-4">
-                    <label
-                      class="p-checkbox-native"
-                      (click)="onCreateCompanyToggle()"
-                    >
-                      <input
-                        type="checkbox"
-                        [formField]="companyForm.createNewCompany"
-                      />
-                      <span>Create new company</span>
-                    </label>
-                  </div>
+                  @if (!hasDefaultCompany()) {
+                    <div class="mb-4">
+                      <label
+                        class="p-checkbox-native"
+                        (click)="onCreateCompanyToggle()"
+                      >
+                        <input
+                          type="checkbox"
+                          [formField]="companyForm.createNewCompany"
+                        />
+                        <span>Create new company</span>
+                      </label>
+                    </div>
+                  }
 
                   @if (!companyFormModel().createNewCompany) {
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
@@ -4865,29 +5706,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         <label for="companySlug" class="block font-medium mb-2"
                           >Company Code</label
                         >
-                        <input
-                          pInputText
-                          id="companySlug"
-                          [formField]="companyForm.companySlug"
-                          placeholder="Company code/slug"
-                          class="w-full"
-                        />
-                        <small class="text-muted-color"
-                          >Enter company code to join</small
-                        >
+                        @if (hasDefaultCompany()) {
+                          <input
+                            pInputText
+                            id="companySlug"
+                            [value]="defaultCompanySlug()"
+                            class="w-full bg-surface-100"
+                            readonly
+                          />
+                          <small class="text-muted-color"
+                            >Pre-configured company</small
+                          >
+                        } @else {
+                          <input
+                            pInputText
+                            id="companySlug"
+                            [formField]="companyForm.companySlug"
+                            placeholder="Company code/slug"
+                            class="w-full"
+                          />
+                          <small class="text-muted-color"
+                            >Enter company code to join</small
+                          >
+                        }
                       </div>
 
                       <div>
                         <label for="branchSlug" class="block font-medium mb-2"
                           >Branch Code</label
                         >
-                        <input
-                          pInputText
-                          id="branchSlug"
-                          [formField]="companyForm.branchSlug"
-                          placeholder="Branch code (optional)"
-                          class="w-full"
-                        />
+                        @if (hasDefaultBranch()) {
+                          <input
+                            pInputText
+                            id="branchSlug"
+                            [value]="defaultBranchSlug()"
+                            class="w-full bg-surface-100"
+                            readonly
+                          />
+                          <small class="text-muted-color"
+                            >Pre-configured branch</small
+                          >
+                        } @else {
+                          <input
+                            pInputText
+                            id="branchSlug"
+                            [formField]="companyForm.branchSlug"
+                            placeholder="Branch code (optional)"
+                            class="w-full"
+                          />
+                        }
                       </div>
                     </div>
                   } @else {
@@ -5036,8 +5903,8 @@ class ResetPasswordPageComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ResetPasswordPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ResetPasswordPageComponent, isStandalone: true, selector: "lib-reset-password-page", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ResetPasswordPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ResetPasswordPageComponent, isStandalone: true, selector: "lib-reset-password-page", ngImport: i0, template: `
     <app-floating-configurator />
     <div class="bg-surface-ground flex items-center justify-center min-h-screen">
       <div class="flex flex-col items-center justify-center w-full max-w-[32rem] px-4">
@@ -5148,9 +6015,9 @@ class ResetPasswordPageComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "component", type: AppFloatingConfigurator, selector: "app-floating-configurator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { 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: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "component", type: AppFloatingConfigurator, selector: "app-floating-configurator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ResetPasswordPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ResetPasswordPageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-reset-password-page',
@@ -5458,8 +6325,8 @@ class UserFormComponent {
     onCancel() {
         this.router.navigate(['/administration/users']);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: UserFormComponent, isStandalone: true, selector: "lib-user-form", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UserFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: UserFormComponent, isStandalone: true, selector: "lib-user-form", ngImport: i0, template: `
     <p-card>
       <ng-template #header>
         <div class="flex justify-between items-center p-4">
@@ -5561,9 +6428,9 @@ class UserFormComponent {
         </div>
       </form>
     </p-card>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UserFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-user-form',
@@ -5771,8 +6638,8 @@ class UserCompanyPermissionDialogComponent {
     onClose() {
         this.closed.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserCompanyPermissionDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: UserCompanyPermissionDialogComponent, isStandalone: true, selector: "lib-user-company-permission-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed", permissionsChanged: "permissionsChanged" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UserCompanyPermissionDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: UserCompanyPermissionDialogComponent, isStandalone: true, selector: "lib-user-company-permission-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed", permissionsChanged: "permissionsChanged" }, ngImport: i0, template: `
     <p-dialog
       [visible]="visible()"
       [modal]="true"
@@ -5823,9 +6690,9 @@ class UserCompanyPermissionDialogComponent {
           [disabled]="isSaving()" />
       </ng-template>
     </p-dialog>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i4$3.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i5$2.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { 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: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i4$2.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i5$1.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: ProgressSpinnerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserCompanyPermissionDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UserCompanyPermissionDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-user-company-permission-dialog',
@@ -6003,8 +6870,8 @@ class UserBranchPermissionDialogComponent {
     onClose() {
         this.closed.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserBranchPermissionDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: UserBranchPermissionDialogComponent, isStandalone: true, selector: "lib-user-branch-permission-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed", permissionsChanged: "permissionsChanged" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UserBranchPermissionDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: UserBranchPermissionDialogComponent, isStandalone: true, selector: "lib-user-branch-permission-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed", permissionsChanged: "permissionsChanged" }, ngImport: i0, template: `
     <p-dialog
       [visible]="visible()"
       [modal]="true"
@@ -6074,9 +6941,9 @@ class UserBranchPermissionDialogComponent {
           [disabled]="isSaving()" />
       </ng-template>
     </p-dialog>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i4$3.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i4$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i5$2.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { 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: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i4$2.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i4$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5$1.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: ProgressSpinnerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserBranchPermissionDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UserBranchPermissionDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-user-branch-permission-dialog',
@@ -6156,31 +7023,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: true }] }], user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: true }] }], closed: [{ type: i0.Output, args: ["closed"] }], permissionsChanged: [{ type: i0.Output, args: ["permissionsChanged"] }] } });
 
-/**
- * User List Component
- * Displays a list of users with CRUD operations.
- */
 class UserListComponent {
-    // Permission constants for template
     USER_PERMISSIONS = USER_PERMISSIONS;
     router = inject(Router);
     appConfig = inject(APP_CONFIG);
     messageService = inject(MessageService);
     confirmationService = inject(ConfirmationService);
     userService = inject(UserApiService);
-    /** Users from service */
+    userListExtension = inject(AUTH_USER_LIST_EXTENSION, { optional: true });
+    userDetailConfig = inject(AUTH_USER_DETAIL_CONFIG, { optional: true });
     users = this.userService.data;
-    /** Loading state from service */
     isLoading = this.userService.isLoading;
-    /** Total count from service */
     total = this.userService.total;
-    /** Whether company feature is enabled */
     companyFeatureEnabled = computed(() => isCompanyFeatureEnabled(this.appConfig), ...(ngDevMode ? [{ debugName: "companyFeatureEnabled" }] : []));
-    /** Dialog visibility */
+    extraColumns = computed(() => {
+        if (!this.userListExtension)
+            return [];
+        const columns = this.userListExtension.getExtraColumns();
+        return columns.sort((a, b) => (a.order ?? 100) - (b.order ?? 100));
+    }, ...(ngDevMode ? [{ debugName: "extraColumns" }] : []));
+    extraActions = computed(() => {
+        if (!this.userListExtension)
+            return [];
+        const actions = this.userListExtension.getExtraActions();
+        return actions.sort((a, b) => (a.order ?? 100) - (b.order ?? 100));
+    }, ...(ngDevMode ? [{ debugName: "extraActions" }] : []));
+    hasUserDetailView = computed(() => !!this.userDetailConfig, ...(ngDevMode ? [{ debugName: "hasUserDetailView" }] : []));
+    tableColspan = computed(() => 6 + this.extraColumns().length, ...(ngDevMode ? [{ debugName: "tableColspan" }] : []));
     showCompanyDialog = signal(false, ...(ngDevMode ? [{ debugName: "showCompanyDialog" }] : []));
     showBranchDialog = signal(false, ...(ngDevMode ? [{ debugName: "showBranchDialog" }] : []));
-    /** Selected user for permission management */
+    showUserDetailDialog = signal(false, ...(ngDevMode ? [{ debugName: "showUserDetailDialog" }] : []));
     selectedUser = signal(null, ...(ngDevMode ? [{ debugName: "selectedUser" }] : []));
+    getFieldValue(user, field) {
+        const parts = field.split('.');
+        let value = user;
+        for (const part of parts) {
+            if (value === null || value === undefined)
+                return undefined;
+            value = value[part];
+        }
+        return value;
+    }
+    isActionVisible(action, user) {
+        return action.isVisible ? action.isVisible(user) : true;
+    }
+    isActionDisabled(action, user) {
+        return action.isDisabled ? action.isDisabled(user) : false;
+    }
+    onExtraAction(action, user) {
+        action.onClick(user);
+    }
+    onViewDetails(user) {
+        if (!this.userDetailConfig)
+            return;
+        if (this.userDetailConfig.viewMode === 'page') {
+            this.router.navigate(['/administration/users', user.id]);
+        }
+        else {
+            this.selectedUser.set(user);
+            this.showUserDetailDialog.set(true);
+        }
+    }
+    closeUserDetailDialog() {
+        this.showUserDetailDialog.set(false);
+        this.selectedUser.set(null);
+    }
     loadUsers() {
         this.userService.fetchList('', {
             pagination: { currentPage: 0, pageSize: 10 },
@@ -6232,8 +7139,8 @@ class UserListComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: UserListComponent, isStandalone: true, selector: "lib-user-list", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UserListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: UserListComponent, isStandalone: true, selector: "lib-user-list", ngImport: i0, template: `
     <p-card>
       <ng-template #header>
         <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 p-4">
@@ -6261,7 +7168,12 @@ class UserListComponent {
             <th>Phone</th>
             <th>Email Verified</th>
             <th>Status</th>
-            <th class="w-[150px]">Actions</th>
+            @for (col of extraColumns(); track col.key) {
+              <th [class]="col.styleClass ?? ''" [style.width]="col.width ?? 'auto'">
+                {{ col.header }}
+              </th>
+            }
+            <th class="w-[180px]">Actions</th>
           </tr>
         </ng-template>
         <ng-template #body let-user>
@@ -6279,8 +7191,26 @@ class UserListComponent {
                 [value]="user.isActive ? 'Active' : 'Inactive'"
                 [severity]="user.isActive ? 'success' : 'danger'" />
             </td>
+            @for (col of extraColumns(); track col.key) {
+              <td [class]="col.styleClass ?? ''">
+                @if (col.template) {
+                  <ng-container [ngTemplateOutlet]="col.template" [ngTemplateOutletContext]="{ $implicit: user }" />
+                } @else if (col.field) {
+                  {{ getFieldValue(user, col.field) ?? '-' }}
+                }
+              </td>
+            }
             <td>
-              <div class="flex gap-2">
+              <div class="flex gap-1 flex-wrap">
+                @if (hasUserDetailView()) {
+                  <p-button
+                    icon="pi pi-eye"
+                    [rounded]="true"
+                    [text]="true"
+                    severity="info"
+                    pTooltip="View Details"
+                    (onClick)="onViewDetails(user)" />
+                }
                 <p-button
                   *hasPermission="USER_PERMISSIONS.UPDATE"
                   icon="pi pi-pencil"
@@ -6307,6 +7237,18 @@ class UserListComponent {
                     pTooltip="Branch Permissions"
                     (onClick)="onManageBranchPermissions(user)" />
                 }
+                @for (action of extraActions(); track action.key) {
+                  @if (isActionVisible(action, user)) {
+                    <p-button
+                      [icon]="action.icon"
+                      [rounded]="true"
+                      [text]="true"
+                      [severity]="action.severity ?? 'secondary'"
+                      [pTooltip]="action.label"
+                      [disabled]="isActionDisabled(action, user)"
+                      (onClick)="onExtraAction(action, user)" />
+                  }
+                }
                 <p-button
                   *hasPermission="USER_PERMISSIONS.DELETE"
                   icon="pi pi-trash"
@@ -6321,7 +7263,7 @@ class UserListComponent {
         </ng-template>
         <ng-template #emptymessage>
           <tr>
-            <td colspan="6" class="text-center py-8">
+            <td [attr.colspan]="tableColspan()" class="text-center py-8">
               No users found. Click "Add User" to create one.
             </td>
           </tr>
@@ -6330,7 +7272,6 @@ class UserListComponent {
       </div>
     </p-card>
 
-    <!-- Permission Dialogs -->
     @if (companyFeatureEnabled()) {
       <lib-user-company-permission-dialog
         [visible]="showCompanyDialog()"
@@ -6344,9 +7285,68 @@ class UserListComponent {
         (closed)="showBranchDialog.set(false)"
         (permissionsChanged)="loadUsers()" />
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: i3$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i4$2.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: TagModule }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "component", type: UserCompanyPermissionDialogComponent, selector: "lib-user-company-permission-dialog", inputs: ["visible", "user"], outputs: ["closed", "permissionsChanged"] }, { kind: "component", type: UserBranchPermissionDialogComponent, selector: "lib-user-branch-permission-dialog", inputs: ["visible", "user"], outputs: ["closed", "permissionsChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+
+    @if (hasUserDetailView() && showUserDetailDialog()) {
+      <p-dialog
+        header="User Details"
+        [visible]="showUserDetailDialog()"
+        [modal]="true"
+        [style]="{ width: userDetailConfig?.width ?? '600px' }"
+        [draggable]="false"
+        [resizable]="false"
+        (onHide)="closeUserDetailDialog()">
+        @if (selectedUser(); as user) {
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div class="flex flex-col gap-2">
+              <label class="font-medium text-muted-color">Name</label>
+              <span class="text-color">{{ user.name }}</span>
+            </div>
+            <div class="flex flex-col gap-2">
+              <label class="font-medium text-muted-color">Email</label>
+              <span class="text-color">{{ user.email }}</span>
+            </div>
+            <div class="flex flex-col gap-2">
+              <label class="font-medium text-muted-color">Phone</label>
+              <span class="text-color">{{ user.phone || '-' }}</span>
+            </div>
+            <div class="flex flex-col gap-2">
+              <label class="font-medium text-muted-color">Status</label>
+              <p-tag
+                [value]="user.isActive ? 'Active' : 'Inactive'"
+                [severity]="user.isActive ? 'success' : 'danger'" />
+            </div>
+            <div class="flex flex-col gap-2">
+              <label class="font-medium text-muted-color">Email Verified</label>
+              <p-tag
+                [value]="user.emailVerified ? 'Verified' : 'Unverified'"
+                [severity]="user.emailVerified ? 'success' : 'warn'" />
+            </div>
+            @for (col of extraColumns(); track col.key) {
+              <div class="flex flex-col gap-2">
+                <label class="font-medium text-muted-color">{{ col.header }}</label>
+                <span class="text-color">{{ getFieldValue(user, col.field ?? col.key) ?? '-' }}</span>
+              </div>
+            }
+          </div>
+          <div class="flex justify-end gap-2 mt-6">
+            @if (userDetailConfig?.allowEdit) {
+              <p-button
+                label="Edit"
+                icon="pi pi-pencil"
+                (onClick)="onEdit(user); closeUserDetailDialog()" />
+            }
+            <p-button
+              label="Close"
+              severity="secondary"
+              [outlined]="true"
+              (onClick)="closeUserDetailDialog()" />
+          </div>
+        }
+      </p-dialog>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: i4$2.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i6.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "component", type: UserCompanyPermissionDialogComponent, selector: "lib-user-company-permission-dialog", inputs: ["visible", "user"], outputs: ["closed", "permissionsChanged"] }, { kind: "component", type: UserBranchPermissionDialogComponent, selector: "lib-user-branch-permission-dialog", inputs: ["visible", "user"], outputs: ["closed", "permissionsChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UserListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-user-list',
@@ -6354,7 +7354,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                     imports: [
                         AngularModule,
                         PrimeModule,
-                        TagModule,
                         HasPermissionDirective,
                         UserCompanyPermissionDialogComponent,
                         UserBranchPermissionDialogComponent,
@@ -6387,7 +7386,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             <th>Phone</th>
             <th>Email Verified</th>
             <th>Status</th>
-            <th class="w-[150px]">Actions</th>
+            @for (col of extraColumns(); track col.key) {
+              <th [class]="col.styleClass ?? ''" [style.width]="col.width ?? 'auto'">
+                {{ col.header }}
+              </th>
+            }
+            <th class="w-[180px]">Actions</th>
           </tr>
         </ng-template>
         <ng-template #body let-user>
@@ -6405,8 +7409,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 [value]="user.isActive ? 'Active' : 'Inactive'"
                 [severity]="user.isActive ? 'success' : 'danger'" />
             </td>
+            @for (col of extraColumns(); track col.key) {
+              <td [class]="col.styleClass ?? ''">
+                @if (col.template) {
+                  <ng-container [ngTemplateOutlet]="col.template" [ngTemplateOutletContext]="{ $implicit: user }" />
+                } @else if (col.field) {
+                  {{ getFieldValue(user, col.field) ?? '-' }}
+                }
+              </td>
+            }
             <td>
-              <div class="flex gap-2">
+              <div class="flex gap-1 flex-wrap">
+                @if (hasUserDetailView()) {
+                  <p-button
+                    icon="pi pi-eye"
+                    [rounded]="true"
+                    [text]="true"
+                    severity="info"
+                    pTooltip="View Details"
+                    (onClick)="onViewDetails(user)" />
+                }
                 <p-button
                   *hasPermission="USER_PERMISSIONS.UPDATE"
                   icon="pi pi-pencil"
@@ -6433,6 +7455,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                     pTooltip="Branch Permissions"
                     (onClick)="onManageBranchPermissions(user)" />
                 }
+                @for (action of extraActions(); track action.key) {
+                  @if (isActionVisible(action, user)) {
+                    <p-button
+                      [icon]="action.icon"
+                      [rounded]="true"
+                      [text]="true"
+                      [severity]="action.severity ?? 'secondary'"
+                      [pTooltip]="action.label"
+                      [disabled]="isActionDisabled(action, user)"
+                      (onClick)="onExtraAction(action, user)" />
+                  }
+                }
                 <p-button
                   *hasPermission="USER_PERMISSIONS.DELETE"
                   icon="pi pi-trash"
@@ -6447,7 +7481,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         </ng-template>
         <ng-template #emptymessage>
           <tr>
-            <td colspan="6" class="text-center py-8">
+            <td [attr.colspan]="tableColspan()" class="text-center py-8">
               No users found. Click "Add User" to create one.
             </td>
           </tr>
@@ -6456,7 +7490,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
       </div>
     </p-card>
 
-    <!-- Permission Dialogs -->
     @if (companyFeatureEnabled()) {
       <lib-user-company-permission-dialog
         [visible]="showCompanyDialog()"
@@ -6470,6 +7503,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         (closed)="showBranchDialog.set(false)"
         (permissionsChanged)="loadUsers()" />
     }
+
+    @if (hasUserDetailView() && showUserDetailDialog()) {
+      <p-dialog
+        header="User Details"
+        [visible]="showUserDetailDialog()"
+        [modal]="true"
+        [style]="{ width: userDetailConfig?.width ?? '600px' }"
+        [draggable]="false"
+        [resizable]="false"
+        (onHide)="closeUserDetailDialog()">
+        @if (selectedUser(); as user) {
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div class="flex flex-col gap-2">
+              <label class="font-medium text-muted-color">Name</label>
+              <span class="text-color">{{ user.name }}</span>
+            </div>
+            <div class="flex flex-col gap-2">
+              <label class="font-medium text-muted-color">Email</label>
+              <span class="text-color">{{ user.email }}</span>
+            </div>
+            <div class="flex flex-col gap-2">
+              <label class="font-medium text-muted-color">Phone</label>
+              <span class="text-color">{{ user.phone || '-' }}</span>
+            </div>
+            <div class="flex flex-col gap-2">
+              <label class="font-medium text-muted-color">Status</label>
+              <p-tag
+                [value]="user.isActive ? 'Active' : 'Inactive'"
+                [severity]="user.isActive ? 'success' : 'danger'" />
+            </div>
+            <div class="flex flex-col gap-2">
+              <label class="font-medium text-muted-color">Email Verified</label>
+              <p-tag
+                [value]="user.emailVerified ? 'Verified' : 'Unverified'"
+                [severity]="user.emailVerified ? 'success' : 'warn'" />
+            </div>
+            @for (col of extraColumns(); track col.key) {
+              <div class="flex flex-col gap-2">
+                <label class="font-medium text-muted-color">{{ col.header }}</label>
+                <span class="text-color">{{ getFieldValue(user, col.field ?? col.key) ?? '-' }}</span>
+              </div>
+            }
+          </div>
+          <div class="flex justify-end gap-2 mt-6">
+            @if (userDetailConfig?.allowEdit) {
+              <p-button
+                label="Edit"
+                icon="pi pi-pencil"
+                (onClick)="onEdit(user); closeUserDetailDialog()" />
+            }
+            <p-button
+              label="Close"
+              severity="secondary"
+              [outlined]="true"
+              (onClick)="closeUserDetailDialog()" />
+          </div>
+        }
+      </p-dialog>
+    }
   `,
                 }]
         }] });
@@ -6586,8 +7678,8 @@ class VerifyEmailPageComponent {
         this.submittedEmail.set(email);
         this.resendSuccess.set(true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: VerifyEmailPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: VerifyEmailPageComponent, isStandalone: true, selector: "lib-verify-email-page", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: VerifyEmailPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: VerifyEmailPageComponent, isStandalone: true, selector: "lib-verify-email-page", ngImport: i0, template: `
     <app-floating-configurator />
     <div class="bg-surface-ground flex items-center justify-center min-h-screen">
       <div class="flex flex-col items-center justify-center w-full max-w-[32rem] px-4">
@@ -6711,9 +7803,9 @@ class VerifyEmailPageComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "component", type: AppFloatingConfigurator, selector: "app-floating-configurator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { 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: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "component", type: AppFloatingConfigurator, selector: "app-floating-configurator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: VerifyEmailPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: VerifyEmailPageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-verify-email-page',
@@ -6861,5 +7953,5 @@ var verifyEmailPage_component = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { ADMINISTRATION_ROUTES, AUTH_ENDPOINTS, AUTH_ROUTES, AdministrationPageComponent, AuthApiService, AuthCompanyApiProviderAdapter, AuthInitService, AuthLayoutApiAdapter, AuthLayoutStateAdapter, AuthStateProviderAdapter, AuthStateService, AuthUserPermissionProviderAdapter, AuthUserProviderAdapter, BranchApiService, BranchFormComponent, BranchListComponent, CompanyApiService, CompanyFormComponent, CompanyListComponent, ForgotPasswordPageComponent, LoginPageComponent, PROFILE_ROUTES, ProfilePageComponent, RegisterPageComponent, ResetPasswordPageComponent, TokenRefreshStateService, UserApiService, UserBranchPermissionDialogComponent, UserCompanyPermissionDialogComponent, UserFormComponent, UserListComponent, UserPermissionApiService, VerifyEmailPageComponent, authGuard, authInterceptor, companyFeatureGuard, guestGuard, isCompanySelectionResponse, isEmailVerificationRequired, isEndpoint, isLoginResponse, provideAuthLayoutIntegration, provideAuthProviders, tokenRefreshInterceptor };
+export { ADMINISTRATION_ROUTES, AUTH_ENDPOINTS, AUTH_PROFILE_EXTENSION, AUTH_REGISTRATION_EXTENSION, AUTH_ROUTES, AUTH_USER_DETAIL_CONFIG, AUTH_USER_LIST_EXTENSION, AUTH_VALIDATION_CONFIG, AdministrationPageComponent, AuthApiService, AuthCompanyApiProviderAdapter, AuthInitService, AuthLayoutApiAdapter, AuthLayoutStateAdapter, AuthStateProviderAdapter, AuthStateService, AuthUserPermissionProviderAdapter, AuthUserProviderAdapter, BranchApiService, BranchFormComponent, BranchListComponent, CompanyApiService, CompanyFormComponent, CompanyListComponent, ForgotPasswordPageComponent, LoginPageComponent, PROFILE_FIELD_CONTEXT, PROFILE_ROUTES, ProfilePageComponent, REGISTRATION_FIELD_CONTEXT, RegisterPageComponent, ResetPasswordPageComponent, TokenRefreshStateService, UserApiService, UserBranchPermissionDialogComponent, UserCompanyPermissionDialogComponent, UserFormComponent, UserListComponent, UserPermissionApiService, VerifyEmailPageComponent, authGuard, authInterceptor, companyFeatureGuard, emailFeatureGuard, guestGuard, isCompanySelectionResponse, isEmailVerificationRequired, isEndpoint, isLoginResponse, provideAuthLayoutIntegration, provideAuthProviders, signUpFeatureGuard, tokenRefreshInterceptor, validateEmail, validatePassword };
 //# sourceMappingURL=flusys-ng-auth.mjs.map