@flusys/ng-auth 5.2.0 → 5.3.0

package/fesm2022/flusys-ng-auth.mjs

@@ -1,11 +1,11 @@
 import { HttpClient } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { inject, Injectable, signal, computed, effect, PLATFORM_ID, InjectionToken, Component, untracked, DestroyRef, input, Injector, output, resource, makeStateKey, TransferState } from '@angular/core';
+import { inject, Injectable, signal, computed, effect, PLATFORM_ID, InjectionToken, Component, untracked, viewChild, DestroyRef, input, Injector, output, resource, makeStateKey, TransferState } from '@angular/core';
 import { APP_CONFIG, getServiceUrl, isCompanyFeatureEnabled, isServiceEnabled, isSignUpEnabled, getPermissionMode, getDefaultCompanySlug, getDefaultBranchSlug } from '@flusys/ng-core';
 import { of, timeout, switchMap, map, tap, catchError, shareReplay, finalize, BehaviorSubject, throwError, filter, take, from, forkJoin, firstValueFrom } from 'rxjs';
 import * as i2$1 from '@angular/router';
 import { Router, RouterOutlet, RouterLink, RouterLinkActive, ActivatedRoute } from '@angular/router';
-import { PlatformService, TranslateService, ApiResourceService, CookieService, resolveTranslationModule, SHARED_MESSAGES, permissionGuard, USER_PERMISSIONS, COMPANY_PERMISSIONS, BRANCH_PERMISSIONS, USER_PROVIDER, COMPANY_API_PROVIDER, USER_PERMISSION_PROVIDER, AUTH_STATE_PROVIDER, PermissionValidatorService, TranslatePipe, AngularModule, PrimeModule, HasPermissionDirective, FileUrlService, FILE_PROVIDER, PROFILE_PERMISSION_PROVIDER, FileUploaderComponent } from '@flusys/ng-shared';
+import { PlatformService, TranslateService, ApiResourceService, CookieService, resolveTranslationModule, SHARED_MESSAGES, permissionGuard, USER_PERMISSIONS, COMPANY_PERMISSIONS, BRANCH_PERMISSIONS, USER_PROVIDER, COMPANY_API_PROVIDER, USER_PERMISSION_PROVIDER, AUTH_STATE_PROVIDER, PermissionValidatorService, TranslatePipe, AngularModule, PrimeModule, HasPermissionDirective, BaseFormComponent, BaseListComponent, BaseListTemplateDirective, FileUrlService, FILE_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';
@@ -2399,736 +2399,218 @@ var branchList_component = /*#__PURE__*/Object.freeze({
     BranchListComponent: BranchListComponent
 });
 
-/**
- * Company Form Component
- * Handles creating and editing companies.
- */
-class CompanyFormComponent {
-    router = inject(Router);
-    route = inject(ActivatedRoute);
-    messageService = inject(MessageService);
-    companyService = inject(CompanyApiService);
-    translateAdapter = inject(TranslateService, {
-        optional: true,
-    });
-    translate(key, vars) {
-        return this.translateAdapter?.translate(key, vars) ?? key;
-    }
-    // Route params as signal
-    routeParams = toSignal(this.route.paramMap);
-    /** Loading state */
-    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    /** Existing company data when editing */
-    existingCompany = signal(null, ...(ngDevMode ? [{ debugName: "existingCompany" }] : []));
-    /** Whether in edit mode */
-    isEditMode = computed(() => !!this.existingCompany(), ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
-    // ============================================
-    // Form (Signal Forms)
-    // ============================================
-    /** Form model */
-    formModel = signal({
-        name: '',
-        slug: '',
-        email: '',
-        phone: '',
-        website: '',
-        address: '',
-        isActive: true,
-    }, ...(ngDevMode ? [{ debugName: "formModel" }] : []));
-    /** Form with validation schema */
-    companyForm = form(this.formModel, (f) => {
-        required(f.name, { message: this.translate('shared.name.required') });
-        required(f.slug, {
-            message: this.translate('administrative.company.slug.required'),
-        });
-    });
-    /** Check if form is valid */
-    isFormValid = computed(() => {
-        const model = this.formModel();
-        return model.name.trim().length > 0 && model.slug.trim().length > 0;
-    }, ...(ngDevMode ? [{ debugName: "isFormValid" }] : []));
-    constructor() {
-        // Effect to handle route-based initialization
-        effect(() => {
-            const params = this.routeParams();
-            if (!params)
-                return;
-            const id = params.get('id');
-            if (id && id !== 'new') {
-                this.loadCompany(id);
-            }
-        });
-    }
-    async loadCompany(id) {
-        this.isLoading.set(true);
-        try {
-            const response = await this.companyService.findById(id);
-            if (response.success && response.data) {
-                this.existingCompany.set(response.data);
-                this.formModel.set({
-                    name: response.data.name,
-                    slug: response.data.slug,
-                    email: response.data.email || '',
-                    phone: response.data.phone || '',
-                    website: response.data.website || '',
-                    address: response.data.address || '',
-                    isActive: response.data.isActive,
-                });
-            }
-        }
-        catch {
-            // Error toast handled by global interceptor
-            this.router.navigate(['/administration/company']);
-        }
-        finally {
-            this.isLoading.set(false);
-        }
-    }
-    generateSlug() {
-        const model = this.formModel();
-        if (!model.slug && model.name) {
-            const slug = model.name
-                .toLowerCase()
-                .replace(/[^a-z0-9]+/g, '-')
-                .replace(/^-|-$/g, '');
-            this.formModel.update((m) => ({ ...m, slug }));
-        }
-    }
-    async onSubmit() {
-        if (!this.isFormValid()) {
-            this.messageService.add({
-                severity: 'error',
-                summary: this.translate('shared.validation.error'),
-                detail: this.translate('shared.fill.required.fields'),
-            });
-            return;
-        }
-        this.isLoading.set(true);
-        try {
-            const isEdit = this.isEditMode() && this.existingCompany();
-            let response;
-            if (isEdit) {
-                const updateData = {
-                    id: this.existingCompany().id,
-                    ...this.buildCompanyData(),
-                };
-                response = await this.companyService.update(updateData);
-            }
-            else {
-                response = await this.companyService.insert(this.buildCompanyData());
-            }
-            this.messageService.add({
-                severity: 'success',
-                summary: this.translate('shared.success'),
-                detail: response.messageKey
-                    ? this.translate(response.messageKey, response.messageVariables)
-                    : (response.message ?? ''),
-            });
-            this.router.navigate(['/administration/company']);
-        }
-        catch {
-            // Error toast handled by global interceptor
-        }
-        finally {
-            this.isLoading.set(false);
-        }
-    }
-    onCancel() {
-        this.router.navigate(['/administration/company']);
-    }
-    /** Build company data from form model */
-    buildCompanyData() {
-        const model = this.formModel();
-        return {
-            name: model.name,
-            slug: model.slug,
-            email: model.email || undefined,
-            phone: model.phone || undefined,
-            website: model.website || undefined,
-            address: model.address || undefined,
-            isActive: model.isActive,
-        };
-    }
-    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">
-          <h2 class="text-xl font-semibold m-0">
-            {{
-              isEditMode()
-                ? ('administrative.company.edit' | translate)
-                : ('administrative.company.new' | translate)
-            }}
-          </h2>
-        </div>
-      </ng-template>
-
-      <form
-        (ngSubmit)="onSubmit()"
-        class="grid grid-cols-1 md:grid-cols-2 gap-4"
-      >
-        <!-- Name -->
-        <div class="flex flex-col gap-2">
-          <label for="name" class="font-medium"
-            >{{ 'administrative.company.name' | translate }} *</label
-          >
-          <input
-            pInputText
-            id="name"
-            [formField]="companyForm.name"
-            (blur)="generateSlug()"
-            [placeholder]="
-              'administrative.company.name.placeholder' | translate
-            "
-          />
-        </div>
-
-        <!-- Slug -->
-        <div class="flex flex-col gap-2">
-          <label for="slug" class="font-medium"
-            >{{ 'administrative.company.slug' | translate }} *</label
-          >
-          <input
-            pInputText
-            id="slug"
-            [formField]="companyForm.slug"
-            [placeholder]="
-              'administrative.company.slug.placeholder' | translate
-            "
-          />
-        </div>
-
-        <!-- Email -->
-        <div class="flex flex-col gap-2">
-          <label for="email" class="font-medium">{{
-            'administrative.email.label' | translate
-          }}</label>
-          <input
-            pInputText
-            id="email"
-            type="email"
-            [formField]="companyForm.email"
-            [placeholder]="'administrative.email.placeholder' | translate"
-          />
-        </div>
-
-        <!-- Phone -->
-        <div class="flex flex-col gap-2">
-          <label for="phone" class="font-medium">{{
-            'administrative.phone.label' | translate
-          }}</label>
-          <input
-            pInputText
-            id="phone"
-            [formField]="companyForm.phone"
-            [placeholder]="'administrative.phone.placeholder' | translate"
-          />
-        </div>
-
-        <!-- Website -->
-        <div class="flex flex-col gap-2">
-          <label for="website" class="font-medium">{{
-            'administrative.company.website' | translate
-          }}</label>
-          <input
-            pInputText
-            id="website"
-            [formField]="companyForm.website"
-            [placeholder]="
-              'administrative.company.website.placeholder' | translate
-            "
-          />
-        </div>
-
-        <!-- Is Active -->
-        <div class="flex items-center pt-6">
-          <label class="p-checkbox-native">
-            <input type="checkbox" [formField]="companyForm.isActive" />
-            <span>{{ 'shared.active' | translate }}</span>
-          </label>
-        </div>
-
-        <!-- Address -->
-        <div class="flex flex-col gap-2 md:col-span-2">
-          <label for="address" class="font-medium">{{
-            'administrative.address.label' | translate
-          }}</label>
-          <textarea
-            id="address"
-            class="p-inputtextarea p-inputtext p-component"
-            [formField]="companyForm.address"
-            [placeholder]="'administrative.address.placeholder' | translate"
-            rows="3"
-          ></textarea>
-        </div>
-
-        <!-- Actions -->
-        <div class="flex justify-end gap-4 md:col-span-2 pt-4">
-          <p-button
-            [label]="'shared.cancel' | translate"
-            severity="secondary"
-            [outlined]="true"
-            (onClick)="onCancel()"
-          />
-          <p-button
-            [label]="
-              isEditMode()
-                ? ('shared.update' | translate)
-                : ('shared.create' | translate)
-            "
-            type="submit"
-            [loading]="isLoading()"
-            [disabled]="!isFormValid() || isLoading()"
-          />
-        </div>
-      </form>
-    </p-card>
-  `, 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"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CompanyFormComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-company-form',
-                    imports: [AngularModule, PrimeModule, FormField, TranslatePipe],
-                    template: `
-    <p-card>
-      <ng-template #header>
-        <div class="flex justify-between items-center p-4">
-          <h2 class="text-xl font-semibold m-0">
-            {{
-              isEditMode()
-                ? ('administrative.company.edit' | translate)
-                : ('administrative.company.new' | translate)
-            }}
-          </h2>
-        </div>
-      </ng-template>
-
-      <form
-        (ngSubmit)="onSubmit()"
-        class="grid grid-cols-1 md:grid-cols-2 gap-4"
-      >
-        <!-- Name -->
-        <div class="flex flex-col gap-2">
-          <label for="name" class="font-medium"
-            >{{ 'administrative.company.name' | translate }} *</label
-          >
-          <input
-            pInputText
-            id="name"
-            [formField]="companyForm.name"
-            (blur)="generateSlug()"
-            [placeholder]="
-              'administrative.company.name.placeholder' | translate
-            "
-          />
-        </div>
-
-        <!-- Slug -->
-        <div class="flex flex-col gap-2">
-          <label for="slug" class="font-medium"
-            >{{ 'administrative.company.slug' | translate }} *</label
-          >
-          <input
-            pInputText
-            id="slug"
-            [formField]="companyForm.slug"
-            [placeholder]="
-              'administrative.company.slug.placeholder' | translate
-            "
-          />
-        </div>
-
-        <!-- Email -->
-        <div class="flex flex-col gap-2">
-          <label for="email" class="font-medium">{{
-            'administrative.email.label' | translate
-          }}</label>
-          <input
-            pInputText
-            id="email"
-            type="email"
-            [formField]="companyForm.email"
-            [placeholder]="'administrative.email.placeholder' | translate"
-          />
-        </div>
-
-        <!-- Phone -->
-        <div class="flex flex-col gap-2">
-          <label for="phone" class="font-medium">{{
-            'administrative.phone.label' | translate
-          }}</label>
-          <input
-            pInputText
-            id="phone"
-            [formField]="companyForm.phone"
-            [placeholder]="'administrative.phone.placeholder' | translate"
-          />
-        </div>
-
-        <!-- Website -->
-        <div class="flex flex-col gap-2">
-          <label for="website" class="font-medium">{{
-            'administrative.company.website' | translate
-          }}</label>
-          <input
-            pInputText
-            id="website"
-            [formField]="companyForm.website"
-            [placeholder]="
-              'administrative.company.website.placeholder' | translate
-            "
-          />
-        </div>
-
-        <!-- Is Active -->
-        <div class="flex items-center pt-6">
-          <label class="p-checkbox-native">
-            <input type="checkbox" [formField]="companyForm.isActive" />
-            <span>{{ 'shared.active' | translate }}</span>
-          </label>
-        </div>
-
-        <!-- Address -->
-        <div class="flex flex-col gap-2 md:col-span-2">
-          <label for="address" class="font-medium">{{
-            'administrative.address.label' | translate
-          }}</label>
-          <textarea
-            id="address"
-            class="p-inputtextarea p-inputtext p-component"
-            [formField]="companyForm.address"
-            [placeholder]="'administrative.address.placeholder' | translate"
-            rows="3"
-          ></textarea>
-        </div>
-
-        <!-- Actions -->
-        <div class="flex justify-end gap-4 md:col-span-2 pt-4">
-          <p-button
-            [label]="'shared.cancel' | translate"
-            severity="secondary"
-            [outlined]="true"
-            (onClick)="onCancel()"
-          />
-          <p-button
-            [label]="
-              isEditMode()
-                ? ('shared.update' | translate)
-                : ('shared.create' | translate)
-            "
-            type="submit"
-            [loading]="isLoading()"
-            [disabled]="!isFormValid() || isLoading()"
-          />
-        </div>
-      </form>
-    </p-card>
+class CompanyFormComponent {
+    route = inject(ActivatedRoute);
+    translateAdapter = inject(TranslateService, { optional: true });
+    companyService = inject(CompanyApiService);
+    formRef = viewChild(BaseFormComponent, ...(ngDevMode ? [{ debugName: "formRef" }] : []));
+    routeParams = toSignal(this.route.paramMap);
+    editId = computed(() => {
+        const id = this.routeParams()?.get('id');
+        return id && id !== 'new' ? id : null;
+    }, ...(ngDevMode ? [{ debugName: "editId" }] : []));
+    fields = [
+        {
+            key: 'name',
+            type: 'text',
+            label: this.t('administrative.company.name'),
+            placeholder: this.t('administrative.company.name.placeholder'),
+            required: true,
+        },
+        {
+            key: 'slug',
+            type: 'text',
+            label: this.t('administrative.company.slug'),
+            placeholder: this.t('administrative.company.slug.placeholder'),
+            required: true,
+        },
+        {
+            key: 'email',
+            type: 'email',
+            label: this.t('administrative.email.label'),
+            placeholder: this.t('administrative.email.placeholder'),
+        },
+        {
+            key: 'phone',
+            type: 'text',
+            label: this.t('administrative.phone.label'),
+            placeholder: this.t('administrative.phone.placeholder'),
+        },
+        {
+            key: 'website',
+            type: 'text',
+            label: this.t('administrative.company.website'),
+            placeholder: this.t('administrative.company.website.placeholder'),
+        },
+        {
+            key: 'isActive',
+            type: 'toggle',
+            label: this.t('shared.active'),
+        },
+        {
+            key: 'address',
+            type: 'textarea',
+            label: this.t('administrative.address.label'),
+            placeholder: this.t('administrative.address.placeholder'),
+            fullWidth: true,
+            rows: 3,
+        },
+    ];
+    buildRequest = (data, editId) => ({
+        ...(editId ? { id: editId } : {}),
+        name: data['name'],
+        slug: data['slug'],
+        email: data['email'] || undefined,
+        phone: data['phone'] || undefined,
+        website: data['website'] || undefined,
+        address: data['address'] || undefined,
+        isActive: data['isActive'],
+    });
+    toFormModel = (entity) => {
+        const c = entity;
+        return {
+            name: c.name,
+            slug: c.slug,
+            email: c.email ?? '',
+            phone: c.phone ?? '',
+            website: c.website ?? '',
+            address: c.address ?? '',
+            isActive: c.isActive,
+        };
+    };
+    onFormValueChange(data) {
+        const name = data['name'] ?? '';
+        const slug = data['slug'] ?? '';
+        if (name && !slug) {
+            this.formRef()?.setFieldValue('slug', name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, ''));
+        }
+    }
+    t(key, vars) {
+        return this.translateAdapter?.translate(key, vars) ?? key;
+    }
+    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: "17.2.0", version: "21.1.5", type: CompanyFormComponent, isStandalone: true, selector: "lib-company-form", viewQueries: [{ propertyName: "formRef", first: true, predicate: BaseFormComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <lib-base-form
+      [fields]="fields"
+      [service]="companyService"
+      [editId]="editId()"
+      [cancelRoute]="'/administration/company'"
+      [navigateOnSuccess]="'/administration/company'"
+      [createTitle]="'administrative.company.new' | translate"
+      [editTitle]="'administrative.company.edit' | translate"
+      [mapToRequest]="buildRequest"
+      [mapFromEntity]="toFormModel"
+      (onValueChange)="onFormValueChange($event)"
+    />
+  `, isInline: true, dependencies: [{ kind: "component", type: BaseFormComponent, selector: "lib-base-form", inputs: ["fields", "title", "createTitle", "editTitle", "columns", "submitLabel", "cancelLabel", "isLoading", "isEditMode", "initialValue", "service", "editId", "cancelRoute", "navigateOnSuccess", "mapToRequest", "mapFromEntity"], outputs: ["onSubmit", "onCancel", "onValueChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CompanyFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-company-form',
+                    imports: [BaseFormComponent, TranslatePipe],
+                    template: `
+    <lib-base-form
+      [fields]="fields"
+      [service]="companyService"
+      [editId]="editId()"
+      [cancelRoute]="'/administration/company'"
+      [navigateOnSuccess]="'/administration/company'"
+      [createTitle]="'administrative.company.new' | translate"
+      [editTitle]="'administrative.company.edit' | translate"
+      [mapToRequest]="buildRequest"
+      [mapFromEntity]="toFormModel"
+      (onValueChange)="onFormValueChange($event)"
+    />
   `,
                 }]
-        }], ctorParameters: () => [] });
+        }], propDecorators: { formRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BaseFormComponent), { isSignal: true }] }] } });
 
 var companyForm_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
     CompanyFormComponent: CompanyFormComponent
 });
 
-/**
- * Company List Component
- * Displays a list of companies with CRUD operations.
- * Only visible when company feature is enabled.
- */
 class CompanyListComponent {
-    // Permission constants for template
-    COMPANY_PERMISSIONS = COMPANY_PERMISSIONS;
-    BRANCH_PERMISSIONS = BRANCH_PERMISSIONS;
+    permissionValidator = inject(PermissionValidatorService);
+    translateAdapter = inject(TranslateService, { optional: true });
     router = inject(Router);
-    messageService = inject(MessageService);
-    confirmationService = inject(ConfirmationService);
     companyService = inject(CompanyApiService);
-    translateAdapter = inject(TranslateService, {
-        optional: true,
-    });
-    translate(key, vars) {
-        return this.translateAdapter?.translate(key, vars) ?? key;
-    }
-    /** Companies from service */
-    companies = this.companyService.data;
-    /** Loading state from service */
-    isLoading = this.companyService.isLoading;
-    /** Total count from service */
-    total = this.companyService.total;
-    onLazyLoad(event) {
-        const first = event.first ?? 0;
-        const rows = event.rows ?? 10;
-        const page = Math.floor(first / rows);
-        this.companyService.fetchList('', {
-            pagination: { currentPage: page, pageSize: rows },
-        });
-    }
-    onCreate() {
-        this.router.navigate(['/administration/company/new']);
-    }
-    onEdit(company) {
-        this.router.navigate(['/administration/company', company.id]);
-    }
-    onViewBranches(company) {
-        this.router.navigate(['/administration/branch'], {
-            queryParams: { companyId: company.id },
-        });
-    }
-    onDelete(company) {
-        this.confirmationService.confirm({
-            message: this.translate('shared.confirm.delete.item', {
-                name: company.name,
+    canCreate = computed(() => this.permissionValidator.hasPermission(COMPANY_PERMISSIONS.CREATE), ...(ngDevMode ? [{ debugName: "canCreate" }] : []));
+    canEditFn = (_item) => this.permissionValidator.hasPermission(COMPANY_PERMISSIONS.UPDATE);
+    canDeleteFn = (item) => !item.readOnly && this.permissionValidator.hasPermission(COMPANY_PERMISSIONS.DELETE);
+    viewBranchesAction = [{
+            icon: 'pi pi-building',
+            tooltip: 'administrative.branch.view.branches',
+            severity: 'secondary',
+            show: () => this.permissionValidator.hasPermission(BRANCH_PERMISSIONS.READ),
+            handler: (c) => this.router.navigate(['/administration/branch'], {
+                queryParams: { companyId: c.id },
             }),
-            header: this.translate('administrative.company.delete.title'),
-            icon: 'pi pi-exclamation-triangle',
-            acceptButtonStyleClass: 'p-button-danger',
-            accept: async () => {
-                try {
-                    const response = await this.companyService.delete({
-                        id: company.id,
-                        type: 'delete',
-                    });
-                    this.messageService.add({
-                        severity: 'success',
-                        summary: this.translate('shared.success'),
-                        detail: response?.messageKey
-                            ? this.translate(response.messageKey, response.messageVariables)
-                            : (response?.message ?? ''),
-                    });
-                    this.companyService.reload();
-                }
-                catch {
-                    // Error toast handled by global interceptor
-                }
-            },
-        });
+        }];
+    columns = [
+        { field: 'name', header: this.t('administrative.company.name'), type: 'text' },
+        { field: 'slug', header: this.t('administrative.company.slug'), type: 'text' },
+        { field: 'email', header: this.t('administrative.email.label'), type: 'text' },
+        { field: 'phone', header: this.t('administrative.phone.label'), type: 'text' },
+        { field: 'isActive', header: this.t('shared.status'), type: 'custom' },
+    ];
+    asCompany(item) {
+        return item;
+    }
+    t(key) {
+        return this.translateAdapter?.translate(key) ?? key;
     }
     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"
-        >
-          <h2 class="text-xl font-semibold m-0">
-            {{ 'administrative.company.title' | translate }}
-          </h2>
-          <p-button
-            *hasPermission="COMPANY_PERMISSIONS.CREATE"
-            [label]="'administrative.company.add' | translate"
-            icon="pi pi-plus"
-            (onClick)="onCreate()"
-          />
-        </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: CompanyListComponent, isStandalone: true, selector: "lib-company-list", ngImport: i0, template: `
+    <lib-base-list
+      [columns]="columns"
+      [actions]="viewBranchesAction"
+      [service]="companyService"
+      [title]="'administrative.company.title' | translate"
+      [showCreateButton]="canCreate()"
+      [createButtonLabel]="'administrative.company.add' | translate"
+      [createRoute]="'/administration/company/new'"
+      [editRoute]="'/administration/company'"
+      [deleteConfirmField]="'name'"
+      [canEdit]="canEditFn"
+      [canDelete]="canDeleteFn"
+    >
+      <ng-template baseListTemplate="isActive" let-item>
+        <p-tag
+          [value]="asCompany(item).isActive ? ('shared.active' | translate) : ('shared.inactive' | translate)"
+          [severity]="asCompany(item).isActive ? 'success' : 'danger'"
+        />
       </ng-template>
-
-      <div class="overflow-x-auto">
-        <p-table
-          [value]="companies()"
-          [loading]="isLoading()"
-          [paginator]="total() > 0"
-          [rows]="10"
-          [rowsPerPageOptions]="[10, 25, 50]"
-          [totalRecords]="total()"
-          [lazy]="true"
-          (onLazyLoad)="onLazyLoad($event)"
-          [scrollable]="true"
-          styleClass="p-datatable-striped"
-        >
-          <ng-template #header>
-            <tr>
-              <th>{{ 'administrative.company.name' | translate }}</th>
-              <th>{{ 'administrative.company.slug' | translate }}</th>
-              <th>{{ 'administrative.email.label' | translate }}</th>
-              <th>{{ 'administrative.phone.label' | translate }}</th>
-              <th>{{ 'shared.status' | translate }}</th>
-              <th class="w-[150px]">{{ 'shared.actions' | translate }}</th>
-            </tr>
-          </ng-template>
-          <ng-template #body let-company>
-            <tr>
-              <td>{{ company.name }}</td>
-              <td>{{ company.slug }}</td>
-              <td>{{ company.email || '-' }}</td>
-              <td>{{ company.phone || '-' }}</td>
-              <td>
-                <p-tag
-                  [value]="
-                    company.isActive
-                      ? ('shared.active' | translate)
-                      : ('shared.inactive' | translate)
-                  "
-                  [severity]="company.isActive ? 'success' : 'danger'"
-                />
-              </td>
-              <td>
-                <div class="flex gap-2">
-                  <p-button
-                    *hasPermission="COMPANY_PERMISSIONS.UPDATE"
-                    icon="pi pi-pencil"
-                    [rounded]="true"
-                    [text]="true"
-                    severity="info"
-                    [pTooltip]="'shared.edit' | translate"
-                    (onClick)="onEdit(company)"
-                  />
-                  <p-button
-                    *hasPermission="BRANCH_PERMISSIONS.READ"
-                    icon="pi pi-building"
-                    [rounded]="true"
-                    [text]="true"
-                    severity="secondary"
-                    [pTooltip]="
-                      'administrative.branch.view.branches' | translate
-                    "
-                    (onClick)="onViewBranches(company)"
-                  />
-                  @if (!company.readOnly) {
-                    <p-button
-                      *hasPermission="COMPANY_PERMISSIONS.DELETE"
-                      icon="pi pi-trash"
-                      [rounded]="true"
-                      [text]="true"
-                      severity="danger"
-                      [pTooltip]="'shared.delete' | translate"
-                      (onClick)="onDelete(company)"
-                    />
-                  }
-                </div>
-              </td>
-            </tr>
-          </ng-template>
-          <ng-template #emptymessage>
-            <tr>
-              <td colspan="6" class="text-center py-8">
-                {{ 'administrative.company.no.companies' | translate }}
-              </td>
-            </tr>
-          </ng-template>
-        </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: 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"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    </lib-base-list>
+  `, isInline: true, dependencies: [{ kind: "component", type: BaseListComponent, selector: "lib-base-list", inputs: ["columns", "actions", "title", "showCreateButton", "searchable", "pageSize", "emptyMessage", "createButtonLabel", "createButtonIcon", "data", "total", "isLoading", "service", "filter", "createRoute", "editRoute", "deleteConfirmField", "idField", "canEdit", "canDelete"], outputs: ["onCreate", "onLazyLoad", "onSearch"] }, { kind: "directive", type: BaseListTemplateDirective, selector: "ng-template[baseListTemplate]", inputs: ["baseListTemplate"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i6.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CompanyListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-company-list',
-                    imports: [
-                        AngularModule,
-                        PrimeModule,
-                        TagModule,
-                        HasPermissionDirective,
-                        TranslatePipe,
-                    ],
+                    imports: [BaseListComponent, BaseListTemplateDirective, PrimeModule, TranslatePipe],
                     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"
-        >
-          <h2 class="text-xl font-semibold m-0">
-            {{ 'administrative.company.title' | translate }}
-          </h2>
-          <p-button
-            *hasPermission="COMPANY_PERMISSIONS.CREATE"
-            [label]="'administrative.company.add' | translate"
-            icon="pi pi-plus"
-            (onClick)="onCreate()"
-          />
-        </div>
+    <lib-base-list
+      [columns]="columns"
+      [actions]="viewBranchesAction"
+      [service]="companyService"
+      [title]="'administrative.company.title' | translate"
+      [showCreateButton]="canCreate()"
+      [createButtonLabel]="'administrative.company.add' | translate"
+      [createRoute]="'/administration/company/new'"
+      [editRoute]="'/administration/company'"
+      [deleteConfirmField]="'name'"
+      [canEdit]="canEditFn"
+      [canDelete]="canDeleteFn"
+    >
+      <ng-template baseListTemplate="isActive" let-item>
+        <p-tag
+          [value]="asCompany(item).isActive ? ('shared.active' | translate) : ('shared.inactive' | translate)"
+          [severity]="asCompany(item).isActive ? 'success' : 'danger'"
+        />
       </ng-template>
-
-      <div class="overflow-x-auto">
-        <p-table
-          [value]="companies()"
-          [loading]="isLoading()"
-          [paginator]="total() > 0"
-          [rows]="10"
-          [rowsPerPageOptions]="[10, 25, 50]"
-          [totalRecords]="total()"
-          [lazy]="true"
-          (onLazyLoad)="onLazyLoad($event)"
-          [scrollable]="true"
-          styleClass="p-datatable-striped"
-        >
-          <ng-template #header>
-            <tr>
-              <th>{{ 'administrative.company.name' | translate }}</th>
-              <th>{{ 'administrative.company.slug' | translate }}</th>
-              <th>{{ 'administrative.email.label' | translate }}</th>
-              <th>{{ 'administrative.phone.label' | translate }}</th>
-              <th>{{ 'shared.status' | translate }}</th>
-              <th class="w-[150px]">{{ 'shared.actions' | translate }}</th>
-            </tr>
-          </ng-template>
-          <ng-template #body let-company>
-            <tr>
-              <td>{{ company.name }}</td>
-              <td>{{ company.slug }}</td>
-              <td>{{ company.email || '-' }}</td>
-              <td>{{ company.phone || '-' }}</td>
-              <td>
-                <p-tag
-                  [value]="
-                    company.isActive
-                      ? ('shared.active' | translate)
-                      : ('shared.inactive' | translate)
-                  "
-                  [severity]="company.isActive ? 'success' : 'danger'"
-                />
-              </td>
-              <td>
-                <div class="flex gap-2">
-                  <p-button
-                    *hasPermission="COMPANY_PERMISSIONS.UPDATE"
-                    icon="pi pi-pencil"
-                    [rounded]="true"
-                    [text]="true"
-                    severity="info"
-                    [pTooltip]="'shared.edit' | translate"
-                    (onClick)="onEdit(company)"
-                  />
-                  <p-button
-                    *hasPermission="BRANCH_PERMISSIONS.READ"
-                    icon="pi pi-building"
-                    [rounded]="true"
-                    [text]="true"
-                    severity="secondary"
-                    [pTooltip]="
-                      'administrative.branch.view.branches' | translate
-                    "
-                    (onClick)="onViewBranches(company)"
-                  />
-                  @if (!company.readOnly) {
-                    <p-button
-                      *hasPermission="COMPANY_PERMISSIONS.DELETE"
-                      icon="pi pi-trash"
-                      [rounded]="true"
-                      [text]="true"
-                      severity="danger"
-                      [pTooltip]="'shared.delete' | translate"
-                      (onClick)="onDelete(company)"
-                    />
-                  }
-                </div>
-              </td>
-            </tr>
-          </ng-template>
-          <ng-template #emptymessage>
-            <tr>
-              <td colspan="6" class="text-center py-8">
-                {{ 'administrative.company.no.companies' | translate }}
-              </td>
-            </tr>
-          </ng-template>
-        </p-table>
-      </div>
-    </p-card>
+    </lib-base-list>
   `,
                 }]
         }] });