From c5ece8d95d159701555d574108219a55b6fc4506 Mon Sep 17 00:00:00 2001
From: Jose Alberto Hernandez <alberto@MacBook-Pro.local>
Date: Thu, 15 Dec 2022 05:55:10 -0600
Subject: [PATCH] Styling table with amounts

---
 .../general-tab/general-tab.component.html    | 118 ++++++++++--------
 .../loans-view/loans-view.component.html      |   7 ++
 .../transactions-tab.component.html           |   8 +-
 .../savings-account-view.component.html       |  51 ++++----
 .../transactions-tab.component.html           |  20 +--
 5 files changed, 111 insertions(+), 93 deletions(-)

diff --git a/src/app/clients/clients-view/general-tab/general-tab.component.html b/src/app/clients/clients-view/general-tab/general-tab.component.html
index bf09c0fd4..015c8598f 100644
--- a/src/app/clients/clients-view/general-tab/general-tab.component.html
+++ b/src/app/clients/clients-view/general-tab/general-tab.component.html
@@ -2,15 +2,25 @@
 
   <h3>Performance History</h3>
   <div fxLayout="row" fxLayoutGap="32px" class="performance-history-container">
-    <p>
-      No. Of Loan Cycles :{{clientSummary?.loanCycle}} <br />
-      No. of Active Loans :{{clientSummary?.activeLoans}} <br />
-      Last Loan Amount :{{clientSummary?.lastLoanAmount}} <br />
-    </p>
-    <p>
-      No. of Active Savings :{{clientSummary?.activeSavings}} <br />
-      Total Savings :{{clientSummary?.totalSavings}} <br />
-    </p>
+    <table>
+      <tbody>
+        <tr>
+          <td>
+            <p>
+              No. Of Loan Cycles :{{clientSummary?.loanCycle}} <br />
+              No. of Active Loans :{{clientSummary?.activeLoans}} <br />
+              Last Loan Amount :{{clientSummary?.lastLoanAmount | number}} <br />
+            </p>
+          </td>
+          <td>
+            <p>
+              No. of Active Savings :{{clientSummary?.activeSavings}} <br />
+              Total Savings :{{clientSummary?.totalSavings | number}} <br />
+            </p>
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </div>
 
   <!-- Upcoming Charges -->
@@ -43,28 +53,28 @@
     </ng-container>
 
     <ng-container matColumnDef="Due">
-      <th mat-header-cell *matHeaderCellDef> Due </th>
-      <td mat-cell *matCellDef="let element"> {{element.amount}} </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> Due </th>
+      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.amount | number}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Paid">
-      <th mat-header-cell *matHeaderCellDef>Paid </th>
-      <td mat-cell *matCellDef="let element"> {{element.amountPaid}} </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>Paid </th>
+      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.amountPaid | number}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Waived">
-      <th mat-header-cell *matHeaderCellDef> Waived </th>
-      <td mat-cell *matCellDef="let element"> {{element.amountWaived}} </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> Waived </th>
+      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.amountWaived | number}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Outstanding">
-      <th mat-header-cell *matHeaderCellDef> Outstanding </th>
-      <td mat-cell *matCellDef="let element"> {{element.amountOutstanding}} </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> Outstanding </th>
+      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.amountOutstanding | number}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Actions">
-      <th mat-header-cell *matHeaderCellDef> Actions </th>
-      <td mat-cell *matCellDef="let element">
+      <th mat-header-cell class="center" *matHeaderCellDef> Actions </th>
+      <td mat-cell class="center" *matCellDef="let element">
         <button class="account-action-button" mat-raised-button color="primary"
           (click)="routeEdit($event)" [routerLink]="['../','charges', element.id, 'pay']" *mifosxHasPermission="'PAY_CLIENTCHARGE'">
           <i class="fa fa-dollar"></i>
@@ -117,25 +127,25 @@
       <td mat-cell *matCellDef="let element"> {{element.originalLoan}} </td>
     </ng-container>
     <ng-container matColumnDef="Loan Balance">
-      <th mat-header-cell *matHeaderCellDef>Loan Balance </th>
-      <td mat-cell *matCellDef="let element"> {{element.loanBalance}} </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> Loan Balance </th>
+      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.loanBalance | number}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Amount Paid">
-      <th mat-header-cell *matHeaderCellDef> Amount Paid </th>
-      <td mat-cell *matCellDef="let element"> {{element.amountPaid}} </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> Amount Paid </th>
+      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.amountPaid | number}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Type">
-      <th mat-header-cell *matHeaderCellDef> Type </th>
-      <td mat-cell *matCellDef="let element">
+      <th mat-header-cell class="center" *matHeaderCellDef> Type </th>
+      <td mat-cell class="center" *matCellDef="let element">
         <i class="fa fa-large" [ngClass]="(element.loanType.value=== 'Individual')?'fa-user':'fa-group'" matTooltip=" {{ element.loanType.value }}" matTooltipPosition="above"></i>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="Actions">
