WEB-657: Working Capital loan account details enhanced

Author: alberto-art3ch

src/app/loans/common-resolvers/working-capital/loan-amortization-schedule.resolver.ts

@@ -0,0 +1,39 @@
+/**
+ * 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 { Injectable, inject } from '@angular/core';
+import { ActivatedRouteSnapshot } from '@angular/router';
+import { Observable } from 'rxjs';
+import { LoanBaseResolver } from '../loan-base.resolver';
+import { LoansService } from 'app/loans/loans.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoanAmortizationScheduleResolver extends LoanBaseResolver {
+  private loansService = inject(LoansService);
+
+  constructor() {
+    super();
+  }
+
+  /**
+   * Returns the Loans with Association data.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> | null {
+    this.initialize(route);
+    const loanId = route.paramMap.get('loanId') || route.parent?.paramMap.get('loanId');
+    if (!isNaN(+loanId)) {
+      if (this.isWorkingCapital) {
+        return this.loansService.getWorkingCapitalLoanAmortizationSchedule(loanId);
+      }
+    }
+    return null;
+  }
+}

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

@@ -79,6 +79,9 @@ import { LoanOriginatorsTabComponent } from './loans-view/loan-originators-tab/l
 import { LoanOriginatorsResolver } from './common-resolvers/loan-originators.resolver';
 import { LoanProductsResolver } from './common-resolvers/loan-products.resolver';
 import { LoanDelinquencyRangeScheduleResolver } from './common-resolvers/working-capital/loan-delinquency-actions.resolver';
+import { LoanAmortizationScheduleTabComponent } from './loans-view/working-capital/loan-amortization-schedule-tab/loan-amortization-schedule-tab.component';
+import { LoanAmortizationScheduleResolver } from './common-resolvers/working-capital/loan-amortization-schedule.resolver';
+import { LoanBalancesTabComponent } from './loans-view/working-capital/loan-balances-tab/loan-balances-tab.component';
 
 /** Loans Route. */
 const routes: Routes = [
@@ -136,6 +139,19 @@ const routes: Routes = [
             component: RepaymentScheduleTabComponent,
             data: { title: 'Repayment Schedule', breadcrumb: 'Repayment Schedule', routeParamBreadcrumb: false }
           },
+          {
+            path: 'balances',
+            component: LoanBalancesTabComponent,
+            data: { title: 'Balances', breadcrumb: 'Balances', routeParamBreadcrumb: false }
+          },
+          {
+            path: 'amortization-schedule',
+            component: LoanAmortizationScheduleTabComponent,
+            data: { title: 'Amortization Schedule', breadcrumb: 'Amortization Schedule', routeParamBreadcrumb: false },
+            resolve: {
+              amortizationSchedule: LoanAmortizationScheduleResolver
+            }
+          },
           {
             path: 'transactions',
             data: { title: 'Loans Account Transactions', breadcrumb: 'Transactions', routeParamBreadcrumb: false },
@@ -449,7 +465,8 @@ const routes: Routes = [
     LoanTermVariationsResolver,
     LoanDeferredIncomeDataResolver,
     LoanBuyDownFeesDataResolver,
-    LoanProductsResolver
+    LoanProductsResolver,
+    LoanAmortizationScheduleResolver
   ]
 })
 export class LoansRoutingModule {}

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

@@ -16,8 +16,17 @@ <h3>{{ 'labels.heading.Loan Details' | translate }}</h3>
         <span class="flex-50">{{ loanDetails.transactionProcessingStrategyName | translateKey: 'catalogs' }}</span>
       </div>
     }
