Recurring Deposit view account homologation (#1910)

Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>

src/app/loans/loans-view/loans-view.component-theme.scss

@@ -1,13 +0,0 @@
-@use '@angular/material' as mat;
-
-@mixin loans-view-component-theme($theme) {
-  $primary: map-get($theme, primary);
-
-  mifosx-loans-view {
-    .loan-card {
-      .header {
-        background-color: mat.get-color-from-palette($primary, 500);
-      }
-    }
-  }
-}

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

@@ -1,4 +1,4 @@
-<mat-card class="loan-card">
+<mat-card class="account-card">
 
   <mat-card-header fxLayout="column" class="header">
 
@@ -12,7 +12,7 @@
         </div>
       </div>
 
-      <div class="mat-typography loan-card-title">
+      <div class="mat-typography account-card-title">
         <mat-card-title>
           <div fxLayout="row" fxLayout.lt-md="column">
 
@@ -46,24 +46,30 @@
             </div>
 
             <div *ngIf="loanDetailsData.summary" class="loans-overview mat-typography" fxFlex="40%">
-              <h3> {{"labels.heading.Loan Account OverView" | translate}} </h3>
-              <span>{{"labels.inputs.Current Balance" | translate}}: {{loanDetailsData.currency.displaySymbol}}
-                {{loanDetailsData.summary.totalOutstanding | formatNumber}}</span><br>
-              <div *ngIf="loanDisplayArrearsDelinquency < 2">
-                <span *ngIf="loanDetailsData.inArrears">{{"labels.inputs.Arrears By" | translate}}:
-                  {{loanDetailsData.summary.totalOverdue | currency:currencyCode:'symbol-narrow':'1.2-2' }}
-                  <span *ngIf="!(loanDetailsData.summary.totalOverdue>=0)">{{"labels.inputs.Not Provided" | translate
-                    }}</span>
-                </span><br>
-                <span *ngIf="loanDetailsData.inArrears">{{"labels.inputs.Arrears Since" | translate}}:
-                  {{loanDetailsData.summary.overdueSinceDate |
-                  dateFormat}}
-                </span>
-                <span *ngIf="loanDetailsData.totalOverpaid && loanDetailsData.totalOverpaid > 0">
-                  {{"labels.inputs.Overpaid By" | translate}}: {{loanDetailsData.currency.displaySymbol}}
-                  {{loanDetailsData.totalOverpaid | formatNumber }}
-                </span>
-              </div>
+              <h3> {{"labels.heading.Account OverView" | translate}} </h3>
+              <table class="account-overview">
+                <tbody>
+                  <tr>
+                    <td>{{"labels.inputs.Current Balance" | translate }}</td>
+                    <td class="r-amount">{{loanDetailsData.summary.totalOutstanding | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+                  </tr>
+                  <tr *ngIf="loanDisplayArrearsDelinquency < 2">
+                    <td>{{"labels.inputs.Arrears By" | translate }}</td>
+                    <td class="r-amount" *ngIf="loanDetailsData.summary.totalOverdue >= 0">
+                      {{loanDetailsData.summary.totalOverdue | currency:currency.code:'symbol-narrow':'1.2-2'}}
+                    </td>
+                    <td *ngIf="!(loanDetailsData.summary.totalOverdue>=0)">{{"labels.inputs.Not Provided" | translate}}</td>
+                  </tr>
+                  <tr *ngIf="loanDetailsData.inArrears">
+                    <td>{{"labels.inputs.Arrears Since" | translate }}</td>
+                    <td> {{loanDetailsData.summary.overdueSinceDate | dateFormat}} </td>
+                  </tr>
+                  <tr *ngIf="loanDetailsData.totalOverpaid && loanDetailsData.totalOverpaid > 0">
+                    <td>{{"labels.inputs.Overpaid By" | translate }}</td>
+                    <td class="r-amount">{{loanDetailsData.totalOverpaid | currency:currency.code:'symbol-narrow':'1.2-2'}} </td>
+                  </tr>
+                </tbody>
+              </table>
             </div>
 
             <span fxFlex="auto"></span>

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

@@ -13,6 +13,7 @@ import { LoansAccountButtonConfiguration } from './loan-accounts-button-config';
 import { ConfirmationDialogComponent } from '../../shared/confirmation-dialog/confirmation-dialog.component';
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
 import { LoanStatus } from '../models/loan-status.model';
+import { Currency } from 'app/shared/models/general.model';
 
 @Component({
   selector: 'mifosx-loans-view',
@@ -42,6 +43,7 @@ export class LoansViewComponent implements OnInit {
   disburseTransactionNo = 0;
 
   loanStatus: LoanStatus;
+  currency: Currency;
 
   constructor(private route: ActivatedRoute,
               private router: Router,
@@ -52,6 +54,7 @@ export class LoansViewComponent implements OnInit {
       this.loanDatatables = data.loanDatatables;
       this.loanDisplayArrearsDelinquency = data.loanArrearsDelinquencyConfig.value || 0;
       this.loanStatus = this.loanDetailsData.status;
+      this.currency = this.loanDetailsData.currency;
     });
     this.loanId = this.route.snapshot.params['loanId'];
     this.clientId = this.loanDetailsData.clientId;