-      <th mat-header-cell *matHeaderCellDef> Actions </th>
-      <td mat-cell *matCellDef="let element">
+      <th mat-header-cell class="center" *matHeaderCellDef> Actions </th>
+      <td mat-cell class="center" *matCellDef="let element">
         <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary" matTooltip="Make Repayment" matTooltipPosition="above"
         (click)="routeEdit($event)" [routerLink]="['../','loans-accounts', element.id, 'actions', 'Make Repayment']">
           <i class="fa fa-dollar"></i>
@@ -192,18 +202,18 @@
     </ng-container>
 
     <ng-container matColumnDef="Loan Balance">
-      <th mat-header-cell *matHeaderCellDef>Loan Balance </th>
-      <td mat-cell *matCellDef="let element"> {{element.loanBalance}} </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>Loan Balance </th>
+      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.loanBalance | number}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Amount Paid">
-      <th mat-header-cell *matHeaderCellDef> Amount Paid </th>
-      <td mat-cell *matCellDef="let element"> {{element.accountBalance}} </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> Amount Paid </th>
+      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.accountBalance | number}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Type">
-      <th mat-header-cell *matHeaderCellDef> Type </th>
-      <td mat-cell *matCellDef="let element">
+      <th mat-header-cell class="center" *matHeaderCellDef> Type </th>
+      <td mat-cell class="center" *matCellDef="let element">
         <i class="fa fa-large" [ngClass]="(element.loanType.value === 'Individual')?'fa-user':'fa-group'" matTooltip=" {{ element.loanType.value }}" matTooltipPosition="above"></i>
       </td>
     </ng-container>
@@ -254,13 +264,13 @@
     </ng-container>
 
     <ng-container matColumnDef="Balance">
-      <th mat-header-cell *matHeaderCellDef> Balance </th>
-      <td mat-cell *matCellDef="let element"> {{element.accountBalance}} </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> Balance </th>
+      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.accountBalance | number}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Actions">
-      <th mat-header-cell *matHeaderCellDef> Actions </th>
-      <td mat-cell *matCellDef="let element">
+      <th mat-header-cell class="center" *matHeaderCellDef> Actions </th>
+      <td mat-cell class="center" *matCellDef="let element">
         <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary"
           (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Deposit']">
           <i class="fa fa-arrow-up"></i>
@@ -352,13 +362,13 @@
     </ng-container>
 
     <ng-container matColumnDef="Balance">
-      <th mat-header-cell *matHeaderCellDef> Balance </th>
-      <td mat-cell *matCellDef="let element"> {{element.accountBalance}} </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> Balance </th>
+      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.accountBalance | number}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Actions">
-      <th mat-header-cell *matHeaderCellDef> Actions </th>
-      <td mat-cell *matCellDef="let element">
+      <th mat-header-cell class="center" *matHeaderCellDef> Actions </th>
+      <td mat-cell class="center" *matCellDef="let element">
         <button *ngIf="element.status.submittedAndPendingApproval" class="account-action-button" mat-raised-button
           color="primary" (click)="routeEdit($event)" [routerLink]="['../','fixed-deposits-accounts', element.id, 'actions', 'Approve']">
           <i class="fa fa-check"></i>
@@ -444,13 +454,13 @@
     </ng-container>
 
     <ng-container matColumnDef="Balance">
-      <th mat-header-cell *matHeaderCellDef> Balance </th>
-      <td mat-cell *matCellDef="let element"> {{element.accountBalance}} </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> Balance </th>
+      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.accountBalance | number}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Actions">
-      <th mat-header-cell *matHeaderCellDef> Actions </th>
-      <td mat-cell *matCellDef="let element">
+      <th mat-header-cell class="center" *matHeaderCellDef> Actions </th>
+      <td mat-cell class="center" *matCellDef="let element">
         <ng-container *ngIf="element.status.submittedAndPendingApproval">
           <button class="account-action-button" mat-raised-button *mifosxHasPermission="'APPROVE_SAVINGSACCOUNT'"
           [routerLink]="['../','recurringdeposits', element.id, 'actions', 'Approve']" color="primary">