+    <div class="flex-fill layout-row">
+      <span class="flex-50">{{ 'labels.inputs.Currency' | translate }}</span>
+      <span class="flex-50">{{ loanDetails.currency?.code }}</span>
+    </div>
 
     @if (loanProductService.isWorkingCapital) {
+      <div class="flex-fill layout-row">
+        <span class="flex-50"> {{ 'labels.inputs.Amortization Type' | translate }} </span>
+        <span class="flex-50"> {{ loanDetails.product.amortizationType?.value | translateKey: 'catalogs' }} </span>
+      </div>
+
       <div class="flex-fill layout-row">
         <span class="flex-50">{{ 'labels.inputs.Period Payment Frequency' | translate }}</span>
         <span class="flex-50">

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

@@ -291,6 +291,24 @@ <h3>{{ 'labels.heading.Loan Amounts' | translate }}</h3>
               }}</span>
             </div>
           }
+          @if (loanDetails.discountProposed > 0) {
+            <div class="flex-contents">
+              <span class="flex-50">{{ 'labels.inputs.Proposed Discount' | translate }}:</span>
+              <span class="flex-50">{{ loanDetails.discountProposed | formatNumber }}</span>
+            </div>
+          }
+          @if (loanDetails.discountApproved > 0) {
+            <div class="flex-contents">
+              <span class="flex-50">{{ 'labels.inputs.Approved Discount' | translate }}:</span>
+              <span class="flex-50">{{ loanDetails.discountApproved | formatNumber }}</span>
+            </div>
+          }
+          @if (loanDetails.discount > 0) {
+            <div class="flex-contents">
+              <span class="flex-50">{{ 'labels.inputs.Discount' | translate }}:</span>
+              <span class="flex-50">{{ loanDetails.discount | formatNumber }}</span>
+            </div>
+          }
           @if (loanDetails.balloonRepaymentAmount > 0) {
             <div class="flex-contents">
               <span class="flex-50">{{ 'labels.inputs.Balloon Repayment Amount' | translate }}:</span>

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

@@ -80,7 +80,7 @@
                     </tbody>
                   </table>
                 </div>
-                @if (loanDisplayArrearsDelinquency !== 1) {
+                @if (loanProductService.isLoanProduct && loanDisplayArrearsDelinquency !== 1) {
                   <div>
                     <table class="account-overview">
                       <tbody>
@@ -113,6 +113,29 @@
                     </table>
                   </div>
                 }
+                @if (
+                  loanProductService.isWorkingCapital &&
+                  loanDetailsData?.collectionData &&
+                  loanDetailsData.collectionData.delinquentDays > 0
+                ) {
+                  <div>
+                    <table class="account-overview">
+                      <tbody>
+                        <tr>
+                          <td>{{ 'labels.inputs.Delinquency Classification' | translate }} :</td>
+                          <td>
+                            <span class="m-r-3"><i [ngClass]="loanDelinquencyClassificationStyle"></i></span>
+                            {{ loanDetailsData?.delinquencyBucket?.name }}
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>{{ 'labels.inputs.Delinquent Days' | translate }} :</td>
+                          <td>{{ loanDetailsData?.collectionData.delinquentDays | formatNumber }}</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                }
               </div>
 
               @if (loanDetailsData.summary) {
@@ -287,18 +310,46 @@ <h3>{{ 'labels.heading.Account Overview' | translate }}</h3>
             {{ 'labels.inputs.General' | translate }}
           </a>
         }
-        <a
-          mat-tab-link
-          [routerLink]="['./repayment-schedule']"
-          [queryParams]="{
-            productType: loanProductService.productType.value
-          }"
-          routerLinkActive
-          #repaymentSchedule="routerLinkActive"
-          [active]="repaymentSchedule.isActive"
-        >
-          {{ 'labels.inputs.Repayment Schedule' | translate }}
-        </a>
+        @if (loanProductService.isLoanProduct) {
+          <a
+            mat-tab-link
+            [routerLink]="['./repayment-schedule']"
+            [queryParams]="{
+              productType: loanProductService.productType.value
+            }"
+            routerLinkActive
+            #repaymentSchedule="routerLinkActive"
+            [active]="repaymentSchedule.isActive"
+          >
+            {{ 'labels.inputs.Repayment Schedule' | translate }}
+          </a>
+        }
+        @if (loanProductService.isWorkingCapital) {
+          <a
+            mat-tab-link
+            [routerLink]="['./balances']"
+            [queryParams]="{
+              productType: loanProductService.productType.value
+            }"
+            routerLinkActive
+            #balances="routerLinkActive"
+            [active]="balances.isActive"
+          >
+            {{ 'labels.inputs.Balances' | translate }}
+          </a>
+          <a
+            mat-tab-link
+            [routerLink]="['./amortization-schedule']"
+            [queryParams]="{
+              productType: loanProductService.productType.value
+            }"
+            routerLinkActive
+            #amortizationSchedule="routerLinkActive"
+            [active]="amortizationSchedule.isActive"
+          >
+            {{ 'labels.inputs.Amortization Schedule' | translate }}
+          </a>
+        }
         @if (loanDetailsData.transactions) {
           <a
             mat-tab-link

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

@@ -524,14 +524,20 @@ export class LoansViewComponent extends LoanProductBaseComponent implements OnIn
     if (!this.loanDetailsData) {
       return '';
     }
-    if (this.loanDetailsData.chargedOff) {
-      return 'loanStatusType.chargeoff';
-    }
-    if (this.isContractTermination(this.loanSubStatus)) {
-      return 'loanSubStatusType.contractTermination';
-    }
-    if (this.loanDetailsData.inArrears) {
-      return 'loanStatusType.activeOverdue';
+    if (this.loanProductService.isLoanProduct) {
+      if (this.loanDetailsData.chargedOff) {
+        return 'loanStatusType.chargeoff';
+      }
+      if (this.isContractTermination(this.loanSubStatus)) {
+        return 'loanSubStatusType.contractTermination';
+      }
+      if (this.loanDetailsData.inArrears) {
+        return 'loanStatusType.activeOverdue';
+      }
+    } else if (this.loanProductService.isWorkingCapital) {
+      if (this.loanDetailsData.collectionData?.delinquentDays > 0) {
+        return 'loanStatusType.activeOverdue';
+      }
     }
     return this.loanDetailsData.status?.code;
   }
@@ -543,8 +549,14 @@ export class LoansViewComponent extends LoanProductBaseComponent implements OnIn
     if (this.loanDetailsData.chargedOff) {
       return 'Chargeoff';
     }
-    if (this.loanDetailsData.inArrears) {
-      return 'activeOverdue';
+    if (this.loanProductService.isWorkingCapital) {
+      if (this.loanDetailsData.collectionData?.delinquentDays > 0) {
+        return 'activeOverdue';
+      }
+    } else {
+      if (this.loanDetailsData.inArrears) {
+        return 'activeOverdue';
+      }
     }
     return this.loanDetailsData.status?.code;
   }

src/app/loans/loans-view/working-capital/loan-amortization-schedule-tab/loan-amortization-schedule-tab.component.html

@@ -0,0 +1,109 @@
+<!--
+  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">
+  <div class="layout-row m-t-20 align-end align-items-center">
+    <button mat-raised-button color="primary" (click)="exportToPDF()">
+      <fa-icon icon="download" class="m-r-10"></fa-icon>{{ 'labels.buttons.Export to PDF' | translate }}
+    </button>
+  </div>
+
+  <table mat-table [dataSource]="amortizationSchedule?.payments" id="amortizationSchedule">
+    <ng-container matColumnDef="number">
+      <th mat-header-cell class="center mat-header-cell" *matHeaderCellDef>#</th>
+      <td mat-cell class="right" *matCellDef="let item">{{ item.paymentNo }}</td>
+      <td mat-footer-cell *matFooterCellDef></td>
+    </ng-container>
+
+    <ng-container matColumnDef="paymentDate">
+      <th mat-header-cell class="center mat-header-cell" *matHeaderCellDef>
+        {{ 'labels.inputs.Payment Date' | translate }}
+      </th>
+      <td mat-cell class="m-r-5" *matCellDef="let item">{{ item.paymentDate | dateFormat }}</td>
+      <td mat-footer-cell *matFooterCellDef></td>
+    </ng-container>
+
+    <ng-container matColumnDef="expectedPaymentAmount">
+      <th mat-header-cell class="r-amount mat-header-cell" *matHeaderCellDef>
+        {{ 'labels.inputs.Expected Payment Amount' | translate }}
+      </th>
+      <td mat-cell class="r-amount" *matCellDef="let item">{{ item.expectedPaymentAmount | formatNumber }}</td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef>
+        <b>{{ amortizationSchedule?.totalPaymentValue | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}</b>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="discountFactor">
+      <th mat-header-cell class="r-amount mat-header-cell" *matHeaderCellDef>
+        {{ 'labels.inputs.Discount Factor' | translate }}
+      </th>
+      <td mat-cell class="r-amount" *matCellDef="let item">{{ item.discountFactor | formatNumber }}</td>
+      <td mat-footer-cell *matFooterCellDef></td>
+    </ng-container>
+
+    <ng-container matColumnDef="npvValue">
+      <th mat-header-cell class="r-amount mat-header-cell" *matHeaderCellDef>
+        {{ 'labels.inputs.NPV Value' | translate }}
+      </th>
+      <td mat-cell class="r-amount" *matCellDef="let item">{{ item.npvValue | formatNumber }}</td>
+      <td mat-footer-cell *matFooterCellDef></td>
+    </ng-container>
+
+    <ng-container matColumnDef="deferredBalance">
+      <th mat-header-cell class="r-amount mat-header-cell" *matHeaderCellDef>
+        {{ 'labels.inputs.Deferred Balance' | translate }}
+      </th>
+      <td mat-cell class="r-amount" *matCellDef="let item">{{ item.deferredBalance | formatNumber }}</td>
+      <td mat-footer-cell *matFooterCellDef></td>
+    </ng-container>
+
+    <ng-container matColumnDef="forecastPaymentAmount">
+      <th mat-header-cell class="r-amount mat-header-cell" *matHeaderCellDef>
+        {{ 'labels.inputs.Forecast Payment Amount' | translate }}
+      </th>
+      <td mat-cell class="r-amount" *matCellDef="let item">{{ item.forecastPaymentAmount | formatNumber }}</td>
+      <td mat-footer-cell *matFooterCellDef></td>
+    </ng-container>
+
+    <ng-container matColumnDef="expectedAmortizationAmount">
+      <th mat-header-cell class="r-amount mat-header-cell" *matHeaderCellDef>
+        {{ 'labels.inputs.Expected Amortization Amount' | translate }}
+      </th>
+      <td mat-cell class="r-amount" *matCellDef="let item">{{ item.expectedAmortizationAmount | formatNumber }}</td>
+      <td mat-footer-cell *matFooterCellDef></td>
+    </ng-container>
+
+    <ng-container matColumnDef="netAmortizationAmount">
+      <th mat-header-cell class="r-amount mat-header-cell" *matHeaderCellDef>
+        {{ 'labels.inputs.Net Amortization Amount' | translate }}
+      </th>
+      <td mat-cell class="r-amount" *matCellDef="let item">{{ item.netAmortizationAmount | formatNumber }}</td>
+      <td mat-footer-cell *matFooterCellDef></td>
+    </ng-container>
+
+    <ng-container matColumnDef="incomeModification">
+      <th mat-header-cell class="r-amount mat-header-cell" *matHeaderCellDef>
+        {{ 'labels.inputs.Income Modification' | translate }}
+      </th>
+      <td mat-cell class="r-amount" *matCellDef="let item">{{ item.incomeModification | formatNumber }}</td>
+      <td mat-footer-cell *matFooterCellDef></td>
+    </ng-container>
+
+    <ng-container matColumnDef="balance">
+      <th mat-header-cell class="r-amount mat-header-cell" *matHeaderCellDef>
+        {{ 'labels.inputs.Balance' | translate }}
+      </th>
+      <td mat-cell class="r-amount" *matCellDef="let item">{{ item.balance | formatNumber }}</td>
+      <td mat-footer-cell *matFooterCellDef></td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns" class="table-row"></tr>
+    <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
+  </table>
+</div>