From 7bbab6423e031fd8b6bc335fb864d047aa79ce45 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, 19 Dec 2022 23:09:09 -0600
Subject: [PATCH] Datatable views updates for display values with format
 (#1603)

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>
---
 .../multi-row/multi-row.component.html        |  4 +-
 .../multi-row/multi-row.component.ts          | 20 +++++-
 .../single-row/single-row.component.html      | 61 ++++++++++---------
 .../multi-row/multi-row.component.html        |  6 +-
 .../multi-row/multi-row.component.ts          | 20 +++++-
 .../single-row/single-row.component.html      | 11 ++--
 .../multi-row/multi-row.component.html        |  4 +-
 .../multi-row/multi-row.component.ts          | 20 +++++-
 .../single-row/single-row.component.html      | 57 ++++++++++-------
 .../multi-row/multi-row.component.html        | 12 ++--
 .../multi-row/multi-row.component.ts          | 20 +++++-
 .../single-row/single-row.component.html      | 47 +++++++++-----
 .../single-row/single-row.component.scss      |  2 +-
 .../view-charge/view-charge.component.html    | 20 +++---
 .../view-charge/view-charge.component.ts      |  4 ++
 .../multi-row/multi-row.component.html        |  4 +-
 .../multi-row/multi-row.component.ts          | 20 +++++-
 .../single-row/single-row.component.html      | 57 ++++++++++-------
 src/app/pipes/date-format.pipe.ts             |  2 +-
 src/app/pipes/datetime-format.pipe.ts         |  2 +-
 .../multi-row/multi-row.component.html        |  4 +-
 .../multi-row/multi-row.component.ts          | 20 +++++-
 .../single-row/single-row.component.html      | 57 ++++++++++-------
 23 files changed, 325 insertions(+), 149 deletions(-)

diff --git a/src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.html b/src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.html
index 2ea73ff82..818fd4731 100644
--- a/src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.html
+++ b/src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.html
@@ -22,8 +22,8 @@
   <table #dataTable mat-table [hidden]="!datatableData[0]" [dataSource]="datatableData" class="mat-elevation-z1 m-b-25">
 
     <ng-container *ngFor="let datatableColumn of datatableColumns;let i = index" [matColumnDef]="datatableColumn">
-      <th mat-header-cell *matHeaderCellDef> {{datatableColumn}} </th>
-      <td mat-cell *matCellDef="let data"> {{data.row[i]}} </td>
+      <th mat-header-cell class="right" *matHeaderCellDef> {{datatableColumn}} </th>
+      <td mat-cell class="right" *matCellDef="let data">{{ formatValue(i, data.row[i]) }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="datatableColumns"></tr>
diff --git a/src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.ts b/src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.ts
index dcedb07ed..b40f91362 100644
--- a/src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.ts
+++ b/src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.ts
@@ -16,6 +16,9 @@ import { CentersService } from '../../../centers.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
 import { Datatables } from 'app/core/utils/datatables';
+import { DateFormatPipe } from 'app/pipes/date-format.pipe';
+import { DatetimeFormatPipe } from 'app/pipes/datetime-format.pipe';
+import { DecimalPipe } from '@angular/common';
 
 /**
  * Center Multi Row Data Tables
@@ -58,7 +61,10 @@ export class MultiRowComponent implements OnInit, OnChanges {
               private centersService: CentersService,
               private settingsService: SettingsService,
               private dialog: MatDialog,
-              private datatables: Datatables) {
+              private datatables: Datatables,
+              private dateFormat: DateFormatPipe,
+              private dateTimeFormat: DatetimeFormatPipe,
+              private numberFormat: DecimalPipe) {
     this.centerId = this.route.parent.parent.snapshot.paramMap.get('centerId');
   }
 
@@ -134,4 +140,16 @@ export class MultiRowComponent implements OnInit, OnChanges {
     });
   }
 
+  formatValue(index: number, value: any): any {
+    const columnDisplayType = this.dataObject.columnHeaders[index].columnDisplayType;
+    if (columnDisplayType === 'DATE') {
+      return this.dateFormat.transform(value);
+    } else if (columnDisplayType === 'DATETIME') {
+      return this.dateTimeFormat.transform(value);
+    } else if (columnDisplayType === 'INTEGER' || columnDisplayType === 'DECIMAL') {
+      return this.numberFormat.transform(value);
+    }
+    return value;
+  }
+
 }
diff --git a/src/app/centers/centers-view/datatable-tab/single-row/single-row.component.html b/src/app/centers/centers-view/datatable-tab/single-row/single-row.component.html
index e9227d326..e933bf643 100644
--- a/src/app/centers/centers-view/datatable-tab/single-row/single-row.component.html
+++ b/src/app/centers/centers-view/datatable-tab/single-row/single-row.component.html
@@ -1,41 +1,42 @@
 <div class="tab-container mat-typography">
+  <h3>{{datatableName}}</h3>
+  <div fxLayout="row" fxLayoutAlign="flex-end">
+    <button mat-raised-button color="primary" (click)="add()" *ngIf="!dataObject.data[0]">
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
+    </button>
+    <button mat-raised-button color="primary" (click)="edit()" *ngIf="dataObject.data[0]">
+      <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
+    </button>
+    <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="dataObject.data[0]">
+      <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete All
+    </button>
+  </div>
 
-  <div>
+  <mat-divider></mat-divider>
 
-    <div fxLayout="column" fxFlex="50%" class="tableName">
-      <h3>{{datatableName}}</h3>
-    </div>
+  <ng-container *ngIf="dataObject.data.length > 0">
 
-    <div fxLayout="column" fxFlex="50%" >
-      <div fxLayout="row" fxLayoutAlign="flex-end">
-        <span *mifosxHasPermission="'CREATE_' + datatableName">
-          <button mat-raised-button color="primary" (click)="add()" *ngIf="!dataObject.data[0]">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
-          </button>
+    <div *ngFor="let columnHeader of dataObject.columnHeaders;let i = index" class="table-data">
+
+      <div fxFlex="45%" class="mat-body-strong left">
+        {{columnHeader.columnName}}
+      </div>
+
+      <div fxFlex="45%" [ngSwitch]="columnHeader.columnDisplayType" class="right">
+        <span *ngSwitchCase="'DATE'">
+          {{dataObject.data[0].row[i] | dateFormat}}
         </span>
-        <span *mifosxHasPermission="'UPDATE_' + datatableName">
-          <button mat-raised-button color="primary" (click)="edit()" *ngIf="dataObject.data[0]">
-            <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;Edit
-          </button>
+        <span *ngSwitchCase="'DATETIME'">
+          {{dataObject.data[0].row[i] | datetimeFormat}}
         </span>
-        <span *mifosxHasPermission="'DELETE_' + datatableName" class="delete-button">
-          <button mat-raised-button color="warn" (click)="delete()" *ngIf="dataObject.data[0]">
-            <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete
-          </button>
+        <span *ngSwitchCase="'INTEGER' || 'DECIMAL'">
+          {{dataObject.data[0].row[i] | number}}
+        </span>
+        <span *ngSwitchDefault>
+          {{dataObject.data[0].row[i]}}
         </span>
       </div>
     </div>
-
-  </div>
-  
-  <mat-divider></mat-divider>
-
-  <div>
-    <mat-list role="list" *ngIf="dataObject.data[0]">
-      <mat-list-item role="listitem" *ngFor="let columnHeader of dataObject.columnHeaders;let i = index">
-        {{columnHeader.columnName}} : {{dataObject.data[0].row[i]}}
-      </mat-list-item>
-    </mat-list>
-  </div>
+  </ng-container>
 
 </div>
diff --git a/src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.html b/src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.html
index c185f9c26..ddcbf4863 100644
--- a/src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.html
+++ b/src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.html
@@ -11,10 +11,10 @@
   <table #dataTable mat-table [hidden]="!datatableData[0]" [dataSource]="datatableData">
 
     <ng-container *ngFor="let datatableColumn of datatableColumns;let i = index" [matColumnDef]="datatableColumn">
-      <th mat-header-cell *matHeaderCellDef> {{datatableColumn}} </th>
-      <td mat-cell *matCellDef="let data"> {{data.row[i]}} </td>
+      <th mat-header-cell class="right" *matHeaderCellDef> {{datatableColumn}} </th>
+      <td mat-cell class="right" *matCellDef="let data">{{ formatValue(i, data.row[i]) }}</td>
     </ng-container>
     <tr mat-header-row *matHeaderRowDef="datatableColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: datatableColumns;"></tr>
   </table>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.ts b/src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.ts
index a5847cf27..c7f5389c1 100644
--- a/src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.ts
+++ b/src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.ts
@@ -13,6 +13,9 @@ import { ClientsService } from '../../../clients.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
 import { Datatables } from 'app/core/utils/datatables';
+import { DateFormatPipe } from 'app/pipes/date-format.pipe';
+import { DatetimeFormatPipe } from 'app/pipes/datetime-format.pipe';
+import { DecimalPipe } from '@angular/common';
 
 @Component({
   selector: 'mifosx-multi-row',
@@ -42,7 +45,10 @@ export class MultiRowComponent implements OnInit, OnChanges {
     private clientsService: ClientsService,
     private dialog: MatDialog,
     private settingsService: SettingsService,
-    private datatables: Datatables) {
+    private datatables: Datatables,
+    private dateFormat: DateFormatPipe,
+    private dateTimeFormat: DatetimeFormatPipe,
+    private numberFormat: DecimalPipe) {
     this.clientId = this.route.parent.parent.snapshot.paramMap.get('clientId');
   }
 
@@ -109,4 +115,16 @@ export class MultiRowComponent implements OnInit, OnChanges {
     });
   }
 
+  formatValue(index: number, value: any): any {
+    const columnDisplayType = this.dataObject.columnHeaders[index].columnDisplayType;
+    if (columnDisplayType === 'DATE') {
+      return this.dateFormat.transform(value);
+    } else if (columnDisplayType === 'DATETIME') {
+      return this.dateTimeFormat.transform(value);
+    } else if (columnDisplayType === 'INTEGER' || columnDisplayType === 'DECIMAL') {
+      return this.numberFormat.transform(value);
+    }
+    return value;
+  }
+
 }
diff --git a/src/app/clients/clients-view/datatable-tab/single-row/single-row.component.html b/src/app/clients/clients-view/datatable-tab/single-row/single-row.component.html
index cf3956b9d..e933bf643 100644
--- a/src/app/clients/clients-view/datatable-tab/single-row/single-row.component.html
+++ b/src/app/clients/clients-view/datatable-tab/single-row/single-row.component.html
@@ -2,16 +2,19 @@
   <h3>{{datatableName}}</h3>
   <div fxLayout="row" fxLayoutAlign="flex-end">
     <button mat-raised-button color="primary" (click)="add()" *ngIf="!dataObject.data[0]">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
     </button>
     <button mat-raised-button color="primary" (click)="edit()" *ngIf="dataObject.data[0]">
-      <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;Edit
+      <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
     </button>
     <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="dataObject.data[0]">
-      <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete All
+      <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete All
     </button>
   </div>
-  <ng-container>
+
+  <mat-divider></mat-divider>
+
+  <ng-container *ngIf="dataObject.data.length > 0">
 
     <div *ngFor="let columnHeader of dataObject.columnHeaders;let i = index" class="table-data">
 
diff --git a/src/app/groups/groups-view/datatable-tabs/multi-row/multi-row.component.html b/src/app/groups/groups-view/datatable-tabs/multi-row/multi-row.component.html
index c339f8643..4825eaf98 100644
--- a/src/app/groups/groups-view/datatable-tabs/multi-row/multi-row.component.html
+++ b/src/app/groups/groups-view/datatable-tabs/multi-row/multi-row.component.html
@@ -21,8 +21,8 @@
   <table #dataTable mat-table [hidden]="!datatableData[0]" [dataSource]="datatableData" class="mat-elevation-z1 m-b-25">
 
     <ng-container *ngFor="let datatableColumn of datatableColumns;let i = index" [matColumnDef]="datatableColumn">
-      <th mat-header-cell *matHeaderCellDef> {{datatableColumn}} </th>
-      <td mat-cell *matCellDef="let data"> {{data.row[i]}} </td>
+      <th mat-header-cell class="right" *matHeaderCellDef> {{datatableColumn}} </th>
+      <td mat-cell class="right" *matCellDef="let data">{{ formatValue(i, data.row[i]) }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="datatableColumns"></tr>
diff --git a/src/app/groups/groups-view/datatable-tabs/multi-row/multi-row.component.ts b/src/app/groups/groups-view/datatable-tabs/multi-row/multi-row.component.ts
index b79f14d06..9b4f0beb6 100644
--- a/src/app/groups/groups-view/datatable-tabs/multi-row/multi-row.component.ts
+++ b/src/app/groups/groups-view/datatable-tabs/multi-row/multi-row.component.ts
@@ -16,6 +16,9 @@ import { GroupsService } from '../../../groups.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
 import { Datatables } from 'app/core/utils/datatables';
+import { DateFormatPipe } from 'app/pipes/date-format.pipe';
+import { DatetimeFormatPipe } from 'app/pipes/datetime-format.pipe';
+import { DecimalPipe } from '@angular/common';
 
 /**
  * Group Multi Row Data Tables
@@ -58,7 +61,10 @@ export class MultiRowComponent implements OnInit, OnChanges {
               private groupsService: GroupsService,
               private dialog: MatDialog,
               private settingsService: SettingsService,
-              private datatables: Datatables) {
+              private datatables: Datatables,
+              private dateFormat: DateFormatPipe,
+              private dateTimeFormat: DatetimeFormatPipe,
+              private numberFormat: DecimalPipe) {
     this.groupId = this.route.parent.parent.snapshot.paramMap.get('groupId');
   }
 
@@ -134,4 +140,16 @@ export class MultiRowComponent implements OnInit, OnChanges {
     });
   }
 
+  formatValue(index: number, value: any): any {
+    const columnDisplayType = this.dataObject.columnHeaders[index].columnDisplayType;
+    if (columnDisplayType === 'DATE') {
+      return this.dateFormat.transform(value);
+    } else if (columnDisplayType === 'DATETIME') {
+      return this.dateTimeFormat.transform(value);
+    } else if (columnDisplayType === 'INTEGER' || columnDisplayType === 'DECIMAL') {
+      return this.numberFormat.transform(value);
+    }
+    return value;
+  }
+
 }
diff --git a/src/app/groups/groups-view/datatable-tabs/single-row/single-row.component.html b/src/app/groups/groups-view/datatable-tabs/single-row/single-row.component.html
index c2536b86a..e933bf643 100644
--- a/src/app/groups/groups-view/datatable-tabs/single-row/single-row.component.html
+++ b/src/app/groups/groups-view/datatable-tabs/single-row/single-row.component.html
@@ -1,29 +1,42 @@
 <div class="tab-container mat-typography">
-
   <h3>{{datatableName}}</h3>
-
   <div fxLayout="row" fxLayoutAlign="flex-end">
-    <span *mifosxHasPermission="'CREATE_' + datatableName">
-      <button mat-raised-button color="primary" (click)="add()" *ngIf="!dataObject.data[0]">
-        <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
-      </button>
-    </span>
-    <span *mifosxHasPermission="'UPDATE_' + datatableName">
-      <button mat-raised-button color="primary" (click)="edit()" *ngIf="dataObject.data[0]">
-        <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;Edit
-      </button>
-    </span>
-    <span *mifosxHasPermission="'DELETE_' + datatableName" class="delete-button">
-      <button mat-raised-button color="warn" (click)="delete()" *ngIf="dataObject.data[0]">
-        <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete
-      </button>
-    </span>
+    <button mat-raised-button color="primary" (click)="add()" *ngIf="!dataObject.data[0]">
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
+    </button>
+    <button mat-raised-button color="primary" (click)="edit()" *ngIf="dataObject.data[0]">
+      <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
+    </button>
+    <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="dataObject.data[0]">
+      <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete All
+    </button>
   </div>
 
-  <mat-list role="list" *ngIf="dataObject.data[0]">
-    <mat-list-item role="listitem" *ngFor="let columnHeader of dataObject.columnHeaders;let i = index">
-      {{columnHeader.columnName}} : {{dataObject.data[0].row[i]}}
-    </mat-list-item>
-  </mat-list>
+  <mat-divider></mat-divider>
+
+  <ng-container *ngIf="dataObject.data.length > 0">
+
+    <div *ngFor="let columnHeader of dataObject.columnHeaders;let i = index" class="table-data">
+
+      <div fxFlex="45%" class="mat-body-strong left">
+        {{columnHeader.columnName}}
+      </div>
+
+      <div fxFlex="45%" [ngSwitch]="columnHeader.columnDisplayType" class="right">
+        <span *ngSwitchCase="'DATE'">
+          {{dataObject.data[0].row[i] | dateFormat}}
+        </span>
+        <span *ngSwitchCase="'DATETIME'">
+          {{dataObject.data[0].row[i] | datetimeFormat}}
+        </span>
+        <span *ngSwitchCase="'INTEGER' || 'DECIMAL'">
+          {{dataObject.data[0].row[i] | number}}
+        </span>
+        <span *ngSwitchDefault>
+          {{dataObject.data[0].row[i]}}
+        </span>
+      </div>
+    </div>
+  </ng-container>
 
 </div>
diff --git a/src/app/loans/loans-view/datatable-tab/multi-row/multi-row.component.html b/src/app/loans/loans-view/datatable-tab/multi-row/multi-row.component.html
index 2ea73ff82..0ef067f5b 100644
--- a/src/app/loans/loans-view/datatable-tab/multi-row/multi-row.component.html
+++ b/src/app/loans/loans-view/datatable-tab/multi-row/multi-row.component.html
@@ -5,14 +5,14 @@
       <h3>{{datatableName}}</h3>
     </div>
     <div class="action-button m-b-5" fxLayoutGap="10px">
-      <span *mifosxHasPermission="'CREATE_' + datatableName">
+      <span>
         <button mat-raised-button color="primary" (click)="add()">
-          <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
+          <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
         </button>
       </span>
-      <span *mifosxHasPermission="'DELETE_' + datatableName">
+      <span>
         <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="showDeleteBotton">
-          <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete All
+          <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete All
         </button>
       </span>
     </div>
@@ -22,8 +22,8 @@
   <table #dataTable mat-table [hidden]="!datatableData[0]" [dataSource]="datatableData" class="mat-elevation-z1 m-b-25">
 
     <ng-container *ngFor="let datatableColumn of datatableColumns;let i = index" [matColumnDef]="datatableColumn">
-      <th mat-header-cell *matHeaderCellDef> {{datatableColumn}} </th>
-      <td mat-cell *matCellDef="let data"> {{data.row[i]}} </td>
+      <th mat-header-cell class="right" *matHeaderCellDef> {{datatableColumn}} </th>
+      <td mat-cell class="right" *matCellDef="let data">{{ formatValue(i, data.row[i]) }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="datatableColumns"></tr>
diff --git a/src/app/loans/loans-view/datatable-tab/multi-row/multi-row.component.ts b/src/app/loans/loans-view/datatable-tab/multi-row/multi-row.component.ts
index 64e76722a..5a4568f7f 100644
--- a/src/app/loans/loans-view/datatable-tab/multi-row/multi-row.component.ts
+++ b/src/app/loans/loans-view/datatable-tab/multi-row/multi-row.component.ts
@@ -16,6 +16,9 @@ import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-
 import { LoansService } from '../../../loans.service';
 import { Dates } from 'app/core/utils/dates';
 import { Datatables } from 'app/core/utils/datatables';
+import { DateFormatPipe } from 'app/pipes/date-format.pipe';
+import { DatetimeFormatPipe } from 'app/pipes/datetime-format.pipe';
+import { DecimalPipe, NumberFormatStyle } from '@angular/common';
 
 /**
  * Loan Multi Row Data Tables
@@ -58,7 +61,10 @@ export class MultiRowComponent implements OnInit, OnChanges {
               private loansService: LoansService,
               private dialog: MatDialog,
               private settingsService: SettingsService,
-              private datatables: Datatables) {
+              private datatables: Datatables,
+              private dateFormat: DateFormatPipe,
+              private dateTimeFormat: DatetimeFormatPipe,
+              private numberFormat: DecimalPipe) {
     this.loanId = this.route.parent.parent.snapshot.paramMap.get('loanId');
   }
 
@@ -134,4 +140,16 @@ export class MultiRowComponent implements OnInit, OnChanges {
     });
   }
 
+  formatValue(index: number, value: any): any {
+    const columnDisplayType = this.dataObject.columnHeaders[index].columnDisplayType;
+    if (columnDisplayType === 'DATE') {
+      return this.dateFormat.transform(value);
+    } else if (columnDisplayType === 'DATETIME') {
+      return this.dateTimeFormat.transform(value);
+    } else if (columnDisplayType === 'INTEGER' || columnDisplayType === 'DECIMAL') {
+      return this.numberFormat.transform(value);
+    }
+    return value;
+  }
+
 }
diff --git a/src/app/loans/loans-view/datatable-tab/single-row/single-row.component.html b/src/app/loans/loans-view/datatable-tab/single-row/single-row.component.html
index 2704540f7..42336a183 100644
--- a/src/app/loans/loans-view/datatable-tab/single-row/single-row.component.html
+++ b/src/app/loans/loans-view/datatable-tab/single-row/single-row.component.html
@@ -2,25 +2,25 @@
 
   <div>
 
-    <div fxLayout="column" fxFlex="50%" class="tableName">
+    <div fxLayout="column" fxFlex="50%" class="table-name">
       <h3>{{datatableName}}</h3>
     </div>
 
-    <div fxLayout="column" fxFlex="50%" >
+    <div fxLayout="column" fxFlex="50%">
       <div fxLayout="row" fxLayoutAlign="flex-end">
-        <span *mifosxHasPermission="'CREATE_' + datatableName">
+        <span>
           <button mat-raised-button color="primary" (click)="add()" *ngIf="!dataObject.data[0]">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
           </button>
         </span>
-        <span *mifosxHasPermission="'UPDATE_' + datatableName">
+        <span>
           <button mat-raised-button color="primary" (click)="edit()" *ngIf="dataObject.data[0]">
-            <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;Edit
+            <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
           </button>
         </span>
-        <span *mifosxHasPermission="'DELETE_' + datatableName" class="delete-button">
+        <span class="delete-button">
           <button mat-raised-button color="warn" (click)="delete()" *ngIf="dataObject.data[0]">
-            <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete
+            <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete
           </button>
         </span>
       </div>
@@ -30,12 +30,29 @@
 
   <mat-divider></mat-divider>
 
-  <div>
-    <mat-list role="list" *ngIf="dataObject.data[0]">
-      <mat-list-item role="listitem" *ngFor="let columnHeader of dataObject.columnHeaders;let i = index">
-        {{columnHeader.columnName}} : {{dataObject.data[0].row[i]}}
-      </mat-list-item>
-    </mat-list>
-  </div>
+  <ng-container *ngIf="dataObject.data.length > 0">
+
+    <div *ngFor="let columnHeader of dataObject.columnHeaders;let i = index" class="table-data">
+
+      <div fxFlex="45%" class="mat-body-strong left">
+        {{columnHeader.columnName}}
+      </div>
+
+      <div fxFlex="45%" [ngSwitch]="columnHeader.columnDisplayType" class="right">
+        <span *ngSwitchCase="'DATE'">
+          {{dataObject.data[0].row[i] | dateFormat}}
+        </span>
+        <span *ngSwitchCase="'DATETIME'">
+          {{dataObject.data[0].row[i] | datetimeFormat}}
+        </span>
+        <span *ngSwitchCase="'INTEGER' || 'DECIMAL'">
+          {{dataObject.data[0].row[i] | number}}
+        </span>
+        <span *ngSwitchDefault>
+          {{dataObject.data[0].row[i]}}
+        </span>
+      </div>
+    </div>
+  </ng-container>
 
 </div>
diff --git a/src/app/loans/loans-view/datatable-tab/single-row/single-row.component.scss b/src/app/loans/loans-view/datatable-tab/single-row/single-row.component.scss
index 544ca291a..b2f6fe139 100644
--- a/src/app/loans/loans-view/datatable-tab/single-row/single-row.component.scss
+++ b/src/app/loans/loans-view/datatable-tab/single-row/single-row.component.scss
@@ -6,6 +6,6 @@
     }
 }
 
-.tableName {
+.table-name {
     padding-left: 2%;
 }
diff --git a/src/app/loans/loans-view/view-charge/view-charge.component.html b/src/app/loans/loans-view/view-charge/view-charge.component.html
index a61a3b27f..cfd2b1b43 100644
--- a/src/app/loans/loans-view/view-charge/view-charge.component.html
+++ b/src/app/loans/loans-view/view-charge/view-charge.component.html
@@ -4,14 +4,18 @@
     <fa-icon icon="flag"></fa-icon>&nbsp;&nbsp;
     Edit
   </button>
-  <button mat-raised-button color="accent" *mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'" (click)="payCharge()">
-    <fa-icon icon="dollar-sign"></fa-icon>&nbsp;&nbsp;
-    Pay
-  </button>
-  <button mat-raised-button color="primary" *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'" (click)="waiveCharge()">
-    <fa-icon icon="flag"></fa-icon>&nbsp;&nbsp;
-    Waive
-  </button>
+  <span *ngIf="allowPayCharge">
+    <button mat-raised-button color="accent" *mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'" (click)="payCharge()">
+      <fa-icon icon="dollar-sign"></fa-icon>&nbsp;&nbsp;
+      Pay
+    </button>
+  </span>
+  <span *ngIf="allowWaive">
+    <button mat-raised-button color="primary" *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'" (click)="waiveCharge()">
+      <fa-icon icon="flag"></fa-icon>&nbsp;&nbsp;
+      Waive
+    </button>
+  </span>
 </div>
 
 <div *ngIf="loansAccountData.status.value === 'Submitted and pending approval'" fxLayout="row" fxLayoutAlign="end"
diff --git a/src/app/loans/loans-view/view-charge/view-charge.component.ts b/src/app/loans/loans-view/view-charge/view-charge.component.ts
index 07ab8853d..df1e55f60 100644
--- a/src/app/loans/loans-view/view-charge/view-charge.component.ts
+++ b/src/app/loans/loans-view/view-charge/view-charge.component.ts
@@ -32,6 +32,8 @@ export class ViewChargeComponent {
   chargeData: any;
   /** Loans Account Data */
   loansAccountData: any;
+  allowPayCharge = true;
+  allowWaive = true;
 
   /**
    * Retrieves the Charge data from `resolve`.
@@ -50,6 +52,8 @@ export class ViewChargeComponent {
               private settingsService: SettingsService) {
     this.route.data.subscribe((data: { loansAccountCharge: any, loanDetailsData: any }) => {
       this.chargeData = data.loansAccountCharge;
+      this.allowPayCharge = (this.chargeData.chargeTimeType.code === 'chargeTimeType.instalmentFee');
+      this.allowWaive = !this.chargeData.chargeTimeType.waived;
       this.loansAccountData = data.loanDetailsData;
     });
   }
diff --git a/src/app/organization/offices/view-office/datatable-tabs/multi-row/multi-row.component.html b/src/app/organization/offices/view-office/datatable-tabs/multi-row/multi-row.component.html
index c339f8643..4825eaf98 100644
--- a/src/app/organization/offices/view-office/datatable-tabs/multi-row/multi-row.component.html
+++ b/src/app/organization/offices/view-office/datatable-tabs/multi-row/multi-row.component.html
@@ -21,8 +21,8 @@
   <table #dataTable mat-table [hidden]="!datatableData[0]" [dataSource]="datatableData" class="mat-elevation-z1 m-b-25">
 
     <ng-container *ngFor="let datatableColumn of datatableColumns;let i = index" [matColumnDef]="datatableColumn">
-      <th mat-header-cell *matHeaderCellDef> {{datatableColumn}} </th>
-      <td mat-cell *matCellDef="let data"> {{data.row[i]}} </td>
+      <th mat-header-cell class="right" *matHeaderCellDef> {{datatableColumn}} </th>
+      <td mat-cell class="right" *matCellDef="let data">{{ formatValue(i, data.row[i]) }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="datatableColumns"></tr>
diff --git a/src/app/organization/offices/view-office/datatable-tabs/multi-row/multi-row.component.ts b/src/app/organization/offices/view-office/datatable-tabs/multi-row/multi-row.component.ts
index c90fed3ca..2fdb50a62 100644
--- a/src/app/organization/offices/view-office/datatable-tabs/multi-row/multi-row.component.ts
+++ b/src/app/organization/offices/view-office/datatable-tabs/multi-row/multi-row.component.ts
@@ -16,6 +16,9 @@ import { OrganizationService } from '../../../../organization.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
 import { Datatables } from 'app/core/utils/datatables';
+import { DateFormatPipe } from 'app/pipes/date-format.pipe';
+import { DatetimeFormatPipe } from 'app/pipes/datetime-format.pipe';
+import { DecimalPipe } from '@angular/common';
 
 /**
  * Office Multi Row Data Tables
@@ -57,7 +60,10 @@ export class MultiRowComponent implements OnInit, OnChanges {
               private organizationService: OrganizationService,
               private settingsService: SettingsService,
               private dialog: MatDialog,
-              private datatables: Datatables) {
+              private datatables: Datatables,
+              private dateFormat: DateFormatPipe,
+              private dateTimeFormat: DatetimeFormatPipe,
+              private numberFormat: DecimalPipe) {
     this.officeId = this.route.parent.parent.snapshot.paramMap.get('id');
   }
 
@@ -133,4 +139,16 @@ export class MultiRowComponent implements OnInit, OnChanges {
     });
   }
 
+  formatValue(index: number, value: any): any {
+    const columnDisplayType = this.dataObject.columnHeaders[index].columnDisplayType;
+    if (columnDisplayType === 'DATE') {
+      return this.dateFormat.transform(value);
+    } else if (columnDisplayType === 'DATETIME') {
+      return this.dateTimeFormat.transform(value);
+    } else if (columnDisplayType === 'INTEGER' || columnDisplayType === 'DECIMAL') {
+      return this.numberFormat.transform(value);
+    }
+    return value;
+  }
+
 }
diff --git a/src/app/organization/offices/view-office/datatable-tabs/single-row/single-row.component.html b/src/app/organization/offices/view-office/datatable-tabs/single-row/single-row.component.html
index c2536b86a..e933bf643 100644
--- a/src/app/organization/offices/view-office/datatable-tabs/single-row/single-row.component.html
+++ b/src/app/organization/offices/view-office/datatable-tabs/single-row/single-row.component.html
@@ -1,29 +1,42 @@
 <div class="tab-container mat-typography">
-
   <h3>{{datatableName}}</h3>
-
   <div fxLayout="row" fxLayoutAlign="flex-end">
-    <span *mifosxHasPermission="'CREATE_' + datatableName">
-      <button mat-raised-button color="primary" (click)="add()" *ngIf="!dataObject.data[0]">
-        <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
-      </button>
-    </span>
-    <span *mifosxHasPermission="'UPDATE_' + datatableName">
-      <button mat-raised-button color="primary" (click)="edit()" *ngIf="dataObject.data[0]">
-        <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;Edit
-      </button>
-    </span>
-    <span *mifosxHasPermission="'DELETE_' + datatableName" class="delete-button">
-      <button mat-raised-button color="warn" (click)="delete()" *ngIf="dataObject.data[0]">
-        <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete
-      </button>
-    </span>
+    <button mat-raised-button color="primary" (click)="add()" *ngIf="!dataObject.data[0]">
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
+    </button>
+    <button mat-raised-button color="primary" (click)="edit()" *ngIf="dataObject.data[0]">
+      <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
+    </button>
+    <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="dataObject.data[0]">
+      <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete All
+    </button>
   </div>
 
-  <mat-list role="list" *ngIf="dataObject.data[0]">
-    <mat-list-item role="listitem" *ngFor="let columnHeader of dataObject.columnHeaders;let i = index">
-      {{columnHeader.columnName}} : {{dataObject.data[0].row[i]}}
-    </mat-list-item>
-  </mat-list>
+  <mat-divider></mat-divider>
+
+  <ng-container *ngIf="dataObject.data.length > 0">
+
+    <div *ngFor="let columnHeader of dataObject.columnHeaders;let i = index" class="table-data">
+
+      <div fxFlex="45%" class="mat-body-strong left">
+        {{columnHeader.columnName}}
+      </div>
+
+      <div fxFlex="45%" [ngSwitch]="columnHeader.columnDisplayType" class="right">
+        <span *ngSwitchCase="'DATE'">
+          {{dataObject.data[0].row[i] | dateFormat}}
+        </span>
+        <span *ngSwitchCase="'DATETIME'">
+          {{dataObject.data[0].row[i] | datetimeFormat}}
+        </span>
+        <span *ngSwitchCase="'INTEGER' || 'DECIMAL'">
+          {{dataObject.data[0].row[i] | number}}
+        </span>
+        <span *ngSwitchDefault>
+          {{dataObject.data[0].row[i]}}
+        </span>
+      </div>
+    </div>
+  </ng-container>
 
 </div>
diff --git a/src/app/pipes/date-format.pipe.ts b/src/app/pipes/date-format.pipe.ts
index fd9fc4553..cac6cded2 100644
--- a/src/app/pipes/date-format.pipe.ts
+++ b/src/app/pipes/date-format.pipe.ts
@@ -10,7 +10,7 @@ export class DateFormatPipe implements PipeTransform {
   constructor(private settingsService: SettingsService) {
   }
 
-  transform(value: any, dateFormat: string): any {
+  transform(value: any, dateFormat?: string): any {
     const defaultDateFormat = this.settingsService.dateFormat.replace('dd', 'DD');
     if (typeof value === 'undefined') {
       return '';
diff --git a/src/app/pipes/datetime-format.pipe.ts b/src/app/pipes/datetime-format.pipe.ts
index 5f40894f4..3fb14d99d 100644
--- a/src/app/pipes/datetime-format.pipe.ts
+++ b/src/app/pipes/datetime-format.pipe.ts
@@ -10,7 +10,7 @@ export class DatetimeFormatPipe implements PipeTransform {
   constructor(private settingsService: SettingsService) {
   }
 
-  transform(value: any, datetimeFormat: string): any {
+  transform(value: any, datetimeFormat?: string): any {
     const defaultDateFormat = this.settingsService.dateFormat.replace('dd', 'DD');
     if (typeof value === 'undefined') {
       return '';
diff --git a/src/app/savings/savings-account-view/datatable-tabs/multi-row/multi-row.component.html b/src/app/savings/savings-account-view/datatable-tabs/multi-row/multi-row.component.html
index c339f8643..4825eaf98 100644
--- a/src/app/savings/savings-account-view/datatable-tabs/multi-row/multi-row.component.html
+++ b/src/app/savings/savings-account-view/datatable-tabs/multi-row/multi-row.component.html
@@ -21,8 +21,8 @@
   <table #dataTable mat-table [hidden]="!datatableData[0]" [dataSource]="datatableData" class="mat-elevation-z1 m-b-25">
 
     <ng-container *ngFor="let datatableColumn of datatableColumns;let i = index" [matColumnDef]="datatableColumn">
-      <th mat-header-cell *matHeaderCellDef> {{datatableColumn}} </th>
-      <td mat-cell *matCellDef="let data"> {{data.row[i]}} </td>
+      <th mat-header-cell class="right" *matHeaderCellDef> {{datatableColumn}} </th>
+      <td mat-cell class="right" *matCellDef="let data">{{ formatValue(i, data.row[i]) }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="datatableColumns"></tr>
diff --git a/src/app/savings/savings-account-view/datatable-tabs/multi-row/multi-row.component.ts b/src/app/savings/savings-account-view/datatable-tabs/multi-row/multi-row.component.ts
index 8826dba53..2daaf31d1 100644
--- a/src/app/savings/savings-account-view/datatable-tabs/multi-row/multi-row.component.ts
+++ b/src/app/savings/savings-account-view/datatable-tabs/multi-row/multi-row.component.ts
@@ -20,6 +20,9 @@ import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicke
 import { SavingsService } from '../../../savings.service';
 import { Dates } from 'app/core/utils/dates';
 import { Datatables } from 'app/core/utils/datatables';
+import { DateFormatPipe } from 'app/pipes/date-format.pipe';
+import { DatetimeFormatPipe } from 'app/pipes/datetime-format.pipe';
+import { DecimalPipe } from '@angular/common';
 
 /**
  * Savings Account Multi Row Data Tables
@@ -62,7 +65,10 @@ export class MultiRowComponent implements OnInit, OnChanges {
               private savingsService: SavingsService,
               private dialog: MatDialog,
               private settingsService: SettingsService,
-              private datatables: Datatables) {
+              private datatables: Datatables,
+              private dateFormat: DateFormatPipe,
+              private dateTimeFormat: DatetimeFormatPipe,
+              private numberFormat: DecimalPipe) {
     this.savingAccountId = this.route.parent.parent.snapshot.paramMap.get('savingAccountId');
   }
 
@@ -138,4 +144,16 @@ export class MultiRowComponent implements OnInit, OnChanges {
     });
   }
 
+  formatValue(index: number, value: any): any {
+    const columnDisplayType = this.dataObject.columnHeaders[index].columnDisplayType;
+    if (columnDisplayType === 'DATE') {
+      return this.dateFormat.transform(value);
+    } else if (columnDisplayType === 'DATETIME') {
+      return this.dateTimeFormat.transform(value);
+    } else if (columnDisplayType === 'INTEGER' || columnDisplayType === 'DECIMAL') {
+      return this.numberFormat.transform(value);
+    }
+    return value;
+  }
+
 }
diff --git a/src/app/savings/savings-account-view/datatable-tabs/single-row/single-row.component.html b/src/app/savings/savings-account-view/datatable-tabs/single-row/single-row.component.html
index c2536b86a..e933bf643 100644
--- a/src/app/savings/savings-account-view/datatable-tabs/single-row/single-row.component.html
+++ b/src/app/savings/savings-account-view/datatable-tabs/single-row/single-row.component.html
@@ -1,29 +1,42 @@
 <div class="tab-container mat-typography">
-
   <h3>{{datatableName}}</h3>
-
   <div fxLayout="row" fxLayoutAlign="flex-end">
-    <span *mifosxHasPermission="'CREATE_' + datatableName">
-      <button mat-raised-button color="primary" (click)="add()" *ngIf="!dataObject.data[0]">
-        <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
-      </button>
-    </span>
-    <span *mifosxHasPermission="'UPDATE_' + datatableName">
-      <button mat-raised-button color="primary" (click)="edit()" *ngIf="dataObject.data[0]">
-        <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;Edit
-      </button>
-    </span>
-    <span *mifosxHasPermission="'DELETE_' + datatableName" class="delete-button">
-      <button mat-raised-button color="warn" (click)="delete()" *ngIf="dataObject.data[0]">
-        <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete
-      </button>
-    </span>
+    <button mat-raised-button color="primary" (click)="add()" *ngIf="!dataObject.data[0]">
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
+    </button>
+    <button mat-raised-button color="primary" (click)="edit()" *ngIf="dataObject.data[0]">
+      <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
+    </button>
+    <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="dataObject.data[0]">
+      <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete All
+    </button>
   </div>
 
-  <mat-list role="list" *ngIf="dataObject.data[0]">
-    <mat-list-item role="listitem" *ngFor="let columnHeader of dataObject.columnHeaders;let i = index">
-      {{columnHeader.columnName}} : {{dataObject.data[0].row[i]}}
-    </mat-list-item>
-  </mat-list>
+  <mat-divider></mat-divider>
+
+  <ng-container *ngIf="dataObject.data.length > 0">
+
+    <div *ngFor="let columnHeader of dataObject.columnHeaders;let i = index" class="table-data">
+
+      <div fxFlex="45%" class="mat-body-strong left">
+        {{columnHeader.columnName}}
+      </div>
+
+      <div fxFlex="45%" [ngSwitch]="columnHeader.columnDisplayType" class="right">
+        <span *ngSwitchCase="'DATE'">
+          {{dataObject.data[0].row[i] | dateFormat}}
+        </span>
+        <span *ngSwitchCase="'DATETIME'">
+          {{dataObject.data[0].row[i] | datetimeFormat}}
+        </span>
+        <span *ngSwitchCase="'INTEGER' || 'DECIMAL'">
+          {{dataObject.data[0].row[i] | number}}
+        </span>
+        <span *ngSwitchDefault>
+          {{dataObject.data[0].row[i]}}
+        </span>
+      </div>
+    </div>
+  </ng-container>
 
 </div>