From 1a18759c2fbbef2f614848ed903a1e86fa53f94d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Alberto=20Hern=C3=A1ndez?=
 <44206706+josehernandezfintecheandomx@users.noreply.github.com>
Date: Mon, 17 Oct 2022 10:32:30 -0500
Subject: [PATCH] Loan summary with principal adjustments (#1540)

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>
merging as the PR is approved
---
 .../general-tab/general-tab.component.html    | 35 +++++++++++--------
 .../general-tab/general-tab.component.scss    | 14 ++++----
 .../general-tab/general-tab.component.ts      | 14 ++++++++
 src/assets/styles/_align.scss                 |  8 +++++
 4 files changed, 49 insertions(+), 22 deletions(-)

diff --git a/src/app/loans/loans-view/general-tab/general-tab.component.html b/src/app/loans/loans-view/general-tab/general-tab.component.html
index 873f0450c..88bdef17f 100644
--- a/src/app/loans/loans-view/general-tab/general-tab.component.html
+++ b/src/app/loans/loans-view/general-tab/general-tab.component.html
@@ -23,33 +23,38 @@
       </ng-container>
 
       <ng-container matColumnDef="Original">
-        <th mat-header-cell *matHeaderCellDef> Original </th>
-        <td mat-cell *matCellDef="let ele"> {{ ele.original | number }} </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> Original </th>
+        <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.original | currency }} </td>
       </ng-container>
 
       <ng-container matColumnDef="Paid">
-        <th mat-header-cell *matHeaderCellDef> Paid </th>
-        <td mat-cell *matCellDef="let ele"> {{ ele.paid | number }} </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> Paid </th>
+        <td mat-cell class="r-amount amount-minus" *matCellDef="let ele"> {{ ele.paid | currency }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Adjustments">
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> Credit Adjustments </th>
+        <td mat-cell class="r-amount amount-plus" *matCellDef="let ele"> {{ ele.adjustment | currency }} </td>
       </ng-container>
 
       <ng-container matColumnDef="Waived">
-        <th mat-header-cell *matHeaderCellDef> Waived </th>
-        <td mat-cell *matCellDef="let ele"> {{ ele.waived | number }} </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> Waived </th>
+        <td mat-cell class="r-amount amount-minus" *matCellDef="let ele"> {{ ele.waived | currency }} </td>
       </ng-container>
 
       <ng-container matColumnDef="Written Off">
-        <th mat-header-cell *matHeaderCellDef> Written Off </th>
-        <td mat-cell *matCellDef="let ele"> {{ ele.writtenOff | number }} </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> Written Off </th>
+        <td mat-cell class="r-amount amount-minus" *matCellDef="let ele"> {{ ele.writtenOff | currency }} </td>
       </ng-container>
 
       <ng-container matColumnDef="Outstanding">
-        <th mat-header-cell *matHeaderCellDef> Outstanding </th>
-        <td mat-cell *matCellDef="let ele"> {{ ele.outstanding | number }} </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> Outstanding </th>
+        <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.outstanding | currency }} </td>
       </ng-container>
 
       <ng-container matColumnDef="Over Due">
-        <th mat-header-cell *matHeaderCellDef> Over Due </th>
-        <td mat-cell *matCellDef="let ele"> {{ ele.overdue | number }} </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> Over Due </th>
+        <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.overdue | currency }} </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="loanSummaryColumns"></tr>
@@ -176,17 +181,17 @@
 
         <div fxFlexFill>
           <span fxFlex="50%">Proposed Amount:</span>
-          <span fxFlex="50%">{{ loanDetails.proposedPrincipal | number}}</span>
+          <span fxFlex="50%">{{ loanDetails.proposedPrincipal | currency}}</span>
         </div>
 
         <div fxFlexFill *ngIf="showApprovedAmountBasedOnStatus()">
           <span fxFlex="50%">Approved Amount:</span>
-          <span fxFlex="50%">{{ loanDetails.approvedPrincipal | number }}</span>
+          <span fxFlex="50%">{{ loanDetails.approvedPrincipal | currency }}</span>
         </div>
 
         <div fxFlexFill *ngIf="showDisbursedAmountBasedOnStatus()">
           <span fxFlex="50%">Disburse Amount:</span>
-          <span fxFlex="50%">{{ loanDetails.principal | number }}</span>
+          <span fxFlex="50%">{{ loanDetails.principal | currency }}</span>
         </div>
 
         <div fxFlexFill>