@@ -543,8 +553,8 @@
     </ng-container>
 
     <ng-container matColumnDef="Actions">
-      <th mat-header-cell *matHeaderCellDef> Actions </th>
-      <td mat-cell *matCellDef="let element">
+      <th mat-header-cell class="center" *matHeaderCellDef> Actions </th>
+      <td mat-cell class="center" *matCellDef="let element">
         <button *ngIf="element.status.submittedAndPendingApproval" class="account-action-button" mat-raised-button
           color="primary" (click)="routeEdit($event)" [routerLink]="['../','shares-accounts', element.id, 'actions', 'Approve']">
           <i class="fa fa-check"></i>
@@ -617,7 +627,7 @@
   </div>
 
   <table mat-table [dataSource]="collaterals">
-    
+
     <ng-container matColumnDef="ID">
       <th mat-header-cell *matHeaderCellDef>ID</th>
       <td mat-cell *matCellDef="let element">{{ element.collateralId }}</td>
@@ -629,18 +639,18 @@
     </ng-container>
 
     <ng-container matColumnDef="Quantity">
-      <th mat-header-cell *matHeaderCellDef>Quantity</th>
-      <td mat-cell *matCellDef="let element">{{ element.quantity }}</td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>Quantity</th>
+      <td mat-cell class="r-amount" *matCellDef="let element">{{ element.quantity | number }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Total Value">
-      <th mat-header-cell *matHeaderCellDef>Total Value</th>
-      <td mat-cell *matCellDef="let element">{{ element.basePrice*element.quantity }}</td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>Total Value</th>
+      <td mat-cell class="r-amount" *matCellDef="let element">{{ element.basePrice*element.quantity | number}}</td>
     </ng-container>
 
     <ng-container matColumnDef="Total Collateral Value">
-      <th mat-header-cell *matHeaderCellDef>Total Collateral Value</th>
-      <td mat-cell *matCellDef="let element">{{ element.pctToBase*element.basePrice*element.quantity/100 }}</td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>Total Collateral Value</th>
+      <td mat-cell class="r-amount" *matCellDef="let element">{{ element.pctToBase*element.basePrice*element.quantity/100 | number}}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="collateralsColumns"></tr>
diff --git a/src/app/loans/loans-view/loans-view.component.html b/src/app/loans/loans-view/loans-view.component.html
index ee0b722f0..e34c56430 100644
--- a/src/app/loans/loans-view/loans-view.component.html
+++ b/src/app/loans/loans-view/loans-view.component.html
@@ -26,6 +26,13 @@
                 <span *ngIf="loanDetailsData.delinquencyRange">
                   Loan Account Classification : {{loanDetailsData?.delinquencyRange.classification}}
                 </span>
+                <span *ngIf="loanDetailsData.delinquent && loanDetailsData.delinquent.pastDueDays > 0">
+                  Past Due Days : {{loanDetailsData?.delinquent.pastDueDays | number}}
+                </span>
+                <span *ngIf="loanDetailsData.delinquent && loanDetailsData.delinquent.delinquentDays > 0
+                  && loanDetailsData.delinquent.pastDueDays != loanDetailsData.delinquent.delinquentDays">
+                  Delinquent Days : {{loanDetailsData?.delinquent.delinquentDays}}
+                </span>
               </h3>
             </div>
 
diff --git a/src/app/loans/loans-view/transactions-tab/transactions-tab.component.html b/src/app/loans/loans-view/transactions-tab/transactions-tab.component.html
index 70b0b8d48..78d86b393 100644
--- a/src/app/loans/loans-view/transactions-tab/transactions-tab.component.html
+++ b/src/app/loans/loans-view/transactions-tab/transactions-tab.component.html
@@ -89,19 +89,19 @@
     </ng-container>
 
     <ng-container matColumnDef="header-principal">
-      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="1"> Principal </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> Principal </th>
     </ng-container>
 
     <ng-container matColumnDef="header-interest">
-      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="1"> Interest </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> Interest </th>
     </ng-container>
 
     <ng-container matColumnDef="header-fees">
-      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="1"> Fees </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> Fees </th>
     </ng-container>
 
     <ng-container matColumnDef="header-penalties">
-      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="1"> Penalties </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> Penalties </th>
     </ng-container>
 
     <ng-container matColumnDef="header-action">
diff --git a/src/app/savings/savings-account-view/savings-account-view.component.html b/src/app/savings/savings-account-view/savings-account-view.component.html
index 97bf94c66..04aef3a1e 100644
--- a/src/app/savings/savings-account-view/savings-account-view.component.html
+++ b/src/app/savings/savings-account-view/savings-account-view.component.html
@@ -23,8 +23,8 @@
           <p>
             Account #: {{savingsAccountData.accountNo}} | {{entityType}} Name: {{savingsAccountData.clientName || savingsAccountData.groupName}}<br/>
             <span *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval">
-              Current Balance: {{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.accountBalance}}<br/>
-              Available Balance: {{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.availableBalance}}<br/>
+              Current Balances: {{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.accountBalance | number}}<br/>
+              Available Balance: {{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.availableBalance | number}}<br/>
             </span>
           </p>
         </mat-card-subtitle>
@@ -36,9 +36,9 @@
 
       <ng-container *ngFor="let button of buttonConfig.singleButtons">
         <button mat-raised-button *mifosxHasPermission="button.taskPermissionName" (click)="doAction(button.name)">
-          <i class="{{button.icon}}"></i> {{button.name}}</button>
+          <i ngClass="{{button.icon}}"></i> {{button.name}}</button>
       </ng-container>
-  
+
       <ng-container *ngIf="buttonConfig.options">
         <button mat-raised-button [matMenuTriggerFor]="More">More</button>
         <mat-menu #More="matMenu">
@@ -47,7 +47,7 @@
         </span>
         </mat-menu>
       </ng-container>
-  
+
     </mat-card-actions>
 
   </mat-card-header>
@@ -62,39 +62,39 @@
           <tbody>
             <tr *ngIf="savingsAccountData.summary.totalWithdrawals">
               <td>Total Withdrawls</td>
-              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalWithdrawals}}</td>
+              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalWithdrawals | number}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.summary.totalWithdrawalFees">
               <td>Withdrawals Fees</td>
