Loan summary with principal adjustments (#1540)

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>
merging as the PR is approved

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>

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;
   }
 }
 

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,

src/assets/styles/_align.scss

@@ -29,3 +29,11 @@
 .center {
   text-align: center !important;
 }
+
+.amount-plus {
+  color: #000000;
+}
+
+.amount-minus {
+  color: #0f36e4;
+}