diff --git a/src/app/loans/loans-view/general-tab/general-tab.component.scss b/src/app/loans/loans-view/general-tab/general-tab.component.scss
index 6d8f631f5..b0aff4877 100644
--- a/src/app/loans/loans-view/general-tab/general-tab.component.scss
+++ b/src/app/loans/loans-view/general-tab/general-tab.component.scss
@@ -2,18 +2,18 @@
   padding: 1%;
   margin: 1%;
 
-  h3{
-	margin:1% auto;
+  h3 {
+    margin: 1% auto;
   }
   .performance-history-container {
-	border: 1px solid;
-	padding: 1%;
-	margin-bottom: 20px ;
+    border: 1px solid;
+    padding: 1%;
+    margin-bottom: 20px;
   }
 
   table {
-	width: 100%;
-	margin-bottom: 20px;
+    width: 100%;
+    margin-bottom: 20px;
   }
 }
 
diff --git a/src/app/loans/loans-view/general-tab/general-tab.component.ts b/src/app/loans/loans-view/general-tab/general-tab.component.ts
index f961dd412..9c7a48d3f 100644
--- a/src/app/loans/loans-view/general-tab/general-tab.component.ts
+++ b/src/app/loans/loans-view/general-tab/general-tab.component.ts
@@ -16,6 +16,7 @@ export class GeneralTabComponent implements OnInit {
   loanSummaryTableData: {
     'property': string,
     'original': string,
+    'adjustment': string,
     'paid': string,
     'waived': string,
     'writtenOff': string,
@@ -34,6 +35,14 @@ export class GeneralTabComponent implements OnInit {
   constructor(private route: ActivatedRoute) {
     this.route.parent.data.subscribe((data: { loanDetailsData: any, }) => {
       this.loanDetails = data.loanDetailsData;
+      if (this.loanDetails.transactions) {
+        this.loanDetails.transactions.some((transaction: any) => {
+          if (transaction.type.code === 'loanTransactionType.chargeback') {
+            this.loanSummaryColumns = ['Empty', 'Original', 'Adjustments', 'Paid', 'Waived', 'Written Off', 'Outstanding', 'Over Due'];
+            return;
+          }
+        });
+      }
     });
   }
 
@@ -52,6 +61,7 @@ export class GeneralTabComponent implements OnInit {
       {
         'property': 'Principal',
         'original': this.loanDetails.summary.principalDisbursed,
+        'adjustment': this.loanDetails.summary.principalAdjustments || 0,
         'paid': this.loanDetails.summary.principalPaid,
         'waived': this.loanDetails.summary.principalWaived || 0,
         'writtenOff': this.loanDetails.summary.principalWrittenOff,
@@ -62,6 +72,7 @@ export class GeneralTabComponent implements OnInit {
     {
         'property': 'Interest',
         'original': this.loanDetails.summary.interestCharged,
+        'adjustment': '0',
         'paid': this.loanDetails.summary.interestPaid,
         'waived': this.loanDetails.summary.interestWaived,
         'writtenOff': this.loanDetails.summary.interestWrittenOff,
@@ -71,6 +82,7 @@ export class GeneralTabComponent implements OnInit {
     {
         'property': 'Fees',
         'original': this.loanDetails.summary.feeChargesCharged,
+        'adjustment': '0',
         'paid': this.loanDetails.summary.feeChargesPaid,
         'waived': this.loanDetails.summary.feeChargesWaived,
         'writtenOff': this.loanDetails.summary.feeChargesWrittenOff,
@@ -80,6 +92,7 @@ export class GeneralTabComponent implements OnInit {
     {
         'property': 'Penalties',
         'original': this.loanDetails.summary.penaltyChargesCharged,
+        'adjustment': '0',
         'paid': this.loanDetails.summary.penaltyChargesPaid,
         'waived': this.loanDetails.summary.penaltyChargesWaived,
         'writtenOff': this.loanDetails.summary.penaltyChargesWrittenOff,
@@ -89,6 +102,7 @@ export class GeneralTabComponent implements OnInit {
     {
         'property': 'Total',
         'original': this.loanDetails.summary.totalExpectedRepayment,
+        'adjustment': this.loanDetails.summary.principalAdjustments || 0,
         'paid': this.loanDetails.summary.totalRepayment,
         'waived': this.loanDetails.summary.totalWaived,
         'writtenOff': this.loanDetails.summary.totalWrittenOff,
diff --git a/src/assets/styles/_align.scss b/src/assets/styles/_align.scss
index 3ad825aa0..2d1b30b8c 100644
--- a/src/assets/styles/_align.scss
+++ b/src/assets/styles/_align.scss
@@ -29,3 +29,11 @@
 .center {
   text-align: center !important;
 }
+
+.amount-plus {
+  color: #000000;
+}
+
+.amount-minus {
+  color: #0f36e4;
+}