web-app/src/app/loans/loans-view/working-capital/loan-amortization-schedule-tab/loan-amortization-schedule-tab.component.html at 58b7b83811f95a1eb5ddd7fa3b55970257a9ff00 · openMF/web-app · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
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>