-              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalWithdrawalFees}}</td>
+              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalWithdrawalFees | number}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.summary.totalAnnualFees">
               <td>Annual Fees</td>
-              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalAnnualFees}}</td>
+              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalAnnualFees | number}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.summary.totalInterestEarned >= 0">
               <td>Interest Earned</td>
-              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalInterestEarned}}</td>
+              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalInterestEarned | number}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.summary.totalInterestPosted">
               <td>Interest Posted</td>
-              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalInterestPosted}}</td>
+              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalInterestPosted | number}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.summary.interestNotPosted >= 0">
               <td>Interest Earned Not Posted</td>
-              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.interestNotPosted}}</td>
+              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.interestNotPosted | number}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.summary.totalOverdraftInterestDerived">
               <td>Interest On Overdraft</td>
-              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalOverdraftInterestDerived}}</td>
+              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalOverdraftInterestDerived | number}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.summary.interestNotPosted < 0">
               <td>Overdraft Interest Not Posted</td>
-              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.interestNotPosted}}</td>
+              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.interestNotPosted | number}}</td>
             </tr>
             <tr>
               <td>Nominal Interest Rate</td>
-              <td>{{savingsAccountData.nominalAnnualInterestRate}}%</td>
+              <td>{{savingsAccountData.nominalAnnualInterestRate | number}} %</td>
             </tr>
             <tr>
               <td>Interest Compounding Period</td>
@@ -114,7 +114,7 @@
             </tr>
             <tr *ngIf="savingsAccountData.withdrawalFee">
               <td>Withdrawal Fee</td>
-              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.withdrawalFee.amount}}</td>
+              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.withdrawalFee.amount | number}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.lastActiveTransactionDate">
               <td>Last Active Transaction Date</td>
@@ -138,27 +138,27 @@
             </tr>
             <tr *ngIf="savingsAccountData.annualFee">
               <td>Annual Fee</td>
-              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.annualFee.amount}}</td>
+              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.annualFee.amount | number}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.allowOverdraft">
               <td>Over Draft Limit</td>
