From bfe4f8bd5e0243976e4a6ec00a513dcbafc3893d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 3 Oct 2025 05:11:18 +0000
Subject: [PATCH 1/8] Initial plan


From b7e5ac84776a0ecafc8bd2ce3253b8207edcc83b Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 3 Oct 2025 05:17:32 +0000
Subject: [PATCH 2/8] Remove Akita dependencies and update to use
 BehaviorSubject-based state management

Co-authored-by: renemadsen <76994+renemadsen@users.noreply.github.com>
---
 .../store/customers-state.service.ts          | 118 +++++++++++-------
 .../components/store/customers.query.ts       |  60 ++++-----
 .../components/store/customers.store.ts       | 104 +++++++--------
 .../customers-pn/components/store/index.ts    |   4 +-
 .../customers-pn/customers-pn.module.ts       |   9 +-
 .../layouts/customer-pn-layout.component.ts   |  31 +++--
 6 files changed, 186 insertions(+), 140 deletions(-)

diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/store/customers-state.service.ts b/eform-client/src/app/plugins/modules/customers-pn/components/store/customers-state.service.ts
index 2ad069d2..f8e73a69 100644
--- a/eform-client/src/app/plugins/modules/customers-pn/components/store/customers-state.service.ts
+++ b/eform-client/src/app/plugins/modules/customers-pn/components/store/customers-state.service.ts
@@ -1,38 +1,66 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 import {
   OperationDataResult,
   PaginationModel,
   SortModel,
+  FiltrationStateModel,
+  CommonPaginationState,
 } from 'src/app/common/models';
 import { updateTableSort, getOffset } from 'src/app/common/helpers';
 import { map } from 'rxjs/operators';
-import { CustomersQuery, CustomersStore } from './';
 import { CustomersPnService } from '../../services';
 import { CustomersPnModel } from '../../models';
 
