Upgrading to Angular 20:

Replaced checked in package-lock.json by regenerated one. Ran ng update @angular/core@20 @angular/cli@20 Ran npm install @angular-builders/jest@^20.0.0 @fortawesome/angular-fontawesome@^3.0.0 @swimlane/ngx-graph@^11 Ran npm install ngx-mat-select-search@^8.0.2. Ran ng update @angular/material@20. Updated all eslint and typescript to the latest versions. Removed @angular-devkit/schematics. Updated fontawesome. Updated rxjs and tslib. Moved required node version from 16 to 20. Updated jest-preset-angular. Set preserveWhitespaces to false. Corrected two type declarations in two typescript files to make ng serve run without errors. Removed unused angular-devkit/schematics from view-user.component.ts . Updated list of supported browsers. Upgraded prettier. Ran prettier . --write the first time. Ran prettier . --write the second time. Ran ng generate @angular/core:inject with defaults, excepted a handful of files. Fixed remaining eslint problems. Added dist directory to ignores in eslint.config.js. Let prettier fix formatting, almost everything is just line breaks. Made htmlhint ignore @if and @for Angular constructs. Updated node version in Github workflow to 22.12.0 (build.yml). Updated .env.ts. Updated Angular datetime format strings from YYYY-MM-DD to yyyy-MM-dd. Merged changes from dev into angular20 branch.
2025-12-08 11:01:01 +01:00
parent f1b4ec2cf2
commit 7fd1486c08
1516 changed files with 39367 additions and 36037 deletions
@@ -14,10 +14,12 @@
          />
          <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
          <mat-datepicker #activatedOnDatePicker></mat-datepicker>
