WEB-215 Merge angular-update-19 into dev to upgrade Angular from v18 to v19 (#2530)

src/app/centers/centers-view/center-actions/activate-center/activate-center.component.ts

@@ -1,12 +1,13 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { CentersService } from 'app/centers/centers.service';
 import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Activate Center Component
@@ -14,7 +15,10 @@ import { SettingsService } from 'app/settings/settings.service';
 @Component({
   selector: 'mifosx-activate-center',
   templateUrl: './activate-center.component.html',
-  styleUrls: ['./activate-center.component.scss']
+  styleUrls: ['./activate-center.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS
+  ]
 })
 export class ActivateCenterComponent implements OnInit {
   /** Minimum date allowed. */

src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.ts

@@ -1,12 +1,20 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import {
+  UntypedFormGroup,
+  UntypedFormBuilder,
+  Validators,
+  UntypedFormControl,
+  ReactiveFormsModule
+} from '@angular/forms';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { CentersService } from 'app/centers/centers.service';
 import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Center Meetings Component
@@ -14,7 +22,11 @@ import { SettingsService } from 'app/settings/settings.service';
 @Component({
   selector: 'mifosx-attach-center-meeting',
   templateUrl: './attach-center-meeting.component.html',
-  styleUrls: ['./attach-center-meeting.component.scss']
+  styleUrls: ['./attach-center-meeting.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatCheckbox
+  ]
 })
 export class AttachCenterMeetingComponent implements OnInit {
   /** Minimum date allowed. */

src/app/centers/centers-view/center-actions/center-actions.component.ts

@@ -1,6 +1,16 @@
 /** Angular Imports */
 import { Component } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { ActivateCenterComponent } from './activate-center/activate-center.component';
+import { CenterAssignStaffComponent } from './center-assign-staff/center-assign-staff.component';
+import { CloseCenterComponent } from './close-center/close-center.component';
+import { CenterAttendanceComponent } from './center-attendance/center-attendance.component';
+import { AttachCenterMeetingComponent } from './attach-center-meeting/attach-center-meeting.component';
+import { EditCenterMeetingComponent } from './edit-center-meeting/edit-center-meeting.component';
+import { EditCenterMeetingScheduleComponent } from './edit-center-meeting-schedule/edit-center-meeting-schedule.component';
+import { ManageGroupsComponent } from './manage-groups/manage-groups.component';
+import { StaffAssignmentHistoryComponent } from './staff-assignment-history/staff-assignment-history.component';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Center actions component.
@@ -8,7 +18,19 @@ import { ActivatedRoute, Router } from '@angular/router';
 @Component({
   selector: 'mifosx-center-actions',
   templateUrl: './center-actions.component.html',
-  styleUrls: ['./center-actions.component.scss']
+  styleUrls: ['./center-actions.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    ActivateCenterComponent,
+    CenterAssignStaffComponent,
+    CloseCenterComponent,
+    CenterAttendanceComponent,
+    AttachCenterMeetingComponent,
+    EditCenterMeetingComponent,
+    EditCenterMeetingScheduleComponent,
+    ManageGroupsComponent,
+    StaffAssignmentHistoryComponent
+  ]
 })
 export class CenterActionsComponent {
   /** Flag object to store possible actions and render appropriate UI to the user */

src/app/centers/centers-view/center-actions/center-assign-staff/center-assign-staff.component.ts

@@ -1,10 +1,11 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { UntypedFormGroup, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { CentersService } from 'app/centers/centers.service';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Centers Assign Staff Component
@@ -12,7 +13,10 @@ import { CentersService } from 'app/centers/centers.service';
 @Component({
   selector: 'mifosx-center-assign-staff',
   templateUrl: './center-assign-staff.component.html',
-  styleUrls: ['./center-assign-staff.component.scss']
+  styleUrls: ['./center-assign-staff.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS
+  ]
 })
 export class CenterAssignStaffComponent implements OnInit {
   /** Center Assign Staff form. */

src/app/centers/centers-view/center-actions/center-attendance/center-attendance.component.ts

@@ -1,8 +1,8 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormControl } from '@angular/forms';
+import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { CentersService } from 'app/centers/centers.service';
@@ -16,6 +16,25 @@ import { TranslateService } from '@ngx-translate/core';
 import { Dates } from 'app/core/utils/dates';
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
 import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
+import { MatFormField, MatLabel, MatHint } from '@angular/material/form-field';
+import { NgFor, NgSwitch, NgSwitchCase } from '@angular/common';
+import {
+  MatTable,
+  MatColumnDef,
+  MatHeaderCellDef,
+  MatHeaderCell,
+  MatCellDef,
+  MatCell,
+  MatHeaderRowDef,
+  MatHeaderRow,
+  MatRowDef,
+  MatRow
+} from '@angular/material/table';
+import { MatIconButton, MatButton } from '@angular/material/button';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { FindPipe } from '../../../../pipes/find.pipe';
+import { DateFormatPipe } from '../../../../pipes/date-format.pipe';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Center Attendance component.
@@ -23,7 +42,27 @@ import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
 @Component({
   selector: 'mifosx-center-attendance',
   templateUrl: './center-attendance.component.html',
-  styleUrls: ['./center-attendance.component.scss']
+  styleUrls: ['./center-attendance.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatHint,
+    MatTable,
+    MatColumnDef,
+    MatHeaderCellDef,
+    MatHeaderCell,
+    MatCellDef,
+    MatCell,
+    NgSwitch,
+    NgSwitchCase,
+    MatIconButton,
+    FaIconComponent,
+    MatHeaderRowDef,
+    MatHeaderRow,
+    MatRowDef,
+    MatRow,
+    FindPipe,
+    DateFormatPipe
+  ]
 })
 export class CenterAttendanceComponent implements OnInit {
   /** Members data. */

src/app/centers/centers-view/center-actions/close-center/close-center.component.ts

@@ -1,12 +1,13 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { CentersService } from 'app/centers/centers.service';
 import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Close Center Component
@@ -14,7 +15,10 @@ import { SettingsService } from 'app/settings/settings.service';
 @Component({
   selector: 'mifosx-close-center',
   templateUrl: './close-center.component.html',
-  styleUrls: ['./close-center.component.scss']
+  styleUrls: ['./close-center.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS
+  ]
 })
 export class CloseCenterComponent implements OnInit {
   /** Minimum date allowed. */

src/app/centers/centers-view/center-actions/edit-center-meeting-schedule/edit-center-meeting-schedule.component.ts

@@ -1,12 +1,14 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder, Validators, FormControl } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { CentersService } from 'app/centers/centers.service';
 import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
+import { DateFormatPipe } from '../../../../pipes/date-format.pipe';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Edit Center Meetings Schedule Component
@@ -14,7 +16,11 @@ import { SettingsService } from 'app/settings/settings.service';
 @Component({
   selector: 'mifosx-edit-center-meeting-schedule',
   templateUrl: './edit-center-meeting-schedule.component.html',
-  styleUrls: ['./edit-center-meeting-schedule.component.scss']
+  styleUrls: ['./edit-center-meeting-schedule.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    DateFormatPipe
+  ]
 })
 export class EditCenterMeetingScheduleComponent implements OnInit {
   /** Minimum date allowed. */

src/app/centers/centers-view/center-actions/edit-center-meeting/edit-center-meeting.component.ts

@@ -1,12 +1,21 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import {
+  UntypedFormGroup,
+  UntypedFormBuilder,
+  Validators,
+  UntypedFormControl,
+  ReactiveFormsModule
+} from '@angular/forms';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { CentersService } from 'app/centers/centers.service';
 import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { MatFormField, MatLabel, MatError, MatSuffix, MatHint } from '@angular/material/form-field';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Edit Center Meetings Component
@@ -14,7 +23,12 @@ import { SettingsService } from 'app/settings/settings.service';
 @Component({
   selector: 'mifosx-edit-center-meeting',
   templateUrl: './edit-center-meeting.component.html',
-  styleUrls: ['./edit-center-meeting.component.scss']
+  styleUrls: ['./edit-center-meeting.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent,
+    MatHint
+  ]
 })
 export class EditCenterMeetingComponent implements OnInit {
   /** Minimum date allowed. */

src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, AfterViewInit } from '@angular/core';
-import { UntypedFormControl } from '@angular/forms';
+import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 
 /** Custom Dialogs */
@@ -10,11 +10,27 @@ import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.co
 import { CentersService } from 'app/centers/centers.service';
 import { GroupsService } from 'app/groups/groups.service';
 import { MatDialog } from '@angular/material/dialog';
+import { MatAutocompleteTrigger, MatAutocomplete, MatOption } from '@angular/material/autocomplete';
+import { MatIconButton } from '@angular/material/button';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { MatListSubheaderCssMatStyler, MatNavList } from '@angular/material/list';
+import { MatLine } from '@angular/material/grid-list';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-manage-groups',
   templateUrl: './manage-groups.component.html',
-  styleUrls: ['./manage-groups.component.scss']
+  styleUrls: ['./manage-groups.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatAutocompleteTrigger,
+    MatAutocomplete,
+    MatIconButton,
+    FaIconComponent,
+    MatListSubheaderCssMatStyler,
+    MatNavList,
+    MatLine
+  ]
 })
 export class ManageGroupsComponent implements AfterViewInit {
   /** Center Data */

src/app/centers/centers-view/center-actions/staff-assignment-history/staff-assignment-history.component.ts

@@ -1,10 +1,12 @@
 /** Angular Imports */
 import { Component, OnInit, Input } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { CentersService } from '../../../centers.service';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Staff Assignment History Component
@@ -12,7 +14,11 @@ import { CentersService } from '../../../centers.service';
 @Component({
   selector: 'mifosx-staff-assignment-history',
   templateUrl: './staff-assignment-history.component.html',
-  styleUrls: ['./staff-assignment-history.component.scss']
+  styleUrls: ['./staff-assignment-history.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent
+  ]
 })
 export class StaffAssignmentHistoryComponent implements OnInit {
   /** Staff Assignment History Data */

src/app/centers/centers-view/centers-view.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 
 /** Dialog Imports */
@@ -10,13 +10,58 @@ import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/conf
 import { CentersService } from '../centers.service';
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
 import { TranslateService } from '@ngx-translate/core';
+import {
+  MatCard,
+  MatCardHeader,
+  MatCardTitleGroup,
+  MatCardMdImage,
+  MatCardTitle,
+  MatCardSubtitle,
+  MatCardContent
+} from '@angular/material/card';
+import { MatTooltip } from '@angular/material/tooltip';
+import { NgClass, NgIf, NgFor, LowerCasePipe } from '@angular/common';
+import { MatIconButton } from '@angular/material/button';
+import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
+import { MatIcon } from '@angular/material/icon';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { ExternalIdentifierComponent } from '../../shared/external-identifier/external-identifier.component';
+import { MatTabNav, MatTabLink, MatTabNavPanel } from '@angular/material/tabs';
+import { StatusLookupPipe } from '../../pipes/status-lookup.pipe';
+import { DateFormatPipe } from '../../pipes/date-format.pipe';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 /**
  * Create Center View
  */
 @Component({
   selector: 'mifosx-centers-view',
   templateUrl: './centers-view.component.html',
-  styleUrls: ['./centers-view.component.scss']
+  styleUrls: ['./centers-view.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatCardHeader,
+    MatCardTitleGroup,
+    MatCardMdImage,
+    MatCardTitle,
+    MatTooltip,
+    NgClass,
+    MatIconButton,
+    MatMenuTrigger,
+    MatIcon,
+    FaIconComponent,
+    MatCardSubtitle,
+    ExternalIdentifierComponent,
+    MatMenu,
+    MatMenuItem,
+    MatTabNav,
+    MatTabLink,
+    RouterLinkActive,
+    MatTabNavPanel,
+    RouterOutlet,
+    LowerCasePipe,
+    StatusLookupPipe,
+    DateFormatPipe
+  ]
 })
 export class CentersViewComponent implements OnInit {
   /** Stores Center View Data */

src/app/centers/centers-view/datatable-tab/datatable-tab.component.ts

@@ -1,10 +1,16 @@
 import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { EntityDatatableTabComponent } from '../../../shared/tabs/entity-datatable-tab/entity-datatable-tab.component';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-datatable-tab',
   templateUrl: './datatable-tab.component.html',
-  styleUrls: ['./datatable-tab.component.scss']
+  styleUrls: ['./datatable-tab.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    EntityDatatableTabComponent
+  ]
 })
 export class DatatableTabComponent {
   entityId: string;

src/app/centers/centers-view/general-tab/general-tab.component.ts

@@ -1,6 +1,24 @@
 /** Angular Imports */
 import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { NgIf, NgClass } from '@angular/common';
+import {
+  MatTable,
+  MatColumnDef,
+  MatHeaderCellDef,
+  MatHeaderCell,
+  MatCellDef,
+  MatCell,
+  MatHeaderRowDef,
+  MatHeaderRow,
+  MatRowDef,
+  MatRow
+} from '@angular/material/table';
+import { MatSort } from '@angular/material/sort';
+import { MatTooltip } from '@angular/material/tooltip';
+import { StatusLookupPipe } from '../../../pipes/status-lookup.pipe';
+import { DateFormatPipe } from '../../../pipes/date-format.pipe';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Create Center General Tab Component
@@ -8,7 +26,25 @@ import { ActivatedRoute } from '@angular/router';
 @Component({
   selector: 'mifosx-general-tab',
   templateUrl: './general-tab.component.html',
-  styleUrls: ['./general-tab.component.scss']
+  styleUrls: ['./general-tab.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatTable,
+    MatSort,
+    MatColumnDef,
+    MatHeaderCellDef,
+    MatHeaderCell,
+    MatCellDef,
+    MatCell,
+    MatTooltip,
+    NgClass,
+    MatHeaderRowDef,
+    MatHeaderRow,
+    MatRowDef,
+    MatRow,
+    StatusLookupPipe,
+    DateFormatPipe
+  ]
 })
 export class GeneralTabComponent {
   /** Savings Account Table Columns */

src/app/centers/centers-view/notes-tab/notes-tab.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute } from '@angular/router';
 
@@ -11,11 +11,24 @@ import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dial
 import { TranslateService } from '@ngx-translate/core';
 import { AuthenticationService } from '../../../core/authentication/authentication.service';
 import { CentersService } from '../../centers.service';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { MatList, MatListItem } from '@angular/material/list';
+import { MatLine } from '@angular/material/grid-list';
+import { DateFormatPipe } from '../../../pipes/date-format.pipe';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-notes-tab',
   templateUrl: './notes-tab.component.html',
-  styleUrls: ['./notes-tab.component.scss']
+  styleUrls: ['./notes-tab.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent,
+    MatList,
+    MatListItem,
+    MatLine,
+    DateFormatPipe
+  ]
 })
 export class NotesTabComponent implements OnInit {
   centerId: string;

src/app/centers/centers.component.ts

@@ -3,9 +3,9 @@ import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
 import { MatCheckbox } from '@angular/material/checkbox';
 
 import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
-import { UntypedFormControl } from '@angular/forms';
-import { Router, ActivatedRoute } from '@angular/router';
+import { MatSort, MatSortHeader } from '@angular/material/sort';
+import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
+import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 
 /** rxjs Imports */
 import { merge } from 'rxjs';
@@ -16,6 +16,22 @@ import { CentersService } from './centers.service';
 
 /** Custom Data Source */
 import { CentersDataSource } from './centers.datasource';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import {
+  MatTable,
+  MatColumnDef,
+  MatHeaderCellDef,
+  MatHeaderCell,
+  MatCellDef,
+  MatCell,
+  MatHeaderRowDef,
+  MatHeaderRow,
+  MatRowDef,
+  MatRow
+} from '@angular/material/table';
+import { NgClass, AsyncPipe } from '@angular/common';
+import { StatusLookupPipe } from '../pipes/status-lookup.pipe';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Centers component.
@@ -23,7 +39,28 @@ import { CentersDataSource } from './centers.datasource';
 @Component({
   selector: 'mifosx-app-centers',
   templateUrl: './centers.component.html',
-  styleUrls: ['./centers.component.scss']
+  styleUrls: ['./centers.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatCheckbox,
+    FaIconComponent,
+    MatTable,
+    MatSort,
+    MatColumnDef,
+    MatHeaderCellDef,
+    MatHeaderCell,
+    MatSortHeader,
+    MatCellDef,
+    MatCell,
+    NgClass,
+    MatHeaderRowDef,
+    MatHeaderRow,
+    MatRowDef,
+    MatRow,
+    MatPaginator,
+    AsyncPipe,
+    StatusLookupPipe
+  ]
 })
 export class CentersComponent implements OnInit, AfterViewInit {
   @ViewChild('showClosedCenters', { static: true }) showClosedCenters: MatCheckbox;

src/app/centers/centers.module.ts

@@ -43,9 +43,7 @@ import { CenterNotesResolver } from './common-resolvers/center-notes.resolver';
     SharedModule,
     CentersRoutingModule,
     PipesModule,
-    DirectivesModule
-  ],
-  declarations: [
+    DirectivesModule,
     CentersComponent,
     CreateCenterComponent,
     CentersViewComponent,

src/app/centers/create-center/create-center.component.ts

@@ -1,13 +1,25 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder, UntypedFormControl, Validators } from '@angular/forms';
-import { Router, ActivatedRoute } from '@angular/router';
+import {
+  UntypedFormGroup,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  Validators,
+  ReactiveFormsModule
+} from '@angular/forms';
+import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { GroupsService } from 'app/groups/groups.service';
 import { CentersService } from '../centers.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatIconButton, MatButton } from '@angular/material/button';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { MatNavList, MatListSubheaderCssMatStyler } from '@angular/material/list';
+import { MatLine } from '@angular/material/grid-list';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Create Center component.
@@ -15,7 +27,16 @@ import { Dates } from 'app/core/utils/dates';
 @Component({
   selector: 'mifosx-create-center',
   templateUrl: './create-center.component.html',
-  styleUrls: ['./create-center.component.scss']
+  styleUrls: ['./create-center.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatCheckbox,
+    MatIconButton,
+    FaIconComponent,
+    MatNavList,
+    MatListSubheaderCssMatStyler,
+    MatLine
+  ]
 })
 export class CreateCenterComponent implements OnInit {
   /** Minimum date allowed. */

src/app/centers/edit-center/edit-center.component.ts

@@ -1,12 +1,19 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder, UntypedFormControl, Validators } from '@angular/forms';
-import { Router, ActivatedRoute } from '@angular/router';
+import {
+  UntypedFormGroup,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  Validators,
+  ReactiveFormsModule
+} from '@angular/forms';
+import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { CentersService } from '../centers.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Edit Center component.
@@ -14,7 +21,10 @@ import { Dates } from 'app/core/utils/dates';
 @Component({
   selector: 'mifosx-edit-center',
   templateUrl: './edit-center.component.html',
-  styleUrls: ['./edit-center.component.scss']
+  styleUrls: ['./edit-center.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS
+  ]
 })
 export class EditCenterComponent implements OnInit {
   /** Center Data */