Delinquency buckets management for Loans

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

@@ -5,6 +5,7 @@
     <div fxLayout="row" fxLayoutGap="32px" class="performance-history-container">
       <p>
         # of Repayments :{{loanDetails?.numberOfRepayments}}
+      </p>
       <p>
         Maturity Date :{{loanDetails?.timeline.expectedMaturityDate  | dateFormat}}
       </p>
@@ -69,7 +70,7 @@
 
       <ng-container matColumnDef="Value">
         <th mat-header-cell *matHeaderCellDef> Value </th>
-        <td mat-cell *matCellDef="let ele"> 
+        <td mat-cell *matCellDef="let ele">
           <ng-container *ngIf="ele.key === 'Disbursement Date'" >
             <span *ngIf="loanDetails.timeline.actualDisbursementDate"> {{loanDetails.timeline.actualDisbursementDate  | dateFormat}} </span>
             <span *ngIf="!loanDetails.timeline.actualDisbursementDate"> Not Available </span>
@@ -124,7 +125,7 @@
 
       <ng-container matColumnDef="Value">
         <th mat-header-cell *matHeaderCellDef> Value </th>
-        <td mat-cell *matCellDef="let ele"> 
+        <td mat-cell *matCellDef="let ele">
           <ng-container *ngIf="ele.key === 'Disbursement Date'" >
             <span *ngIf="loanDetails.timeline.actualDisbursementDate"> {{loanDetails.timeline.actualDisbursementDate  | dateFormat}} </span>
             <span *ngIf="!loanDetails.timeline.actualDisbursementDate"> Not Available </span>

src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.html

@@ -1,5 +1,9 @@
 <div class="container">
 
+  <ng-container *ngIf="loanDetails.delinquencyRange">
+    <h3>Loan Account Classification : {{loanDetails?.delinquencyRange.classification}}</h3>
+  </ng-container>
+
   <table mat-table [dataSource]="repaymentScheduleDetails.periods">
 
     <ng-container matColumnDef="number">
@@ -29,7 +33,7 @@
     <ng-container matColumnDef="check">
       <th mat-header-cell *matHeaderCellDef> &nbsp; </th>
       <td mat-cell *matCellDef="let ele">
-        <span *ngIf="ele.obligationsMetOnDate"> <i class='fa fa-check'></i> </span> 
+        <span *ngIf="ele.obligationsMetOnDate"> <i class='fa fa-check'></i> </span>
       </td>
       <td mat-footer-cell *matFooterCellDef> </td>
     </ng-container>
@@ -135,4 +139,4 @@
 
 </div>
 
-<!-- <p>It works</p> -->
+<!-- <p>It works</p> -->

src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.scss

@@ -9,4 +9,4 @@ table {
 
 .check {
   padding-left: 15px;
-}
+}

src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.ts

@@ -8,6 +8,7 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class RepaymentScheduleTabComponent implements OnInit {
 
+  loanDetails: any;
   /** Loan Repayment Schedule Details Data */
   repaymentScheduleDetails: any;
   /** Stores if there is any waived amount */
@@ -21,6 +22,7 @@ export class RepaymentScheduleTabComponent implements OnInit {
    */
   constructor(private route: ActivatedRoute) {
     this.route.parent.data.subscribe((data: { loanDetailsData: any }) => {
+      this.loanDetails = data.loanDetailsData;
       this.repaymentScheduleDetails = data.loanDetailsData.repaymentSchedule;
     });
   }