-          <mat-error *ngIf="activateFixedDepositsAccountForm.controls.activatedOnDate.hasError('required')">
-            {{ 'labels.inputs.Activated On Date' | translate }} {{ 'labels.commons.is' | translate }}
-            <strong>{{ 'labels.commons.required' | translate }}</strong>
-          </mat-error>
+          @if (activateFixedDepositsAccountForm.controls.activatedOnDate.hasError('required')) {
+            <mat-error>
+              {{ 'labels.inputs.Activated On Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          }
        </mat-form-field>
      </mat-card-content>

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
@@ -21,6 +21,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class ActivateFixedDepositsAccountComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private savingsService = inject(SavingsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private settingsService = inject(SettingsService);
+
  /** Minimum date allowed. */
  minDate = new Date(2000, 0, 1);
  /** Maximum date allowed. */
@@ -39,14 +46,7 @@ export class ActivateFixedDepositsAccountComponent implements OnInit {
   * @param {Router} router Router
   * @param {SettingsService} settingsService Settings Service
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private savingsService: SavingsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.accountId = this.route.parent.snapshot.params['fixedDepositAccountId'];
  }

@@ -6,91 +6,102 @@
          <mat-form-field>
            <mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
            <mat-select required formControlName="chargeId">
-              <mat-option *ngFor="let savingsCharge of savingsChargeOptions" [value]="savingsCharge.id">
-                {{ savingsCharge.name + ' (' + savingsCharge.currency.name + ')' }}
-              </mat-option>
+              @for (savingsCharge of savingsChargeOptions; track savingsCharge) {
+                <mat-option [value]="savingsCharge.id">
+                  {{ savingsCharge.name + ' (' + savingsCharge.currency.name + ')' }}
+                </mat-option>
+              }
            </mat-select>
-            <mat-error *ngIf="fixedDepositsChargeForm.controls.chargeId.hasError('required')">
-              {{ 'labels.inputs.Charge' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (fixedDepositsChargeForm.controls.chargeId.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Charge' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

-          <div *ngIf="chargeDetails" class="layout-column">
-            <mat-form-field>
-              <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
-              <input type="number" required matInput formControlName="amount" />
-              <mat-error *ngIf="fixedDepositsChargeForm.controls.amount.hasError('required')">
-                {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
-                <strong>{{ 'labels.commons.required' | translate }}</strong>
-              </mat-error>
-            </mat-form-field>
-
-            <mat-form-field>
-              <mat-label>{{ 'labels.inputs.Charge Calculation' | translate }}</mat-label>
-              <mat-select formControlName="chargeCalculationType">
-                <mat-option
-                  *ngFor="let chargeCalculation of chargeDetails.chargeCalculationTypeOptions"
-                  [value]="chargeCalculation.id"
-                >
-                  {{ chargeCalculation.value }}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-
-            <mat-form-field>
-              <mat-label>{{ 'labels.inputs.Charge time type' | translate }}</mat-label>
-              <mat-select formControlName="chargeTimeType">
-                <mat-option *ngFor="let chargeTime of chargeDetails.chargeTimeTypeOptions" [value]="chargeTime.id">
-                  {{ chargeTime.value }}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-
-            <mat-form-field *ngIf="fixedDepositsChargeForm.contains('dueDate')" (click)="dueDatePicker.open()">
-              <mat-label>{{ 'labels.inputs.Due for collection on' | translate }}</mat-label>
-              <input
-                matInput
-                [min]="minDate"
-                [max]="maxDate"
-                [matDatepicker]="dueDatePicker"
-                required
-                formControlName="dueDate"
-              />
-              <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
-              <mat-datepicker #dueDatePicker></mat-datepicker>
-              <mat-error *ngIf="fixedDepositsChargeForm.controls.dueDate.hasError('required')">
-                {{ 'labels.inputs.Due for collection on' | translate }} {{ 'labels.commons.is' | translate }}
-                <strong>{{ 'labels.commons.required' | translate }}</strong>
-              </mat-error>
-            </mat-form-field>
-
-            <mat-form-field
-              *ngIf="fixedDepositsChargeForm.contains('feeOnMonthDay')"
-              (click)="feeOnMonthDayPicker.open()"
-            >
-              <mat-label>{{ 'labels.inputs.Due On' | translate }}</mat-label>
-              <input
-                matInput
-                [min]="minDate"
-                [max]="maxDate"
-                [matDatepicker]="feeOnMonthDayPicker"
-                required
-                formControlName="feeOnMonthDay"
-              />
-              <mat-datepicker-toggle matSuffix [for]="feeOnMonthDayPicker"></mat-datepicker-toggle>
-              <mat-datepicker #feeOnMonthDayPicker></mat-datepicker>
-              <mat-error *ngIf="fixedDepositsChargeForm.controls.feeOnMonthDay.hasError('required')">
-                {{ 'labels.inputs.Due Date' | translate }} {{ 'labels.commons.is' | translate }}
-                <strong>{{ 'labels.commons.required' | translate }}</strong>
-              </mat-error>
-            </mat-form-field>
-
-            <mat-form-field *ngIf="fixedDepositsChargeForm.contains('feeInterval')">
-              <mat-label>{{ 'labels.inputs.Repeats Every' | translate }}</mat-label>
-              <input matInput formControlName="feeInterval" />
-            </mat-form-field>
-          </div>
+          @if (chargeDetails) {
+            <div class="layout-column">
+              <mat-form-field>
+                <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
+                <input type="number" required matInput formControlName="amount" />
+                @if (fixedDepositsChargeForm.controls.amount.hasError('required')) {
+                  <mat-error>
+                    {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
+                    <strong>{{ 'labels.commons.required' | translate }}</strong>
+                  </mat-error>
+                }
+              </mat-form-field>
+              <mat-form-field>
+                <mat-label>{{ 'labels.inputs.Charge Calculation' | translate }}</mat-label>
+                <mat-select formControlName="chargeCalculationType">
+                  @for (chargeCalculation of chargeDetails.chargeCalculationTypeOptions; track chargeCalculation) {
+                    <mat-option [value]="chargeCalculation.id">
+                      {{ chargeCalculation.value }}
+                    </mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+              <mat-form-field>
+                <mat-label>{{ 'labels.inputs.Charge time type' | translate }}</mat-label>
+                <mat-select formControlName="chargeTimeType">
+                  @for (chargeTime of chargeDetails.chargeTimeTypeOptions; track chargeTime) {
+                    <mat-option [value]="chargeTime.id">
+                      {{ chargeTime.value }}
+                    </mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+              @if (fixedDepositsChargeForm.contains('dueDate')) {
+                <mat-form-field (click)="dueDatePicker.open()">
+                  <mat-label>{{ 'labels.inputs.Due for collection on' | translate }}</mat-label>
+                  <input
+                    matInput
+                    [min]="minDate"
+                    [max]="maxDate"
+                    [matDatepicker]="dueDatePicker"
+                    required
+                    formControlName="dueDate"
+                  />
+                  <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
+                  <mat-datepicker #dueDatePicker></mat-datepicker>
+                  @if (fixedDepositsChargeForm.controls.dueDate.hasError('required')) {
+                    <mat-error>
+                      {{ 'labels.inputs.Due for collection on' | translate }} {{ 'labels.commons.is' | translate }}
+                      <strong>{{ 'labels.commons.required' | translate }}</strong>
+                    </mat-error>
+                  }
+                </mat-form-field>
+              }
+              @if (fixedDepositsChargeForm.contains('feeOnMonthDay')) {
+                <mat-form-field (click)="feeOnMonthDayPicker.open()">
+                  <mat-label>{{ 'labels.inputs.Due On' | translate }}</mat-label>
+                  <input
+                    matInput
+                    [min]="minDate"
+                    [max]="maxDate"
+                    [matDatepicker]="feeOnMonthDayPicker"
+                    required
+                    formControlName="feeOnMonthDay"
+                  />
+                  <mat-datepicker-toggle matSuffix [for]="feeOnMonthDayPicker"></mat-datepicker-toggle>
+                  <mat-datepicker #feeOnMonthDayPicker></mat-datepicker>
+                  @if (fixedDepositsChargeForm.controls.feeOnMonthDay.hasError('required')) {
+                    <mat-error>
+                      {{ 'labels.inputs.Due Date' | translate }} {{ 'labels.commons.is' | translate }}
+                      <strong>{{ 'labels.commons.required' | translate }}</strong>
+                    </mat-error>
+                  }
+                </mat-form-field>
+              }
+              @if (fixedDepositsChargeForm.contains('feeInterval')) {
+                <mat-form-field>
+                  <mat-label>{{ 'labels.inputs.Repeats Every' | translate }}</mat-label>
+                  <input matInput formControlName="feeInterval" />
+                </mat-form-field>
+              }
+            </div>
+          }
        </div>

        <mat-card-actions class="layout-row layout-xs-column layout-align-center gap-5px">
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
  UntypedFormGroup,
  UntypedFormBuilder,
@@ -28,6 +28,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class AddChargeFixedDepositsAccountComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dateUtils = inject(Dates);
+  private savingsService = inject(SavingsService);
+  private settingsService = inject(SettingsService);
+
  /** Minimum Due Date allowed. */
  minDate = new Date(2000, 0, 1);
  /** Maximum Due Date allowed. */
@@ -50,14 +57,7 @@ export class AddChargeFixedDepositsAccountComponent implements OnInit {
   * @param {SavingsService} savingsService Savings Service
   * @param {SettingsService} settingsService Settings Service
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private route: ActivatedRoute,
-    private router: Router,
-    private dateUtils: Dates,
-    private savingsService: SavingsService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { fixedDepositsAccountActionData: any }) => {
      this.savingsChargeOptions = data.fixedDepositsAccountActionData.chargeOptions;
    });
@@ -15,10 +15,12 @@
            />
            <mat-datepicker-toggle matSuffix [for]="approvedOnDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #approvedOnDatePicker></mat-datepicker>
-            <mat-error *ngIf="approveFixedDepositsAccountForm.controls.approvedOnDate.hasError('required')">
-              {{ 'labels.inputs.Approved On Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (approveFixedDepositsAccountForm.controls.approvedOnDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Approved On Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field>
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
@@ -23,6 +23,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class ApproveFixedDepositsAccountComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private fixedDepositsService = inject(FixedDepositsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private settingsService = inject(SettingsService);
+
  /** Minimum date allowed. */
  minDate = new Date(2000, 0, 1);
  /** Maximum date allowed. */
@@ -40,14 +47,7 @@ export class ApproveFixedDepositsAccountComponent implements OnInit {
   * @param {Router} router Router
   * @param {SettingsService} settingsService Settings Service
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private fixedDepositsService: FixedDepositsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.accountId = this.route.parent.snapshot.params['fixedDepositAccountId'];
  }

@@ -15,10 +15,12 @@
            />
            <mat-datepicker-toggle matSuffix [for]="closedOnDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #closedOnDatePicker></mat-datepicker>
-            <mat-error *ngIf="closeOnMaturityAccountForm.controls.closedOnDate.hasError('required')">
-              {{ 'labels.inputs.Closed On Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (closeOnMaturityAccountForm.controls.closedOnDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Closed On Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field>
@@ -29,33 +31,45 @@
          <mat-form-field>
            <mat-label>{{ 'labels.inputs.Action' | translate }}</mat-label>
            <mat-select required formControlName="onAccountClosureId">
-              <mat-option *ngFor="let closureOption of onAccountClosureOptions" [value]="closureOption.id">
-                {{ closureOption.value }}
-              </mat-option>
+              @for (closureOption of onAccountClosureOptions; track closureOption) {
+                <mat-option [value]="closureOption.id">
+                  {{ closureOption.value }}
+                </mat-option>
+              }
            </mat-select>
-            <mat-error *ngIf="closeOnMaturityAccountForm.controls.onAccountClosureId.hasError('required')">
-              {{ 'labels.inputs.Account action' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (closeOnMaturityAccountForm.controls.onAccountClosureId.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Account action' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

-          <mat-form-field *ngIf="closeOnMaturityAccountForm.contains('toSavingsAccountId')">
-            <mat-label>{{ 'labels.inputs.Transfer to Savings' | translate }}</mat-label>
-            <mat-select required formControlName="toSavingsAccountId">
-              <mat-option *ngFor="let account of savingsAccountsData" [value]="account.id">
-                {{ account.accountNo }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="closeOnMaturityAccountForm.controls.toSavingsAccountId.hasError('required')">
-              {{ 'labels.inputs.Transfer to savings account' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+          @if (closeOnMaturityAccountForm.contains('toSavingsAccountId')) {
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Transfer to Savings' | translate }}</mat-label>
+              <mat-select required formControlName="toSavingsAccountId">
+                @for (account of savingsAccountsData; track account) {
+                  <mat-option [value]="account.id">
+                    {{ account.accountNo }}
+                  </mat-option>
+                }
+              </mat-select>
+              @if (closeOnMaturityAccountForm.controls.toSavingsAccountId.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.Transfer to savings account' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          }

-          <mat-form-field *ngIf="closeOnMaturityAccountForm.contains('transferDescription')">
-            <mat-label>{{ 'labels.inputs.Transfer Description' | translate }}</mat-label>
-            <input matInput formControlName="transferDescription" />
-          </mat-form-field>
+          @if (closeOnMaturityAccountForm.contains('transferDescription')) {
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Transfer Description' | translate }}</mat-label>
+              <input matInput formControlName="transferDescription" />
+            </mat-form-field>
+          }

          <mat-form-field>
            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
  UntypedFormGroup,
  UntypedFormBuilder,
@@ -29,6 +29,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class CloseFixedDepositsAccountComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private fixedDepositsService = inject(FixedDepositsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private settingsService = inject(SettingsService);
+
  /** Minimum date allowed. */
  minDate = new Date(2000, 0, 1);
  /** Maximum date allowed. */
@@ -53,14 +60,7 @@ export class CloseFixedDepositsAccountComponent implements OnInit {
   * @param {Router} router Router
   * @param {SettingsService} settingsService Settings Service
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private fixedDepositsService: FixedDepositsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { fixedDepositsAccountActionData: any }) => {
      this.savingsAccountsData = data.fixedDepositsAccountActionData.savingsAccounts;
      this.onAccountClosureOptions = data.fixedDepositsAccountActionData.onAccountClosureOptions;
@@ -1,15 +1,27 @@
-<mifosx-approve-fixed-deposits-account *ngIf="actions['Approve']"></mifosx-approve-fixed-deposits-account>
-<mifosx-reject-fixed-deposits-account *ngIf="actions['Reject']"></mifosx-reject-fixed-deposits-account>
-<mifosx-activate-fixed-deposits-account *ngIf="actions['Activate']"></mifosx-activate-fixed-deposits-account>
-<mifosx-undo-approval-fixed-deposits-account
-  *ngIf="actions['Undo Approval'] || actions['Undo Activation']"
-></mifosx-undo-approval-fixed-deposits-account>
-<mifosx-withdraw-by-client-fixed-deposits-account
-  *ngIf="actions['Withdrawn by Client']"
-></mifosx-withdraw-by-client-fixed-deposits-account>
-<mifosx-add-charge-fixed-deposits-account *ngIf="actions['Add Charge']"></mifosx-add-charge-fixed-deposits-account>
-<mifosx-premature-close-fixed-deposits-account
-  *ngIf="actions['Premature Close']"
-></mifosx-premature-close-fixed-deposits-account>
-<mifosx-close-fixed-deposits-account *ngIf="actions['Close']"></mifosx-close-fixed-deposits-account>
-<mifosx-fixed-deposits-cash-transaction *ngIf="actions['Withdrawal']"></mifosx-fixed-deposits-cash-transaction>
+@if (actions['Approve']) {
+  <mifosx-approve-fixed-deposits-account></mifosx-approve-fixed-deposits-account>
+}
+@if (actions['Reject']) {
+  <mifosx-reject-fixed-deposits-account></mifosx-reject-fixed-deposits-account>
+}
+@if (actions['Activate']) {
+  <mifosx-activate-fixed-deposits-account></mifosx-activate-fixed-deposits-account>
+}
+@if (actions['Undo Approval'] || actions['Undo Activation']) {
+  <mifosx-undo-approval-fixed-deposits-account></mifosx-undo-approval-fixed-deposits-account>
+}
+@if (actions['Withdrawn by Client']) {
+  <mifosx-withdraw-by-client-fixed-deposits-account></mifosx-withdraw-by-client-fixed-deposits-account>
+}
+@if (actions['Add Charge']) {
+  <mifosx-add-charge-fixed-deposits-account></mifosx-add-charge-fixed-deposits-account>
+}
+@if (actions['Premature Close']) {
+  <mifosx-premature-close-fixed-deposits-account></mifosx-premature-close-fixed-deposits-account>
+}
+@if (actions['Close']) {
+  <mifosx-close-fixed-deposits-account></mifosx-close-fixed-deposits-account>
+}
+@if (actions['Withdrawal']) {
+  <mifosx-fixed-deposits-cash-transaction></mifosx-fixed-deposits-cash-transaction>
+}
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { ApproveFixedDepositsAccountComponent } from './approve-fixed-deposits-account/approve-fixed-deposits-account.component';
 import { RejectFixedDepositsAccountComponent } from './reject-fixed-deposits-account/reject-fixed-deposits-account.component';
@@ -33,6 +33,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class FixedDepositsAccountActionsComponent {
+  private route = inject(ActivatedRoute);
+
  /** Flag object to store possible actions and render appropriate UI to the user */
  actions: {
    Approve: boolean;
@@ -61,7 +63,7 @@ export class FixedDepositsAccountActionsComponent {
  /**
   * @param {ActivatedRoute} route Activated Route
   */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
    const name = this.route.snapshot.params['name'];
    if (name && name in this.actions) {
      this.actions[name as keyof typeof this.actions] = true;
@@ -1,8 +1,10 @@
 <div class="container mat-elevation-z8">
  <mat-card>
-    <h2 mat-title *ngIf="transactionType.withdrawal">
-      {{ 'labels.menus.' + actionName | translate }} {{ 'labels.heading.Fixed Deposit Transactions' | translate }}
-    </h2>
+    @if (transactionType.withdrawal) {
+      <h2 mat-title>
+        {{ 'labels.menus.' + actionName | translate }} {{ 'labels.heading.Fixed Deposit Transactions' | translate }}
+      </h2>
+    }

    <form [formGroup]="accountTransactionForm" (ngSubmit)="submit()">
      <mat-card-content class="layout-column">
@@ -18,10 +20,12 @@
          />
          <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
          <mat-datepicker #dueDatePicker></mat-datepicker>
-          <mat-error *ngIf="accountTransactionForm.controls.transactionDate.hasError('required')">
-            {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
-            <strong>{{ 'labels.commons.required' | translate }}</strong>
-          </mat-error>
+          @if (accountTransactionForm.controls.transactionDate.hasError('required')) {
+            <mat-error>
+              {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          }
        </mat-form-field>

        <mifosx-input-amount
@@ -35,9 +39,11 @@
        <mat-form-field>
          <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
          <mat-select required formControlName="paymentTypeId">
-            <mat-option *ngFor="let paymentType of paymentTypeOptions" [value]="paymentType.id">
-              {{ paymentType.name }}
-            </mat-option>
+            @for (paymentType of paymentTypeOptions; track paymentType) {
+              <mat-option [value]="paymentType.id">
+                {{ paymentType.name }}
+              </mat-option>
+            }
          </mat-select>
        </mat-form-field>

@@ -51,30 +57,40 @@
          </span>
        </div>

-        <mat-form-field *ngIf="addPaymentDetailsFlag">
-          <mat-label>{{ 'labels.inputs.Account Number' | translate }}</mat-label>
-          <input type="number" formControlName="accountNumber" matInput />
-        </mat-form-field>
+        @if (addPaymentDetailsFlag) {
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Account Number' | translate }}</mat-label>
+            <input type="number" formControlName="accountNumber" matInput />
+          </mat-form-field>
+        }

-        <mat-form-field *ngIf="addPaymentDetailsFlag">
-          <mat-label>{{ 'labels.inputs.Cheque' | translate }}</mat-label>
-          <input type="number" formControlName="checkNumber" matInput />
-        </mat-form-field>
+        @if (addPaymentDetailsFlag) {
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Cheque' | translate }}</mat-label>
+            <input type="number" formControlName="checkNumber" matInput />
+          </mat-form-field>
+        }

-        <mat-form-field *ngIf="addPaymentDetailsFlag">
-          <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
-          <input formControlName="routingCode" matInput />
-        </mat-form-field>
+        @if (addPaymentDetailsFlag) {
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
+            <input formControlName="routingCode" matInput />
+          </mat-form-field>
+        }

-        <mat-form-field *ngIf="addPaymentDetailsFlag">
-          <mat-label>{{ 'labels.inputs.Receipt Number' | translate }}</mat-label>
-          <input formControlName="receiptNumber" matInput />
-        </mat-form-field>
+        @if (addPaymentDetailsFlag) {
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Receipt Number' | translate }}</mat-label>
+            <input formControlName="receiptNumber" matInput />
+          </mat-form-field>
+        }

-        <mat-form-field *ngIf="addPaymentDetailsFlag">
-          <mat-label>{{ 'labels.inputs.Bank' | translate }}</mat-label>
-          <input formControlName="bankNumber" matInput />
-        </mat-form-field>
+        @if (addPaymentDetailsFlag) {
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Bank' | translate }}</mat-label>
+            <input formControlName="bankNumber" matInput />
+          </mat-form-field>
+        }

        <mat-form-field>
          <mat-label>{{ 'labels.inputs.Notes' | translate }}</mat-label>
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
  UntypedFormBuilder,
  UntypedFormControl,
@@ -29,6 +29,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class FixedDepositsCashTransactionComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dateUtils = inject(Dates);
+  private fixedDepositsService = inject(FixedDepositsService);
+  private settingsService = inject(SettingsService);
+
  /** Minimum Due Date allowed. */
  minDate = new Date(2000, 0, 1);
  /** Maximum Due Date allowed. */
@@ -57,14 +64,7 @@ export class FixedDepositsCashTransactionComponent implements OnInit {
   * @param {Router} router Router for navigation.
   * @param {SettingsService} settingsService Settings Service
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private route: ActivatedRoute,
-    private router: Router,
-    private dateUtils: Dates,
-    private fixedDepositsService: FixedDepositsService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { fixedDepositsAccountActionData: any }) => {
      this.currency = data.fixedDepositsAccountActionData.currency;
      this.paymentTypeOptions = data.fixedDepositsAccountActionData.paymentTypeOptions;
@@ -15,52 +15,72 @@
            />
            <mat-datepicker-toggle matSuffix [for]="closedOnDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #closedOnDatePicker></mat-datepicker>
-            <mat-error *ngIf="prematureCloseAccountForm.controls.closedOnDate.hasError('required')">
-              {{ 'labels.inputs.Premature Close Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (prematureCloseAccountForm.controls.closedOnDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Premature Close Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

-          <mat-form-field *ngIf="prematureCloseAccountForm.controls.maturityAmount">
-            <mat-label>{{ 'labels.inputs.Maturity Amount' | translate }}</mat-label>
-            <input type="number" matInput formControlName="maturityAmount" />
-          </mat-form-field>
+          @if (prematureCloseAccountForm.controls.maturityAmount) {
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Maturity Amount' | translate }}</mat-label>
+              <input type="number" matInput formControlName="maturityAmount" />
+            </mat-form-field>
+          }

-          <mat-form-field *ngIf="prematureCloseAccountForm.contains('onAccountClosureId')">
-            <mat-label>{{ 'labels.inputs.Action' | translate }}</mat-label>
-            <mat-select required formControlName="onAccountClosureId">
-              <mat-option *ngFor="let closureOption of onAccountClosureOptions" [value]="closureOption.id">
-                {{ closureOption.value }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="prematureCloseAccountForm.controls.onAccountClosureId.hasError('required')">
-              {{ 'labels.inputs.Account action' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+          @if (prematureCloseAccountForm.contains('onAccountClosureId')) {
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Action' | translate }}</mat-label>
+              <mat-select required formControlName="onAccountClosureId">
+                @for (closureOption of onAccountClosureOptions; track closureOption) {
+                  <mat-option [value]="closureOption.id">
+                    {{ closureOption.value }}
+                  </mat-option>
+                }
+              </mat-select>
+              @if (prematureCloseAccountForm.controls.onAccountClosureId.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.Account action' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          }

-          <mat-form-field *ngIf="prematureCloseAccountForm.contains('toSavingsAccountId')">
-            <mat-label>{{ 'labels.inputs.Transfer to Savings' | translate }}</mat-label>
-            <mat-select required formControlName="toSavingsAccountId">
-              <mat-option *ngFor="let account of savingsAccountsData" [value]="account.id">
-                {{ account.accountNo }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="prematureCloseAccountForm.controls.toSavingsAccountId.hasError('required')">
-              {{ 'labels.inputs.Transfer to savings account' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+          @if (prematureCloseAccountForm.contains('toSavingsAccountId')) {
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Transfer to Savings' | translate }}</mat-label>
+              <mat-select required formControlName="toSavingsAccountId">
+                @for (account of savingsAccountsData; track account) {
+                  <mat-option [value]="account.id">
+                    {{ account.accountNo }}
+                  </mat-option>
+                }
+              </mat-select>
+              @if (prematureCloseAccountForm.controls.toSavingsAccountId.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.Transfer to savings account' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          }

-          <mat-form-field *ngIf="prematureCloseAccountForm.contains('transferDescription')">
-            <mat-label>{{ 'labels.inputs.Transfer Description' | translate }}</mat-label>
-            <input matInput formControlName="transferDescription" />
-          </mat-form-field>
+          @if (prematureCloseAccountForm.contains('transferDescription')) {
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Transfer Description' | translate }}</mat-label>
+              <input matInput formControlName="transferDescription" />
+            </mat-form-field>
+          }

-          <mat-form-field *ngIf="prematureCloseAccountForm.contains('note')">
-            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
-            <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
-          </mat-form-field>
+          @if (prematureCloseAccountForm.contains('note')) {
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
+              <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
+            </mat-form-field>
+          }
        </div>
      </mat-card-content>

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
  UntypedFormGroup,
  UntypedFormBuilder,
@@ -29,6 +29,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class PrematureCloseFixedDepositsAccountComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private fixedDepositsService = inject(FixedDepositsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private settingsService = inject(SettingsService);
+
  /** Minimum date allowed. */
  minDate = new Date(2000, 0, 1);
  /** Maximum date allowed. */
@@ -52,14 +59,7 @@ export class PrematureCloseFixedDepositsAccountComponent implements OnInit {
   * @param {Router} router Router
   * @param {SettingsService} settingsService Settings Service
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private fixedDepositsService: FixedDepositsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.accountId = this.route.parent.snapshot.params['fixedDepositAccountId'];
  }

@@ -15,10 +15,12 @@
            />
            <mat-datepicker-toggle matSuffix [for]="rejectedOnDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #rejectedOnDatePicker></mat-datepicker>
-            <mat-error *ngIf="rejectFixedDepositsAccountForm.controls.rejectedOnDate.hasError('required')">
-              {{ 'labels.inputs.Rejected On Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (rejectFixedDepositsAccountForm.controls.rejectedOnDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Rejected On Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field>
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
@@ -23,6 +23,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class RejectFixedDepositsAccountComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private fixedDepositsService = inject(FixedDepositsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private settingsService = inject(SettingsService);
+
  /** Minimum date allowed. */
  minDate = new Date(2000, 0, 1);
  /** Maximum date allowed. */
@@ -40,14 +47,7 @@ export class RejectFixedDepositsAccountComponent implements OnInit {
   * @param {Router} router Router
   * @param {SettingsService} settingsService Settings Service
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private fixedDepositsService: FixedDepositsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.accountId = this.route.parent.snapshot.params['fixedDepositAccountId'];
  }

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';

@@ -22,6 +22,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class UndoApprovalFixedDepositsAccountComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private savingsService = inject(SavingsService);
+  private fixedDepositsService = inject(FixedDepositsService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
  /** Undo Approval Fixed Deposits Account form. */
  undoApprovalFixedDepositsAccountForm: UntypedFormGroup;
  /** Fixed Deposits Account Id */
@@ -37,13 +43,7 @@ export class UndoApprovalFixedDepositsAccountComponent implements OnInit {
   * @param {ActivatedRoute} route Activated Route
   * @param {Router} router Router
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private savingsService: SavingsService,
-    private fixedDepositsService: FixedDepositsService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
    this.undoCommand = 'undoapproval'; // Default command
    this.undoAction = this.route.snapshot.params['name'];
    if (this.undoAction === 'Undo Activation') {
@@ -15,10 +15,12 @@
            />
            <mat-datepicker-toggle matSuffix [for]="withdrawnOnDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #withdrawnOnDatePicker></mat-datepicker>
-            <mat-error *ngIf="withdrawFixedDepositsAccountForm.controls.withdrawnOnDate.hasError('required')">
-              {{ 'labels.inputs.Withdrawn On Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (withdrawFixedDepositsAccountForm.controls.withdrawnOnDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Withdrawn On Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field>
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
@@ -23,6 +23,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class WithdrawByClientFixedDepositsAccountComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private fixedDepositsService = inject(FixedDepositsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private settingsService = inject(SettingsService);
+
  /** Minimum date allowed. */
  minDate = new Date(2000, 0, 1);
  /** Maximum date allowed. */
@@ -40,14 +47,7 @@ export class WithdrawByClientFixedDepositsAccountComponent implements OnInit {
   * @param {Router} router Router
   * @param {SettingsService} settingsService Settings Service
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private fixedDepositsService: FixedDepositsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.accountId = this.route.parent.snapshot.params['fixedDepositAccountId'];
  }