From f330e91aa4d21186e9c7e9c61dfaa6efd7bac875 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: Fri, 13 Jan 2023 02:07:51 -0600
Subject: [PATCH] Datatables enhacements to support products (#1641)

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>
---
 package-lock.json                             |  25 +
 package.json                                  |   1 +
 .../centers-view/centers-view.component.html  | 146 ++--
 .../datatable-tab.component.html              |  11 +-
 .../datatable-tab/datatable-tab.component.ts  |  32 +-
 .../multi-row/multi-row.component.html        |  34 -
 .../multi-row/multi-row.component.spec.ts     |  25 -
 .../single-row/single-row.component.html      |  42 -
 .../single-row/single-row.component.scss      |  11 -
 .../single-row/single-row.component.spec.ts   |  25 -
 .../single-row/single-row.component.ts        | 149 ----
 src/app/centers/centers.module.ts             |   4 -
 .../edit-center/edit-center.component.html    |  86 +-
 .../client-datatable-step.component.ts        |  52 +-
 .../datatable-tab.component.html              |  13 +-
 .../datatable-tab/datatable-tab.component.ts  |  15 +-
 .../multi-row/multi-row.component.html        |  20 -
 .../multi-row/multi-row.component.scss        |   8 -
 .../multi-row/multi-row.component.spec.ts     |  25 -
 .../multi-row/multi-row.component.ts          | 130 ---
 .../single-row/single-row.component.html      |  42 -
 .../single-row/single-row.component.scss      |  13 -
 .../single-row/single-row.component.spec.ts   |  25 -
 src/app/clients/clients.module.ts             |   4 -
 src/app/core/utils/datatables.ts              |  92 +-
 src/app/core/utils/dates.ts                   |   4 +
 .../datatable-tabs.component.html             |  11 +-
 .../datatable-tabs.component.ts               |  10 +-
 .../multi-row/multi-row.component.html        |  33 -
 .../multi-row/multi-row.component.scss        |  10 -
 .../multi-row/multi-row.component.spec.ts     |  25 -
 .../multi-row/multi-row.component.ts          | 187 ----
 .../single-row/single-row.component.html      |  29 -
 .../single-row/single-row.component.scss      |   7 -
 .../single-row/single-row.component.spec.ts   |  25 -
 .../single-row/single-row.component.ts        | 210 -----
 .../fixed-deposits/fixed-deposits.module.ts   |   4 -
 .../datatable-tabs.component.html             |  13 +-
 .../datatable-tabs.component.ts               |  10 +-
 .../multi-row/multi-row.component.html        |  33 -
 .../multi-row/multi-row.component.scss        |  10 -
 .../multi-row/multi-row.component.spec.ts     |  25 -
 .../multi-row/multi-row.component.ts          | 184 ----
 .../single-row/single-row.component.html      |  41 -
 .../single-row/single-row.component.scss      |  11 -
 .../single-row/single-row.component.spec.ts   |  25 -
 .../single-row/single-row.component.ts        | 210 -----
 .../recurring-deposits.module.ts              |   4 -
 .../datatable-tabs.component.html             |  11 +-
 .../datatable-tabs.component.ts               |   9 +-
 .../multi-row/multi-row.component.scss        |  10 -
 .../multi-row/multi-row.component.spec.ts     |  25 -
 .../multi-row/multi-row.component.ts          | 155 ----
 .../single-row/single-row.component.scss      |   7 -
 .../single-row/single-row.component.spec.ts   |  25 -
 .../single-row/single-row.component.ts        | 149 ----
 src/app/groups/groups.module.ts               |   4 -
 src/app/loans/loans-routing.module.ts         | 467 +++++-----
 .../datatable-tab.component.html              |  11 +-
 .../datatable-tab/datatable-tab.component.ts  |  31 +-
 .../single-row/single-row.component.html      |  42 -
 .../single-row/single-row.component.scss      |  11 -
 .../single-row/single-row.component.spec.ts   |  25 -
 .../single-row/single-row.component.ts        | 147 ----
 src/app/loans/loans.module.ts                 |   4 -
 .../common-resolvers/edit-office.resolver.ts  |   2 +-
 .../office-datatable.resolver.ts              |  12 +-
 .../office-datatables.resolver.ts             |  14 +-
 .../common-resolvers/office.resolver.ts       |   2 +-
 .../datatable-tabs.component.html             |  11 +-
 .../datatable-tabs.component.ts               |  10 +-
 .../multi-row/multi-row.component.html        |  33 -
 .../multi-row/multi-row.component.scss        |  10 -
 .../multi-row/multi-row.component.spec.ts     |  25 -
 .../multi-row/multi-row.component.ts          | 154 ----
 .../single-row/single-row.component.html      |  42 -
 .../single-row/single-row.component.scss      |   7 -
 .../single-row/single-row.component.spec.ts   |  25 -
 .../single-row/single-row.component.ts        | 148 ----
 .../general-tab/general-tab.component.html    |  49 +-
 .../general-tab/general-tab.component.scss    |  11 +
 .../general-tab/general-tab.component.ts      |   2 +-
 .../view-office/view-office.component.html    |   8 -
 .../organization-routing.module.ts            |  29 +-
 src/app/organization/organization.module.ts   |   4 -
 .../create-loan-product.component.html        |   8 +
 .../create-loan-product.component.ts          |  32 +-
 .../loan-product-and-template.resolver.ts     |   2 +-
 .../loan-product-datatable.resolver.spec.ts   |  16 +
 .../loan-product-datatable.resolver.ts        |  26 +
 .../loan-product-datatables.resolver.spec.ts  |  16 +
 .../loan-product-datatables.resolver.ts       |  23 +
 ...loan-product-datatable-step.component.html |  51 ++
 ...loan-product-datatable-step.component.scss |   7 +
 ...n-product-datatable-step.component.spec.ts |  25 +
 .../loan-product-datatable-step.component.ts  |  82 ++
 .../loan-product-settings-step.component.ts   |   3 +-
 .../loan-products/loan-product.resolver.ts    |   4 +-
 .../datatable-tab.component.html              |   9 +
 .../datatable-tab.component.scss              |   0
 .../datatable-tab.component.spec.ts           |  25 +
 .../datatable-tab/datatable-tab.component.ts  |  26 +
 .../general-tab/general-tab.component.html    | 799 ++++++++++++++++++
 .../general-tab/general-tab.component.scss    |  12 +
 .../general-tab/general-tab.component.spec.ts |  25 +
 .../general-tab/general-tab.component.ts      |  28 +
 .../view-loan-product.component.html          | 769 +----------------
 .../view-loan-product.component.scss          |  33 +-
 .../view-loan-product.component.ts            |  12 +-
 src/app/products/products-routing.module.ts   |  69 +-
 src/app/products/products.module.ts           |  12 +-
 src/app/products/products.service.ts          |  50 ++
 .../saving-product-and-template.resolver.ts   |   4 +-
 .../saving-product-datatable.resolver.spec.ts |  16 +
 .../saving-product-datatable.resolver.ts      |  26 +
 ...saving-product-datatables.resolver.spec.ts |  16 +
 .../saving-product-datatables.resolver.ts     |  27 +
 .../saving-product.resolver.ts                |   4 +-
 ...aving-product-datatable-tab.component.html |   9 +
 ...aving-product-datatable-tab.component.scss |   0
 ...ng-product-datatable-tab.component.spec.ts |  25 +
 .../saving-product-datatable-tab.component.ts |  26 +
 .../saving-product-general-tab.component.html | 353 ++++++++
 .../saving-product-general-tab.component.scss |  12 +
 ...ving-product-general-tab.component.spec.ts |  25 +
 .../saving-product-general-tab.component.ts   |  24 +
 .../view-saving-product.component.html        | 366 +-------
 .../view-saving-product.component.scss        |  33 +-
 .../view-saving-product.component.ts          |  10 +-
 .../table-and-sms.component.html              |   4 +-
 .../datatable-tabs.component.html             |  11 +-
 .../datatable-tabs.component.ts               |  10 +-
 .../multi-row/multi-row.component.html        |  33 -
 .../multi-row/multi-row.component.scss        |  10 -
 .../multi-row/multi-row.component.spec.ts     |  25 -
 .../multi-row/multi-row.component.ts          | 159 ----
 .../single-row/single-row.component.html      |  42 -
 .../single-row/single-row.component.scss      |   7 -
 .../single-row/single-row.component.spec.ts   |  25 -
 .../single-row/single-row.component.ts        | 150 ----
 src/app/savings/savings.module.ts             |   4 -
 .../formfield/formfield.component.html        |  15 +-
 .../formfield/model/datetimepicker-base.ts    |  15 +
 .../formfield/model/formfield-base.ts         |   4 +-
 src/app/shared/material.module.ts             |   6 +-
 src/app/shared/shared.module.ts               |  11 +-
 .../datatable-multi-row.component.html}       |   0
 .../datatable-multi-row.component.scss}       |   0
 .../datatable-multi-row.component.spec.ts     |  25 +
 .../datatable-multi-row.component.ts}         |  84 +-
 .../datatable-single-row.component.html}      |  15 +-
 .../datatable-single-row.component.scss       |  23 +
 .../datatable-single-row.component.spec.ts    |  25 +
 .../datatable-single-row.component.ts}        |  98 ++-
 .../entity-datatable-tab.component.html       |  12 +
 .../entity-datatable-tab.component.scss       |   0
 .../entity-datatable-tab.component.spec.ts    |  25 +
 .../entity-datatable-tab.component.ts         |  20 +
 .../create-data-table.component.html          |  32 +-
 .../create-data-table.component.ts            |  18 +-
 src/app/system/system.service.ts              |  26 +
 161 files changed, 2985 insertions(+), 4971 deletions(-)
 delete mode 100644 src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.html
 delete mode 100644 src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.spec.ts
 delete mode 100644 src/app/centers/centers-view/datatable-tab/single-row/single-row.component.html
 delete mode 100644 src/app/centers/centers-view/datatable-tab/single-row/single-row.component.scss
 delete mode 100644 src/app/centers/centers-view/datatable-tab/single-row/single-row.component.spec.ts
 delete mode 100644 src/app/centers/centers-view/datatable-tab/single-row/single-row.component.ts
 delete mode 100644 src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.html
 delete mode 100644 src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.scss
 delete mode 100644 src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.spec.ts
 delete mode 100644 src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.ts
 delete mode 100644 src/app/clients/clients-view/datatable-tab/single-row/single-row.component.html
 delete mode 100644 src/app/clients/clients-view/datatable-tab/single-row/single-row.component.scss
 delete mode 100644 src/app/clients/clients-view/datatable-tab/single-row/single-row.component.spec.ts
 delete mode 100644 src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/multi-row/multi-row.component.html
 delete mode 100644 src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/multi-row/multi-row.component.scss
 delete mode 100644 src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/multi-row/multi-row.component.spec.ts
 delete mode 100644 src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/multi-row/multi-row.component.ts
 delete mode 100644 src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/single-row/single-row.component.html
 delete mode 100644 src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/single-row/single-row.component.scss
 delete mode 100644 src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/single-row/single-row.component.spec.ts
 delete mode 100644 src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/single-row/single-row.component.ts
 delete mode 100644 src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/multi-row/multi-row.component.html
 delete mode 100644 src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/multi-row/multi-row.component.scss
 delete mode 100644 src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/multi-row/multi-row.component.spec.ts
 delete mode 100644 src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/multi-row/multi-row.component.ts
 delete mode 100644 src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/single-row/single-row.component.html
 delete mode 100644 src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/single-row/single-row.component.scss
 delete mode 100644 src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/single-row/single-row.component.spec.ts
 delete mode 100644 src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/single-row/single-row.component.ts
 delete mode 100644 src/app/groups/groups-view/datatable-tabs/multi-row/multi-row.component.scss
 delete mode 100644 src/app/groups/groups-view/datatable-tabs/multi-row/multi-row.component.spec.ts
 delete mode 100644 src/app/groups/groups-view/datatable-tabs/multi-row/multi-row.component.ts
 delete mode 100644 src/app/groups/groups-view/datatable-tabs/single-row/single-row.component.scss
 delete mode 100644 src/app/groups/groups-view/datatable-tabs/single-row/single-row.component.spec.ts
 delete mode 100644 src/app/groups/groups-view/datatable-tabs/single-row/single-row.component.ts
 delete mode 100644 src/app/loans/loans-view/datatable-tab/single-row/single-row.component.html
 delete mode 100644 src/app/loans/loans-view/datatable-tab/single-row/single-row.component.scss
 delete mode 100644 src/app/loans/loans-view/datatable-tab/single-row/single-row.component.spec.ts
 delete mode 100644 src/app/loans/loans-view/datatable-tab/single-row/single-row.component.ts
 delete mode 100644 src/app/organization/offices/view-office/datatable-tabs/multi-row/multi-row.component.html
 delete mode 100644 src/app/organization/offices/view-office/datatable-tabs/multi-row/multi-row.component.scss
 delete mode 100644 src/app/organization/offices/view-office/datatable-tabs/multi-row/multi-row.component.spec.ts
 delete mode 100644 src/app/organization/offices/view-office/datatable-tabs/multi-row/multi-row.component.ts
 delete mode 100644 src/app/organization/offices/view-office/datatable-tabs/single-row/single-row.component.html
 delete mode 100644 src/app/organization/offices/view-office/datatable-tabs/single-row/single-row.component.scss
 delete mode 100644 src/app/organization/offices/view-office/datatable-tabs/single-row/single-row.component.spec.ts
 delete mode 100644 src/app/organization/offices/view-office/datatable-tabs/single-row/single-row.component.ts
 create mode 100644 src/app/products/loan-products/loan-product-datatable.resolver.spec.ts
 create mode 100644 src/app/products/loan-products/loan-product-datatable.resolver.ts
 create mode 100644 src/app/products/loan-products/loan-product-datatables.resolver.spec.ts
 create mode 100644 src/app/products/loan-products/loan-product-datatables.resolver.ts
 create mode 100644 src/app/products/loan-products/loan-product-stepper/loan-product-datatable-step/loan-product-datatable-step.component.html
 create mode 100644 src/app/products/loan-products/loan-product-stepper/loan-product-datatable-step/loan-product-datatable-step.component.scss
 create mode 100644 src/app/products/loan-products/loan-product-stepper/loan-product-datatable-step/loan-product-datatable-step.component.spec.ts
 create mode 100644 src/app/products/loan-products/loan-product-stepper/loan-product-datatable-step/loan-product-datatable-step.component.ts
 create mode 100644 src/app/products/loan-products/view-loan-product/datatable-tab/datatable-tab.component.html
 create mode 100644 src/app/products/loan-products/view-loan-product/datatable-tab/datatable-tab.component.scss
 create mode 100644 src/app/products/loan-products/view-loan-product/datatable-tab/datatable-tab.component.spec.ts
 create mode 100644 src/app/products/loan-products/view-loan-product/datatable-tab/datatable-tab.component.ts
 create mode 100644 src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.html
 create mode 100644 src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.scss
 create mode 100644 src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.spec.ts
 create mode 100644 src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.ts
 create mode 100644 src/app/products/saving-products/saving-product-datatable.resolver.spec.ts
 create mode 100644 src/app/products/saving-products/saving-product-datatable.resolver.ts
 create mode 100644 src/app/products/saving-products/saving-product-datatables.resolver.spec.ts
 create mode 100644 src/app/products/saving-products/saving-product-datatables.resolver.ts
 create mode 100644 src/app/products/saving-products/view-saving-product/saving-product-datatable-tab/saving-product-datatable-tab.component.html
 create mode 100644 src/app/products/saving-products/view-saving-product/saving-product-datatable-tab/saving-product-datatable-tab.component.scss
 create mode 100644 src/app/products/saving-products/view-saving-product/saving-product-datatable-tab/saving-product-datatable-tab.component.spec.ts
 create mode 100644 src/app/products/saving-products/view-saving-product/saving-product-datatable-tab/saving-product-datatable-tab.component.ts
 create mode 100644 src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.html
 create mode 100644 src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.scss
 create mode 100644 src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.spec.ts
 create mode 100644 src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.ts
 delete mode 100644 src/app/savings/savings-account-view/datatable-tabs/multi-row/multi-row.component.html
 delete mode 100644 src/app/savings/savings-account-view/datatable-tabs/multi-row/multi-row.component.scss
 delete mode 100644 src/app/savings/savings-account-view/datatable-tabs/multi-row/multi-row.component.spec.ts
 delete mode 100644 src/app/savings/savings-account-view/datatable-tabs/multi-row/multi-row.component.ts
 delete mode 100644 src/app/savings/savings-account-view/datatable-tabs/single-row/single-row.component.html
 delete mode 100644 src/app/savings/savings-account-view/datatable-tabs/single-row/single-row.component.scss
 delete mode 100644 src/app/savings/savings-account-view/datatable-tabs/single-row/single-row.component.spec.ts
 delete mode 100644 src/app/savings/savings-account-view/datatable-tabs/single-row/single-row.component.ts
 create mode 100644 src/app/shared/form-dialog/formfield/model/datetimepicker-base.ts
 rename src/app/{groups/groups-view/datatable-tabs/multi-row/multi-row.component.html => shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html} (100%)
 rename src/app/{centers/centers-view/datatable-tab/multi-row/multi-row.component.scss => shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.scss} (100%)
 create mode 100644 src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.spec.ts
 rename src/app/{centers/centers-view/datatable-tab/multi-row/multi-row.component.ts => shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.ts} (71%)
 rename src/app/{groups/groups-view/datatable-tabs/single-row/single-row.component.html => shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html} (70%)
 create mode 100644 src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.scss
 create mode 100644 src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.spec.ts
 rename src/app/{clients/clients-view/datatable-tab/single-row/single-row.component.ts => shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.ts} (54%)
 create mode 100644 src/app/shared/tabs/entity-datatable-tab/entity-datatable-tab.component.html
 create mode 100644 src/app/shared/tabs/entity-datatable-tab/entity-datatable-tab.component.scss
 create mode 100644 src/app/shared/tabs/entity-datatable-tab/entity-datatable-tab.component.spec.ts
 create mode 100644 src/app/shared/tabs/entity-datatable-tab/entity-datatable-tab.component.ts

diff --git a/package-lock.json b/package-lock.json
index ffc844b3f..abe145b0e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
       "license": "MPL-2.0",
       "dependencies": {
         "@angular-devkit/schematics": "^14.0.4",
+        "@angular-material-components/datetime-picker": "^7.0.1",
         "@angular/animations": "^13.3.12",
         "@angular/cdk": "13.3.9",
         "@angular/common": "13.3.12",
@@ -486,6 +487,22 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
+    "node_modules/@angular-material-components/datetime-picker": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/@angular-material-components/datetime-picker/-/datetime-picker-7.0.1.tgz",
+      "integrity": "sha512-ukNFdmab++bPF35+56SXFkzWz7F2If3s/rRae37Yq3g7QWWh3kmS7KEbvtSIz000yj3/wGHDV1v9ChGiqsNsgA==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/cdk": "^13.0.1",
+        "@angular/common": "^13.0.1",
+        "@angular/core": "^13.0.1",
+        "@angular/forms": "^13.0.1",
+        "@angular/material": "^13.0.1",
+        "@angular/platform-browser": "^13.0.1"
+      }
+    },
     "node_modules/@angular/animations": {
       "version": "13.3.12",
       "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-13.3.12.tgz",
@@ -21455,6 +21472,14 @@
         }
       }
     },
+    "@angular-material-components/datetime-picker": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/@angular-material-components/datetime-picker/-/datetime-picker-7.0.1.tgz",
+      "integrity": "sha512-ukNFdmab++bPF35+56SXFkzWz7F2If3s/rRae37Yq3g7QWWh3kmS7KEbvtSIz000yj3/wGHDV1v9ChGiqsNsgA==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
     "@angular/animations": {
       "version": "13.3.12",
       "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-13.3.12.tgz",
diff --git a/package.json b/package.json
index 87146ccda..fe9d8ce72 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "@angular-devkit/schematics": "^14.0.4",
+    "@angular-material-components/datetime-picker": "^7.0.1",
     "@angular/animations": "^13.3.12",
     "@angular/cdk": "13.3.9",
     "@angular/common": "13.3.12",
diff --git a/src/app/centers/centers-view/centers-view.component.html b/src/app/centers/centers-view/centers-view.component.html
index 44a207f63..41571f05e 100644
--- a/src/app/centers/centers-view/centers-view.component.html
+++ b/src/app/centers/centers-view/centers-view.component.html
@@ -3,17 +3,23 @@
     <mat-card-title-group class="header-title-group">
       <div class="profile-image-container">
         <div>
-          <img mat-card-md-image class="profile-image"
-            src='assets/images/center_placeholder.png'>
+          <img mat-card-md-image class="profile-image" src="assets/images/center_placeholder.png">
         </div>
       </div>
       <div class="mat-typography center-card-title">
         <mat-card-title>
-          <h3>
-            <i class="fa fa-stop" matTooltip= "{{ centerViewData.status.value }}"
-          [ngClass]="centerViewData.status.code |statusLookup"></i>
-          Center Name : {{centerViewData.name}}
+          <h3 fxFlex="95%">
+            <i class="fa fa-stop" matTooltip="{{ centerViewData.status.value }}"
+              [ngClass]="centerViewData.status.code |statusLookup"></i>
+            <b>Center Name :</b> {{centerViewData.name}}
           </h3>
+          <div fxFlex="5%" *ngIf="!(centerViewData.status.value==='Closed')">
+            <button mat-icon-button [matMenuTriggerFor]="centerMenu" aria-label="Center actions" yPosition="below">
+              <mat-icon matListIcon class="actions-menu">
+                <fa-icon icon="bars" size="sm"></fa-icon>
+              </mat-icon>
+            </button>
+          </div>
         </mat-card-title>
         <mat-card-subtitle>
           <div fxLayout="row" fxLayout.lt-md="column">
@@ -22,74 +28,85 @@
                 Account #:{{centerViewData.accountNo}} <br />
                 Office: {{centerViewData.officeName}} <br />
                 <span *ngIf="centerViewData.externalId">
-                  External Id: {{centerViewData.externalId}} <br/>
+                  External Id: {{centerViewData.externalId}} <br />
                 </span>
                 <span *ngIf="centerViewData.staffName">
-                  Staff: {{centerViewData.staffName}} <br/>
+                  Staff: {{centerViewData.staffName}} <br />
                 </span>
                 Activation Date :
-                {{(centerViewData.activationDate)?(centerViewData.activationDate  | dateFormat) :'Not Activated'}}<br />
+                {{(centerViewData.activationDate)?(centerViewData.activationDate | dateFormat) :'Not Activated'}}<br />
               </p>
             </div>
+            <div fxFlex="45%" class="center-meeting" fxLayoutAlign="start start">
+              <div *ngIf="centerViewData.collectionMeetingCalendar; else unassigned">
+                <p>
+                  Next Meeting on: {{centerViewData.collectionMeetingCalendar?.nextTenRecurringDates[0] | dateFormat}}
+                  <span *ngIf="editMeeting">
+                    <i class="fa fa-edit" (click)="doAction('Edit Meeting')"
+                      *mifosxHasPermission="'UPDATE_MEETING'"></i><br />
+                  </span>
+                  Meeting Frequency: {{centerViewData.collectionMeetingCalendar?.frequency.value | lowercase}}
+                </p>
+              </div>
+              <ng-template #unassigned>
+                <div>
+                  <p>
+                    Next Meeting on: Unassigned
+                    <i class="fa fa-calendar"></i><br />
+                    Meeting Frequency: N/A
+                  </p>
+                </div>
+              </ng-template>
+            </div>
           </div>
         </mat-card-subtitle>
       </div>
 
-      <div class="center-meeting" fxLayoutAlign="start start">
-        <div *ngIf="centerViewData.collectionMeetingCalendar; else unassigned">
-          <p>
-             Next Meeting on: {{centerViewData.collectionMeetingCalendar?.nextTenRecurringDates[0]  | dateFormat}}
-             <span *ngIf="editMeeting">
-              <i class="fa fa-edit" (click)="doAction('Edit Meeting')" *mifosxHasPermission="'UPDATE_MEETING'"></i><br />
-             </span>
-             Meeting Frequency: {{centerViewData.collectionMeetingCalendar?.frequency.value | lowercase}}
-          </p>
-        </div>
-        <ng-template #unassigned>
-          <div>
-            <p>
-              Next Meeting on: Unassigned
-              <i class="fa fa-calendar"></i><br/>
-              Meeting Frequency: N/A
-          </p>
-        </div>
-        </ng-template>
-      </div>
+      <mat-menu #centerMenu="matMenu">
 
-    </mat-card-title-group>
-    <mat-card-actions class="center-actions" *ngIf="!(centerViewData.status.value==='Closed')">
-      <span *ngIf="!(centerViewData.status.value=='Active')">
-        <button mat-raised-button *mifosxHasPermission="'ACTIVATE_CENTER'" (click)="doAction('Activate')"><i class="fa fa-check-sign"></i> Activate </button>
-      </span>
-      <button mat-raised-button *mifosxHasPermission="'UPDATE_CENTER'" (click)="doAction('Edit')"><i class="fa fa-edit"></i> Edit </button>
-      <button mat-raised-button *mifosxHasPermission="'CREATE_GROUP'"><i class="fa fa-plus"></i> Add Group </button>
-      <button mat-raised-button *mifosxHasPermission="'ASSOCIATEGROUPS_CENTER'" (click)="doAction('Manage Groups')"> <i class="fa fa-edit"></i> Manage Groups </button>
-      <span  *ngIf="centerViewData.active">
-      <button mat-raised-button *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'" [routerLink]="['savings-accounts', 'create']">
-        <i class="fa fa-file"></i> Centers Saving Application
-      </button>
-      </span>
-      <button mat-raised-button [matMenuTriggerFor]="More"> More </button>
-      <mat-menu #More="matMenu">
-        <span *ngIf="centerViewData.collectionMeetingCalendar">
-          <button mat-menu-item *mifosxHasPermission="'SAVEORUPDATEATTENDANCE_MEETING'" (click)="doAction('Attendance')"> Attendance </button>
+        <span *ngIf="!(centerViewData.status.value=='Active')">
+          <button mat-menu-item *mifosxHasPermission="'ACTIVATE_CENTER'" (click)="doAction('Activate')"><i
+              class="fa fa-check-sign"></i> Activate </button>
         </span>
-        <span *ngIf="!(centerViewData.staffId)">
-          <button mat-menu-item *mifosxHasPermission="'ASSIGNSTAFF_GROUP'" (click)="doAction('Assign Staff')"> Assign Staff </button>
+        <button mat-menu-item *mifosxHasPermission="'UPDATE_CENTER'" (click)="doAction('Edit')"><i
+            class="fa fa-edit"></i> Edit </button>
+        <button mat-menu-item *mifosxHasPermission="'CREATE_GROUP'"><i class="fa fa-plus"></i> Add Group </button>
+        <button mat-menu-item *mifosxHasPermission="'ASSOCIATEGROUPS_CENTER'" (click)="doAction('Manage Groups')"> <i
+            class="fa fa-edit"></i> Manage Groups </button>
+        <span *ngIf="centerViewData.active">
+          <button mat-menu-item *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'"
+            [routerLink]="['savings-accounts', 'create']">
+            <i class="fa fa-file"></i> Centers Saving Application
+          </button>
         </span>
-        <span *ngIf="centerViewData.staffId">
-          <button mat-menu-item *mifosxHasPermission="'UNASSIGNSTAFF_GROUP'" (click)="doAction('Unassign Staff')"> Unassign Staff </button>
-        </span>
-        <span *ngIf="centerViewData.status.value==='Active'">
-          <button mat-menu-item *mifosxHasPermission="'DELETE_CENTER'" (click)="doAction('Delete')"> Delete </button>
-        </span>
-        <button mat-menu-item *mifosxHasPermission="'CLOSE_CENTER'" (click)="doAction('Close')"> Close </button>
-        <span *ngIf="centerViewData.status.value==='Active' && !(centerViewData.collectionMeetingCalendar)">
-          <button mat-menu-item *mifosxHasPermission="'CREATE_MEETING'" (click)="doAction('Attach Meeting')"> Attach Meeting </button>
-        </span>
-        <button mat-menu-item *mifosxHasPermission="'READ_Staff Assignment History'" (click)="doAction('Staff Assignment History')"> Staff Assignment History </button>
+        <button mat-menu-item [matMenuTriggerFor]="More"> More </button>
+        <mat-menu #More="matMenu">
+          <span *ngIf="centerViewData.collectionMeetingCalendar">
+            <button mat-menu-item *mifosxHasPermission="'SAVEORUPDATEATTENDANCE_MEETING'"
+              (click)="doAction('Attendance')"> Attendance </button>
+          </span>
+          <span *ngIf="!(centerViewData.staffId)">
+            <button mat-menu-item *mifosxHasPermission="'ASSIGNSTAFF_GROUP'" (click)="doAction('Assign Staff')"> Assign
+              Staff </button>
+          </span>
+          <span *ngIf="centerViewData.staffId">
+            <button mat-menu-item *mifosxHasPermission="'UNASSIGNSTAFF_GROUP'" (click)="doAction('Unassign Staff')">
+              Unassign Staff </button>
+          </span>
+          <span *ngIf="centerViewData.status.value==='Active'">
+            <button mat-menu-item *mifosxHasPermission="'DELETE_CENTER'" (click)="doAction('Delete')"> Delete </button>
+          </span>
+          <button mat-menu-item *mifosxHasPermission="'CLOSE_CENTER'" (click)="doAction('Close')"> Close </button>
+          <span *ngIf="centerViewData.status.value==='Active' && !(centerViewData.collectionMeetingCalendar)">
+            <button mat-menu-item *mifosxHasPermission="'CREATE_MEETING'" (click)="doAction('Attach Meeting')"> Attach
+              Meeting </button>
+          </span>
+          <button mat-menu-item *mifosxHasPermission="'READ_Staff Assignment History'"
+            (click)="doAction('Staff Assignment History')"> Staff Assignment History </button>
+        </mat-menu>
       </mat-menu>
-    </mat-card-actions>
+    </mat-card-title-group>
+
   </mat-card-header>
   <mat-card-content>
     <nav mat-tab-nav-bar class="navigation-tabs">
@@ -97,13 +114,14 @@
         [active]="general.isActive">
         General
       </a>
-      <a mat-tab-link *mifosxHasPermission="'READ_GROUPNOTE'" [routerLink]="['./notes']" routerLinkActive #notes="routerLinkActive"
-        [active]="notes.isActive">
+      <a mat-tab-link *mifosxHasPermission="'READ_GROUPNOTE'" [routerLink]="['./notes']" routerLinkActive
+        #notes="routerLinkActive" [active]="notes.isActive">
         Notes
       </a>
       <span *ngFor="let centerDatatable of centerDatatables">
-        <a mat-tab-link *mifosxHasPermission="'READ_' + centerDatatable.registeredTableName" [routerLink]="['./datatables',centerDatatable.registeredTableName]"
-          routerLinkActive #datatable="routerLinkActive" [active]="datatable.isActive">
+        <a mat-tab-link *mifosxHasPermission="'READ_' + centerDatatable.registeredTableName"
+          [routerLink]="['./datatables',centerDatatable.registeredTableName]" routerLinkActive
+          #datatable="routerLinkActive" [active]="datatable.isActive">
           {{centerDatatable.registeredTableName}}
         </a>
       </span>
diff --git a/src/app/centers/centers-view/datatable-tab/datatable-tab.component.html b/src/app/centers/centers-view/datatable-tab/datatable-tab.component.html
index ee8d69aec..bc0b3f2f8 100644
--- a/src/app/centers/centers-view/datatable-tab/datatable-tab.component.html
+++ b/src/app/centers/centers-view/datatable-tab/datatable-tab.component.html
@@ -1,4 +1,9 @@
-<div>
-  <mifosx-multi-row *ngIf="multiRowDatatableFlag" [dataObject]="centerDatatable"></mifosx-multi-row>
-  <mifosx-single-row *ngIf="!multiRowDatatableFlag" [dataObject]="centerDatatable"></mifosx-single-row>
+<div class="tab-container mat-typography">
+  <mifosx-entity-datatable-tab
+    entityType="Center"
+    [entityId]="entityId"
+    [multiRowDatatableFlag]="multiRowDatatableFlag"
+    [entityDatatable]="entityDatatable"
+  >
+  </mifosx-entity-datatable-tab>
 </div>
diff --git a/src/app/centers/centers-view/datatable-tab/datatable-tab.component.ts b/src/app/centers/centers-view/datatable-tab/datatable-tab.component.ts
index 777d39400..f7351080b 100644
--- a/src/app/centers/centers-view/datatable-tab/datatable-tab.component.ts
+++ b/src/app/centers/centers-view/datatable-tab/datatable-tab.component.ts
@@ -1,4 +1,4 @@
-import { Component} from '@angular/core';
+import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 @Component({
@@ -7,21 +7,23 @@ import { ActivatedRoute } from '@angular/router';
   styleUrls: ['./datatable-tab.component.scss']
 })
 export class DatatableTabComponent {
+  entityId: string;
+  /** Center Datatable */
+  entityDatatable: any;
+  /** Multi Row Datatable Flag */
+  multiRowDatatableFlag: boolean;
 
-    /** Center Datatable */
-    centerDatatable: any;
-    /** Multi Row Datatable Flag */
-    multiRowDatatableFlag: boolean;
+  /**
+   * Fetches data table data from `resolve`
+   * @param {ActivatedRoute} route Activated Route.
+   */
+  constructor(private route: ActivatedRoute) {
+    this.entityId = this.route.parent.parent.snapshot.paramMap.get('centerId');
 
-    /**
-     * Fetches data table data from `resolve`
-     * @param {ActivatedRoute} route Activated Route.
-     */
-    constructor(private route: ActivatedRoute) {
-      this.route.data.subscribe((data: { centerDatatable: any }) => {
-        this.centerDatatable = data.centerDatatable;
-        this.multiRowDatatableFlag = this.centerDatatable.columnHeaders[0].columnName === 'id' ? true : false;
-      });
-    }
+    this.route.data.subscribe((data: { centerDatatable: any }) => {
+      this.entityDatatable = data.centerDatatable;
+      this.multiRowDatatableFlag = this.entityDatatable.columnHeaders[0].columnName === 'id' ? true : false;
+    });
+  }
 
 }
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
deleted file mode 100644
index 818fd4731..000000000
--- a/src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<div class="tab-container mat-typography">
-
-  <div fxLayout="row" fxLayoutAlign="start">
-    <div class="m-b-10">
-      <h3>{{datatableName}}</h3>
-    </div>
-    <div class="action-button m-b-5" fxLayoutGap="10px">
-      <span *mifosxHasPermission="'CREATE_' + datatableName">
-        <button mat-raised-button color="primary" (click)="add()">
-          <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
-        </button>
-      </span>
-      <span *mifosxHasPermission="'DELETE_' + datatableName">
-        <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="showDeleteBotton">
-          <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete All
-        </button>
-      </span>
-    </div>
-  </div>
-
-
-  <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 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>
diff --git a/src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.spec.ts b/src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.spec.ts
deleted file mode 100644
index dd46589d8..000000000
--- a/src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MultiRowComponent } from './multi-row.component';
-
-describe('MultiRowComponent', () => {
-  let component: MultiRowComponent;
-  let fixture: ComponentFixture<MultiRowComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ MultiRowComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MultiRowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
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
deleted file mode 100644
index e933bf643..000000000
--- a/src/app/centers/centers-view/datatable-tab/single-row/single-row.component.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<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>
-
-  <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/centers/centers-view/datatable-tab/single-row/single-row.component.scss b/src/app/centers/centers-view/datatable-tab/single-row/single-row.component.scss
deleted file mode 100644
index 33f1cf867..000000000
--- a/src/app/centers/centers-view/datatable-tab/single-row/single-row.component.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.tab-container {
-    padding: 1%;
-    margin: 1%;
-    .delete-button {
-        margin-left: 1%;
-    }
-}
-
-.tableName {
-    padding-left: 2%;
-}
\ No newline at end of file
diff --git a/src/app/centers/centers-view/datatable-tab/single-row/single-row.component.spec.ts b/src/app/centers/centers-view/datatable-tab/single-row/single-row.component.spec.ts
deleted file mode 100644
index 8aece650c..000000000
--- a/src/app/centers/centers-view/datatable-tab/single-row/single-row.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SingleRowComponent } from './single-row.component';
-
-describe('SingleRowComponent', () => {
-  let component: SingleRowComponent;
-  let fixture: ComponentFixture<SingleRowComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SingleRowComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SingleRowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/centers/centers-view/datatable-tab/single-row/single-row.component.ts b/src/app/centers/centers-view/datatable-tab/single-row/single-row.component.ts
deleted file mode 100644
index 44a4daac1..000000000
--- a/src/app/centers/centers-view/datatable-tab/single-row/single-row.component.ts
+++ /dev/null
@@ -1,149 +0,0 @@
-/** Angular Imports */
-import { Component, Input, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { MatDialog } from '@angular/material/dialog';
-
-/** Custom Components */
-import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
-import { DeleteDialogComponent } from '../../../../shared/delete-dialog/delete-dialog.component';
-
-/** Custom Models */
-import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
-
-/** Custom Services */
-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';
-
-/**
- * Centers Single Row Data Tables
- */
-@Component({
-  selector: 'mifosx-single-row',
-  templateUrl: './single-row.component.html',
-  styleUrls: ['./single-row.component.scss']
-})
-export class SingleRowComponent implements OnInit {
-
-  /** Data Object */
-  @Input() dataObject: any;
-
-  /** Data Table Name */
-  datatableName: string;
-  /** Center Id */
-  centerId: string;
-
-  /**
-   * Fetches center Id from parent route params.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Dates} dateUtils Date Utils.
-   * @param {MatDialog} dialog Mat Dialog.
-   * @param {SettingsService} settingsService Settings Service.
-   * @param {CentersService} centersService Centers Service.
-   * @param {Datatables} datatables Datatable utils
-   */
-  constructor(private route: ActivatedRoute,
-              private dateUtils: Dates,
-              private dialog: MatDialog,
-              private settingsService: SettingsService,
-              private centersService: CentersService,
-              private datatables: Datatables) {
-    this.centerId = this.route.parent.parent.snapshot.paramMap.get('centerId');
-  }
-
-  /**
-   * Fetches data table name from route params.
-   * subscription is required due to asynchronicity.
-   */
-  ngOnInit() {
-    this.route.params.subscribe((routeParams: any) => {
-      this.datatableName = routeParams.datatableName;
-    });
-  }
-
-  /**
-   * Creates a new instance of the given single row data table.
-   */
-  add() {
-    let dataTableEntryObject: any = { locale: this.settingsService.language.code };
-    const dateTransformColumns: string[] = [];
-    const columns = this.dataObject.columnHeaders.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'center_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
-    });
-    const formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
-    const data = {
-      title: 'Add ' + this.datatableName,
-      formfields: formfields
-    };
-    const addDialogRef = this.dialog.open(FormDialogComponent, { data });
-    addDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.centersService.addCenterDatatableEntry(this.centerId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.centersService.getCenterDatatable(this.centerId, this.datatableName).subscribe((dataObject: any) => {
-            this.dataObject = dataObject;
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Edits the current instance of single row data table.
-   */
-  edit() {
-    let dataTableEntryObject: any = { locale: this.settingsService.language.code };
-    const dateTransformColumns: string[] = [];
-    const columns = this.dataObject.columnHeaders.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'center_id'));
-    });
-    let formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
-    formfields = formfields.map((formfield: FormfieldBase, index: number) => {
-      formfield.value = (this.dataObject.data[0].row[index + 1]) ? this.dataObject.data[0].row[index + 1] : '';
-      return formfield;
-    });
-    const data = {
-      title: 'Edit ' + this.datatableName,
-      layout: { addButtonText: 'Confirm' },
-      formfields: formfields
-    };
-    const editDialogRef = this.dialog.open(FormDialogComponent, { data });
-    editDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.centersService.editCenterDatatableEntry(this.centerId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.centersService.getCenterDatatable(this.centerId, this.datatableName).subscribe((dataObject: any) => {
-            this.dataObject = dataObject;
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Deletes the current instance of single row data table.
-   */
-  delete() {
-    const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `the contents of ${this.datatableName}` }
-    });
-    deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.delete) {
-        this.centersService.deleteDatatableContent(this.centerId, this.datatableName)
-          .subscribe(() => {
-            this.centersService.getCenterDatatable(this.centerId, this.datatableName).subscribe((dataObject: any) => {
-              this.dataObject = dataObject;
-            });
-          });
-      }
-    });
-  }
-
-}
diff --git a/src/app/centers/centers.module.ts b/src/app/centers/centers.module.ts
index 1b15b62cd..eb6a0089e 100644
--- a/src/app/centers/centers.module.ts
+++ b/src/app/centers/centers.module.ts
@@ -14,8 +14,6 @@ import { CentersViewComponent } from './centers-view/centers-view.component';
 import { GeneralTabComponent } from './centers-view/general-tab/general-tab.component';
 import { NotesTabComponent } from './centers-view/notes-tab/notes-tab.component';
 import { DatatableTabComponent } from './centers-view/datatable-tab/datatable-tab.component';
-import { MultiRowComponent } from './centers-view/datatable-tab/multi-row/multi-row.component';
-import { SingleRowComponent } from './centers-view/datatable-tab/single-row/single-row.component';
 import { CenterActionsComponent } from './centers-view/center-actions/center-actions.component';
 import { ActivateCenterComponent } from './centers-view/center-actions/activate-center/activate-center.component';
 import { CenterAssignStaffComponent } from './centers-view/center-actions/center-assign-staff/center-assign-staff.component';
@@ -47,8 +45,6 @@ import { EditCenterComponent } from './edit-center/edit-center.component';
     GeneralTabComponent,
     NotesTabComponent,
     DatatableTabComponent,
-    MultiRowComponent,
-    SingleRowComponent,
     CenterActionsComponent,
     ActivateCenterComponent,
     CenterAssignStaffComponent,
diff --git a/src/app/centers/edit-center/edit-center.component.html b/src/app/centers/edit-center/edit-center.component.html
index 2f92a16ce..594c660ff 100644
--- a/src/app/centers/edit-center/edit-center.component.html
+++ b/src/app/centers/edit-center/edit-center.component.html
@@ -4,58 +4,58 @@
 
     <form [formGroup]="editCenterForm" (ngSubmit)="submit()">
 
-	  <mat-card-content>
+      <mat-card-content>
 
-	    <div fxLayout="column">
+        <div fxLayout="column">
 
-		  <mat-form-field>
-		    <mat-label>Name</mat-label>
-			<input matInput required formControlName="name">
-			<mat-error *ngIf="editCenterForm.controls.name.hasError('required')">
-			  Center Name is <strong>required</strong>
-			</mat-error>
-			<mat-error *ngIf="editCenterForm.controls.name.hasError('pattern')">
-			  Center Name <strong>cannot</strong> begin with a special character or number
-			</mat-error>
-			</mat-form-field>
+          <mat-form-field>
+            <mat-label>Name</mat-label>
+            <input matInput required formControlName="name">
+            <mat-error *ngIf="editCenterForm.controls.name.hasError('required')">
+              Center Name is <strong>required</strong>
+            </mat-error>
+            <mat-error *ngIf="editCenterForm.controls.name.hasError('pattern')">
+              Center Name <strong>cannot</strong> begin with a special character or number
+            </mat-error>
+          </mat-form-field>
 
-			<mat-form-field>
-			  <mat-label>Staff</mat-label>
-			  <mat-select formControlName="staffId">
-				<mat-option *ngFor="let staff of staffs" [value]="staff.id">
-				  {{ staff.displayName }}
-				</mat-option>
-			  </mat-select>
-			</mat-form-field>
+          <mat-form-field>
+            <mat-label>Staff</mat-label>
+            <mat-select formControlName="staffId">
+              <mat-option *ngFor="let staff of staffs" [value]="staff.id">
+                {{ staff.displayName }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
 
-			<mat-form-field>
-			  <mat-label>External id</mat-label>
-			  <input matInput formControlName="externalId">
-			</mat-form-field>
+          <mat-form-field>
+            <mat-label>External id</mat-label>
+            <input matInput formControlName="externalId">
+          </mat-form-field>
 
-			<ng-container *ngIf="centerData.status.value=='Pending'" (click)="activatedOnDatePicker.open()">
-			  <mat-form-field>
-				<mat-label>Activation date</mat-label>
-				<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker" required
-				  formControlName="activationDate">
-				<mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
-				<mat-datepicker #activatedOnDatePicker></mat-datepicker>
-				<mat-error *ngIf="editCenterForm.controls.activationDate.hasError('required')">
-				  Activation Date is <strong>required</strong>
-				</mat-error>
-			  </mat-form-field>
-			</ng-container>
+          <ng-container *ngIf="centerData.status.value=='Pending'" (click)="activatedOnDatePicker.open()">
+            <mat-form-field>
+              <mat-label>Activation date</mat-label>
+              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker" required
+                formControlName="activationDate">
+              <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
+              <mat-datepicker #activatedOnDatePicker></mat-datepicker>
+              <mat-error *ngIf="editCenterForm.controls.activationDate.hasError('required')">
+                Activation Date is <strong>required</strong>
+              </mat-error>
+            </mat-form-field>
+          </ng-container>
 
-		</div>
+        </div>
 
-	  </mat-card-content>
+      </mat-card-content>
 
-	  <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-	    <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
-	    <button mat-raised-button color="accent" [disabled]="!editCenterForm.valid">Confirm</button>
-	  </mat-card-actions>
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!editCenterForm.valid">Confirm</button>
+      </mat-card-actions>
 
-	</form>
+    </form>
 
   </mat-card>
 
diff --git a/src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.ts b/src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.ts
index e7d20c27f..91d66ada4 100644
--- a/src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.ts
+++ b/src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
-import { Dates } from 'app/core/utils/dates';
+import { Datatables } from 'app/core/utils/datatables';
 import { SettingsService } from 'app/settings/settings.service';
 
 @Component({
@@ -18,12 +18,10 @@ export class ClientDatatableStepComponent implements OnInit {
 
   constructor(private formBuilder: FormBuilder,
     private settingsService: SettingsService,
-    private dateUtils: Dates) { }
+    private datatableService: Datatables) { }
 
   ngOnInit(): void {
-    this.datatableInputs = this.datatableData.columnHeaderData.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'client_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
-    });
+    this.datatableInputs = this.datatableService.filterSystemColumns(this.datatableData.columnHeaderData);
     const inputItems: any = {};
     this.datatableInputs.forEach((input: any) => {
       input.controlName = this.getInputName(input);
@@ -41,68 +39,44 @@ export class ClientDatatableStepComponent implements OnInit {
   }
 
   getInputName(datatableInput: any): string {
-    if (datatableInput.columnName && datatableInput.columnName.includes('_cd_')) {
-      return datatableInput.columnName.split('_cd_')[0];
-    }
-    return datatableInput.columnName;
+    return this.datatableService.getInputName(datatableInput);
   }
 
   isNumeric(columnType: string) {
-    return this.isColumnType(columnType, 'INTEGER') || this.isColumnType(columnType, 'DECIMAL');
+    return this.datatableService.isNumeric(columnType);
   }
 
   isDate(columnType: string) {
-    return this.isColumnType(columnType, 'DATE') || this.isColumnType(columnType, 'DATETIME');
+    return this.datatableService.isDate(columnType);
   }
 
   isBoolean(columnType: string) {
-    return this.isColumnType(columnType, 'BOOLEAN');
+    return this.datatableService.isBoolean(columnType);
   }
 
   isDropdown(columnType: string) {
-    return this.isColumnType(columnType, 'CODELOOKUP');
+    return this.datatableService.isDropdown(columnType);
   }
 
   isString(columnType: string) {
-    return this.isColumnType(columnType, 'STRING');
+    return this.datatableService.isString(columnType);
   }
 
   isText(columnType: string) {
-    return this.isColumnType(columnType, 'TEXT');
-  }
-
-  isColumnType(columnType: string, expectedType: string) {
-    return (columnType === expectedType);
+    return this.datatableService.isText(columnType);
   }
 
   get payload(): any {
     const dateFormat = this.settingsService.dateFormat;
     const datatableDataValues = this.datatableForm.value;
-    const data = {
-      locale: this.settingsService.language.code
-    };
-    let existDate = false;
-    this.datatableInputs.forEach((input: any) => {
-      const controlName = this.getInputName(input);
-      if (this.isNumeric(input.columnDisplayType)) {
-        data[input.columnName] = datatableDataValues[controlName] * 1;
-      } else if (this.isDate(input.columnDisplayType)) {
-        data[input.columnName] = this.dateUtils.formatDate(datatableDataValues[controlName], dateFormat);
-        existDate = true;
-      } else {
-        data[input.columnName] = datatableDataValues[controlName];
-      }
-    });
 
-    if (existDate) {
-      data['dateFormat'] = dateFormat;
-    }
+    const data = this.datatableService.buildPayload(this.datatableInputs, datatableDataValues, dateFormat,
+      { locale: this.settingsService.language.code });
 
-    const payload = {
+    return {
       registeredTableName: this.datatableData.registeredTableName,
       data: data
     };
-    return payload;
   }
 
 }
diff --git a/src/app/clients/clients-view/datatable-tab/datatable-tab.component.html b/src/app/clients/clients-view/datatable-tab/datatable-tab.component.html
index 2dd096522..2b08fda32 100644
--- a/src/app/clients/clients-view/datatable-tab/datatable-tab.component.html
+++ b/src/app/clients/clients-view/datatable-tab/datatable-tab.component.html
@@ -1,4 +1,9 @@
-<div>
-  <mifosx-multi-row *ngIf="multiRowDatatableFlag" [dataObject]="clientDatatable"></mifosx-multi-row>
-  <mifosx-single-row *ngIf="!multiRowDatatableFlag" [dataObject]="clientDatatable"></mifosx-single-row>
-</div>
\ No newline at end of file
+<div class="tab-container mat-typography">
+  <mifosx-entity-datatable-tab
+    entityType="Client"
+    [entityId]="entityId"
+    [multiRowDatatableFlag]="multiRowDatatableFlag"
+    [entityDatatable]="entityDatatable"
+  >
+  </mifosx-entity-datatable-tab>
+</div>
diff --git a/src/app/clients/clients-view/datatable-tab/datatable-tab.component.ts b/src/app/clients/clients-view/datatable-tab/datatable-tab.component.ts
index b47f99453..9c4762804 100644
--- a/src/app/clients/clients-view/datatable-tab/datatable-tab.component.ts
+++ b/src/app/clients/clients-view/datatable-tab/datatable-tab.component.ts
@@ -7,14 +7,17 @@ import { ActivatedRoute } from '@angular/router';
   styleUrls: ['./datatable-tab.component.scss']
 })
 export class DatatableTabComponent implements OnInit {
-  clientDatatable: any;
+  entityId: string;
+  entityDatatable: any;
   multiRowDatatableFlag: boolean;
-  constructor(private route: ActivatedRoute) {
-    this.route.data.subscribe((data: { clientDatatable: any }) => {
-      this.clientDatatable = data.clientDatatable;
-      this.multiRowDatatableFlag = this.clientDatatable.columnHeaders[0].columnName === 'id' ? true : false;
-    });
 
+  constructor(private route: ActivatedRoute) {
+    this.entityId = this.route.parent.parent.snapshot.paramMap.get('clientId');
+
+    this.route.data.subscribe((data: { clientDatatable: any }) => {
+      this.entityDatatable = data.clientDatatable;
+      this.multiRowDatatableFlag = this.entityDatatable.columnHeaders[0].columnName === 'id' ? true : false;
+    });
   }
 
   ngOnInit() {
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
deleted file mode 100644
index ddcbf4863..000000000
--- a/src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<div class="tab-container mat-typography">
-  <h3>{{datatableName}}</h3>
-  <div fxLayout="row" fxLayoutAlign="flex-end">
-    <button mat-raised-button color="primary" (click)="add()">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
-    </button>
-    <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="showDeleteBotton">
-      <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete All
-    </button>
-  </div>
-  <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 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>
diff --git a/src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.scss b/src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.scss
deleted file mode 100644
index 04774025d..000000000
--- a/src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.tab-container {
-  padding: 1%;
-  margin: 1%;
-
-  table {
-    width: 100%;
-  }
-}
diff --git a/src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.spec.ts b/src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.spec.ts
deleted file mode 100644
index dd46589d8..000000000
--- a/src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MultiRowComponent } from './multi-row.component';
-
-describe('MultiRowComponent', () => {
-  let component: MultiRowComponent;
-  let fixture: ComponentFixture<MultiRowComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ MultiRowComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MultiRowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
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
deleted file mode 100644
index c7f5389c1..000000000
--- a/src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-import { Component, OnInit, Input, OnChanges, ViewChild } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { MatTable } from '@angular/material/table';
-import { MatDialog } from '@angular/material/dialog';
-import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
-
-/** Custom Components */
-import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
-import { DeleteDialogComponent } from '../../../../shared/delete-dialog/delete-dialog.component';
-
-/** Custom Services */
-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',
-  templateUrl: './multi-row.component.html',
-  styleUrls: ['./multi-row.component.scss']
-})
-export class MultiRowComponent implements OnInit, OnChanges {
-  @ViewChild('dataTable', { static: true }) dataTableRef: MatTable<Element>;
-  @Input() dataObject: any;
-  datatableName: string;
-  datatableColumns: string[] = [];
-  datatableData: any;
-  clientId: string;
-  showDeleteBotton: boolean;
-
-  /**
-   * Fetches Client Id from parent route params.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Dates} dateUtils Date Utils.
-   * @param {ClientsService} clientsService Clients Service.
-   * @param {MatDialog} dialog Dialog Service.
-   * @param {SettingsService} settingsService Settings Service
-   * @param {Datatables} datatables Datatable utils
-   */
-  constructor(private route: ActivatedRoute,
-    private dateUtils: Dates,
-    private clientsService: ClientsService,
-    private dialog: MatDialog,
-    private settingsService: SettingsService,
-    private datatables: Datatables,
-    private dateFormat: DateFormatPipe,
-    private dateTimeFormat: DatetimeFormatPipe,
-    private numberFormat: DecimalPipe) {
-    this.clientId = this.route.parent.parent.snapshot.paramMap.get('clientId');
-  }
-
-  ngOnInit() {
-    this.route.params.subscribe((routeParams: any) => {
-      this.datatableName = routeParams.datatableName;
-    });
-  }
-
-  ngOnChanges() {
-    this.datatableColumns = this.dataObject.columnHeaders.map((columnHeader: any) => {
-      return columnHeader.columnName;
-    });
-    this.datatableData = this.dataObject.data;
-    this.showDeleteBotton = this.datatableData[0] ? true : false;
-  }
-
-  add() {
-    let dataTableEntryObject: any = {
-      locale: this.settingsService.language.code
-    };
-    const dateTransformColumns: string[] = [];
-    const columns = this.dataObject.columnHeaders.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'client_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
-    });
-    const formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
-    const data = {
-      title: 'Add ' + this.datatableName,
-      formfields: formfields
-    };
-    const addDialogRef = this.dialog.open(FormDialogComponent, { data });
-    addDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        // format Dates
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.clientsService.addClientDatatableEntry(this.clientId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.clientsService.getClientDatatable(this.clientId, this.datatableName).subscribe((dataObject: any) => {
-            this.datatableData = dataObject.data;
-            this.dataTableRef.renderRows();
-          });
-        });
-      }
-    });
-  }
-
-  delete() {
-    const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `the contents of ${this.datatableName}` }
-    });
-    deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.delete) {
-        this.clientsService.deleteDatatableContent(this.clientId, this.datatableName)
-          .subscribe(() => {
-            this.clientsService.getClientDatatable(this.clientId, this.datatableName).subscribe((dataObject: any) => {
-              this.datatableData = dataObject.data;
-              this.showDeleteBotton = false;
-              this.dataTableRef.renderRows();
-            });
-          });
-      }
-    });
-  }
-
-  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
deleted file mode 100644
index e933bf643..000000000
--- a/src/app/clients/clients-view/datatable-tab/single-row/single-row.component.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<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>
-
-  <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/clients/clients-view/datatable-tab/single-row/single-row.component.scss b/src/app/clients/clients-view/datatable-tab/single-row/single-row.component.scss
deleted file mode 100644
index 78ed25b89..000000000
--- a/src/app/clients/clients-view/datatable-tab/single-row/single-row.component.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.tab-container {
-  padding: 1%;
-  margin: 1%;
-
-  .delete-button {
-    margin-left: 1%;
-  }
-}
-
-.table-data {
-  margin-top: 20px;
-  align-items: center;
-}
diff --git a/src/app/clients/clients-view/datatable-tab/single-row/single-row.component.spec.ts b/src/app/clients/clients-view/datatable-tab/single-row/single-row.component.spec.ts
deleted file mode 100644
index 8aece650c..000000000
--- a/src/app/clients/clients-view/datatable-tab/single-row/single-row.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SingleRowComponent } from './single-row.component';
-
-describe('SingleRowComponent', () => {
-  let component: SingleRowComponent;
-  let fixture: ComponentFixture<SingleRowComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SingleRowComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SingleRowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/clients/clients.module.ts b/src/app/clients/clients.module.ts
index 13d24c865..4ff9fa5ca 100644
--- a/src/app/clients/clients.module.ts
+++ b/src/app/clients/clients.module.ts
@@ -20,8 +20,6 @@ import { NotesTabComponent } from './clients-view/notes-tab/notes-tab.component'
 import { EditNotesDialogComponent } from './clients-view/custom-dialogs/edit-notes-dialog/edit-notes-dialog.component';
 import { DocumentsTabComponent } from './clients-view/documents-tab/documents-tab.component';
 import { DatatableTabComponent } from './clients-view/datatable-tab/datatable-tab.component';
-import { MultiRowComponent } from './clients-view/datatable-tab/multi-row/multi-row.component';
-import { SingleRowComponent } from './clients-view/datatable-tab/single-row/single-row.component';
 import { AddressTabComponent } from './clients-view/address-tab/address-tab.component';
 import { ChargesOverviewComponent } from './clients-view/charges/charges-overview/charges-overview.component';
 import { ClientActionsComponent } from './clients-view/client-actions/client-actions.component';
@@ -86,8 +84,6 @@ import { ClientDatatableStepComponent } from './client-stepper/client-datatable-
     EditNotesDialogComponent,
     DocumentsTabComponent,
     DatatableTabComponent,
-    MultiRowComponent,
-    SingleRowComponent,
     AddressTabComponent,
     ChargesOverviewComponent,
     ClientActionsComponent,
diff --git a/src/app/core/utils/datatables.ts b/src/app/core/utils/datatables.ts
index 39729961e..fe4fc0fc7 100644
--- a/src/app/core/utils/datatables.ts
+++ b/src/app/core/utils/datatables.ts
@@ -1,5 +1,8 @@
 import { Injectable } from '@angular/core';
+import { SettingsService } from 'app/settings/settings.service';
 import { CheckboxBase } from 'app/shared/form-dialog/formfield/model/checkbox-base';
+import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
+import { DateTimepickerBase } from 'app/shared/form-dialog/formfield/model/datetimepicker-base';
 import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
 import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
 import { Dates } from './dates';
@@ -9,7 +12,11 @@ import { Dates } from './dates';
 })
 export class Datatables {
 
-  constructor() { }
+  systemFields: string[] = ['id', 'created_at', 'updated_at', 'client_id', 'savings_account_id',
+    'loan_id', 'group_id', 'center_id', 'office_id', 'product_loan_id', 'savings_product_id'];
+
+  constructor(private dateUtils: Dates,
+    private settingsService: SettingsService) { }
 
   public getFormfields(columns: any, dateTransformColumns: string[], dataTableEntryObject: any) {
     return columns.map((column: any) => {
@@ -43,22 +50,22 @@ export class Datatables {
           if (!dataTableEntryObject.dateFormat) {
             dataTableEntryObject.dateFormat = Dates.DEFAULT_DATEFORMAT;
           }
-          return new InputBase({
+          return new DatepickerBase({
             controlName: column.columnName,
             label: column.columnName,
             value: '',
-            type: 'date',
+            maxDate: this.settingsService.maxAllowedDate,
             required: (column.isColumnNullable) ? false : true
           });
         }
         case 'DATETIME': {
           dateTransformColumns.push(column.columnName);
           dataTableEntryObject.dateFormat = Dates.DEFAULT_DATETIMEFORMAT;
-          return new InputBase({
+          return new DateTimepickerBase({
             controlName: column.columnName,
             label: column.columnName,
             value: '',
-            type: 'datetime-local',
+            maxDate: this.settingsService.maxAllowedDate,
             required: (column.isColumnNullable) ? false : true
           });
         }
@@ -66,4 +73,79 @@ export class Datatables {
     });
   }
 
+  public filterSystemColumns(columnHeaders: any): any {
+    return columnHeaders.filter((column: any, index: number) => {
+      if (!this.systemFields.includes(column.columnName)) {
+        column.idx = index;
+        return column;
+      }
+    });
+  }
+
+  public getInputName(datatableInput: any): string {
+    if (datatableInput.columnName && datatableInput.columnName.includes('_cd_')) {
+      return datatableInput.columnName.split('_cd_')[0];
+    }
+    return datatableInput.columnName;
+  }
+
+  public isNumeric(columnType: string): boolean {
+    return this.isColumnType(columnType, 'INTEGER') || this.isColumnType(columnType, 'DECIMAL');
+  }
+
+  public isDate(columnType: string): boolean {
+    return this.isColumnType(columnType, 'DATE') || this.isColumnType(columnType, 'DATETIME');
+  }
+
+  public isBoolean(columnType: string): boolean {
+    return this.isColumnType(columnType, 'BOOLEAN');
+  }
+
+  public isDropdown(columnType: string): boolean {
+    return this.isColumnType(columnType, 'CODELOOKUP');
+  }
+
+  public isString(columnType: string): boolean {
+    return this.isColumnType(columnType, 'STRING');
+  }
+
+  public isText(columnType: string): boolean {
+    return this.isColumnType(columnType, 'TEXT');
+  }
+
+  public isColumnType(columnType: string, expectedType: string): boolean {
+    return (columnType === expectedType);
+  }
+
+  public buildPayload(datatableInputs: any, datatableDataValues: any, dateFormat: string, output: any): any {
+    let existDate = false;
+    datatableInputs.forEach((input: any) => {
+      const controlName = this.getInputName(input);
+      if (this.isNumeric(input.columnDisplayType)) {
+        output[input.columnName] = datatableDataValues[controlName] * 1;
+      } else if (this.isDate(input.columnDisplayType)) {
+        output[input.columnName] = this.dateUtils.formatDate(datatableDataValues[controlName], dateFormat);
+        existDate = true;
+      } else {
+        output[input.columnName] = datatableDataValues[controlName];
+      }
+    });
+
+    if (existDate) {
+      output['dateFormat'] = dateFormat;
+    }
+    return output;
+  }
+
+  public isSystemDefined(attr: string): boolean {
+    return this.systemFields.includes(attr);
+  }
+
+  public getName(columnName: any): string {
+    if (columnName && columnName.includes('_cd_')) {
+      return columnName.split('_cd_')[0];
+    }
+    return columnName;
+  }
+
 }
diff --git a/src/app/core/utils/dates.ts b/src/app/core/utils/dates.ts
index 7c7b5076e..1c150210b 100644
--- a/src/app/core/utils/dates.ts
+++ b/src/app/core/utils/dates.ts
@@ -28,6 +28,10 @@ export class Dates {
     }
   }
 
+  public parseDatetime(value: any): Date {
+    return moment(value).toDate();
+  }
+
   public convertToDate(value: any, format: string): Date {
     return moment(value).toDate();
   }
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/datatable-tabs.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/datatable-tabs.component.html
index cd642dc5c..ec7473089 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/datatable-tabs.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/datatable-tabs.component.html
@@ -1,4 +1,9 @@
-<div>
-  <mifosx-multi-row *ngIf="multiRowDatatableFlag" [dataObject]="savingsDatatable"></mifosx-multi-row>
-  <mifosx-single-row *ngIf="!multiRowDatatableFlag" [dataObject]="savingsDatatable"></mifosx-single-row>
+<div class="tab-container mat-typography">
+  <mifosx-entity-datatable-tab
+    entityType="Fixed Deposit"
+    [entityId]="entityId"
+    [multiRowDatatableFlag]="multiRowDatatableFlag"
+    [entityDatatable]="entityDatatable"
+  >
+  </mifosx-entity-datatable-tab>
 </div>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/datatable-tabs.component.ts b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/datatable-tabs.component.ts
index 460799d42..47a9cde11 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/datatable-tabs.component.ts
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/datatable-tabs.component.ts
@@ -11,9 +11,9 @@ import { ActivatedRoute } from '@angular/router';
   styleUrls: ['./datatable-tabs.component.scss']
 })
 export class DatatableTabsComponent {
-
+  entityId: string;
   /** Savings Datatable */
-  savingsDatatable: any;
+  entityDatatable: any;
   /** Multi Row Datatable Flag */
   multiRowDatatableFlag: boolean;
 
@@ -22,9 +22,11 @@ export class DatatableTabsComponent {
    * @param {ActivatedRoute} route Activated Route.
    */
   constructor(private route: ActivatedRoute) {
+    this.entityId = this.route.parent.parent.snapshot.paramMap.get('fixedDepositAccountId');
+
     this.route.data.subscribe((data: { savingsDatatable: any }) => {
-      this.savingsDatatable = data.savingsDatatable;
-      this.multiRowDatatableFlag = this.savingsDatatable.columnHeaders[0].columnName === 'id' ? true : false;
+      this.entityDatatable = data.savingsDatatable;
+      this.multiRowDatatableFlag = this.entityDatatable.columnHeaders[0].columnName === 'id' ? true : false;
     });
   }
 
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/multi-row/multi-row.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/multi-row/multi-row.component.html
deleted file mode 100644
index c339f8643..000000000
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/multi-row/multi-row.component.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<div class="tab-container mat-typography">
-
-  <div fxLayout="row" fxLayoutAlign="start">
-    <div class="m-b-10">
-      <h3>{{datatableName}}</h3>
-    </div>
-    <div class="action-button m-b-5" fxLayoutGap="10px">
-      <span *mifosxHasPermission="'CREATE_' + datatableName">
-        <button mat-raised-button color="primary" (click)="add()">
-          <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
-        </button>
-      </span>
-      <span *mifosxHasPermission="'DELETE_' + datatableName">
-        <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="showDeleteBotton">
-          <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete All
-        </button>
-      </span>
-    </div>
-  </div>
-
-  <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>
-    </ng-container>
-
-    <tr mat-header-row *matHeaderRowDef="datatableColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: datatableColumns;"></tr>
-
-  </table>
-
-</div>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/multi-row/multi-row.component.scss b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/multi-row/multi-row.component.scss
deleted file mode 100644
index 6fa6a5f4e..000000000
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/multi-row/multi-row.component.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.tab-container {
-  padding: 1%;
-  margin: 1%;
-  .action-button{
-    margin-left: auto;
-  }
-  table {
-    width: 100%;
-  }
-}
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/multi-row/multi-row.component.spec.ts b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/multi-row/multi-row.component.spec.ts
deleted file mode 100644
index dd46589d8..000000000
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/multi-row/multi-row.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MultiRowComponent } from './multi-row.component';
-
-describe('MultiRowComponent', () => {
-  let component: MultiRowComponent;
-  let fixture: ComponentFixture<MultiRowComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ MultiRowComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MultiRowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/multi-row/multi-row.component.ts b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/multi-row/multi-row.component.ts
deleted file mode 100644
index c1b07715a..000000000
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/multi-row/multi-row.component.ts
+++ /dev/null
@@ -1,187 +0,0 @@
-/** Angular Imports */
-import { Component, OnChanges, OnInit, Input, ViewChild } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { MatTable } from '@angular/material/table';
-import { MatDialog } from '@angular/material/dialog';
-
-/** Custom Dialogs */
-import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
-import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
-
-/** Custom Models */
-import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
-import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
-import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
-import { CheckboxBase } from 'app/shared/form-dialog/formfield/model/checkbox-base';
-import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
-
-/** Custom Services */
-import { SavingsService } from 'app/savings/savings.service';
-import { SettingsService } from 'app/settings/settings.service';
-import { Dates } from 'app/core/utils/dates';
-
-/**
- * Savings Account Multi Row Data Tables
- */
-@Component({
-  selector: 'mifosx-multi-row',
-  templateUrl: './multi-row.component.html',
-  styleUrls: ['./multi-row.component.scss']
-})
-export class MultiRowComponent implements OnInit, OnChanges {
-
-  /** Data Object */
-  @Input() dataObject: any;
-
-  /** Data Table Name */
-  datatableName: string;
-  /** Data Table Columns */
-  datatableColumns: string[] = [];
-  /** Data Table Data */
-  datatableData: any;
-  /** Account Id */
-  accountId: string;
-  /** Toggle button visibility */
-  showDeleteBotton: boolean;
-
-  /** Data Table Reference */
-  @ViewChild('dataTable', { static: true }) dataTableRef: MatTable<Element>;
-
-  /**
-   * Fetches savings account Id from parent route params.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Dates} dateUtils Date Utils.
-   * @param {SavingsService} savingsService Savingss Service.
-   * @param {MatDialog} dialog Mat Dialog.
-   * @param {SettingsService} settingsService Settings Service.
-   */
-  constructor(private route: ActivatedRoute,
-              private dateUtils: Dates,
-              private savingsService: SavingsService,
-              private dialog: MatDialog,
-              private settingsService: SettingsService) {
-    this.accountId = this.route.parent.parent.snapshot.paramMap.get('fixedDepositAccountId');
-  }
-
-  /**
-   * Updates related variables on changes to dataObject.
-   */
-  ngOnChanges() {
-    this.datatableColumns = this.dataObject.columnHeaders.map((columnHeader: any) => {
-      return columnHeader.columnName;
-    });
-    this.datatableData = this.dataObject.data;
-    this.showDeleteBotton = this.datatableData[0] ? true : false;
-  }
-
-  /**
-   * Fetches data table name from route params.
-   * subscription is required due to asynchronicity.
-   */
-  ngOnInit() {
-    this.route.params.subscribe((routeParams: any) => {
-      this.datatableName = routeParams.datatableName;
-    });
-  }
-
-  /**
-   * Adds a new row to the given multi row data table.
-   */
-  add() {
-    let dataTableEntryObject: any = { locale: this.settingsService.language.code };
-    const dateTransformColumns: string[] = [];
-    const columns = this.dataObject.columnHeaders.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'savings_account_id'));
-    });
-    const formfields: FormfieldBase[] = columns.map((column: any) => {
-      switch (column.columnDisplayType) {
-        case 'INTEGER':
-        case 'STRING':
-        case 'DECIMAL':
-        case 'TEXT': return new InputBase({
-          controlName: column.columnName,
-          label: column.columnName,
-          value: '',
-          type: (column.columnDisplayType === 'INTEGER' || column.columnDisplayType === 'DECIMAL') ? 'number' : 'text',
-          required: (column.isColumnNullable) ? false : true
-        });
-        case 'BOOLEAN': return new CheckboxBase({
-          controlName: column.columnName,
-          label: column.columnName,
-          value: '',
-          type: 'checkbox',
-          required: (column.isColumnNullable) ? false : true
-        });
-        case 'CODELOOKUP': return new SelectBase({
-          controlName: column.columnName,
-          label: column.columnName,
-          value: '',
-          options: { label: 'value', value: 'id', data: column.columnValues },
-          required: (column.isColumnNullable) ? false : true
-        });
-        case 'DATE': {
-          dateTransformColumns.push(column.columnName);
-          dataTableEntryObject.dateFormat = this.settingsService.dateFormat;
-          return new DatepickerBase({
-            controlName: column.columnName,
-            label: column.columnName,
-            value: '',
-            type: 'date',
-            required: (column.isColumnNullable) ? false : true
-          });
-        }
-        case 'DATETIME': {
-          dateTransformColumns.push(column.columnName);
-          dataTableEntryObject.dateFormat = 'yyyy-MM-dd HH:mm';
-          return new DatepickerBase({
-            controlName: column.columnName,
-            label: column.columnName,
-            value: '',
-            type: 'datetime-local',
-            required: (column.isColumnNullable) ? false : true
-          });
-        }
-      }
-    });
-    const data = {
-      title: 'Add ' + this.datatableName,
-      formfields: formfields
-    };
-    const addDialogRef = this.dialog.open(FormDialogComponent, { data });
-    addDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.savingsService.addSavingsDatatableEntry(this.accountId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.savingsService.getSavingsDatatable(this.accountId, this.datatableName).subscribe((dataObject: any) => {
-            this.datatableData = dataObject.data;
-            this.dataTableRef.renderRows();
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Deletes all rows of the given multi row data table.
-   */
-  delete() {
-    const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `the contents of ${this.datatableName}` }
-    });
-    deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.delete) {
-        this.savingsService.deleteDatatableContent(this.accountId, this.datatableName).subscribe(() => {
-          this.savingsService.getSavingsDatatable(this.accountId, this.datatableName).subscribe((dataObject: any) => {
-            this.datatableData = dataObject.data;
-            this.showDeleteBotton = false;
-            this.dataTableRef.renderRows();
-           });
-        });
-      }
-    });
-  }
-
-}
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/single-row/single-row.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/single-row/single-row.component.html
deleted file mode 100644
index c2536b86a..000000000
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/single-row/single-row.component.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<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>
-  </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>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/single-row/single-row.component.scss b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/single-row/single-row.component.scss
deleted file mode 100644
index 63d2cfc9e..000000000
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/single-row/single-row.component.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.tab-container {
-  padding: 1%;
-  margin: 1%;
-  .delete-button {
-    margin-left: 1%;
-  }
-}
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/single-row/single-row.component.spec.ts b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/single-row/single-row.component.spec.ts
deleted file mode 100644
index 8aece650c..000000000
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/single-row/single-row.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SingleRowComponent } from './single-row.component';
-
-describe('SingleRowComponent', () => {
-  let component: SingleRowComponent;
-  let fixture: ComponentFixture<SingleRowComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SingleRowComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SingleRowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/single-row/single-row.component.ts b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/single-row/single-row.component.ts
deleted file mode 100644
index 47bebb335..000000000
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/single-row/single-row.component.ts
+++ /dev/null
@@ -1,210 +0,0 @@
-/** Angular Imports */
-import { Component, Input, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { MatDialog } from '@angular/material/dialog';
-
-/** Custom Components */
-import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
-import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
-
-/** Custom Models */
-import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
-import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
-import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
-import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
-import { CheckboxBase } from 'app/shared/form-dialog/formfield/model/checkbox-base';
-
-/** Custom Services */
-import { SavingsService } from 'app/savings/savings.service';
-import { SettingsService } from 'app/settings/settings.service';
-import { Dates } from 'app/core/utils/dates';
-
-
-/**
- * Savings Account Single Row Data Tables
- */
-@Component({
-  selector: 'mifosx-single-row',
-  templateUrl: './single-row.component.html',
-  styleUrls: ['./single-row.component.scss']
-})
-export class SingleRowComponent implements OnInit {
-
-  /** Data Object */
-  @Input() dataObject: any;
-
-  /** Data Table Name */
-  datatableName: string;
-  /** Account Id */
-  accountId: string;
-
-  /**
-   * Fetches savings account Id from parent route params.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Dates} dateUtils Date Utils.
-   * @param {SavingsService} savingsService Savingss Service.
-   * @param {MatDialog} dialog Mat Dialog.
-   * @param {SettingsService} settingsService Settings Service.
-   */
-  constructor(private route: ActivatedRoute,
-              private dateUtils: Dates,
-              private dialog: MatDialog,
-              private savingsService: SavingsService,
-              private settingsService: SettingsService) {
-    this.accountId = this.route.parent.parent.snapshot.paramMap.get('fixedDepositAccountId');
-  }
-
-  /**
-   * Fetches data table name from route params.
-   * subscription is required due to asynchronicity.
-   */
-  ngOnInit() {
-    this.route.params.subscribe((routeParams: any) => {
-      this.datatableName = routeParams.datatableName;
-    });
-  }
-
-  /**
-   * Creates a new instance of the given single row data table.
-   */
-  add() {
-    let dataTableEntryObject: any = { locale: this.settingsService.language.code };
-    const dateTransformColumns: string[] = [];
-    const columns = this.dataObject.columnHeaders.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'savings_account_id'));
-    });
-    const formfields: FormfieldBase[] = this.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
-    const data = {
-      title: 'Add ' + this.datatableName,
-      formfields: formfields
-    };
-    const addDialogRef = this.dialog.open(FormDialogComponent, { data });
-    addDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.savingsService.addSavingsDatatableEntry(this.accountId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.savingsService.getSavingsDatatable(this.accountId, this.datatableName).subscribe((dataObject: any) => {
-            this.dataObject = dataObject;
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Edits the current instance of single row data table.
-   */
-  edit() {
-    let dataTableEntryObject: any = { locale: this.settingsService.language.code };
-    const dateTransformColumns: string[] = [];
-    const columns = this.dataObject.columnHeaders.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'savings_account_id'));
-    });
-    let formfields: FormfieldBase[] = this.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
-    formfields = formfields.map((formfield: FormfieldBase, index: number) => {
-      formfield.value = (this.dataObject.data[0].row[index + 1]) ? this.dataObject.data[0].row[index + 1] : '';
-      return formfield;
-    });
-    const data = {
-      title: 'Edit ' + this.datatableName,
-      layout: { addButtonText: 'Confirm' },
-      formfields: formfields
-    };
-    const editDialogRef = this.dialog.open(FormDialogComponent, { data });
-    editDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.savingsService.editSavingsDatatableEntry(this.accountId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.savingsService.getSavingsDatatable(this.accountId, this.datatableName).subscribe((dataObject: any) => {
-            this.dataObject = dataObject;
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Deletes the current instance of single row data table.
-   */
-  delete() {
-    const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `the contents of ${this.datatableName}` }
-    });
-    deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.delete) {
-        this.savingsService.deleteDatatableContent(this.accountId, this.datatableName)
-          .subscribe(() => {
-            this.savingsService.getSavingsDatatable(this.accountId, this.datatableName).subscribe((dataObject: any) => {
-              this.dataObject = dataObject;
-            });
-          });
-      }
-    });
-  }
-
-  /**
-   * Maps API response to data table form fields.
-   * @param {any} columns Data Table Columns.
-   * @param {string[]} dateTransformColumns Columns transformed with Date Utils.
-   * @param {any} dataTableEntryObject Additional data table details.
-   */
-  getFormfields(columns: any, dateTransformColumns: string[], dataTableEntryObject: any) {
-    return columns.map((column: any) => {
-      switch (column.columnDisplayType) {
-        case 'INTEGER':
-        case 'STRING':
-        case 'DECIMAL':
-        case 'TEXT': return new InputBase({
-          controlName: column.columnName,
-          label: column.columnName,
-          value: '',
-          type: (column.columnDisplayType === 'INTEGER' || column.columnDisplayType === 'DECIMAL') ? 'number' : 'text',
-          required: (column.isColumnNullable) ? false : true
-        });
-        case 'BOOLEAN': return new CheckboxBase({
-          controlName: column.columnName,
-          label: column.columnName,
-          value: '',
-          type: 'checkbox',
-          required: (column.isColumnNullable) ? false : true
-        });
-        case 'CODELOOKUP': return new SelectBase({
-          controlName: column.columnName,
-          label: column.columnName,
-          value: '',
-          options: { label: 'value', value: 'id', data: column.columnValues },
-          required: (column.isColumnNullable) ? false : true
-        });
-        case 'DATE': {
-          dateTransformColumns.push(column.columnName);
-          dataTableEntryObject.dateFormat = this.settingsService.dateFormat;
-          return new DatepickerBase({
-            controlName: column.columnName,
-            label: column.columnName,
-            value: '',
-            type: 'date',
-            required: (column.isColumnNullable) ? false : true
-          });
-        }
-        case 'DATETIME': {
-          dateTransformColumns.push(column.columnName);
-          dataTableEntryObject.dateFormat = 'yyyy-MM-dd HH:mm';
-          return new DatepickerBase({
-            controlName: column.columnName,
-            label: column.columnName,
-            value: '',
-            type: 'datetime-local',
-            required: (column.isColumnNullable) ? false : true
-          });
-        }
-      }
-    });
-  }
-
-}
diff --git a/src/app/deposits/fixed-deposits/fixed-deposits.module.ts b/src/app/deposits/fixed-deposits/fixed-deposits.module.ts
index 1e14b2096..606a041d6 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposits.module.ts
+++ b/src/app/deposits/fixed-deposits/fixed-deposits.module.ts
@@ -14,8 +14,6 @@ import { ChargesTabComponent } from './fixed-deposit-account-view/charges-tab/ch
 import { StandingInstructionsTabComponent } from './fixed-deposit-account-view/standing-instructions-tab/standing-instructions-tab.component';
 import { InterestRateChartTabComponent } from './fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component';
 import { DatatableTabsComponent } from './fixed-deposit-account-view/datatable-tabs/datatable-tabs.component';
-import { MultiRowComponent } from './fixed-deposit-account-view/datatable-tabs/multi-row/multi-row.component';
-import { SingleRowComponent } from './fixed-deposit-account-view/datatable-tabs/single-row/single-row.component';
 import { FixedDepositsAccountActionsComponent } from './fixed-deposits-account-actions/fixed-deposits-account-actions.component';
 import { ApproveFixedDepositsAccountComponent } from './fixed-deposits-account-actions/approve-fixed-deposits-account/approve-fixed-deposits-account.component';
 import { RejectFixedDepositsAccountComponent } from './fixed-deposits-account-actions/reject-fixed-deposits-account/reject-fixed-deposits-account.component';
@@ -54,8 +52,6 @@ import { EditFixedDepositAccountComponent } from './edit-fixed-deposit-account/e
     StandingInstructionsTabComponent,
     InterestRateChartTabComponent,
     DatatableTabsComponent,
-    MultiRowComponent,
-    SingleRowComponent,
     FixedDepositsAccountActionsComponent,
     ApproveFixedDepositsAccountComponent,
     RejectFixedDepositsAccountComponent,
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/datatable-tabs.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/datatable-tabs.component.html
index 9c0757115..69e9a35e9 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/datatable-tabs.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/datatable-tabs.component.html
@@ -1,4 +1,9 @@
-<div>
-  <mifosx-multi-row *ngIf="multiRowDatatableFlag" [dataObject]="savingsDatatable"></mifosx-multi-row>
-  <mifosx-single-row *ngIf="!multiRowDatatableFlag" [dataObject]="savingsDatatable"></mifosx-single-row>
-</div>
\ No newline at end of file
+<div class="tab-container mat-typography">
+  <mifosx-entity-datatable-tab
+    entityType="Recurring Deposit"
+    [entityId]="entityId"
+    [multiRowDatatableFlag]="multiRowDatatableFlag"
+    [entityDatatable]="entityDatatable"
+  >
+  </mifosx-entity-datatable-tab>
+</div>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/datatable-tabs.component.ts b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/datatable-tabs.component.ts
index 460799d42..deba9410e 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/datatable-tabs.component.ts
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/datatable-tabs.component.ts
@@ -11,9 +11,9 @@ import { ActivatedRoute } from '@angular/router';
   styleUrls: ['./datatable-tabs.component.scss']
 })
 export class DatatableTabsComponent {
-
+  entityId: string;
   /** Savings Datatable */
-  savingsDatatable: any;
+  entityDatatable: any;
   /** Multi Row Datatable Flag */
   multiRowDatatableFlag: boolean;
 
@@ -22,9 +22,11 @@ export class DatatableTabsComponent {
    * @param {ActivatedRoute} route Activated Route.
    */
   constructor(private route: ActivatedRoute) {
+    this.entityId = this.route.parent.parent.snapshot.paramMap.get('recurringDepositAccountId');
+
     this.route.data.subscribe((data: { savingsDatatable: any }) => {
-      this.savingsDatatable = data.savingsDatatable;
-      this.multiRowDatatableFlag = this.savingsDatatable.columnHeaders[0].columnName === 'id' ? true : false;
+      this.entityDatatable = data.savingsDatatable;
+      this.multiRowDatatableFlag = this.entityDatatable.columnHeaders[0].columnName === 'id' ? true : false;
     });
   }
 
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/multi-row/multi-row.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/multi-row/multi-row.component.html
deleted file mode 100644
index c339f8643..000000000
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/multi-row/multi-row.component.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<div class="tab-container mat-typography">
-
-  <div fxLayout="row" fxLayoutAlign="start">
-    <div class="m-b-10">
-      <h3>{{datatableName}}</h3>
-    </div>
-    <div class="action-button m-b-5" fxLayoutGap="10px">
-      <span *mifosxHasPermission="'CREATE_' + datatableName">
-        <button mat-raised-button color="primary" (click)="add()">
-          <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
-        </button>
-      </span>
-      <span *mifosxHasPermission="'DELETE_' + datatableName">
-        <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="showDeleteBotton">
-          <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete All
-        </button>
-      </span>
-    </div>
-  </div>
-
-  <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>
-    </ng-container>
-
-    <tr mat-header-row *matHeaderRowDef="datatableColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: datatableColumns;"></tr>
-
-  </table>
-
-</div>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/multi-row/multi-row.component.scss b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/multi-row/multi-row.component.scss
deleted file mode 100644
index 6fa6a5f4e..000000000
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/multi-row/multi-row.component.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.tab-container {
-  padding: 1%;
-  margin: 1%;
-  .action-button{
-    margin-left: auto;
-  }
-  table {
-    width: 100%;
-  }
-}
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/multi-row/multi-row.component.spec.ts b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/multi-row/multi-row.component.spec.ts
deleted file mode 100644
index dd46589d8..000000000
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/multi-row/multi-row.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MultiRowComponent } from './multi-row.component';
-
-describe('MultiRowComponent', () => {
-  let component: MultiRowComponent;
-  let fixture: ComponentFixture<MultiRowComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ MultiRowComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MultiRowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/multi-row/multi-row.component.ts b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/multi-row/multi-row.component.ts
deleted file mode 100644
index b51d9ba41..000000000
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/multi-row/multi-row.component.ts
+++ /dev/null
@@ -1,184 +0,0 @@
-/** Angular Imports */
-import { Component, OnChanges, OnInit, Input, ViewChild } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { MatTable } from '@angular/material/table';
-import { MatDialog } from '@angular/material/dialog';
-
-/** Custom Dialogs */
-import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
-import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
-
-/** Custom Models */
-import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
-import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
-import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
-import { CheckboxBase } from 'app/shared/form-dialog/formfield/model/checkbox-base';
-import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
-
-/** Custom Services */
-import { SavingsService } from 'app/savings/savings.service';
-import { Dates } from 'app/core/utils/dates';
-
-/**
- * Savings Account Multi Row Data Tables
- */
-@Component({
-  selector: 'mifosx-multi-row',
-  templateUrl: './multi-row.component.html',
-  styleUrls: ['./multi-row.component.scss']
-})
-export class MultiRowComponent implements OnInit, OnChanges {
-
-  /** Data Object */
-  @Input() dataObject: any;
-
-  /** Data Table Name */
-  datatableName: string;
-  /** Data Table Columns */
-  datatableColumns: string[] = [];
-  /** Data Table Data */
-  datatableData: any;
-  /** Account Id */
-  accountId: string;
-  /** Toggle button visibility */
-  showDeleteBotton: boolean;
-
-  /** Data Table Reference */
-  @ViewChild('dataTable', { static: true }) dataTableRef: MatTable<Element>;
-
-  /**
-   * Fetches savings account Id from parent route params.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Dates} dateUtils Date Utils.
-   * @param {SavingsService} savingsService Savingss Service.
-   * @param {MatDialog} dialog Mat Dialog.
-   */
-  constructor(private route: ActivatedRoute,
-    private dateUtils: Dates,
-    private savingsService: SavingsService,
-    private dialog: MatDialog) {
-    this.accountId = this.route.parent.parent.snapshot.paramMap.get('recurringDepositAccountId');
-  }
-
-  /**
-   * Updates related variables on changes to dataObject.
-   */
-  ngOnChanges() {
-    this.datatableColumns = this.dataObject.columnHeaders.map((columnHeader: any) => {
-      return columnHeader.columnName;
-    });
-    this.datatableData = this.dataObject.data;
-    this.showDeleteBotton = this.datatableData[0] ? true : false;
-  }
-
-  /**
-   * Fetches data table name from route params.
-   * subscription is required due to asynchronicity.
-   */
-  ngOnInit() {
-    this.route.params.subscribe((routeParams: any) => {
-      this.datatableName = routeParams.datatableName;
-    });
-  }
-
-  /**
-   * Adds a new row to the given multi row data table.
-   */
-  add() {
-    let dataTableEntryObject: any = { locale: 'en' };
-    const dateTransformColumns: string[] = [];
-    const columns = this.dataObject.columnHeaders.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'savings_account_id'));
-    });
-    const formfields: FormfieldBase[] = columns.map((column: any) => {
-      switch (column.columnDisplayType) {
-        case 'INTEGER':
-        case 'STRING':
-        case 'DECIMAL':
-        case 'TEXT': return new InputBase({
-          controlName: column.columnName,
-          label: column.columnName,
-          value: '',
-          type: (column.columnDisplayType === 'INTEGER' || column.columnDisplayType === 'DECIMAL') ? 'number' : 'text',
-          required: (column.isColumnNullable) ? false : true
-        });
-        case 'BOOLEAN': return new CheckboxBase({
-          controlName: column.columnName,
-          label: column.columnName,
-          value: '',
-          type: 'checkbox',
-          required: (column.isColumnNullable) ? false : true
-        });
-        case 'CODELOOKUP': return new SelectBase({
-          controlName: column.columnName,
-          label: column.columnName,
-          value: '',
-          options: { label: 'value', value: 'id', data: column.columnValues },
-          required: (column.isColumnNullable) ? false : true
-        });
-        case 'DATE': {
-          dateTransformColumns.push(column.columnName);
-          dataTableEntryObject.dateFormat = 'yyyy-MM-dd';
-          return new DatepickerBase({
-            controlName: column.columnName,
-            label: column.columnName,
-            value: '',
-            type: 'date',
-            required: (column.isColumnNullable) ? false : true
-          });
-        }
-        case 'DATETIME': {
-          dateTransformColumns.push(column.columnName);
-          dataTableEntryObject.dateFormat = 'yyyy-MM-dd HH:mm';
-          return new DatepickerBase({
-            controlName: column.columnName,
-            label: column.columnName,
-            value: '',
-            type: 'datetime-local',
-            required: (column.isColumnNullable) ? false : true
-          });
-        }
-      }
-    });
-    const data = {
-      title: 'Add ' + this.datatableName,
-      formfields: formfields
-    };
-    const addDialogRef = this.dialog.open(FormDialogComponent, { data });
-    addDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.savingsService.addSavingsDatatableEntry(this.accountId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.savingsService.getSavingsDatatable(this.accountId, this.datatableName).subscribe((dataObject: any) => {
-            this.datatableData = dataObject.data;
-            this.dataTableRef.renderRows();
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Deletes all rows of the given multi row data table.
-   */
-  delete() {
-    const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `the contents of ${this.datatableName}` }
-    });
-    deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.delete) {
-        this.savingsService.deleteDatatableContent(this.accountId, this.datatableName).subscribe(() => {
-          this.savingsService.getSavingsDatatable(this.accountId, this.datatableName).subscribe((dataObject: any) => {
-            this.datatableData = dataObject.data;
-            this.showDeleteBotton = false;
-            this.dataTableRef.renderRows();
-          });
-        });
-      }
-    });
-  }
-
-}
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/single-row/single-row.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/single-row/single-row.component.html
deleted file mode 100644
index c06b9402c..000000000
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/single-row/single-row.component.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<div class="tab-container mat-typography">
-
-  <div>
-
-    <div fxLayout="column" fxFlex="50%" class="tableName">
-      <h3>{{datatableName}}</h3>
-    </div>
-
-    <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>
-        </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>
-      </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>
-
-</div>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/single-row/single-row.component.scss b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/single-row/single-row.component.scss
deleted file mode 100644
index 54136dee3..000000000
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/single-row/single-row.component.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.tab-container {
-  padding: 1%;
-  margin: 1%;
-  .delete-button {
-    margin-left: 1%;
-  }
-}
-
-.tableName {
-    padding-left: 2%;
-}
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/single-row/single-row.component.spec.ts b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/single-row/single-row.component.spec.ts
deleted file mode 100644
index 8aece650c..000000000
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/single-row/single-row.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SingleRowComponent } from './single-row.component';
-
-describe('SingleRowComponent', () => {
-  let component: SingleRowComponent;
-  let fixture: ComponentFixture<SingleRowComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SingleRowComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SingleRowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/single-row/single-row.component.ts b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/single-row/single-row.component.ts
deleted file mode 100644
index ba3bbe844..000000000
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/single-row/single-row.component.ts
+++ /dev/null
@@ -1,210 +0,0 @@
-/** Angular Imports */
-import { Component, Input, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { MatDialog } from '@angular/material/dialog';
-
-/** Custom Components */
-import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
-import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
-import { SettingsService } from 'app/settings/settings.service';
-
-/** Custom Models */
-import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
-import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
-import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
-import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
-import { CheckboxBase } from 'app/shared/form-dialog/formfield/model/checkbox-base';
-
-/** Custom Services */
-import { SavingsService } from 'app/savings/savings.service';
-import { Dates } from 'app/core/utils/dates';
-
-
-/**
- * Savings Account Single Row Data Tables
- */
-@Component({
-  selector: 'mifosx-single-row',
-  templateUrl: './single-row.component.html',
-  styleUrls: ['./single-row.component.scss']
-})
-export class SingleRowComponent implements OnInit {
-
-  /** Data Object */
-  @Input() dataObject: any;
-
-  /** Data Table Name */
-  datatableName: string;
-  /** Account Id */
-  accountId: string;
-
-  /**
-   * Fetches savings account Id from parent route params.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Dates} dateUtils Date Utils.
-   * @param {SavingsService} savingsService Savingss Service.
-   * @param {MatDialog} dialog Mat Dialog.
-   * @param {SettingsService} settingsService Settings Service
-   */
-  constructor(private route: ActivatedRoute,
-    private dateUtils: Dates,
-    private dialog: MatDialog,
-    private savingsService: SavingsService,
-    private settingsService: SettingsService, ) {
-    this.accountId = this.route.parent.parent.snapshot.paramMap.get('recurringDepositAccountId');
-  }
-
-  /**
-   * Fetches data table name from route params.
-   * subscription is required due to asynchronicity.
-   */
-  ngOnInit() {
-    this.route.params.subscribe((routeParams: any) => {
-      this.datatableName = routeParams.datatableName;
-    });
-  }
-
-  /**
-   * Creates a new instance of the given single row data table.
-   */
-  add() {
-    let dataTableEntryObject: any = { locale: this.settingsService.language.code };
-    const dateTransformColumns: string[] = [];
-    const columns = this.dataObject.columnHeaders.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'savings_account_id'));
-    });
-    const formfields: FormfieldBase[] = this.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
-    const data = {
-      title: 'Add ' + this.datatableName,
-      formfields: formfields
-    };
-    const addDialogRef = this.dialog.open(FormDialogComponent, { data });
-    addDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.savingsService.addSavingsDatatableEntry(this.accountId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.savingsService.getSavingsDatatable(this.accountId, this.datatableName).subscribe((dataObject: any) => {
-            this.dataObject = dataObject;
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Edits the current instance of single row data table.
-   */
-  edit() {
-    let dataTableEntryObject: any = { locale: 'en' };
-    const dateTransformColumns: string[] = [];
-    const columns = this.dataObject.columnHeaders.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'savings_account_id'));
-    });
-    let formfields: FormfieldBase[] = this.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
-    formfields = formfields.map((formfield: FormfieldBase, index: number) => {
-      formfield.value = (this.dataObject.data[0].row[index + 1]) ? this.dataObject.data[0].row[index + 1] : '';
-      return formfield;
-    });
-    const data = {
-      title: 'Edit ' + this.datatableName,
-      layout: { addButtonText: 'Confirm' },
-      formfields: formfields
-    };
-    const editDialogRef = this.dialog.open(FormDialogComponent, { data });
-    editDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.savingsService.editSavingsDatatableEntry(this.accountId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.savingsService.getSavingsDatatable(this.accountId, this.datatableName).subscribe((dataObject: any) => {
-            this.dataObject = dataObject;
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Deletes the current instance of single row data table.
-   */
-  delete() {
-    const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `the contents of ${this.datatableName}` }
-    });
-    deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.delete) {
-        this.savingsService.deleteDatatableContent(this.accountId, this.datatableName)
-          .subscribe(() => {
-            this.savingsService.getSavingsDatatable(this.accountId, this.datatableName).subscribe((dataObject: any) => {
-              this.dataObject = dataObject;
-            });
-          });
-      }
-    });
-  }
-
-  /**
-   * Maps API response to data table form fields.
-   * @param {any} columns Data Table Columns.
-   * @param {string[]} dateTransformColumns Columns transformed with Date Utils.
-   * @param {any} dataTableEntryObject Additional data table details.
-   */
-  getFormfields(columns: any, dateTransformColumns: string[], dataTableEntryObject: any) {
-    return columns.map((column: any) => {
-      switch (column.columnDisplayType) {
-        case 'INTEGER':
-        case 'STRING':
-        case 'DECIMAL':
-        case 'TEXT': return new InputBase({
-          controlName: column.columnName,
-          label: column.columnName,
-          value: '',
-          type: (column.columnDisplayType === 'INTEGER' || column.columnDisplayType === 'DECIMAL') ? 'number' : 'text',
-          required: (column.isColumnNullable) ? false : true
-        });
-        case 'BOOLEAN': return new CheckboxBase({
-          controlName: column.columnName,
-          label: column.columnName,
-          value: '',
-          type: 'checkbox',
-          required: (column.isColumnNullable) ? false : true
-        });
-        case 'CODELOOKUP': return new SelectBase({
-          controlName: column.columnName,
-          label: column.columnName,
-          value: '',
-          options: { label: 'value', value: 'id', data: column.columnValues },
-          required: (column.isColumnNullable) ? false : true
-        });
-        case 'DATE': {
-          dateTransformColumns.push(column.columnName);
-          dataTableEntryObject.dateFormat = 'yyyy-MM-dd';
-          return new DatepickerBase({
-            controlName: column.columnName,
-            label: column.columnName,
-            value: '',
-            type: 'date',
-            required: (column.isColumnNullable) ? false : true
-          });
-        }
-        case 'DATETIME': {
-          dateTransformColumns.push(column.columnName);
-          dataTableEntryObject.dateFormat = 'yyyy-MM-dd HH:mm';
-          return new DatepickerBase({
-            controlName: column.columnName,
-            label: column.columnName,
-            value: '',
-            type: 'datetime-local',
-            required: (column.isColumnNullable) ? false : true
-          });
-        }
-      }
-    });
-  }
-
-}
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits.module.ts b/src/app/deposits/recurring-deposits/recurring-deposits.module.ts
index dde12e320..d4a06463c 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits.module.ts
+++ b/src/app/deposits/recurring-deposits/recurring-deposits.module.ts
@@ -14,8 +14,6 @@ import { TransactionsTabComponent } from './recurring-deposits-account-view/tran
 import { StandingInstructionsTabComponent } from './recurring-deposits-account-view/standing-instructions-tab/standing-instructions-tab.component';
 import { ChargesTabComponent } from './recurring-deposits-account-view/charges-tab/charges-tab.component';
 import { DatatableTabsComponent } from './recurring-deposits-account-view/datatable-tabs/datatable-tabs.component';
-import { MultiRowComponent } from './recurring-deposits-account-view/datatable-tabs/multi-row/multi-row.component';
-import { SingleRowComponent } from './recurring-deposits-account-view/datatable-tabs/single-row/single-row.component';
 import { CreateRecurringDepositsAccountComponent } from './create-recurring-deposits-account/create-recurring-deposits-account.component';
 import { RecurringDepositsAccountDetailsStepComponent } from './recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-account-details-step.component';
 import { RecurringDepositsAccountTermsStepComponent } from './recurring-deposits-account-stepper/recurring-deposits-account-terms-step/recurring-deposits-account-terms-step.component';
@@ -60,8 +58,6 @@ import { RecurringDepositConfirmationDialogComponent } from './recurring-deposit
     StandingInstructionsTabComponent,
     ChargesTabComponent,
     DatatableTabsComponent,
-    MultiRowComponent,
-    SingleRowComponent,
     CreateRecurringDepositsAccountComponent,
     RecurringDepositsAccountDetailsStepComponent,
     RecurringDepositsAccountTermsStepComponent,
diff --git a/src/app/groups/groups-view/datatable-tabs/datatable-tabs.component.html b/src/app/groups/groups-view/datatable-tabs/datatable-tabs.component.html
index 3207b7197..67efc8b31 100644
--- a/src/app/groups/groups-view/datatable-tabs/datatable-tabs.component.html
+++ b/src/app/groups/groups-view/datatable-tabs/datatable-tabs.component.html
@@ -1,4 +1,9 @@
-<div>
-  <mifosx-multi-row *ngIf="multiRowDatatableFlag" [dataObject]="groupDatatable"></mifosx-multi-row>
-  <mifosx-single-row *ngIf="!multiRowDatatableFlag" [dataObject]="groupDatatable"></mifosx-single-row>
+<div class="tab-container mat-typography">
+  <mifosx-entity-datatable-tab
+    entityType="Group"
+    [entityId]="entityId"
+    [multiRowDatatableFlag]="multiRowDatatableFlag"
+    [entityDatatable]="entityDatatable"
+  >
+  </mifosx-entity-datatable-tab>
 </div>
diff --git a/src/app/groups/groups-view/datatable-tabs/datatable-tabs.component.ts b/src/app/groups/groups-view/datatable-tabs/datatable-tabs.component.ts
index e4aae10db..6353836cb 100644
--- a/src/app/groups/groups-view/datatable-tabs/datatable-tabs.component.ts
+++ b/src/app/groups/groups-view/datatable-tabs/datatable-tabs.component.ts
@@ -12,8 +12,9 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class DatatableTabsComponent {
 
+  entityId: string;
   /** Group Datatable */
-  groupDatatable: any;
+  entityDatatable: any;
   /** Multi Row Datatable Flag */
   multiRowDatatableFlag: boolean;
 
@@ -22,9 +23,11 @@ export class DatatableTabsComponent {
    * @param {ActivatedRoute} route Activated Route.
    */
   constructor(private route: ActivatedRoute) {
+    this.entityId = this.route.parent.parent.snapshot.paramMap.get('groupId');
+
     this.route.data.subscribe((data: { groupDatatable: any }) => {
-      this.groupDatatable = data.groupDatatable;
-      this.multiRowDatatableFlag = this.groupDatatable.columnHeaders[0].columnName === 'id' ? true : false;
+      this.entityDatatable = data.groupDatatable;
+      this.multiRowDatatableFlag = this.entityDatatable.columnHeaders[0].columnName === 'id' ? true : false;
     });
   }
 
diff --git a/src/app/groups/groups-view/datatable-tabs/multi-row/multi-row.component.scss b/src/app/groups/groups-view/datatable-tabs/multi-row/multi-row.component.scss
deleted file mode 100644
index 6fa6a5f4e..000000000
--- a/src/app/groups/groups-view/datatable-tabs/multi-row/multi-row.component.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.tab-container {
-  padding: 1%;
-  margin: 1%;
-  .action-button{
-    margin-left: auto;
-  }
-  table {
-    width: 100%;
-  }
-}
diff --git a/src/app/groups/groups-view/datatable-tabs/multi-row/multi-row.component.spec.ts b/src/app/groups/groups-view/datatable-tabs/multi-row/multi-row.component.spec.ts
deleted file mode 100644
index dd46589d8..000000000
--- a/src/app/groups/groups-view/datatable-tabs/multi-row/multi-row.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MultiRowComponent } from './multi-row.component';
-
-describe('MultiRowComponent', () => {
-  let component: MultiRowComponent;
-  let fixture: ComponentFixture<MultiRowComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ MultiRowComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MultiRowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
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
deleted file mode 100644
index 9b4f0beb6..000000000
--- a/src/app/groups/groups-view/datatable-tabs/multi-row/multi-row.component.ts
+++ /dev/null
@@ -1,155 +0,0 @@
-/** Angular Imports */
-import { Component, OnChanges, OnInit, Input, ViewChild } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { MatTable } from '@angular/material/table';
-import { MatDialog } from '@angular/material/dialog';
-
-/** Custom Dialogs */
-import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
-import { DeleteDialogComponent } from '../../../../shared/delete-dialog/delete-dialog.component';
-
-/** Custom Models */
-import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
-
-/** Custom Services */
-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
- */
-@Component({
-  selector: 'mifosx-multi-row',
-  templateUrl: './multi-row.component.html',
-  styleUrls: ['./multi-row.component.scss']
-})
-export class MultiRowComponent implements OnInit, OnChanges {
-
-  /** Data Object */
-  @Input() dataObject: any;
-
-  /** Data Table Name */
-  datatableName: string;
-  /** Data Table Columns */
-  datatableColumns: string[] = [];
-  /** Data Table Data */
-  datatableData: any;
-  /** Group Id */
-  groupId: string;
-  /** Toggle button visibility */
-  showDeleteBotton: boolean;
-
-  /** Data Table Reference */
-  @ViewChild('dataTable', { static: true }) dataTableRef: MatTable<Element>;
-
-  /**
-   * Fetches group Id from parent route params.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Dates} dateUtils Date Utils.
-   * @param {GroupsService} groupsService Groups Service.
-   * @param {MatDialog} dialog Mat Dialog.
-   * @param {SettingsService} settingsService SettingsService
-   * @param {Datatables} datatables Datatable utils
-   */
-  constructor(private route: ActivatedRoute,
-              private dateUtils: Dates,
-              private groupsService: GroupsService,
-              private dialog: MatDialog,
-              private settingsService: SettingsService,
-              private datatables: Datatables,
-              private dateFormat: DateFormatPipe,
-              private dateTimeFormat: DatetimeFormatPipe,
-              private numberFormat: DecimalPipe) {
-    this.groupId = this.route.parent.parent.snapshot.paramMap.get('groupId');
-  }
-
-  /**
-   * Updates related variables on changes to dataObject.
-   */
-  ngOnChanges() {
-    this.datatableColumns = this.dataObject.columnHeaders.map((columnHeader: any) => {
-      return columnHeader.columnName;
-    });
-    this.datatableData = this.dataObject.data;
-    this.showDeleteBotton = this.datatableData[0] ? true : false;
-  }
-
-  /**
-   * Fetches data table name from route params.
-   * subscription is required due to asynchronicity.
-   */
-  ngOnInit() {
-    this.route.params.subscribe((routeParams: any) => {
-      this.datatableName = routeParams.datatableName;
-    });
-  }
-
-  /**
-   * Adds a new row to the given multi row data table.
-   */
-  add() {
-    let dataTableEntryObject: any = { locale: this.settingsService.language.code };
-    const dateTransformColumns: string[] = [];
-    const columns = this.dataObject.columnHeaders.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'group_id'));
-    });
-    const formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
-    const data = {
-      title: 'Add ' + this.datatableName,
-      formfields: formfields
-    };
-    const addDialogRef = this.dialog.open(FormDialogComponent, { data });
-    addDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.groupsService.addGroupDatatableEntry(this.groupId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.groupsService.getGroupDatatable(this.groupId, this.datatableName).subscribe((dataObject: any) => {
-            this.datatableData = dataObject.data;
-            this.dataTableRef.renderRows();
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Deletes all rows of the given multi row data table.
-   */
-  delete() {
-    const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `the contents of ${this.datatableName}` }
-    });
-    deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.delete) {
-        this.groupsService.deleteDatatableContent(this.groupId, this.datatableName).subscribe(() => {
-          this.groupsService.getGroupDatatable(this.groupId, this.datatableName).subscribe((dataObject: any) => {
-            this.datatableData = dataObject.data;
-            this.showDeleteBotton = false;
-            this.dataTableRef.renderRows();
-           });
-        });
-      }
-    });
-  }
-
-  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.scss b/src/app/groups/groups-view/datatable-tabs/single-row/single-row.component.scss
deleted file mode 100644
index 63d2cfc9e..000000000
--- a/src/app/groups/groups-view/datatable-tabs/single-row/single-row.component.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.tab-container {
-  padding: 1%;
-  margin: 1%;
-  .delete-button {
-    margin-left: 1%;
-  }
-}
diff --git a/src/app/groups/groups-view/datatable-tabs/single-row/single-row.component.spec.ts b/src/app/groups/groups-view/datatable-tabs/single-row/single-row.component.spec.ts
deleted file mode 100644
index 8aece650c..000000000
--- a/src/app/groups/groups-view/datatable-tabs/single-row/single-row.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SingleRowComponent } from './single-row.component';
-
-describe('SingleRowComponent', () => {
-  let component: SingleRowComponent;
-  let fixture: ComponentFixture<SingleRowComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SingleRowComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SingleRowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/groups/groups-view/datatable-tabs/single-row/single-row.component.ts b/src/app/groups/groups-view/datatable-tabs/single-row/single-row.component.ts
deleted file mode 100644
index 627c956af..000000000
--- a/src/app/groups/groups-view/datatable-tabs/single-row/single-row.component.ts
+++ /dev/null
@@ -1,149 +0,0 @@
-/** Angular Imports */
-import { Component, Input, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { MatDialog } from '@angular/material/dialog';
-
-/** Custom Components */
-import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
-import { DeleteDialogComponent } from '../../../../shared/delete-dialog/delete-dialog.component';
-
-/** Custom Models */
-import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
-
-/** Custom Services */
-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';
-
-/**
- * Groups Single Row Data Tables
- */
-@Component({
-  selector: 'mifosx-single-row',
-  templateUrl: './single-row.component.html',
-  styleUrls: ['./single-row.component.scss']
-})
-export class SingleRowComponent implements OnInit {
-
-  /** Data Object */
-  @Input() dataObject: any;
-
-  /** Data Table Name */
-  datatableName: string;
-  /** Group Id */
-  groupId: string;
-
-  /**
-   * Fetches group Id from parent route params.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Dates} dateUtils Date Utils.
-   * @param {GroupsService} groupsService Groups Service.
-   * @param {MatDialog} dialog Mat Dialog.
-   * @param {SettingsService} settingsService SettingsService
-   * @param {Datatables} datatables Datatable utils
-   */
-  constructor(private route: ActivatedRoute,
-              private dateUtils: Dates,
-              private dialog: MatDialog,
-              private groupsService: GroupsService,
-              private settingsService: SettingsService,
-              private datatables: Datatables) {
-    this.groupId = this.route.parent.parent.snapshot.paramMap.get('groupId');
-  }
-
-  /**
-   * Fetches data table name from route params.
-   * subscription is required due to asynchronicity.
-   */
-  ngOnInit() {
-    this.route.params.subscribe((routeParams: any) => {
-      this.datatableName = routeParams.datatableName;
-    });
-  }
-
-  /**
-   * Creates a new instance of the given single row data table.
-   */
-  add() {
-    let dataTableEntryObject: any = { locale: this.settingsService.language.code };
-    const dateTransformColumns: string[] = [];
-    const columns = this.dataObject.columnHeaders.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'group_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
-    });
-    const formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
-    const data = {
-      title: 'Add ' + this.datatableName,
-      formfields: formfields
-    };
-    const addDialogRef = this.dialog.open(FormDialogComponent, { data });
-    addDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.groupsService.addGroupDatatableEntry(this.groupId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.groupsService.getGroupDatatable(this.groupId, this.datatableName).subscribe((dataObject: any) => {
-            this.dataObject = dataObject;
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Edits the current instance of single row data table.
-   */
-  edit() {
-    let dataTableEntryObject: any = { locale: 'en' };
-    const dateTransformColumns: string[] = [];
-    const columns = this.dataObject.columnHeaders.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'group_id'));
-    });
-    let formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
-    formfields = formfields.map((formfield: FormfieldBase, index: number) => {
-      formfield.value = (this.dataObject.data[0].row[index + 1]) ? this.dataObject.data[0].row[index + 1] : '';
-      return formfield;
-    });
-    const data = {
-      title: 'Edit ' + this.datatableName,
-      layout: { addButtonText: 'Confirm' },
-      formfields: formfields
-    };
-    const editDialogRef = this.dialog.open(FormDialogComponent, { data });
-    editDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.groupsService.editGroupDatatableEntry(this.groupId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.groupsService.getGroupDatatable(this.groupId, this.datatableName).subscribe((dataObject: any) => {
-            this.dataObject = dataObject;
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Deletes the current instance of single row data table.
-   */
-  delete() {
-    const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `the contents of ${this.datatableName}` }
-    });
-    deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.delete) {
-        this.groupsService.deleteDatatableContent(this.groupId, this.datatableName)
-          .subscribe(() => {
-            this.groupsService.getGroupDatatable(this.groupId, this.datatableName).subscribe((dataObject: any) => {
-              this.dataObject = dataObject;
-            });
-          });
-      }
-    });
-  }
-
-}
diff --git a/src/app/groups/groups.module.ts b/src/app/groups/groups.module.ts
index c88357818..eb568ff84 100644
--- a/src/app/groups/groups.module.ts
+++ b/src/app/groups/groups.module.ts
@@ -15,8 +15,6 @@ import { NotesTabComponent } from './groups-view/notes-tab/notes-tab.component';
 import { CommitteeTabComponent } from './groups-view/committee-tab/committee-tab.component';
 import { CreateGroupComponent } from './create-group/create-group.component';
 import { DatatableTabsComponent } from './groups-view/datatable-tabs/datatable-tabs.component';
-import { SingleRowComponent } from './groups-view/datatable-tabs/single-row/single-row.component';
-import { MultiRowComponent } from './groups-view/datatable-tabs/multi-row/multi-row.component';
 import { AddRoleComponent } from './groups-view/add-role/add-role.component';
 import { UnassignRoleDialogComponent } from './groups-view/custom-dialogs/unassign-role-dialog/unassign-role-dialog.component';
 import { GroupActionsComponent } from './groups-view/group-actions/group-actions.component';
@@ -52,8 +50,6 @@ import { GroupTransferClientsComponent } from './groups-view/group-actions/group
     CommitteeTabComponent,
     CreateGroupComponent,
     DatatableTabsComponent,
-    SingleRowComponent,
-    MultiRowComponent,
     AddRoleComponent,
     UnassignRoleDialogComponent,
     GroupActionsComponent,
diff --git a/src/app/loans/loans-routing.module.ts b/src/app/loans/loans-routing.module.ts
index 29e43a6cc..4dc189c6e 100644
--- a/src/app/loans/loans-routing.module.ts
+++ b/src/app/loans/loans-routing.module.ts
@@ -53,7 +53,6 @@ import { GLIMLoanTemplateResolver } from './common-resolvers/glim-loan-template.
 import { GroupViewResolver } from 'app/groups/common-resolvers/group-view.resolver';
 import { LoanDelinquencyTagsResolver } from './common-resolvers/loan-delinquency-tags.resolver';
 import { LoanDelinquencyTagsTabComponent } from './loans-view/loan-delinquency-tags-tab/loan-delinquency-tags-tab.component';
-import { RescheduleLoanComponent } from 'app/tasks/checker-inbox-and-tasks-tabs/reschedule-loan/reschedule-loan.component';
 import { LoanReschedulesResolver } from './common-resolvers/loan-reschedules.resolver';
 import { RescheduleLoanTabComponent } from './loans-view/reschedule-loan-tab/reschedule-loan-tab.component';
 
@@ -72,248 +71,246 @@ const routes: Routes = [
         }
       },
       {
-      path: ':loanId',
-      data: { title: extract('Loan View'), routeParamBreadcrumb: 'loanId' },
-      resolve: {
-        loanDetailsData: LoanDetailsResolver
-      },
-      children: [
-        {
-          path: '',
-          component: LoansViewComponent,
-          resolve: {
-            loanDetailsData: LoanDetailsResolver,
-            loanDatatables: LoanDatatablesResolver,
+        path: ':loanId',
+        component: LoansViewComponent,
+        data: { title: extract('Loan View'), routeParamBreadcrumb: 'loanId' },
+        resolve: {
+          loanDetailsData: LoanDetailsResolver,
+          loanDatatables: LoanDatatablesResolver
+        },
+        children: [
+          {
+            path: '',
+            redirectTo: 'general',
+            pathMatch: 'full'
           },
-          children: [
-            {
-              path: 'general',
-              component: GeneralTabComponent,
-              data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false }
-            },
-            {
-              path: 'accountdetail',
-              component: AccountDetailsComponent,
-              data: { title: extract('Account Detail'), breadcrumb: 'Account Detail', routeParamBreadcrumb: false }
-            },
-            {
-              path: 'original-schedule',
-              component: OriginalScheduleTabComponent,
-              data: { title: extract('Original Schedule'), breadcrumb: 'Original Schedule', routeParamBreadcrumb: false },
-            },
-            {
-              path: 'repayment-schedule',
-              component: RepaymentScheduleTabComponent,
-              data: { title: extract('Repayment Schedule'), breadcrumb: 'Repayment Schedule', routeParamBreadcrumb: false },
-            },
-            {
-              path: 'transactions',
-              data: { title: extract('Loans Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
-              children: [
-                {
-                  path: '',
-                  component: TransactionsTabComponent
+          {
+            path: 'general',
+            component: GeneralTabComponent,
+            data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false }
+          },
+          {
+            path: 'accountdetail',
+            component: AccountDetailsComponent,
+            data: { title: extract('Account Detail'), breadcrumb: 'Account Detail', routeParamBreadcrumb: false }
+          },
+          {
+            path: 'original-schedule',
+            component: OriginalScheduleTabComponent,
+            data: { title: extract('Original Schedule'), breadcrumb: 'Original Schedule', routeParamBreadcrumb: false },
+          },
+          {
+            path: 'repayment-schedule',
+            component: RepaymentScheduleTabComponent,
+            data: { title: extract('Repayment Schedule'), breadcrumb: 'Repayment Schedule', routeParamBreadcrumb: false },
+          },
+          {
+            path: 'transactions',
+            data: { title: extract('Loans Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
+            children: [
+              {
+                path: '',
+                component: TransactionsTabComponent
 
-                },
-                {
-                  path: 'export',
-                  component: ExportTransactionsComponent
-                }
-              ]
-            },
-            {
-              path: 'delinquencytags',
-              data: { title: extract('Loans Delinquency Tags'), breadcrumb: 'Delinquency Tags', routeParamBreadcrumb: false },
-              resolve: {
-                loanDelinquencyTagsData: LoanDelinquencyTagsResolver
               },
-              children: [
-                {
-                  path: '',
-                  component: LoanDelinquencyTagsTabComponent
-                },
-              ]
-            },
-            {
-              path: 'loan-reschedules',
-              data: {},
-              resolve: {
-                loanRescheduleData: LoanReschedulesResolver
-              },
-              children: [
-                {
-                  path: '',
-                  component: RescheduleLoanTabComponent
-                }
-              ]
-            },
-            {
-              path: 'loan-collateral',
-              component: LoanCollateralTabComponent,
-              data: { title: extract('Loan Collateral Details'), breadcrumb: 'Loan Collateral Details', routeParamBreadcrumb: false },
-            },
-            {
-              path: 'loan-tranche-details',
-              component: LoanTrancheDetailsComponent,
-              data: { title: extract('Loan Tranche Details'), breadcrumb: 'Loan Tranche Details', routeParamBreadcrumb: false },
-            },
-            {
-              path: 'overdue-charges',
-              component: OverdueChargesTabComponent,
-              data: { title: extract('Overdue Charges'), breadcrumb: 'Overdue Charges', routeParamBreadcrumb: false }
-            },
-            {
-              path: 'floating-interest-rates',
-              component: FloatingInterestRatesComponent,
-              data: { title: extract('Floating Interest Rates'), breadcrumb: 'Floating Interest Rates', routeParamBreadcrumb: false },
-            },
-            {
-              path: 'charges',
-              data: { title: extract('Loans Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false },
-              component: ChargesTabComponent,
-            },
-            {
-              path: 'loan-documents',
-              component: LoanDocumentsTabComponent,
-              data: { title: extract('Loan Documents'), breadcrumb: 'Loan Documents', routeParamBreadcrumb: false },
-              resolve: {
-                loanDocuments: LoanDocumentsResolver
-              },
-            },
-            {
-              path: 'notes',
-              component: NotesTabComponent,
-              data: { title: extract('Notes'), breadcrumb: 'Notes', routeParamBreadcrumb: false },
-              resolve: {
-                loanNotes: LoanNotesResolver
-              },
-            },
-            {
-              path: 'standing-instruction',
-              component: StandingInstructionsTabComponent,
-              data: { title: extract('Standing Instructions'), breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false }
-            },
-            {
-              path: 'datatables',
-              children: [{
-                path: ':datatableName',
-                component: DatatableTabComponent,
-                data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
-                resolve: {
-                  loanDatatable: LoanDatatableResolver
-                }
-              }]
-            },
-          ],
-        },
-        {
-          path: 'transactions',
-          data: { title: extract('Loans Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
-          resolve: {
-            loanDetailsAssociationData: LoanDetailsResolver
-          },
-          children: [
-            {
-              path: '',
-              redirectTo: '../transactions', pathMatch: 'prefix'
-            },
-            {
-              path: ':id',
-              data: { routeParamBreadcrumb: 'id' },
-              children: [
-                {
-                  path: '',
-                  component: ViewTransactionComponent,
-                  resolve: {
-                    loansAccountTransaction: LoansAccountTransactionResolver
-                  }
-                },
-                {
-                  path: 'edit',
-                  component: EditTransactionComponent,
-                  data: { breadcrumb: 'Edit', routeParamBreadcrumb: false },
-                  resolve: {
-                    loansAccountTransactionTemplate: LoansAccountTransactionTemplateResolver
-                  }
-                },
-                {
-                  path: 'reciept',
-                  component: ViewRecieptComponent,
-                  data: { breadcrumb: 'Reciept', routeParamBreadcrumb: false },
-                  resolve: {
-                    loansTransactionReciept: LoansTransactionRecieptResolver
-                  }
-                }
-              ]
-            }
-          ]
-        },
-        {
-          path: 'charges',
-          data: { title: extract('Loans Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false },
-          children: [
-            {
-              path: '',
-              redirectTo: '../charges', pathMatch: 'prefix'
-            },
-            {
-              path: ':id',
-              data: { routeParamBreadcrumb: 'id' },
-              component: ViewChargeComponent,
-              resolve: {
-                loansAccountCharge: LoansAccountChargeResolver,
-                loanDetailsData: LoanDetailsResolver
+              {
+                path: 'export',
+                component: ExportTransactionsComponent
               }
+            ]
+          },
+          {
+            path: 'delinquencytags',
+            data: { title: extract('Loans Delinquency Tags'), breadcrumb: 'Delinquency Tags', routeParamBreadcrumb: false },
+            resolve: {
+              loanDelinquencyTagsData: LoanDelinquencyTagsResolver
+            },
+            children: [
+              {
+                path: '',
+                component: LoanDelinquencyTagsTabComponent
+              },
+            ]
+          },
+          {
+            path: 'loan-reschedules',
+            data: {},
+            resolve: {
+              loanRescheduleData: LoanReschedulesResolver
+            },
+            children: [
+              {
+                path: '',
+                component: RescheduleLoanTabComponent
+              }
+            ]
+          },
+          {
+            path: 'loan-collateral',
+            component: LoanCollateralTabComponent,
+            data: { title: extract('Loan Collateral Details'), breadcrumb: 'Loan Collateral Details', routeParamBreadcrumb: false },
+          },
+          {
+            path: 'loan-tranche-details',
+            component: LoanTrancheDetailsComponent,
+            data: { title: extract('Loan Tranche Details'), breadcrumb: 'Loan Tranche Details', routeParamBreadcrumb: false },
+          },
+          {
+            path: 'overdue-charges',
+            component: OverdueChargesTabComponent,
+            data: { title: extract('Overdue Charges'), breadcrumb: 'Overdue Charges', routeParamBreadcrumb: false }
+          },
+          {
+            path: 'floating-interest-rates',
+            component: FloatingInterestRatesComponent,
+            data: { title: extract('Floating Interest Rates'), breadcrumb: 'Floating Interest Rates', routeParamBreadcrumb: false },
+          },
+          {
+            path: 'charges',
+            data: { title: extract('Loans Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false },
+            component: ChargesTabComponent,
+          },
+          {
+            path: 'loan-documents',
+            component: LoanDocumentsTabComponent,
+            data: { title: extract('Loan Documents'), breadcrumb: 'Loan Documents', routeParamBreadcrumb: false },
+            resolve: {
+              loanDocuments: LoanDocumentsResolver
+            },
+          },
+          {
+            path: 'notes',
+            component: NotesTabComponent,
+            data: { title: extract('Notes'), breadcrumb: 'Notes', routeParamBreadcrumb: false },
+            resolve: {
+              loanNotes: LoanNotesResolver
+            },
+          },
+          {
+            path: 'standing-instruction',
+            component: StandingInstructionsTabComponent,
+            data: { title: extract('Standing Instructions'), breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false }
+          },
+          {
+            path: 'datatables',
+            children: [{
+              path: ':datatableName',
+              component: DatatableTabComponent,
+              data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
+              resolve: {
+                loanDatatable: LoanDatatableResolver
+              }
+            }]
+          },
+        ],
+      },
+      {
+        path: 'transactions',
+        data: { title: extract('Loans Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
+        resolve: {
+          loanDetailsAssociationData: LoanDetailsResolver
+        },
+        children: [
+          {
+            path: '',
+            redirectTo: '../transactions', pathMatch: 'prefix'
+          },
+          {
+            path: ':id',
+            data: { routeParamBreadcrumb: 'id' },
+            children: [
+              {
+                path: '',
+                component: ViewTransactionComponent,
+                resolve: {
+                  loansAccountTransaction: LoansAccountTransactionResolver
+                }
+              },
+              {
+                path: 'edit',
+                component: EditTransactionComponent,
+                data: { breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                resolve: {
+                  loansAccountTransactionTemplate: LoansAccountTransactionTemplateResolver
+                }
+              },
+              {
+                path: 'reciept',
+                component: ViewRecieptComponent,
+                data: { breadcrumb: 'Reciept', routeParamBreadcrumb: false },
+                resolve: {
+                  loansTransactionReciept: LoansTransactionRecieptResolver
+                }
+              }
+            ]
+          }
+        ]
+      },
+      {
+        path: 'charges',
+        data: { title: extract('Loans Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false },
+        children: [
+          {
+            path: '',
+            redirectTo: '../charges', pathMatch: 'prefix'
+          },
+          {
+            path: ':id',
+            data: { routeParamBreadcrumb: 'id' },
+            component: ViewChargeComponent,
+            resolve: {
+              loansAccountCharge: LoansAccountChargeResolver,
+              loanDetailsData: LoanDetailsResolver
             }
-          ]
-        },
-        {
-          path: 'actions/:action',
-          component: LoanAccountActionsComponent,
-          data: { title: extract('Loan Account Actions'), breadcrumb: 'action', routeParamBreadcrumb: 'action' },
-          resolve: {
-            actionButtonData: LoanActionButtonResolver
           }
-        },
-        {
-          path: 'transfer-funds',
-          loadChildren: () => import('../account-transfers/account-transfers.module').then(m => m.AccountTransfersModule)
-        },
-        {
-          path: 'edit-loans-account',
-          data: { title: extract('Modify Loans Account'), breadcrumb: 'Modify Loans Account', routeParamBreadcrumb: 'Edit' },
-          component: EditLoansAccountComponent,
-          resolve: {
-            loansAccountAndTemplate: LoansAccountAndTemplateResolver
-          }
-        },
-      ]
-    },
-    {
-      path: 'glim-account',
-      children: [
-        {
-          path: 'create',
-          data: { title: extract('Create GLIM Application'), breadcrumb: 'Create GLIM Application'},
-          component: CreateGlimAccountComponent,
-          resolve: {
-            loansAccountTemplate: GLIMLoanTemplateResolver,
-            gsimData: GSIMAccountsResolver,
-            groupsData: GroupViewResolver,
-          },
-        },
-        {
-          path: ':glimId',
-          data: { title: extract('GSIM Account View'), routeParamBreadcrumb: 'savingAccountId'},
-          component: GlimAccountComponent,
-          resolve: {
-            glimData: GLIMViewResolver,
-            groupsData: GroupAccountsResolver
-          },
+        ]
+      },
+      {
+        path: 'actions/:action',
+        component: LoanAccountActionsComponent,
+        data: { title: extract('Loan Account Actions'), breadcrumb: 'action', routeParamBreadcrumb: 'action' },
+        resolve: {
+          actionButtonData: LoanActionButtonResolver
         }
-      ]
-    }]
+      },
+      {
+        path: 'transfer-funds',
+        loadChildren: () => import('../account-transfers/account-transfers.module').then(m => m.AccountTransfersModule)
+      },
+      {
+        path: 'edit-loans-account',
+        data: { title: extract('Modify Loans Account'), breadcrumb: 'Modify Loans Account', routeParamBreadcrumb: 'Edit' },
+        component: EditLoansAccountComponent,
+        resolve: {
+          loansAccountAndTemplate: LoansAccountAndTemplateResolver
+        }
+      },
+    ]
   },
+  {
+    path: 'glim-account',
+    children: [
+      {
+        path: 'create',
+        data: { title: extract('Create GLIM Application'), breadcrumb: 'Create GLIM Application' },
+        component: CreateGlimAccountComponent,
+        resolve: {
+          loansAccountTemplate: GLIMLoanTemplateResolver,
+          gsimData: GSIMAccountsResolver,
+          groupsData: GroupViewResolver,
+        },
+      },
+      {
+        path: ':glimId',
+        data: { title: extract('GSIM Account View'), routeParamBreadcrumb: 'savingAccountId' },
+        component: GlimAccountComponent,
+        resolve: {
+          glimData: GLIMViewResolver,
+          groupsData: GroupAccountsResolver
+        },
+      }
+    ]
+  }
 ];
 @NgModule({
   imports: [RouterModule.forChild(routes)],
diff --git a/src/app/loans/loans-view/datatable-tab/datatable-tab.component.html b/src/app/loans/loans-view/datatable-tab/datatable-tab.component.html
index 44256d984..2f5a9cfae 100644
--- a/src/app/loans/loans-view/datatable-tab/datatable-tab.component.html
+++ b/src/app/loans/loans-view/datatable-tab/datatable-tab.component.html
@@ -1,4 +1,9 @@
-<div>
-  <mifosx-multi-row *ngIf="multiRowDatatableFlag" [dataObject]="loanDatatable"></mifosx-multi-row>
-  <mifosx-single-row *ngIf="!multiRowDatatableFlag" [dataObject]="loanDatatable"></mifosx-single-row>
+<div class="tab-container mat-typography">
+  <mifosx-entity-datatable-tab
+    entityType="Loan Account"
+    [entityId]="entityId"
+    [multiRowDatatableFlag]="multiRowDatatableFlag"
+    [entityDatatable]="entityDatatable"
+  >
+  </mifosx-entity-datatable-tab>
 </div>
diff --git a/src/app/loans/loans-view/datatable-tab/datatable-tab.component.ts b/src/app/loans/loans-view/datatable-tab/datatable-tab.component.ts
index abf48329b..4d0b17848 100644
--- a/src/app/loans/loans-view/datatable-tab/datatable-tab.component.ts
+++ b/src/app/loans/loans-view/datatable-tab/datatable-tab.component.ts
@@ -8,20 +8,23 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class DatatableTabComponent {
 
-    /** Loan Datatable */
-    loanDatatable: any;
-    /** Multi Row Datatable Flag */
-    multiRowDatatableFlag: boolean;
+  entityId: string;
+  /** Loan Datatable */
+  entityDatatable: any;
+  /** Multi Row Datatable Flag */
+  multiRowDatatableFlag: boolean;
 
-    /**
-     * Fetches data table data from `resolve`
-     * @param {ActivatedRoute} route Activated Route.
-     */
-    constructor(private route: ActivatedRoute) {
-      this.route.data.subscribe((data: { loanDatatable: any }) => {
-        this.loanDatatable = data.loanDatatable;
-        this.multiRowDatatableFlag = this.loanDatatable.columnHeaders[0].columnName === 'id' ? true : false;
-      });
-    }
+  /**
+   * Fetches data table data from `resolve`
+   * @param {ActivatedRoute} route Activated Route.
+   */
+  constructor(private route: ActivatedRoute) {
+    this.entityId = this.route.parent.parent.snapshot.paramMap.get('loanId');
+
+    this.route.data.subscribe((data: { loanDatatable: any }) => {
+      this.entityDatatable = data.loanDatatable;
+      this.multiRowDatatableFlag = this.entityDatatable.columnHeaders[0].columnName === 'id' ? true : false;
+    });
+  }
 
 }
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
deleted file mode 100644
index e933bf643..000000000
--- a/src/app/loans/loans-view/datatable-tab/single-row/single-row.component.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<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>
-
-  <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/single-row/single-row.component.scss b/src/app/loans/loans-view/datatable-tab/single-row/single-row.component.scss
deleted file mode 100644
index b2f6fe139..000000000
--- a/src/app/loans/loans-view/datatable-tab/single-row/single-row.component.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.tab-container {
-    padding: 1%;
-    margin: 1%;
-    .delete-button {
-        margin-left: 1%;
-    }
-}
-
-.table-name {
-    padding-left: 2%;
-}
diff --git a/src/app/loans/loans-view/datatable-tab/single-row/single-row.component.spec.ts b/src/app/loans/loans-view/datatable-tab/single-row/single-row.component.spec.ts
deleted file mode 100644
index 8aece650c..000000000
--- a/src/app/loans/loans-view/datatable-tab/single-row/single-row.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SingleRowComponent } from './single-row.component';
-
-describe('SingleRowComponent', () => {
-  let component: SingleRowComponent;
-  let fixture: ComponentFixture<SingleRowComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SingleRowComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SingleRowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/loans/loans-view/datatable-tab/single-row/single-row.component.ts b/src/app/loans/loans-view/datatable-tab/single-row/single-row.component.ts
deleted file mode 100644
index 8704075d6..000000000
--- a/src/app/loans/loans-view/datatable-tab/single-row/single-row.component.ts
+++ /dev/null
@@ -1,147 +0,0 @@
-/** Angular Imports */
-import { Component, Input, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { MatDialog } from '@angular/material/dialog';
-
-/** Custom Components */
-import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
-import { DeleteDialogComponent } from '../../../../shared/delete-dialog/delete-dialog.component';
-import { SettingsService } from 'app/settings/settings.service';
-
-/** Custom Models */
-import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
-
-/** Custom Services */
-import { LoansService } from '../../../loans.service';
-import { Dates } from 'app/core/utils/dates';
-import { Datatables } from 'app/core/utils/datatables';
-
-
-@Component({
-  selector: 'mifosx-single-row',
-  templateUrl: './single-row.component.html',
-  styleUrls: ['./single-row.component.scss']
-})
-export class SingleRowComponent implements OnInit {
-
-  /** Data Object */
-  @Input() dataObject: any;
-
-  /** Data Table Name */
-  datatableName: string;
-  /** Loan Id */
-  loanId: string;
-
-  /**
-   * Fetches loan Id from parent route params.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Dates} dateUtils Date Utils.
-   * @param {LoansService} loansService Loans Service.
-   * @param {MatDialog} dialog Mat Dialog.
-   * @param {SettingsService} settingsService Settings Service
-   * @param {Datatables} datatables Datatable utils
-   */
-  constructor(private route: ActivatedRoute,
-              private dateUtils: Dates,
-              private dialog: MatDialog,
-              private loansService: LoansService,
-              private settingsService: SettingsService,
-              private datatables: Datatables) {
-    this.loanId = this.route.parent.parent.snapshot.paramMap.get('loanId');
-  }
-
-  /**
-   * Fetches data table name from route params.
-   * subscription is required due to asynchronicity.
-   */
-  ngOnInit() {
-    this.route.params.subscribe((routeParams: any) => {
-      this.datatableName = routeParams.datatableName;
-    });
-  }
-
-  /**
-   * Creates a new instance of the given single row data table.
-   */
-  add() {
-    let dataTableEntryObject: any = { locale: this.settingsService.language.code };
-    const dateTransformColumns: string[] = [];
-    const columns = this.dataObject.columnHeaders.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'loan_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
-    });
-    const formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
-    const data = {
-      title: 'Add ' + this.datatableName,
-      formfields: formfields
-    };
-    const addDialogRef = this.dialog.open(FormDialogComponent, { data });
-    addDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.loansService.addLoanDatatableEntry(this.loanId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.loansService.getLoanDatatable(this.loanId, this.datatableName).subscribe((dataObject: any) => {
-            this.dataObject = dataObject;
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Edits the current instance of single row data table.
-   */
-  edit() {
-    let dataTableEntryObject: any = { locale: this.settingsService.language.code };
-    const dateTransformColumns: string[] = [];
-    const columns = this.dataObject.columnHeaders.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'loan_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
-    });
-    let formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
-    formfields = formfields.map((formfield: FormfieldBase, index: number) => {
-      formfield.value = (this.dataObject.data[0].row[index + 1]) ? this.dataObject.data[0].row[index + 1] : '';
-      return formfield;
-    });
-    const data = {
-      title: 'Edit ' + this.datatableName,
-      layout: { addButtonText: 'Confirm' },
-      formfields: formfields
-    };
-    const editDialogRef = this.dialog.open(FormDialogComponent, { data });
-    editDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.loansService.editLoanDatatableEntry(this.loanId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.loansService.getLoanDatatable(this.loanId, this.datatableName).subscribe((dataObject: any) => {
-            this.dataObject = dataObject;
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Deletes the current instance of single row data table.
-   */
-  delete() {
-    const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `the contents of ${this.datatableName}` }
-    });
-    deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.delete) {
-        this.loansService.deleteDatatableContent(this.loanId, this.datatableName)
-          .subscribe(() => {
-            this.loansService.getLoanDatatable(this.loanId, this.datatableName).subscribe((dataObject: any) => {
-              this.dataObject = dataObject;
-            });
-          });
-      }
-    });
-  }
-
-}
diff --git a/src/app/loans/loans.module.ts b/src/app/loans/loans.module.ts
index bb01829c1..54fa2b18f 100644
--- a/src/app/loans/loans.module.ts
+++ b/src/app/loans/loans.module.ts
@@ -21,8 +21,6 @@ import { LoanAccountActionsComponent } from './loans-view/loan-account-actions/l
 import { LoansAccountCloseComponent } from './loans-view/loan-account-actions/loans-account-close/loans-account-close.component';
 import { TransactionsTabComponent } from './loans-view/transactions-tab/transactions-tab.component';
 import { DatatableTabComponent } from './loans-view/datatable-tab/datatable-tab.component';
-import { MultiRowComponent } from './loans-view/datatable-tab/multi-row/multi-row.component';
-import { SingleRowComponent } from './loans-view/datatable-tab/single-row/single-row.component';
 import { UndoApprovalComponent } from './loans-view/loan-account-actions/undo-approval/undo-approval.component';
 import { AssignLoanOfficerComponent } from './loans-view/loan-account-actions/assign-loan-officer/assign-loan-officer.component';
 import { ForeclosureComponent } from './loans-view/loan-account-actions/foreclosure/foreclosure.component';
@@ -97,8 +95,6 @@ import { RescheduleLoanTabComponent } from './loans-view/reschedule-loan-tab/res
     LoansAccountCloseComponent,
     TransactionsTabComponent,
     DatatableTabComponent,
-    MultiRowComponent,
-    SingleRowComponent,
     UndoApprovalComponent,
     AssignLoanOfficerComponent,
     ForeclosureComponent,
diff --git a/src/app/organization/offices/common-resolvers/edit-office.resolver.ts b/src/app/organization/offices/common-resolvers/edit-office.resolver.ts
index ec90b70f2..b39dadcb1 100644
--- a/src/app/organization/offices/common-resolvers/edit-office.resolver.ts
+++ b/src/app/organization/offices/common-resolvers/edit-office.resolver.ts
@@ -24,7 +24,7 @@ export class EditOfficeResolver implements Resolve<Object> {
    * @returns {Observable<any>}
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const officeId = route.paramMap.get('id');
+    const officeId = route.paramMap.get('officeId');
     return this.organizationService.getOffice(officeId, true);
   }
 
diff --git a/src/app/organization/offices/common-resolvers/office-datatable.resolver.ts b/src/app/organization/offices/common-resolvers/office-datatable.resolver.ts
index 6b9b4a227..f9bf1eb52 100644
--- a/src/app/organization/offices/common-resolvers/office-datatable.resolver.ts
+++ b/src/app/organization/offices/common-resolvers/office-datatable.resolver.ts
@@ -1,13 +1,11 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
 import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { SystemService } from 'app/system/system.service';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
 
-/** Custom Services */
-import { OrganizationService } from '../../organization.service';
-
 /**
  * Office Datatable data resolver.
  */
@@ -15,18 +13,18 @@ import { OrganizationService } from '../../organization.service';
 export class OfficeDatatableResolver implements Resolve<Object> {
 
   /**
-   * @param {OrganizationService} OrganizationService Organization service.
+   * @param {SystemService} systemService Products service.
    */
-  constructor(private organizationService: OrganizationService) { }
+  constructor(private systemService: SystemService) { }
 
   /**
    * Returns the Office's Datatable data.
    * @returns {Observable<any>}
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const officeId = route.parent.parent.paramMap.get('id');
+    const officeId = route.parent.parent.paramMap.get('officeId');
     const datatableName = route.paramMap.get('datatableName');
-    return this.organizationService.getOfficeDatatable(officeId, datatableName);
+    return this.systemService.getEntityDatatable(officeId, datatableName);
   }
 
 }
diff --git a/src/app/organization/offices/common-resolvers/office-datatables.resolver.ts b/src/app/organization/offices/common-resolvers/office-datatables.resolver.ts
index c05e0b1db..ecc09bf6d 100644
--- a/src/app/organization/offices/common-resolvers/office-datatables.resolver.ts
+++ b/src/app/organization/offices/common-resolvers/office-datatables.resolver.ts
@@ -1,13 +1,11 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
 import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { SystemService } from 'app/system/system.service';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
 
-/** Custom Services */
-import { OrganizationService } from '../../organization.service';
-
 /**
  * Office Datatables data resolver.
  */
@@ -15,16 +13,16 @@ import { OrganizationService } from '../../organization.service';
 export class OfficeDatatablesResolver implements Resolve<Object> {
 
   /**
-   * @param {organizationService} OrganizationService Organization service.
+   * @param {SystemService} systemService Products service.
    */
-  constructor(private organizationService: OrganizationService) { }
+  constructor(private systemService: SystemService) { }
 
   /**
-   * Returns the Office's Datatables data.
+   * Returns the loan product data.
    * @returns {Observable<any>}
    */
-  resolve(): Observable<any> {
-    return this.organizationService.getOfficeDatatables();
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    return this.systemService.getEntityDatatables('m_office');
   }
 
 }
diff --git a/src/app/organization/offices/common-resolvers/office.resolver.ts b/src/app/organization/offices/common-resolvers/office.resolver.ts
index 67e9a93cc..612795ee8 100644
--- a/src/app/organization/offices/common-resolvers/office.resolver.ts
+++ b/src/app/organization/offices/common-resolvers/office.resolver.ts
@@ -24,7 +24,7 @@ export class OfficeResolver implements Resolve<Object> {
    * @returns {Observable<any>}
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const officeId = route.paramMap.get('id');
+    const officeId = route.parent.paramMap.get('officeId');
     return this.organizationService.getOffice(officeId);
   }
 
diff --git a/src/app/organization/offices/view-office/datatable-tabs/datatable-tabs.component.html b/src/app/organization/offices/view-office/datatable-tabs/datatable-tabs.component.html
index ae62fb3f0..25e7da957 100644
--- a/src/app/organization/offices/view-office/datatable-tabs/datatable-tabs.component.html
+++ b/src/app/organization/offices/view-office/datatable-tabs/datatable-tabs.component.html
@@ -1,4 +1,9 @@
-<div>
-  <mifosx-multi-row *ngIf="multiRowDatatableFlag" [dataObject]="officeDatatable"></mifosx-multi-row>
-  <mifosx-single-row *ngIf="!multiRowDatatableFlag" [dataObject]="officeDatatable"></mifosx-single-row>
+<div class="tab-container mat-typography">
+  <mifosx-entity-datatable-tab
+    entityType="Office"
+    [entityId]="entityId"
+    [multiRowDatatableFlag]="multiRowDatatableFlag"
+    [entityDatatable]="entityDatatable"
+  >
+  </mifosx-entity-datatable-tab>
 </div>
diff --git a/src/app/organization/offices/view-office/datatable-tabs/datatable-tabs.component.ts b/src/app/organization/offices/view-office/datatable-tabs/datatable-tabs.component.ts
index 06fab630d..7018954f4 100644
--- a/src/app/organization/offices/view-office/datatable-tabs/datatable-tabs.component.ts
+++ b/src/app/organization/offices/view-office/datatable-tabs/datatable-tabs.component.ts
@@ -11,9 +11,9 @@ import { ActivatedRoute } from '@angular/router';
   styleUrls: ['./datatable-tabs.component.scss']
 })
 export class DatatableTabsComponent {
-
+  entityId: string;
   /** Office Datatable */
-  officeDatatable: any;
+  entityDatatable: any;
   /** Multi Row Datatable Flag */
   multiRowDatatableFlag: boolean;
 
@@ -22,9 +22,11 @@ export class DatatableTabsComponent {
    * @param {ActivatedRoute} route Activated Route.
    */
   constructor(private route: ActivatedRoute) {
+    this.entityId = this.route.parent.parent.snapshot.paramMap.get('officeId');
+
     this.route.data.subscribe((data: { officeDatatable: any }) => {
-      this.officeDatatable = data.officeDatatable;
-      this.multiRowDatatableFlag = this.officeDatatable.columnHeaders[0].columnName === 'id' ? true : false;
+      this.entityDatatable = data.officeDatatable;
+      this.multiRowDatatableFlag = this.entityDatatable.columnHeaders[0].columnName === 'id' ? true : false;
     });
   }
 
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
deleted file mode 100644
index 4825eaf98..000000000
--- a/src/app/organization/offices/view-office/datatable-tabs/multi-row/multi-row.component.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<div class="tab-container mat-typography">
-
-  <div fxLayout="row" fxLayoutAlign="start">
-    <div class="m-b-10">
-      <h3>{{datatableName}}</h3>
-    </div>
-    <div class="action-button m-b-5" fxLayoutGap="10px">
-      <span *mifosxHasPermission="'CREATE_' + datatableName">
-        <button mat-raised-button color="primary" (click)="add()">
-          <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
-        </button>
-      </span>
-      <span *mifosxHasPermission="'DELETE_' + datatableName">
-        <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="showDeleteBotton">
-          <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete All
-        </button>
-      </span>
-    </div>
-  </div>
-
-  <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 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>
diff --git a/src/app/organization/offices/view-office/datatable-tabs/multi-row/multi-row.component.scss b/src/app/organization/offices/view-office/datatable-tabs/multi-row/multi-row.component.scss
deleted file mode 100644
index 6fa6a5f4e..000000000
--- a/src/app/organization/offices/view-office/datatable-tabs/multi-row/multi-row.component.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.tab-container {
-  padding: 1%;
-  margin: 1%;
-  .action-button{
-    margin-left: auto;
-  }
-  table {
-    width: 100%;
-  }
-}
diff --git a/src/app/organization/offices/view-office/datatable-tabs/multi-row/multi-row.component.spec.ts b/src/app/organization/offices/view-office/datatable-tabs/multi-row/multi-row.component.spec.ts
deleted file mode 100644
index dd46589d8..000000000
--- a/src/app/organization/offices/view-office/datatable-tabs/multi-row/multi-row.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MultiRowComponent } from './multi-row.component';
-
-describe('MultiRowComponent', () => {
-  let component: MultiRowComponent;
-  let fixture: ComponentFixture<MultiRowComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ MultiRowComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MultiRowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
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
deleted file mode 100644
index 2fdb50a62..000000000
--- a/src/app/organization/offices/view-office/datatable-tabs/multi-row/multi-row.component.ts
+++ /dev/null
@@ -1,154 +0,0 @@
-/** Angular Imports */
-import { Component, OnChanges, OnInit, Input, ViewChild } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { MatTable } from '@angular/material/table';
-import { MatDialog } from '@angular/material/dialog';
-
-/** Custom Dialogs */
-import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
-import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
-
-/** Custom Models */
-import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
-
-/** Custom Services */
-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
- */
-@Component({
-  selector: 'mifosx-multi-row',
-  templateUrl: './multi-row.component.html',
-  styleUrls: ['./multi-row.component.scss']
-})
-export class MultiRowComponent implements OnInit, OnChanges {
-
-  /** Data Object */
-  @Input() dataObject: any;
-
-  /** Data Table Name */
-  datatableName: string;
-  /** Data Table Columns */
-  datatableColumns: string[] = [];
-  /** Data Table Data */
-  datatableData: any;
-  /** Office Id */
-  officeId: string;
-  /** Toggle button visibility */
-  showDeleteBotton: boolean;
-
-  /** Data Table Reference */
-  @ViewChild('dataTable', { static: true }) dataTableRef: MatTable<Element>;
-
-  /**
-   * Fetches office Id from parent route params.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Dates} dateUtils Date Utils.
-   * @param {OrganizationService} organizationService Organization Service.
-   * @param {SettingsService} settingsService Settings Service.
-   * @param {MatDialog} dialog Mat Dialog.
-   */
-  constructor(private route: ActivatedRoute,
-              private dateUtils: Dates,
-              private organizationService: OrganizationService,
-              private settingsService: SettingsService,
-              private dialog: MatDialog,
-              private datatables: Datatables,
-              private dateFormat: DateFormatPipe,
-              private dateTimeFormat: DatetimeFormatPipe,
-              private numberFormat: DecimalPipe) {
-    this.officeId = this.route.parent.parent.snapshot.paramMap.get('id');
-  }
-
-  /**
-   * Updates related variables on changes to dataObject.
-   */
-  ngOnChanges() {
-    this.datatableColumns = this.dataObject.columnHeaders.map((columnHeader: any) => {
-      return columnHeader.columnName;
-    });
-    this.datatableData = this.dataObject.data;
-    this.showDeleteBotton = this.datatableData[0] ? true : false;
-  }
-
-  /**
-   * Fetches data table name from route params.
-   * subscription is required due to asynchronicity.
-   */
-  ngOnInit() {
-    this.route.params.subscribe((routeParams: any) => {
-      this.datatableName = routeParams.datatableName;
-    });
-  }
-
-  /**
-   * Adds a new row to the given multi row data table.
-   */
-  add() {
-    let dataTableEntryObject: any = { locale: this.settingsService.language.code };
-    const dateTransformColumns: string[] = [];
-    const columns = this.dataObject.columnHeaders.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'office_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
-    });
-    const formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
-    const data = {
-      title: 'Add ' + this.datatableName,
-      formfields: formfields
-    };
-    const addDialogRef = this.dialog.open(FormDialogComponent, { data });
-    addDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.organizationService.addOfficeDatatableEntry(this.officeId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.organizationService.getOfficeDatatable(this.officeId, this.datatableName).subscribe((dataObject: any) => {
-            this.datatableData = dataObject.data;
-            this.dataTableRef.renderRows();
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Deletes all rows of the given multi row data table.
-   */
-  delete() {
-    const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `the contents of ${this.datatableName}` }
-    });
-    deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.delete) {
-        this.organizationService.deleteDatatableContent(this.officeId, this.datatableName).subscribe(() => {
-          this.organizationService.getOfficeDatatable(this.officeId, this.datatableName).subscribe((dataObject: any) => {
-            this.datatableData = dataObject.data;
-            this.showDeleteBotton = false;
-            this.dataTableRef.renderRows();
-           });
-        });
-      }
-    });
-  }
-
-  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
deleted file mode 100644
index e933bf643..000000000
--- a/src/app/organization/offices/view-office/datatable-tabs/single-row/single-row.component.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<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>
-
-  <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/organization/offices/view-office/datatable-tabs/single-row/single-row.component.scss b/src/app/organization/offices/view-office/datatable-tabs/single-row/single-row.component.scss
deleted file mode 100644
index 63d2cfc9e..000000000
--- a/src/app/organization/offices/view-office/datatable-tabs/single-row/single-row.component.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.tab-container {
-  padding: 1%;
-  margin: 1%;
-  .delete-button {
-    margin-left: 1%;
-  }
-}
diff --git a/src/app/organization/offices/view-office/datatable-tabs/single-row/single-row.component.spec.ts b/src/app/organization/offices/view-office/datatable-tabs/single-row/single-row.component.spec.ts
deleted file mode 100644
index 8aece650c..000000000
--- a/src/app/organization/offices/view-office/datatable-tabs/single-row/single-row.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SingleRowComponent } from './single-row.component';
-
-describe('SingleRowComponent', () => {
-  let component: SingleRowComponent;
-  let fixture: ComponentFixture<SingleRowComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SingleRowComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SingleRowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/organization/offices/view-office/datatable-tabs/single-row/single-row.component.ts b/src/app/organization/offices/view-office/datatable-tabs/single-row/single-row.component.ts
deleted file mode 100644
index dfddd5a80..000000000
--- a/src/app/organization/offices/view-office/datatable-tabs/single-row/single-row.component.ts
+++ /dev/null
@@ -1,148 +0,0 @@
-/** Angular Imports */
-import { Component, Input, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { MatDialog } from '@angular/material/dialog';
-
-/** Custom Components */
-import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
-import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
-
-/** Custom Models */
-import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
-
-/** Custom Services */
-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';
-
-/**
- * Offices Single Row Data Tables
- */
-@Component({
-  selector: 'mifosx-single-row',
-  templateUrl: './single-row.component.html',
-  styleUrls: ['./single-row.component.scss']
-})
-export class SingleRowComponent implements OnInit {
-
-  /** Data Object */
-  @Input() dataObject: any;
-
-  /** Data Table Name */
-  datatableName: string;
-  /** Office Id */
-  officeId: string;
-
-  /**
-   * Fetches office Id from parent route params.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Dates} dateUtils Date Utils.
-   * @param {OrganizationService} organizationService Organization Service.
-   * @param {SettingsService} settingsService Settings Service.
-   * @param {MatDialog} dialog Mat Dialog.
-   */
-  constructor(private route: ActivatedRoute,
-              private dateUtils: Dates,
-              private dialog: MatDialog,
-              private organizationService: OrganizationService,
-              private settingsService: SettingsService,
-              private datatables: Datatables) {
-    this.officeId = this.route.parent.parent.snapshot.paramMap.get('id');
-  }
-
-  /**
-   * Fetches data table name from route params.
-   * subscription is required due to asynchronicity.
-   */
-  ngOnInit() {
-    this.route.params.subscribe((routeParams: any) => {
-      this.datatableName = routeParams.datatableName;
-    });
-  }
-
-  /**
-   * Creates a new instance of the given single row data table.
-   */
-  add() {
-    let dataTableEntryObject: any = { locale: this.settingsService.language.code };
-    const dateTransformColumns: string[] = [];
-    const columns = this.dataObject.columnHeaders.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'office_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
-    });
-    const formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
-    const data = {
-      title: 'Add ' + this.datatableName,
-      formfields: formfields
-    };
-    const addDialogRef = this.dialog.open(FormDialogComponent, { data });
-    addDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.organizationService.addOfficeDatatableEntry(this.officeId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.organizationService.getOfficeDatatable(this.officeId, this.datatableName).subscribe((dataObject: any) => {
-            this.dataObject = dataObject;
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Edits the current instance of single row data table.
-   */
-  edit() {
-    let dataTableEntryObject: any = { locale: this.settingsService.language.code };
-    const dateTransformColumns: string[] = [];
-    const columns = this.dataObject.columnHeaders.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'office_id'));
-    });
-    let formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
-    formfields = formfields.map((formfield: FormfieldBase, index: number) => {
-      formfield.value = (this.dataObject.data[0].row[index + 1]) ? this.dataObject.data[0].row[index + 1] : '';
-      return formfield;
-    });
-    const data = {
-      title: 'Edit ' + this.datatableName,
-      layout: { addButtonText: 'Confirm' },
-      formfields: formfields
-    };
-    const editDialogRef = this.dialog.open(FormDialogComponent, { data });
-    editDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.organizationService.editOfficeDatatableEntry(this.officeId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.organizationService.getOfficeDatatable(this.officeId, this.datatableName).subscribe((dataObject: any) => {
-            this.dataObject = dataObject;
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Deletes the current instance of single row data table.
-   */
-  delete() {
-    const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `the contents of ${this.datatableName}` }
-    });
-    deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.delete) {
-        this.organizationService.deleteDatatableContent(this.officeId, this.datatableName)
-          .subscribe(() => {
-            this.organizationService.getOfficeDatatable(this.officeId, this.datatableName).subscribe((dataObject: any) => {
-              this.dataObject = dataObject;
-            });
-          });
-      }
-    });
-  }
-
-}
diff --git a/src/app/organization/offices/view-office/general-tab/general-tab.component.html b/src/app/organization/offices/view-office/general-tab/general-tab.component.html
index d75fdb4d6..000756a88 100644
--- a/src/app/organization/offices/view-office/general-tab/general-tab.component.html
+++ b/src/app/organization/offices/view-office/general-tab/general-tab.component.html
@@ -1,23 +1,42 @@
+
 <div class="tab-container mat-typography">
+  <div fxLayoutAlign="flex-end" class="action-button m-b-20">
+    <span *mifosxHasPermission="'UPDATE_OFFICE'">
+      <button mat-raised-button color="primary" [routerLink]="['edit']">
+        <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
+      </button>
+    </span>
+  </div>
 
-  <mat-list>
+  <div fxLayout="row wrap" fxLayout.lt-md="column">
 
-    <mat-list-item>
-      Parent Office : {{ officeData.parentName ? officeData.parentName : 'N/A' }}
-    </mat-list-item>
+    <div fxFlex="45%" class="mat-body-strong left">
+      Parent Office
+    </div>
+    <div fxFlex="50%" class="right">
+      {{ officeData.parentName ? officeData.parentName : 'N/A' }}
+    </div>
 
-    <mat-list-item>
-      Opened On : {{ officeData.openingDate ? (officeData.openingDate  | dateFormat) : 'Unassigned' }}
-    </mat-list-item>
+    <div fxFlex="45%" class="mat-body-strong left">
+      Opened On
+    </div>
+    <div fxFlex="50%" class="right">
+      {{ officeData.openingDate ? (officeData.openingDate  | dateFormat) : 'Unassigned' }}
+    </div>
 
-    <mat-list-item>
-      Name Decorated : {{ officeData.nameDecorated ? officeData.nameDecorated : 'Unassigned' }}
-    </mat-list-item>
+    <div fxFlex="45%" class="mat-body-strong left">
+      Name Decorated
+    </div>
+    <div fxFlex="50%" class="right">
+      {{ officeData.nameDecorated ? officeData.nameDecorated : 'Unassigned' }}
+    </div>
 
-    <mat-list-item>
-      External Id : {{ officeData.externalId ? officeData.externalId : 'Unassigned' }}
-    </mat-list-item>
-    
-  </mat-list>
+    <div fxFlex="45%" class="mat-body-strong left">
+      External Id
+    </div>
+    <div fxFlex="50%" class="right">
+      {{ officeData.externalId ? officeData.externalId : 'Unassigned' }}
+    </div>
+  </div>
 
 </div>
diff --git a/src/app/organization/offices/view-office/general-tab/general-tab.component.scss b/src/app/organization/offices/view-office/general-tab/general-tab.component.scss
index b40728956..4f173238f 100644
--- a/src/app/organization/offices/view-office/general-tab/general-tab.component.scss
+++ b/src/app/organization/offices/view-office/general-tab/general-tab.component.scss
@@ -1,4 +1,15 @@
 .tab-container {
   padding: 1%;
   margin: 1%;
+  .delete-button {
+      margin-left: 1%;
+  }
+}
+
+.table-name {
+  padding-left: 2%;
+}
+
+.table-data {
+  margin-top: 3px;
 }
diff --git a/src/app/organization/offices/view-office/general-tab/general-tab.component.ts b/src/app/organization/offices/view-office/general-tab/general-tab.component.ts
index 4738d4fb6..e4fbd5a82 100644
--- a/src/app/organization/offices/view-office/general-tab/general-tab.component.ts
+++ b/src/app/organization/offices/view-office/general-tab/general-tab.component.ts
@@ -20,7 +20,7 @@ export class GeneralTabComponent {
    * @param {ActivatedRoute} route Activated Route
    */
   constructor(private route: ActivatedRoute) {
-    this.route.parent.data.subscribe((data: { office: any }) => {
+    this.route.data.subscribe((data: { office: any }) => {
       this.officeData = data.office;
     });
   }
diff --git a/src/app/organization/offices/view-office/view-office.component.html b/src/app/organization/offices/view-office/view-office.component.html
index de4df4cf1..e0cfb8e4b 100644
--- a/src/app/organization/offices/view-office/view-office.component.html
+++ b/src/app/organization/offices/view-office/view-office.component.html
@@ -1,13 +1,5 @@
 <div class="container">
 
-  <div fxLayoutAlign="flex-end" class="action-button m-b-20">
-    <span *mifosxHasPermission="'UPDATE_OFFICE'">
-      <button mat-raised-button color="primary" [routerLink]="['edit']">
-        <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;Edit Office
-      </button>
-    </span>
-  </div>
-
   <mat-card class="office-card">
 
     <mat-card-content>
diff --git a/src/app/organization/organization-routing.module.ts b/src/app/organization/organization-routing.module.ts
index 8ab1c7728..41a7fa5f5 100644
--- a/src/app/organization/organization-routing.module.ts
+++ b/src/app/organization/organization-routing.module.ts
@@ -175,38 +175,38 @@ const routes: Routes = [
               }
             },
             {
-              path: ':id',
-              data: { title: extract('View Office'), routeResolveBreadcrumb: ['office', 'name'] },
+              path: ':officeId',
+              data: { title: extract('View Office'), breadcrumb: 'officeId', routeParamBreadcrumb: 'officeId' },
               component: ViewOfficeComponent,
               resolve: {
                  officeDatatables: OfficeDatatablesResolver,
-                 office: OfficeResolver
               },
               children: [
+                {
+                  path: '',
+                  redirectTo: 'general',
+                  pathMatch: 'full'
+                },
                 {
                   path: 'general',
                   component: GeneralTabComponent,
-                  data: { title: extract('General') },
+                  data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false },
+                  resolve: {
+                    office: OfficeResolver
+                  }
                 },
                 {
                   path: 'datatables',
-                  children: [
-                    {
+                  children: [{
                       path: ':datatableName',
                       component: DatatableTabsComponent,
-                      data: { title: extract('View Data Table') },
+                      data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
                       resolve: {
                         officeDatatable: OfficeDatatableResolver
                       }
                     }
                   ]
-                }
-              ]
-            },
-            {
-              path: ':id',
-              data: { title: extract('View Office'), routeParamBreadcrumb: 'id' },
-              children: [
+                },
                 {
                   path: 'edit',
                   component: EditOfficeComponent,
@@ -217,7 +217,6 @@ const routes: Routes = [
                 }
               ]
             }
-
           ]
         },
         {
diff --git a/src/app/organization/organization.module.ts b/src/app/organization/organization.module.ts
index 6b2c0945e..27be902aa 100644
--- a/src/app/organization/organization.module.ts
+++ b/src/app/organization/organization.module.ts
@@ -39,8 +39,6 @@ import { ViewHolidaysComponent } from './holidays/view-holidays/view-holidays.co
 import { ViewOfficeComponent } from './offices/view-office/view-office.component';
 import { GeneralTabComponent } from './offices/view-office/general-tab/general-tab.component';
 import { DatatableTabsComponent } from './offices/view-office/datatable-tabs/datatable-tabs.component';
-import { SingleRowComponent } from './offices/view-office/datatable-tabs/single-row/single-row.component';
-import { MultiRowComponent } from './offices/view-office/datatable-tabs/multi-row/multi-row.component';
 import { ViewCampaignComponent } from './sms-campaigns/view-campaign/view-campaign.component';
 import { ManageFundsComponent } from './manage-funds/manage-funds.component';
 import { ManageCurrenciesComponent } from './currencies/manage-currencies/manage-currencies.component';
@@ -122,8 +120,6 @@ import { CreateHoliday } from './holidays/create-holiday/create-holiday.service'
     ViewOfficeComponent,
     GeneralTabComponent,
     DatatableTabsComponent,
-    SingleRowComponent,
-    MultiRowComponent,
     ViewCampaignComponent,
     ManageFundsComponent,
     ManageCurrenciesComponent,
diff --git a/src/app/products/loan-products/create-loan-product/create-loan-product.component.html b/src/app/products/loan-products/create-loan-product/create-loan-product.component.html
index 5db925be8..8c5f336f7 100644
--- a/src/app/products/loan-products/create-loan-product/create-loan-product.component.html
+++ b/src/app/products/loan-products/create-loan-product/create-loan-product.component.html
@@ -84,6 +84,14 @@
 
     </mat-step>
 
+    <mat-step *ngFor="let datatable of datatables">
+
+      <ng-template matStepLabel>{{datatable.registeredTableName}}</ng-template>
+
+      <mifosx-loan-product-datatable-step [datatableData]="datatable" #dtloanproduct></mifosx-loan-product-datatable-step>
+
+    </mat-step>
+
     <mat-step state="preview" *ngIf="loanProductFormValid" completed>
 
       <ng-template matStepLabel>PREVIEW</ng-template>
diff --git a/src/app/products/loan-products/create-loan-product/create-loan-product.component.ts b/src/app/products/loan-products/create-loan-product/create-loan-product.component.ts
index 4fff052d3..0dfebc422 100644
--- a/src/app/products/loan-products/create-loan-product/create-loan-product.component.ts
+++ b/src/app/products/loan-products/create-loan-product/create-loan-product.component.ts
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Components */
@@ -13,6 +13,7 @@ import { LoanProductAccountingStepComponent } from '../loan-product-stepper/loan
 /** Custom Services */
 import { ProductsService } from 'app/products/products.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { LoanProductDatatableStepComponent } from '../loan-product-stepper/loan-product-datatable-step/loan-product-datatable-step.component';
 
 @Component({
   selector: 'mifosx-create-loan-product',
@@ -27,6 +28,10 @@ export class CreateLoanProductComponent implements OnInit {
   @ViewChild(LoanProductSettingsStepComponent, { static: true }) loanProductSettingsStep: LoanProductSettingsStepComponent;
   @ViewChild(LoanProductChargesStepComponent, { static: true }) loanProductChargesStep: LoanProductChargesStepComponent;
   @ViewChild(LoanProductAccountingStepComponent, { static: true }) loanProductAccountingStep: LoanProductAccountingStepComponent;
+  /** Get handle on dtloanproduct tags in the template */
+  @ViewChildren('dtloanproduct') loanProductDatatables: QueryList<LoanProductDatatableStepComponent>;
+
+  datatables: any = [];
 
   loanProductsTemplate: any;
   accountingRuleData = ['None', 'Cash', 'Accrual (periodic)', 'Accrual (upfront)'];
@@ -42,8 +47,10 @@ export class CreateLoanProductComponent implements OnInit {
               private productsService: ProductsService,
               private settingsService: SettingsService,
               private router: Router) {
-    this.route.data.subscribe((data: { loanProductsTemplate: any }) => {
+    this.route.data.subscribe((data: { loanProductsTemplate: any, loanProductDatatables: any }) => {
       this.loanProductsTemplate = data.loanProductsTemplate;
+      // this.datatables = data.loanProductDatatables;
+      this.datatables = [];
       const assetAccountData = this.loanProductsTemplate.accountingMappingOptions.assetAccountOptions || [];
       const liabilityAccountData = this.loanProductsTemplate.accountingMappingOptions.liabilityAccountOptions || [];
       this.loanProductsTemplate.accountingMappingOptions.assetAndLiabilityAccountOptions = assetAccountData.concat(liabilityAccountData);
@@ -74,13 +81,21 @@ export class CreateLoanProductComponent implements OnInit {
   }
 
   get loanProductFormValid() {
-    return (
+    let areValids = (
       this.loanProductDetailsForm.valid &&
       this.loanProductCurrencyForm.valid &&
       this.loanProductTermsForm.valid &&
       this.loanProductSettingsForm.valid &&
       this.loanProductAccountingForm.valid
     );
+
+    if (this.datatables.length > 0 && this.loanProductDatatables) {
+      this.loanProductDatatables.forEach((loanProductDatatable: LoanProductDatatableStepComponent) => {
+        areValids = areValids && loanProductDatatable.datatableForm.valid;
+      });
+    }
+
+    return areValids;
   }
 
   get loanProduct() {
@@ -95,7 +110,6 @@ export class CreateLoanProductComponent implements OnInit {
   }
 
   submit() {
-    // TODO: Update once language and date settings are setup
     const dateFormat = this.settingsService.dateFormat;
     const loanProduct = {
       ...this.loanProduct,
@@ -105,6 +119,16 @@ export class CreateLoanProductComponent implements OnInit {
     };
     delete loanProduct.allowAttributeConfiguration;
     delete loanProduct.advancedAccountingRules;
+
+    if (this.datatables.length > 0) {
+      const datatables: any[] = [];
+      this.loanProductDatatables.forEach((loanProductDatatable: LoanProductDatatableStepComponent) => {
+        datatables.push(loanProductDatatable.payload);
+      });
+      loanProduct['datatables'] = datatables;
+    }
+
+
     this.productsService.createLoanProduct(loanProduct)
       .subscribe((response: any) => {
         this.router.navigate(['../', response.resourceId], { relativeTo: this.route });
diff --git a/src/app/products/loan-products/edit-loan-product/loan-product-and-template.resolver.ts b/src/app/products/loan-products/edit-loan-product/loan-product-and-template.resolver.ts
index 83ecf377d..aae194d09 100644
--- a/src/app/products/loan-products/edit-loan-product/loan-product-and-template.resolver.ts
+++ b/src/app/products/loan-products/edit-loan-product/loan-product-and-template.resolver.ts
@@ -24,7 +24,7 @@ export class LoanProductAndTemplateResolver implements Resolve<Object> {
    * @returns {Observable<any>}
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const loanProductId = route.paramMap.get('id');
+    const loanProductId = route.paramMap.get('productId');
     return this.productsService.getLoanProduct(loanProductId, true);
   }
 
diff --git a/src/app/products/loan-products/loan-product-datatable.resolver.spec.ts b/src/app/products/loan-products/loan-product-datatable.resolver.spec.ts
new file mode 100644
index 000000000..67a3a453e
--- /dev/null
+++ b/src/app/products/loan-products/loan-product-datatable.resolver.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LoanProductDatatableResolver } from './loan-product-datatable.resolver';
+
+describe('LoanProductDatatableResolver', () => {
+  let resolver: LoanProductDatatableResolver;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    resolver = TestBed.inject(LoanProductDatatableResolver);
+  });
+
+  it('should be created', () => {
+    expect(resolver).toBeTruthy();
+  });
+});
diff --git a/src/app/products/loan-products/loan-product-datatable.resolver.ts b/src/app/products/loan-products/loan-product-datatable.resolver.ts
new file mode 100644
index 000000000..443762861
--- /dev/null
+++ b/src/app/products/loan-products/loan-product-datatable.resolver.ts
@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { SystemService } from 'app/system/system.service';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoanProductDatatableResolver implements Resolve<boolean> {
+
+  /**
+   * @param {SystemService} systemService Products service.
+   */
+  constructor(private systemService: SystemService) { }
+
+  /**
+   * Returns the loan product data.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const productId = route.parent.parent.paramMap.get('productId');
+    const datatableName = route.paramMap.get('datatableName');
+    return this.systemService.getEntityDatatable(productId, datatableName);
+  }
+
+}
diff --git a/src/app/products/loan-products/loan-product-datatables.resolver.spec.ts b/src/app/products/loan-products/loan-product-datatables.resolver.spec.ts
new file mode 100644
index 000000000..73246c822
--- /dev/null
+++ b/src/app/products/loan-products/loan-product-datatables.resolver.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LoanProductDatatablesResolver } from './loan-product-datatables.resolver';
+
+describe('LoanProductDatatablesResolver', () => {
+  let resolver: LoanProductDatatablesResolver;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    resolver = TestBed.inject(LoanProductDatatablesResolver);
+  });
+
+  it('should be created', () => {
+    expect(resolver).toBeTruthy();
+  });
+});
diff --git a/src/app/products/loan-products/loan-product-datatables.resolver.ts b/src/app/products/loan-products/loan-product-datatables.resolver.ts
new file mode 100644
index 000000000..3ac77bee4
--- /dev/null
+++ b/src/app/products/loan-products/loan-product-datatables.resolver.ts
@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { SystemService } from 'app/system/system.service';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoanProductDatatablesResolver implements Resolve<boolean> {
+
+  /**
+   * @param {SystemService} systemService Products service.
+   */
+  constructor(private systemService: SystemService) { }
+
+  /**
+   * Returns the loan product data.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    return this.systemService.getEntityDatatables('m_product_loan');
+  }
+}
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-datatable-step/loan-product-datatable-step.component.html b/src/app/products/loan-products/loan-product-stepper/loan-product-datatable-step/loan-product-datatable-step.component.html
new file mode 100644
index 000000000..980711b99
--- /dev/null
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-datatable-step/loan-product-datatable-step.component.html
@@ -0,0 +1,51 @@
+<form [formGroup]="datatableForm">
+
+  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+    <div *ngFor="let datatableInput of datatableInputs" fxFlex="48%">
+      <mat-form-field fxFlex="100%" *ngIf="!isBoolean(datatableInput.columnDisplayType)">
+
+        <mat-label>{{getInputName(datatableInput)}}</mat-label>
+
+        <mat-select *ngIf="isDropdown(datatableInput.columnDisplayType)" formControlName="{{datatableInput.controlName}}">
+          <mat-option *ngFor="let code of datatableInput.columnValues" [value]="code.id">
+            {{ code.value }}
+          </mat-option>
+        </mat-select>
+
+        <input matInput type="number" *ngIf="isNumeric(datatableInput.columnDisplayType)"
+        formControlName="{{datatableInput.controlName}}">
+
+        <input matInput *ngIf="isString(datatableInput.columnDisplayType)"
+        formControlName="{{datatableInput.controlName}}">
+
+        <textarea matInput *ngIf="isText(datatableInput.columnDisplayType)"
+        formControlName="{{datatableInput.controlName}}"></textarea>
+
+        <span *ngIf="isDate(datatableInput.columnDisplayType)" (click)="datePicker.open()">
+          <input matInput [matDatepicker]="datePicker" formControlName="{{datatableInput.controlName}}" class="date-picker">
+          <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
+          <mat-datepicker #datePicker></mat-datepicker>
+        </span>
+      </mat-form-field>
+
+      <mat-checkbox *ngIf="isBoolean(datatableInput.columnDisplayType)" formControlName="{{datatableInput.controlName}}"
+        labelPosition="before" class="margin-v">
+        {{getInputName(datatableInput)}}
+      </mat-checkbox>
+    </div>
+
+  </div>
+
+  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+    <button mat-raised-button matStepperPrevious disabled>
+      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      Previous
+    </button>
+    <button mat-raised-button matStepperNext>
+      Next&nbsp;&nbsp;
+      <fa-icon icon="arrow-right"></fa-icon>
+    </button>
+  </div>
+
+</form>
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-datatable-step/loan-product-datatable-step.component.scss b/src/app/products/loan-products/loan-product-stepper/loan-product-datatable-step/loan-product-datatable-step.component.scss
new file mode 100644
index 000000000..8817bcc31
--- /dev/null
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-datatable-step/loan-product-datatable-step.component.scss
@@ -0,0 +1,7 @@
+.date-picker {
+  width: 92%;
+}
+
+mat-checkbox {
+  margin-top: 30px;
+}
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-datatable-step/loan-product-datatable-step.component.spec.ts b/src/app/products/loan-products/loan-product-stepper/loan-product-datatable-step/loan-product-datatable-step.component.spec.ts
new file mode 100644
index 000000000..69315379d
--- /dev/null
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-datatable-step/loan-product-datatable-step.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoanProductDatatableStepComponent } from './loan-product-datatable-step.component';
+
+describe('LoanProductDatatableStepComponent', () => {
+  let component: LoanProductDatatableStepComponent;
+  let fixture: ComponentFixture<LoanProductDatatableStepComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LoanProductDatatableStepComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoanProductDatatableStepComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-datatable-step/loan-product-datatable-step.component.ts b/src/app/products/loan-products/loan-product-stepper/loan-product-datatable-step/loan-product-datatable-step.component.ts
new file mode 100644
index 000000000..277104b46
--- /dev/null
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-datatable-step/loan-product-datatable-step.component.ts
@@ -0,0 +1,82 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { Datatables } from 'app/core/utils/datatables';
+import { SettingsService } from 'app/settings/settings.service';
+
+@Component({
+  selector: 'mifosx-loan-product-datatable-step',
+  templateUrl: './loan-product-datatable-step.component.html',
+  styleUrls: ['./loan-product-datatable-step.component.scss']
+})
+export class LoanProductDatatableStepComponent implements OnInit {
+  /** Input Fields Data */
+  @Input() datatableData: any;
+  /** Create Input Form */
+  datatableForm: FormGroup;
+
+  datatableInputs: any = [];
+
+  constructor(private formBuilder: FormBuilder,
+    private settingsService: SettingsService,
+    private datatableService: Datatables) { }
+
+  ngOnInit(): void {
+    this.datatableInputs = this.datatableService.filterSystemColumns(this.datatableData.columnHeaderData);
+    const inputItems: any = {};
+    this.datatableInputs.forEach((input: any) => {
+      input.controlName = this.getInputName(input);
+      if (!input.isColumnNullable) {
+        if (this.isNumeric(input.columnDisplayType)) {
+          inputItems[input.controlName] = new FormControl(0, [Validators.required]);
+        } else {
+          inputItems[input.controlName] = new FormControl('', [Validators.required]);
+        }
+      } else {
+        inputItems[input.controlName] = new FormControl('');
+      }
+    });
+    this.datatableForm = this.formBuilder.group(inputItems);
+  }
+
+  getInputName(datatableInput: any): string {
+    return this.datatableService.getInputName(datatableInput);
+  }
+
+  isNumeric(columnType: string) {
+    return this.datatableService.isNumeric(columnType);
+  }
+
+  isDate(columnType: string) {
+    return this.datatableService.isDate(columnType);
+  }
+
+  isBoolean(columnType: string) {
+    return this.datatableService.isBoolean(columnType);
+  }
+
+  isDropdown(columnType: string) {
+    return this.datatableService.isDropdown(columnType);
+  }
+
+  isString(columnType: string) {
+    return this.datatableService.isString(columnType);
+  }
+
+  isText(columnType: string) {
+    return this.datatableService.isText(columnType);
+  }
+
+  get payload(): any {
+    const dateFormat = this.settingsService.dateFormat;
+    const datatableDataValues = this.datatableForm.value;
+
+    const data = this.datatableService.buildPayload(this.datatableInputs, datatableDataValues, dateFormat,
+      { locale: this.settingsService.language.code });
+
+    return {
+      registeredTableName: this.datatableData.registeredTableName,
+      data: data
+    };
+  }
+
+}
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.ts b/src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.ts
index 971d4b39d..963d88fc3 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.ts
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.ts
@@ -84,8 +84,7 @@ export class LoanProductSettingsStepComponent implements OnInit {
       'holdGuaranteeFunds': this.loanProductsTemplate.holdGuaranteeFunds,
       'multiDisburseLoan': this.loanProductsTemplate.multiDisburseLoan,
       'maxTrancheCount': this.loanProductsTemplate.maxTrancheCount,
-      'outstandingLoanBalance': this.loanProductsTemplate.outstandingLoanBalance,
-      'delinquencyBucketId': this.loanProductsTemplate.delinquencyBucket.id
+      'outstandingLoanBalance': this.loanProductsTemplate.outstandingLoanBalance
     });
 
     if (this.loanProductsTemplate.isInterestRecalculationEnabled) {
diff --git a/src/app/products/loan-products/loan-product.resolver.ts b/src/app/products/loan-products/loan-product.resolver.ts
index de963c772..d8f634e0d 100644
--- a/src/app/products/loan-products/loan-product.resolver.ts
+++ b/src/app/products/loan-products/loan-product.resolver.ts
@@ -24,8 +24,8 @@ export class LoanProductResolver implements Resolve<Object> {
    * @returns {Observable<any>}
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const id = route.paramMap.get('id');
-    return this.productsService.getLoanProduct(id);
+    const productId = route.parent.paramMap.get('productId');
+    return this.productsService.getLoanProduct(productId);
   }
 
 }
diff --git a/src/app/products/loan-products/view-loan-product/datatable-tab/datatable-tab.component.html b/src/app/products/loan-products/view-loan-product/datatable-tab/datatable-tab.component.html
new file mode 100644
index 000000000..d3d139204
--- /dev/null
+++ b/src/app/products/loan-products/view-loan-product/datatable-tab/datatable-tab.component.html
@@ -0,0 +1,9 @@
+<div class="tab-container mat-typography">
+  <mifosx-entity-datatable-tab
+    entityType="Loan Product"
+    [entityId]="entityId"
+    [multiRowDatatableFlag]="multiRowDatatableFlag"
+    [entityDatatable]="entityDatatable"
+  >
+  </mifosx-entity-datatable-tab>
+</div>
diff --git a/src/app/products/loan-products/view-loan-product/datatable-tab/datatable-tab.component.scss b/src/app/products/loan-products/view-loan-product/datatable-tab/datatable-tab.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/products/loan-products/view-loan-product/datatable-tab/datatable-tab.component.spec.ts b/src/app/products/loan-products/view-loan-product/datatable-tab/datatable-tab.component.spec.ts
new file mode 100644
index 000000000..f9a212eff
--- /dev/null
+++ b/src/app/products/loan-products/view-loan-product/datatable-tab/datatable-tab.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DatatableTabComponent } from './datatable-tab.component';
+
+describe('DatatableTabComponent', () => {
+  let component: DatatableTabComponent;
+  let fixture: ComponentFixture<DatatableTabComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DatatableTabComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DatatableTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/products/loan-products/view-loan-product/datatable-tab/datatable-tab.component.ts b/src/app/products/loan-products/view-loan-product/datatable-tab/datatable-tab.component.ts
new file mode 100644
index 000000000..a03d7555d
--- /dev/null
+++ b/src/app/products/loan-products/view-loan-product/datatable-tab/datatable-tab.component.ts
@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'mifosx-datatable-tab',
+  templateUrl: './datatable-tab.component.html',
+  styleUrls: ['./datatable-tab.component.scss']
+})
+export class DatatableTabComponent implements OnInit {
+  entityId: string;
+  entityDatatable: any;
+  multiRowDatatableFlag: boolean;
+
+  constructor(private route: ActivatedRoute) {
+    this.entityId = this.route.parent.parent.snapshot.paramMap.get('productId');
+
+    this.route.data.subscribe((data: { loanProductDatatable: any }) => {
+      this.entityDatatable = data.loanProductDatatable;
+      this.multiRowDatatableFlag = this.entityDatatable.columnHeaders[0].columnName === 'id' ? true : false;
+    });
+
+  }
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.html b/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.html
new file mode 100644
index 000000000..9fc8eeda7
--- /dev/null
+++ b/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.html
@@ -0,0 +1,799 @@
+<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
+  <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_LOANPRODUCT'">
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
+  </button>
+</div>
+
+<div class="tab-container mat-typography">
+
+  <h3 class="mat-h3" fxFlexFill>Details</h3>
+
+  <mat-divider [inset]="true"></mat-divider>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Name:</span>
+    <span fxFlex="60%"><b>{{ loanProduct.name }}</b></span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Short Name:</span>
+    <span fxFlex="60%">{{ loanProduct.shortName }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loanProduct.fundId">
+    <span fxFlex="40%">Fund Name:</span>
+    <span fxFlex="60%">{{ loanProduct.fundName }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Include in Customer Loan Counter:</span>
+    <span fxFlex="60%">{{ loanProduct.includeInBorrowerCycle ? 'Yes' : 'No' }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loanProduct.startDate">
+    <span fxFlex="40%">Start Date:</span>
+    <span fxFlex="60%">{{ loanProduct.startDate | dateFormat }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loanProduct.closeDate">
+    <span fxFlex="40%">Close Date:</span>
+    <span fxFlex="60%">{{ loanProduct.closeDate | dateFormat }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loanProduct.description">
+    <span fxFlex="40%">Description:</span>
+    <span fxFlex="60%">{{ loanProduct.description }}</span>
+  </div>
+
+  <h3 class="mat-h3" fxFlexFill>Currency</h3>
+
+  <mat-divider [inset]="true"></mat-divider>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Currency:</span>
+    <span fxFlex="60%">{{ loanProduct.currency.name }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Decimal Places:</span>
+    <span fxFlex="60%">{{ loanProduct.currency.decimalPlaces }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Currency in multiples of:</span>
+    <span fxFlex="60%">{{ loanProduct.currency.inMultiplesOf }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Installment in multiples of:</span>
+    <span fxFlex="60%">{{ loanProduct.installmentAmountInMultiplesOf }}</span>
+  </div>
+
+  <h3 class="mat-h3" fxFlexFill>Terms</h3>
+
+  <mat-divider [inset]="true"></mat-divider>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Principal:</span>
+    <span fxFlex="60%">{{ loanProduct.principal | number }}
+      (Min {{ (loanProduct.minPrincipal ? loanProduct.minPrincipal : loanProduct.principal) | number }}
+      : Max {{ (loanProduct.maxPrincipal ? loanProduct.maxPrincipal : loanProduct.principal) | number }})
+    </span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Allow Approved / Disbursed Amounts Over Applied:</span>
+    <span fxFlex="60%">{{ loanProduct.allowApprovedDisbursedAmountsOverApplied ? 'Yes' : 'No' }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loanProduct.allowApprovedDisbursedAmountsOverApplied">
+    <span fxFlex="40%">Over Applied Amount:</span>
+    <span fxFlex="60%" *ngIf="loanProduct.overAppliedCalculationType === 'percentage'">{{ loanProduct.overAppliedNumber | number
+      }} %</span>
+    <span fxFlex="60%" *ngIf="loanProduct.overAppliedCalculationType === 'flat'">{{ loanProduct.overAppliedNumber | number }} {{
+      loanProduct.currencyCode }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Number of Repayments:</span>
+    <span fxFlex="60%">{{ loanProduct.numberOfRepayments + ' (Min: ' + (loanProduct.minNumberOfRepayments ?
+      loanProduct.minNumberOfRepayments : loanProduct.numberOfRepayments) + ', Max: ' +
+      (loanProduct.maxNumberOfRepayments ? loanProduct.maxNumberOfRepayments : loanProduct.numberOfRepayments) + ')'
+      }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Linked to floating interest rates:</span>
+    <span fxFlex="60%">{{ loanProduct.isLinkedToFloatingInterestRates ? 'Yes' : 'No' }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="!loanProduct.isLinkedToFloatingInterestRates">
+    <span fxFlex="40%">Nominal interest rate:</span>
+    <span fxFlex="60%">{{ loanProduct.interestRatePerPeriod + ' (Min: ' + (loanProduct.minInterestRatePerPeriod ?
+      loanProduct.minInterestRatePerPeriod : loanProduct.interestRatePerPeriod) + ', Max: ' +
+      (loanProduct.maxInterestRatePerPeriod ? loanProduct.maxInterestRatePerPeriod : loanProduct.interestRatePerPeriod)
+      + ')' + ' ' + loanProduct.interestRateFrequencyType.value }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loanProduct.isLinkedToFloatingInterestRates" fxLayout="row wrap" fxLayout.lt-md="column">
+    <span fxFlex="40%">Floating Lending Interest Rate:</span>
+    <span fxFlex="60%">{{ loanProduct.floatingRateName }}</span>
+    <span fxFlex="40%">Interest Rate Differential:</span>
+    <span fxFlex="60%">{{ loanProduct.interestRateDifferential }}</span>
+    <span fxFlex="40%">Floating Interest Rate Calculation Allowed:</span>
+    <span fxFlex="60%">{{ loanProduct.isFloatingInterestRateCalculationAllowed ? 'Yes' : 'No' }}</span>
+    <span fxFlex="40%">Floating Interest Rate:</span>
+    <span fxFlex="60%">{{ loanProduct.defaultDifferentialLendingRate + ' (Min: ' +
+      (loanProduct.minDifferentialLendingRate ? loanProduct.minDifferentialLendingRate :
+      loanProduct.defaultDifferentialLendingRate) + ', Max: ' + (loanProduct.maxDifferentialLendingRate ?
+      loanProduct.maxDifferentialLendingRate : loanProduct.defaultDifferentialLendingRate) + ')' }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Terms vary based on loan cycle:</span>
+    <span fxFlex="60%">{{ loanProduct.useBorrowerCycle ? 'Yes' : 'No' }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loanProduct.principalVariationsForBorrowerCycle?.length">
+
+    <h4 class="mat-h4" fxFlexFill>Principal by loan cycle</h4>
+
+    <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loanProduct.principalVariationsForBorrowerCycle">
+
+      <ng-container matColumnDef="valueConditionType">
+        <th mat-header-cell *matHeaderCellDef> Condition </th>
+        <td mat-cell *matCellDef="let variation">
+          {{ variation.valueConditionType.value }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="borrowerCycleNumber">
+        <th mat-header-cell *matHeaderCellDef> Loan Cycle </th>
+        <td mat-cell *matCellDef="let variation">
+          {{ variation.borrowerCycleNumber }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="minValue">
+        <th mat-header-cell *matHeaderCellDef> Minimum </th>
+        <td mat-cell *matCellDef="let variation">
+          {{ variation.minValue }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="defaultValue">
+        <th mat-header-cell *matHeaderCellDef> Default </th>
+        <td mat-cell *matCellDef="let variation">
+          {{ variation.defaultValue }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="maxValue">
+        <th mat-header-cell *matHeaderCellDef> Maximum </th>
+        <td mat-cell *matCellDef="let variation">
+          {{ variation.maxValue }}
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="variationsDisplayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: variationsDisplayedColumns;"></tr>
+
+    </table>
+
+  </div>
+
+  <div fxFlexFill *ngIf="loanProduct.numberOfRepaymentVariationsForBorrowerCycle?.length">
+
+    <h4 class="mat-h4" fxFlexFill>Number of Repayments by loan cycle</h4>
+
+    <table fxFlexFill class="mat-elevation-z1" mat-table
+      [dataSource]="loanProduct.numberOfRepaymentVariationsForBorrowerCycle">
+
+      <ng-container matColumnDef="valueConditionType">
+        <th mat-header-cell *matHeaderCellDef> Condition </th>
+        <td mat-cell *matCellDef="let variation">
+          {{ variation.valueConditionType.value }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="borrowerCycleNumber">
+        <th mat-header-cell *matHeaderCellDef> Loan Cycle </th>
+        <td mat-cell *matCellDef="let variation">
+          {{ variation.borrowerCycleNumber }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="minValue">
+        <th mat-header-cell *matHeaderCellDef> Minimum </th>
+        <td mat-cell *matCellDef="let variation">
+          {{ variation.minValue }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="defaultValue">
+        <th mat-header-cell *matHeaderCellDef> Default </th>
+        <td mat-cell *matCellDef="let variation">
+          {{ variation.defaultValue }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="maxValue">
+        <th mat-header-cell *matHeaderCellDef> Maximum </th>
+        <td mat-cell *matCellDef="let variation">
+          {{ variation.maxValue }}
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="variationsDisplayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: variationsDisplayedColumns;"></tr>
+
+    </table>
+
+  </div>
+
+  <div fxFlexFill *ngIf="loanProduct.interestRateVariationsForBorrowerCycle?.length">
+
+    <h4 class="mat-h4" fxFlexFill>Nominal Interest Rate by loan cycle</h4>
+
+    <table fxFlexFill class="mat-elevation-z1" mat-table
+      [dataSource]="loanProduct.interestRateVariationsForBorrowerCycle">
+
+      <ng-container matColumnDef="valueConditionType">
+        <th mat-header-cell *matHeaderCellDef> Condition </th>
+        <td mat-cell *matCellDef="let variation">
+          {{ variation.valueConditionType.value }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="borrowerCycleNumber">
+        <th mat-header-cell *matHeaderCellDef> Loan Cycle </th>
+        <td mat-cell *matCellDef="let variation">
+          {{ variation.borrowerCycleNumber }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="minValue">
+        <th mat-header-cell *matHeaderCellDef> Minimum </th>
+        <td mat-cell *matCellDef="let variation">
+          {{ variation.minValue }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="defaultValue">
+        <th mat-header-cell *matHeaderCellDef> Default </th>
+        <td mat-cell *matCellDef="let variation">
+          {{ variation.defaultValue }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="maxValue">
+        <th mat-header-cell *matHeaderCellDef> Maximum </th>
+        <td mat-cell *matCellDef="let variation">
+          {{ variation.maxValue }}
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="variationsDisplayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: variationsDisplayedColumns;"></tr>
+
+    </table>
+
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Repay Every:</span>
+    <span fxFlex="60%">{{ loanProduct.repaymentEvery + ' ' + loanProduct.repaymentFrequencyType.value }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loanProduct.minimumDaysBetweenDisbursalAndFirstRepayment">
+    <span fxFlex="40%">Minimum days between disbursal and first repayment date:</span>
+    <span fxFlex="60%">{{ loanProduct.minimumDaysBetweenDisbursalAndFirstRepayment }}</span>
+  </div>
+
+  <h3 class="mat-h3" fxFlexFill>Settings</h3>
+
+  <mat-divider [inset]="true"></mat-divider>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Amortization:</span>
+    <span fxFlex="60%">{{ loanProduct.amortizationType.value }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Is Equal Amortization:</span>
+    <span fxFlex="60%">{{ loanProduct.isEqualAmortization ? 'Yes' : 'No' }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Interest Method:</span>
+    <span fxFlex="60%">{{ loanProduct.interestType.value }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Interest Calculation Period:</span>
+    <span fxFlex="60%">{{ loanProduct.interestCalculationPeriodType.value }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loanProduct.interestCalculationPeriodType.id === 1">
+    <span fxFlex="40%">Allow Partial Interest Calculation with same as repayment:</span>
+    <span fxFlex="60%">{{ loanProduct.allowPartialPeriodInterestCalcualtion ? 'Yes' : 'No' }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Repayment Strategy:</span>
+    <span fxFlex="60%">{{ loanProduct.transactionProcessingStrategyName }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loanProduct.graceOnPrincipalPayment">
+    <span fxFlex="40%">Grace on principal payment:</span>
+    <span fxFlex="60%">{{ loanProduct.graceOnPrincipalPayment }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loanProduct.graceOnInterestPayment">
+    <span fxFlex="40%">Grace on interest payment:</span>
+    <span fxFlex="60%">{{ loanProduct.graceOnInterestPayment }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loanProduct.graceOnInterestCharged">
+    <span fxFlex="40%">Interest free period:</span>
+    <span fxFlex="60%">{{ loanProduct.graceOnInterestCharged }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loanProduct.inArrearsTolerance">
+    <span fxFlex="40%">Arrears tolerance:</span>
+    <span fxFlex="60%">{{ loanProduct.inArrearsTolerance }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Days in year:</span>
+    <span fxFlex="60%">{{ loanProduct.daysInYearType.value }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Days in month:</span>
+    <span fxFlex="60%">{{ loanProduct.daysInMonthType.value }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Allow fixing of the installment amount:</span>
+    <span fxFlex="60%">{{ loanProduct.canDefineInstallmentAmount ? 'Yes' : 'No' }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loanProduct.graceOnArrearsAgeing">
+    <span fxFlex="40%">Number of days a loan may be overdue before moving into arrears:</span>
+    <span fxFlex="60%">{{ loanProduct.graceOnArrearsAgeing }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loanProduct.overdueDaysForNPA">
+    <span fxFlex="40%">Maximum number of days a loan may be overdue before becoming a NPA (non performing asset):</span>
+    <span fxFlex="60%">{{ loanProduct.overdueDaysForNPA }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Account moves out of NPA only after all arrears have been cleared:</span>
+    <span fxFlex="60%">{{ loanProduct.accountMovesOutOfNPAOnlyOnArrearsCompletion ? 'Yes' : 'No' }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loanProduct.principalThresholdForLastInstallment">
+    <span fxFlex="40%">Principal Threshold (%) for Last Instalment:</span>
+    <span fxFlex="60%">{{ loanProduct.principalThresholdForLastInstallment }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Variable Installments allowed:</span>
+    <span fxFlex="60%">{{ loanProduct.allowVariableInstallments ? 'Yes' : 'No' }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loanProduct.allowVariableInstallments">
+    <span fxFlex="40%">Variable Installments:</span>
+    <span fxFlex="60%">{{ '(Min: ' + loanProduct.minimumGap + ', Max: ' + (loanProduct.maximumGap ?
+      loanProduct.maximumGap : loanProduct.minimumGap) + ')' }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Allowed to be used for providing Topup Loans:</span>
+    <span fxFlex="60%">{{ loanProduct.canUseForTopup ? 'Yes' : 'No' }}</span>
+  </div>
+
+  <h3 class="mat-h3" fxFlexFill>Interest Recalculation</h3>
+
+  <mat-divider [inset]="true"></mat-divider>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Recalculate Interest:</span>
+    <span fxFlex="60%">{{ loanProduct.isInterestRecalculationEnabled ? 'Yes' : 'No' }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loanProduct.isInterestRecalculationEnabled" fxLayout="row wrap" fxLayout.lt-md="column">
+    <span fxFlex="40%">Pre-closure interest calculation rule:</span>
+    <span fxFlex="60%">{{ loanProduct.interestRecalculationData.preClosureInterestCalculationStrategy.value }}</span>
+    <span fxFlex="40%">Advance payments adjustment type:</span>
+    <span fxFlex="60%">{{ loanProduct.interestRecalculationData.rescheduleStrategyType.value }}</span>
+    <span fxFlex="40%">Interest recalculation compounding on:</span>
+    <span fxFlex="60%">{{ loanProduct.interestRecalculationData.interestRecalculationCompoundingType.value }}</span>
+    <div fxFlexFill *ngIf="loanProduct.interestRecalculationData.interestRecalculationCompoundingType.id !== 0"
+      fxLayout="row wrap" fxLayout.lt-md="column">
+      <span fxFlex="40%">Frequency for compounding:</span>
+      <span fxFlex="60%">
+        {{ loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.value }}
+        <span
+          *ngIf="loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id === 4 && loanProduct.interestRecalculationData.recalculationCompoundingFrequencyNthDay">&nbsp;&nbsp;{{
+          'on ' + loanProduct.interestRecalculationData.recalculationCompoundingFrequencyNthDay?.value }}</span>
+        <span
+          *ngIf="(loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id === 4 && !loanProduct.interestRecalculationData.recalculationCompoundingFrequencyOnDay) || loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id === 3">&nbsp;&nbsp;{{
+          loanProduct.interestRecalculationData.recalculationCompoundingFrequencyWeekday?.value }}</span>
+        <span
+          *ngIf="loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id === 4 && loanProduct.interestRecalculationData.recalculationCompoundingFrequencyOnDay">&nbsp;&nbsp;{{
+          'on day ' + loanProduct.interestRecalculationData.recalculationCompoundingFrequencyOnDay }}</span>
+      </span>
+      <div fxFlexFill *ngIf="loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id !== 1"
+        fxLayout="row wrap" fxLayout.lt-md="column">
+        <span fxFlex="40%">Frequency Interval for compounding:</span>
+        <span fxFlex="60%">{{ loanProduct.interestRecalculationData.recalculationCompoundingFrequencyInterval }}</span>
+      </div>
+    </div>
+    <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+      <span fxFlex="40%">Frequency for recalculate Outstanding Principal:</span>
+      <span fxFlex="60%">
+        {{ loanProduct.interestRecalculationData.recalculationRestFrequencyType.value }}
+        <span
+          *ngIf="loanProduct.interestRecalculationData.recalculationRestFrequencyType.id === 4 && loanProduct.interestRecalculationData.recalculationRestFrequencyNthDay">&nbsp;&nbsp;{{
+          'on ' + loanProduct.interestRecalculationData.recalculationRestFrequencyNthDay?.value }}</span>
+        <span
+          *ngIf="(loanProduct.interestRecalculationData.recalculationRestFrequencyType.id === 4 && !loanProduct.interestRecalculationData.recalculationRestFrequencyOnDay) || loanProduct.interestRecalculationData.recalculationRestFrequencyType.id === 3">&nbsp;&nbsp;{{
+          loanProduct.interestRecalculationData.recalculationRestFrequencyWeekday?.value }}</span>
+        <span
+          *ngIf="loanProduct.interestRecalculationData.recalculationRestFrequencyType.id === 4 && loanProduct.interestRecalculationData.recalculationRestFrequencyOnDay">&nbsp;&nbsp;{{
+          'on day ' + loanProduct.interestRecalculationData.recalculationRestFrequencyOnDay }}</span>
+      </span>
+    </div>
+    <div fxFlexFill *ngIf="loanProduct.interestRecalculationData.recalculationRestFrequencyType.id !== 1"
+      fxLayout="row wrap" fxLayout.lt-md="column">
+      <span fxFlex="40%">Frequency Interval for recalculation:</span>
+      <span fxFlex="60%">{{ loanProduct.interestRecalculationData.recalculationRestFrequencyInterval }}</span>
+      <div fxFlexFill *ngIf="loanProduct.recalculationRestFrequencyDate">
+        <span fxFlex="40%">Rest Frequency Date:</span>
+        <span fxFlex="60%">{{ loanProduct.interestRecalculationData.recalculationRestFrequencyDate }}</span>
+      </div>
+    </div>
+    <div fxFlexFill>
+      <span fxFlex="40%">Is Arrears recognization based on original schedule:</span>
+      <span fxFlex="60%">{{ loanProduct.isArrearsBasedOnOriginalSchedule ? 'Yes' : 'No' }}</span>
+    </div>
+  </div>
+
+  <h3 class="mat-h3" fxFlexFill>Guarantee Requirements</h3>
+
+  <mat-divider [inset]="true"></mat-divider>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Place Guarantee Funds On-Hold:</span>
+    <span fxFlex="60%">{{ loanProduct.holdGuaranteeFunds ? 'Yes' : 'No' }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loanProduct.holdGuaranteeFunds" fxLayout="row wrap" fxLayout.lt-md="column">
+    <span fxFlex="40%">Mandatory Guarantee(%):</span>
+    <span fxFlex="60%">{{ loanProduct.productGuaranteeData.mandatoryGuarantee }}</span>
+    <div fxFlexFill *ngIf="loanProduct.productGuaranteeData.minimumGuaranteeFromOwnFunds">
+      <span fxFlex="40%">Minimum Guarantee from Own Funds(%):</span>
+      <span fxFlex="60%">{{ loanProduct.productGuaranteeData.minimumGuaranteeFromOwnFunds }}</span>
+    </div>
+    <div fxFlexFill *ngIf="loanProduct.productGuaranteeData.minimumGuaranteeFromGuarantor">
+      <span fxFlex="40%">Minimum Guarantee from Guarantor Funds(%):</span>
+      <span fxFlex="60%">{{ loanProduct.productGuaranteeData.minimumGuaranteeFromGuarantor }}</span>
+    </div>
+  </div>
+
+  <h3 class="mat-h3" fxFlexFill>Loan Tranche Details</h3>
+
+  <mat-divider [inset]="true"></mat-divider>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Enable Multiple Disbursals:</span>
+    <span fxFlex="60%">{{ loanProduct.multiDisburseLoan ? 'Yes' : 'No' }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loanProduct.multiDisburseLoan" fxLayout="row wrap" fxLayout.lt-md="column">
+    <span fxFlex="40%">Maximum Tranche count:</span>
+    <span fxFlex="60%">{{ loanProduct.maxTrancheCount }}</span>
+    <div fxFlexFill *ngIf="loanProduct.outstandingLoanBalance">
+      <span fxFlex="40%">Maximum allowed outstanding balance:</span>
+      <span fxFlex="60%">{{ loanProduct.outstandingLoanBalance }}</span>
+    </div>
+    <div fxFlexFill>
+      <span fxFlex="40%">Disallow Expected Disbursements:</span>
+      <span fxFlex="60%">{{ loanProduct.disallowExpectedDisbursements ? 'Yes' : 'No' }}</span>
+    </div>
+  </div>
+
+  <h3 class="mat-h3" fxFlexFill>Configurable Terms and Settings</h3>
+
+  <mat-divider [inset]="true"></mat-divider>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Allow overriding select terms and settings in loan accounts:</span>
+    <span fxFlex="60%">{{ loanProduct.allowAttributeConfiguration ? 'Yes' : 'No' }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loanProduct.allowAttributeConfiguration" fxLayout="row wrap" fxLayout.lt-md="column">
+    <span fxFlex="40%">Amortization:</span>
+    <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.amortizationType ? 'Yes' : 'No' }}</span>
+    <span fxFlex="40%">Interest method:</span>
+    <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.interestType ? 'Yes' : 'No' }}</span>
+    <span fxFlex="40%">Repayment strategy:</span>
+    <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.transactionProcessingStrategyCode ? 'Yes' : 'No' }}</span>
+    <span fxFlex="40%">Interest calculation period:</span>
+    <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.interestCalculationPeriodType ? 'Yes' : 'No' }}</span>
+    <span fxFlex="40%">Arrears tolerance:</span>
+    <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.inArrearsTolerance ? 'Yes' : 'No' }}</span>
+    <span fxFlex="40%">Repaid every:</span>
+    <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.repaymentEvery ? 'Yes' : 'No' }}</span>
+    <span fxFlex="40%">Moratorium:</span>
+    <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.graceOnPrincipalAndInterestPayment ? 'Yes' : 'No'
+      }}</span>
+    <span fxFlex="40%">Number of days a loan may be overdue before moving into arrears:</span>
+    <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.graceOnArrearsAgeing ? 'Yes' : 'No' }}</span>
+    <span fxFlex="40%">Delinquency Bucket:</span>
+    <span fxFlex="60%">{{ loanProduct.delinquencyBucket.id ? 'Yes' : 'No' }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loanProduct.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
+
+    <h3 class="mat-h3" fxFlexFill>Charges</h3>
+
+    <mat-divider [inset]="true"></mat-divider>
+
+    <table fxFlexFill class="mat-elevation-z1" mat-table
+      [dataSource]="loanProduct.charges | chargesPenaltyFilter:false">
+
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.name + ', ' + charge.currency.displaySymbol }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="chargeCalculationType">
+        <th mat-header-cell *matHeaderCellDef> Type </th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.chargeCalculationType.value }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="amount">
+        <th mat-header-cell *matHeaderCellDef> Amount </th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.amount }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="chargeTimeType">
+        <th mat-header-cell *matHeaderCellDef> Collected On </th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.chargeTimeType.value }}
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
+
+    </table>
+
+    <h3 class="mat-h3" fxFlexFill>Overdue Charges</h3>
+
+    <mat-divider [inset]="true"></mat-divider>
+
+    <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loanProduct.charges | chargesPenaltyFilter:true">
+
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <td mat-cell *matCellDef="let overdueCharge">
+          {{ overdueCharge.name + ', ' + overdueCharge.currency.displaySymbol }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="chargeCalculationType">
+        <th mat-header-cell *matHeaderCellDef> Type </th>
+        <td mat-cell *matCellDef="let overdueCharge">
+          {{ overdueCharge.chargeCalculationType.value }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="amount">
+        <th mat-header-cell *matHeaderCellDef> Amount </th>
+        <td mat-cell *matCellDef="let overdueCharge">
+          {{ overdueCharge.amount }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="chargeTimeType">
+        <th mat-header-cell *matHeaderCellDef> Collected On </th>
+        <td mat-cell *matCellDef="let overdueCharge">
+          {{ overdueCharge.chargeTimeType.value }}
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
+
+    </table>
+
+  </div>
+
+  <h3 class="mat-h3" fxFlexFill>Accounting</h3>
+
+  <mat-divider [inset]="true"></mat-divider>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Type:</span>
+    <span fxFlex="60%">{{ loanProduct.accountingRule.value }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loanProduct.accountingRule.id >= 2 && loanProduct.accountingRule.id <= 4" fxLayout="row wrap"
+    fxLayout.lt-md="column">
+
+    <h4 fxFlexFill class="mat-h4">Assets / Liabilities</h4>
+
+    <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+      <span fxFlex="40%">Fund source:</span>
+      <span fxFlex="60%">({{loanProduct.accountingMappings.fundSourceAccount.glCode}}) {{
+        loanProduct.accountingMappings.fundSourceAccount.name }}</span>
+    </div>
+
+    <h4 fxFlexFill class="mat-h4">Assets</h4>
+
+    <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+      <span fxFlex="40%">Loan portfolio:</span>
+      <span fxFlex="60%">({{loanProduct.accountingMappings.loanPortfolioAccount.glCode}}) {{
+        loanProduct.accountingMappings.loanPortfolioAccount.name }}</span>
+      <div fxFlexFill *ngIf="loanProduct.accountingRule.id === 3 || loanProduct.accountingRule.id === 4"
+        fxLayout="row wrap" fxLayout.lt-md="column">
+        <span fxFlex="40%">Interest Receivable:</span>
+        <span fxFlex="60%">({{loanProduct.accountingMappings.receivableInterestAccount.glCode}}) {{
+          loanProduct.accountingMappings.receivableInterestAccount.name }}</span>
+        <span fxFlex="40%">Fees Receivable:</span>
+        <span fxFlex="60%">({{loanProduct.accountingMappings.receivableInterestAccount.glCode}}) {{
+          loanProduct.accountingMappings.receivableInterestAccount.name }}</span>
+        <span fxFlex="40%">Penalties Receivable:</span>
+        <span fxFlex="60%">({{loanProduct.accountingMappings.receivablePenaltyAccount.glCode}}) {{
+          loanProduct.accountingMappings.receivablePenaltyAccount.name }}</span>
+      </div>
+      <span fxFlex="40%">Transfer in suspense:</span>
+      <span fxFlex="60%">({{loanProduct.accountingMappings.transfersInSuspenseAccount.glCode}}) {{
+        loanProduct.accountingMappings.transfersInSuspenseAccount.name }}</span>
+    </div>
+
+    <h4 fxFlexFill class="mat-h4">Income</h4>
+
+    <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+      <span fxFlex="40%">Income from Interest:</span>
+      <span fxFlex="60%">({{loanProduct.accountingMappings.interestOnLoanAccount.glCode}}) {{
+        loanProduct.accountingMappings.interestOnLoanAccount.name }}</span>
+      <span fxFlex="40%">Income from fees:</span>
+      <span fxFlex="60%">({{loanProduct.accountingMappings.incomeFromFeeAccount.glCode}}) {{
+        loanProduct.accountingMappings.incomeFromFeeAccount.name }}</span>
+      <span fxFlex="40%">Income from penalties:</span>
+      <span fxFlex="60%">({{loanProduct.accountingMappings.incomeFromPenaltyAccount.glCode}}) {{
+        loanProduct.accountingMappings.incomeFromPenaltyAccount.name }}</span>
+      <span fxFlex="40%">Income from Recovery Repayments:</span>
+      <span fxFlex="60%">({{loanProduct.accountingMappings.incomeFromRecoveryAccount.glCode}}) {{
+        loanProduct.accountingMappings.incomeFromRecoveryAccount.name }}</span>
+    </div>
+
+    <h4 fxFlexFill class="mat-h4">Expenses</h4>
+
+    <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+      <span fxFlex="40%">Losses written off:</span>
+      <span fxFlex="60%">({{loanProduct.accountingMappings.writeOffAccount.glCode}}) {{
+        loanProduct.accountingMappings.writeOffAccount.name }}</span>
+      <span fxFlex="40%">Goodwill credit:</span>
+      <span fxFlex="60%">({{loanProduct.accountingMappings.goodwillCreditAccount.glCode}}) {{
+        loanProduct.accountingMappings.goodwillCreditAccount.name }}</span>
+    </div>
+
+    <h4 fxFlexFill class="mat-h4">Liabilities</h4>
+
+    <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+      <span fxFlex="40%">Over payment liability:</span>
+      <span fxFlex="60%">({{loanProduct.accountingMappings.overpaymentLiabilityAccount.glCode}}) {{
+        loanProduct.accountingMappings.overpaymentLiabilityAccount.name }}</span>
+    </div>
+
+    <div
+      *ngIf="loanProduct.paymentChannelToFundSourceMappings?.length || loanProduct.feeToIncomeAccountMappings?.length || loanProduct.penaltyToIncomeAccountMappings?.length"
+      fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+
+      <h3 class="mat-h3" fxFlexFill>Advanced Accounting Rules</h3>
+
+      <mat-divider [inset]="true"></mat-divider>
+
+      <div *ngIf="loanProduct.paymentChannelToFundSourceMappings?.length" fxFlexFill fxLayout="row wrap"
+        fxLayout.lt-md="column">
+
+        <h4 class="mat-h4" fxFlexFill>Fund Sources for Payment Channels</h4>
+
+        <table fxFlexFill class="mat-elevation-z1" mat-table
+          [dataSource]="loanProduct.paymentChannelToFundSourceMappings">
+
+          <ng-container matColumnDef="paymentTypeId">
+            <th mat-header-cell *matHeaderCellDef> Payment Type </th>
+            <td mat-cell *matCellDef="let paymentFundSource">
+              {{ paymentFundSource.paymentType.name }}
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="fundSourceAccountId">
+            <th mat-header-cell *matHeaderCellDef> Fund Source </th>
+            <td mat-cell *matCellDef="let paymentFundSource">
+              {{ paymentFundSource.fundSourceAccount.name }}
+            </td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="paymentFundSourceDisplayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns;"></tr>
+
+        </table>
+
+      </div>
+
+      <div *ngIf="loanProduct.feeToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap"
+        fxLayout.lt-md="column">
+
+        <h4 class="mat-h4" fxFlexFill>Fees to Specific Income Accounts</h4>
+
+        <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loanProduct.feeToIncomeAccountMappings">
+
+          <ng-container matColumnDef="chargeId">
+            <th mat-header-cell *matHeaderCellDef> Fees </th>
+            <td mat-cell *matCellDef="let feesIncome">
+              {{ feesIncome.charge.name }}
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="incomeAccountId">
+            <th mat-header-cell *matHeaderCellDef> Income Account </th>
+            <td mat-cell *matCellDef="let feesIncome">
+              {{ feesIncome.incomeAccount.name }}
+            </td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
+
+        </table>
+
+      </div>
+
+      <div *ngIf="loanProduct.penaltyToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap"
+        fxLayout.lt-md="column">
+
+        <h4 class="mat-h4" fxFlexFill>Penalties to Specific Income Accounts</h4>
+
+        <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loanProduct.penaltyToIncomeAccountMappings">
+
+          <ng-container matColumnDef="chargeId">
+            <th mat-header-cell *matHeaderCellDef> Penalty </th>
+            <td mat-cell *matCellDef="let penaltyIncome">
+              {{ penaltyIncome.charge.name }}
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="incomeAccountId">
+            <th mat-header-cell *matHeaderCellDef> Income Account </th>
+            <td mat-cell *matCellDef="let penaltyIncome">
+              {{ penaltyIncome.incomeAccount.name }}
+            </td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
+
+        </table>
+
+      </div>
+
+    </div>
+
+  </div>
+
+</div>
diff --git a/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.scss b/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.scss
new file mode 100644
index 000000000..8f6633e58
--- /dev/null
+++ b/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.scss
@@ -0,0 +1,12 @@
+@import "assets/styles/helper";
+
+.tab-container {
+  padding: 1%;
+  margin: 1%;
+}
+
+.mat-h3 {
+  margin-top: 10px !important;
+  font-weight: 300;
+  color: $status-approved;
+}
diff --git a/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.spec.ts b/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.spec.ts
new file mode 100644
index 000000000..e1e449e17
--- /dev/null
+++ b/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GeneralTabComponent } from './general-tab.component';
+
+describe('GeneralTabComponent', () => {
+  let component: GeneralTabComponent;
+  let fixture: ComponentFixture<GeneralTabComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GeneralTabComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GeneralTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.ts b/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.ts
new file mode 100644
index 000000000..0f543e050
--- /dev/null
+++ b/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.ts
@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'mifosx-general-tab',
+  templateUrl: './general-tab.component.html',
+  styleUrls: ['./general-tab.component.scss']
+})
+export class GeneralTabComponent implements OnInit {
+
+  loanProduct: any;
+
+  variationsDisplayedColumns: string[] = ['valueConditionType', 'borrowerCycleNumber', 'minValue', 'defaultValue', 'maxValue'];
+  chargesDisplayedColumns: string[] = ['name', 'chargeCalculationType', 'amount', 'chargeTimeType'];
+  paymentFundSourceDisplayedColumns: string[] = ['paymentTypeId', 'fundSourceAccountId'];
+  feesPenaltyIncomeDisplayedColumns: string[] = ['chargeId', 'incomeAccountId'];
+
+  constructor(private route: ActivatedRoute) {
+    this.route.data.subscribe((data: { loanProduct: any }) => {
+      this.loanProduct = data.loanProduct;
+    });
+  }
+
+  ngOnInit() {
+    this.loanProduct.allowAttributeConfiguration = Object.values(this.loanProduct.allowAttributeOverrides).some((attribute: boolean) => attribute);
+  }
+
+}
diff --git a/src/app/products/loan-products/view-loan-product/view-loan-product.component.html b/src/app/products/loan-products/view-loan-product/view-loan-product.component.html
index 730c2e1f5..84c50c845 100644
--- a/src/app/products/loan-products/view-loan-product/view-loan-product.component.html
+++ b/src/app/products/loan-products/view-loan-product/view-loan-product.component.html
@@ -1,756 +1,23 @@
-<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
-  <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_LOANPRODUCT'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
-    Edit
-  </button>
-</div>
+<mat-card class="product-card">
 
-<div class="container">
+  <mat-card-content>
 
-  <mat-card>
+    <nav mat-tab-nav-bar class="navigation-tabs">
+      <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
+        [active]="general.isActive">
+        General
+      </a>
+      <ng-container *ngFor="let loanProductDatatable of loanProductDatatables">
+        <a mat-tab-link [routerLink]="['./datatables',loanProductDatatable.registeredTableName]" routerLinkActive
+          #datatable="routerLinkActive" [active]="datatable.isActive"
+          *mifosxHasPermission="'READ_' + loanProductDatatable.registeredTableName">
+          {{loanProductDatatable.registeredTableName}}
+        </a>
+      </ng-container>
+    </nav>
 
-    <mat-card-content>
+    <router-outlet></router-outlet>
 
-      <div fxLayout="row wrap" fxLayout.lt-md="column">
+  </mat-card-content>
 
-        <h2 class="mat-h2" fxFlexFill>{{ loanProduct.name }}</h2>
-
-        <mat-divider [inset]="true"></mat-divider>
-
-        <h3 class="mat-h3" fxFlexFill>Details</h3>
-
-        <mat-divider [inset]="true"></mat-divider>
-
-        <div fxFlexFill>
-          <span fxFlex="40%">Short Name:</span>
-          <span fxFlex="60%">{{ loanProduct.shortName }}</span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanProduct.fundId">
-          <span fxFlex="40%">Fund Name:</span>
-          <span fxFlex="60%">{{ loanProduct.fundName }}</span>
-        </div>
-
-        <div fxFlexFill>
-          <span fxFlex="40%">Include in Customer Loan Counter:</span>
-          <span fxFlex="60%">{{ loanProduct.includeInBorrowerCycle ? 'Yes' : 'No' }}</span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanProduct.startDate">
-          <span fxFlex="40%">Start Date:</span>
-          <span fxFlex="60%">{{ loanProduct.startDate  | dateFormat }}</span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanProduct.closeDate">
-          <span fxFlex="40%">Close Date:</span>
-          <span fxFlex="60%">{{ loanProduct.closeDate  | dateFormat }}</span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanProduct.description">
-          <span fxFlex="40%">Description:</span>
-          <span fxFlex="60%">{{ loanProduct.description }}</span>
-        </div>
-
-        <h3 class="mat-h3" fxFlexFill>Currency</h3>
-
-        <mat-divider [inset]="true"></mat-divider>
-
-        <div fxFlexFill>
-          <span fxFlex="40%">Currency:</span>
-          <span fxFlex="60%">{{ loanProduct.currency.name }}</span>
-        </div>
-
-        <div fxFlexFill>
-          <span fxFlex="40%">Decimal Places:</span>
-          <span fxFlex="60%">{{ loanProduct.currency.decimalPlaces }}</span>
-        </div>
-
-        <div fxFlexFill>
-          <span fxFlex="40%">Currency in multiples of:</span>
-          <span fxFlex="60%">{{ loanProduct.currency.inMultiplesOf }}</span>
-        </div>
-
-        <div fxFlexFill>
-          <span fxFlex="40%">Installment in multiples of:</span>
-          <span fxFlex="60%">{{ loanProduct.installmentAmountInMultiplesOf }}</span>
-        </div>
-
-        <h3 class="mat-h3" fxFlexFill>Terms</h3>
-
-        <mat-divider [inset]="true"></mat-divider>
-
-        <div fxFlexFill>
-          <span fxFlex="40%">Principal:</span>
-          <span fxFlex="60%">{{ loanProduct.principal + ' (Min: ' + (loanProduct.minPrincipal ? loanProduct.minPrincipal : loanProduct.principal) + ', Max: ' + (loanProduct.maxPrincipal ? loanProduct.maxPrincipal : loanProduct.principal) + ')' }}</span>
-        </div>
-
-        <div fxFlexFill>
-          <span fxFlex="40%">Allow Approved / Disbursed Amounts Over Applied:</span>
-          <span fxFlex="60%">{{ loanProduct.allowApprovedDisbursedAmountsOverApplied ? 'Yes' : 'No' }}</span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanProduct.allowApprovedDisbursedAmountsOverApplied">
-          <span fxFlex="40%">Over Applied Amount:</span>
-          <span fxFlex="60%" *ngIf="loanProduct.overAppliedCalculationType === 'percentage'">{{ loanProduct.overAppliedNumber }} %</span>
-          <span fxFlex="60%" *ngIf="loanProduct.overAppliedCalculationType === 'flat'">{{ loanProduct.overAppliedNumber }} {{ loanProduct.currencyCode }}</span>
-        </div>
-
-        <div fxFlexFill>
-          <span fxFlex="40%">Number of Repayments:</span>
-          <span fxFlex="60%">{{ loanProduct.numberOfRepayments + ' (Min: ' + (loanProduct.minNumberOfRepayments ? loanProduct.minNumberOfRepayments : loanProduct.numberOfRepayments) + ', Max: ' + (loanProduct.maxNumberOfRepayments ? loanProduct.maxNumberOfRepayments : loanProduct.numberOfRepayments) + ')' }}</span>
-        </div>
-
-        <div fxFlexFill>
-          <span fxFlex="40%">Linked to floating interest rates:</span>
-          <span fxFlex="60%">{{ loanProduct.isLinkedToFloatingInterestRates ? 'Yes' : 'No' }}</span>
-        </div>
-
-        <div fxFlexFill *ngIf="!loanProduct.isLinkedToFloatingInterestRates">
-          <span fxFlex="40%">Nominal interest rate:</span>
-          <span fxFlex="60%">{{ loanProduct.interestRatePerPeriod + ' (Min: ' + (loanProduct.minInterestRatePerPeriod ? loanProduct.minInterestRatePerPeriod : loanProduct.interestRatePerPeriod) + ', Max: ' + (loanProduct.maxInterestRatePerPeriod ? loanProduct.maxInterestRatePerPeriod : loanProduct.interestRatePerPeriod) + ')' + ' ' + loanProduct.interestRateFrequencyType.value }}</span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanProduct.isLinkedToFloatingInterestRates" fxLayout="row wrap" fxLayout.lt-md="column">
-          <span fxFlex="40%">Floating Lending Interest Rate:</span>
-          <span fxFlex="60%">{{ loanProduct.floatingRateName }}</span>
-          <span fxFlex="40%">Interest Rate Differential:</span>
-          <span fxFlex="60%">{{ loanProduct.interestRateDifferential }}</span>
-          <span fxFlex="40%">Floating Interest Rate Calculation Allowed:</span>
-          <span fxFlex="60%">{{ loanProduct.isFloatingInterestRateCalculationAllowed ? 'Yes' : 'No' }}</span>
-          <span fxFlex="40%">Floating Interest Rate:</span>
-          <span fxFlex="60%">{{ loanProduct.defaultDifferentialLendingRate + ' (Min: ' + (loanProduct.minDifferentialLendingRate ? loanProduct.minDifferentialLendingRate : loanProduct.defaultDifferentialLendingRate) + ', Max: ' + (loanProduct.maxDifferentialLendingRate ? loanProduct.maxDifferentialLendingRate : loanProduct.defaultDifferentialLendingRate) + ')' }}</span>
-        </div>
-
-        <div fxFlexFill>
-          <span fxFlex="40%">Terms vary based on loan cycle:</span>
-          <span fxFlex="60%">{{ loanProduct.useBorrowerCycle ? 'Yes' : 'No' }}</span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanProduct.principalVariationsForBorrowerCycle?.length">
-
-          <h4 class="mat-h4" fxFlexFill>Principal by loan cycle</h4>
-
-          <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loanProduct.principalVariationsForBorrowerCycle">
-
-            <ng-container matColumnDef="valueConditionType">
-              <th mat-header-cell *matHeaderCellDef> Condition </th>
-              <td mat-cell *matCellDef="let variation">
-                {{ variation.valueConditionType.value }}
-              </td>
-            </ng-container>
-
-            <ng-container matColumnDef="borrowerCycleNumber">
-              <th mat-header-cell *matHeaderCellDef> Loan Cycle </th>
-              <td mat-cell *matCellDef="let variation">
-                {{ variation.borrowerCycleNumber }}
-              </td>
-            </ng-container>
-
-            <ng-container matColumnDef="minValue">
-              <th mat-header-cell *matHeaderCellDef> Minimum </th>
-              <td mat-cell *matCellDef="let variation">
-                {{ variation.minValue  }}
-              </td>
-            </ng-container>
-
-            <ng-container matColumnDef="defaultValue">
-              <th mat-header-cell *matHeaderCellDef> Default </th>
-              <td mat-cell *matCellDef="let variation">
-                {{ variation.defaultValue }}
-              </td>
-            </ng-container>
-
-            <ng-container matColumnDef="maxValue">
-              <th mat-header-cell *matHeaderCellDef> Maximum </th>
-              <td mat-cell *matCellDef="let variation">
-                {{ variation.maxValue }}
-              </td>
-            </ng-container>
-
-            <tr mat-header-row *matHeaderRowDef="variationsDisplayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: variationsDisplayedColumns;"></tr>
-
-          </table>
-
-        </div>
-
-        <div fxFlexFill *ngIf="loanProduct.numberOfRepaymentVariationsForBorrowerCycle?.length">
-
-          <h4 class="mat-h4" fxFlexFill>Number of Repayments by loan cycle</h4>
-
-          <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loanProduct.numberOfRepaymentVariationsForBorrowerCycle">
-
-            <ng-container matColumnDef="valueConditionType">
-              <th mat-header-cell *matHeaderCellDef> Condition </th>
-              <td mat-cell *matCellDef="let variation">
-                {{ variation.valueConditionType.value }}
-              </td>
-            </ng-container>
-
-            <ng-container matColumnDef="borrowerCycleNumber">
-              <th mat-header-cell *matHeaderCellDef> Loan Cycle </th>
-              <td mat-cell *matCellDef="let variation">
-                {{ variation.borrowerCycleNumber }}
-              </td>
-            </ng-container>
-
-            <ng-container matColumnDef="minValue">
-              <th mat-header-cell *matHeaderCellDef> Minimum </th>
-              <td mat-cell *matCellDef="let variation">
-                {{ variation.minValue  }}
-              </td>
-            </ng-container>
-
-            <ng-container matColumnDef="defaultValue">
-              <th mat-header-cell *matHeaderCellDef> Default </th>
-              <td mat-cell *matCellDef="let variation">
-                {{ variation.defaultValue }}
-              </td>
-            </ng-container>
-
-            <ng-container matColumnDef="maxValue">
-              <th mat-header-cell *matHeaderCellDef> Maximum </th>
-              <td mat-cell *matCellDef="let variation">
-                {{ variation.maxValue }}
-              </td>
-            </ng-container>
-
-            <tr mat-header-row *matHeaderRowDef="variationsDisplayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: variationsDisplayedColumns;"></tr>
-
-          </table>
-
-        </div>
-
-        <div fxFlexFill *ngIf="loanProduct.interestRateVariationsForBorrowerCycle?.length">
-
-          <h4 class="mat-h4" fxFlexFill>Nominal Interest Rate by loan cycle</h4>
-
-          <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loanProduct.interestRateVariationsForBorrowerCycle">
-
-            <ng-container matColumnDef="valueConditionType">
-              <th mat-header-cell *matHeaderCellDef> Condition </th>
-              <td mat-cell *matCellDef="let variation">
-                {{ variation.valueConditionType.value }}
-              </td>
-            </ng-container>
-
-            <ng-container matColumnDef="borrowerCycleNumber">
-              <th mat-header-cell *matHeaderCellDef> Loan Cycle </th>
-              <td mat-cell *matCellDef="let variation">
-                {{ variation.borrowerCycleNumber }}
-              </td>
-            </ng-container>
-
-            <ng-container matColumnDef="minValue">
-              <th mat-header-cell *matHeaderCellDef> Minimum </th>
-              <td mat-cell *matCellDef="let variation">
-                {{ variation.minValue  }}
-              </td>
-            </ng-container>
-
-            <ng-container matColumnDef="defaultValue">
-              <th mat-header-cell *matHeaderCellDef> Default </th>
-              <td mat-cell *matCellDef="let variation">
-                {{ variation.defaultValue }}
-              </td>
-            </ng-container>
-
-            <ng-container matColumnDef="maxValue">
-              <th mat-header-cell *matHeaderCellDef> Maximum </th>
-              <td mat-cell *matCellDef="let variation">
-                {{ variation.maxValue }}
-              </td>
-            </ng-container>
-
-            <tr mat-header-row *matHeaderRowDef="variationsDisplayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: variationsDisplayedColumns;"></tr>
-
-          </table>
-
-        </div>
-
-        <div fxFlexFill>
-          <span fxFlex="40%">Repay Every:</span>
-          <span fxFlex="60%">{{ loanProduct.repaymentEvery + ' ' + loanProduct.repaymentFrequencyType.value }}</span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanProduct.minimumDaysBetweenDisbursalAndFirstRepayment">
-          <span fxFlex="40%">Minimum days between disbursal and first repayment date:</span>
-          <span fxFlex="60%">{{ loanProduct.minimumDaysBetweenDisbursalAndFirstRepayment }}</span>
-        </div>
-
-        <h3 class="mat-h3" fxFlexFill>Settings</h3>
-
-        <mat-divider [inset]="true"></mat-divider>
-
-        <div fxFlexFill>
-          <span fxFlex="40%">Amortization:</span>
-          <span fxFlex="60%">{{ loanProduct.amortizationType.value }}</span>
-        </div>
-
-        <div fxFlexFill>
-          <span fxFlex="40%">Is Equal Amortization:</span>
-          <span fxFlex="60%">{{ loanProduct.isEqualAmortization ? 'Yes' : 'No' }}</span>
-        </div>
-
-        <div fxFlexFill>
-          <span fxFlex="40%">Interest Method:</span>
-          <span fxFlex="60%">{{ loanProduct.interestType.value }}</span>
-        </div>
-
-        <div fxFlexFill>
-          <span fxFlex="40%">Interest Calculation Period:</span>
-          <span fxFlex="60%">{{ loanProduct.interestCalculationPeriodType.value }}</span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanProduct.interestCalculationPeriodType.id === 1">
-          <span fxFlex="40%">Allow Partial Interest Calculation with same as repayment:</span>
-          <span fxFlex="60%">{{ loanProduct.allowPartialPeriodInterestCalcualtion ? 'Yes' : 'No' }}</span>
-        </div>
-
-        <div fxFlexFill>
-          <span fxFlex="40%">Repayment Strategy:</span>
-          <span fxFlex="60%">{{ loanProduct.transactionProcessingStrategyName }}</span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanProduct.graceOnPrincipalPayment">
-          <span fxFlex="40%">Grace on principal payment:</span>
-          <span fxFlex="60%">{{ loanProduct.graceOnPrincipalPayment }}</span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanProduct.graceOnInterestPayment">
-          <span fxFlex="40%">Grace on interest payment:</span>
-          <span fxFlex="60%">{{ loanProduct.graceOnInterestPayment }}</span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanProduct.graceOnInterestCharged">
-          <span fxFlex="40%">Interest free period:</span>
-          <span fxFlex="60%">{{ loanProduct.graceOnInterestCharged }}</span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanProduct.inArrearsTolerance">
-          <span fxFlex="40%">Arrears tolerance:</span>
-          <span fxFlex="60%">{{ loanProduct.inArrearsTolerance }}</span>
-        </div>
-
-        <div fxFlexFill>
-          <span fxFlex="40%">Days in year:</span>
-          <span fxFlex="60%">{{ loanProduct.daysInYearType.value }}</span>
-        </div>
-
-        <div fxFlexFill>
-          <span fxFlex="40%">Days in month:</span>
-          <span fxFlex="60%">{{ loanProduct.daysInMonthType.value }}</span>
-        </div>
-
-        <div fxFlexFill>
-          <span fxFlex="40%">Allow fixing of the installment amount:</span>
-          <span fxFlex="60%">{{ loanProduct.canDefineInstallmentAmount ? 'Yes' : 'No' }}</span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanProduct.graceOnArrearsAgeing">
-          <span fxFlex="40%">Number of days a loan may be overdue before moving into arrears:</span>
-          <span fxFlex="60%">{{ loanProduct.graceOnArrearsAgeing }}</span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanProduct.overdueDaysForNPA">
-          <span fxFlex="40%">Maximum number of days a loan may be overdue before becoming a NPA (non performing asset):</span>
-          <span fxFlex="60%">{{ loanProduct.overdueDaysForNPA }}</span>
-        </div>
-
-        <div fxFlexFill>
-          <span fxFlex="40%">Account moves out of NPA only after all arrears have been cleared:</span>
-          <span fxFlex="60%">{{ loanProduct.accountMovesOutOfNPAOnlyOnArrearsCompletion ? 'Yes' : 'No' }}</span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanProduct.principalThresholdForLastInstallment">
-          <span fxFlex="40%">Principal Threshold (%) for Last Instalment:</span>
-          <span fxFlex="60%">{{ loanProduct.principalThresholdForLastInstallment }}</span>
-        </div>
-
-        <div fxFlexFill>
-          <span fxFlex="40%">Variable Installments allowed:</span>
-          <span fxFlex="60%">{{ loanProduct.allowVariableInstallments ? 'Yes' : 'No' }}</span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanProduct.allowVariableInstallments">
-          <span fxFlex="40%">Variable Installments:</span>
-          <span fxFlex="60%">{{ '(Min: ' + loanProduct.minimumGap + ', Max: ' + (loanProduct.maximumGap ? loanProduct.maximumGap : loanProduct.minimumGap) + ')' }}</span>
-        </div>
-
-        <div fxFlexFill>
-          <span fxFlex="40%">Allowed to be used for providing Topup Loans:</span>
-          <span fxFlex="60%">{{ loanProduct.canUseForTopup ? 'Yes' : 'No' }}</span>
-        </div>
-
-        <h3 class="mat-h3" fxFlexFill>Interest Recalculation</h3>
-
-        <mat-divider [inset]="true"></mat-divider>
-
-        <div fxFlexFill>
-          <span fxFlex="40%">Recalculate Interest:</span>
-          <span fxFlex="60%">{{ loanProduct.isInterestRecalculationEnabled ? 'Yes' : 'No' }}</span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanProduct.isInterestRecalculationEnabled" fxLayout="row wrap" fxLayout.lt-md="column">
-          <span fxFlex="40%">Pre-closure interest calculation rule:</span>
-          <span fxFlex="60%">{{ loanProduct.interestRecalculationData.preClosureInterestCalculationStrategy.value }}</span>
-          <span fxFlex="40%">Advance payments adjustment type:</span>
-          <span fxFlex="60%">{{ loanProduct.interestRecalculationData.rescheduleStrategyType.value }}</span>
-          <span fxFlex="40%">Interest recalculation compounding on:</span>
-          <span fxFlex="60%">{{ loanProduct.interestRecalculationData.interestRecalculationCompoundingType.value }}</span>
-          <div fxFlexFill *ngIf="loanProduct.interestRecalculationData.interestRecalculationCompoundingType.id !== 0" fxLayout="row wrap" fxLayout.lt-md="column">
-            <span fxFlex="40%">Frequency for compounding:</span>
-            <span fxFlex="60%">
-              {{ loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.value }}
-              <span *ngIf="loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id === 4 && loanProduct.interestRecalculationData.recalculationCompoundingFrequencyNthDay">&nbsp;&nbsp;{{ 'on ' + loanProduct.interestRecalculationData.recalculationCompoundingFrequencyNthDay?.value }}</span>
-              <span *ngIf="(loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id === 4 && !loanProduct.interestRecalculationData.recalculationCompoundingFrequencyOnDay) || loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id === 3">&nbsp;&nbsp;{{ loanProduct.interestRecalculationData.recalculationCompoundingFrequencyWeekday?.value }}</span>
-              <span *ngIf="loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id === 4 && loanProduct.interestRecalculationData.recalculationCompoundingFrequencyOnDay">&nbsp;&nbsp;{{ 'on day  ' + loanProduct.interestRecalculationData.recalculationCompoundingFrequencyOnDay }}</span>
-            </span>
-            <div fxFlexFill *ngIf="loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id !== 1" fxLayout="row wrap" fxLayout.lt-md="column">
-              <span fxFlex="40%">Frequency Interval for compounding:</span>
-              <span fxFlex="60%">{{ loanProduct.interestRecalculationData.recalculationCompoundingFrequencyInterval }}</span>
-            </div>
-          </div>
-          <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-            <span fxFlex="40%">Frequency for recalculate Outstanding Principal:</span>
-            <span fxFlex="60%">
-              {{ loanProduct.interestRecalculationData.recalculationRestFrequencyType.value }}
-              <span *ngIf="loanProduct.interestRecalculationData.recalculationRestFrequencyType.id === 4 && loanProduct.interestRecalculationData.recalculationRestFrequencyNthDay">&nbsp;&nbsp;{{ 'on ' + loanProduct.interestRecalculationData.recalculationRestFrequencyNthDay?.value }}</span>
-              <span *ngIf="(loanProduct.interestRecalculationData.recalculationRestFrequencyType.id === 4 && !loanProduct.interestRecalculationData.recalculationRestFrequencyOnDay) || loanProduct.interestRecalculationData.recalculationRestFrequencyType.id === 3">&nbsp;&nbsp;{{ loanProduct.interestRecalculationData.recalculationRestFrequencyWeekday?.value }}</span>
-              <span *ngIf="loanProduct.interestRecalculationData.recalculationRestFrequencyType.id === 4 && loanProduct.interestRecalculationData.recalculationRestFrequencyOnDay">&nbsp;&nbsp;{{ 'on day  ' + loanProduct.interestRecalculationData.recalculationRestFrequencyOnDay }}</span>
-            </span>
-          </div>
-          <div fxFlexFill *ngIf="loanProduct.interestRecalculationData.recalculationRestFrequencyType.id !== 1" fxLayout="row wrap" fxLayout.lt-md="column">
-            <span fxFlex="40%">Frequency Interval for recalculation:</span>
-            <span fxFlex="60%">{{ loanProduct.interestRecalculationData.recalculationRestFrequencyInterval }}</span>
-            <div fxFlexFill *ngIf="loanProduct.recalculationRestFrequencyDate">
-              <span fxFlex="40%">Rest Frequency Date:</span>
-              <span fxFlex="60%">{{ loanProduct.interestRecalculationData.recalculationRestFrequencyDate }}</span>
-            </div>
-          </div>
-          <div fxFlexFill>
-            <span fxFlex="40%">Is Arrears recognization based on original schedule:</span>
-            <span fxFlex="60%">{{ loanProduct.isArrearsBasedOnOriginalSchedule ? 'Yes' : 'No' }}</span>
-          </div>
-        </div>
-
-        <h3 class="mat-h3" fxFlexFill>Guarantee Requirements</h3>
-
-        <mat-divider [inset]="true"></mat-divider>
-
-        <div fxFlexFill>
-          <span fxFlex="40%">Place Guarantee Funds On-Hold:</span>
-          <span fxFlex="60%">{{ loanProduct.holdGuaranteeFunds ? 'Yes' : 'No' }}</span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanProduct.holdGuaranteeFunds" fxLayout="row wrap" fxLayout.lt-md="column">
-          <span fxFlex="40%">Mandatory Guarantee(%):</span>
-          <span fxFlex="60%">{{ loanProduct.productGuaranteeData.mandatoryGuarantee }}</span>
-          <div fxFlexFill *ngIf="loanProduct.productGuaranteeData.minimumGuaranteeFromOwnFunds">
-            <span fxFlex="40%">Minimum Guarantee from Own Funds(%):</span>
-            <span fxFlex="60%">{{ loanProduct.productGuaranteeData.minimumGuaranteeFromOwnFunds }}</span>
-          </div>
-          <div fxFlexFill *ngIf="loanProduct.productGuaranteeData.minimumGuaranteeFromGuarantor">
-            <span fxFlex="40%">Minimum Guarantee from Guarantor Funds(%):</span>
-            <span fxFlex="60%">{{ loanProduct.productGuaranteeData.minimumGuaranteeFromGuarantor }}</span>
-          </div>
-        </div>
-
-        <h3 class="mat-h3" fxFlexFill>Loan Tranche Details</h3>
-
-        <mat-divider [inset]="true"></mat-divider>
-
-        <div fxFlexFill>
-          <span fxFlex="40%">Enable Multiple Disbursals:</span>
-          <span fxFlex="60%">{{ loanProduct.multiDisburseLoan ? 'Yes' : 'No' }}</span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanProduct.multiDisburseLoan" fxLayout="row wrap" fxLayout.lt-md="column">
-          <span fxFlex="40%">Maximum Tranche count:</span>
-          <span fxFlex="60%">{{ loanProduct.maxTrancheCount }}</span>
-          <div fxFlexFill *ngIf="loanProduct.outstandingLoanBalance">
-            <span fxFlex="40%">Maximum allowed outstanding balance:</span>
-            <span fxFlex="60%">{{ loanProduct.outstandingLoanBalance }}</span>
-          </div>
-          <div fxFlexFill>
-            <span fxFlex="40%">Disallow Expected Disbursements:</span>
-            <span fxFlex="60%">{{ loanProduct.disallowExpectedDisbursements ? 'Yes' : 'No' }}</span>
-          </div>
-        </div>
-
-        <h3 class="mat-h3" fxFlexFill>Configurable Terms and Settings</h3>
-
-        <mat-divider [inset]="true"></mat-divider>
-
-        <div fxFlexFill>
-          <span fxFlex="40%">Allow overriding select terms and settings in loan accounts:</span>
-          <span fxFlex="60%">{{ loanProduct.allowAttributeConfiguration ? 'Yes' : 'No' }}</span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanProduct.allowAttributeConfiguration" fxLayout="row wrap" fxLayout.lt-md="column">
-          <span fxFlex="40%">Amortization:</span>
-          <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.amortizationType ? 'Yes' : 'No' }}</span>
-          <span fxFlex="40%">Interest method:</span>
-          <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.interestType ? 'Yes' : 'No' }}</span>
-          <span fxFlex="40%">Repayment strategy:</span>
-          <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.transactionProcessingStrategyCode ? 'Yes' : 'No' }}</span>
-          <span fxFlex="40%">Interest calculation period:</span>
-          <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.interestCalculationPeriodType ? 'Yes' : 'No' }}</span>
-          <span fxFlex="40%">Arrears tolerance:</span>
-          <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.inArrearsTolerance ? 'Yes' : 'No' }}</span>
-          <span fxFlex="40%">Repaid every:</span>
-          <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.repaymentEvery ? 'Yes' : 'No' }}</span>
-          <span fxFlex="40%">Moratorium:</span>
-          <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.graceOnPrincipalAndInterestPayment ? 'Yes' : 'No' }}</span>
-          <span fxFlex="40%">Number of days a loan may be overdue before moving into arrears:</span>
-          <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.graceOnArrearsAgeing ? 'Yes' : 'No' }}</span>
-          <span fxFlex="40%">Delinquency Bucket:</span>
-          <span fxFlex="60%">{{ loanProduct.delinquencyBucket.id ? 'Yes' : 'No' }}</span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanProduct.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
-
-          <h3 class="mat-h3" fxFlexFill>Charges</h3>
-
-          <mat-divider [inset]="true"></mat-divider>
-
-          <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loanProduct.charges | chargesPenaltyFilter:false">
-
-            <ng-container matColumnDef="name">
-              <th mat-header-cell *matHeaderCellDef> Name </th>
-              <td mat-cell *matCellDef="let charge">
-                {{ charge.name + ', ' + charge.currency.displaySymbol }}
-              </td>
-            </ng-container>
-
-            <ng-container matColumnDef="chargeCalculationType">
-              <th mat-header-cell *matHeaderCellDef> Type </th>
-              <td mat-cell *matCellDef="let charge">
-                {{ charge.chargeCalculationType.value }}
-              </td>
-            </ng-container>
-
-            <ng-container matColumnDef="amount">
-              <th mat-header-cell *matHeaderCellDef> Amount </th>
-              <td mat-cell *matCellDef="let charge">
-                {{ charge.amount  }}
-              </td>
-            </ng-container>
-
-            <ng-container matColumnDef="chargeTimeType">
-              <th mat-header-cell *matHeaderCellDef> Collected On </th>
-              <td mat-cell *matCellDef="let charge">
-                {{ charge.chargeTimeType.value }}
-              </td>
-            </ng-container>
-
-            <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
-
-          </table>
-
-          <h3 class="mat-h3" fxFlexFill>Overdue Charges</h3>
-
-          <mat-divider [inset]="true"></mat-divider>
-
-          <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loanProduct.charges | chargesPenaltyFilter:true">
-
-            <ng-container matColumnDef="name">
-              <th mat-header-cell *matHeaderCellDef> Name </th>
-              <td mat-cell *matCellDef="let overdueCharge">
-                {{ overdueCharge.name + ', ' + overdueCharge.currency.displaySymbol }}
-              </td>
-            </ng-container>
-
-            <ng-container matColumnDef="chargeCalculationType">
-              <th mat-header-cell *matHeaderCellDef> Type </th>
-              <td mat-cell *matCellDef="let overdueCharge">
-                {{ overdueCharge.chargeCalculationType.value }}
-              </td>
-            </ng-container>
-
-            <ng-container matColumnDef="amount">
-              <th mat-header-cell *matHeaderCellDef> Amount </th>
-              <td mat-cell *matCellDef="let overdueCharge">
-                {{ overdueCharge.amount  }}
-              </td>
-            </ng-container>
-
-            <ng-container matColumnDef="chargeTimeType">
-              <th mat-header-cell *matHeaderCellDef> Collected On </th>
-              <td mat-cell *matCellDef="let overdueCharge">
-                {{ overdueCharge.chargeTimeType.value }}
-              </td>
-            </ng-container>
-
-            <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
-
-          </table>
-
-        </div>
-
-        <h3 class="mat-h3" fxFlexFill>Accounting</h3>
-
-        <mat-divider [inset]="true"></mat-divider>
-
-        <div fxFlexFill>
-          <span fxFlex="40%">Type:</span>
-          <span fxFlex="60%">{{ loanProduct.accountingRule.value }}</span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanProduct.accountingRule.id >= 2 && loanProduct.accountingRule.id <= 4" fxLayout="row wrap" fxLayout.lt-md="column">
-
-          <h4 fxFlexFill class="mat-h4">Assets / Liabilities</h4>
-
-          <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-            <span fxFlex="40%">Fund source:</span>
-            <span fxFlex="60%">({{loanProduct.accountingMappings.fundSourceAccount.glCode}}) {{ loanProduct.accountingMappings.fundSourceAccount.name }}</span>
-          </div>
-
-          <h4 fxFlexFill class="mat-h4">Assets</h4>
-
-          <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-            <span fxFlex="40%">Loan portfolio:</span>
-            <span fxFlex="60%">({{loanProduct.accountingMappings.loanPortfolioAccount.glCode}}) {{ loanProduct.accountingMappings.loanPortfolioAccount.name }}</span>
-            <div fxFlexFill *ngIf="loanProduct.accountingRule.id === 3 || loanProduct.accountingRule.id === 4" fxLayout="row wrap" fxLayout.lt-md="column">
-              <span fxFlex="40%">Interest Receivable:</span>
-              <span fxFlex="60%">({{loanProduct.accountingMappings.receivableInterestAccount.glCode}}) {{ loanProduct.accountingMappings.receivableInterestAccount.name }}</span>
-              <span fxFlex="40%">Fees Receivable:</span>
-              <span fxFlex="60%">({{loanProduct.accountingMappings.receivableInterestAccount.glCode}}) {{ loanProduct.accountingMappings.receivableInterestAccount.name }}</span>
-              <span fxFlex="40%">Penalties Receivable:</span>
-              <span fxFlex="60%">({{loanProduct.accountingMappings.receivablePenaltyAccount.glCode}}) {{ loanProduct.accountingMappings.receivablePenaltyAccount.name }}</span>
-            </div>
-            <span fxFlex="40%">Transfer in suspense:</span>
-            <span fxFlex="60%">({{loanProduct.accountingMappings.transfersInSuspenseAccount.glCode}}) {{ loanProduct.accountingMappings.transfersInSuspenseAccount.name }}</span>
-          </div>
-
-          <h4 fxFlexFill class="mat-h4">Income</h4>
-
-          <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-            <span fxFlex="40%">Income from Interest:</span>
-            <span fxFlex="60%">({{loanProduct.accountingMappings.interestOnLoanAccount.glCode}}) {{ loanProduct.accountingMappings.interestOnLoanAccount.name }}</span>
-            <span fxFlex="40%">Income from fees:</span>
-            <span fxFlex="60%">({{loanProduct.accountingMappings.incomeFromFeeAccount.glCode}}) {{ loanProduct.accountingMappings.incomeFromFeeAccount.name }}</span>
-            <span fxFlex="40%">Income from penalties:</span>
-            <span fxFlex="60%">({{loanProduct.accountingMappings.incomeFromPenaltyAccount.glCode}}) {{ loanProduct.accountingMappings.incomeFromPenaltyAccount.name }}</span>
-            <span fxFlex="40%">Income from Recovery Repayments:</span>
-            <span fxFlex="60%">({{loanProduct.accountingMappings.incomeFromRecoveryAccount.glCode}}) {{ loanProduct.accountingMappings.incomeFromRecoveryAccount.name }}</span>
-          </div>
-
-          <h4 fxFlexFill class="mat-h4">Expenses</h4>
-
-          <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-            <span fxFlex="40%">Losses written off:</span>
-            <span fxFlex="60%">({{loanProduct.accountingMappings.writeOffAccount.glCode}}) {{ loanProduct.accountingMappings.writeOffAccount.name }}</span>
-            <span fxFlex="40%">Goodwill credit:</span>
-            <span fxFlex="60%">({{loanProduct.accountingMappings.goodwillCreditAccount.glCode}}) {{ loanProduct.accountingMappings.goodwillCreditAccount.name }}</span>
-          </div>
-
-          <h4 fxFlexFill class="mat-h4">Liabilities</h4>
-
-          <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-            <span fxFlex="40%">Over payment liability:</span>
-            <span fxFlex="60%">({{loanProduct.accountingMappings.overpaymentLiabilityAccount.glCode}}) {{ loanProduct.accountingMappings.overpaymentLiabilityAccount.name }}</span>
-          </div>
-
-          <div *ngIf="loanProduct.paymentChannelToFundSourceMappings?.length || loanProduct.feeToIncomeAccountMappings?.length || loanProduct.penaltyToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-
-            <h3 class="mat-h3" fxFlexFill>Advanced Accounting Rules</h3>
-
-            <mat-divider [inset]="true"></mat-divider>
-
-            <div *ngIf="loanProduct.paymentChannelToFundSourceMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-
-              <h4 class="mat-h4" fxFlexFill>Fund Sources for Payment Channels</h4>
-
-              <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loanProduct.paymentChannelToFundSourceMappings">
-
-                <ng-container matColumnDef="paymentTypeId">
-                  <th mat-header-cell *matHeaderCellDef> Payment Type </th>
-                  <td mat-cell *matCellDef="let paymentFundSource">
-                    {{ paymentFundSource.paymentType.name }}
-                  </td>
-                </ng-container>
-
-                <ng-container matColumnDef="fundSourceAccountId">
-                  <th mat-header-cell *matHeaderCellDef> Fund Source </th>
-                  <td mat-cell *matCellDef="let paymentFundSource">
-                    {{ paymentFundSource.fundSourceAccount.name }}
-                  </td>
-                </ng-container>
-
-                <tr mat-header-row *matHeaderRowDef="paymentFundSourceDisplayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns;"></tr>
-
-              </table>
-
-            </div>
-
-            <div *ngIf="loanProduct.feeToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-
-              <h4 class="mat-h4" fxFlexFill>Fees to Specific Income Accounts</h4>
-
-              <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loanProduct.feeToIncomeAccountMappings">
-
-                <ng-container matColumnDef="chargeId">
-                  <th mat-header-cell *matHeaderCellDef> Fees </th>
-                  <td mat-cell *matCellDef="let feesIncome">
-                    {{ feesIncome.charge.name }}
-                  </td>
-                </ng-container>
-
-                <ng-container matColumnDef="incomeAccountId">
-                  <th mat-header-cell *matHeaderCellDef> Income Account </th>
-                  <td mat-cell *matCellDef="let feesIncome">
-                    {{ feesIncome.incomeAccount.name }}
-                  </td>
-                </ng-container>
-
-                <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
-
-              </table>
-
-            </div>
-
-            <div *ngIf="loanProduct.penaltyToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-
-              <h4 class="mat-h4" fxFlexFill>Penalties to Specific Income Accounts</h4>
-
-              <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loanProduct.penaltyToIncomeAccountMappings">
-
-                <ng-container matColumnDef="chargeId">
-                  <th mat-header-cell *matHeaderCellDef> Penalty </th>
-                  <td mat-cell *matCellDef="let penaltyIncome">
-                    {{ penaltyIncome.charge.name }}
-                  </td>
-                </ng-container>
-
-                <ng-container matColumnDef="incomeAccountId">
-                  <th mat-header-cell *matHeaderCellDef> Income Account </th>
-                  <td mat-cell *matCellDef="let penaltyIncome">
-                    {{ penaltyIncome.incomeAccount.name }}
-                  </td>
-                </ng-container>
-
-                <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
-
-              </table>
-
-            </div>
-
-          </div>
-
-        </div>
-
-      </div>
-
-    </mat-card-content>
-
-  </mat-card>
-
-</div>
+</mat-card>
diff --git a/src/app/products/loan-products/view-loan-product/view-loan-product.component.scss b/src/app/products/loan-products/view-loan-product/view-loan-product.component.scss
index a9f4fce2a..c345a82ac 100644
--- a/src/app/products/loan-products/view-loan-product/view-loan-product.component.scss
+++ b/src/app/products/loan-products/view-loan-product/view-loan-product.component.scss
@@ -1,24 +1,13 @@
-table {
-  width: 100%;
-}
+.product-card {
+  margin: 0 auto;
+  max-width: 80rem;
+  width: 90%;
+  padding: 0;
 
-.mat-elevation-z1 {
-  margin: 1em 0 1.5em 0;
-}
-
-h2, h3, h4 {
-  margin: 0;
-  font-weight: 500;
-}
-
-span {
-  margin: 0.5em 0;
-}
-
-.mat-card .mat-divider-horizontal.mat-divider-inset {
-  margin: 0 0 0.5em 0;
-}
-
-.margin-t {
-  margin-top: 1em;
+  .navigation-tabs {
+    overflow: auto;
+  }
+  i:hover {
+    cursor: pointer;
+  }
 }
diff --git a/src/app/products/loan-products/view-loan-product/view-loan-product.component.ts b/src/app/products/loan-products/view-loan-product/view-loan-product.component.ts
index 63257744f..afa9887b9 100644
--- a/src/app/products/loan-products/view-loan-product/view-loan-product.component.ts
+++ b/src/app/products/loan-products/view-loan-product/view-loan-product.component.ts
@@ -8,21 +8,15 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class ViewLoanProductComponent implements OnInit {
 
-  loanProduct: any;
-
-  variationsDisplayedColumns: string[] = ['valueConditionType', 'borrowerCycleNumber', 'minValue', 'defaultValue', 'maxValue'];
-  chargesDisplayedColumns: string[] = ['name', 'chargeCalculationType', 'amount', 'chargeTimeType'];
-  paymentFundSourceDisplayedColumns: string[] = ['paymentTypeId', 'fundSourceAccountId'];
-  feesPenaltyIncomeDisplayedColumns: string[] = ['chargeId', 'incomeAccountId'];
+  loanProductDatatables: any = [];
 
   constructor(private route: ActivatedRoute) {
-    this.route.data.subscribe((data: { loanProduct: any }) => {
-      this.loanProduct = data.loanProduct;
+    this.route.data.subscribe((data: { loanProductDatatables: any }) => {
+      this.loanProductDatatables = data.loanProductDatatables;
     });
   }
 
   ngOnInit() {
-    this.loanProduct.allowAttributeConfiguration = Object.values(this.loanProduct.allowAttributeOverrides).some((attribute: boolean) => attribute);
   }
 
 }
diff --git a/src/app/products/products-routing.module.ts b/src/app/products/products-routing.module.ts
index 579bb63e0..70f60d28d 100644
--- a/src/app/products/products-routing.module.ts
+++ b/src/app/products/products-routing.module.ts
@@ -112,6 +112,14 @@ import { CreateRangeComponent } from './manage-delinquency-buckets/delinquency-r
 import { CreateBucketComponent } from './manage-delinquency-buckets/delinquency-bucket/create-bucket/create-bucket.component';
 import { EditBucketComponent } from './manage-delinquency-buckets/delinquency-bucket/edit-bucket/edit-bucket.component';
 import { ViewBucketComponent } from './manage-delinquency-buckets/delinquency-bucket/view-bucket/view-bucket.component';
+import { LoanProductDatatablesResolver } from './loan-products/loan-product-datatables.resolver';
+import { GeneralTabComponent } from './loan-products/view-loan-product/general-tab/general-tab.component';
+import { DatatableTabComponent } from './loan-products/view-loan-product/datatable-tab/datatable-tab.component';
+import { LoanProductDatatableResolver } from './loan-products/loan-product-datatable.resolver';
+import { SavingProductDatatableResolver } from './saving-products/saving-product-datatable.resolver';
+import { SavingProductDatatablesResolver } from './saving-products/saving-product-datatables.resolver';
+import { SavingProductGeneralTabComponent } from './saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component';
+import { SavingProductDatatableTabComponent } from './saving-products/view-saving-product/saving-product-datatable-tab/saving-product-datatable-tab.component';
 
 /** Products Routes */
 const routes: Routes = [
@@ -140,22 +148,41 @@ const routes: Routes = [
               component: CreateLoanProductComponent,
               data: { title: extract('Create Loan Product'), breadcrumb: 'Create' },
               resolve: {
-                loanProductsTemplate: LoanProductsTemplateResolver
+                loanProductsTemplate: LoanProductsTemplateResolver,
+                loanProductDatatables: LoanProductDatatablesResolver
               }
             },
             {
-              path: ':id',
-              data: { title: extract('View Loan Product'), routeParamBreadcrumb: 'id' },
+              path: ':productId',
+              component: ViewLoanProductComponent,
               resolve: {
-                loanProduct: LoanProductResolver
+                loanProductDatatables: LoanProductDatatablesResolver
               },
+              data: { title: extract('View Loan Product'), breadcrumb: 'productId', routeParamBreadcrumb: 'productId' },
               children: [
                 {
                   path: '',
-                  component: ViewLoanProductComponent,
+                  redirectTo: 'general',
+                  pathMatch: 'full'
+                },
+                {
+                  path: 'general',
+                  data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false },
+                  component: GeneralTabComponent,
                   resolve: {
                     loanProduct: LoanProductResolver
-                  }
+                  },
+                },
+                {
+                  path: 'datatables',
+                  children: [{
+                    path: ':datatableName',
+                    component: DatatableTabComponent,
+                    data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
+                    resolve: {
+                      loanProductDatatable: LoanProductDatatableResolver
+                    }
+                  }]
                 },
                 {
                   path: 'edit',
@@ -185,22 +212,40 @@ const routes: Routes = [
               component: CreateSavingProductComponent,
               data: { title: extract('Create Saving Product'), breadcrumb: 'Create' },
               resolve: {
-                savingProductsTemplate: SavingProductsTemplateResolver
+                savingProductDatatables: SavingProductDatatablesResolver
               }
             },
             {
-              path: ':id',
-              data: { title: extract('View Saving Product'), routeParamBreadcrumb: 'id' },
+              path: ':productId',
+              component: ViewSavingProductComponent,
+              data: { title: extract('View Saving Product'), breadcrumb: 'productId', routeParamBreadcrumb: 'productId' },
               resolve: {
-                savingProduct: SavingProductResolver
+                savingProductDatatables: SavingProductDatatablesResolver
               },
               children: [
                 {
                   path: '',
-                  component: ViewSavingProductComponent,
+                  redirectTo: 'general',
+                  pathMatch: 'full'
+                },
+                {
+                  path: 'general',
+                  data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false },
+                  component: SavingProductGeneralTabComponent,
                   resolve: {
                     savingProduct: SavingProductResolver
-                  }
+                  },
+                },
+                {
+                  path: 'datatables',
+                  children: [{
+                    path: ':datatableName',
+                    component: SavingProductDatatableTabComponent,
+                    data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
+                    resolve: {
+                      savingProductDatatable: SavingProductDatatableResolver
+                    }
+                  }]
                 },
                 {
                   path: 'edit',
diff --git a/src/app/products/products.module.ts b/src/app/products/products.module.ts
index 04407ea9b..702061de9 100644
--- a/src/app/products/products.module.ts
+++ b/src/app/products/products.module.ts
@@ -106,6 +106,11 @@ import { EditRangeComponent } from './manage-delinquency-buckets/delinquency-ran
 import { ViewBucketComponent } from './manage-delinquency-buckets/delinquency-bucket/view-bucket/view-bucket.component';
 import { CreateBucketComponent } from './manage-delinquency-buckets/delinquency-bucket/create-bucket/create-bucket.component';
 import { EditBucketComponent } from './manage-delinquency-buckets/delinquency-bucket/edit-bucket/edit-bucket.component';
+import { LoanProductDatatableStepComponent } from './loan-products/loan-product-stepper/loan-product-datatable-step/loan-product-datatable-step.component';
+import { DatatableTabComponent } from './loan-products/view-loan-product/datatable-tab/datatable-tab.component';
+import { GeneralTabComponent } from './loan-products/view-loan-product/general-tab/general-tab.component';
+import { SavingProductGeneralTabComponent } from './saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component';
+import { SavingProductDatatableTabComponent } from './saving-products/view-saving-product/saving-product-datatable-tab/saving-product-datatable-tab.component';
 
 /**
  * Products Module
@@ -219,7 +224,12 @@ import { EditBucketComponent } from './manage-delinquency-buckets/delinquency-bu
     EditRangeComponent,
     ViewBucketComponent,
     CreateBucketComponent,
-    EditBucketComponent
+    EditBucketComponent,
+    LoanProductDatatableStepComponent,
+    DatatableTabComponent,
+    GeneralTabComponent,
+    SavingProductGeneralTabComponent,
+    SavingProductDatatableTabComponent
   ],
   entryComponents: [
     DepositProductIncentiveFormDialogComponent,
diff --git a/src/app/products/products.service.ts b/src/app/products/products.service.ts
index d60627239..9d2b18172 100644
--- a/src/app/products/products.service.ts
+++ b/src/app/products/products.service.ts
@@ -542,4 +542,54 @@ export class ProductsService {
     return this.http.post('/collateral-management', collateral);
   }
 
+  /**
+   * @param {string} product Product type.
+   * @returns {Observable<any>}
+   */
+  getProductDatatables(product: string): Observable<any> {
+    const httpParams = new HttpParams().set('apptable', product);
+    return this.http.get(`/datatables`, { params: httpParams });
+  }
+
+  /**
+   * @param {string} productId Product Id.
+   * @returns {Observable<any>}
+   */
+  getProductDatatable(productId: string, datatableName: string) {
+    const httpParams = new HttpParams().set('genericResultSet', 'true');
+    return this.http.get(`/datatables/${datatableName}/${productId}`, { params: httpParams });
+  }
+
+  /**
+   * @param {string} productId Product Id.
+   * @param {string} datatableName Datatable name
+   * @param {any} data Payload.
+   * @returns {Observable<any>}
+   */
+  addProductDatatableEntry(productId: string, datatableName: string, data: any) {
+    const httpParams = new HttpParams().set('genericResultSet', 'true');
+    return this.http.post(`/datatables/${datatableName}/${productId}`, data, { params: httpParams });
+  }
+
+  /**
+   * @param {string} productId Product Id.
+   * @param {string} datatableName Datatable name
+   * @param {any} data Payload.
+   * @returns {Observable<any>}
+   */
+  editProductDatatableEntry(productId: string, datatableName: string, data: any) {
+    const httpParams = new HttpParams().set('genericResultSet', 'true');
+    return this.http.put(`/datatables/${datatableName}/${productId}`, data, { params: httpParams });
+  }
+
+  /**
+   * @param {string} productId Product Id.
+   * @param {string} datatableName Datatable name
+   * @returns {Observable<any>}
+   */
+  deleteDatatableContent(productId: string, datatableName: string) {
+    const httpParams = new HttpParams().set('genericResultSet', 'true');
+    return this.http.delete(`/datatables/${datatableName}/${productId}`, { params: httpParams });
+  }
+
 }
diff --git a/src/app/products/saving-products/edit-saving-product/saving-product-and-template.resolver.ts b/src/app/products/saving-products/edit-saving-product/saving-product-and-template.resolver.ts
index ac95a571f..2e132da6a 100644
--- a/src/app/products/saving-products/edit-saving-product/saving-product-and-template.resolver.ts
+++ b/src/app/products/saving-products/edit-saving-product/saving-product-and-template.resolver.ts
@@ -24,8 +24,8 @@ export class SavingProductAndTemplateResolver implements Resolve<Object> {
    * @returns {Observable<any>}
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const savingProductId = route.paramMap.get('id');
-    return this.productsService.getSavingProduct(savingProductId, true);
+    const productId = route.paramMap.get('productId');
+    return this.productsService.getSavingProduct(productId, true);
   }
 
 }
diff --git a/src/app/products/saving-products/saving-product-datatable.resolver.spec.ts b/src/app/products/saving-products/saving-product-datatable.resolver.spec.ts
new file mode 100644
index 000000000..8dd45bbc1
--- /dev/null
+++ b/src/app/products/saving-products/saving-product-datatable.resolver.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SavingProductDatatableResolver } from './saving-product-datatable.resolver';
+
+describe('SavingProductDatatableResolver', () => {
+  let resolver: SavingProductDatatableResolver;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    resolver = TestBed.inject(SavingProductDatatableResolver);
+  });
+
+  it('should be created', () => {
+    expect(resolver).toBeTruthy();
+  });
+});
diff --git a/src/app/products/saving-products/saving-product-datatable.resolver.ts b/src/app/products/saving-products/saving-product-datatable.resolver.ts
new file mode 100644
index 000000000..fa1faa8ba
--- /dev/null
+++ b/src/app/products/saving-products/saving-product-datatable.resolver.ts
@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { SystemService } from 'app/system/system.service';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SavingProductDatatableResolver implements Resolve<boolean> {
+
+  /**
+   * @param {SystemService} systemService Products service.
+   */
+  constructor(private systemService: SystemService) { }
+
+  /**
+   * Returns the loan product data.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const productId = route.parent.parent.paramMap.get('productId');
+    const datatableName = route.paramMap.get('datatableName');
+    return this.systemService.getEntityDatatable(productId, datatableName);
+  }
+
+}
diff --git a/src/app/products/saving-products/saving-product-datatables.resolver.spec.ts b/src/app/products/saving-products/saving-product-datatables.resolver.spec.ts
new file mode 100644
index 000000000..00df8055c
--- /dev/null
+++ b/src/app/products/saving-products/saving-product-datatables.resolver.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SavingProductDatatablesResolver } from './saving-product-datatables.resolver';
+
+describe('SavingProductDatatablesResolver', () => {
+  let resolver: SavingProductDatatablesResolver;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    resolver = TestBed.inject(SavingProductDatatablesResolver);
+  });
+
+  it('should be created', () => {
+    expect(resolver).toBeTruthy();
+  });
+});
diff --git a/src/app/products/saving-products/saving-product-datatables.resolver.ts b/src/app/products/saving-products/saving-product-datatables.resolver.ts
new file mode 100644
index 000000000..9af38bcd9
--- /dev/null
+++ b/src/app/products/saving-products/saving-product-datatables.resolver.ts
@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import {
+  Router, Resolve,
+  RouterStateSnapshot,
+  ActivatedRouteSnapshot
+} from '@angular/router';
+import { SystemService } from 'app/system/system.service';
+import { Observable, of } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SavingProductDatatablesResolver implements Resolve<boolean> {
+
+  /**
+   * @param {SystemService} systemService Products service.
+   */
+  constructor(private systemService: SystemService) { }
+
+  /**
+   * Returns the loan product data.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    return this.systemService.getEntityDatatables('m_savings_product');
+  }
+}
diff --git a/src/app/products/saving-products/saving-product.resolver.ts b/src/app/products/saving-products/saving-product.resolver.ts
index 6eba7bced..fba567eff 100644
--- a/src/app/products/saving-products/saving-product.resolver.ts
+++ b/src/app/products/saving-products/saving-product.resolver.ts
@@ -24,8 +24,8 @@ export class SavingProductResolver implements Resolve<Object> {
    * @returns {Observable<any>}
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const id = route.paramMap.get('id');
-    return this.productsService.getSavingProduct(id);
+    const productId = route.parent.paramMap.get('productId');
+    return this.productsService.getSavingProduct(productId);
   }
 
 }
diff --git a/src/app/products/saving-products/view-saving-product/saving-product-datatable-tab/saving-product-datatable-tab.component.html b/src/app/products/saving-products/view-saving-product/saving-product-datatable-tab/saving-product-datatable-tab.component.html
new file mode 100644
index 000000000..36ee62413
--- /dev/null
+++ b/src/app/products/saving-products/view-saving-product/saving-product-datatable-tab/saving-product-datatable-tab.component.html
@@ -0,0 +1,9 @@
+<div class="tab-container mat-typography">
+  <mifosx-entity-datatable-tab
+    entityType="Savings Product"
+    [entityId]="entityId"
+    [multiRowDatatableFlag]="multiRowDatatableFlag"
+    [entityDatatable]="entityDatatable"
+  >
+  </mifosx-entity-datatable-tab>
+</div>
diff --git a/src/app/products/saving-products/view-saving-product/saving-product-datatable-tab/saving-product-datatable-tab.component.scss b/src/app/products/saving-products/view-saving-product/saving-product-datatable-tab/saving-product-datatable-tab.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/products/saving-products/view-saving-product/saving-product-datatable-tab/saving-product-datatable-tab.component.spec.ts b/src/app/products/saving-products/view-saving-product/saving-product-datatable-tab/saving-product-datatable-tab.component.spec.ts
new file mode 100644
index 000000000..1daae4466
--- /dev/null
+++ b/src/app/products/saving-products/view-saving-product/saving-product-datatable-tab/saving-product-datatable-tab.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SavingProductDatatableTabComponent } from './saving-product-datatable-tab.component';
+
+describe('SavingProductDatatableTabComponent', () => {
+  let component: SavingProductDatatableTabComponent;
+  let fixture: ComponentFixture<SavingProductDatatableTabComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SavingProductDatatableTabComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SavingProductDatatableTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/products/saving-products/view-saving-product/saving-product-datatable-tab/saving-product-datatable-tab.component.ts b/src/app/products/saving-products/view-saving-product/saving-product-datatable-tab/saving-product-datatable-tab.component.ts
new file mode 100644
index 000000000..2ef248a71
--- /dev/null
+++ b/src/app/products/saving-products/view-saving-product/saving-product-datatable-tab/saving-product-datatable-tab.component.ts
@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'mifosx-saving-product-datatable-tab',
+  templateUrl: './saving-product-datatable-tab.component.html',
+  styleUrls: ['./saving-product-datatable-tab.component.scss']
+})
+export class SavingProductDatatableTabComponent implements OnInit {
+  entityId: string;
+  entityDatatable: any;
+  multiRowDatatableFlag: boolean;
+
+  constructor(private route: ActivatedRoute) {
+    this.entityId = this.route.parent.parent.snapshot.paramMap.get('productId');
+
+    this.route.data.subscribe((data: { savingProductDatatable: any }) => {
+      this.entityDatatable = data.savingProductDatatable;
+      this.multiRowDatatableFlag = this.entityDatatable.columnHeaders[0].columnName === 'id' ? true : false;
+    });
+
+  }
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.html b/src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.html
new file mode 100644
index 000000000..7c1afc2b0
--- /dev/null
+++ b/src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.html
@@ -0,0 +1,353 @@
+
+<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
+  <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_SAVINGSPRODUCT'">
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
+  </button>
+</div>
+
+<div class="container">
+
+  <mat-card>
+
+    <mat-card-content>
+
+      <div fxLayout="row wrap" fxLayout.lt-md="column">
+
+        <h2 class="mat-h2" fxFlexFill>{{ savingProduct.name }}</h2>
+
+        <mat-divider [inset]="true"></mat-divider>
+
+        <h3 class="mat-h3" fxFlexFill>Details</h3>
+
+        <mat-divider [inset]="true"></mat-divider>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Short Name:</span>
+          <span fxFlex="60%">{{ savingProduct.shortName }}</span>
+        </div>
+
+        <div fxFlexFill *ngIf="savingProduct.description">
+          <span fxFlex="40%">Description:</span>
+          <span fxFlex="60%">{{ savingProduct.description }}</span>
+        </div>
+
+        <h3 class="mat-h3" fxFlexFill>Currency</h3>
+
+        <mat-divider [inset]="true"></mat-divider>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Currency:</span>
+          <span fxFlex="60%">{{ savingProduct.currency.name }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Decimal Places:</span>
+          <span fxFlex="60%">{{ savingProduct.currency.decimalPlaces }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Currency in multiples of:</span>
+          <span fxFlex="60%">{{ savingProduct.currency.inMultiplesOf }}</span>
+        </div>
+
+        <h3 class="mat-h3" fxFlexFill>Terms</h3>
+
+        <mat-divider [inset]="true"></mat-divider>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Nominal Annual Interest Rate:</span>
+          <span fxFlex="60%">{{ savingProduct.nominalAnnualInterestRate }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Interest Compounding Period:</span>
+          <span fxFlex="60%">{{ savingProduct.interestCompoundingPeriodType.value }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Interest Posting Period:</span>
+          <span fxFlex="60%">{{ savingProduct.interestPostingPeriodType.value }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Interest Calculated using:</span>
+          <span fxFlex="60%">{{ savingProduct.interestCalculationType.value }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Days in Year:</span>
+          <span fxFlex="60%">{{ savingProduct.interestCalculationDaysInYearType.value }}</span>
+        </div>
+
+        <h3 class="mat-h3" fxFlexFill>Settings</h3>
+
+        <mat-divider [inset]="true"></mat-divider>
+
+        <div fxFlexFill *ngIf="savingProduct.minRequiredOpeningBalance">
+          <span fxFlex="40%">Minimum Opening Balance:</span>
+          <span fxFlex="60%">{{ savingProduct.minRequiredOpeningBalance }}</span>
+        </div>
+
+        <div fxFlexFill *ngIf="savingProduct.lockinPeriodFrequency">
+          <span fxFlex="40%">Lock-in Period:</span>
+          <span fxFlex="60%">{{ savingProduct.lockinPeriodFrequency + ' ' + savingProduct.lockinPeriodFrequencyType.value }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Apply Withdrawal Fee for Transfers:</span>
+          <span fxFlex="60%">{{ savingProduct.withdrawalFeeForTransfers ? 'Yes' : 'No' }}</span>
+        </div>
+
+        <div fxFlexFill *ngIf="savingProduct.minBalanceForInterestCalculation">
+          <span fxFlex="40%">Balance Required for Interest Calculation:</span>
+          <span fxFlex="60%">{{ savingProduct.minBalanceForInterestCalculation }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Enforce Minimum Balance:</span>
+          <span fxFlex="60%">{{ savingProduct.enforceMinRequiredBalance ? 'Yes' : 'No' }}</span>
+        </div>
+
+        <div fxFlexFill *ngIf="savingProduct.minRequiredBalance">
+          <span fxFlex="40%">Minimum Balance:</span>
+          <span fxFlex="60%">{{ savingProduct.minRequiredBalance }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Withhold Tax is Applicable:</span>
+          <span fxFlex="60%">{{ savingProduct.withHoldTax ? 'Yes' : 'No' }}</span>
+        </div>
+
+        <div fxFlexFill *ngIf="savingProduct.withHoldTax">
+          <span fxFlex="40%">Tax Group:</span>
+          <span fxFlex="60%">{{ savingProduct.taxGroup.name }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Is Overdraft Allowed:</span>
+          <span fxFlex="60%">{{ savingProduct.allowOverdraft ? 'Yes' : 'No' }}</span>
+        </div>
+
+        <div fxFlexFill *ngIf="savingProduct.minOverdraftForInterestCalculation">
+          <span fxFlex="40%">Minimum Overdraft Required for Interest Calculation:</span>
+          <span fxFlex="60%">{{ savingProduct.minOverdraftForInterestCalculation }}</span>
+        </div>
+
+        <div fxFlexFill *ngIf="savingProduct.nominalAnnualInterestRateOverdraft">
+          <span fxFlex="40%">Nominal Annual Interest for Overdraft:</span>
+          <span fxFlex="60%">{{ savingProduct.nominalAnnualInterestRateOverdraft }}</span>
+        </div>
+
+        <div fxFlexFill *ngIf="savingProduct.overdraftLimit">
+          <span fxFlex="40%">Maximum Overdraft Amount Limit:</span>
+          <span fxFlex="60%">{{ savingProduct.overdraftLimit }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Enable Dormancy Tracking:</span>
+          <span fxFlex="60%">{{ savingProduct.isDormancyTrackingActive ? 'Yes' : 'No' }}</span>
+        </div>
+
+        <div fxFlexFill *ngIf="savingProduct.isDormancyTrackingActive" fxLayout="row wrap" fxLayout.lt-md="column">
+          <span fxFlex="40%">Number of Days to Inactive sub-status:</span>
+          <span fxFlex="60%">{{ savingProduct.daysToInactive }}</span>
+          <span fxFlex="40%">Number of Days to Dormant sub-status:</span>
+          <span fxFlex="60%">{{ savingProduct.daysToDormancy }}</span>
+          <span fxFlex="40%">Number of Days to Escheat:</span>
+          <span fxFlex="60%">{{ savingProduct.daysToEscheat }}</span>
+        </div>
+
+        <div fxFlexFill *ngIf="savingProduct.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
+
+          <h3 class="mat-h3" fxFlexFill>Charges</h3>
+
+          <mat-divider [inset]="true"></mat-divider>
+
+          <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="savingProduct.charges">
+
+            <ng-container matColumnDef="name">
+              <th mat-header-cell *matHeaderCellDef> Name </th>
+              <td mat-cell *matCellDef="let charge">
+                {{ charge.name + ', ' + charge.currency.displaySymbol }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="chargeCalculationType">
+              <th mat-header-cell *matHeaderCellDef> Type </th>
+              <td mat-cell *matCellDef="let charge">
+                {{ charge.chargeCalculationType.value }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="amount">
+              <th mat-header-cell *matHeaderCellDef> Amount </th>
+              <td mat-cell *matCellDef="let charge">
+                {{ charge.amount  }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="chargeTimeType">
+              <th mat-header-cell *matHeaderCellDef> Collected On </th>
+              <td mat-cell *matCellDef="let charge">
+                {{ charge.chargeTimeType.value }}
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
+
+          </table>
+
+        </div>
+
+        <h3 class="mat-h3" fxFlexFill>Accounting</h3>
+
+        <mat-divider [inset]="true"></mat-divider>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Type:</span>
+          <span fxFlex="60%">{{ savingProduct.accountingRule.value }}</span>
+        </div>
+
+        <div fxFlexFill *ngIf="savingProduct.accountingRule.id === 2" fxLayout="row wrap" fxLayout.lt-md="column">
+
+          <h4 fxFlexFill class="mat-h4">Assets</h4>
+
+          <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+            <span fxFlex="40%">Saving reference:</span>
+            <span fxFlex="60%">{{ savingProduct.accountingMappings.savingsReferenceAccount.name }}</span>
+            <span fxFlex="40%">Overdraft portfolio:</span>
+            <span fxFlex="60%">{{ savingProduct.accountingMappings.overdraftPortfolioControl.name }}</span>
+          </div>
+
+          <h4 fxFlexFill class="mat-h4">Liabilities</h4>
+
+          <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+            <span fxFlex="40%">Saving control:</span>
+            <span fxFlex="60%">{{ savingProduct.accountingMappings.savingsControlAccount.name }}</span>
+            <span fxFlex="40%">Savings transfers in suspense:</span>
+            <span fxFlex="60%">{{ savingProduct.accountingMappings.transfersInSuspenseAccount.name }}</span>
+            <div fxFlexFill *ngIf="savingProduct.isDormancyTrackingActive">
+              <span fxFlex="40%">Escheat liability:</span>
+              <span fxFlex="60%">{{ savingProduct.accountingMappings.escheatLiabilityAccount.name }}</span>
+            </div>
+          </div>
+
+          <h4 fxFlexFill class="mat-h4">Expenses</h4>
+
+          <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+            <span fxFlex="40%">Interest on savings:</span>
+            <span fxFlex="60%">{{ savingProduct.accountingMappings.interestOnSavingsAccount.name }}</span>
+            <span fxFlex="40%">Write-off:</span>
+            <span fxFlex="60%">{{ savingProduct.accountingMappings.writeOffAccount.name }}</span>
+          </div>
+
+          <h4 fxFlexFill class="mat-h4">Income</h4>
+
+          <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+            <span fxFlex="40%">Income from fees:</span>
+            <span fxFlex="60%">{{ savingProduct.accountingMappings.incomeFromFeeAccount.name }}</span>
+            <span fxFlex="40%">Income from penalties:</span>
+            <span fxFlex="60%">{{ savingProduct.accountingMappings.incomeFromPenaltyAccount.name }}</span>
+            <span fxFlex="40%">Overdraft Interest Income:</span>
+            <span fxFlex="60%">{{ savingProduct.accountingMappings.incomeFromInterest.name }}</span>
+          </div>
+
+          <div *ngIf="savingProduct.paymentChannelToFundSourceMappings?.length || savingProduct.feeToIncomeAccountMappings?.length || savingProduct.penaltyToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+
+            <h3 class="mat-h3" fxFlexFill>Advanced Accounting Rules</h3>
+
+            <mat-divider [inset]="true"></mat-divider>
+
+            <div *ngIf="savingProduct.paymentChannelToFundSourceMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+
+              <h4 class="mat-h4" fxFlexFill>Fund Sources for Payment Channels</h4>
+
+              <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="savingProduct.paymentChannelToFundSourceMappings">
+
+                <ng-container matColumnDef="paymentTypeId">
+                  <th mat-header-cell *matHeaderCellDef> Payment Type </th>
+                  <td mat-cell *matCellDef="let paymentFundSource">
+                    {{ paymentFundSource.paymentType.name }}
+                  </td>
+                </ng-container>
+
+                <ng-container matColumnDef="fundSourceAccountId">
+                  <th mat-header-cell *matHeaderCellDef> Fund Source </th>
+                  <td mat-cell *matCellDef="let paymentFundSource">
+                    {{ paymentFundSource.fundSourceAccount.name }}
+                  </td>
+                </ng-container>
+
+                <tr mat-header-row *matHeaderRowDef="paymentFundSourceDisplayedColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns;"></tr>
+
+              </table>
+
+            </div>
+
+            <div *ngIf="savingProduct.feeToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+
+              <h4 class="mat-h4" fxFlexFill>Fees to Specific Income Accounts</h4>
+
+              <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="savingProduct.feeToIncomeAccountMappings">
+
+                <ng-container matColumnDef="chargeId">
+                  <th mat-header-cell *matHeaderCellDef> Fees </th>
+                  <td mat-cell *matCellDef="let feesIncome">
+                    {{ feesIncome.charge.name }}
+                  </td>
+                </ng-container>
+
+                <ng-container matColumnDef="incomeAccountId">
+                  <th mat-header-cell *matHeaderCellDef> Income Account </th>
+                  <td mat-cell *matCellDef="let feesIncome">
+                    {{ feesIncome.incomeAccount.name }}
+                  </td>
+                </ng-container>
+
+                <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
+
+              </table>
+
+            </div>
+
+            <div *ngIf="savingProduct.penaltyToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+
+              <h4 class="mat-h4" fxFlexFill>Penalties to Specific Income Accounts</h4>
+
+              <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="savingProduct.penaltyToIncomeAccountMappings">
+
+                <ng-container matColumnDef="chargeId">
+                  <th mat-header-cell *matHeaderCellDef> Penalty </th>
+                  <td mat-cell *matCellDef="let penaltyIncome">
+                    {{ penaltyIncome.charge.name }}
+                  </td>
+                </ng-container>
+
+                <ng-container matColumnDef="incomeAccountId">
+                  <th mat-header-cell *matHeaderCellDef> Income Account </th>
+                  <td mat-cell *matCellDef="let penaltyIncome">
+                    {{ penaltyIncome.incomeAccount.name }}
+                  </td>
+                </ng-container>
+
+                <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
+
+              </table>
+
+            </div>
+
+          </div>
+
+        </div>
+
+      </div>
+
+    </mat-card-content>
+
+  </mat-card>
+
+</div>
diff --git a/src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.scss b/src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.scss
new file mode 100644
index 000000000..8f6633e58
--- /dev/null
+++ b/src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.scss
@@ -0,0 +1,12 @@
+@import "assets/styles/helper";
+
+.tab-container {
+  padding: 1%;
+  margin: 1%;
+}
+
+.mat-h3 {
+  margin-top: 10px !important;
+  font-weight: 300;
+  color: $status-approved;
+}
diff --git a/src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.spec.ts b/src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.spec.ts
new file mode 100644
index 000000000..20e486d89
--- /dev/null
+++ b/src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SavingProductGeneralTabComponent } from './saving-product-general-tab.component';
+
+describe('SavingProductGeneralTabComponent', () => {
+  let component: SavingProductGeneralTabComponent;
+  let fixture: ComponentFixture<SavingProductGeneralTabComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SavingProductGeneralTabComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SavingProductGeneralTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.ts b/src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.ts
new file mode 100644
index 000000000..85ea528c3
--- /dev/null
+++ b/src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'mifosx-saving-product-general-tab',
+  templateUrl: './saving-product-general-tab.component.html',
+  styleUrls: ['./saving-product-general-tab.component.scss']
+})
+export class SavingProductGeneralTabComponent implements OnInit {
+  savingProduct: any;
+
+  chargesDisplayedColumns: string[] = ['name', 'chargeCalculationType', 'amount', 'chargeTimeType'];
+  paymentFundSourceDisplayedColumns: string[] = ['paymentTypeId', 'fundSourceAccountId'];
+  feesPenaltyIncomeDisplayedColumns: string[] = ['chargeId', 'incomeAccountId'];
+
+  constructor(private route: ActivatedRoute) {
+    this.route.data.subscribe((data: { savingProduct: any }) => {
+      this.savingProduct = data.savingProduct;
+    });
+  }
+
+  ngOnInit() {
+  }
+}
diff --git a/src/app/products/saving-products/view-saving-product/view-saving-product.component.html b/src/app/products/saving-products/view-saving-product/view-saving-product.component.html
index 42f771292..5e009800d 100644
--- a/src/app/products/saving-products/view-saving-product/view-saving-product.component.html
+++ b/src/app/products/saving-products/view-saving-product/view-saving-product.component.html
@@ -1,353 +1,23 @@
-<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
-  <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_SAVINGSPRODUCT'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
-    Edit
-  </button>
-</div>
+<mat-card class="product-card">
 
-<div class="container">
+  <mat-card-content>
 
-  <mat-card>
+    <nav mat-tab-nav-bar class="navigation-tabs">
+      <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
+        [active]="general.isActive">
+        General
+      </a>
+      <ng-container *ngFor="let savingProductDatatable of savingProductDatatables">
+        <a mat-tab-link [routerLink]="['./datatables',savingProductDatatable.registeredTableName]" routerLinkActive
+          #datatable="routerLinkActive" [active]="datatable.isActive"
+          *mifosxHasPermission="'READ_' + savingProductDatatable.registeredTableName">
+          {{savingProductDatatable.registeredTableName}}
+        </a>
+      </ng-container>
+    </nav>
 
-    <mat-card-content>
+    <router-outlet></router-outlet>
 
-      <div fxLayout="row wrap" fxLayout.lt-md="column">
+  </mat-card-content>
 
-        <h2 class="mat-h2" fxFlexFill>{{ savingProduct.name }}</h2>
-      
-        <mat-divider [inset]="true"></mat-divider>
-      
-        <h3 class="mat-h3" fxFlexFill>Details</h3>
-      
-        <mat-divider [inset]="true"></mat-divider>
-      
-        <div fxFlexFill>
-          <span fxFlex="40%">Short Name:</span>
-          <span fxFlex="60%">{{ savingProduct.shortName }}</span>
-        </div>
-      
-        <div fxFlexFill *ngIf="savingProduct.description">
-          <span fxFlex="40%">Description:</span>
-          <span fxFlex="60%">{{ savingProduct.description }}</span>
-        </div>
-      
-        <h3 class="mat-h3" fxFlexFill>Currency</h3>
-      
-        <mat-divider [inset]="true"></mat-divider>
-      
-        <div fxFlexFill>
-          <span fxFlex="40%">Currency:</span>
-          <span fxFlex="60%">{{ savingProduct.currency.name }}</span>
-        </div>
-      
-        <div fxFlexFill>
-          <span fxFlex="40%">Decimal Places:</span>
-          <span fxFlex="60%">{{ savingProduct.currency.decimalPlaces }}</span>
-        </div>
-      
-        <div fxFlexFill>
-          <span fxFlex="40%">Currency in multiples of:</span>
-          <span fxFlex="60%">{{ savingProduct.currency.inMultiplesOf }}</span>
-        </div>
-      
-        <h3 class="mat-h3" fxFlexFill>Terms</h3>
-      
-        <mat-divider [inset]="true"></mat-divider>
-      
-        <div fxFlexFill>
-          <span fxFlex="40%">Nominal Annual Interest Rate:</span>
-          <span fxFlex="60%">{{ savingProduct.nominalAnnualInterestRate }}</span>
-        </div>
-      
-        <div fxFlexFill>
-          <span fxFlex="40%">Interest Compounding Period:</span>
-          <span fxFlex="60%">{{ savingProduct.interestCompoundingPeriodType.value }}</span>
-        </div>
-      
-        <div fxFlexFill>
-          <span fxFlex="40%">Interest Posting Period:</span>
-          <span fxFlex="60%">{{ savingProduct.interestPostingPeriodType.value }}</span>
-        </div>
-      
-        <div fxFlexFill>
-          <span fxFlex="40%">Interest Calculated using:</span>
-          <span fxFlex="60%">{{ savingProduct.interestCalculationType.value }}</span>
-        </div>
-      
-        <div fxFlexFill>
-          <span fxFlex="40%">Days in Year:</span>
-          <span fxFlex="60%">{{ savingProduct.interestCalculationDaysInYearType.value }}</span>
-        </div>
-      
-        <h3 class="mat-h3" fxFlexFill>Settings</h3>
-      
-        <mat-divider [inset]="true"></mat-divider>
-      
-        <div fxFlexFill *ngIf="savingProduct.minRequiredOpeningBalance">
-          <span fxFlex="40%">Minimum Opening Balance:</span>
-          <span fxFlex="60%">{{ savingProduct.minRequiredOpeningBalance }}</span>
-        </div>
-      
-        <div fxFlexFill *ngIf="savingProduct.lockinPeriodFrequency">
-          <span fxFlex="40%">Lock-in Period:</span>
-          <span fxFlex="60%">{{ savingProduct.lockinPeriodFrequency + ' ' + savingProduct.lockinPeriodFrequencyType.value }}</span>
-        </div>
-      
-        <div fxFlexFill>
-          <span fxFlex="40%">Apply Withdrawal Fee for Transfers:</span>
-          <span fxFlex="60%">{{ savingProduct.withdrawalFeeForTransfers ? 'Yes' : 'No' }}</span>
-        </div>
-      
-        <div fxFlexFill *ngIf="savingProduct.minBalanceForInterestCalculation">
-          <span fxFlex="40%">Balance Required for Interest Calculation:</span>
-          <span fxFlex="60%">{{ savingProduct.minBalanceForInterestCalculation }}</span>
-        </div>
-      
-        <div fxFlexFill>
-          <span fxFlex="40%">Enforce Minimum Balance:</span>
-          <span fxFlex="60%">{{ savingProduct.enforceMinRequiredBalance ? 'Yes' : 'No' }}</span>
-        </div>
-      
-        <div fxFlexFill *ngIf="savingProduct.minRequiredBalance">
-          <span fxFlex="40%">Minimum Balance:</span>
-          <span fxFlex="60%">{{ savingProduct.minRequiredBalance }}</span>
-        </div>
-      
-        <div fxFlexFill>
-          <span fxFlex="40%">Withhold Tax is Applicable:</span>
-          <span fxFlex="60%">{{ savingProduct.withHoldTax ? 'Yes' : 'No' }}</span>
-        </div>
-      
-        <div fxFlexFill *ngIf="savingProduct.withHoldTax">
-          <span fxFlex="40%">Tax Group:</span>
-          <span fxFlex="60%">{{ savingProduct.taxGroup.name }}</span>
-        </div>
-      
-        <div fxFlexFill>
-          <span fxFlex="40%">Is Overdraft Allowed:</span>
-          <span fxFlex="60%">{{ savingProduct.allowOverdraft ? 'Yes' : 'No' }}</span>
-        </div>
-      
-        <div fxFlexFill *ngIf="savingProduct.minOverdraftForInterestCalculation">
-          <span fxFlex="40%">Minimum Overdraft Required for Interest Calculation:</span>
-          <span fxFlex="60%">{{ savingProduct.minOverdraftForInterestCalculation }}</span>
-        </div>
-      
-        <div fxFlexFill *ngIf="savingProduct.nominalAnnualInterestRateOverdraft">
-          <span fxFlex="40%">Nominal Annual Interest for Overdraft:</span>
-          <span fxFlex="60%">{{ savingProduct.nominalAnnualInterestRateOverdraft }}</span>
-        </div>
-      
-        <div fxFlexFill *ngIf="savingProduct.overdraftLimit">
-          <span fxFlex="40%">Maximum Overdraft Amount Limit:</span>
-          <span fxFlex="60%">{{ savingProduct.overdraftLimit }}</span>
-        </div>
-      
-        <div fxFlexFill>
-          <span fxFlex="40%">Enable Dormancy Tracking:</span>
-          <span fxFlex="60%">{{ savingProduct.isDormancyTrackingActive ? 'Yes' : 'No' }}</span>
-        </div>
-      
-        <div fxFlexFill *ngIf="savingProduct.isDormancyTrackingActive" fxLayout="row wrap" fxLayout.lt-md="column">
-          <span fxFlex="40%">Number of Days to Inactive sub-status:</span>
-          <span fxFlex="60%">{{ savingProduct.daysToInactive }}</span>
-          <span fxFlex="40%">Number of Days to Dormant sub-status:</span>
-          <span fxFlex="60%">{{ savingProduct.daysToDormancy }}</span>
-          <span fxFlex="40%">Number of Days to Escheat:</span>
-          <span fxFlex="60%">{{ savingProduct.daysToEscheat }}</span>
-        </div>
-      
-        <div fxFlexFill *ngIf="savingProduct.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
-      
-          <h3 class="mat-h3" fxFlexFill>Charges</h3>
-      
-          <mat-divider [inset]="true"></mat-divider>
-      
-          <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="savingProduct.charges">
-      
-            <ng-container matColumnDef="name">
-              <th mat-header-cell *matHeaderCellDef> Name </th>
-              <td mat-cell *matCellDef="let charge">
-                {{ charge.name + ', ' + charge.currency.displaySymbol }}
-              </td>
-            </ng-container>
-      
-            <ng-container matColumnDef="chargeCalculationType">
-              <th mat-header-cell *matHeaderCellDef> Type </th>
-              <td mat-cell *matCellDef="let charge">
-                {{ charge.chargeCalculationType.value }}
-              </td>
-            </ng-container>
-      
-            <ng-container matColumnDef="amount">
-              <th mat-header-cell *matHeaderCellDef> Amount </th>
-              <td mat-cell *matCellDef="let charge">
-                {{ charge.amount  }}
-              </td>
-            </ng-container>
-      
-            <ng-container matColumnDef="chargeTimeType">
-              <th mat-header-cell *matHeaderCellDef> Collected On </th>
-              <td mat-cell *matCellDef="let charge">
-                {{ charge.chargeTimeType.value }}
-              </td>
-            </ng-container>
-      
-            <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
-      
-          </table>
-      
-        </div>
-      
-        <h3 class="mat-h3" fxFlexFill>Accounting</h3>
-      
-        <mat-divider [inset]="true"></mat-divider>
-      
-        <div fxFlexFill>
-          <span fxFlex="40%">Type:</span>
-          <span fxFlex="60%">{{ savingProduct.accountingRule.value }}</span>
-        </div>
-      
-        <div fxFlexFill *ngIf="savingProduct.accountingRule.id === 2" fxLayout="row wrap" fxLayout.lt-md="column">
-      
-          <h4 fxFlexFill class="mat-h4">Assets</h4>
-      
-          <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-            <span fxFlex="40%">Saving reference:</span>
-            <span fxFlex="60%">{{ savingProduct.accountingMappings.savingsReferenceAccount.name }}</span>
-            <span fxFlex="40%">Overdraft portfolio:</span>
-            <span fxFlex="60%">{{ savingProduct.accountingMappings.overdraftPortfolioControl.name }}</span>
-          </div>
-      
-          <h4 fxFlexFill class="mat-h4">Liabilities</h4>
-      
-          <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-            <span fxFlex="40%">Saving control:</span>
-            <span fxFlex="60%">{{ savingProduct.accountingMappings.savingsControlAccount.name }}</span>
-            <span fxFlex="40%">Savings transfers in suspense:</span>
-            <span fxFlex="60%">{{ savingProduct.accountingMappings.transfersInSuspenseAccount.name }}</span>
-            <div fxFlexFill *ngIf="savingProduct.isDormancyTrackingActive">
-              <span fxFlex="40%">Escheat liability:</span>
-              <span fxFlex="60%">{{ savingProduct.accountingMappings.escheatLiabilityAccount.name }}</span>
-            </div>
-          </div>
-      
-          <h4 fxFlexFill class="mat-h4">Expenses</h4>
-      
-          <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-            <span fxFlex="40%">Interest on savings:</span>
-            <span fxFlex="60%">{{ savingProduct.accountingMappings.interestOnSavingsAccount.name }}</span>
-            <span fxFlex="40%">Write-off:</span>
-            <span fxFlex="60%">{{ savingProduct.accountingMappings.writeOffAccount.name }}</span>
-          </div>
-      
-          <h4 fxFlexFill class="mat-h4">Income</h4>
-      
-          <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-            <span fxFlex="40%">Income from fees:</span>
-            <span fxFlex="60%">{{ savingProduct.accountingMappings.incomeFromFeeAccount.name }}</span>
-            <span fxFlex="40%">Income from penalties:</span>
-            <span fxFlex="60%">{{ savingProduct.accountingMappings.incomeFromPenaltyAccount.name }}</span>
-            <span fxFlex="40%">Overdraft Interest Income:</span>
-            <span fxFlex="60%">{{ savingProduct.accountingMappings.incomeFromInterest.name }}</span>
-          </div>
-      
-          <div *ngIf="savingProduct.paymentChannelToFundSourceMappings?.length || savingProduct.feeToIncomeAccountMappings?.length || savingProduct.penaltyToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-      
-            <h3 class="mat-h3" fxFlexFill>Advanced Accounting Rules</h3>
-      
-            <mat-divider [inset]="true"></mat-divider>
-      
-            <div *ngIf="savingProduct.paymentChannelToFundSourceMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-      
-              <h4 class="mat-h4" fxFlexFill>Fund Sources for Payment Channels</h4>
-      
-              <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="savingProduct.paymentChannelToFundSourceMappings">
-      
-                <ng-container matColumnDef="paymentTypeId">
-                  <th mat-header-cell *matHeaderCellDef> Payment Type </th>
-                  <td mat-cell *matCellDef="let paymentFundSource">
-                    {{ paymentFundSource.paymentType.name }}
-                  </td>
-                </ng-container>
-      
-                <ng-container matColumnDef="fundSourceAccountId">
-                  <th mat-header-cell *matHeaderCellDef> Fund Source </th>
-                  <td mat-cell *matCellDef="let paymentFundSource">
-                    {{ paymentFundSource.fundSourceAccount.name }}
-                  </td>
-                </ng-container>
-      
-                <tr mat-header-row *matHeaderRowDef="paymentFundSourceDisplayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns;"></tr>
-      
-              </table>
-      
-            </div>
-      
-            <div *ngIf="savingProduct.feeToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-      
-              <h4 class="mat-h4" fxFlexFill>Fees to Specific Income Accounts</h4>
-      
-              <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="savingProduct.feeToIncomeAccountMappings">
-      
-                <ng-container matColumnDef="chargeId">
-                  <th mat-header-cell *matHeaderCellDef> Fees </th>
-                  <td mat-cell *matCellDef="let feesIncome">
-                    {{ feesIncome.charge.name }}
-                  </td>
-                </ng-container>
-      
-                <ng-container matColumnDef="incomeAccountId">
-                  <th mat-header-cell *matHeaderCellDef> Income Account </th>
-                  <td mat-cell *matCellDef="let feesIncome">
-                    {{ feesIncome.incomeAccount.name }}
-                  </td>
-                </ng-container>
-      
-                <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
-      
-              </table>
-      
-            </div>
-      
-            <div *ngIf="savingProduct.penaltyToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-      
-              <h4 class="mat-h4" fxFlexFill>Penalties to Specific Income Accounts</h4>
-      
-              <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="savingProduct.penaltyToIncomeAccountMappings">
-      
-                <ng-container matColumnDef="chargeId">
-                  <th mat-header-cell *matHeaderCellDef> Penalty </th>
-                  <td mat-cell *matCellDef="let penaltyIncome">
-                    {{ penaltyIncome.charge.name }}
-                  </td>
-                </ng-container>
-      
-                <ng-container matColumnDef="incomeAccountId">
-                  <th mat-header-cell *matHeaderCellDef> Income Account </th>
-                  <td mat-cell *matCellDef="let penaltyIncome">
-                    {{ penaltyIncome.incomeAccount.name }}
-                  </td>
-                </ng-container>
-      
-                <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
-      
-              </table>
-      
-            </div>
-      
-          </div>
-      
-        </div>
-      
-      </div>     
-
-    </mat-card-content>
-
-  </mat-card>
-
-</div>
+</mat-card>
diff --git a/src/app/products/saving-products/view-saving-product/view-saving-product.component.scss b/src/app/products/saving-products/view-saving-product/view-saving-product.component.scss
index a9f4fce2a..c345a82ac 100644
--- a/src/app/products/saving-products/view-saving-product/view-saving-product.component.scss
+++ b/src/app/products/saving-products/view-saving-product/view-saving-product.component.scss
@@ -1,24 +1,13 @@
-table {
-  width: 100%;
-}
+.product-card {
+  margin: 0 auto;
+  max-width: 80rem;
+  width: 90%;
+  padding: 0;
 
-.mat-elevation-z1 {
-  margin: 1em 0 1.5em 0;
-}
-
-h2, h3, h4 {
-  margin: 0;
-  font-weight: 500;
-}
-
-span {
-  margin: 0.5em 0;
-}
-
-.mat-card .mat-divider-horizontal.mat-divider-inset {
-  margin: 0 0 0.5em 0;
-}
-
-.margin-t {
-  margin-top: 1em;
+  .navigation-tabs {
+    overflow: auto;
+  }
+  i:hover {
+    cursor: pointer;
+  }
 }
diff --git a/src/app/products/saving-products/view-saving-product/view-saving-product.component.ts b/src/app/products/saving-products/view-saving-product/view-saving-product.component.ts
index 0fe87a98b..812ab3de7 100644
--- a/src/app/products/saving-products/view-saving-product/view-saving-product.component.ts
+++ b/src/app/products/saving-products/view-saving-product/view-saving-product.component.ts
@@ -8,15 +8,11 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class ViewSavingProductComponent implements OnInit {
 
-  savingProduct: any;
-
-  chargesDisplayedColumns: string[] = ['name', 'chargeCalculationType', 'amount', 'chargeTimeType'];
-  paymentFundSourceDisplayedColumns: string[] = ['paymentTypeId', 'fundSourceAccountId'];
-  feesPenaltyIncomeDisplayedColumns: string[] = ['chargeId', 'incomeAccountId'];
+  savingProductDatatables: any = [];
 
   constructor(private route: ActivatedRoute) {
-    this.route.data.subscribe((data: { savingProduct: any }) => {
-      this.savingProduct = data.savingProduct;
+    this.route.data.subscribe((data: { savingProductDatatables: any }) => {
+      this.savingProductDatatables = data.savingProductDatatables;
     });
   }
 
diff --git a/src/app/reports/run-report/table-and-sms/table-and-sms.component.html b/src/app/reports/run-report/table-and-sms/table-and-sms.component.html
index e813e6918..9c35ca7e3 100644
--- a/src/app/reports/run-report/table-and-sms/table-and-sms.component.html
+++ b/src/app/reports/run-report/table-and-sms/table-and-sms.component.html
@@ -11,7 +11,7 @@
       <div *ngFor= "let column of displayedColumns index as i">
         <ng-container [matColumnDef]="column">
           <th mat-header-cell *matHeaderCellDef>{{column}}</th>
-          <td mat-cell *matCellDef="let param" > 
+          <td mat-cell *matCellDef="let param" >
             <span *ngIf="isDecimal(i)">{{toDecimal(param.row[i])}}</span>
             <span *ngIf="!isDecimal(i)">{{param.row[i]}}</span>
           </td>
@@ -20,7 +20,7 @@
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" ></tr>
     </table>
-    <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+    <mat-paginator [pageSizeOptions]="[100, 200, 300]" showFirstLastButtons></mat-paginator>
   </div>
 
 </div>
diff --git a/src/app/savings/savings-account-view/datatable-tabs/datatable-tabs.component.html b/src/app/savings/savings-account-view/datatable-tabs/datatable-tabs.component.html
index cd642dc5c..712ebe911 100644
--- a/src/app/savings/savings-account-view/datatable-tabs/datatable-tabs.component.html
+++ b/src/app/savings/savings-account-view/datatable-tabs/datatable-tabs.component.html
@@ -1,4 +1,9 @@
-<div>
-  <mifosx-multi-row *ngIf="multiRowDatatableFlag" [dataObject]="savingsDatatable"></mifosx-multi-row>
-  <mifosx-single-row *ngIf="!multiRowDatatableFlag" [dataObject]="savingsDatatable"></mifosx-single-row>
+<div class="tab-container mat-typography">
+  <mifosx-entity-datatable-tab
+    entityType="Savings"
+    [entityId]="entityId"
+    [multiRowDatatableFlag]="multiRowDatatableFlag"
+    [entityDatatable]="entityDatatable"
+  >
+  </mifosx-entity-datatable-tab>
 </div>
diff --git a/src/app/savings/savings-account-view/datatable-tabs/datatable-tabs.component.ts b/src/app/savings/savings-account-view/datatable-tabs/datatable-tabs.component.ts
index 460799d42..aa665be93 100644
--- a/src/app/savings/savings-account-view/datatable-tabs/datatable-tabs.component.ts
+++ b/src/app/savings/savings-account-view/datatable-tabs/datatable-tabs.component.ts
@@ -11,9 +11,9 @@ import { ActivatedRoute } from '@angular/router';
   styleUrls: ['./datatable-tabs.component.scss']
 })
 export class DatatableTabsComponent {
-
+  entityId: string;
   /** Savings Datatable */
-  savingsDatatable: any;
+  entityDatatable: any;
   /** Multi Row Datatable Flag */
   multiRowDatatableFlag: boolean;
 
@@ -22,9 +22,11 @@ export class DatatableTabsComponent {
    * @param {ActivatedRoute} route Activated Route.
    */
   constructor(private route: ActivatedRoute) {
+    this.entityId = this.route.parent.parent.snapshot.paramMap.get('savingAccountId');
+
     this.route.data.subscribe((data: { savingsDatatable: any }) => {
-      this.savingsDatatable = data.savingsDatatable;
-      this.multiRowDatatableFlag = this.savingsDatatable.columnHeaders[0].columnName === 'id' ? true : false;
+      this.entityDatatable = data.savingsDatatable;
+      this.multiRowDatatableFlag = this.entityDatatable.columnHeaders[0].columnName === 'id' ? true : false;
     });
   }
 
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
deleted file mode 100644
index 4825eaf98..000000000
--- a/src/app/savings/savings-account-view/datatable-tabs/multi-row/multi-row.component.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<div class="tab-container mat-typography">
-
-  <div fxLayout="row" fxLayoutAlign="start">
-    <div class="m-b-10">
-      <h3>{{datatableName}}</h3>
-    </div>
-    <div class="action-button m-b-5" fxLayoutGap="10px">
-      <span *mifosxHasPermission="'CREATE_' + datatableName">
-        <button mat-raised-button color="primary" (click)="add()">
-          <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
-        </button>
-      </span>
-      <span *mifosxHasPermission="'DELETE_' + datatableName">
-        <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="showDeleteBotton">
-          <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete All
-        </button>
-      </span>
-    </div>
-  </div>
-
-  <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 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>
diff --git a/src/app/savings/savings-account-view/datatable-tabs/multi-row/multi-row.component.scss b/src/app/savings/savings-account-view/datatable-tabs/multi-row/multi-row.component.scss
deleted file mode 100644
index 6fa6a5f4e..000000000
--- a/src/app/savings/savings-account-view/datatable-tabs/multi-row/multi-row.component.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.tab-container {
-  padding: 1%;
-  margin: 1%;
-  .action-button{
-    margin-left: auto;
-  }
-  table {
-    width: 100%;
-  }
-}
diff --git a/src/app/savings/savings-account-view/datatable-tabs/multi-row/multi-row.component.spec.ts b/src/app/savings/savings-account-view/datatable-tabs/multi-row/multi-row.component.spec.ts
deleted file mode 100644
index dd46589d8..000000000
--- a/src/app/savings/savings-account-view/datatable-tabs/multi-row/multi-row.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MultiRowComponent } from './multi-row.component';
-
-describe('MultiRowComponent', () => {
-  let component: MultiRowComponent;
-  let fixture: ComponentFixture<MultiRowComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ MultiRowComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MultiRowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
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
deleted file mode 100644
index 2daaf31d1..000000000
--- a/src/app/savings/savings-account-view/datatable-tabs/multi-row/multi-row.component.ts
+++ /dev/null
@@ -1,159 +0,0 @@
-/** Angular Imports */
-import { Component, OnChanges, OnInit, Input, ViewChild } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { MatTable } from '@angular/material/table';
-import { MatDialog } from '@angular/material/dialog';
-
-/** Custom Dialogs */
-import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
-import { DeleteDialogComponent } from '../../../../shared/delete-dialog/delete-dialog.component';
-import { SettingsService } from 'app/settings/settings.service';
-
-/** Custom Models */
-import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
-import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
-import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
-import { CheckboxBase } from 'app/shared/form-dialog/formfield/model/checkbox-base';
-import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
-
-/** Custom Services */
-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
- */
-@Component({
-  selector: 'mifosx-multi-row',
-  templateUrl: './multi-row.component.html',
-  styleUrls: ['./multi-row.component.scss']
-})
-export class MultiRowComponent implements OnInit, OnChanges {
-
-  /** Data Object */
-  @Input() dataObject: any;
-
-  /** Data Table Name */
-  datatableName: string;
-  /** Data Table Columns */
-  datatableColumns: string[] = [];
-  /** Data Table Data */
-  datatableData: any;
-  /** Savings Id */
-  savingAccountId: string;
-  /** Toggle button visibility */
-  showDeleteBotton: boolean;
-
-  /** Data Table Reference */
-  @ViewChild('dataTable', { static: true }) dataTableRef: MatTable<Element>;
-
-  /**
-   * Fetches savings account Id from parent route params.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Dates} dateUtils Date Utils.
-   * @param {SavingsService} savingsService Savingss Service.
-   * @param {MatDialog} dialog Mat Dialog.
-   * @param {SettingsService} settingsService Setting service
-   * @param {Datatables} datatables Datatable utils
-   */
-  constructor(private route: ActivatedRoute,
-              private dateUtils: Dates,
-              private savingsService: SavingsService,
-              private dialog: MatDialog,
-              private settingsService: SettingsService,
-              private datatables: Datatables,
-              private dateFormat: DateFormatPipe,
-              private dateTimeFormat: DatetimeFormatPipe,
-              private numberFormat: DecimalPipe) {
-    this.savingAccountId = this.route.parent.parent.snapshot.paramMap.get('savingAccountId');
-  }
-
-  /**
-   * Updates related variables on changes to dataObject.
-   */
-  ngOnChanges() {
-    this.datatableColumns = this.dataObject.columnHeaders.map((columnHeader: any) => {
-      return columnHeader.columnName;
-    });
-    this.datatableData = this.dataObject.data;
-    this.showDeleteBotton = this.datatableData[0] ? true : false;
-  }
-
-  /**
-   * Fetches data table name from route params.
-   * subscription is required due to asynchronicity.
-   */
-  ngOnInit() {
-    this.route.params.subscribe((routeParams: any) => {
-      this.datatableName = routeParams.datatableName;
-    });
-  }
-
-  /**
-   * Adds a new row to the given multi row data table.
-   */
-  add() {
-    let dataTableEntryObject: any = { locale: this.settingsService.language.code };
-    const dateTransformColumns: string[] = [];
-    const columns = this.dataObject.columnHeaders.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'savings_account_id'));
-    });
-    const formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
-    const data = {
-      title: 'Add ' + this.datatableName,
-      formfields: formfields
-    };
-    const addDialogRef = this.dialog.open(FormDialogComponent, { data });
-    addDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.savingsService.addSavingsDatatableEntry(this.savingAccountId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.savingsService.getSavingsDatatable(this.savingAccountId, this.datatableName).subscribe((dataObject: any) => {
-            this.datatableData = dataObject.data;
-            this.dataTableRef.renderRows();
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Deletes all rows of the given multi row data table.
-   */
-  delete() {
-    const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `the contents of ${this.datatableName}` }
-    });
-    deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.delete) {
-        this.savingsService.deleteDatatableContent(this.savingAccountId, this.datatableName).subscribe(() => {
-          this.savingsService.getSavingsDatatable(this.savingAccountId, this.datatableName).subscribe((dataObject: any) => {
-            this.datatableData = dataObject.data;
-            this.showDeleteBotton = false;
-            this.dataTableRef.renderRows();
-           });
-        });
-      }
-    });
-  }
-
-  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
deleted file mode 100644
index e933bf643..000000000
--- a/src/app/savings/savings-account-view/datatable-tabs/single-row/single-row.component.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<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>
-
-  <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/savings/savings-account-view/datatable-tabs/single-row/single-row.component.scss b/src/app/savings/savings-account-view/datatable-tabs/single-row/single-row.component.scss
deleted file mode 100644
index 63d2cfc9e..000000000
--- a/src/app/savings/savings-account-view/datatable-tabs/single-row/single-row.component.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.tab-container {
-  padding: 1%;
-  margin: 1%;
-  .delete-button {
-    margin-left: 1%;
-  }
-}
diff --git a/src/app/savings/savings-account-view/datatable-tabs/single-row/single-row.component.spec.ts b/src/app/savings/savings-account-view/datatable-tabs/single-row/single-row.component.spec.ts
deleted file mode 100644
index 8aece650c..000000000
--- a/src/app/savings/savings-account-view/datatable-tabs/single-row/single-row.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SingleRowComponent } from './single-row.component';
-
-describe('SingleRowComponent', () => {
-  let component: SingleRowComponent;
-  let fixture: ComponentFixture<SingleRowComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SingleRowComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SingleRowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/savings/savings-account-view/datatable-tabs/single-row/single-row.component.ts b/src/app/savings/savings-account-view/datatable-tabs/single-row/single-row.component.ts
deleted file mode 100644
index 293e35cf3..000000000
--- a/src/app/savings/savings-account-view/datatable-tabs/single-row/single-row.component.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-/** Angular Imports */
-import { Component, Input, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { MatDialog } from '@angular/material/dialog';
-
-/** Custom Components */
-import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
-import { DeleteDialogComponent } from '../../../../shared/delete-dialog/delete-dialog.component';
-import { SettingsService } from 'app/settings/settings.service';
-
-/** Custom Models */
-import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
-
-/** Custom Services */
-import { SavingsService } from '../../../savings.service';
-import { Dates } from 'app/core/utils/dates';
-import { Datatables } from 'app/core/utils/datatables';
-
-
-/**
- * Savings Account Single Row Data Tables
- */
-@Component({
-  selector: 'mifosx-single-row',
-  templateUrl: './single-row.component.html',
-  styleUrls: ['./single-row.component.scss']
-})
-export class SingleRowComponent implements OnInit {
-
-  /** Data Object */
-  @Input() dataObject: any;
-
-  /** Data Table Name */
-  datatableName: string;
-  /** Savings Id */
-  savingAccountId: string;
-
-  /**
-   * Fetches savings account Id from parent route params.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {Dates} dateUtils Date Utils.
-   * @param {SavingsService} savingsService Savingss Service.
-   * @param {MatDialog} dialog Mat Dialog.
-   * @param {SettingsService} settingsService Setting service
-   * @param {Datatables} datatables Datatable utils
-   */
-  constructor(private route: ActivatedRoute,
-              private dateUtils: Dates,
-              private dialog: MatDialog,
-              private savingsService: SavingsService,
-              private settingsService: SettingsService,
-              private datatables: Datatables) {
-    this.savingAccountId = this.route.parent.parent.snapshot.paramMap.get('savingAccountId');
-  }
-
-  /**
-   * Fetches data table name from route params.
-   * subscription is required due to asynchronicity.
-   */
-  ngOnInit() {
-    this.route.params.subscribe((routeParams: any) => {
-      this.datatableName = routeParams.datatableName;
-    });
-  }
-
-  /**
-   * Creates a new instance of the given single row data table.
-   */
-  add() {
-    let dataTableEntryObject: any = { locale: this.settingsService.language.code };
-    const dateTransformColumns: string[] = [];
-    const columns = this.dataObject.columnHeaders.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'savings_account_id'));
-    });
-    const formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
-    const data = {
-      title: 'Add ' + this.datatableName,
-      formfields: formfields
-    };
-    const addDialogRef = this.dialog.open(FormDialogComponent, { data });
-    addDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.savingsService.addSavingsDatatableEntry(this.savingAccountId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.savingsService.getSavingsDatatable(this.savingAccountId, this.datatableName).subscribe((dataObject: any) => {
-            this.dataObject = dataObject;
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Edits the current instance of single row data table.
-   */
-  edit() {
-    let dataTableEntryObject: any = { locale: this.settingsService.language.code };
-    const dateTransformColumns: string[] = [];
-    const columns = this.dataObject.columnHeaders.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'savings_account_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
-    });
-    let formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
-    formfields = formfields.map((formfield: FormfieldBase, index: number) => {
-      formfield.value = (this.dataObject.data[0].row[index + 1]) ? this.dataObject.data[0].row[index + 1] : '';
-      return formfield;
-    });
-    const data = {
-      title: 'Edit ' + this.datatableName,
-      layout: { addButtonText: 'Confirm' },
-      formfields: formfields
-    };
-    const editDialogRef = this.dialog.open(FormDialogComponent, { data });
-    editDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
-        });
-        dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.savingsService.editSavingsDatatableEntry(this.savingAccountId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.savingsService.getSavingsDatatable(this.savingAccountId, this.datatableName).subscribe((dataObject: any) => {
-            this.dataObject = dataObject;
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Deletes the current instance of single row data table.
-   */
-  delete() {
-    const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `the contents of ${this.datatableName}` }
-    });
-    deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.delete) {
-        this.savingsService.deleteDatatableContent(this.savingAccountId, this.datatableName)
-          .subscribe(() => {
-            this.savingsService.getSavingsDatatable(this.savingAccountId, this.datatableName).subscribe((dataObject: any) => {
-              this.dataObject = dataObject;
-            });
-          });
-      }
-    });
-  }
-
-}
diff --git a/src/app/savings/savings.module.ts b/src/app/savings/savings.module.ts
index cd30dfd65..c29808803 100644
--- a/src/app/savings/savings.module.ts
+++ b/src/app/savings/savings.module.ts
@@ -15,8 +15,6 @@ import { SavingsAccountViewComponent } from './savings-account-view/savings-acco
 import { ChargesTabComponent } from './savings-account-view/charges-tab/charges-tab.component';
 import { StandingInstructionsTabComponent } from './savings-account-view/standing-instructions-tab/standing-instructions-tab.component';
 import { DatatableTabsComponent } from './savings-account-view/datatable-tabs/datatable-tabs.component';
-import { MultiRowComponent } from './savings-account-view/datatable-tabs/multi-row/multi-row.component';
-import { SingleRowComponent } from './savings-account-view/datatable-tabs/single-row/single-row.component';
 import { CreateSavingsAccountComponent } from './create-savings-account/create-savings-account.component';
 import { SavingsAccountDetailsStepComponent } from './savings-account-stepper/savings-account-details-step/savings-account-details-step.component';
 import { SavingsAccountChargesStepComponent } from './savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component';
@@ -73,8 +71,6 @@ import { NotesTabComponent } from './savings-account-view/notes-tab/notes-tab.co
     ChargesTabComponent,
     StandingInstructionsTabComponent,
     DatatableTabsComponent,
-    MultiRowComponent,
-    SingleRowComponent,
     CreateSavingsAccountComponent,
     SavingsAccountDetailsStepComponent,
     SavingsAccountChargesStepComponent,
diff --git a/src/app/shared/form-dialog/formfield/formfield.component.html b/src/app/shared/form-dialog/formfield/formfield.component.html
index f468b901c..fe14a5a0b 100644
--- a/src/app/shared/form-dialog/formfield/formfield.component.html
+++ b/src/app/shared/form-dialog/formfield/formfield.component.html
@@ -1,7 +1,7 @@
 <div [formGroup]="form" fxFlexFill>
 
   <div *ngIf="formfield.controlType==='input' || formfield.controlType==='select'" fxFlexFill>
-    
+
     <mat-form-field fxFlexFill>
 
       <mat-label>{{ formfield.label }}</mat-label>
@@ -26,7 +26,7 @@
 
   <mat-form-field fxFlexFill *ngIf="formfield.controlType==='datepicker'" (click)="datePicker.open()">
     <mat-label>{{ formfield.label }}</mat-label>
-    <input matInput [matDatepicker]="datePicker" [min]="formfield.minDate" [max]="formfield.maxDate"  
+    <input matInput [matDatepicker]="datePicker" [min]="formfield.minDate" [max]="formfield.maxDate"
       [formControlName]="formfield.controlName" [required]="formfield.required">
     <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
     <mat-datepicker #datePicker></mat-datepicker>
@@ -35,6 +35,17 @@
     </mat-error>
   </mat-form-field>
 
+  <mat-form-field fxFlexFill *ngIf="formfield.controlType==='datetimepicker'" (click)="datePicker.open()">
+    <mat-label>{{ formfield.label }}</mat-label>
+    <input matInput [ngxMatDatetimePicker]="datetimePicker" [min]="formfield.minDate" [max]="formfield.maxDate"
+      [formControlName]="formfield.controlName" [required]="formfield.required">
+    <mat-datepicker-toggle matSuffix [for]="datetimePicker"></mat-datepicker-toggle>
+    <ngx-mat-datetime-picker #datetimePicker [enableMeridian]="true"></ngx-mat-datetime-picker>
+    <mat-error *ngIf="form.controls[formfield.controlName].hasError('required')">
+      {{ formfield.label }} is <strong>required</strong>
+    </mat-error>
+  </mat-form-field>
+
   <mat-checkbox *ngIf="formfield.controlType==='checkbox'" labelPosition="before" [checked]="formfield.value"
     [formControlName]="formfield.controlName" [required]="formfield.required">
     {{ formfield.label }}
diff --git a/src/app/shared/form-dialog/formfield/model/datetimepicker-base.ts b/src/app/shared/form-dialog/formfield/model/datetimepicker-base.ts
new file mode 100644
index 000000000..ae0a8cef7
--- /dev/null
+++ b/src/app/shared/form-dialog/formfield/model/datetimepicker-base.ts
@@ -0,0 +1,15 @@
+import { FormfieldBase } from './formfield-base';
+
+export class DateTimepickerBase extends FormfieldBase {
+
+  controlType = 'datetimepicker';
+  minDate: Date;
+  maxDate: Date;
+
+  constructor(options: {} = {}) {
+    super(options);
+    this.minDate = options['minDate'] || new Date(2000, 0, 1);
+    this.maxDate = options['maxDate'] || new Date();
+  }
+
+}
diff --git a/src/app/shared/form-dialog/formfield/model/formfield-base.ts b/src/app/shared/form-dialog/formfield/model/formfield-base.ts
index cd6a6dfee..0078f2915 100644
--- a/src/app/shared/form-dialog/formfield/model/formfield-base.ts
+++ b/src/app/shared/form-dialog/formfield/model/formfield-base.ts
@@ -3,7 +3,7 @@ export class FormfieldBase {
   controlType: string;
   controlName: string;
   label: string;
-  value: string;
+  value: any;
   required: boolean;
   order: number;
 
@@ -11,7 +11,7 @@ export class FormfieldBase {
               controlType?: string,
               controlName?: string,
               label?: string,
-              value?: string,
+              value?: any,
               required?: boolean,
               order?: number
     } = {}) {
diff --git a/src/app/shared/material.module.ts b/src/app/shared/material.module.ts
index 132a0f1b6..9f1f4fcd4 100644
--- a/src/app/shared/material.module.ts
+++ b/src/app/shared/material.module.ts
@@ -38,6 +38,7 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatTreeModule } from '@angular/material/tree';
+import { NgxMatDatetimePickerModule, NgxMatNativeDateModule, NgxMatTimepickerModule } from '@angular-material-components/datetime-picker';
 
 /**
  * Material Module
@@ -82,7 +83,10 @@ import { MatTreeModule } from '@angular/material/tree';
     MatToolbarModule,
     MatTooltipModule,
     MatTreeModule,
-    MatBadgeModule
+    MatBadgeModule,
+    NgxMatDatetimePickerModule,
+    NgxMatTimepickerModule,
+    NgxMatNativeDateModule
   ],
   providers: [
     {
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index fe5368817..32baa1789 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -32,6 +32,9 @@ import { PipesModule } from 'app/pipes/pipes.module';
 import { EntityNotesTabComponent } from './tabs/entity-notes-tab/entity-notes-tab.component';
 import { EntityDocumentsTabComponent } from './tabs/entity-documents-tab/entity-documents-tab.component';
 import { DirectivesModule } from 'app/directives/directives.module';
+import { EntityDatatableTabComponent } from './tabs/entity-datatable-tab/entity-datatable-tab.component';
+import { DatatableSingleRowComponent } from './tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component';
+import { DatatableMultiRowComponent } from './tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component';
 
 /**
  * Shared Module
@@ -69,7 +72,10 @@ import { DirectivesModule } from 'app/directives/directives.module';
     TenantSelectorComponent,
     ExternalIdentifierComponent,
     EntityNotesTabComponent,
-    EntityDocumentsTabComponent
+    EntityDocumentsTabComponent,
+    EntityDatatableTabComponent,
+    DatatableSingleRowComponent,
+    DatatableMultiRowComponent
   ],
   exports: [
     FileUploadComponent,
@@ -89,7 +95,8 @@ import { DirectivesModule } from 'app/directives/directives.module';
     TenantSelectorComponent,
     ExternalIdentifierComponent,
     EntityNotesTabComponent,
-    EntityDocumentsTabComponent
+    EntityDocumentsTabComponent,
+    EntityDatatableTabComponent
   ]
 })
 export class SharedModule { }
diff --git a/src/app/groups/groups-view/datatable-tabs/multi-row/multi-row.component.html b/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html
similarity index 100%
rename from src/app/groups/groups-view/datatable-tabs/multi-row/multi-row.component.html
rename to src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html
diff --git a/src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.scss b/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.scss
similarity index 100%
rename from src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.scss
rename to src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.scss
diff --git a/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.spec.ts b/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.spec.ts
new file mode 100644
index 000000000..535462c21
--- /dev/null
+++ b/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DatatableMultiRowComponent } from './datatable-multi-row.component';
+
+describe('DatatableMultiRowComponent', () => {
+  let component: DatatableMultiRowComponent;
+  let fixture: ComponentFixture<DatatableMultiRowComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DatatableMultiRowComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DatatableMultiRowComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.ts b/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.ts
similarity index 71%
rename from src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.ts
rename to src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.ts
index b40f91362..3a9aa5d16 100644
--- a/src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.ts
+++ b/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.ts
@@ -1,37 +1,29 @@
-/** Angular Imports */
-import { Component, OnChanges, OnInit, Input, ViewChild } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { MatTable } from '@angular/material/table';
+import { DecimalPipe } from '@angular/common';
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-
-/** Custom Dialogs */
-import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
-import { DeleteDialogComponent } from '../../../../shared/delete-dialog/delete-dialog.component';
-
-/** Custom Models */
-import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
-
-/** Custom Services */
-import { CentersService } from '../../../centers.service';
-import { SettingsService } from 'app/settings/settings.service';
-import { Dates } from 'app/core/utils/dates';
+import { MatTable } from '@angular/material/table';
+import { ActivatedRoute } from '@angular/router';
 import { Datatables } from 'app/core/utils/datatables';
+import { Dates } from 'app/core/utils/dates';
 import { DateFormatPipe } from 'app/pipes/date-format.pipe';
 import { DatetimeFormatPipe } from 'app/pipes/datetime-format.pipe';
-import { DecimalPipe } from '@angular/common';
+import { SettingsService } from 'app/settings/settings.service';
+import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
+import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
+import { SystemService } from 'app/system/system.service';
 
-/**
- * Center Multi Row Data Tables
- */
 @Component({
-  selector: 'mifosx-multi-row',
-  templateUrl: './multi-row.component.html',
-  styleUrls: ['./multi-row.component.scss']
+  selector: 'mifosx-datatable-multi-row',
+  templateUrl: './datatable-multi-row.component.html',
+  styleUrls: ['./datatable-multi-row.component.scss']
 })
-export class MultiRowComponent implements OnInit, OnChanges {
+export class DatatableMultiRowComponent implements OnInit {
 
   /** Data Object */
   @Input() dataObject: any;
+  @Input() entityId: string;
+  @Input() entityType: string;
 
   /** Data Table Name */
   datatableName: string;
@@ -39,8 +31,7 @@ export class MultiRowComponent implements OnInit, OnChanges {
   datatableColumns: string[] = [];
   /** Data Table Data */
   datatableData: any;
-  /** Center Id */
-  centerId: string;
+
   /** Toggle button visibility */
   showDeleteBotton: boolean;
 
@@ -51,33 +42,20 @@ export class MultiRowComponent implements OnInit, OnChanges {
    * Fetches center Id from parent route params.
    * @param {ActivatedRoute} route Activated Route.
    * @param {Dates} dateUtils Date Utils.
-   * @param {CentersService} centersService Centers Service.
+   * @param {SystemService} systemService system Service.
    * @param {SettingsService} settingsService Settings Service.
    * @param {MatDialog} dialog Mat Dialog.
    * @param {Datatables} datatables Datatable utils
    */
   constructor(private route: ActivatedRoute,
               private dateUtils: Dates,
-              private centersService: CentersService,
+              private systemService: SystemService,
               private settingsService: SettingsService,
               private dialog: MatDialog,
               private datatables: Datatables,
               private dateFormat: DateFormatPipe,
               private dateTimeFormat: DatetimeFormatPipe,
-              private numberFormat: DecimalPipe) {
-    this.centerId = this.route.parent.parent.snapshot.paramMap.get('centerId');
-  }
-
-  /**
-   * Updates related variables on changes to dataObject.
-   */
-  ngOnChanges() {
-    this.datatableColumns = this.dataObject.columnHeaders.map((columnHeader: any) => {
-      return columnHeader.columnName;
-    });
-    this.datatableData = this.dataObject.data;
-    this.showDeleteBotton = this.datatableData[0] ? true : false;
-  }
+              private numberFormat: DecimalPipe) { }
 
   /**
    * Fetches data table name from route params.
@@ -87,6 +65,11 @@ export class MultiRowComponent implements OnInit, OnChanges {
     this.route.params.subscribe((routeParams: any) => {
       this.datatableName = routeParams.datatableName;
     });
+    this.datatableColumns = this.dataObject.columnHeaders.map((columnHeader: any) => {
+      return columnHeader.columnName;
+    });
+    this.datatableData = this.dataObject.data;
+    this.showDeleteBotton = this.datatableData[0] ? true : false;
   }
 
   /**
@@ -95,23 +78,21 @@ export class MultiRowComponent implements OnInit, OnChanges {
   add() {
     let dataTableEntryObject: any = { locale: this.settingsService.language.code };
     const dateTransformColumns: string[] = [];
-    const columns = this.dataObject.columnHeaders.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'center_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
-    });
+    const columns = this.datatables.filterSystemColumns(this.dataObject.columnHeaders);
     const formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
     const data = {
-      title: 'Add ' + this.datatableName,
+      title: 'Add ' + this.datatableName + ' for ' + this.entityType,
       formfields: formfields
     };
-    const addDialogRef = this.dialog.open(FormDialogComponent, { data });
+    const addDialogRef = this.dialog.open(FormDialogComponent, { data, width: '50rem' });
     addDialogRef.afterClosed().subscribe((response: any) => {
       if (response.data) {
         dateTransformColumns.forEach((column) => {
           response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
         });
         dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.centersService.addCenterDatatableEntry(this.centerId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.centersService.getCenterDatatable(this.centerId, this.datatableName).subscribe((dataObject: any) => {
+        this.systemService.addEntityDatatableEntry(this.entityId, this.datatableName, dataTableEntryObject).subscribe(() => {
+          this.systemService.getEntityDatatable(this.entityId, this.datatableName).subscribe((dataObject: any) => {
             this.datatableData = dataObject.data;
             this.dataTableRef.renderRows();
           });
@@ -129,8 +110,8 @@ export class MultiRowComponent implements OnInit, OnChanges {
     });
     deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
       if (response.delete) {
-        this.centersService.deleteDatatableContent(this.centerId, this.datatableName).subscribe(() => {
-          this.centersService.getCenterDatatable(this.centerId, this.datatableName).subscribe((dataObject: any) => {
+        this.systemService.deleteDatatableContent(this.entityId, this.datatableName).subscribe(() => {
+          this.systemService.getEntityDatatable(this.entityId, this.datatableName).subscribe((dataObject: any) => {
             this.datatableData = dataObject.data;
             this.showDeleteBotton = false;
             this.dataTableRef.renderRows();
@@ -152,4 +133,5 @@ export class MultiRowComponent implements OnInit, OnChanges {
     return value;
   }
 
+
 }
diff --git a/src/app/groups/groups-view/datatable-tabs/single-row/single-row.component.html b/src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html
similarity index 70%
rename from src/app/groups/groups-view/datatable-tabs/single-row/single-row.component.html
rename to src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html
index e933bf643..ccfa2a58f 100644
--- a/src/app/groups/groups-view/datatable-tabs/single-row/single-row.component.html
+++ b/src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html
@@ -1,6 +1,6 @@
 <div class="tab-container mat-typography">
   <h3>{{datatableName}}</h3>
-  <div fxLayout="row" fxLayoutAlign="flex-end">
+  <div fxLayout="row" fxLayoutAlign="flex-end" class="m-b-20">
     <button mat-raised-button color="primary" (click)="add()" *ngIf="!dataObject.data[0]">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
     </button>
@@ -8,21 +8,21 @@
       <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
+      <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete
     </button>
   </div>
 
   <mat-divider></mat-divider>
 
-  <ng-container *ngIf="dataObject.data.length > 0">
+  <div class="m-t-10" *ngIf="dataObject.data.length > 0">
 
-    <div *ngFor="let columnHeader of dataObject.columnHeaders;let i = index" class="table-data">
+    <div fxFlexFill *ngFor="let columnHeader of dataObject.columnHeaders;let i = index" [ngClass}="{{setAttributeClass(columnHeader.columnName)}}" >
 
       <div fxFlex="45%" class="mat-body-strong left">
-        {{columnHeader.columnName}}
+        {{ getInputName(columnHeader.columnName) }}
       </div>
 
-      <div fxFlex="45%" [ngSwitch]="columnHeader.columnDisplayType" class="right">
+      <div fxFlex="50%" [ngSwitch]="columnHeader.columnDisplayType" class="right">
         <span *ngSwitchCase="'DATE'">
           {{dataObject.data[0].row[i] | dateFormat}}
         </span>
@@ -37,6 +37,7 @@
         </span>
       </div>
     </div>
-  </ng-container>
+
+  </div>
 
 </div>
diff --git a/src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.scss b/src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.scss
new file mode 100644
index 000000000..a56cdd328
--- /dev/null
+++ b/src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.scss
@@ -0,0 +1,23 @@
+@import "assets/styles/helper";
+
+.tab-container {
+  padding: 1%;
+  margin: 1%;
+  .delete-button {
+      margin-left: 1%;
+  }
+}
+
+.table-name {
+  padding-left: 2%;
+}
+
+.table-data {
+  margin-top: 3px;
+}
+
+.system-defined {
+  margin-top: 3px;
+  color: $concrete !important;
+  font-weight: 100;
+}
diff --git a/src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.spec.ts b/src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.spec.ts
new file mode 100644
index 000000000..46694a012
--- /dev/null
+++ b/src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DatatableSingleRowComponent } from './datatable-single-row.component';
+
+describe('DatatableSingleRowComponent', () => {
+  let component: DatatableSingleRowComponent;
+  let fixture: ComponentFixture<DatatableSingleRowComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DatatableSingleRowComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DatatableSingleRowComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/clients/clients-view/datatable-tab/single-row/single-row.component.ts b/src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.ts
similarity index 54%
rename from src/app/clients/clients-view/datatable-tab/single-row/single-row.component.ts
rename to src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.ts
index 6df21a890..ec65e3a7c 100644
--- a/src/app/clients/clients-view/datatable-tab/single-row/single-row.component.ts
+++ b/src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.ts
@@ -1,46 +1,40 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { Component, Input, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
-
-/** Custom Components */
-import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
-import { DeleteDialogComponent } from '../../../../shared/delete-dialog/delete-dialog.component';
-
-/** Custom Services */
-import { ClientsService } from '../../../clients.service';
-import { SettingsService } from 'app/settings/settings.service';
-import { Dates } from 'app/core/utils/dates';
+import { ActivatedRoute } from '@angular/router';
 import { Datatables } from 'app/core/utils/datatables';
-
+import { Dates } from 'app/core/utils/dates';
+import { SettingsService } from 'app/settings/settings.service';
+import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
+import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
+import { SystemService } from 'app/system/system.service';
+import { TouchSequence } from 'selenium-webdriver';
 
 @Component({
-  selector: 'mifosx-single-row',
-  templateUrl: './single-row.component.html',
-  styleUrls: ['./single-row.component.scss']
+  selector: 'mifosx-datatable-single-row',
+  templateUrl: './datatable-single-row.component.html',
+  styleUrls: ['./datatable-single-row.component.scss']
 })
-export class SingleRowComponent implements OnInit {
+export class DatatableSingleRowComponent implements OnInit {
 
   @Input() dataObject: any;
+  @Input() entityId: string;
+  @Input() entityType: string;
   datatableName: string;
-  clientId: string;
 
   /**
-   * Fetches Client Id from parent route params.
    * @param {ActivatedRoute} route Activated Route.
    * @param {Dates} dateUtils Date Utils.
-   * @param {ClientsService} clientsService Clients Service.
+   * @param {SystemService} systemService System Service.
    * @param {SettingsService} settingsService Settings Service
    * @param {Datatables} datatables Datatable utils
    */
   constructor(private route: ActivatedRoute,
     private dateUtils: Dates,
     private dialog: MatDialog,
-    private clientsService: ClientsService,
     private settingsService: SettingsService,
-    private datatables: Datatables) {
-    this.clientId = this.route.parent.parent.snapshot.paramMap.get('clientId');
-  }
+    private datatables: Datatables,
+    private systemService: SystemService) { }
 
   ngOnInit() {
     this.route.params.subscribe((routeParams: any) => {
@@ -53,24 +47,21 @@ export class SingleRowComponent implements OnInit {
       locale: this.settingsService.language.code
     };
     const dateTransformColumns: string[] = [];
-    const columns = this.dataObject.columnHeaders.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'client_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
-    });
+    const columns = this.datatables.filterSystemColumns(this.dataObject.columnHeaders);
     const formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
     const data = {
-      title: 'Add ' + this.datatableName,
+      title: 'Add ' + this.datatableName + ' for ' + this.entityType,
       formfields: formfields
     };
-    const addDialogRef = this.dialog.open(FormDialogComponent, { data });
+    const addDialogRef = this.dialog.open(FormDialogComponent, { data, width: '50rem' });
     addDialogRef.afterClosed().subscribe((response: any) => {
       if (response.data) {
-        // format Dates
         dateTransformColumns.forEach((column) => {
           response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
         });
         dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.clientsService.addClientDatatableEntry(this.clientId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.clientsService.getClientDatatable(this.clientId, this.datatableName).subscribe((dataObject: any) => {
+        this.systemService.addEntityDatatableEntry(this.entityId, this.datatableName, dataTableEntryObject).subscribe(() => {
+          this.systemService.getEntityDatatable(this.entityId, this.datatableName).subscribe((dataObject: any) => {
             this.dataObject = dataObject;
           });
         });
@@ -83,28 +74,32 @@ export class SingleRowComponent implements OnInit {
       locale: this.settingsService.language.code
     };
     const dateTransformColumns: string[] = [];
-    const columns = this.dataObject.columnHeaders.filter((column: any) => {
-      return ((column.columnName !== 'id') && (column.columnName !== 'client_id') && (column.columnName !== 'created_at') && (column.columnName !== 'updated_at'));
-    });
+    const columns = this.datatables.filterSystemColumns(this.dataObject.columnHeaders);
     let formfields: FormfieldBase[] = this.datatables.getFormfields(columns, dateTransformColumns, dataTableEntryObject);
     formfields = formfields.map((formfield: FormfieldBase, index: number) => {
-      formfield.value = (this.dataObject.data[0].row[index + 1]) ? this.dataObject.data[0].row[index + 1] : '';
+      if (formfield.controlType === 'datepicker') {
+        formfield.value = (this.dataObject.data[0].row[columns[index].idx]) ? this.dateUtils.parseDate(this.dataObject.data[0].row[columns[index].idx]) : '';
+      } else if (formfield.controlType === 'datetimepicker') {
+        formfield.value = (this.dataObject.data[0].row[columns[index].idx]) ? this.dateUtils.parseDatetime(this.dataObject.data[0].row[columns[index].idx]) : '';
+      } else {
+        formfield.value = (this.dataObject.data[0].row[columns[index].idx]) ? this.dataObject.data[0].row[columns[index].idx] : '';
+      }
       return formfield;
     });
     const data = {
-      title: 'Edit ' + this.datatableName,
-      formfields: formfields
+      title: 'Edit ' + this.datatableName + ' for ' + this.entityType,
+      formfields: formfields,
+      layout: {addButtonText: 'Save'}
     };
-    const editDialogRef = this.dialog.open(FormDialogComponent, { data });
+    const editDialogRef = this.dialog.open(FormDialogComponent, { data, width: '50rem' });
     editDialogRef.afterClosed().subscribe((response: any) => {
       if (response.data) {
-        // format Dates
         dateTransformColumns.forEach((column) => {
           response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
         });
         dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
-        this.clientsService.editClientDatatableEntry(this.clientId, this.datatableName, dataTableEntryObject).subscribe(() => {
-          this.clientsService.getClientDatatable(this.clientId, this.datatableName).subscribe((dataObject: any) => {
+        this.systemService.editEntityDatatableEntry(this.entityId, this.datatableName, dataTableEntryObject).subscribe(() => {
+          this.systemService.getEntityDatatable(this.entityId, this.datatableName).subscribe((dataObject: any) => {
             this.dataObject = dataObject;
           });
         });
@@ -114,18 +109,29 @@ export class SingleRowComponent implements OnInit {
 
   delete() {
     const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `the contents of ${this.datatableName}` }
+      data: { deleteContext: ` the contents of ${this.datatableName}` }
     });
     deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
       if (response.delete) {
-        this.clientsService.deleteDatatableContent(this.clientId, this.datatableName)
+        this.systemService.deleteDatatableContent(this.entityId, this.datatableName)
           .subscribe(() => {
-            this.clientsService.getClientDatatable(this.clientId, this.datatableName).subscribe((dataObject: any) => {
+            this.systemService.getEntityDatatable(this.entityId, this.datatableName).subscribe((dataObject: any) => {
               this.dataObject = dataObject;
             });
           });
-      }
+        }
     });
   }
 
+  setAttributeClass(attr: string): string {
+    if (this.datatables.isSystemDefined(attr)) {
+      return 'system-defined';
+    }
+    return 'table-data';
+  }
+
+  getInputName(attr: string): string {
+    return this.datatables.getName(attr);
+  }
+
 }
diff --git a/src/app/shared/tabs/entity-datatable-tab/entity-datatable-tab.component.html b/src/app/shared/tabs/entity-datatable-tab/entity-datatable-tab.component.html
new file mode 100644
index 000000000..03b1714fe
--- /dev/null
+++ b/src/app/shared/tabs/entity-datatable-tab/entity-datatable-tab.component.html
@@ -0,0 +1,12 @@
+<div>
+  <mifosx-datatable-multi-row *ngIf="multiRowDatatableFlag"
+    [entityType]="entityType"
+    [entityId]="entityId"
+    [dataObject]="entityDatatable"
+  ></mifosx-datatable-multi-row>
+  <mifosx-datatable-single-row *ngIf="!multiRowDatatableFlag"
+    [entityType]="entityType"
+    [entityId]="entityId"
+    [dataObject]="entityDatatable"
+  ></mifosx-datatable-single-row>
+</div>
diff --git a/src/app/shared/tabs/entity-datatable-tab/entity-datatable-tab.component.scss b/src/app/shared/tabs/entity-datatable-tab/entity-datatable-tab.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/shared/tabs/entity-datatable-tab/entity-datatable-tab.component.spec.ts b/src/app/shared/tabs/entity-datatable-tab/entity-datatable-tab.component.spec.ts
new file mode 100644
index 000000000..009153760
--- /dev/null
+++ b/src/app/shared/tabs/entity-datatable-tab/entity-datatable-tab.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EntityDatatableTabComponent } from './entity-datatable-tab.component';
+
+describe('EntityDatatableTabComponent', () => {
+  let component: EntityDatatableTabComponent;
+  let fixture: ComponentFixture<EntityDatatableTabComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ EntityDatatableTabComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EntityDatatableTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/tabs/entity-datatable-tab/entity-datatable-tab.component.ts b/src/app/shared/tabs/entity-datatable-tab/entity-datatable-tab.component.ts
new file mode 100644
index 000000000..e86ee7d77
--- /dev/null
+++ b/src/app/shared/tabs/entity-datatable-tab/entity-datatable-tab.component.ts
@@ -0,0 +1,20 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'mifosx-entity-datatable-tab',
+  templateUrl: './entity-datatable-tab.component.html',
+  styleUrls: ['./entity-datatable-tab.component.scss']
+})
+export class EntityDatatableTabComponent implements OnInit {
+
+  @Input() multiRowDatatableFlag = false;
+  @Input() entityDatatable: any;
+  @Input() entityType: string;
+  @Input() entityId: string;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/system/manage-data-tables/create-data-table/create-data-table.component.html b/src/app/system/manage-data-tables/create-data-table/create-data-table.component.html
index 9592c8e10..b890603b7 100644
--- a/src/app/system/manage-data-tables/create-data-table/create-data-table.component.html
+++ b/src/app/system/manage-data-tables/create-data-table/create-data-table.component.html
@@ -72,6 +72,16 @@
             <td mat-cell *matCellDef="let column"> {{ column.columnDisplayType }} </td>
           </ng-container>
 
+          <ng-container matColumnDef="length">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Length </th>
+            <td mat-cell *matCellDef="let column"> {{ column.columnLength }} </td>
+          </ng-container>
+
+          <ng-container matColumnDef="code">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Code </th>
+            <td mat-cell *matCellDef="let column"> {{ column.columnCode }} </td>
+          </ng-container>
+
           <ng-container matColumnDef="mandatory">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> Mandatory </th>
             <td mat-cell *matCellDef="let column" class="left">
@@ -82,14 +92,24 @@
             </td>
           </ng-container>
 
-          <ng-container matColumnDef="length">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Length </th>
-            <td mat-cell *matCellDef="let column"> {{ column.columnLength }} </td>
+          <ng-container matColumnDef="unique">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> Unique </th>
+            <td mat-cell *matCellDef="let column">
+              <fa-icon *ngIf="column.isColumnUnique" icon="check-circle" size="lg" class="column-mandatory"
+                matTooltip="Yes" matTooltipPosition="right"></fa-icon>
+              <fa-icon *ngIf="!column.isColumnUnique" icon="times-circle" size="lg" class="not-column-mandatory"
+                matTooltip="No" unique="right"></fa-icon>
+            </td>
           </ng-container>
 
-          <ng-container matColumnDef="code">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Code </th>
-            <td mat-cell *matCellDef="let column"> {{ column.columnCode }} </td>
+          <ng-container matColumnDef="indexed">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> Indexed </th>
+            <td mat-cell *matCellDef="let column">
+              <fa-icon *ngIf="column.isColumnIndexed" icon="check-circle" size="lg" class="column-mandatory"
+                matTooltip="Yes" matTooltipPosition="right"></fa-icon>
+              <fa-icon *ngIf="!column.isColumnIndexed" icon="times-circle" size="lg" class="not-column-mandatory"
+                matTooltip="No" matTooltipPosition="right"></fa-icon>
+            </td>
           </ng-container>
 
           <ng-container matColumnDef="actions">
diff --git a/src/app/system/manage-data-tables/create-data-table/create-data-table.component.ts b/src/app/system/manage-data-tables/create-data-table/create-data-table.component.ts
index e5484c971..2b35e02c0 100644
--- a/src/app/system/manage-data-tables/create-data-table/create-data-table.component.ts
+++ b/src/app/system/manage-data-tables/create-data-table/create-data-table.component.ts
@@ -54,7 +54,7 @@ export class CreateDataTableComponent implements OnInit, AfterViewInit {
       isColumnIndexed: undefined
     };
   /** Columns to be displayed in columns table. */
-  displayedColumns: string[] = ['name', 'type', 'mandatory', 'length', 'code', 'actions'];
+  displayedColumns: string[] = ['name', 'type', 'length', 'code', 'mandatory', 'unique', 'indexed', 'actions'];
   /** Data source for columns table. */
   dataSource: MatTableDataSource<any>;
   /** Paginator for columns table. */
@@ -127,6 +127,7 @@ export class CreateDataTableComponent implements OnInit, AfterViewInit {
   addColumn() {
     this.dataForDialog.columnName = undefined;
     this.dataForDialog.columnDisplayType = undefined;
+    this.dataForDialog.isColumnNullable = undefined;
     this.dataForDialog.columnLength = undefined;
     this.dataForDialog.columnCode = undefined;
     this.dataForDialog.isColumnUnique = undefined;
@@ -159,13 +160,14 @@ export class CreateDataTableComponent implements OnInit, AfterViewInit {
    * @param {any} column Column.
    */
   editColumn(column: any) {
-    this.dataForDialog.columnName = column.name;
-    this.dataForDialog.columnDisplayType = column.type;
-    this.dataForDialog.columnLength = column.length;
-    this.dataForDialog.columnCode = column.code;
-    this.dataForDialog.isColumnUnique = column.unique;
-    this.dataForDialog.isColumnIndexed = column.indexed;
-    this.dataForDialog.type = 'new';
+    this.dataForDialog.columnName = column.columnName;
+    this.dataForDialog.columnDisplayType = column.columnDisplayType;
+    this.dataForDialog.isColumnNullable = !column.isColumnNullable;
+    this.dataForDialog.isColumnUnique = column.isColumnUnique;
+    this.dataForDialog.isColumnIndexed = column.isColumnIndexed;
+    this.dataForDialog.columnLength = column.columnLength;
+    this.dataForDialog.columnCode = column.columnCode;
+    this.dataForDialog.type = column.type;
     const editColumnDialogRef = this.dialog.open(ColumnDialogComponent, {
       data: this.dataForDialog,
       height: '450px',
diff --git a/src/app/system/system.service.ts b/src/app/system/system.service.ts
index aa9361054..3a55325c7 100644
--- a/src/app/system/system.service.ts
+++ b/src/app/system/system.service.ts
@@ -691,4 +691,30 @@ export class SystemService {
     return this.http.put('/externalevents/configuration', payload);
   }
 
+  /** Datatable Entries for Entities */
+  getEntityDatatables(appTable: string) {
+    const httpParams = new HttpParams().set('apptable', appTable);
+    return this.http.get(`/datatables`, { params: httpParams });
+  }
+
+  getEntityDatatable(entityId: string, datatableName: string) {
+    const httpParams = new HttpParams().set('genericResultSet', 'true');
+    return this.http.get(`/datatables/${datatableName}/${entityId}`, { params: httpParams });
+  }
+
+  addEntityDatatableEntry(entityId: string, datatableName: string, data: any) {
+    const httpParams = new HttpParams().set('genericResultSet', 'true');
+    return this.http.post(`/datatables/${datatableName}/${entityId}`, data, { params: httpParams });
+  }
+
+  editEntityDatatableEntry(entityId: string, datatableName: string, data: any) {
+    const httpParams = new HttpParams().set('genericResultSet', 'true');
+    return this.http.put(`/datatables/${datatableName}/${entityId}`, data, { params: httpParams });
+  }
+
+  deleteDatatableContent(entityId: string, datatableName: string) {
+    const httpParams = new HttpParams().set('genericResultSet', 'true');
+    return this.http.delete(`/datatables/${datatableName}/${entityId}`, { params: httpParams });
+  }
+
 }