WEB-657: Working Capital loan update period payment rates

src/app/loans/loans-routing.module.ts

@@ -78,6 +78,8 @@ import { LoanBuyDownFeesDataResolver } from './common-resolvers/loan-buy-down-fe
 import { LoanOriginatorsTabComponent } from './loans-view/loan-originators-tab/loan-originators-tab.component';
 import { LoanOriginatorsResolver } from './common-resolvers/loan-originators.resolver';
 import { LoanProductsResolver } from './common-resolvers/loan-products.resolver';
+import { LoanPeriodPaymentRatesComponent } from './loans-view/working-capital/loan-period-payment-rates/loan-period-payment-rates.component';
+import { LoanPeriodPaymentRatesResolver } from './loans-view/working-capital/common-resolvers/loan-period-payment-rates.resolver';
 
 /** Loans Route. */
 const routes: Routes = [
@@ -149,6 +151,14 @@ const routes: Routes = [
               }
             ]
           },
+          {
+            path: 'payment-rates',
+            component: LoanPeriodPaymentRatesComponent,
+            data: { title: 'Period Payment Rates', breadcrumb: 'Period Payment Rates', routeParamBreadcrumb: false },
+            resolve: {
+              loanPaymentRatesData: LoanPeriodPaymentRatesResolver
+            }
+          },
           {
             path: 'deferred-income',
             data: { title: 'Loans Deferred Income', breadcrumb: 'Deferred income', routeParamBreadcrumb: false },
@@ -447,7 +457,8 @@ const routes: Routes = [
     LoanTermVariationsResolver,
     LoanDeferredIncomeDataResolver,
     LoanBuyDownFeesDataResolver,
-    LoanProductsResolver
+    LoanProductsResolver,
+    LoanPeriodPaymentRatesResolver
   ]
 })
 export class LoansRoutingModule {}

src/app/loans/loans-view/loans-view.component.html

@@ -307,12 +307,26 @@ <h3>{{ 'labels.heading.Account Overview' | translate }}</h3>
               productType: loanProductService.productType.value
             }"
             routerLinkActive
-            #dashboard="routerLinkActive"
-            [active]="dashboard.isActive"
+            #transactions="routerLinkActive"
+            [active]="transactions.isActive"
           >
             {{ 'labels.inputs.Transactions' | translate }}
           </a>
         }