-@Injectable()
+export interface CustomersState {
+  pagination: CommonPaginationState;
+  filters: FiltrationStateModel;
+  total: number;
+}
+
+function createInitialState(): CustomersState {
+  return <CustomersState>{
+    pagination: {
+      pageSize: 10,
+      sort: 'Id',
+      isSortDsc: false,
+      offset: 0,
+    },
+    filters: {
+      nameFilter: '',
+    },
+    total: 0,
+  };
+}
+
+@Injectable({ providedIn: 'root' })
 export class CustomersStateService {
+  private state$ = new BehaviorSubject<CustomersState>(createInitialState());
+
   constructor(
-    private store: CustomersStore,
-    private service: CustomersPnService,
-    private query: CustomersQuery
+    private service: CustomersPnService
   ) {}
 
+  private get state(): CustomersState {
+    return this.state$.value;
+  }
+
+  private updateState(update: Partial<CustomersState>) {
+    this.state$.next({ ...this.state, ...update });
+  }
+
   getAllCustomers(): Observable<OperationDataResult<CustomersPnModel>> {
     return this.service
       .getAllCustomers({
-        ...this.query.pageSetting.pagination,
-        ...this.query.pageSetting.filters,
-        sortColumnName: this.query.pageSetting.pagination.sort,
-        name: this.query.pageSetting.filters.nameFilter,
+        ...this.state.pagination,
+        ...this.state.filters,
+        sortColumnName: this.state.pagination.sort,
+        name: this.state.filters.nameFilter,
       })
       .pipe(
         map((response) => {
           if (response && response.success && response.model) {
-            this.store.update(() => ({
-              total: response.model.total,
-            }));
+            this.updateState({ total: response.model.total });
           }
           return response;
         })
@@ -40,88 +68,94 @@ export class CustomersStateService {
   }
 
   updateNameFilter(nameFilter: string) {
-    this.store.update((state) => ({
+    this.updateState({
       filters: {
-        ...state.filters,
+        ...this.state.filters,
         nameFilter: nameFilter,
       },
       pagination: {
-        ...state.pagination,
+        ...this.state.pagination,
         offset: 0,
       },
-    }));
+    });
   }
 
   updatePageSize(pageSize: number) {
-    this.store.update((state) => ({
+    this.updateState({
       pagination: {
-        ...state.pagination,
+        ...this.state.pagination,
         pageSize: pageSize,
       },
-    }));
+    });
     this.checkOffset();
   }
 
   getPageSize(): Observable<number> {
-    return this.query.selectPageSize$;
+    return this.state$.pipe(map(state => state.pagination.pageSize));
   }
 
   getSort(): Observable<SortModel> {
-    return this.query.selectSort$;
+    return this.state$.pipe(
+      map(state => new SortModel(state.pagination.sort, state.pagination.isSortDsc))
+    );
   }
 
   getNameFilter(): Observable<string> {
-    return this.query.selectNameFilter$;
+    return this.state$.pipe(map(state => state.filters.nameFilter));
   }
 
   changePage(offset: number) {
-    this.store.update((state) => ({
+    this.updateState({
       pagination: {
-        ...state.pagination,
+        ...this.state.pagination,
         offset: offset,
       },
-    }));
+    });
   }
 
   onDelete() {
-    this.store.update((state) => ({
-      total: state.total - 1,
-    }));
+    this.updateState({ total: this.state.total - 1 });
     this.checkOffset();
   }
 
   onSortTable(sort: string) {
     const localPageSettings = updateTableSort(
       sort,
-      this.query.pageSetting.pagination.sort,
-      this.query.pageSetting.pagination.isSortDsc
+      this.state.pagination.sort,
+      this.state.pagination.isSortDsc
     );
-    this.store.update((state) => ({
+    this.updateState({
       pagination: {
-        ...state.pagination,
+        ...this.state.pagination,
         isSortDsc: localPageSettings.isSortDsc,
         sort: localPageSettings.sort,
       },
-    }));
+    });
   }
 
   checkOffset() {
     const newOffset = getOffset(
-      this.query.pageSetting.pagination.pageSize,
-      this.query.pageSetting.pagination.offset,
-      this.query.pageSetting.total
+      this.state.pagination.pageSize,
+      this.state.pagination.offset,
+      this.state.total
     );
-    if (newOffset !== this.query.pageSetting.pagination.offset) {
-      this.store.update((state) => ({
+    if (newOffset !== this.state.pagination.offset) {
+      this.updateState({
         pagination: {
-          ...state.pagination,
+          ...this.state.pagination,
           offset: newOffset,
         },
-      }));
+      });
     }
   }
 
   getPagination(): Observable<PaginationModel> {
-    return this.query.selectPagination$;
+    return this.state$.pipe(
+      map(state => new PaginationModel(
+        state.total,
+        state.pagination.pageSize,
+        state.pagination.offset
+      ))
+    );
   }
 }
diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/store/customers.query.ts b/eform-client/src/app/plugins/modules/customers-pn/components/store/customers.query.ts
index ea0ba413..dbcedf81 100644
--- a/eform-client/src/app/plugins/modules/customers-pn/components/store/customers.query.ts
+++ b/eform-client/src/app/plugins/modules/customers-pn/components/store/customers.query.ts
@@ -1,30 +1,30 @@
-import { Injectable } from '@angular/core';
-import { Query } from '@datorama/akita';
-import { CustomersState, CustomersStore } from './';
-import { PaginationModel, SortModel } from 'src/app/common/models';
-
-@Injectable({ providedIn: 'root' })
-export class CustomersQuery extends Query<CustomersState> {
-  constructor(protected store: CustomersStore) {
-    super(store);
-  }
-
-  get pageSetting() {
-    return this.getValue();
-  }
-
-  selectNameFilter$ = this.select((state) => state.filters.nameFilter);
-  selectPageSize$ = this.select((state) => state.pagination.pageSize);
-  selectPagination$ = this.select(
-    (state) =>
-      new PaginationModel(
-        state.total,
-        state.pagination.pageSize,
-        state.pagination.offset
-      )
-  );
-
-  selectSort$ = this.select(
-    (state) => new SortModel(state.pagination.sort, state.pagination.isSortDsc)
-  );
-}
+// import { Injectable } from '@angular/core';
+// import { Query } from '@datorama/akita';
+// import { CustomersState, CustomersStore } from './';
+// import { PaginationModel, SortModel } from 'src/app/common/models';
+//
+// @Injectable({ providedIn: 'root' })
+// export class CustomersQuery extends Query<CustomersState> {
+//   constructor(protected store: CustomersStore) {
+//     super(store);
+//   }
+//
+//   get pageSetting() {
+//     return this.getValue();
+//   }
+//
+//   selectNameFilter$ = this.select((state) => state.filters.nameFilter);
+//   selectPageSize$ = this.select((state) => state.pagination.pageSize);
+//   selectPagination$ = this.select(
+//     (state) =>
+//       new PaginationModel(
+//         state.total,
+//         state.pagination.pageSize,
+//         state.pagination.offset
+//       )
+//   );
+//
+//   selectSort$ = this.select(
+//     (state) => new SortModel(state.pagination.sort, state.pagination.isSortDsc)
+//   );
+// }
diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/store/customers.store.ts b/eform-client/src/app/plugins/modules/customers-pn/components/store/customers.store.ts
index b93c37eb..8edcb8d0 100644
--- a/eform-client/src/app/plugins/modules/customers-pn/components/store/customers.store.ts
+++ b/eform-client/src/app/plugins/modules/customers-pn/components/store/customers.store.ts
@@ -1,52 +1,52 @@
-import { Injectable } from '@angular/core';
-import { persistState, Store, StoreConfig } from '@datorama/akita';
-import {
-  FiltrationStateModel,
-  CommonPaginationState,
-} from 'src/app/common/models';
-
-export interface CustomersState {
-  pagination: CommonPaginationState;
-  filters: FiltrationStateModel;
-  total: number;
-}
-
-export function createInitialState(): CustomersState {
-  return <CustomersState>{
-    pagination: {
-      pageSize: 10,
-      sort: 'Id',
-      isSortDsc: false,
-      offset: 0,
-    },
-    filters: {
-      nameFilter: '',
-    },
-    total: 0,
-  };
-}
-
-const customersPersistStorage = persistState({
-  include: ['customers'],
-  key: 'customersPn',
-  preStorageUpdate(storeName, state) {
-    return {
-      pagination: state.pagination,
-      filters: state.filters,
-    };
-  },
-});
-
-@Injectable({ providedIn: 'root' })
-@StoreConfig({ name: 'customers', resettable: true })
-export class CustomersStore extends Store<CustomersState> {
-  constructor() {
-    super(createInitialState());
-  }
-}
-
-export const customersPersistProvider = {
-  provide: 'persistStorage',
-  useValue: customersPersistStorage,
-  multi: true,
-};
+// import { Injectable } from '@angular/core';
+// import { persistState, Store, StoreConfig } from '@datorama/akita';
+// import {
+//   FiltrationStateModel,
+//   CommonPaginationState,
+// } from 'src/app/common/models';
+//
+// export interface CustomersState {
+//   pagination: CommonPaginationState;
+//   filters: FiltrationStateModel;
+//   total: number;
+// }
+//
+// export function createInitialState(): CustomersState {
+//   return <CustomersState>{
+//     pagination: {
+//       pageSize: 10,
+//       sort: 'Id',
+//       isSortDsc: false,
+//       offset: 0,
+//     },
+//     filters: {
+//       nameFilter: '',
+//     },
+//     total: 0,
+//   };
+// }
+//
+// const customersPersistStorage = persistState({
+//   include: ['customers'],
+//   key: 'customersPn',
+//   preStorageUpdate(storeName, state) {
+//     return {
+//       pagination: state.pagination,
+//       filters: state.filters,
+//     };
+//   },
+// });
+//
+// @Injectable({ providedIn: 'root' })
+// @StoreConfig({ name: 'customers', resettable: true })
+// export class CustomersStore extends Store<CustomersState> {
+//   constructor() {
+//     super(createInitialState());
+//   }
+// }
+//
+// export const customersPersistProvider = {
+//   provide: 'persistStorage',
+//   useValue: customersPersistStorage,
+//   multi: true,
+// };
diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/store/index.ts b/eform-client/src/app/plugins/modules/customers-pn/components/store/index.ts
index 1f2bd656..9e7b2009 100644
--- a/eform-client/src/app/plugins/modules/customers-pn/components/store/index.ts
+++ b/eform-client/src/app/plugins/modules/customers-pn/components/store/index.ts
@@ -1,3 +1,3 @@
-export * from './customers.query';
-export * from './customers.store';
+// export * from './customers.query';
+// export * from './customers.store';
 export * from './customers-state.service';
diff --git a/eform-client/src/app/plugins/modules/customers-pn/customers-pn.module.ts b/eform-client/src/app/plugins/modules/customers-pn/customers-pn.module.ts
index ce7337b0..9ad9d463 100644
--- a/eform-client/src/app/plugins/modules/customers-pn/customers-pn.module.ts
+++ b/eform-client/src/app/plugins/modules/customers-pn/customers-pn.module.ts
@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { TranslateModule } from '@ngx-translate/core';
-import { MDBRootModule } from 'angular-bootstrap-md';
+import { RouterModule } from '@angular/router';
 import { CustomerPnLayoutComponent } from './layouts';
 import {
   CustomersPnFieldsService,
@@ -20,9 +20,8 @@ import {
   CustomersPnFieldsComponent,
   CustomersPnPageComponent,
 } from './components';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { EformSharedModule } from 'src/app/common/modules/eform-shared/eform-shared.module';
-import { customersPersistProvider, CustomersStateService} from './components/store';
+import { CustomersStateService } from './components/store';
 
 @NgModule({
   imports: [
@@ -32,10 +31,9 @@ import { customersPersistProvider, CustomersStateService} from './components/sto
     SharedPnModule,
     CustomersPnRouting,
     TranslateModule,
-    MDBRootModule,
     NgSelectModule,
-    FontAwesomeModule,
     EformSharedModule,
+    RouterModule,
   ],
   declarations: [
     CustomerPnLayoutComponent,
@@ -51,7 +49,6 @@ import { customersPersistProvider, CustomersStateService} from './components/sto
     CustomersPnFieldsService,
     CustomersPnSettingsService,
     CustomersStateService,
-    customersPersistProvider,
   ],
 })
 export class CustomersPnModule {}
diff --git a/eform-client/src/app/plugins/modules/customers-pn/layouts/customer-pn-layout.component.ts b/eform-client/src/app/plugins/modules/customers-pn/layouts/customer-pn-layout.component.ts
index 01093b08..fed3c482 100644
--- a/eform-client/src/app/plugins/modules/customers-pn/layouts/customer-pn-layout.component.ts
+++ b/eform-client/src/app/plugins/modules/customers-pn/layouts/customer-pn-layout.component.ts
@@ -1,23 +1,38 @@
 import { AfterContentInit, Component, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import { AuthStateService } from 'src/app/common/store';
+import { Store } from '@ngrx/store';
+import { addPluginToVisited, selectPluginsVisitedPlugins } from 'src/app/state';
+import { take } from 'rxjs';
 import { translates } from './../i18n/translates';
 
 @Component({
   selector: 'app-customers-pn-layout',
   template: `<router-outlet></router-outlet>`,
+  standalone: false
 })
 export class CustomerPnLayoutComponent implements AfterContentInit, OnInit {
+  private pluginName = 'customers-pn';
+
   constructor(
     private translateService: TranslateService,
-    private authStateService: AuthStateService
-  ) {}
+    store: Store
+  ) {
+    store.select(selectPluginsVisitedPlugins)
+      .pipe(take(1))
+      .subscribe(x => {
+        // check current plugin in activated plugin
+        if (x.findIndex(y => y === this.pluginName) === -1) {
+          // add all plugin translates one time
+          Object.keys(translates).forEach(locale => {
+            this.translateService.setTranslation(locale, translates[locale], true);
+          });
+          // add plugin to visited plugins
+          store.dispatch(addPluginToVisited(this.pluginName));
+        }
+      });
+  }
 
   ngOnInit() {}
 
-  ngAfterContentInit() {
-    const lang = this.authStateService.currentUserLocale;
-    const i18n = translates[lang];
-    this.translateService.setTranslation(lang, i18n, true);
-  }
+  ngAfterContentInit() {}
 }

From 147ceaba749d3461c775580359f3970fcfc93745 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 3 Oct 2025 05:33:40 +0000
Subject: [PATCH 3/8] Migrate to ngrx state structure with actions, reducers,
 and selectors

Co-authored-by: renemadsen <76994+renemadsen@users.noreply.github.com>
---
 .../store/customers-state.service.ts          | 159 +++++++-----------
 .../customers-pn/customers-pn.module.ts       |   5 +
 .../customers-pn/state/customers-pn.state.ts  |   7 +
 .../state/customers/customers.actions.ts      |  18 ++
 .../state/customers/customers.reducer.ts      |  60 +++++++
 .../state/customers/customers.selector.ts     |  23 +++
 .../customers-pn/state/customers/index.ts     |   3 +
 .../modules/customers-pn/state/index.ts       |   2 +
 8 files changed, 178 insertions(+), 99 deletions(-)
 create mode 100644 eform-client/src/app/plugins/modules/customers-pn/state/customers-pn.state.ts
 create mode 100644 eform-client/src/app/plugins/modules/customers-pn/state/customers/customers.actions.ts
 create mode 100644 eform-client/src/app/plugins/modules/customers-pn/state/customers/customers.reducer.ts
 create mode 100644 eform-client/src/app/plugins/modules/customers-pn/state/customers/customers.selector.ts
 create mode 100644 eform-client/src/app/plugins/modules/customers-pn/state/customers/index.ts
 create mode 100644 eform-client/src/app/plugins/modules/customers-pn/state/index.ts

diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/store/customers-state.service.ts b/eform-client/src/app/plugins/modules/customers-pn/components/store/customers-state.service.ts
index f8e73a69..49b02e30 100644
--- a/eform-client/src/app/plugins/modules/customers-pn/components/store/customers-state.service.ts
+++ b/eform-client/src/app/plugins/modules/customers-pn/components/store/customers-state.service.ts
@@ -1,160 +1,121 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
+import {Injectable} from '@angular/core';
+import {Observable, tap} from 'rxjs';
 import {
+  CommonPaginationState,
   OperationDataResult,
   PaginationModel,
   SortModel,
-  FiltrationStateModel,
-  CommonPaginationState,
 } from 'src/app/common/models';
-import { updateTableSort, getOffset } from 'src/app/common/helpers';
-import { map } from 'rxjs/operators';
-import { CustomersPnService } from '../../services';
-import { CustomersPnModel } from '../../models';
-
-export interface CustomersState {
-  pagination: CommonPaginationState;
-  filters: FiltrationStateModel;
-  total: number;
-}
-
-function createInitialState(): CustomersState {
-  return <CustomersState>{
-    pagination: {
-      pageSize: 10,
-      sort: 'Id',
-      isSortDsc: false,
-      offset: 0,
-    },
-    filters: {
-      nameFilter: '',
-    },
-    total: 0,
-  };
-}
-
-@Injectable({ providedIn: 'root' })
+import {updateTableSort, getOffset} from 'src/app/common/helpers';
+import {CustomersPnService} from '../../services';
+import {Store} from '@ngrx/store';
+import {
+  selectCustomersFilters,
+  selectCustomersPagination,
+  customersUpdateTotalCustomers,
+  customersUpdateFilters,
+  customersUpdatePagination,
+  CustomersFiltrationModel,
+  selectCustomersPaginationPageSize,
+  selectCustomersNameFilters,
+  selectCustomersTotal,
+} from '../../state';
+import {CustomersPnModel} from '../../models';
+import {map} from 'rxjs/operators';
+
+@Injectable({providedIn: 'root'})
 export class CustomersStateService {
-  private state$ = new BehaviorSubject<CustomersState>(createInitialState());
+  private selectCustomersFilters$ = this.store.select(selectCustomersFilters);
+  private selectCustomersPagination$ = this.store.select(selectCustomersPagination);
+  currentPagination: CommonPaginationState;
+  currentFilters: CustomersFiltrationModel;
 
   constructor(
-    private service: CustomersPnService
-  ) {}
-
-  private get state(): CustomersState {
-    return this.state$.value;
-  }
-
-  private updateState(update: Partial<CustomersState>) {
-    this.state$.next({ ...this.state, ...update });
+    private store: Store,
+    private service: CustomersPnService,
+  ) {
+    this.selectCustomersPagination$.subscribe(x => this.currentPagination = x);
+    this.selectCustomersFilters$.subscribe(x => this.currentFilters = x);
   }
 
   getAllCustomers(): Observable<OperationDataResult<CustomersPnModel>> {
     return this.service
       .getAllCustomers({
-        ...this.state.pagination,
-        ...this.state.filters,
-        sortColumnName: this.state.pagination.sort,
-        name: this.state.filters.nameFilter,
+        ...this.currentFilters,
+        ...this.currentPagination,
+        sortColumnName: this.currentPagination.sort,
+        name: this.currentFilters.nameFilter,
       })
       .pipe(
-        map((response) => {
+        tap((response) => {
           if (response && response.success && response.model) {
-            this.updateState({ total: response.model.total });
+            this.store.dispatch(customersUpdateTotalCustomers(response.model.total));
           }
-          return response;
         })
       );
   }
 
   updateNameFilter(nameFilter: string) {
-    this.updateState({
-      filters: {
-        ...this.state.filters,
-        nameFilter: nameFilter,
-      },
-      pagination: {
-        ...this.state.pagination,
-        offset: 0,
-      },
-    });
+    this.store.dispatch(customersUpdateFilters({nameFilter: nameFilter}));
+    this.store.dispatch(customersUpdatePagination({...this.currentPagination, offset: 0}));
   }
 
   updatePageSize(pageSize: number) {
-    this.updateState({
-      pagination: {
-        ...this.state.pagination,
-        pageSize: pageSize,
-      },
-    });
+    this.store.dispatch(customersUpdatePagination({...this.currentPagination, pageSize: pageSize}));
     this.checkOffset();
   }
 
   getPageSize(): Observable<number> {
-    return this.state$.pipe(map(state => state.pagination.pageSize));
+    return this.store.select(selectCustomersPaginationPageSize);
   }
 
   getSort(): Observable<SortModel> {
-    return this.state$.pipe(
-      map(state => new SortModel(state.pagination.sort, state.pagination.isSortDsc))
+    return this.selectCustomersPagination$.pipe(
+      map(pagination => new SortModel(pagination.sort, pagination.isSortDsc))
     );
   }
 
   getNameFilter(): Observable<string> {
-    return this.state$.pipe(map(state => state.filters.nameFilter));
+    return this.store.select(selectCustomersNameFilters);
   }
 
   changePage(offset: number) {
-    this.updateState({
-      pagination: {
-        ...this.state.pagination,
-        offset: offset,
-      },
-    });
+    this.store.dispatch(customersUpdatePagination({...this.currentPagination, offset: offset}));
   }
 
   onDelete() {
-    this.updateState({ total: this.state.total - 1 });
+    const currentTotal = this.currentPagination.total || 0;
+    this.store.dispatch(customersUpdateTotalCustomers(currentTotal - 1));
     this.checkOffset();
   }
 
   onSortTable(sort: string) {
     const localPageSettings = updateTableSort(
       sort,
-      this.state.pagination.sort,
-      this.state.pagination.isSortDsc
+      this.currentPagination.sort,
+      this.currentPagination.isSortDsc
     );
-    this.updateState({
-      pagination: {
-        ...this.state.pagination,
-        isSortDsc: localPageSettings.isSortDsc,
-        sort: localPageSettings.sort,
-      },
-    });
+    this.store.dispatch(customersUpdatePagination({...this.currentPagination, ...localPageSettings}));
   }
 
   checkOffset() {
+    const currentTotal = this.currentPagination.total || 0;
     const newOffset = getOffset(
-      this.state.pagination.pageSize,
-      this.state.pagination.offset,
-      this.state.total
+      this.currentPagination.pageSize,
+      this.currentPagination.offset,
+      currentTotal
     );
-    if (newOffset !== this.state.pagination.offset) {
-      this.updateState({
-        pagination: {
-          ...this.state.pagination,
-          offset: newOffset,
-        },
-      });
+    if (newOffset !== this.currentPagination.offset) {
+      this.store.dispatch(customersUpdatePagination({...this.currentPagination, offset: newOffset}));
     }
   }
 
   getPagination(): Observable<PaginationModel> {
-    return this.state$.pipe(
-      map(state => new PaginationModel(
-        state.total,
-        state.pagination.pageSize,
-        state.pagination.offset
+    return this.store.select(selectCustomersTotal).pipe(
+      map(total => new PaginationModel(
+        total,
+        this.currentPagination.pageSize,
+        this.currentPagination.offset
       ))
     );
   }
diff --git a/eform-client/src/app/plugins/modules/customers-pn/customers-pn.module.ts b/eform-client/src/app/plugins/modules/customers-pn/customers-pn.module.ts
index 9ad9d463..6483585b 100644
--- a/eform-client/src/app/plugins/modules/customers-pn/customers-pn.module.ts
+++ b/eform-client/src/app/plugins/modules/customers-pn/customers-pn.module.ts
@@ -4,6 +4,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { TranslateModule } from '@ngx-translate/core';
 import { RouterModule } from '@angular/router';
+import { StoreModule } from '@ngrx/store';
 import { CustomerPnLayoutComponent } from './layouts';
 import {
   CustomersPnFieldsService,
@@ -22,6 +23,7 @@ import {
 } from './components';
 import { EformSharedModule } from 'src/app/common/modules/eform-shared/eform-shared.module';
 import { CustomersStateService } from './components/store';
+import { customersReducer } from './state';
 
 @NgModule({
   imports: [
@@ -34,6 +36,9 @@ import { CustomersStateService } from './components/store';
     NgSelectModule,
     EformSharedModule,
     RouterModule,
+    StoreModule.forFeature('customersPn', {
+      customersState: customersReducer,
+    }),
   ],
   declarations: [
     CustomerPnLayoutComponent,
diff --git a/eform-client/src/app/plugins/modules/customers-pn/state/customers-pn.state.ts b/eform-client/src/app/plugins/modules/customers-pn/state/customers-pn.state.ts
new file mode 100644
index 00000000..20484402
--- /dev/null
+++ b/eform-client/src/app/plugins/modules/customers-pn/state/customers-pn.state.ts
@@ -0,0 +1,7 @@
+import {
+  CustomersState,
+} from './';
+
+export interface CustomersPnState {
+  customersState: CustomersState;
+}
diff --git a/eform-client/src/app/plugins/modules/customers-pn/state/customers/customers.actions.ts b/eform-client/src/app/plugins/modules/customers-pn/state/customers/customers.actions.ts
new file mode 100644
index 00000000..15dde6ba
--- /dev/null
+++ b/eform-client/src/app/plugins/modules/customers-pn/state/customers/customers.actions.ts
@@ -0,0 +1,18 @@
+import {createAction} from '@ngrx/store';
+import {CommonPaginationState} from 'src/app/common/models';
+import {CustomersFiltrationModel} from './';
+
+export const customersUpdateFilters = createAction(
+  '[Customers] Update Filters',
+  (payload: CustomersFiltrationModel) => ({payload})
+);
+
+export const customersUpdatePagination = createAction(
+  '[Customers] Update Pagination',
+  (payload: CommonPaginationState) => ({payload})
+);
+
+export const customersUpdateTotalCustomers = createAction(
+  '[Customers] Update Total Customers',
+  (payload: number) => ({payload})
+);
diff --git a/eform-client/src/app/plugins/modules/customers-pn/state/customers/customers.reducer.ts b/eform-client/src/app/plugins/modules/customers-pn/state/customers/customers.reducer.ts
new file mode 100644
index 00000000..065e1deb
--- /dev/null
+++ b/eform-client/src/app/plugins/modules/customers-pn/state/customers/customers.reducer.ts
@@ -0,0 +1,60 @@
+import {CommonPaginationState} from 'src/app/common/models';
+import {Action, createReducer, on} from '@ngrx/store';
+import {
+  customersUpdateFilters,
+  customersUpdatePagination,
+  customersUpdateTotalCustomers
+} from './customers.actions';
+
+export interface CustomersFiltrationModel {
+  nameFilter: string;
+}
+
+export interface CustomersState {
+  pagination: CommonPaginationState;
+  filters: CustomersFiltrationModel;
+  total: number;
+}
+
+export const customersInitialState: CustomersState = {
+  pagination: {
+    pageSize: 10,
+    sort: 'Id',
+    isSortDsc: false,
+    offset: 0,
+    pageIndex: 0,
+    total: 0,
+  },
+  filters: {
+    nameFilter: '',
+  },
+  total: 0,
+};
+
+export const _customersReducer = createReducer(
+  customersInitialState,
+  on(customersUpdateFilters, (state, {payload}) => ({
+    ...state,
+    filters: {
+      ...state.filters,
+      ...payload,
+    },
+  })),
+  on(customersUpdatePagination, (state, {payload}) => ({
+    ...state,
+    pagination: { ...state, ...payload, },
+  })),
+  on(customersUpdateTotalCustomers, (state, {payload}) => ({
+      ...state,
+      pagination: {
+        ...state.pagination,
+        total: payload,
+      },
+      total: payload,
+    }
+  )),
+);
+
+export function customersReducer(state: CustomersState | undefined, action: Action) {
+  return _customersReducer(state, action);
+}
diff --git a/eform-client/src/app/plugins/modules/customers-pn/state/customers/customers.selector.ts b/eform-client/src/app/plugins/modules/customers-pn/state/customers/customers.selector.ts
new file mode 100644
index 00000000..16d36945
--- /dev/null
+++ b/eform-client/src/app/plugins/modules/customers-pn/state/customers/customers.selector.ts
@@ -0,0 +1,23 @@
+import {
+  CustomersPnState,
+} from '../';
+import {createSelector} from '@ngrx/store';
+
+const selectCustomersPn =
+  (state: {customersPn: CustomersPnState}) => state.customersPn;
+export const selectCustomers =
+    createSelector(selectCustomersPn, (state) => state.customersState);
+export const selectCustomersFilters =
+    createSelector(selectCustomers, (state) => state.filters);
+export const selectCustomersPagination =
+    createSelector(selectCustomers, (state) => state.pagination);
+export const selectCustomersPaginationSort =
+    createSelector(selectCustomers, (state) => state.pagination.sort);
+export const selectCustomersPaginationIsSortDsc =
+    createSelector(selectCustomers, (state) => state.pagination.isSortDsc ? 'desc' : 'asc');
+export const selectCustomersNameFilters =
+    createSelector(selectCustomers, (state) => state.filters.nameFilter);
+export const selectCustomersPaginationPageSize =
+    createSelector(selectCustomers, (state) => state.pagination.pageSize);
+export const selectCustomersTotal =
+    createSelector(selectCustomers, (state) => state.total);
diff --git a/eform-client/src/app/plugins/modules/customers-pn/state/customers/index.ts b/eform-client/src/app/plugins/modules/customers-pn/state/customers/index.ts
new file mode 100644
index 00000000..f7aa0b2e
--- /dev/null
+++ b/eform-client/src/app/plugins/modules/customers-pn/state/customers/index.ts
@@ -0,0 +1,3 @@
+export * from './customers.actions';
+export * from './customers.reducer';
+export * from './customers.selector';
diff --git a/eform-client/src/app/plugins/modules/customers-pn/state/index.ts b/eform-client/src/app/plugins/modules/customers-pn/state/index.ts
new file mode 100644
index 00000000..14c28e7d
--- /dev/null
+++ b/eform-client/src/app/plugins/modules/customers-pn/state/index.ts
@@ -0,0 +1,2 @@
+export * from './customers';
+export * from './customers-pn.state';

From 5dcf06170b32b82a8dfa505a537da3373a0b5a73 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 3 Oct 2025 06:04:39 +0000
Subject: [PATCH 4/8] Add standalone: false to all component decorators

Co-authored-by: renemadsen <76994+renemadsen@users.noreply.github.com>
---
 .../components/customer-pn-add/customer-pn-add.component.ts    | 3 ++-
 .../customer-pn-delete/customer-pn-delete.component.ts         | 3 ++-
 .../components/customer-pn-edit/customer-pn-edit.component.ts  | 3 ++-
 .../customer-pn-import/customer-pn-import.component.ts         | 1 +
 .../customers-pn-fields/customers-pn-fields.component.ts       | 1 +
 .../customers-pn-page/customers-pn-page.component.ts           | 1 +
 6 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-add/customer-pn-add.component.ts b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-add/customer-pn-add.component.ts
index bbad5404..e724e0c6 100644
--- a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-add/customer-pn-add.component.ts
+++ b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-add/customer-pn-add.component.ts
@@ -6,7 +6,8 @@ import {CustomersPnService} from '../../services';
 @Component({
   selector: 'app-customer-pn-add',
   templateUrl: './customer-pn-add.component.html',
-  styleUrls: ['./customer-pn-add.component.scss']
+  styleUrls: ['./customer-pn-add.component.scss'],
+  standalone: false
 })
 export class CustomerPnAddComponent implements OnInit {
   @ViewChild('frame', {static: false}) frame;
diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-delete/customer-pn-delete.component.ts b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-delete/customer-pn-delete.component.ts
index 0456f70a..960dcb3f 100644
--- a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-delete/customer-pn-delete.component.ts
+++ b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-delete/customer-pn-delete.component.ts
@@ -7,7 +7,8 @@ import {CustomersPnService} from '../../services';
 @Component({
   selector: 'app-customer-pn-delete',
   templateUrl: './customer-pn-delete.component.html',
-  styleUrls: ['./customer-pn-delete.component.scss']
+  styleUrls: ['./customer-pn-delete.component.scss'],
+  standalone: false
 })
 export class CustomerPnDeleteComponent implements OnInit {
   @ViewChild('frame', {static: false}) frame;
diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-edit/customer-pn-edit.component.ts b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-edit/customer-pn-edit.component.ts
index 8484f6bd..f44024df 100644
--- a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-edit/customer-pn-edit.component.ts
+++ b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-edit/customer-pn-edit.component.ts
@@ -6,7 +6,8 @@ import {CustomersPnService} from '../../services';
 @Component({
   selector: 'app-customer-pn-edit',
   templateUrl: './customer-pn-edit.component.html',
-  styleUrls: ['./customer-pn-edit.component.scss']
+  styleUrls: ['./customer-pn-edit.component.scss'],
+  standalone: false
 })
 export class CustomerPnEditComponent implements OnInit {
   @ViewChild('frame', {static: false}) frame;
diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-import/customer-pn-import.component.ts b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-import/customer-pn-import.component.ts
index 9dea4099..fa2ebe6d 100644
--- a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-import/customer-pn-import.component.ts
+++ b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-import/customer-pn-import.component.ts
@@ -12,6 +12,7 @@ const URL = '';
   selector: 'app-customer-pn-import',
   templateUrl: './customer-pn-import.component.html',
   styleUrls: ['./customer-pn-import.component.scss'],
+  standalone: false
 })
 export class CustomerPnImportComponent implements OnInit {
   public data: any = [];
diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-fields/customers-pn-fields.component.ts b/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-fields/customers-pn-fields.component.ts
index 8be56e9b..3e982d5c 100644
--- a/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-fields/customers-pn-fields.component.ts
+++ b/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-fields/customers-pn-fields.component.ts
@@ -16,6 +16,7 @@ import {
   selector: 'app-customers-pn-fields',
   templateUrl: './customers-pn-fields.component.html',
   styleUrls: ['./customers-pn-fields.component.scss'],
+  standalone: false
 })
 export class CustomersPnFieldsComponent implements OnInit {
   isChecked = false;
diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-page/customers-pn-page.component.ts b/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-page/customers-pn-page.component.ts
index 10e9c8b5..27387da0 100644
--- a/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-page/customers-pn-page.component.ts
+++ b/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-page/customers-pn-page.component.ts
@@ -20,6 +20,7 @@ import { CustomersStateService } from '../store';
   selector: 'app-customers-pn-page',
   templateUrl: './customers-pn-page.component.html',
   styleUrls: ['./customers-pn-page.component.scss'],
+  standalone: false
 })
 export class CustomersPnPageComponent implements OnInit {
   @ViewChild('createCustomerModal', { static: false }) createCustomerModal;

From f53064e2f0bca7efde3094d3eba3d5310f920c49 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 3 Oct 2025 06:19:40 +0000
Subject: [PATCH 5/8] Start migration from MDBModal to Angular Material Dialog
 - convert edit modal

Co-authored-by: renemadsen <76994+renemadsen@users.noreply.github.com>
---
 .../customer-pn-edit.component.html           | 430 ++++++++----------
 .../customer-pn-edit.component.ts             |  29 +-
 .../customers-pn/customers-pn.module.ts       |   8 +
 3 files changed, 227 insertions(+), 240 deletions(-)

diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-edit/customer-pn-edit.component.html b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-edit/customer-pn-edit.component.html
index c46f9950..74a5ce97 100644
--- a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-edit/customer-pn-edit.component.html
+++ b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-edit/customer-pn-edit.component.html
@@ -1,236 +1,206 @@
-<div mdbModal class="modal fade" #frame="mdbModal">
-  <div class="modal-dialog modal-lg modal-dialog-scrollable">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h3>{{ 'Edit customer' | translate }}</h3>
-        <button class="close" data-dismiss="modal" (click)="frame.hide()">
-          <span>×</span>
-        </button>
+<h3 mat-dialog-title>{{ 'Edit customer' | translate }}</h3>
+<div mat-dialog-content>
+  <div class="d-flex flex-column">
+    <form #editForm="ngForm">
+      <div class="row">
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.CreatedBy)">
+          <mat-form-field>
+            <mat-label>{{'CreatedBy' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="selectedCustomerModel.createdBy"
+                   type="text" id="editCreatedBy"
+                   name="editCreatedBy">
+          </mat-form-field>
+        </div>
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.CustomerNo)">
+          <mat-form-field>
+            <mat-label>{{'CustomerNo' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="selectedCustomerModel.customerNo"
+                   type="text" id="editCustomerNo"
+                   name="editCustomerNo">
+          </mat-form-field>
+        </div>
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.ContactPerson)">
+          <mat-form-field>
+            <mat-label>{{'ContactPerson' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="selectedCustomerModel.contactPerson"
+                   type="text" id="editContactPerson"
+                   name="editContactPerson">
+          </mat-form-field>
+        </div>
       </div>
-      <div class="modal-body">
-        <div class="container-fluid">
-          <form #editForm="ngForm">
-            <div class="row">
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.CreatedBy)">
-                <div class="md-form">
-                  <input mdbInput
-
-                         [(ngModel)]="selectedCustomerModel.createdBy"
-                         type="text" id="editCreatedBy"
-                         name="editCreatedBy" class="form-control">
-                  <label for="editCreatedBy">{{'CreatedBy' | translate}}</label>
-                </div>
-              </div>
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.CustomerNo)">
-                <div class="md-form">
-                  <input mdbInput
-
-                         [(ngModel)]="selectedCustomerModel.customerNo"
-                         type="text" id="editCustomerNo"
-                         name="editCustomerNo" class="form-control">
-                  <label for="editCustomerNo">{{'CustomerNo' | translate}}</label>
-                </div>
-              </div>
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.ContactPerson)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="selectedCustomerModel.contactPerson"
-                         class="form-control"
-                         type="text" id="editContactPerson"
-                         name="editContactPerson">
-                  <label for="editContactPerson">{{'ContactPerson' | translate}}</label>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.CompanyName)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="selectedCustomerModel.companyName"
-                         class="form-control"
-                         type="text" id="editCompanyName"
-                         name="editCompanyName">
-                  <label for="editCompanyName">{{'CompanyName' | translate}}</label>
-                </div>
-              </div>
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.CompanyAddress)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="selectedCustomerModel.companyAddress"
-                         class="form-control"
-                         type="text" id="editCompanyAddress"
-                         name="editCompanyAddress">
-                  <label for="editCompanyAddress">{{'CompanyAddress' | translate}}</label>
-                </div>
-              </div>
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.CompanyAddress)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="selectedCustomerModel.companyAddress2"
-                         class="form-control"
-                         type="text" id="editCompanyAddress2"
-                         name="editCompanyAddress2">
-                  <label for="editCompanyAddress2">{{'CompanyAddress2' | translate}}</label>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.ZipCode)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="selectedCustomerModel.zipCode"
-                         class="form-control"
-                         type="text" id="editZipCode"
-                         name="editZipCode">
-                  <label for="editZipCode">{{'ZipCode' | translate}}</label>
-                </div>
-              </div>
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.CityName)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="selectedCustomerModel.cityName"
-                         class="form-control"
-                         type="text" id="editCityName"
-                         name="editCityName">
-                  <label for="editCityName">{{'CityName' | translate}}</label>
-                </div>
-              </div>
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.Phone)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="selectedCustomerModel.phone"
-                         class="form-control"
-                         type="text" id="editPhone"
-                         name="editPhone">
-                  <label for="editPhone">{{'Phone' | translate}}</label>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.Email)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="selectedCustomerModel.email"
-                         class="form-control"
-                         type="text" id="editEmail"
-                         name="editEmail">
-                  <label for="editEmail">{{'Email' | translate}}</label>
-                </div>
-              </div>
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.Email)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="selectedCustomerModel.eanCode"
-                         class="form-control"
-                         type="text" id="editEanCode"
-                         name="editEanCode">
-                  <label for="editEanCode">{{'EanCode' | translate}}</label>
-                </div>
-              </div>
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.Email)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="selectedCustomerModel.vatNumber"
-                         class="form-control"
-                         type="text" id="editVatNumber"
-                         name="editVatNumber">
-                  <label for="editVatNumber">{{'VatNumber' | translate}}</label>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.CountryCode)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="selectedCustomerModel.countryCode"
-                         class="form-control"
-                         type="text" id="editCountryCode"
-                         name="editCountryCode">
-                  <label for="editCountryCode">{{'CountryCode' | translate}}</label>
-                </div>
-              </div>
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.CadastralNumber)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="selectedCustomerModel.cadastralNumber"
-                         class="form-control"
-                         type="text" id="editCadastralNumber"
-                         name="editCadastralNumber">
-                  <label for="editCadastralNumber">{{'CadastralNumber' | translate}}</label>
-                </div>
-              </div>
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.CrmId)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="selectedCustomerModel.crmId"
-                         class="form-control"
-                         type="text" id="editCrmId"
-                         name="editCrmId">
-                  <label for="editCrmId">{{'CrmId' | translate}}</label>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.PropertyNumber)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="selectedCustomerModel.propertyNumber"
-                         class="form-control"
-                         type="text" id="editPropertyNumber"
-                         name="editPropertyNumber">
-                  <label for="editPropertyNumber">{{'PropertyNumber' | translate}}</label>
-                </div>
-              </div>
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.ApartmentNumber)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="selectedCustomerModel.apartmentNumber"
-                         class="form-control"
-                         type="text" id="editApartmentNumber"
-                         name="editApartmentNumber">
-                  <label for="editApartmentNumber">{{'ApartmentNumber' | translate}}</label>
-                </div>
-              </div>
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.CompletionYear)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="selectedCustomerModel.completionYear"
-                         class="form-control"
-                         type="text" id="editCompletionYear"
-                         name="editCompletionYear">
-                  <label for="editCompletionYear">{{'CompletionYear' | translate}}</label>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.FloorsWithLivingSpace)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="selectedCustomerModel.floorsWithLivingSpace"
-                         class="form-control"
-                         type="text" id="editFloorsWithLivingSpace"
-                         name="editFloorsWithLivingSpace">
-                  <label for="editFloorsWithLivingSpace">{{'FloorsWithLivingSpace' | translate}}</label>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col col-xs-12" *ngIf="isFieldAvailable(fieldsEnum.Description)">
-                <label class="text-black-60">{{'Description' | translate}}</label>
-                <div class="md-form p-0 m-0">
-                  <pell-pn-editor [(value)]="selectedCustomerModel.description" name="editComment"></pell-pn-editor>
-                </div>
-              </div>
-            </div>
-          </form>
+      <div class="row">
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.CompanyName)">
+          <mat-form-field>
+            <mat-label>{{'CompanyName' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="selectedCustomerModel.companyName"
+                   type="text" id="editCompanyName"
+                   name="editCompanyName">
+          </mat-form-field>
+        </div>
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.CompanyAddress)">
+          <mat-form-field>
+            <mat-label>{{'CompanyAddress' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="selectedCustomerModel.companyAddress"
+                   type="text" id="editCompanyAddress"
+                   name="editCompanyAddress">
+          </mat-form-field>
+        </div>
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.CompanyAddress)">
+          <mat-form-field>
+            <mat-label>{{'CompanyAddress2' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="selectedCustomerModel.companyAddress2"
+                   type="text" id="editCompanyAddress2"
+                   name="editCompanyAddress2">
+          </mat-form-field>
         </div>
       </div>
-      <div class="modal-footer">
-        <button mdbBtn class="btn-success btn-small-height" [disabled]="!editForm.form.valid" (click)="updateCustomer()" id="saveEditBtn">
-          {{ 'Update' | translate }}
-        </button>
-        <button mdbBtn class="btn-accent text-black-50 btn-small-height" (click)="frame.hide()" id="cancelEditBtn">{{'Cancel' | translate}}</button>
+      <div class="row">
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.ZipCode)">
+          <mat-form-field>
+            <mat-label>{{'ZipCode' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="selectedCustomerModel.zipCode"
+                   type="text" id="editZipCode"
+                   name="editZipCode">
+          </mat-form-field>
+        </div>
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.CityName)">
+          <mat-form-field>
+            <mat-label>{{'CityName' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="selectedCustomerModel.cityName"
+                   type="text" id="editCityName"
+                   name="editCityName">
+          </mat-form-field>
+        </div>
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.Phone)">
+          <mat-form-field>
+            <mat-label>{{'Phone' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="selectedCustomerModel.phone"
+                   type="text" id="editPhone"
+                   name="editPhone">
+          </mat-form-field>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.Email)">
+          <mat-form-field>
+            <mat-label>{{'Email' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="selectedCustomerModel.email"
+                   type="text" id="editEmail"
+                   name="editEmail">
+          </mat-form-field>
+        </div>
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.Email)">
+          <mat-form-field>
+            <mat-label>{{'EanCode' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="selectedCustomerModel.eanCode"
+                   type="text" id="editEanCode"
+                   name="editEanCode">
+          </mat-form-field>
+        </div>
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.Email)">
+          <mat-form-field>
+            <mat-label>{{'VatNumber' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="selectedCustomerModel.vatNumber"
+                   type="text" id="editVatNumber"
+                   name="editVatNumber">
+          </mat-form-field>
+        </div>
       </div>
-    </div>
+      <div class="row">
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.CountryCode)">
+          <mat-form-field>
+            <mat-label>{{'CountryCode' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="selectedCustomerModel.countryCode"
+                   type="text" id="editCountryCode"
+                   name="editCountryCode">
+          </mat-form-field>
+        </div>
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.CadastralNumber)">
+          <mat-form-field>
+            <mat-label>{{'CadastralNumber' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="selectedCustomerModel.cadastralNumber"
+                   type="text" id="editCadastralNumber"
+                   name="editCadastralNumber">
+          </mat-form-field>
+        </div>
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.CrmId)">
+          <mat-form-field>
+            <mat-label>{{'CrmId' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="selectedCustomerModel.crmId"
+                   type="text" id="editCrmId"
+                   name="editCrmId">
+          </mat-form-field>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.PropertyNumber)">
+          <mat-form-field>
+            <mat-label>{{'PropertyNumber' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="selectedCustomerModel.propertyNumber"
+                   type="text" id="editPropertyNumber"
+                   name="editPropertyNumber">
+          </mat-form-field>
+        </div>
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.ApartmentNumber)">
+          <mat-form-field>
+            <mat-label>{{'ApartmentNumber' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="selectedCustomerModel.apartmentNumber"
+                   type="text" id="editApartmentNumber"
+                   name="editApartmentNumber">
+          </mat-form-field>
+        </div>
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.CompletionYear)">
+          <mat-form-field>
+            <mat-label>{{'CompletionYear' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="selectedCustomerModel.completionYear"
+                   type="text" id="editCompletionYear"
+                   name="editCompletionYear">
+          </mat-form-field>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.FloorsWithLivingSpace)">
+          <mat-form-field>
+            <mat-label>{{'FloorsWithLivingSpace' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="selectedCustomerModel.floorsWithLivingSpace"
+                   type="text" id="editFloorsWithLivingSpace"
+                   name="editFloorsWithLivingSpace">
+          </mat-form-field>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col col-xs-12" *ngIf="isFieldAvailable(fieldsEnum.Description)">
+          <label class="text-black-60">{{'Description' | translate}}</label>
+          <div class="p-0 m-0">
+            <pell-pn-editor [(value)]="selectedCustomerModel.description" name="editComment"></pell-pn-editor>
+          </div>
+        </div>
+      </div>
+    </form>
   </div>
 </div>
+<div mat-dialog-actions class="d-flex flex-row justify-content-end">
+  <button mat-raised-button color="accent" [disabled]="!editForm.form.valid" (click)="updateCustomer()" id="saveEditBtn">
+    {{ 'Update' | translate }}
+  </button>
+  <button mat-raised-button (click)="hide()" id="cancelEditBtn">{{'Cancel' | translate}}</button>
+</div>
diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-edit/customer-pn-edit.component.ts b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-edit/customer-pn-edit.component.ts
index f44024df..52c14bb0 100644
--- a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-edit/customer-pn-edit.component.ts
+++ b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-edit/customer-pn-edit.component.ts
@@ -1,7 +1,8 @@
-import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {Component, EventEmitter, Inject, OnInit} from '@angular/core';
 import {CustomerPnFieldsEnum, CustomersPnFieldStatusEnum} from '../../enums';
 import {FieldsPnUpdateModel, CustomerPnFullModel} from '../../models';
 import {CustomersPnService} from '../../services';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 
 @Component({
   selector: 'app-customer-pn-edit',
@@ -10,24 +11,32 @@ import {CustomersPnService} from '../../services';
   standalone: false
 })
 export class CustomerPnEditComponent implements OnInit {
-  @ViewChild('frame', {static: false}) frame;
-  @Input() fieldsModel = new FieldsPnUpdateModel();
-  @Output() onCustomerUpdated: EventEmitter<void> = new EventEmitter<void>();
+  fieldsModel = new FieldsPnUpdateModel();
+  customerUpdate: EventEmitter<void> = new EventEmitter<void>();
 
   get fieldsEnum() { return CustomerPnFieldsEnum; }
 
   selectedCustomerModel = new CustomerPnFullModel();
 
-  constructor(private customersService: CustomersPnService) {
+  constructor(
+    private customersService: CustomersPnService,
+    public dialogRef: MatDialogRef<CustomerPnEditComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: {customerId: number, fields: FieldsPnUpdateModel}
+  ) {
+    if (data && data.fields) {
+      this.fieldsModel = data.fields;
+    }
   }
 
   ngOnInit() {
+    if (this.data && this.data.customerId) {
+      this.getSingleCustomer(this.data.customerId);
+    }
   }
 
-  show(customerId: number) {
+  hide() {
+    this.dialogRef.close();
     this.selectedCustomerModel = new CustomerPnFullModel();
-    this.getSingleCustomer(customerId);
-    this.frame.show();
   }
 
   getSingleCustomer(customerId: number) {
@@ -43,8 +52,8 @@ export class CustomerPnEditComponent implements OnInit {
     this.customersService.updateCustomer(this.selectedCustomerModel).subscribe(((data) => {
       if (data && data.success) {
         this.selectedCustomerModel = new CustomerPnFullModel();
-        this.onCustomerUpdated.emit();
-        this.frame.hide();
+        this.customerUpdate.emit();
+        this.dialogRef.close(true);
       }
 
     }));
diff --git a/eform-client/src/app/plugins/modules/customers-pn/customers-pn.module.ts b/eform-client/src/app/plugins/modules/customers-pn/customers-pn.module.ts
index 6483585b..a196ee15 100644
--- a/eform-client/src/app/plugins/modules/customers-pn/customers-pn.module.ts
+++ b/eform-client/src/app/plugins/modules/customers-pn/customers-pn.module.ts
@@ -5,6 +5,10 @@ import { NgSelectModule } from '@ng-select/ng-select';
 import { TranslateModule } from '@ngx-translate/core';
 import { RouterModule } from '@angular/router';
 import { StoreModule } from '@ngrx/store';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { CustomerPnLayoutComponent } from './layouts';
 import {
   CustomersPnFieldsService,
@@ -36,6 +40,10 @@ import { customersReducer } from './state';
     NgSelectModule,
     EformSharedModule,
     RouterModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatInputModule,
+    MatFormFieldModule,
     StoreModule.forFeature('customersPn', {
       customersState: customersReducer,
     }),

From 9d9ea0d6fa4b2ce67e628cfb9f50dbf0793d5f37 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 3 Oct 2025 06:30:55 +0000
Subject: [PATCH 6/8] Convert add and delete modals to Angular Material Dialog

Co-authored-by: renemadsen <76994+renemadsen@users.noreply.github.com>
---
 .../customer-pn-add.component.html            | 432 ++++++++----------
 .../customer-pn-add.component.ts              |  34 +-
 .../customer-pn-delete.component.html         | 107 ++---
 .../customer-pn-delete.component.ts           |  31 +-
 4 files changed, 289 insertions(+), 315 deletions(-)

diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-add/customer-pn-add.component.html b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-add/customer-pn-add.component.html
index 38cb1790..97181ad7 100644
--- a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-add/customer-pn-add.component.html
+++ b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-add/customer-pn-add.component.html
@@ -1,236 +1,206 @@
-<div mdbModal class="modal fade" #frame="mdbModal">
-  <div class="modal-dialog modal-lg modal-dialog-scrollable">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h3>{{ 'New Customer' | translate }}</h3>
-        <button class="close" data-dismiss="modal" (click)="frame.hide()">
-          <span>×</span>
-        </button>
+<h3 mat-dialog-title>{{ 'New Customer' | translate }}</h3>
+<div mat-dialog-content>
+  <div class="d-flex flex-column">
+    <form #createForm="ngForm">
+      <div class="row">
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.CreatedBy)">
+          <mat-form-field>
+            <mat-label>{{'CreatedBy' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="newCustomerModel.createdBy"
+                   type="text" id="createCreatedBy"
+                   name="createCreatedBy">
+          </mat-form-field>
+        </div>
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.CustomerNo)">
+          <mat-form-field>
+            <mat-label>{{'CustomerNo' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="newCustomerModel.customerNo"
+                   type="text" id="createCustomerNo"
+                   name="createCustomerNo">
+          </mat-form-field>
+        </div>
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.ContactPerson)">
+          <mat-form-field>
+            <mat-label>{{'ContactPerson' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="newCustomerModel.contactPerson"
+                   type="text" id="createContactPerson"
+                   name="createContactPerson">
+          </mat-form-field>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.CompanyName)">
+          <mat-form-field>
+            <mat-label>{{'CompanyName' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="newCustomerModel.companyName"
+                   type="text" id="createCompanyName"
+                   name="createCompanyName">
+          </mat-form-field>
+        </div>
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.CompanyAddress)">
+          <mat-form-field>
+            <mat-label>{{'CompanyAddress' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="newCustomerModel.companyAddress"
+                   type="text" id="createCompanyAddress"
+                   name="createCompanyAddress">
+          </mat-form-field>
+        </div>
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.CompanyAddress)">
+          <mat-form-field>
+            <mat-label>{{'CompanyAddress2' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="newCustomerModel.companyAddress2"
+                   type="text" id="createCompanyAddress2"
+                   name="createCompanyAddress2">
+          </mat-form-field>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.ZipCode)">
+          <mat-form-field>
+            <mat-label>{{'ZipCode' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="newCustomerModel.zipCode"
+                   type="text" id="createZipCode"
+                   name="createZipCode">
+          </mat-form-field>
+        </div>
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.CityName)">
+          <mat-form-field>
+            <mat-label>{{'CityName' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="newCustomerModel.cityName"
+                   type="text" id="createCityName"
+                   name="createCityName">
+          </mat-form-field>
+        </div>
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.Phone)">
+          <mat-form-field>
+            <mat-label>{{'Phone' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="newCustomerModel.phone"
+                   type="text" id="createPhone"
+                   name="createPhone">
+          </mat-form-field>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.Email)">
+          <mat-form-field>
+            <mat-label>{{'Email' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="newCustomerModel.email"
+                   type="text" id="createEmail"
+                   name="createEmail">
+          </mat-form-field>
+        </div>
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.Email)">
+          <mat-form-field>
+            <mat-label>{{'EanCode' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="newCustomerModel.eanCode"
+                   type="text" id="createEanCode"
+                   name="createEanCode">
+          </mat-form-field>
+        </div>
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.Email)">
+          <mat-form-field>
+            <mat-label>{{'VatNumber' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="newCustomerModel.vatNumber"
+                   type="text" id="createVatNumber"
+                   name="createVatNumber">
+          </mat-form-field>
+        </div>
       </div>
-      <div class="modal-body">
-        <div class="container-fluid">
-          <form #createForm="ngForm">
-            <div class="row">
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.CreatedBy)">
-                <div class="md-form">
-                  <input mdbInput
-
-                         [(ngModel)]="newCustomerModel.createdBy"
-                         type="text" id="createCreatedBy"
-                         name="createCreatedBy" class="form-control">
-                  <label for="createCreatedBy">{{'CreatedBy' | translate}}</label>
-                </div>
-              </div>
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.CustomerNo)">
-                <div class="md-form">
-                  <input mdbInput
-
-                         [(ngModel)]="newCustomerModel.customerNo"
-                         type="text" id="createCustomerNo"
-                         name="createCustomerNo" class="form-control">
-                  <label for="createCustomerNo">{{'CustomerNo' | translate}}</label>
-                </div>
-              </div>
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.ContactPerson)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="newCustomerModel.contactPerson"
-                         class="form-control"
-                         type="text" id="createContactPerson"
-                         name="createContactPerson">
-                  <label for="createContactPerson">{{'ContactPerson' | translate}}</label>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.CompanyName)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="newCustomerModel.companyName"
-                         class="form-control"
-                         type="text" id="createCompanyName"
-                         name="createCompanyName">
-                  <label for="createCompanyName">{{'CompanyName' | translate}}</label>
-                </div>
-              </div>
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.CompanyAddress)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="newCustomerModel.companyAddress"
-                         class="form-control"
-                         type="text" id="createCompanyAddress"
-                         name="createCompanyAddress">
-                  <label for="createCompanyAddress">{{'CompanyAddress' | translate}}</label>
-                </div>
-              </div>
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.CompanyAddress2)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="newCustomerModel.companyAddress2"
-                         class="form-control"
-                         type="text" id="createCompanyAddress2"
-                         name="createCompanyAddress2">
-                  <label for="createCompanyAddress2">{{'CompanyAddress2' | translate}}</label>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.ZipCode)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="newCustomerModel.zipCode"
-                         class="form-control"
-                         type="text" id="createZipCode"
-                         name="createZipCode">
-                  <label for="createZipCode">{{'ZipCode' | translate}}</label>
-                </div>
-              </div>
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.CityName)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="newCustomerModel.cityName"
-                         class="form-control"
-                         type="text" id="createCityName"
-                         name="createCityName">
-                  <label for="createCityName">{{'CityName' | translate}}</label>
-                </div>
-              </div>
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.Phone)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="newCustomerModel.phone"
-                         class="form-control"
-                         type="text" id="createPhone"
-                         name="createPhone">
-                  <label for="createPhone">{{'Phone' | translate}}</label>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.Email)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="newCustomerModel.email"
-                         class="form-control"
-                         type="text" id="createEmail"
-                         name="createEmail">
-                  <label for="createEmail">{{'Email' | translate}}</label>
-                </div>
-              </div>
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.EanCode)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="newCustomerModel.eanCode"
-                         class="form-control"
-                         type="text" id="createEanCode"
-                         name="createEanCode">
-                  <label for="createEanCode">{{'EanCode' | translate}}</label>
-                </div>
-              </div>
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.VatNumber)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="newCustomerModel.vatNumber"
-                         class="form-control"
-                         type="text" id="createVatNumber"
-                         name="createVatNumber">
-                  <label for="createVatNumber">{{'VatNumber' | translate}}</label>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.CountryCode)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="newCustomerModel.countryCode"
-                         class="form-control"
-                         type="text" id="createCountryCode"
-                         name="createCountryCode">
-                  <label for="createCountryCode">{{'CountryCode' | translate}}</label>
-                </div>
-              </div>
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.CadastralNumber)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="newCustomerModel.cadastralNumber"
-                         class="form-control"
-                         type="text" id="createCadastralNumber"
-                         name="createCadastralNumber">
-                  <label for="createCadastralNumber">{{'CadastralNumber' | translate}}</label>
-                </div>
-              </div>
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.CrmId)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="newCustomerModel.crmId"
-                         class="form-control"
-                         type="text" id="createCrmId"
-                         name="createCrmId">
-                  <label for="createCrmId">{{'CrmId' | translate}}</label>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.PropertyNumber)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="newCustomerModel.propertyNumber"
-                         class="form-control"
-                         type="text" id="createPropertyNumber"
-                         name="createPropertyNumber">
-                  <label for="createPropertyNumber">{{'PropertyNumber' | translate}}</label>
-                </div>
-              </div>
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.ApartmentNumber)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="newCustomerModel.apartmentNumber"
-                         class="form-control"
-                         type="text" id="createApartmentNumber"
-                         name="createApartmentNumber">
-                  <label for="createApartmentNumber">{{'ApartmentNumber' | translate}}</label>
-                </div>
-              </div>
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.CompletionYear)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="newCustomerModel.completionYear"
-                         class="form-control"
-                         type="text" id="createCompletionYear"
-                         name="createCompletionYear">
-                  <label for="createCompletionYear">{{'CompletionYear' | translate}}</label>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-md-4 " *ngIf="isFieldAvailable(fieldsEnum.FloorsWithLivingSpace)">
-                <div class="md-form">
-                  <input mdbInput
-                          [(ngModel)]="newCustomerModel.floorsWithLivingSpace"
-                         class="form-control"
-                         type="text" id="createFloorsWithLivingSpace"
-                         name="createFloorsWithLivingSpace">
-                  <label for="createFloorsWithLivingSpace">{{'FloorsWithLivingSpace' | translate}}</label>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-            <div class="col col-xs-12" *ngIf="isFieldAvailable(fieldsEnum.Description)">
-              <label class="text-black-60">{{'Description' | translate}}</label>
-              <div class="md-form p-0 m-0">
-                <pell-pn-editor [(value)]="newCustomerModel.description" name="createComment" id="createComment"></pell-pn-editor>
-              </div>
-            </div>
-        </div>
-        </form>
+      <div class="row">
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.CountryCode)">
+          <mat-form-field>
+            <mat-label>{{'CountryCode' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="newCustomerModel.countryCode"
+                   type="text" id="createCountryCode"
+                   name="createCountryCode">
+          </mat-form-field>
+        </div>
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.CadastralNumber)">
+          <mat-form-field>
+            <mat-label>{{'CadastralNumber' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="newCustomerModel.cadastralNumber"
+                   type="text" id="createCadastralNumber"
+                   name="createCadastralNumber">
+          </mat-form-field>
+        </div>
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.CrmId)">
+          <mat-form-field>
+            <mat-label>{{'CrmId' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="newCustomerModel.crmId"
+                   type="text" id="createCrmId"
+                   name="createCrmId">
+          </mat-form-field>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.PropertyNumber)">
+          <mat-form-field>
+            <mat-label>{{'PropertyNumber' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="newCustomerModel.propertyNumber"
+                   type="text" id="createPropertyNumber"
+                   name="createPropertyNumber">
+          </mat-form-field>
+        </div>
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.ApartmentNumber)">
+          <mat-form-field>
+            <mat-label>{{'ApartmentNumber' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="newCustomerModel.apartmentNumber"
+                   type="text" id="createApartmentNumber"
+                   name="createApartmentNumber">
+          </mat-form-field>
+        </div>
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.CompletionYear)">
+          <mat-form-field>
+            <mat-label>{{'CompletionYear' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="newCustomerModel.completionYear"
+                   type="text" id="createCompletionYear"
+                   name="createCompletionYear">
+          </mat-form-field>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-4" *ngIf="isFieldAvailable(fieldsEnum.FloorsWithLivingSpace)">
+          <mat-form-field>
+            <mat-label>{{'FloorsWithLivingSpace' | translate}}</mat-label>
+            <input matInput
+                   [(ngModel)]="newCustomerModel.floorsWithLivingSpace"
+                   type="text" id="createFloorsWithLivingSpace"
+                   name="createFloorsWithLivingSpace">
+          </mat-form-field>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col col-xs-12" *ngIf="isFieldAvailable(fieldsEnum.Description)">
+          <label class="text-black-60">{{'Description' | translate}}</label>
+          <div class="p-0 m-0">
+            <pell-pn-createor [(value)]="newCustomerModel.description" name="createComment"></pell-pn-createor>
+          </div>
+        </div>
       </div>
-    </div>
-    <div class="modal-footer">
-      <button mdbBtn class="btn-success btn-small-height" id="createCustomerBtn" (click)="createCustomer()">
-        {{ 'Create' | translate }}
-      </button>
-      <button mdbBtn class="btn-accent text-black-50 btn-small-height" (click)="frame.hide()" id="cancelCreateCustomerBtn">{{'Cancel' | translate}}</button>
-    </div>
+    </form>
   </div>
 </div>
+<div mat-dialog-actions class="d-flex flex-row justify-content-end">
+  <button mat-raised-button color="accent" [disabled]="!createForm.form.valid" (click)="createCustomer()" id="saveEditBtn">
+    {{ 'Create' | translate }}
+  </button>
+  <button mat-raised-button (click)="hide()" id="cancelEditBtn">{{'Cancel' | translate}}</button>
 </div>
diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-add/customer-pn-add.component.ts b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-add/customer-pn-add.component.ts
index e724e0c6..f02acd67 100644
--- a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-add/customer-pn-add.component.ts
+++ b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-add/customer-pn-add.component.ts
@@ -1,7 +1,8 @@
-import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {Component, EventEmitter, Inject, OnInit} from '@angular/core';
 import {CustomerPnFieldsEnum, CustomersPnFieldStatusEnum} from '../../enums';
 import {FieldsPnUpdateModel, CustomerPnFullModel} from '../../models';
 import {CustomersPnService} from '../../services';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 
 @Component({
   selector: 'app-customer-pn-add',
@@ -10,25 +11,30 @@ import {CustomersPnService} from '../../services';
   standalone: false
 })
 export class CustomerPnAddComponent implements OnInit {
-  @ViewChild('frame', {static: false}) frame;
-  @Output() onCustomerCreated: EventEmitter<void> = new EventEmitter<void>();
-  @Input() fieldsModel = new FieldsPnUpdateModel();
+  customerCreated: EventEmitter<void> = new EventEmitter<void>();
+  fieldsModel = new FieldsPnUpdateModel();
   get fieldsEnum() { return CustomerPnFieldsEnum; }
   newCustomerModel: CustomerPnFullModel = new CustomerPnFullModel();
 
-  constructor(private customersService: CustomersPnService) { }
+  constructor(
+    private customersService: CustomersPnService,
+    public dialogRef: MatDialogRef<CustomerPnAddComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: {customerId?: number, fields: FieldsPnUpdateModel}
+  ) {
+    if (data && data.fields) {
+      this.fieldsModel = data.fields;
+    }
+  }
 
   ngOnInit() {
+    if (this.data && this.data.customerId) {
+      this.getSingleCustomer(this.data.customerId);
+    }
   }
 
-  show() {
-    this.newCustomerModel = new CustomerPnFullModel();
-    this.frame.show();
-  }
-  showCopy(customerId: number) {
+  hide() {
+    this.dialogRef.close();
     this.newCustomerModel = new CustomerPnFullModel();
-    this.getSingleCustomer(customerId);
-    this.frame.show();
   }
 
   getSingleCustomer(customerId: number) {
@@ -45,8 +51,8 @@ export class CustomerPnAddComponent implements OnInit {
     this.customersService.createCustomer(this.newCustomerModel).subscribe(((data) => {
       if (data && data.success) {
         this.newCustomerModel = new CustomerPnFullModel();
-        this.onCustomerCreated.emit();
-        this.frame.hide();
+        this.customerCreated.emit();
+        this.dialogRef.close(true);
       }
     }));
   }
diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-delete/customer-pn-delete.component.html b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-delete/customer-pn-delete.component.html
index 208f09c4..a00cd222 100644
--- a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-delete/customer-pn-delete.component.html
+++ b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-delete/customer-pn-delete.component.html
@@ -1,55 +1,47 @@
-<div mdbModal class="modal fade" #frame="mdbModal">
-  <div class="modal-dialog modal-xl modal-dialog-scrollable">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h3>{{'Are you sure you want to delete' | translate}}?</h3>
-        <button class="close" data-dismiss="modal" (click)="frame.hide()">
-          <span>×</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <div class="row">
-          <div class="col-md-3">
-            <strong>{{'Name:' | translate }}</strong> {{selectedCustomer.contactPerson}}
-          </div>
-          <div class="col-md-3">
-            <strong>{{'Number: ' | translate }}</strong> {{selectedCustomer.customerNo}}
-          </div>
-          <div class="col-md-3">
-            <strong>{{'Address: ' | translate }}</strong> {{selectedCustomer.companyAddress}}
-          </div>
-          <div class="col-md-3">
-            <strong>{{'Address 2: ' | translate }}</strong> {{selectedCustomer.companyAddress2}}
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-md-3">
-            <strong>{{'Zip Code: ' | translate }}</strong> {{selectedCustomer.zipCode}}
-          </div>
-          <div class="col-md-3">
-            <strong>{{'Created By: ' | translate }}</strong> {{selectedCustomer.createdBy}}
-          </div>
-          <div class="col-md-3">
-            <strong>{{'City Name: ' | translate}}</strong> {{selectedCustomer.cityName }}
-          </div>
-          <div class="col-md-3">
-            <strong>{{'Phone: ' | translate}}</strong> {{selectedCustomer.phone }}
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-md-3">
-            <strong>{{'Email: ' | translate}}</strong> {{selectedCustomer.email }}
-          </div>
-          <div class="col-md-3">
-            <strong>{{'EAN Code: ' | translate}}</strong> {{selectedCustomer.eanCode }}
-          </div>
-          <div class="col-md-3">
-            <strong>{{'Vat Number: ' | translate}}</strong> {{selectedCustomer.vatNumber }}
-          </div>
-          <div class="col-md-3">
-            <strong>{{'Country Code: ' | translate}}</strong> {{selectedCustomer.countryCode }}
-          </div>
-        </div>
+<h3 mat-dialog-title>{{'Are you sure you want to delete' | translate}}?</h3>
+<div mat-dialog-content>
+  <div class="row">
+    <div class="col-md-3">
+      <strong>{{'Name:' | translate }}</strong> {{selectedCustomer.contactPerson}}
+    </div>
+    <div class="col-md-3">
+      <strong>{{'Number: ' | translate }}</strong> {{selectedCustomer.customerNo}}
+    </div>
+    <div class="col-md-3">
+      <strong>{{'Address: ' | translate }}</strong> {{selectedCustomer.companyAddress}}
+    </div>
+    <div class="col-md-3">
+      <strong>{{'Address 2: ' | translate }}</strong> {{selectedCustomer.companyAddress2}}
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-3">
+      <strong>{{'Zip Code: ' | translate }}</strong> {{selectedCustomer.zipCode}}
+    </div>
+    <div class="col-md-3">
+      <strong>{{'Created By: ' | translate }}</strong> {{selectedCustomer.createdBy}}
+    </div>
+    <div class="col-md-3">
+      <strong>{{'City Name: ' | translate}}</strong> {{selectedCustomer.cityName }}
+    </div>
+    <div class="col-md-3">
+      <strong>{{'Phone: ' | translate}}</strong> {{selectedCustomer.phone }}
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-3">
+      <strong>{{'Email: ' | translate}}</strong> {{selectedCustomer.email }}
+    </div>
+    <div class="col-md-3">
+      <strong>{{'EAN Code: ' | translate}}</strong> {{selectedCustomer.eanCode }}
+    </div>
+    <div class="col-md-3">
+      <strong>{{'Vat Number: ' | translate}}</strong> {{selectedCustomer.vatNumber }}
+    </div>
+    <div class="col-md-3">
+      <strong>{{'Country Code: ' | translate}}</strong> {{selectedCustomer.countryCode }}
+    </div>
+  </div>
 <!--        <table class="table table-sm table-striped text-center z-depth-1">-->
 <!--          <tbody id="tableBody">-->
 <!--          <ng-container *ngFor="let field of selectedCustomer.fields">-->
@@ -73,11 +65,8 @@ <h3>{{'Are you sure you want to delete' | translate}}?</h3>
 <!--          </ng-container>-->
 <!--          </tbody>-->
 <!--        </table>-->
-      </div>
-      <div class="modal-footer d-flex justify-content-center">
-        <button mdbBtn class="btn-danger btn-small-height" (click)="deleteCustomer()" id="customerSaveDeleteBtn">{{'Delete' | translate}}</button>
-        <button mdbBtn class="btn-accent text-black-50 btn-small-height" (click)="frame.hide()" id="customerDeleteCancelBtn">{{'Close' | translate}}</button>
-      </div>
-    </div>
-  </div>
+</div>
+<div mat-dialog-actions class="d-flex flex-row justify-content-end">
+  <button mat-raised-button color="warn" (click)="deleteCustomer()" id="customerSaveDeleteBtn">{{'Delete' | translate}}</button>
+  <button mat-raised-button (click)="hide()" id="customerDeleteCancelBtn">{{'Close' | translate}}</button>
 </div>
diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-delete/customer-pn-delete.component.ts b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-delete/customer-pn-delete.component.ts
index 960dcb3f..187a0a4b 100644
--- a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-delete/customer-pn-delete.component.ts
+++ b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-delete/customer-pn-delete.component.ts
@@ -1,8 +1,9 @@
-import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {Component, EventEmitter, Inject, OnInit} from '@angular/core';
 import {CustomerPnFieldsEnum} from 'src/app/plugins/modules/customers-pn/enums';
 import {CustomerPnModel} from 'src/app/plugins/modules/customers-pn/models/customer';
 import {FieldsPnUpdateModel} from 'src/app/plugins/modules/customers-pn/models/field';
 import {CustomersPnService} from '../../services';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 
 @Component({
   selector: 'app-customer-pn-delete',
@@ -11,28 +12,36 @@ import {CustomersPnService} from '../../services';
   standalone: false
 })
 export class CustomerPnDeleteComponent implements OnInit {
-  @ViewChild('frame', {static: false}) frame;
-  @Output() onCustomerDeleted: EventEmitter<void> = new EventEmitter<void>();
+  customerDeleted: EventEmitter<void> = new EventEmitter<void>();
   selectedCustomer: CustomerPnModel = new CustomerPnModel();
-  @Input() fields: FieldsPnUpdateModel = new FieldsPnUpdateModel();
+  fields: FieldsPnUpdateModel = new FieldsPnUpdateModel();
   get fieldsEnum() { return CustomerPnFieldsEnum; }
 
-
-  constructor(private customersService: CustomersPnService) { }
+  constructor(
+    private customersService: CustomersPnService,
+    public dialogRef: MatDialogRef<CustomerPnDeleteComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: {customer: CustomerPnModel, fields: FieldsPnUpdateModel}
+  ) {
+    if (data) {
+      this.selectedCustomer = data.customer;
+      if (data.fields) {
+        this.fields = data.fields;
+      }
+    }
+  }
 
   ngOnInit() {
   }
 
-  show(customer: CustomerPnModel) {
-    this.selectedCustomer = customer;
-    this.frame.show();
+  hide() {
+    this.dialogRef.close();
   }
 
   deleteCustomer() {
     this.customersService.deleteCustomer(this.selectedCustomer.id).subscribe(((data) => {
       if (data && data.success) {
-        this.onCustomerDeleted.emit();
-        this.frame.hide();
+        this.customerDeleted.emit();
+        this.dialogRef.close(true);
       }
     }));
   }

From 05fe25ed37dc7369eed8c9bd7f301216090be37c Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 3 Oct 2025 06:46:18 +0000
Subject: [PATCH 7/8] Replace mdbTooltip with matTooltip and add
 MatTooltipModule

Co-authored-by: renemadsen <76994+renemadsen@users.noreply.github.com>
---
 .../customer-pn-import.component.html                  |  4 ++--
 .../customers-pn-page/customers-pn-page.component.html | 10 +++++-----
 .../modules/customers-pn/customers-pn.module.ts        |  2 ++
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-import/customer-pn-import.component.html b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-import/customer-pn-import.component.html
index 0ed7964c..8fff4e32 100644
--- a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-import/customer-pn-import.component.html
+++ b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-import/customer-pn-import.component.html
@@ -107,7 +107,7 @@
     class="btn-danger btn-small-height"
     routerLink="/plugins/customers-pn"
     id="cancelImportBtn"
-    mdbTooltip="{{ 'Cancel' | translate }}"
+    matTooltip="{{ 'Cancel' | translate }}"
   >
     {{ 'Cancel' | translate }}
   </button>
@@ -117,7 +117,7 @@
     (click)="importCustomer()"
     routerLink="/plugins/customers-pn"
     id="continueImportBtn"
-    mdbTooltip="{{ 'Import the customer' | translate }}"
+    matTooltip="{{ 'Import the customer' | translate }}"
   >
     Continue Import
   </button>
diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-page/customers-pn-page.component.html b/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-page/customers-pn-page.component.html
index f23e8e1f..0829a01c 100644
--- a/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-page/customers-pn-page.component.html
+++ b/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-page/customers-pn-page.component.html
@@ -3,7 +3,7 @@
     <button
       mdbBtn
       class="btn-success btn-small-height mb-2"
-      mdbTooltip="{{ 'Create Customer' | translate }}"
+      matTooltip="{{ 'Create Customer' | translate }}"
       id="newCustomerBtn"
       (click)="showCreateCustomerModal()"
     >
@@ -13,7 +13,7 @@
       id="importCustomer"
       mdbBtn
       class="btn-success btn-small-height mb-2"
-      mdbTooltip="{{ 'Import Customer' | translate }}"
+      matTooltip="{{ 'Import Customer' | translate }}"
       routerLink="import"
     >
       {{ 'Import Customer' | translate }}
@@ -152,7 +152,7 @@
               <button
                 mdbBtn
                 class="btn-accent text-black-50 btn-icon mb-2"
-                mdbTooltip="{{ 'Edit Customer' | translate }}"
+                matTooltip="{{ 'Edit Customer' | translate }}"
                 id="editCustomerBtn"
                 (click)="showEditCustomerModal(customer)"
               >
@@ -161,7 +161,7 @@
               <button
                 mdbBtn
                 class="btn-success btn-icon mb-2"
-                mdbTooltip="{{ 'Duplicate Customer' | translate }}"
+                matTooltip="{{ 'Duplicate Customer' | translate }}"
                 id="copyCustomerBtn"
                 (click)="showCopyCustomerModal(customer)"
               >
@@ -170,7 +170,7 @@
               <button
                 mdbBtn
                 class="btn-danger btn-icon mb-2"
-                mdbTooltip="{{ 'Delete Customer' | translate }}"
+                matTooltip="{{ 'Delete Customer' | translate }}"
                 id="deleteCustomerBtn"
                 (click)="showDeleteCustomerModal(customer)"
               >
diff --git a/eform-client/src/app/plugins/modules/customers-pn/customers-pn.module.ts b/eform-client/src/app/plugins/modules/customers-pn/customers-pn.module.ts
index a196ee15..17c038ca 100644
--- a/eform-client/src/app/plugins/modules/customers-pn/customers-pn.module.ts
+++ b/eform-client/src/app/plugins/modules/customers-pn/customers-pn.module.ts
@@ -9,6 +9,7 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatButtonModule } from '@angular/material/button';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { CustomerPnLayoutComponent } from './layouts';
 import {
   CustomersPnFieldsService,
@@ -44,6 +45,7 @@ import { customersReducer } from './state';
     MatButtonModule,
     MatInputModule,
     MatFormFieldModule,
+    MatTooltipModule,
     StoreModule.forFeature('customersPn', {
       customersState: customersReducer,
     }),

From df26d66e1fd9f1da1cd37010460d6bfb5d85290a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 3 Oct 2025 06:59:42 +0000
Subject: [PATCH 8/8] Update customers-pn-page to open modals with
 MatDialog.open()

Co-authored-by: renemadsen <76994+renemadsen@users.noreply.github.com>
---
 .../customers-pn-page.component.html          | 16 -------
 .../customers-pn-page.component.ts            | 45 +++++++++++++++----
 2 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-page/customers-pn-page.component.html b/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-page/customers-pn-page.component.html
index 0829a01c..9ab0aca2 100644
--- a/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-page/customers-pn-page.component.html
+++ b/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-page/customers-pn-page.component.html
@@ -202,19 +202,3 @@
     </div>
   </div>
 </div>
-
-<app-customer-pn-add
-  #createCustomerModal
-  [fieldsModel]="fieldsModel"
-  (onCustomerCreated)="getAllCustomers()"
-></app-customer-pn-add>
-<app-customer-pn-edit
-  #editCustomerModal
-  [fieldsModel]="fieldsModel"
-  (onCustomerUpdated)="getAllCustomers()"
-></app-customer-pn-edit>
-<app-customer-pn-delete
-  #deleteCustomerModal
-  [fields]="fieldsModel"
-  (onCustomerDeleted)="onCustomerDeleted()"
-></app-customer-pn-delete>
diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-page/customers-pn-page.component.ts b/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-page/customers-pn-page.component.ts
index 27387da0..abe13336 100644
--- a/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-page/customers-pn-page.component.ts
+++ b/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-page/customers-pn-page.component.ts
@@ -3,8 +3,8 @@ import {
   EventEmitter,
   OnInit,
   Output,
-  ViewChild,
 } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 import { TableHeaderElementModel } from 'src/app/common/models';
 import { CustomersPnFieldStatusEnum } from '../../enums';
 import {
@@ -15,6 +15,11 @@ import {
 } from '../../models';
 import { CustomersPnFieldsService, CustomersPnService } from '../../services';
 import { CustomersStateService } from '../store';
+import { CustomerPnAddComponent } from '../customer-pn-add/customer-pn-add.component';
+import { CustomerPnEditComponent } from '../customer-pn-edit/customer-pn-edit.component';
+import { CustomerPnDeleteComponent } from '../customer-pn-delete/customer-pn-delete.component';
+import { dialogConfigHelper } from 'src/app/common/helpers';
+import { Overlay } from '@angular/cdk/overlay';
 
 @Component({
   selector: 'app-customers-pn-page',
@@ -23,9 +28,6 @@ import { CustomersStateService } from '../store';
   standalone: false
 })
 export class CustomersPnPageComponent implements OnInit {
-  @ViewChild('createCustomerModal', { static: false }) createCustomerModal;
-  @ViewChild('editCustomerModal', { static: false }) editCustomerModal;
-  @ViewChild('deleteCustomerModal', { static: false }) deleteCustomerModal;
   @Output() onCustomerDuplicated: EventEmitter<void> = new EventEmitter<void>();
   get fieldStatusEnum() {
     return CustomersPnFieldStatusEnum;
@@ -40,7 +42,9 @@ export class CustomersPnPageComponent implements OnInit {
   constructor(
     private customersService: CustomersPnService,
     private customersFieldsService: CustomersPnFieldsService,
-    public customersStateService: CustomersStateService
+    public customersStateService: CustomersStateService,
+    private dialog: MatDialog,
+    private overlay: Overlay
   ) {}
 
   checkFieldStatus(numField: number) {
@@ -101,19 +105,42 @@ export class CustomersPnPageComponent implements OnInit {
   }
 
   showCreateCustomerModal() {
-    this.createCustomerModal.show();
+    const modal = this.dialog.open(CustomerPnAddComponent, {
+      ...dialogConfigHelper(this.overlay, { fields: this.fieldsModel }),
+      minWidth: 600
+    });
+    modal.componentInstance.customerCreated.subscribe(() => {
+      this.getAllCustomers();
+    });
   }
 
   showCopyCustomerModal(model: CustomerPnModel) {
-    this.createCustomerModal.showCopy(model.id);
+    const modal = this.dialog.open(CustomerPnAddComponent, {
+      ...dialogConfigHelper(this.overlay, { customerId: model.id, fields: this.fieldsModel }),
+      minWidth: 600
+    });
+    modal.componentInstance.customerCreated.subscribe(() => {
+      this.getAllCustomers();
+    });
   }
 
   showEditCustomerModal(model: CustomerPnModel) {
-    this.editCustomerModal.show(model.id);
+    const modal = this.dialog.open(CustomerPnEditComponent, {
+      ...dialogConfigHelper(this.overlay, { customerId: model.id, fields: this.fieldsModel }),
+      minWidth: 600
+    });
+    modal.componentInstance.customerUpdate.subscribe(() => {
+      this.getAllCustomers();
+    });
   }
 
   showDeleteCustomerModal(model: CustomerPnModel) {
-    this.deleteCustomerModal.show(model);
+    const modal = this.dialog.open(CustomerPnDeleteComponent, {
+      ...dialogConfigHelper(this.overlay, { customer: model, fields: this.fieldsModel })
+    });
+    modal.componentInstance.customerDeleted.subscribe(() => {
+      this.onCustomerDeleted();
+    });
   }
 
   onSearchInputChanged(value: string) {