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

angular.json

@@ -18,7 +18,7 @@
       },
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "aot": true,
             "outputPath": {
@@ -97,7 +97,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "options": {
             "buildTarget": "mifosx-web-app:build"
           },
@@ -112,7 +112,7 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
             "buildTarget": "mifosx-web-app:build"
           }

package.json

@@ -30,28 +30,28 @@
     "cypress:run": "cypress run"
   },
   "dependencies": {
-    "@angular-devkit/schematics": "18.2.19",
+    "@angular-devkit/schematics": "19.2.15",
-    "@angular/animations": "18.2.13",
+    "@angular/animations": "19.2.14",
-    "@angular/cdk": "^18.2.14",
+    "@angular/cdk": "^19.2.18",
-    "@angular/common": "18.2.13",
+    "@angular/common": "19.2.14",
-    "@angular/compiler": "18.2.13",
+    "@angular/compiler": "19.2.14",
-    "@angular/core": "18.2.13",
+    "@angular/core": "19.2.14",
-    "@angular/forms": "18.2.13",
+    "@angular/forms": "19.2.14",
-    "@angular/localize": "18.2.13",
+    "@angular/localize": "19.2.14",
-    "@angular/material": "^18.2.14",
+    "@angular/material": "^19.2.18",
-    "@angular/platform-browser": "18.2.13",
+    "@angular/platform-browser": "19.2.14",
-    "@angular/platform-browser-dynamic": "18.2.13",
+    "@angular/platform-browser-dynamic": "19.2.14",
-    "@angular/router": "18.2.13",
+    "@angular/router": "19.2.14",
     "@ckeditor/ckeditor5-angular": "6.0.1",
     "@ckeditor/ckeditor5-build-classic": "40.2.0",
-    "@fortawesome/angular-fontawesome": "^0.15.0",
+    "@fortawesome/angular-fontawesome": "^1.0.0",
     "@fortawesome/fontawesome-free": "^6.7.2",
     "@fortawesome/fontawesome-svg-core": "6.2.1",
     "@fortawesome/free-brands-svg-icons": "6.7.2",
     "@fortawesome/free-solid-svg-icons": "6.2.1",
     "@ngx-translate/core": "^16.0.4",
     "@ngx-translate/http-loader": "^16.0.1",
-    "@swimlane/ngx-graph": "^9.0.1",
+    "@swimlane/ngx-graph": "^10.0.0",
     "@tailwindcss/forms": "^0.5.4",
     "chart.js": "3.0.0-alpha",
     "d3": "^7.9.0",
@@ -65,19 +65,19 @@
     "rxjs": "7.8.1",
     "tslib": "^2.0.0",
     "vkbeautify": "^0.99.3",
-    "zone.js": "0.14.10"
+    "zone.js": "0.15.1"
   },
   "devDependencies": {
-    "@angular-builders/jest": "^18.0.0",
+    "@angular-builders/jest": "^19.0.1",
-    "@angular-devkit/build-angular": "^18.2.19",
     "@angular-eslint/builder": "^19.7.0",
     "@angular-eslint/eslint-plugin": "^19.7.0",
     "@angular-eslint/eslint-plugin-template": "^19.7.0",
     "@angular-eslint/schematics": "^19.7.0",
     "@angular-eslint/template-parser": "^19.7.0",
-    "@angular/cli": "18.2.19",
+    "@angular/build": "^19.2.15",
-    "@angular/compiler-cli": "18.2.13",
+    "@angular/cli": "19.2.15",
-    "@angular/language-service": "18.2.13",
+    "@angular/compiler-cli": "19.2.14",
+    "@angular/language-service": "19.2.14",
     "@cypress/schematic": "^2.5.2",
     "@types/d3-dispatch": "^3.0.1",
     "@types/d3-drag": "^3.0.1",

src/app/account-transfers/account-transfers.module.ts

@@ -26,9 +26,7 @@ import { MakeAccountInterbankTransfersComponent } from './make-account-interbank
     SharedModule,
     PipesModule,
     DirectivesModule,
-    AccountTransfersRoutingModule
+    AccountTransfersRoutingModule,
-  ],
-  declarations: [
     ViewStandingInstructionsComponent,
     EditStandingInstructionsComponent,
     CreateStandingInstructionsComponent,

src/app/account-transfers/account-transfers.service.ts

@@ -6,7 +6,7 @@ import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { Observable } from 'rxjs';
 
 /** Environment Configuration */
-import { environment } from 'environments/environment';
+import { environment } from '../../environments/environment';
 import { switchMap } from 'rxjs/operators';
 
 /**

src/app/account-transfers/create-standing-instructions/create-standing-instructions.component.ts

@@ -1,12 +1,13 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
-import { UntypedFormBuilder, UntypedFormGroup, Validators, FormControl } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators, FormControl, ReactiveFormsModule } from '@angular/forms';
 
 /** Custom Services */
 import { AccountTransfersService } from '../account-transfers.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Create Standing Instructions
@@ -14,7 +15,10 @@ import { Dates } from 'app/core/utils/dates';
 @Component({
   selector: 'mifosx-create-standing-instructions',
   templateUrl: './create-standing-instructions.component.html',
-  styleUrls: ['./create-standing-instructions.component.scss']
+  styleUrls: ['./create-standing-instructions.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS
+  ]
 })
 export class CreateStandingInstructionsComponent implements OnInit {
   /** Standing Instructions Data */

src/app/account-transfers/edit-standing-instructions/edit-standing-instructions.component.ts

@@ -1,12 +1,13 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
-import { UntypedFormBuilder, UntypedFormGroup, Validators, FormControl } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators, FormControl, ReactiveFormsModule } from '@angular/forms';
 
 /** Custom Services */
 import { AccountTransfersService } from '../account-transfers.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 Standing Instructions
@@ -14,7 +15,10 @@ import { Dates } from 'app/core/utils/dates';
 @Component({
   selector: 'mifosx-edit-standing-instructions',
   templateUrl: './edit-standing-instructions.component.html',
-  styleUrls: ['./edit-standing-instructions.component.scss']
+  styleUrls: ['./edit-standing-instructions.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS
+  ]
 })
 export class EditStandingInstructionsComponent implements OnInit {
   /** Standing Instructions Data */

src/app/account-transfers/list-standing-instructions/list-standing-instructions.component.ts

@@ -2,9 +2,21 @@
 import { Component, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
-import { MatTableDataSource, MatTable } from '@angular/material/table';
+import {
-import { ActivatedRoute } from '@angular/router';
+  MatTableDataSource,
-import { UntypedFormControl } from '@angular/forms';
+  MatTable,
+  MatColumnDef,
+  MatHeaderCellDef,
+  MatHeaderCell,
+  MatCellDef,
+  MatCell,
+  MatHeaderRowDef,
+  MatHeaderRow,
+  MatRowDef,
+  MatRow
+} from '@angular/material/table';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 
 /** Custom Services */
 import { AccountTransfersService } from '../account-transfers.service';
@@ -12,6 +24,10 @@ import { AccountTransfersService } from '../account-transfers.service';
 /** Dialog Components */
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
 import { SettingsService } from 'app/settings/settings.service';
+import { MatDivider } from '@angular/material/divider';
+import { MatTooltip } from '@angular/material/tooltip';
+import { DateFormatPipe } from '../../pipes/date-format.pipe';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Lists all the standing intructions of particular ID
@@ -19,7 +35,24 @@ import { SettingsService } from 'app/settings/settings.service';
 @Component({
   selector: 'mifosx-list-standing-instructions',
   templateUrl: './list-standing-instructions.component.html',
-  styleUrls: ['./list-standing-instructions.component.scss']
+  styleUrls: ['./list-standing-instructions.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDivider,
+    MatTable,
+    MatColumnDef,
+    MatHeaderCellDef,
+    MatHeaderCell,
+    MatCellDef,
+    MatCell,
+    MatTooltip,
+    MatHeaderRowDef,
+    MatHeaderRow,
+    MatRowDef,
+    MatRow,
+    MatPaginator,
+    DateFormatPipe
+  ]
 })
 export class ListStandingInstructionsComponent {
   /** Recurring Deposits Data */

src/app/account-transfers/list-transactions/list-transactions.component.ts

@@ -2,9 +2,24 @@
 import { Component, ViewChild } from '@angular/core';
 
 import { MatPaginator } from '@angular/material/paginator';
-import { MatTableDataSource } from '@angular/material/table';
+import {
+  MatTableDataSource,
+  MatTable,
+  MatColumnDef,
+  MatHeaderCellDef,
+  MatHeaderCell,
+  MatCellDef,
+  MatCell,
+  MatHeaderRowDef,
+  MatHeaderRow,
+  MatRowDef,
+  MatRow
+} from '@angular/material/table';
 
 import { ActivatedRoute } from '@angular/router';
+import { DateFormatPipe } from '../../pipes/date-format.pipe';
+import { YesnoPipe } from '../../pipes/yesno.pipe';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Recurring Deposits Standing Instructions Tab
@@ -12,7 +27,23 @@ import { ActivatedRoute } from '@angular/router';
 @Component({
   selector: 'mifosx-list-transactions',
   templateUrl: './list-transactions.component.html',
-  styleUrls: ['./list-transactions.component.scss']
+  styleUrls: ['./list-transactions.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatTable,
+    MatColumnDef,
+    MatHeaderCellDef,
+    MatHeaderCell,
+    MatCellDef,
+    MatCell,
+    MatHeaderRowDef,
+    MatHeaderRow,
+    MatRowDef,
+    MatRow,
+    MatPaginator,
+    DateFormatPipe,
+    YesnoPipe
+  ]
 })
 export class ListTransactionsComponent {
   /** List Transactions Data */

src/app/account-transfers/make-account-interbank-transfers/make-account-interbank-transfers.component.ts

@@ -1,10 +1,18 @@
 import { Component, Input } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-make-account-interbank-transfers',
   templateUrl: './make-account-interbank-transfers.component.html',
-  styleUrls: ['./make-account-interbank-transfers.component.scss']
+  styleUrls: ['./make-account-interbank-transfers.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent,
+    CdkTextareaAutosize
+  ]
 })
 export class MakeAccountInterbankTransfersComponent {
   @Input() makeAccountTransferForm: FormGroup;

src/app/account-transfers/make-account-transfers/make-account-transfers.component.ts

@@ -1,13 +1,15 @@
 /** Angular Imports */
 import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import {
   AbstractControl,
   FormGroup,
   UntypedFormBuilder,
   UntypedFormGroup,
   ValidationErrors,
-  Validators
+  Validators,
+  ReactiveFormsModule,
+  FormsModule
 } from '@angular/forms';
 
 /** Custom Services */
@@ -17,7 +19,14 @@ import { ClientsService } from 'app/clients/clients.service';
 import { Dates } from 'app/core/utils/dates';
 
 /** Environment Configuration */
-import { environment } from 'environments/environment';
+import { environment } from '../../../environments/environment';
+import { MatDivider } from '@angular/material/divider';
+import { MatFormField, MatLabel, MatHint, MatSuffix, MatError } from '@angular/material/form-field';
+import { MatOption, MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
+import { MakeAccountInterbankTransfersComponent } from '../make-account-interbank-transfers/make-account-interbank-transfers.component';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Create account transfers
@@ -25,7 +34,18 @@ import { environment } from 'environments/environment';
 @Component({
   selector: 'mifosx-make-account-transfers',
   templateUrl: './make-account-transfers.component.html',
-  styleUrls: ['./make-account-transfers.component.scss']
+  styleUrls: ['./make-account-transfers.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDivider,
+    FormsModule,
+    MatHint,
+    MatAutocompleteTrigger,
+    MatAutocomplete,
+    FaIconComponent,
+    CdkTextareaAutosize,
+    MakeAccountInterbankTransfersComponent
+  ]
 })
 export class MakeAccountTransfersComponent implements OnInit, AfterViewInit {
   /** Standing Instructions Data */

src/app/account-transfers/view-account-transfer/view-account-transfer.component.ts

@@ -1,12 +1,25 @@
 /** Angular Imports */
-import { Location } from '@angular/common';
+import { Location, NgIf, NgClass } from '@angular/common';
 import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { MatDivider } from '@angular/material/divider';
+import { DateFormatPipe } from '../../pipes/date-format.pipe';
+import { FormatNumberPipe } from '../../pipes/format-number.pipe';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-view-account-transfer',
   templateUrl: './view-account-transfer.component.html',
-  styleUrls: ['./view-account-transfer.component.scss']
+  styleUrls: ['./view-account-transfer.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent,
+    NgClass,
+    MatDivider,
+    DateFormatPipe,
+    FormatNumberPipe
+  ]
 })
 export class ViewAccountTransferComponent {
   viewAccountTransferData: any;

src/app/account-transfers/view-standing-instructions/view-standing-instructions.component.ts

@@ -1,11 +1,21 @@
 /** Angular Imports */
 import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { MatDivider } from '@angular/material/divider';
+import { DateFormatPipe } from '../../pipes/date-format.pipe';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-view-standing-instructions',
   templateUrl: './view-standing-instructions.component.html',
-  styleUrls: ['./view-standing-instructions.component.scss']
+  styleUrls: ['./view-standing-instructions.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent,
+    MatDivider,
+    DateFormatPipe
+  ]
 })
 export class ViewStandingInstructionsComponent {
   /** Standing Instructions Data */

src/app/accounting/accounting-rules/accounting-rules.component.ts

@@ -1,9 +1,23 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+import { MatSort, MatSortHeader } from '@angular/material/sort';
-import { MatTableDataSource } from '@angular/material/table';
+import {
-import { ActivatedRoute } from '@angular/router';
+  MatTableDataSource,
+  MatTable,
+  MatColumnDef,
+  MatHeaderCellDef,
+  MatHeaderCell,
+  MatCellDef,
+  MatCell,
+  MatHeaderRowDef,
+  MatHeaderRow,
+  MatRowDef,
+  MatRow
+} from '@angular/material/table';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Accounting rules component.
@@ -11,7 +25,24 @@ import { ActivatedRoute } from '@angular/router';
 @Component({
   selector: 'mifosx-accounting-rules',
   templateUrl: './accounting-rules.component.html',
-  styleUrls: ['./accounting-rules.component.scss']
+  styleUrls: ['./accounting-rules.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent,
+    MatTable,
+    MatSort,
+    MatColumnDef,
+    MatHeaderCellDef,
+    MatHeaderCell,
+    MatSortHeader,
+    MatCellDef,
+    MatCell,
+    MatHeaderRowDef,
+    MatHeaderRow,
+    MatRowDef,
+    MatRow,
+    MatPaginator
+  ]
 })
 export class AccountingRulesComponent implements OnInit {
   /** Accounting rule data. */

src/app/accounting/accounting-rules/create-rule/create-rule.component.ts

@@ -1,13 +1,17 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
-import { Router, ActivatedRoute } from '@angular/router';
+import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { AccountingService } from '../../accounting.service';
 
 /** Custom Validators */
 import { oneOfTheFieldsIsRequiredValidator } from '../one-of-the-fields-is-required.validator';
+import { MatRadioGroup, MatRadioButton } from '@angular/material/radio';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Create accounting rule component.
@@ -15,7 +19,14 @@ import { oneOfTheFieldsIsRequiredValidator } from '../one-of-the-fields-is-requi
 @Component({
   selector: 'mifosx-create-rule',
   templateUrl: './create-rule.component.html',
-  styleUrls: ['./create-rule.component.scss']
+  styleUrls: ['./create-rule.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatRadioGroup,
+    MatRadioButton,
+    MatCheckbox,
+    CdkTextareaAutosize
+  ]
 })
 export class CreateRuleComponent implements OnInit {
   /** Accounting rule form. */

src/app/accounting/accounting-rules/edit-rule/edit-rule.component.ts

@@ -1,13 +1,17 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
-import { Router, ActivatedRoute } from '@angular/router';
+import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { AccountingService } from '../../accounting.service';
 
 /** Custom Validators */
 import { oneOfTheFieldsIsRequiredValidator } from '../one-of-the-fields-is-required.validator';
+import { MatRadioGroup, MatRadioButton } from '@angular/material/radio';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Edit accounting rule component.
@@ -15,7 +19,14 @@ import { oneOfTheFieldsIsRequiredValidator } from '../one-of-the-fields-is-requi
 @Component({
   selector: 'mifosx-edit-rule',
   templateUrl: './edit-rule.component.html',
-  styleUrls: ['./edit-rule.component.scss']
+  styleUrls: ['./edit-rule.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatRadioGroup,
+    MatRadioButton,
+    MatCheckbox,
+    CdkTextareaAutosize
+  ]
 })
 export class EditRuleComponent implements OnInit {
   /** Accounting rule form. */

src/app/accounting/accounting-rules/view-rule/view-rule.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 
 /** Custom Services */
@@ -8,6 +8,8 @@ import { AccountingService } from '../../accounting.service';
 
 /** Custom Components */
 import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dialog.component';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * View accounting rule component.
@@ -15,7 +17,11 @@ import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dial
 @Component({
   selector: 'mifosx-view-rule',
   templateUrl: './view-rule.component.html',
-  styleUrls: ['./view-rule.component.scss']
+  styleUrls: ['./view-rule.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent
+  ]
 })
 export class ViewRuleComponent {
   /** Accounting rule. */

src/app/accounting/accounting.component.ts

@@ -1,10 +1,15 @@
 /** Angular Imports */
 import { AfterViewInit, Component, ElementRef, TemplateRef, ViewChild } from '@angular/core';
-import { Router } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { ConfigurationWizardService } from '../configuration-wizard/configuration-wizard.service';
 import { PopoverService } from '../configuration-wizard/popover/popover.service';
+import { MatNavList, MatListItem } from '@angular/material/list';
+import { MatIcon } from '@angular/material/icon';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { MatLine } from '@angular/material/grid-list';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Accounting component.
@@ -12,7 +17,15 @@ import { PopoverService } from '../configuration-wizard/popover/popover.service'
 @Component({
   selector: 'mifosx-accounting',
   templateUrl: './accounting.component.html',
-  styleUrls: ['./accounting.component.scss']
+  styleUrls: ['./accounting.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatNavList,
+    MatListItem,
+    MatIcon,
+    FaIconComponent,
+    MatLine
+  ]
 })
 export class AccountingComponent implements AfterViewInit {
   /* Reference of Chart of Accounts */

src/app/accounting/accounting.module.ts

@@ -46,9 +46,7 @@ import { PipesModule } from 'app/pipes/pipes.module';
     SharedModule,
     DirectivesModule,
     AccountingRoutingModule,
-    PipesModule
+    PipesModule,
-  ],
-  declarations: [
     AccountingComponent,
     FrequentPostingsComponent,
     CreateJournalEntryComponent,

src/app/accounting/chart-of-accounts/chart-of-accounts.component.ts

@@ -1,12 +1,32 @@
 /** Angular Imports */
 import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+import { MatSort, MatSortHeader } from '@angular/material/sort';
-import { MatTableDataSource } from '@angular/material/table';
+import {
-import { MatTreeNestedDataSource } from '@angular/material/tree';
+  MatTableDataSource,
+  MatTable,
+  MatColumnDef,
+  MatHeaderCellDef,
+  MatHeaderCell,
+  MatCellDef,
+  MatCell,
+  MatHeaderRowDef,
+  MatHeaderRow,
+  MatRowDef,
+  MatRow
+} from '@angular/material/table';
+import {
+  MatTreeNestedDataSource,
+  MatTree,
+  MatTreeNodeDef,
+  MatTreeNode,
+  MatTreeNodeToggle,
+  MatNestedTreeNode,
+  MatTreeNodeOutlet
+} from '@angular/material/tree';
 import { NestedTreeControl } from '@angular/cdk/tree';
-import { UntypedFormControl } from '@angular/forms';
+import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 /** rxjs Imports */
 import { of } from 'rxjs';
@@ -19,6 +39,11 @@ import { GlAccountTreeService } from './gl-account-tree.service';
 import { PopoverService } from '../../configuration-wizard/popover/popover.service';
 import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
 import { TreeControlService } from 'app/shared/common-logic/tree-control.service';
+import { MatButtonToggleGroup, MatButtonToggle } from '@angular/material/button-toggle';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { MatButton, MatIconButton } from '@angular/material/button';
+import { MatTooltip } from '@angular/material/tooltip';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Chart of accounts component.
@@ -26,7 +51,34 @@ import { TreeControlService } from 'app/shared/common-logic/tree-control.service
 @Component({
   selector: 'mifosx-chart-of-accounts',
   templateUrl: './chart-of-accounts.component.html',
-  styleUrls: ['./chart-of-accounts.component.scss']
+  styleUrls: ['./chart-of-accounts.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatButtonToggleGroup,
+    MatButtonToggle,
+    FaIconComponent,
+    MatTable,
+    MatSort,
+    MatColumnDef,
+    MatHeaderCellDef,
+    MatHeaderCell,
+    MatSortHeader,
+    MatCellDef,
+    MatCell,
+    MatTooltip,
+    MatHeaderRowDef,
+    MatHeaderRow,
+    MatRowDef,
+    MatRow,
+    MatPaginator,
+    MatTree,
+    MatTreeNodeDef,
+    MatTreeNode,
+    MatTreeNodeToggle,
+    MatIconButton,
+    MatNestedTreeNode,
+    MatTreeNodeOutlet
+  ]
 })
 export class ChartOfAccountsComponent implements AfterViewInit, OnInit {
   /** Button toggle group form control for type of view. (list/tree) */

src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
-import { Router, ActivatedRoute } from '@angular/router';
+import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 
 /** Custom Services */
@@ -12,6 +12,10 @@ import { ConfigurationWizardService } from '../../../configuration-wizard/config
 /** Custom Dialog Component */
 import { ContinueSetupDialogComponent } from '../../../configuration-wizard/continue-setup-dialog/continue-setup-dialog.component';
 import { GLAccount } from 'app/shared/models/general.model';
+import { GlAccountSelectorComponent } from '../../../shared/accounting/gl-account-selector/gl-account-selector.component';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Create gl account component.
@@ -19,7 +23,13 @@ import { GLAccount } from 'app/shared/models/general.model';
 @Component({
   selector: 'mifosx-create-gl-account',
   templateUrl: './create-gl-account.component.html',
-  styleUrls: ['./create-gl-account.component.scss']
+  styleUrls: ['./create-gl-account.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    GlAccountSelectorComponent,
+    MatCheckbox,
+    CdkTextareaAutosize
+  ]
 })
 export class CreateGlAccountComponent implements OnInit, AfterViewInit {
   /** GL account form. */

src/app/accounting/chart-of-accounts/edit-gl-account/edit-gl-account.component.ts

@@ -1,10 +1,14 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
-import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 
 /** Custom Services */
 import { AccountingService } from '../../accounting.service';
+import { GlAccountSelectorComponent } from '../../../shared/accounting/gl-account-selector/gl-account-selector.component';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Edit gl account component.
@@ -12,7 +16,13 @@ import { AccountingService } from '../../accounting.service';
 @Component({
   selector: 'mifosx-edit-gl-account',
   templateUrl: './edit-gl-account.component.html',
-  styleUrls: ['./edit-gl-account.component.scss']
+  styleUrls: ['./edit-gl-account.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    GlAccountSelectorComponent,
+    MatCheckbox,
+    CdkTextareaAutosize
+  ]
 })
 export class EditGlAccountComponent implements OnInit {
   /** GL account form. */

src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 
 /** Custom Components */
@@ -8,7 +8,11 @@ import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dial
 
 /** Custom Services */
 import { AccountingService } from '../../accounting.service';
-import { Location } from '@angular/common';
+import { Location, NgIf } from '@angular/common';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { GlAccountDisplayComponent } from '../../../shared/accounting/gl-account-display/gl-account-display.component';
+import { YesnoPipe } from '../../../pipes/yesno.pipe';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * View gl account component.
@@ -16,7 +20,13 @@ import { Location } from '@angular/common';
 @Component({
   selector: 'mifosx-view-gl-account',
   templateUrl: './view-gl-account.component.html',
-  styleUrls: ['./view-gl-account.component.scss']
+  styleUrls: ['./view-gl-account.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent,
+    GlAccountDisplayComponent,
+    YesnoPipe
+  ]
 })
 export class ViewGlAccountComponent {
   /** GL Account. */

src/app/accounting/closing-entries/closing-entries.component.ts

@@ -1,10 +1,22 @@
 /** Angular Imports */
 import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+import { MatSort, MatSortHeader } from '@angular/material/sort';
-import { MatTableDataSource } from '@angular/material/table';
+import {
-import { UntypedFormControl } from '@angular/forms';
+  MatTableDataSource,
-import { ActivatedRoute, Router } from '@angular/router';
+  MatTable,
+  MatColumnDef,
+  MatHeaderCellDef,
+  MatHeaderCell,
+  MatCellDef,
+  MatCell,
+  MatHeaderRowDef,
+  MatHeaderRow,
+  MatRowDef,
+  MatRow
+} from '@angular/material/table';
+import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 /** rxjs Imports */
 import { startWith, map } from 'rxjs/operators';
@@ -12,6 +24,10 @@ import { startWith, map } from 'rxjs/operators';
 /** Custom Services */
 import { PopoverService } from '../../configuration-wizard/popover/popover.service';
 import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { MatAutocompleteTrigger, MatAutocomplete, MatOption } from '@angular/material/autocomplete';
+import { NgFor, AsyncPipe } from '@angular/common';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Closing entries component.
@@ -19,7 +35,27 @@ import { ConfigurationWizardService } from '../../configuration-wizard/configura
 @Component({
   selector: 'mifosx-closing-entries',
   templateUrl: './closing-entries.component.html',
-  styleUrls: ['./closing-entries.component.scss']
+  styleUrls: ['./closing-entries.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent,
+    MatAutocompleteTrigger,
+    MatAutocomplete,
+    MatTable,
+    MatSort,
+    MatColumnDef,
+    MatHeaderCellDef,
+    MatHeaderCell,
+    MatSortHeader,
+    MatCellDef,
+    MatCell,
+    MatHeaderRowDef,
+    MatHeaderRow,
+    MatRowDef,
+    MatRow,
+    MatPaginator,
+    AsyncPipe
+  ]
 })
 export class ClosingEntriesComponent implements OnInit, AfterViewInit {
   /** Columns to be displayed in closing entries table. */

src/app/accounting/closing-entries/create-closure/create-closure.component.ts

@@ -1,19 +1,25 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
-import { Router, ActivatedRoute } from '@angular/router';
+import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { AccountingService } from '../../accounting.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 /**
  * Create closure component.
  */
 @Component({
   selector: 'mifosx-create-closure',
   templateUrl: './create-closure.component.html',
-  styleUrls: ['./create-closure.component.scss']
+  styleUrls: ['./create-closure.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    CdkTextareaAutosize
+  ]
 })
 export class CreateClosureComponent implements OnInit {
   /** Minimum closing date allowed. */

src/app/accounting/closing-entries/edit-closure/edit-closure.component.ts

@@ -1,10 +1,12 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
-import { Router, ActivatedRoute } from '@angular/router';
+import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { AccountingService } from '../../accounting.service';
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Edit closure component.
@@ -12,7 +14,11 @@ import { AccountingService } from '../../accounting.service';
 @Component({
   selector: 'mifosx-edit-closure',
   templateUrl: './edit-closure.component.html',
-  styleUrls: ['./edit-closure.component.scss']
+  styleUrls: ['./edit-closure.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    CdkTextareaAutosize
+  ]
 })
 export class EditClosureComponent implements OnInit {
   /** Accounting closure form. */

src/app/accounting/closing-entries/view-closure/view-closure.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 
 /** Custom Services */
@@ -8,6 +8,8 @@ import { AccountingService } from '../../accounting.service';
 
 /** Custom Components */
 import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dialog.component';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * View closure component.
@@ -15,7 +17,11 @@ import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dial
 @Component({
   selector: 'mifosx-view-closure',
   templateUrl: './view-closure.component.html',
-  styleUrls: ['./view-closure.component.scss']
+  styleUrls: ['./view-closure.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent
+  ]
 })
 export class ViewClosureComponent {
   /** GL Account closure. */

src/app/accounting/create-journal-entry/create-journal-entry.component.ts

@@ -1,7 +1,13 @@
 /** Angular Imports */
 import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormArray } from '@angular/forms';
+import {
-import { Router, ActivatedRoute } from '@angular/router';
+  UntypedFormGroup,
+  UntypedFormBuilder,
+  Validators,
+  UntypedFormArray,
+  ReactiveFormsModule
+} from '@angular/forms';
+import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 
 /** Custom Services */
@@ -13,13 +19,25 @@ import { ConfigurationWizardService } from '../../configuration-wizard/configura
 
 /** Custom Dialog Component */
 import { NextStepDialogComponent } from '../../configuration-wizard/next-step-dialog/next-step-dialog.component';
+import { GlAccountSelectorComponent } from '../../shared/accounting/gl-account-selector/gl-account-selector.component';
+import { MatIconButton, MatButton } from '@angular/material/button';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 /**
  * Create Journal Entry component.
  */
 @Component({
   selector: 'mifosx-create-journal-entry',
   templateUrl: './create-journal-entry.component.html',
-  styleUrls: ['./create-journal-entry.component.scss']
+  styleUrls: ['./create-journal-entry.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    GlAccountSelectorComponent,
+    MatIconButton,
+    FaIconComponent,
+    CdkTextareaAutosize
+  ]
 })
 export class CreateJournalEntryComponent implements OnInit, AfterViewInit {
   /** Minimum transaction date allowed. */

src/app/accounting/financial-activity-mappings/create-financial-activity-mapping/create-financial-activity-mapping.component.ts

@@ -1,11 +1,13 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
-import { Router, ActivatedRoute } from '@angular/router';
+import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { AccountingService } from '../../accounting.service';
 import { GLAccount } from 'app/shared/models/general.model';
+import { GlAccountSelectorComponent } from '../../../shared/accounting/gl-account-selector/gl-account-selector.component';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Create financial activity mapping component.
@@ -13,7 +15,11 @@ import { GLAccount } from 'app/shared/models/general.model';
 @Component({
   selector: 'mifosx-create-financial-activity-mapping',
   templateUrl: './create-financial-activity-mapping.component.html',
-  styleUrls: ['./create-financial-activity-mapping.component.scss']
+  styleUrls: ['./create-financial-activity-mapping.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    GlAccountSelectorComponent
+  ]
 })
 export class CreateFinancialActivityMappingComponent implements OnInit {
   /** Financial activity mapping form. */

src/app/accounting/financial-activity-mappings/edit-financial-activity-mapping/edit-financial-activity-mapping.component.ts

@@ -1,11 +1,13 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
-import { Router, ActivatedRoute } from '@angular/router';
+import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { AccountingService } from '../../accounting.service';
 import { GLAccount } from 'app/shared/models/general.model';
+import { GlAccountSelectorComponent } from '../../../shared/accounting/gl-account-selector/gl-account-selector.component';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Edit financial activity mapping component.
@@ -13,7 +15,11 @@ import { GLAccount } from 'app/shared/models/general.model';
 @Component({
   selector: 'mifosx-edit-financial-activity-mapping',
   templateUrl: './edit-financial-activity-mapping.component.html',
-  styleUrls: ['./edit-financial-activity-mapping.component.scss']
+  styleUrls: ['./edit-financial-activity-mapping.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    GlAccountSelectorComponent
+  ]
 })
 export class EditFinancialActivityMappingComponent implements OnInit {
   /** Financial activity mapping form. */

src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.ts

@@ -1,13 +1,27 @@
 /** Angular Imports */
 import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+import { MatSort, MatSortHeader } from '@angular/material/sort';
-import { MatTableDataSource } from '@angular/material/table';
+import {
-import { ActivatedRoute, Router } from '@angular/router';
+  MatTableDataSource,
+  MatTable,
+  MatColumnDef,
+  MatHeaderCellDef,
+  MatHeaderCell,
+  MatCellDef,
+  MatCell,
+  MatHeaderRowDef,
+  MatHeaderRow,
+  MatRowDef,
+  MatRow
+} from '@angular/material/table';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { PopoverService } from '../../configuration-wizard/popover/popover.service';
 import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Financial activity mappings component.
@@ -15,7 +29,24 @@ import { ConfigurationWizardService } from '../../configuration-wizard/configura
 @Component({
   selector: 'mifosx-financial-activity-mappings',
   templateUrl: './financial-activity-mappings.component.html',
-  styleUrls: ['./financial-activity-mappings.component.scss']
+  styleUrls: ['./financial-activity-mappings.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent,
+    MatTable,
+    MatSort,
+    MatColumnDef,
+    MatHeaderCellDef,
+    MatHeaderCell,
+    MatSortHeader,
+    MatCellDef,
+    MatCell,
+    MatHeaderRowDef,
+    MatHeaderRow,
+    MatRowDef,
+    MatRow,
+    MatPaginator
+  ]
 })
 export class FinancialActivityMappingsComponent implements OnInit, AfterViewInit {
   /** Financial activity account data. */

src/app/accounting/financial-activity-mappings/view-financial-activity-mapping/view-financial-activity-mapping.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 
 /** Custom Services */
@@ -9,6 +9,9 @@ import { AccountingService } from '../../accounting.service';
 /** Custom Components */
 import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dialog.component';
 import { Location } from '@angular/common';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { GlAccountDisplayComponent } from '../../../shared/accounting/gl-account-display/gl-account-display.component';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * View financial activity mapping component.
@@ -16,7 +19,12 @@ import { Location } from '@angular/common';
 @Component({
   selector: 'mifosx-view-financial-activity-mapping',
   templateUrl: './view-financial-activity-mapping.component.html',
-  styleUrls: ['./view-financial-activity-mapping.component.scss']
+  styleUrls: ['./view-financial-activity-mapping.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent,
+    GlAccountDisplayComponent
+  ]
 })
 export class ViewFinancialActivityMappingComponent {
   /** Financial activity account ID. */

src/app/accounting/frequent-postings/frequent-postings.component.ts

@@ -1,19 +1,35 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormArray } from '@angular/forms';
+import {
-import { Router, ActivatedRoute } from '@angular/router';
+  UntypedFormGroup,
+  UntypedFormBuilder,
+  Validators,
+  UntypedFormArray,
+  ReactiveFormsModule
+} from '@angular/forms';
+import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { AccountingService } from '../accounting.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { MatIconButton, MatButton } from '@angular/material/button';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 /**
  * Frequent Postings component.
  */
 @Component({
   selector: 'mifosx-frequent-postings',
   templateUrl: './frequent-postings.component.html',
-  styleUrls: ['./frequent-postings.component.scss']
+  styleUrls: ['./frequent-postings.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatIconButton,
+    FaIconComponent,
+    CdkTextareaAutosize
+  ]
 })
 export class FrequentPostingsComponent implements OnInit {
   /** Minimum transaction date allowed. */

src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.ts

@@ -1,7 +1,13 @@
 /** Angular Imports */
 import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormArray } from '@angular/forms';
+import {
-import { ActivatedRoute, Router } from '@angular/router';
+  UntypedFormGroup,
+  UntypedFormBuilder,
+  Validators,
+  UntypedFormArray,
+  ReactiveFormsModule
+} from '@angular/forms';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { AccountingService } from '../accounting.service';
@@ -13,6 +19,9 @@ import { ConfigurationWizardService } from '../../configuration-wizard/configura
 import { onlyOneOfTheFieldsIsRequiredValidator } from './only-one-of-the-fields-is-required.validator';
 import { Dates } from 'app/core/utils/dates';
 import { TranslateService } from '@ngx-translate/core';
+import { NgFor, NgIf, CurrencyPipe } from '@angular/common';
+import { GlAccountDisplayComponent } from '../../shared/accounting/gl-account-display/gl-account-display.component';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Migrate opening balances component.
@@ -20,7 +29,12 @@ import { TranslateService } from '@ngx-translate/core';
 @Component({
   selector: 'mifosx-migrate-opening-balances',
   templateUrl: './migrate-opening-balances.component.html',
-  styleUrls: ['./migrate-opening-balances.component.scss']
+  styleUrls: ['./migrate-opening-balances.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    GlAccountDisplayComponent,
+    CurrencyPipe
+  ]
 })
 export class MigrateOpeningBalancesComponent implements OnInit, AfterViewInit {
   /** Minimum opening balances date allowed. */

src/app/accounting/periodic-accruals/periodic-accruals.component.ts

@@ -1,19 +1,25 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
-import { Router, ActivatedRoute } from '@angular/router';
+import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { AccountingService } from '../accounting.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 /**
  * Periodic accruals component.
  */
 @Component({
   selector: 'mifosx-periodic-accruals',
   templateUrl: './periodic-accruals.component.html',
-  styleUrls: ['./periodic-accruals.component.scss']
+  styleUrls: ['./periodic-accruals.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent
+  ]
 })
 export class PeriodicAccrualsComponent implements OnInit {
   /** Minimum accrue date allowed. */

src/app/accounting/provisioning-entries/create-provisioning-entry/create-provisioning-entry.component.ts

@@ -1,19 +1,25 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { AccountingService } from '../../accounting.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 /**
  * Create provisioning entry component.
  */
 @Component({
   selector: 'mifosx-create-provisioning-entry',
   templateUrl: './create-provisioning-entry.component.html',
-  styleUrls: ['./create-provisioning-entry.component.scss']
+  styleUrls: ['./create-provisioning-entry.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatCheckbox
+  ]
 })
 export class CreateProvisioningEntryComponent implements OnInit {
   /** Minimum provisioning date allowed. */

src/app/accounting/provisioning-entries/provisioning-entries.component.ts

@@ -1,12 +1,27 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+import { MatSort, MatSortHeader } from '@angular/material/sort';
-import { MatTableDataSource } from '@angular/material/table';
+import {
-import { Router, ActivatedRoute } from '@angular/router';
+  MatTableDataSource,
+  MatTable,
+  MatColumnDef,
+  MatHeaderCellDef,
+  MatHeaderCell,
+  MatCellDef,
+  MatCell,
+  MatHeaderRowDef,
+  MatHeaderRow,
+  MatRowDef,
+  MatRow
+} from '@angular/material/table';
+import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { AccountingService } from '../accounting.service';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Provisioning entries component.
@@ -14,7 +29,25 @@ import { AccountingService } from '../accounting.service';
 @Component({
   selector: 'mifosx-provisioning-entries',
   templateUrl: './provisioning-entries.component.html',
-  styleUrls: ['./provisioning-entries.component.scss']
+  styleUrls: ['./provisioning-entries.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent,
+    MatTable,
+    MatSort,
+    MatColumnDef,
+    MatHeaderCellDef,
+    MatHeaderCell,
+    MatSortHeader,
+    MatCellDef,
+    MatCell,
+    MatCheckbox,
+    MatHeaderRowDef,
+    MatHeaderRow,
+    MatRowDef,
+    MatRow,
+    MatPaginator
+  ]
 })
 export class ProvisioningEntriesComponent implements OnInit {
   /** Provisioning entry data. */

src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.ts

@@ -1,16 +1,32 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { UntypedFormControl } from '@angular/forms';
+import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+import { MatSort, MatSortHeader } from '@angular/material/sort';
-import { MatTableDataSource } from '@angular/material/table';
+import {
+  MatTableDataSource,
+  MatTable,
+  MatColumnDef,
+  MatHeaderCellDef,
+  MatHeaderCell,
+  MatCellDef,
+  MatCell,
+  MatHeaderRowDef,
+  MatHeaderRow,
+  MatRowDef,
+  MatRow
+} from '@angular/material/table';
 
 /** rxjs Imports */
 import { startWith, map, debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
 
 /** Custom Services */
 import { AccountingService } from '../../accounting.service';
+import { NgIf, NgFor, AsyncPipe } from '@angular/common';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { MatAutocompleteTrigger, MatAutocomplete, MatOption } from '@angular/material/autocomplete';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * View provisioning entry component.
@@ -18,7 +34,27 @@ import { AccountingService } from '../../accounting.service';
 @Component({
   selector: 'mifosx-view-provisioning-entry',
   templateUrl: './view-provisioning-entry.component.html',
-  styleUrls: ['./view-provisioning-entry.component.scss']
+  styleUrls: ['./view-provisioning-entry.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent,
+    MatAutocompleteTrigger,
+    MatAutocomplete,
+    MatTable,
+    MatSort,
+    MatColumnDef,
+    MatHeaderCellDef,
+    MatHeaderCell,
+    MatSortHeader,
+    MatCellDef,
+    MatCell,
+    MatHeaderRowDef,
+    MatHeaderRow,
+    MatRowDef,
+    MatRow,
+    MatPaginator,
+    AsyncPipe
+  ]
 })
 export class ViewProvisioningEntryComponent implements OnInit, AfterViewInit {
   /** Provisioning entry id. */

src/app/accounting/provisioning-entries/view-provisioning-journal-entries/view-provisioning-journal-entries.component.ts

@@ -2,8 +2,21 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+import { MatSort, MatSortHeader } from '@angular/material/sort';
-import { MatTableDataSource } from '@angular/material/table';
+import {
+  MatTableDataSource,
+  MatTable,
+  MatColumnDef,
+  MatHeaderCellDef,
+  MatHeaderCell,
+  MatCellDef,
+  MatCell,
+  MatHeaderRowDef,
+  MatHeaderRow,
+  MatRowDef,
+  MatRow
+} from '@angular/material/table';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * View provisioning journal entries component.
@@ -11,7 +24,23 @@ import { MatTableDataSource } from '@angular/material/table';
 @Component({
   selector: 'mifosx-view-provisioning-journal-entries',
   templateUrl: './view-provisioning-journal-entries.component.html',
-  styleUrls: ['./view-provisioning-journal-entries.component.scss']
+  styleUrls: ['./view-provisioning-journal-entries.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatTable,
+    MatSort,
+    MatColumnDef,
+    MatHeaderCellDef,
+    MatHeaderCell,
+    MatSortHeader,
+    MatCellDef,
+    MatCell,
+    MatHeaderRowDef,
+    MatHeaderRow,
+    MatRowDef,
+    MatRow,
+    MatPaginator
+  ]
 })
 export class ViewProvisioningJournalEntriesComponent implements OnInit {
   /** Provisioning journal entry data. */

src/app/accounting/revert-transaction/revert-transaction.component.ts

@@ -1,7 +1,16 @@
 /** Angular Imports */
 import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import {
-import { UntypedFormControl } from '@angular/forms';
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+  MatDialogTitle,
+  MatDialogContent,
+  MatDialogActions,
+  MatDialogClose
+} from '@angular/material/dialog';
+import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Revert transaction dialog component.
@@ -9,7 +18,15 @@ import { UntypedFormControl } from '@angular/forms';
 @Component({
   selector: 'mifosx-revert-transaction',
   templateUrl: './revert-transaction.component.html',
-  styleUrls: ['./revert-transaction.component.scss']
+  styleUrls: ['./revert-transaction.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogTitle,
+    CdkScrollable,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose
+  ]
 })
 export class RevertTransactionComponent {
   /** Comments input form control. */

src/app/accounting/search-journal-entry/search-journal-entry.component.ts

@@ -1,9 +1,9 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+import { MatSort, MatSortHeader } from '@angular/material/sort';
-import { UntypedFormControl } from '@angular/forms';
+import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, RouterLink } from '@angular/router';
 
 /** rxjs Imports */
 import { merge } from 'rxjs';
@@ -15,6 +15,25 @@ import { SettingsService } from 'app/settings/settings.service';
 /** Custom Data Source */
 import { JournalEntriesDataSource } from './journal-entry.datasource';
 import { Dates } from 'app/core/utils/dates';
+import { MatAutocompleteTrigger, MatOption, MatAutocomplete } from '@angular/material/autocomplete';
+import { GlAccountSelectorComponent } from '../../shared/accounting/gl-account-selector/gl-account-selector.component';
+import { NgFor, NgIf, AsyncPipe } from '@angular/common';
+import {
+  MatTable,
+  MatColumnDef,
+  MatHeaderCellDef,
+  MatHeaderCell,
+  MatCellDef,
+  MatCell,
+  MatHeaderRowDef,
+  MatHeaderRow,
+  MatRowDef,
+  MatRow
+} from '@angular/material/table';
+import { DateFormatPipe } from '../../pipes/date-format.pipe';
+import { DatetimeFormatPipe } from '../../pipes/datetime-format.pipe';
+import { FormatNumberPipe } from '../../pipes/format-number.pipe';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Search journal entry component.
@@ -22,7 +41,30 @@ import { Dates } from 'app/core/utils/dates';
 @Component({
   selector: 'mifosx-search-journal-entry',
   templateUrl: './search-journal-entry.component.html',
-  styleUrls: ['./search-journal-entry.component.scss']
+  styleUrls: ['./search-journal-entry.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatAutocompleteTrigger,
+    GlAccountSelectorComponent,
+    MatAutocomplete,
+    MatTable,
+    MatSort,
+    MatColumnDef,
+    MatHeaderCellDef,
+    MatHeaderCell,
+    MatSortHeader,
+    MatCellDef,
+    MatCell,
+    MatHeaderRowDef,
+    MatHeaderRow,
+    MatRowDef,
+    MatRow,
+    MatPaginator,
+    AsyncPipe,
+    DateFormatPipe,
+    DatetimeFormatPipe,
+    FormatNumberPipe
+  ]
 })
 export class SearchJournalEntryComponent implements OnInit, AfterViewInit {
   /** Minimum transaction date allowed. */

src/app/app.module.ts

@@ -65,10 +65,7 @@ export function HttpLoaderFactory(http: HttpClient) {
 }
 
 @NgModule({
-  declarations: [
+  declarations: [WebAppComponent],
-    WebAppComponent,
-    NotFoundComponent
-  ],
   bootstrap: [WebAppComponent],
   imports: [
     TranslateModule.forRoot({
@@ -109,7 +106,8 @@ export function HttpLoaderFactory(http: HttpClient) {
     CollectionsModule,
     TasksModule,
     ConfigurationWizardModule,
-    AppRoutingModule
+    AppRoutingModule,
+    NotFoundComponent
 
   ],
   providers: [

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 { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+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 {
-import { ActivatedRoute, Router } from '@angular/router';
+  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 { UntypedFormGroup, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+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 { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+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 { UntypedFormGroup, UntypedFormBuilder, Validators, FormControl, ReactiveFormsModule } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+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 {
-import { ActivatedRoute, Router } from '@angular/router';
+  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 { MatSort, MatSortHeader } from '@angular/material/sort';
-import { UntypedFormControl } from '@angular/forms';
+import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
-import { Router, ActivatedRoute } from '@angular/router';
+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
+    DirectivesModule,
-  ],
-  declarations: [
     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 {
-import { Router, ActivatedRoute } from '@angular/router';
+  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 {
-import { Router, ActivatedRoute } from '@angular/router';
+  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 */

src/app/clients/client-stepper/client-address-step/client-address-step.component.ts

@@ -11,6 +11,18 @@ import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
 import { TranslateService } from '@ngx-translate/core';
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import {
+  MatAccordion,
+  MatExpansionPanel,
+  MatExpansionPanelHeader,
+  MatExpansionPanelTitle,
+  MatExpansionPanelDescription
+} from '@angular/material/expansion';
+import { MatDivider } from '@angular/material/divider';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { MatStepperPrevious, MatStepperNext } from '@angular/material/stepper';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Client Address Step Component
@@ -18,7 +30,20 @@ import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.componen
 @Component({
   selector: 'mifosx-client-address-step',
   templateUrl: './client-address-step.component.html',
-  styleUrls: ['./client-address-step.component.scss']
+  styleUrls: ['./client-address-step.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent,
+    MatAccordion,
+    MatExpansionPanel,
+    MatExpansionPanelHeader,
+    MatExpansionPanelTitle,
+    MatExpansionPanelDescription,
+    MatDivider,
+    MatSlideToggle,
+    MatStepperPrevious,
+    MatStepperNext
+  ]
 })
 export class ClientAddressStepComponent {
   /** Client Address Field Config */

src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.ts

@@ -1,12 +1,29 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
+import {
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
+  Validators,
+  ReactiveFormsModule
+} from '@angular/forms';
 import { Datatables } from 'app/core/utils/datatables';
 import { SettingsService } from 'app/settings/settings.service';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatStepperPrevious, MatStepperNext } from '@angular/material/stepper';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-client-datatable-step',
   templateUrl: './client-datatable-step.component.html',
-  styleUrls: ['./client-datatable-step.component.scss']
+  styleUrls: ['./client-datatable-step.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatCheckbox,
+    MatStepperPrevious,
+    FaIconComponent,
+    MatStepperNext
+  ]
 })
 export class ClientDatatableStepComponent implements OnInit {
   /** Input Fields Data */

src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.ts

@@ -1,11 +1,19 @@
 /** Angular Imports */
 import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import {
-import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+  MatDialogTitle,
+  MatDialogActions,
+  MatDialogClose
+} from '@angular/material/dialog';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 
 /** Custom Services */
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Client Family Members Dialog
@@ -13,7 +21,14 @@ import { Dates } from 'app/core/utils/dates';
 @Component({
   selector: 'mifosx-client-family-member-dialog',
   templateUrl: './client-family-member-dialog.component.html',
-  styleUrls: ['./client-family-member-dialog.component.scss']
+  styleUrls: ['./client-family-member-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogTitle,
+    MatCheckbox,
+    MatDialogActions,
+    MatDialogClose
+  ]
 })
 export class ClientFamilyMemberDialogComponent implements OnInit {
   /** Maximum Due Date allowed. */

src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.ts

@@ -6,6 +6,19 @@ import { MatDialog } from '@angular/material/dialog';
 import { TranslateService } from '@ngx-translate/core';
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
 import { ClientFamilyMemberDialogComponent } from './client-family-member-dialog/client-family-member-dialog.component';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import {
+  MatAccordion,
+  MatExpansionPanel,
+  MatExpansionPanelHeader,
+  MatExpansionPanelTitle,
+  MatExpansionPanelDescription
+} from '@angular/material/expansion';
+import { MatDivider } from '@angular/material/divider';
+import { MatStepperPrevious, MatStepperNext } from '@angular/material/stepper';
+import { FindPipe } from '../../../pipes/find.pipe';
+import { DateFormatPipe } from '../../../pipes/date-format.pipe';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Client Family Members Step
@@ -13,7 +26,21 @@ import { ClientFamilyMemberDialogComponent } from './client-family-member-dialog
 @Component({
   selector: 'mifosx-client-family-members-step',
   templateUrl: './client-family-members-step.component.html',
-  styleUrls: ['./client-family-members-step.component.scss']
+  styleUrls: ['./client-family-members-step.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent,
+    MatAccordion,
+    MatExpansionPanel,
+    MatExpansionPanelHeader,
+    MatExpansionPanelTitle,
+    MatExpansionPanelDescription,
+    MatDivider,
+    MatStepperPrevious,
+    MatStepperNext,
+    FindPipe,
+    DateFormatPipe
+  ]
 })
 export class ClientFamilyMembersStepComponent {
   /** Cient Template */

src/app/clients/client-stepper/client-general-step/client-general-step.component.ts

@@ -1,11 +1,23 @@
 /** Angular Imports */
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators, UntypedFormControl } from '@angular/forms';
+import {
+  UntypedFormBuilder,
+  UntypedFormGroup,
+  Validators,
+  UntypedFormControl,
+  ReactiveFormsModule
+} from '@angular/forms';
 import { ClientsService } from 'app/clients/clients.service';
 import { Dates } from 'app/core/utils/dates';
 
 /** Custom Services */
 import { SettingsService } from 'app/settings/settings.service';
+import { MatDivider } from '@angular/material/divider';
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatStepperPrevious, MatStepperNext } from '@angular/material/stepper';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Create Client Component
@@ -13,7 +25,16 @@ import { SettingsService } from 'app/settings/settings.service';
 @Component({
   selector: 'mifosx-client-general-step',
   templateUrl: './client-general-step.component.html',
-  styleUrls: ['./client-general-step.component.scss']
+  styleUrls: ['./client-general-step.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDivider,
+    CdkTextareaAutosize,
+    MatCheckbox,
+    MatStepperPrevious,
+    FaIconComponent,
+    MatStepperNext
+  ]
 })
 export class ClientGeneralStepComponent implements OnInit {
   @Output() legalFormChangeEvent = new EventEmitter<{ legalForm: number }>();

src/app/clients/client-stepper/client-preview-step/client-preview-step.component.ts

@@ -1,5 +1,20 @@
 /** Angular Imports */
 import { Component, Output, EventEmitter, Input } from '@angular/core';
+import { MatDivider } from '@angular/material/divider';
+import { ExternalIdentifierComponent } from '../../../shared/external-identifier/external-identifier.component';
+import {
+  MatAccordion,
+  MatExpansionPanel,
+  MatExpansionPanelHeader,
+  MatExpansionPanelTitle,
+  MatExpansionPanelDescription
+} from '@angular/material/expansion';
+import { MatStepperPrevious } from '@angular/material/stepper';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { FindPipe } from '../../../pipes/find.pipe';
+import { DateFormatPipe } from '../../../pipes/date-format.pipe';
+import { YesnoPipe } from '../../../pipes/yesno.pipe';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Client Preview Step Component
@@ -7,7 +22,22 @@ import { Component, Output, EventEmitter, Input } from '@angular/core';
 @Component({
   selector: 'mifosx-client-preview-step',
   templateUrl: './client-preview-step.component.html',
-  styleUrls: ['./client-preview-step.component.scss']
+  styleUrls: ['./client-preview-step.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDivider,
+    ExternalIdentifierComponent,
+    MatAccordion,
+    MatExpansionPanel,
+    MatExpansionPanelHeader,
+    MatExpansionPanelTitle,
+    MatExpansionPanelDescription,
+    MatStepperPrevious,
+    FaIconComponent,
+    FindPipe,
+    DateFormatPipe,
+    YesnoPipe
+  ]
 })
 export class ClientPreviewStepComponent {
   /** Client Address field configuration */

src/app/clients/clients-view/address-tab/address-tab.component.ts

@@ -12,6 +12,17 @@ import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.componen
 /** Custom Services */
 import { TranslateService } from '@ngx-translate/core';
 import { ClientsService } from '../../clients.service';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import {
+  MatAccordion,
+  MatExpansionPanel,
+  MatExpansionPanelHeader,
+  MatExpansionPanelTitle,
+  MatExpansionPanelDescription
+} from '@angular/material/expansion';
+import { MatDivider } from '@angular/material/divider';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Clients Address Tab Component
@@ -19,7 +30,18 @@ import { ClientsService } from '../../clients.service';
 @Component({
   selector: 'mifosx-address-tab',
   templateUrl: './address-tab.component.html',
-  styleUrls: ['./address-tab.component.scss']
+  styleUrls: ['./address-tab.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent,
+    MatAccordion,
+    MatExpansionPanel,
+    MatExpansionPanelHeader,
+    MatExpansionPanelTitle,
+    MatExpansionPanelDescription,
+    MatDivider,
+    MatSlideToggle
+  ]
 })
 export class AddressTabComponent {
   /** Client Address Data */

src/app/clients/clients-view/charges/charges-overview/charges-overview.component.ts

@@ -2,8 +2,24 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
-import { MatTableDataSource } from '@angular/material/table';
+import {
+  MatTableDataSource,
+  MatTable,
+  MatColumnDef,
+  MatHeaderCellDef,
+  MatHeaderCell,
+  MatCellDef,
+  MatCell,
+  MatHeaderRowDef,
+  MatHeaderRow,
+  MatRowDef,
+  MatRow
+} from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
+import { NgClass } from '@angular/common';
+import { StatusLookupPipe } from '../../../../pipes/status-lookup.pipe';
+import { DateFormatPipe } from '../../../../pipes/date-format.pipe';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Client Charge Overview component.
@@ -11,7 +27,24 @@ import { ActivatedRoute } from '@angular/router';
 @Component({
   selector: 'mifosx-charges-overview',
   templateUrl: './charges-overview.component.html',
-  styleUrls: ['./charges-overview.component.scss']
+  styleUrls: ['./charges-overview.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatTable,
+    MatColumnDef,
+    MatHeaderCellDef,
+    MatHeaderCell,
+    MatCellDef,
+    MatCell,
+    NgClass,
+    MatHeaderRowDef,
+    MatHeaderRow,
+    MatRowDef,
+    MatRow,
+    MatPaginator,
+    StatusLookupPipe,
+    DateFormatPipe
+  ]
 })
 export class ChargesOverviewComponent implements OnInit {
   /** Columns to be displayed in charge overview table. */

src/app/clients/clients-view/charges/client-pay-charges/client-pay-charges.component.ts

@@ -1,12 +1,13 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormBuilder, Validators } from '@angular/forms';
+import { UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 /** Custom Services. */
 import { ClientsService } from 'app/clients/clients.service';
 import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Client Pay Charge component.
@@ -14,7 +15,10 @@ import { SettingsService } from 'app/settings/settings.service';
 @Component({
   selector: 'mifosx-client-pay-charges',
   templateUrl: './client-pay-charges.component.html',
-  styleUrls: ['./client-pay-charges.component.scss']
+  styleUrls: ['./client-pay-charges.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS
+  ]
 })
 export class ClientPayChargesComponent implements OnInit {
   /** Transaction Form. */

src/app/clients/clients-view/charges/view-charge/view-charge.component.ts

@@ -1,7 +1,27 @@
 /** Angular Imports */
 import { Component } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { ClientsService } from 'app/clients/clients.service';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { MatCard, MatCardTitle, MatCardContent, MatCardActions } from '@angular/material/card';
+import { NgClass, NgIf } from '@angular/common';
+import { MatDivider } from '@angular/material/divider';
+import {
+  MatTable,
+  MatColumnDef,
+  MatHeaderCellDef,
+  MatHeaderCell,
+  MatCellDef,
+  MatCell,
+  MatHeaderRowDef,
+  MatHeaderRow,
+  MatRowDef,
+  MatRow
+} from '@angular/material/table';
+import { StatusLookupPipe } from '../../../../pipes/status-lookup.pipe';
+import { DateFormatPipe } from '../../../../pipes/date-format.pipe';
+import { FormatNumberPipe } from '../../../../pipes/format-number.pipe';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * View Charge component.
@@ -9,7 +29,27 @@ import { ClientsService } from 'app/clients/clients.service';
 @Component({
   selector: 'mifosx-view-charge',
   templateUrl: './view-charge.component.html',
-  styleUrls: ['./view-charge.component.scss']
+  styleUrls: ['./view-charge.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent,
+    MatCardTitle,
+    NgClass,
+    MatDivider,
+    MatTable,
+    MatColumnDef,
+    MatHeaderCellDef,
+    MatHeaderCell,
+    MatCellDef,
+    MatCell,
+    MatHeaderRowDef,
+    MatHeaderRow,
+    MatRowDef,
+    MatRow,
+    StatusLookupPipe,
+    DateFormatPipe,
+    FormatNumberPipe
+  ]
 })
 export class ViewChargeComponent {
   /** Charge Data. */

src/app/clients/clients-view/client-actions/accept-client-transfer/accept-client-transfer.component.ts

@@ -1,12 +1,14 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { ClientsService } from 'app/clients/clients.service';
 import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Accept Client Transfer Component
@@ -14,7 +16,11 @@ import { SettingsService } from 'app/settings/settings.service';
 @Component({
   selector: 'mifosx-accept-client-transfer',
   templateUrl: './accept-client-transfer.component.html',
-  styleUrls: ['./accept-client-transfer.component.scss']
+  styleUrls: ['./accept-client-transfer.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    CdkTextareaAutosize
+  ]
 })
 export class AcceptClientTransferComponent implements OnInit {
   /** Accept Client Transfer form. */

src/app/clients/clients-view/client-actions/activate-client/activate-client.component.ts

@@ -1,12 +1,13 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { ClientsService } from 'app/clients/clients.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 Client Component
@@ -14,7 +15,10 @@ import { SettingsService } from 'app/settings/settings.service';
 @Component({
   selector: 'mifosx-activate-client',
   templateUrl: './activate-client.component.html',
-  styleUrls: ['./activate-client.component.scss']
+  styleUrls: ['./activate-client.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS
+  ]
 })
 export class ActivateClientComponent implements OnInit {
   /** Minimum date allowed. */

src/app/clients/clients-view/client-actions/add-client-charge/add-client-charge.component.ts

@@ -1,12 +1,19 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl } from '@angular/forms';
+import {
-import { Router, ActivatedRoute } from '@angular/router';
+  UntypedFormGroup,
+  UntypedFormBuilder,
+  Validators,
+  UntypedFormControl,
+  ReactiveFormsModule
+} from '@angular/forms';
+import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { ClientsService } from 'app/clients/clients.service';
 import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Add Clients Charge component.
@@ -14,7 +21,10 @@ import { SettingsService } from 'app/settings/settings.service';
 @Component({
   selector: 'mifosx-add-client-charge',
   templateUrl: './add-client-charge.component.html',
-  styleUrls: ['./add-client-charge.component.scss']
+  styleUrls: ['./add-client-charge.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS
+  ]
 })
 export class AddClientChargeComponent implements OnInit {
   /** Minimum Due Date allowed. */

src/app/clients/clients-view/client-actions/add-client-collateral/add-client-collateral.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 /**
  * Custom Services
@@ -9,11 +9,15 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { ClientsService } from 'app/clients/clients.service';
 import { ProductsService } from 'app/products/products.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-add-client-collateral',
   templateUrl: './add-client-collateral.component.html',
-  styleUrls: ['./add-client-collateral.component.scss']
+  styleUrls: ['./add-client-collateral.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS
+  ]
 })
 export class AddClientCollateralComponent implements OnInit {
   /** Client Collateral Form */

src/app/clients/clients-view/client-actions/client-actions.component.ts

@@ -1,6 +1,24 @@
 /** Angular Imports */
 import { Component } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { ClientAssignStaffComponent } from './client-assign-staff/client-assign-staff.component';
+import { CloseClientComponent } from './close-client/close-client.component';
+import { ViewSurveyComponent } from './view-survey/view-survey.component';
+import { RejectClientComponent } from './reject-client/reject-client.component';
+import { ActivateClientComponent } from './activate-client/activate-client.component';
+import { WithdrawClientComponent } from './withdraw-client/withdraw-client.component';
+import { UpdateClientSavingsAccountComponent } from './update-client-savings-account/update-client-savings-account.component';
+import { TransferClientComponent } from './transfer-client/transfer-client.component';
+import { UndoClientTransferComponent } from './undo-client-transfer/undo-client-transfer.component';
+import { RejectClientTransferComponent } from './reject-client-transfer/reject-client-transfer.component';
+import { AcceptClientTransferComponent } from './accept-client-transfer/accept-client-transfer.component';
+import { ReactivateClientComponent } from './reactivate-client/reactivate-client.component';
+import { UndoClientRejectionComponent } from './undo-client-rejection/undo-client-rejection.component';
+import { AddClientChargeComponent } from './add-client-charge/add-client-charge.component';
+import { TakeSurveyComponent } from './take-survey/take-survey.component';
+import { ClientScreenReportsComponent } from './client-screen-reports/client-screen-reports.component';
+import { AddClientCollateralComponent } from './add-client-collateral/add-client-collateral.component';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Client actions component.
@@ -8,7 +26,27 @@ import { ActivatedRoute, Router } from '@angular/router';
 @Component({
   selector: 'mifosx-client-actions',
   templateUrl: './client-actions.component.html',
-  styleUrls: ['./client-actions.component.scss']
+  styleUrls: ['./client-actions.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    ClientAssignStaffComponent,
+    CloseClientComponent,
+    ViewSurveyComponent,
+    RejectClientComponent,
+    ActivateClientComponent,
+    WithdrawClientComponent,
+    UpdateClientSavingsAccountComponent,
+    TransferClientComponent,
+    UndoClientTransferComponent,
+    RejectClientTransferComponent,
+    AcceptClientTransferComponent,
+    ReactivateClientComponent,
+    UndoClientRejectionComponent,
+    AddClientChargeComponent,
+    TakeSurveyComponent,
+    ClientScreenReportsComponent,
+    AddClientCollateralComponent
+  ]
 })
 export class ClientActionsComponent {
   /** Flag object to store possible actions and render appropriate UI to the user */

src/app/clients/clients-view/client-actions/client-assign-staff/client-assign-staff.component.ts

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

src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.ts

@@ -1,11 +1,13 @@
 /** Angular Imports */
 import { Component, OnInit, Renderer2, ViewChild, ElementRef, SecurityContext } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { ClientsService } from 'app/clients/clients.service';
 import { DomSanitizer } from '@angular/platform-browser';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Client Screen Reports Component.
@@ -13,7 +15,11 @@ import { DomSanitizer } from '@angular/platform-browser';
 @Component({
   selector: 'mifosx-client-screen-reports',
   templateUrl: './client-screen-reports.component.html',
-  styleUrls: ['./client-screen-reports.component.scss']
+  styleUrls: ['./client-screen-reports.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent
+  ]
 })
 export class ClientScreenReportsComponent implements OnInit {
   /** Client Screen Reportform. */

src/app/clients/clients-view/client-actions/close-client/close-client.component.ts

@@ -1,12 +1,13 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { ClientsService } from 'app/clients/clients.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 Client Component
@@ -14,7 +15,10 @@ import { SettingsService } from 'app/settings/settings.service';
 @Component({
   selector: 'mifosx-close-client',
   templateUrl: './close-client.component.html',
-  styleUrls: ['./close-client.component.scss']
+  styleUrls: ['./close-client.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS
+  ]
 })
 export class CloseClientComponent implements OnInit {
   /** Minimum date allowed. */

src/app/clients/clients-view/client-actions/reactivate-client/reactivate-client.component.ts

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

src/app/clients/clients-view/client-actions/reject-client-transfer/reject-client-transfer.component.ts

@@ -1,12 +1,14 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { ClientsService } from 'app/clients/clients.service';
 import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Reject Client Transfer Component
@@ -14,7 +16,11 @@ import { SettingsService } from 'app/settings/settings.service';
 @Component({
   selector: 'mifosx-reject-client-transfer',
   templateUrl: './reject-client-transfer.component.html',
-  styleUrls: ['./reject-client-transfer.component.scss']
+  styleUrls: ['./reject-client-transfer.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    CdkTextareaAutosize
+  ]
 })
 export class RejectClientTransferComponent implements OnInit {
   /** Reject Client Transfer form. */

src/app/clients/clients-view/client-actions/reject-client/reject-client.component.ts

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

src/app/clients/clients-view/client-actions/take-survey/take-survey.component.ts

@@ -1,10 +1,13 @@
 /** Angular Imports */
 import { Component } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { ClientsService } from '../../../clients.service';
 import { AuthenticationService } from '../../../../core/authentication/authentication.service';
+import { MatRadioGroup, MatRadioButton } from '@angular/material/radio';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Take Survey Component
@@ -12,7 +15,13 @@ import { AuthenticationService } from '../../../../core/authentication/authentic
 @Component({
   selector: 'mifosx-take-survey',
   templateUrl: './take-survey.component.html',
-  styleUrls: ['./take-survey.component.scss']
+  styleUrls: ['./take-survey.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatRadioGroup,
+    FormsModule,
+    MatRadioButton
+  ]
 })
 export class TakeSurveyComponent {
   /** List of all Survey Data */

src/app/clients/clients-view/client-actions/transfer-client/transfer-client.component.ts

@@ -1,12 +1,14 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { ClientsService } from 'app/clients/clients.service';
 import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Transfer Client Component
@@ -14,7 +16,11 @@ import { SettingsService } from 'app/settings/settings.service';
 @Component({
   selector: 'mifosx-transfer-client',
   templateUrl: './transfer-client.component.html',
-  styleUrls: ['./transfer-client.component.scss']
+  styleUrls: ['./transfer-client.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    CdkTextareaAutosize
+  ]
 })
 export class TransferClientComponent implements OnInit {
   /** Minimum date allowed. */

src/app/clients/clients-view/client-actions/undo-client-rejection/undo-client-rejection.component.ts

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

src/app/clients/clients-view/client-actions/undo-client-transfer/undo-client-transfer.component.ts

@@ -1,12 +1,14 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { ClientsService } from 'app/clients/clients.service';
 import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Undo Client Transfer Component
@@ -14,7 +16,11 @@ import { SettingsService } from 'app/settings/settings.service';
 @Component({
   selector: 'mifosx-undo-client-transfer',
   templateUrl: './undo-client-transfer.component.html',
-  styleUrls: ['./undo-client-transfer.component.scss']
+  styleUrls: ['./undo-client-transfer.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    CdkTextareaAutosize
+  ]
 })
 export class UndoClientTransferComponent implements OnInit {
   /** Undo Client Transfer form. */

src/app/clients/clients-view/client-actions/update-client-savings-account/update-client-savings-account.component.ts

@@ -1,10 +1,11 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { ClientsService } from 'app/clients/clients.service';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Clients Update Savings Account Component
@@ -12,7 +13,10 @@ import { ClientsService } from 'app/clients/clients.service';
 @Component({
   selector: 'mifosx-update-client-savings-account',
   templateUrl: './update-client-savings-account.component.html',
-  styleUrls: ['./update-client-savings-account.component.scss']
+  styleUrls: ['./update-client-savings-account.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS
+  ]
 })
 export class UpdateClientSavingsAccountComponent implements OnInit {
   /** Client Update Savings Account form. */

src/app/clients/clients-view/client-actions/view-survey/view-survey.component.ts

@@ -1,9 +1,25 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, RouterLink } from '@angular/router';
 import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+import { MatSort, MatSortHeader } from '@angular/material/sort';
-import { MatTableDataSource } from '@angular/material/table';
+import {
+  MatTableDataSource,
+  MatTable,
+  MatColumnDef,
+  MatHeaderCellDef,
+  MatHeaderCell,
+  MatCellDef,
+  MatCell,
+  MatHeaderRowDef,
+  MatHeaderRow,
+  MatRowDef,
+  MatRow
+} from '@angular/material/table';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { DatetimeFormatPipe } from '../../../../pipes/datetime-format.pipe';
+import { FormatNumberPipe } from '../../../../pipes/format-number.pipe';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * View Survey component.
@@ -11,7 +27,26 @@ import { MatTableDataSource } from '@angular/material/table';
 @Component({
   selector: 'mifosx-view-survey',
   templateUrl: './view-survey.component.html',
-  styleUrls: ['./view-survey.component.scss']
+  styleUrls: ['./view-survey.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent,
+    MatTable,
+    MatSort,
+    MatColumnDef,
+    MatHeaderCellDef,
+    MatHeaderCell,
+    MatSortHeader,
+    MatCellDef,
+    MatCell,
+    MatHeaderRowDef,
+    MatHeaderRow,
+    MatRowDef,
+    MatRow,
+    MatPaginator,
+    DatetimeFormatPipe,
+    FormatNumberPipe
+  ]
 })
 export class ViewSurveyComponent implements OnInit {
   /** Survey Data */

src/app/clients/clients-view/client-actions/withdraw-client/withdraw-client.component.ts

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

src/app/clients/clients-view/clients-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 { DomSanitizer } from '@angular/platform-browser';
 import { MatDialog } from '@angular/material/dialog';
 
@@ -15,11 +15,59 @@ import { CaptureImageDialogComponent } from './custom-dialogs/capture-image-dial
 
 /** Custom Services */
 import { ClientsService } from '../clients.service';
+import {
+  MatCard,
+  MatCardHeader,
+  MatCardTitleGroup,
+  MatCardMdImage,
+  MatCardTitle,
+  MatCardSubtitle,
+  MatCardContent
+} from '@angular/material/card';
+import { MatButton, MatIconButton } from '@angular/material/button';
+import { MatTooltip } from '@angular/material/tooltip';
+import { NgClass, NgIf, NgFor } from '@angular/common';
+import { EntityNameComponent } from '../../shared/entity-name/entity-name.component';
+import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
+import { MatIcon } from '@angular/material/icon';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { AccountNumberComponent } from '../../shared/account-number/account-number.component';
+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';
 
 @Component({
   selector: 'mifosx-clients-view',
   templateUrl: './clients-view.component.html',
-  styleUrls: ['./clients-view.component.scss']
+  styleUrls: ['./clients-view.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatCardHeader,
+    MatCardTitleGroup,
+    MatCardMdImage,
+    MatTooltip,
+    MatCardTitle,
+    NgClass,
+    EntityNameComponent,
+    MatIconButton,
+    MatMenuTrigger,
+    MatIcon,
+    FaIconComponent,
+    MatCardSubtitle,
+    AccountNumberComponent,
+    ExternalIdentifierComponent,
+    MatMenu,
+    MatMenuItem,
+    MatTabNav,
+    MatTabLink,
+    RouterLinkActive,
+    MatTabNavPanel,
+    RouterOutlet,
+    StatusLookupPipe,
+    DateFormatPipe
+  ]
 })
 export class ClientsViewComponent implements OnInit {
   clientViewData: any;

src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.ts

@@ -1,6 +1,9 @@
 /** Angular Imports */
 import { Component, ViewChild, ElementRef, AfterViewInit, Renderer2, OnDestroy } from '@angular/core';
-import { MatDialogRef } from '@angular/material/dialog';
+import { MatDialogRef, MatDialogTitle, MatDialogActions, MatDialogClose } from '@angular/material/dialog';
+import { NgStyle, NgIf } from '@angular/common';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Capture image dialog component
@@ -8,7 +11,15 @@ import { MatDialogRef } from '@angular/material/dialog';
 @Component({
   selector: 'mifosx-capture-image-dialog',
   templateUrl: './capture-image-dialog.component.html',
-  styleUrls: ['./capture-image-dialog.component.scss']
+  styleUrls: ['./capture-image-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogTitle,
+    NgStyle,
+    FaIconComponent,
+    MatDialogActions,
+    MatDialogClose
+  ]
 })
 export class CaptureImageDialogComponent implements AfterViewInit, OnDestroy {
   /** Video element reference */

src/app/clients/clients-view/custom-dialogs/delete-signature-dialog/delete-signature-dialog.component.ts

@@ -1,6 +1,15 @@
 /** Angular Imports */
 import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import {
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+  MatDialogTitle,
+  MatDialogContent,
+  MatDialogActions,
+  MatDialogClose
+} from '@angular/material/dialog';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Delete signature dialog component.
@@ -8,7 +17,15 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 @Component({
   selector: 'mifosx-delete-signature-dialog',
   templateUrl: './delete-signature-dialog.component.html',
-  styleUrls: ['./delete-signature-dialog.component.scss']
+  styleUrls: ['./delete-signature-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogTitle,
+    CdkScrollable,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose
+  ]
 })
 export class DeleteSignatureDialogComponent {
   /** Id of client signature in documents */

src/app/clients/clients-view/custom-dialogs/edit-notes-dialog/edit-notes-dialog.component.ts

@@ -1,12 +1,25 @@
 /** Angular Imports */
 import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import {
-import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+  MatDialogTitle,
+  MatDialogActions,
+  MatDialogClose
+} from '@angular/material/dialog';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-edit-notes-dialog',
   templateUrl: './edit-notes-dialog.component.html',
-  styleUrls: ['./edit-notes-dialog.component.scss']
+  styleUrls: ['./edit-notes-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogTitle,
+    MatDialogActions,
+    MatDialogClose
+  ]
 })
 export class EditNotesDialogComponent implements OnInit {
   noteForm: UntypedFormGroup;

src/app/clients/clients-view/custom-dialogs/unassign-staff-dialog/unassign-staff-dialog.component.ts

@@ -1,6 +1,15 @@
 /** Angular Imports */
 import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import {
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+  MatDialogTitle,
+  MatDialogContent,
+  MatDialogActions,
+  MatDialogClose
+} from '@angular/material/dialog';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Unassign staff dialog component.
@@ -8,7 +17,15 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 @Component({
   selector: 'mifosx-unassign-staff-dialog',
   templateUrl: './unassign-staff-dialog.component.html',
-  styleUrls: ['./unassign-staff-dialog.component.scss']
+  styleUrls: ['./unassign-staff-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogTitle,
+    CdkScrollable,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose
+  ]
 })
 export class UnassignStaffDialogComponent {
   /**

src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.ts

@@ -1,11 +1,26 @@
 import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import {
-import { UntypedFormGroup, UntypedFormBuilder, Validators, FormControl } from '@angular/forms';
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+  MatDialogTitle,
+  MatDialogActions,
+  MatDialogClose
+} from '@angular/material/dialog';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { FileUploadComponent } from '../../../../shared/file-upload/file-upload.component';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-upload-document-dialog',
   templateUrl: './upload-document-dialog.component.html',
-  styleUrls: ['./upload-document-dialog.component.scss']
+  styleUrls: ['./upload-document-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogTitle,
+    FileUploadComponent,
+    MatDialogActions,
+    MatDialogClose
+  ]
 })
 export class UploadDocumentDialogComponent implements OnInit {
   /** Upload Document form. */

src/app/clients/clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component.ts

@@ -1,6 +1,8 @@
 /** Angular Imports */
 import { Component } from '@angular/core';
-import { MatDialogRef } from '@angular/material/dialog';
+import { MatDialogRef, MatDialogTitle, MatDialogActions, MatDialogClose } from '@angular/material/dialog';
+import { FileUploadComponent } from '../../../../shared/file-upload/file-upload.component';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Upload image dialog component.
@@ -8,7 +10,14 @@ import { MatDialogRef } from '@angular/material/dialog';
 @Component({
   selector: 'mifosx-upload-image-dialog',
   templateUrl: './upload-image-dialog.component.html',
-  styleUrls: ['./upload-image-dialog.component.scss']
+  styleUrls: ['./upload-image-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogTitle,
+    FileUploadComponent,
+    MatDialogActions,
+    MatDialogClose
+  ]
 })
 export class UploadImageDialogComponent {
   /** Client Image */

src/app/clients/clients-view/custom-dialogs/upload-signature-dialog/upload-signature-dialog.component.ts

@@ -1,6 +1,8 @@
 /** Angular Imports */
 import { Component } from '@angular/core';
-import { MatDialogRef } from '@angular/material/dialog';
+import { MatDialogRef, MatDialogTitle, MatDialogActions, MatDialogClose } from '@angular/material/dialog';
+import { FileUploadComponent } from '../../../../shared/file-upload/file-upload.component';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Upload signature dialog component.
@@ -8,7 +10,14 @@ import { MatDialogRef } from '@angular/material/dialog';
 @Component({
   selector: 'mifosx-upload-signature-dialog',
   templateUrl: './upload-signature-dialog.component.html',
-  styleUrls: ['./upload-signature-dialog.component.scss']
+  styleUrls: ['./upload-signature-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogTitle,
+    FileUploadComponent,
+    MatDialogActions,
+    MatDialogClose
+  ]
 })
 export class UploadSignatureDialogComponent {
   /** Client Signature */

src/app/clients/clients-view/custom-dialogs/view-signature-dialog/view-signature-dialog.component.ts

@@ -1,6 +1,13 @@
 /** Angular Imports */
 import { Component, Inject, OnInit } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import {
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+  MatDialogTitle,
+  MatDialogContent,
+  MatDialogActions,
+  MatDialogClose
+} from '@angular/material/dialog';
 import { DomSanitizer } from '@angular/platform-browser';
 
 /** Custom Services */
@@ -8,6 +15,8 @@ import { ClientsService } from 'app/clients/clients.service';
 
 /** Node Types */
 import { Buffer } from 'buffer';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * View signature dialog component.
@@ -15,7 +24,15 @@ import { Buffer } from 'buffer';
 @Component({
   selector: 'mifosx-view-signature-dialog',
   templateUrl: './view-signature-dialog.component.html',
-  styleUrls: ['./view-signature-dialog.component.scss']
+  styleUrls: ['./view-signature-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogTitle,
+    CdkScrollable,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose
+  ]
 })
 export class ViewSignatureDialogComponent implements OnInit {
   /** Id of client signature in documents */

src/app/clients/clients-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/clients/clients-view/documents-tab/documents-tab.component.ts

@@ -4,11 +4,17 @@ import { MatDialog } from '@angular/material/dialog';
 
 /** Custom Services */
 import { ClientsService } from '../../clients.service';
+import { EntityDocumentsTabComponent } from '../../../shared/tabs/entity-documents-tab/entity-documents-tab.component';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
   selector: 'mifosx-documents-tab',
   templateUrl: './documents-tab.component.html',
-  styleUrls: ['./documents-tab.component.scss']
+  styleUrls: ['./documents-tab.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    EntityDocumentsTabComponent
+  ]
 })
 export class DocumentsTabComponent {
   entityDocuments: any;

src/app/clients/clients-view/family-members-tab/add-family-member/add-family-member.component.ts

@@ -1,12 +1,14 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
-import { Router, ActivatedRoute } from '@angular/router';
+import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { ClientsService } from '../../../clients.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Add Family Member Component
@@ -14,7 +16,11 @@ import { Dates } from 'app/core/utils/dates';
 @Component({
   selector: 'mifosx-add-family-member',
   templateUrl: './add-family-member.component.html',
-  styleUrls: ['./add-family-member.component.scss']
+  styleUrls: ['./add-family-member.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatCheckbox
+  ]
 })
 export class AddFamilyMemberComponent implements OnInit {
   /** Maximum Due Date allowed. */