-              <td>{{savingsAccountData.overdraftLimit}}</td>
+              <td>{{savingsAccountData.overdraftLimit | number}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.allowOverdraft">
               <td>Min Overdraft Required for Interest Calculation</td>
-              <td>{{savingsAccountData.minOverdraftForInterestCalculation}}</td>
+              <td>{{savingsAccountData.minOverdraftForInterestCalculation | number}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.minBalanceForInterestCalculation">
               <td>Min Balance Required for Interest Calculation</td>
-              <td>{{savingsAccountData.minBalanceForInterestCalculation}}</td>
+              <td>{{savingsAccountData.minBalanceForInterestCalculation | number}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.minRequiredBalance">
               <td>Minimum Required Balance</td>
-              <td>{{savingsAccountData.minRequiredBalance}}</td>
+              <td>{{savingsAccountData.minRequiredBalance | number}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.enforceMinRequiredBalance">
               <td>Enforce Minimum Required Balance</td>
-              <td>{{savingsAccountData.enforceMinRequiredBalance}}</td>
+              <td>{{savingsAccountData.enforceMinRequiredBalance | number}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.summary.lastInterestCalculationDate">
               <td>Interest Recalculation Date</td>
@@ -166,7 +166,7 @@
             </tr>
             <tr *ngIf="savingsAccountData.onHoldFunds">
               <td>On Hold Funds</td>
-              <td><a *mifosxHasPermission="'READ_SAVINGSACCOUNT'">{{savingsAccountData.onHoldFunds}}</a></td>
+              <td><a *mifosxHasPermission="'READ_SAVINGSACCOUNT'">{{savingsAccountData.onHoldFunds | number}}</a></td>
             </tr>
             <tr *ngIf="savingsAccountData.withHoldTax">
               <td>Withhold Tax Group</td>
@@ -222,7 +222,7 @@
               </tr>
               <tr>
                 <td>Nominal Interest Rate</td>
-                <td>{{savingsAccountData.nominalAnnualInterestRate}}%</td>
+                <td>{{savingsAccountData.nominalAnnualInterestRate | number}} %</td>
               </tr>
             </tbody>
           </table>
@@ -252,12 +252,13 @@
             <tbody>
               <tr *ngIf="savingsAccountData.summary.totalDeposits">
                 <td>Total Deposits</td>
-                <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalDeposits}}</td>
+                <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalDeposits | number}}</td>
               </tr>
               <tr *ngIf="savingsAccountData.summary.totalInterestEarned >= 0">
                 <td>Total Interest Earned</td>
-                <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalInterestEarned}}</td>
+                <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalInterestEarned | number}}</td>
               </tr>
+            </tbody>
           </table>
         </div>
 
diff --git a/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html b/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html
index 1874b98c0..3835975c9 100644
--- a/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html
+++ b/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html
@@ -20,33 +20,33 @@
       </ng-container>
 
       <ng-container matColumnDef="transactionDate">
-        <th mat-header-cell *matHeaderCellDef> Transaction Date </th>
+        <th mat-header-cell class="center" *matHeaderCellDef> Transaction Date </th>
         <td mat-cell *matCellDef="let transaction"> {{ transaction.date  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionType">
-        <th mat-header-cell *matHeaderCellDef> Transaction Type </th>
+        <th mat-header-cell class="center" *matHeaderCellDef> Transaction Type </th>
         <td mat-cell *matCellDef="let transaction"> {{ transaction.transactionType.value  }} </td>
       </ng-container>
 
       <ng-container matColumnDef="debit">
-        <th mat-header-cell *matHeaderCellDef> Debit </th>
-        <td mat-cell *matCellDef="let transaction"> {{ isDebit(transaction.transactionType) ? transaction.amount : 'N/A'}} </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> Debit </th>
+        <td mat-cell class="r-amount" *matCellDef="let transaction"> {{ isDebit(transaction.transactionType) ? (transaction.amount | number) : 'N/A'}} </td>
       </ng-container>
 
       <ng-container matColumnDef="credit">
-        <th mat-header-cell *matHeaderCellDef> Credit </th>
-        <td mat-cell *matCellDef="let transaction"> {{ !isDebit(transaction.transactionType) ? transaction.amount : 'N/A' }} </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> Credit </th>
+        <td mat-cell class="r-amount" *matCellDef="let transaction"> {{ !isDebit(transaction.transactionType) ? (transaction.amount | number) : 'N/A' }} </td>
       </ng-container>
 
       <ng-container matColumnDef="balance">
-        <th mat-header-cell *matHeaderCellDef> Balance </th>
-        <td mat-cell *matCellDef="let transaction"> {{ transaction.runningBalance }} </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> Balance </th>
+        <td mat-cell class="r-amount" *matCellDef="let transaction"> {{ transaction.runningBalance | number }} </td>
       </ng-container>
 
       <ng-container matColumnDef="viewReciept">
-        <th mat-header-cell *matHeaderCellDef> View Reciept </th>
-        <td mat-cell *matCellDef="let transaction"> 
+        <th mat-header-cell class="center" *matHeaderCellDef> View Reciept </th>
+        <td mat-cell class="center" *matCellDef="let transaction">
           <button class="account-action-button" mat-raised-button color="primary" (click)="routeEdit($event)" [routerLink]="[transaction.id, 'reciept']">
             <i class="fa fa-file" matTooltip="View Reciept"></i>
           </button>