WEB-257: Loan Capitalized Income - Fetch amortization details

src/app/loans/loans-view/loan-deferred-income-tab/loan-deferred-income-tab.component.html

@@ -0,0 +1,36 @@
+<div class="container">
+  <h3>{{ 'labels.inputs.Deferred income' | translate }} - {{ 'labels.menus.Capitalized Income' | translate }}</h3>
+
+  <table mat-table [dataSource]="capitalizedIncomeData" *ngIf="capitalizedIncomeData.length > 0">
+    <ng-container matColumnDef="amount">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
+      <td mat-cell *matCellDef="let item">
+        {{ item.amount | formatNumber }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="amortizedAmount">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amortized Amount' | translate }}</th>
+      <td mat-cell *matCellDef="let item">
+        {{ item.amortizedAmount | formatNumber: '0.00' }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="unrecognizedAmount">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Unrecognized Amount' | translate }}</th>
+      <td mat-cell *matCellDef="let item">
+        {{ item.unrecognizedAmount | formatNumber: '0.00' }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="amountAdjustment">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Adjustment Amount' | translate }}</th>
+      <td mat-cell *matCellDef="let item">
+        {{ item.amountAdjustment | formatNumber: '0.00' }}
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="capitalizedIncomeColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: capitalizedIncomeColumns"></tr>
+  </table>
+</div>

src/app/loans/loans-view/loan-deferred-income-tab/loan-deferred-income-tab.component.ts

@@ -0,0 +1,66 @@
+import { NgClass } from '@angular/common';
+import { Component } from '@angular/core';
+import {
+  MatCell,
+  MatCellDef,
+  MatColumnDef,
+  MatHeaderCell,
+  MatHeaderCellDef,
+  MatHeaderRow,
+  MatHeaderRowDef,
+  MatRow,
+  MatRowDef,
+  MatTable
+} from '@angular/material/table';
+import { ActivatedRoute } from '@angular/router';
+import { FormatNumberPipe } from '@pipes/format-number.pipe';
+import { LoanCapitalizedIncomeData, LoanDeferredIncomeData } from 'app/loans/models/loan-account.model';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+
+@Component({
+  selector: 'mifosx-loan-deferred-income-tab',
+  templateUrl: './loan-deferred-income-tab.component.html',
+  styleUrl: './loan-deferred-income-tab.component.scss',
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatTable,
+    MatColumnDef,
+    MatHeaderCellDef,
+    MatHeaderCell,
+    MatCellDef,
+    MatCell,
+    MatHeaderRowDef,
+    MatHeaderRow,
+    MatRowDef,
+    MatRow,
+    FormatNumberPipe
+  ]
+})
+export class LoanDeferredIncomeTabComponent {
+  capitalizedIncomeData: LoanCapitalizedIncomeData[] = [];
+
+  loanId: any;
+
+  capitalizedIncomeColumns: string[] = [
+    'amount',
+    'amortizedAmount',
+    'unrecognizedAmount',
+    'amountAdjustment'
+  ];
+
+  constructor(private route: ActivatedRoute) {
+    this.loanId = this.route.parent.parent.snapshot.params['loanId'];
+
+    let capitalizedIncomeData: LoanCapitalizedIncomeData[] = [];
+    this.route.parent.data.subscribe((data: { loanDeferredIncomeData: LoanDeferredIncomeData }) => {
+      capitalizedIncomeData = data.loanDeferredIncomeData.capitalizedIncomeData || [];
+      capitalizedIncomeData.forEach((item: LoanCapitalizedIncomeData) => {
+        item.amortizedAmount = item.amortizedAmount | 0;
+        item.unrecognizedAmount = item.unrecognizedAmount | 0;
+        item.amountAdjustment = item.amountAdjustment | 0;
+        this.capitalizedIncomeData.push(item);
+      });
+      console.log(this.capitalizedIncomeData);
+    });
+  }
+}

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

@@ -208,6 +208,17 @@
           {{ 'labels.inputs.Transactions' | translate }}
         </a>
       </ng-container>
+      <ng-container *ngIf="loanDetailsData.enableIncomeCapitalization">
+        <a
+          mat-tab-link
+          [routerLink]="['./deferred-income']"
+          routerLinkActive
+          #deferredIncome="routerLinkActive"
+          [active]="deferredIncome.isActive"
+        >
+          {{ 'labels.inputs.Deferred income' | translate }}
+        </a>
+      </ng-container>
       <ng-container *ngIf="loanDetailsData.status.active">
         <a
           mat-tab-link