+        @if (loanProductService.isWorkingCapital && loanDetailsData.status.active) {
+          <a
+            mat-tab-link
+            [routerLink]="['./payment-rates']"
+            [queryParams]="{
+              productType: loanProductService.productType.value
+            }"
+            routerLinkActive
+            #paymentRates="routerLinkActive"
+            [active]="paymentRates.isActive"
+          >
+            {{ 'labels.inputs.Period Payment Rates' | translate }}
+          </a>
+        }
         @if (loanProductService.isLoanProduct && loanDetailsData.enableIncomeCapitalization) {
           <a
             mat-tab-link

src/app/loans/loans-view/working-capital/common-resolvers/loan-period-payment-rates.resolver.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+/** Angular Imports */
+import { Injectable, inject } from '@angular/core';
+import { ActivatedRouteSnapshot } from '@angular/router';
+import { LoansService } from 'app/loans/loans.service';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/**
+ * Working Capital Period Payment Rates resolver.
+ */
+@Injectable()
+export class LoanPeriodPaymentRatesResolver {
+  private loansService = inject(LoansService);
+
+  /**
+   * Returns the Loans data.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const loanId = route.paramMap.get('loanId') || route.parent.paramMap.get('loanId');
+    return this.loansService.getWorkingCapitalPeriodPaymentRates(loanId);
+  }
+}

src/app/loans/loans-view/working-capital/loan-period-payment-rates/loan-period-payment-rates.component.html

@@ -0,0 +1,61 @@
+<!--
+  Copyright since 2025 Mifos Initiative
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
+<div class="container">
+  <h3>{{ 'labels.inputs.Period Payment Rates' | translate }}</h3>
+
+  <div class="layout-row transaction-buttons align-end gap-20px">
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="addPaymentRate()"
+      *mifosxHasPermission="'UPDATERATE_WORKINGCAPITALLOAN'"
+    >
+      {{ 'labels.buttons.Add' | translate }} {{ 'labels.inputs.Period Payment Rate' | translate }}
+    </button>
+  </div>
+
+  <table mat-table [dataSource]="loanPaymentRatesData">
+    <ng-container matColumnDef="id">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Id' | translate }}</th>
+      <td mat-cell *matCellDef="let item" [ngClass]="periodPaymentRateStyle(item.reversed)">
+        {{ item.id }}
+      </td>
+    </ng-container>
+    <ng-container matColumnDef="effectiveDate">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Effective Date' | translate }}</th>
+      <td mat-cell *matCellDef="let item" [ngClass]="periodPaymentRateStyle(item.reversed)">
+        {{ item.effectiveDate | dateFormat }}
+      </td>
+    </ng-container>
+    <ng-container matColumnDef="previousRate">
+      <th mat-header-cell *matHeaderCellDef>
+        {{ 'labels.buttons.Previous' | translate }} {{ 'labels.inputs.Rate' | translate }}
+      </th>
+      <td mat-cell *matCellDef="let item" [ngClass]="periodPaymentRateStyle(item.reversed)">
+        {{ item.previousRate | formatNumber }} %
+      </td>
+    </ng-container>
+    <ng-container matColumnDef="newRate">
+      <th mat-header-cell *matHeaderCellDef>
+        {{ 'labels.catalogs.New' | translate }} {{ 'labels.inputs.Rate' | translate }}
+      </th>
+      <td mat-cell *matCellDef="let item" [ngClass]="periodPaymentRateStyle(item.reversed)">
+        {{ item.newRate | formatNumber }} %
+      </td>
+    </ng-container>
+    <ng-container matColumnDef="createdDate">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Created On' | translate }}</th>
+      <td mat-cell *matCellDef="let item" [ngClass]="periodPaymentRateStyle(item.reversed)">
+        {{ item.createdDate | dateFormat }}
+      </td>
+    </ng-container>
+    <tr mat-header-row *matHeaderRowDef="loanPaymentRatesColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: loanPaymentRatesColumns"></tr>
+  </table>
+</div>

src/app/loans/loans-view/working-capital/loan-period-payment-rates/loan-period-payment-rates.component.scss

@@ -0,0 +1,23 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+@use 'assets/styles/helper';
+@use 'assets/styles/colours' as *;
+
+.container {
+  padding-bottom: 2%;
+  max-width: 100%;
+
+  table {
+    width: 100%;
+
+    .reversed {
+      text-decoration: line-through;
+      color: $status-active-overdue;
+    }
+  }
+}

src/app/loans/loans-view/working-capital/loan-period-payment-rates/loan-period-payment-rates.component.ts

@@ -0,0 +1,128 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+import { Component, inject, OnInit } from '@angular/core';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import {
+  MatTable,
+  MatColumnDef,
+  MatHeaderCellDef,
+  MatHeaderCell,
+  MatCellDef,
+  MatCell,
+  MatHeaderRowDef,
+  MatHeaderRow,
+  MatRowDef,
+  MatRow
+} from '@angular/material/table';
+import { FormatNumberPipe } from '@pipes/format-number.pipe';
+import { ActivatedRoute } from '@angular/router';
+import { PeriodPaymentRateChange } from 'app/loans/models/working-capital-loan-account.model';
+import { MatDialog } from '@angular/material/dialog';
+import { TranslateService } from '@ngx-translate/core';
+import { LoansService } from 'app/loans/loans.service';
+import { SettingsService } from 'app/settings/settings.service';
+import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
+import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
+import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
+
+@Component({
+  selector: 'mifosx-loan-period-payment-rates',
+  templateUrl: './loan-period-payment-rates.component.html',
+  styleUrl: './loan-period-payment-rates.component.scss',
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatTable,
+    MatColumnDef,
+    MatHeaderCellDef,
+    MatHeaderCell,
+    MatCellDef,
+    MatCell,
+    MatHeaderRowDef,
+    MatHeaderRow,
+    MatRowDef,
+    MatRow,
+    FormatNumberPipe
+  ]
+})
+export class LoanPeriodPaymentRatesComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private dialog = inject(MatDialog);
+  private translateService = inject(TranslateService);
+  private loanService = inject(LoansService);
+  private settingsService = inject(SettingsService);
+
+  loanPaymentRatesData: PeriodPaymentRateChange[] = [];
+
+  loanId: number | null = null;
+
+  loanPaymentRatesColumns: string[] = [
+    'id',
+    'effectiveDate',
+    'previousRate',
+    'newRate',
+    'createdDate'
+  ];
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.loanId = this.route.parent.snapshot.params['loanId'];
+
+    this.route.data.subscribe((data: { loanPaymentRatesData: PeriodPaymentRateChange[] }) => {
+      this.loanPaymentRatesData = data.loanPaymentRatesData;
+    });
+  }
+
+  addPaymentRate(): void {
+    const labelHeadingText: string = this.translateService.instant('labels.inputs.Period Payment Rate');
+    const formfields: FormfieldBase[] = [
+      new InputBase({
+        controlName: 'periodPaymentRate',
+        label: labelHeadingText,
+        value: '',
+        type: 'number',
+        required: true,
+        order: 1
+      }),
+      new InputBase({
+        controlName: 'note',
+        label: this.translateService.instant('labels.inputs.Note'),
+        value: '',
+        type: 'text',
+        required: false,
+        order: 2
+      })
+    ];
+    const data = {
+      title: this.translateService.instant('labels.buttons.Add') + ' ' + labelHeadingText,
+      layout: { addButtonText: this.translateService.instant('labels.buttons.Add') },
+      formfields: formfields
+    };
+    const dialogRef = this.dialog.open(FormDialogComponent, { data });
+    dialogRef.afterClosed().subscribe((response: any) => {
+      if (response?.data) {
+        const { periodPaymentRate, note } = response.data.value;
+        const payload = {
+          periodPaymentRate: periodPaymentRate,
+          note: note || '',
+          locale: this.settingsService.language.code,
+          dateFormat: this.settingsService.dateFormat
+        };
+        this.loanService.addWorkingCapitalPeriodPaymentRate(this.loanId, payload).subscribe((response: any) => {
+          this.loanService.getWorkingCapitalPeriodPaymentRates(this.loanId).subscribe((data: any) => {
+            this.loanPaymentRatesData = data;
+          });
+        });
+      }
+    });
+  }
+
+  periodPaymentRateStyle(reversed: boolean): string {
+    return reversed ? 'reversed' : '';
+  }
+}

src/app/loans/loans.service.ts

@@ -843,4 +843,25 @@ export class LoansService {
     const httpParams = new HttpParams().set('offset', offset.toString()).set('limit', limit.toString());
     return this.http.get('/entityDatatableChecks', { params: httpParams });
   }
+
+  /**
+   * Returns the Working Capital Loan Payment Rates data
+   */
+  getWorkingCapitalPeriodPaymentRates(loanId: any) {
+    return this.http.get(`/working-capital-loans/${loanId}/rate-changes`);
+  }
+
+  /**
+   * Add a Working Capital Loan Payment Rates
+   */
+  addWorkingCapitalPeriodPaymentRate(loanId: any, payload: any) {
+    return this.http.put(`/working-capital-loans/${loanId}/rate`, payload);
+  }
+
+  /**
+   * Undo a Working Capital Loan Payment Rates
+   */
+  undoWorkingCapitalPeriodPaymentRate(loanId: any, payload: any) {
+    return this.http.post(`/working-capital-loans/${loanId}/rate/undo`, payload);
+  }
 }

src/app/loans/models/working-capital-loan-account.model.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+export interface PeriodPaymentRateChange {
+  id: number;
+  loanId: number;
+  effectiveDate: number[];
+  previousRate: number;
+  newRate: number;
+  reversed: boolean;
+  createdDate: number[];
+}

src/app/shared/undo-dialog/undo-dialog.component.html

@@ -0,0 +1,24 @@
+<!--
+  Copyright since 2025 Mifos Initiative
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
+<h1 mat-dialog-title>{{ 'labels.heading.Undo' | translate }} {{ data.undoContext }}</h1>
+<div>
+  <form [formGroup]="undoActionForm">
+    <mat-dialog-content>
+      <mat-form-field class="flex-100">
+        <textarea formControlName="note" matInput placeholder="{{ 'labels.inputs.Notes' | translate }}"></textarea>
+      </mat-form-field>
+    </mat-dialog-content>
+    <mat-dialog-actions align="end">
+      <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+      <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true, data: undoActionForm.value }">
+        {{ 'labels.buttons.Undo' | translate }}
+      </button>
+    </mat-dialog-actions>
+  </form>
+</div>

src/app/shared/undo-dialog/undo-dialog.component.scss

@@ -0,0 +1,7 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */