From 7a3502ababbe75198a691532d2daa07945965617 Mon Sep 17 00:00:00 2001
From: Jose Alberto Hernandez <alberto@MacBook-Pro.local>
Date: Sun, 18 Sep 2022 19:03:19 -0500
Subject: [PATCH] Chargeback Loan Transaction

---
 .../breadcrumb/breadcrumb.component.html      |   2 +-
 .../repayment-schedule-tab.component.html     |  92 +++++++-------
 .../transactions-tab.component.html           |  24 ++--
 .../transactions-tab.component.scss           |   7 ++
 .../transactions-tab.component.ts             |  10 ++
 .../view-transaction.component.html           |  90 +++++++++++---
 .../view-transaction.component.scss           |  21 ++++
 .../view-transaction.component.ts             | 117 +++++++++++++++++-
 .../offices/offices.component.html            |  68 ++++++----
 .../organization-routing.module.ts            |   4 +-
 src/app/organization/organization.service.ts  |   7 ++
 .../payment-types/payment-type.resolver.ts    |  31 -----
 .../payment-types.component.html              |  23 +++-
 .../payment-types.component.scss              |   4 +
 .../payment-types/payment-types.component.ts  |   5 +-
 .../payment-types/payment-types.resolver.ts   |  11 +-
 src/app/settings/settings.service.ts          |   5 +-
 src/app/shared/shared.module.ts               |   1 +
 src/assets/styles/_align.scss                 |  13 ++
 src/assets/styles/_status.scss                |   4 -
 src/index.html                                |   2 +-
 21 files changed, 382 insertions(+), 159 deletions(-)
 delete mode 100644 src/app/organization/payment-types/payment-type.resolver.ts

diff --git a/src/app/core/shell/breadcrumb/breadcrumb.component.html b/src/app/core/shell/breadcrumb/breadcrumb.component.html
index bb340370d..30fb015c1 100644
--- a/src/app/core/shell/breadcrumb/breadcrumb.component.html
+++ b/src/app/core/shell/breadcrumb/breadcrumb.component.html
@@ -1,6 +1,6 @@
 <nav class="breadcrumb-wrapper">
   <ul class="breadcrumb">
-    <span #breadcrumb class="breadcrumb-title">{{ 'labels.breadcrumbs.' + breadcrumbs[breadcrumbs.length-1].label | translate }}</span>
+    <span #breadcrumb class="breadcrumb-title">{{ breadcrumbs[breadcrumbs.length-1].label | translate }}</span>
     <span *ngIf="breadcrumbs.length-1 !== 0" class="separator">
       <li *ngFor="let breadcrumb of breadcrumbs; let last = last" class="breadcrumb-label">
         <span *ngIf="!last" class="breadcrumb-link">
diff --git a/src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.html b/src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.html
index f882f6b88..48fc1d66c 100644
--- a/src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.html
+++ b/src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.html
@@ -3,96 +3,96 @@
   <table mat-table [dataSource]="repaymentScheduleDetails.periods">
 
     <ng-container matColumnDef="number">
-      <th mat-header-cell *matHeaderCellDef> # </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.period }} </td>
+      <th mat-header-cell class="center" *matHeaderCellDef> # </th>
+      <td mat-cell class="right" *matCellDef="let ele"> {{ ele.period }} </td>
       <td mat-footer-cell *matFooterCellDef> &nbsp; </td>
     </ng-container>
 
     <ng-container matColumnDef="days">
-      <th mat-header-cell *matHeaderCellDef> Days </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.daysInPeriod }} </td>
-      <td mat-footer-cell *matFooterCellDef> <b> Total</b> </td>
+      <th mat-header-cell class="center" *matHeaderCellDef> Days </th>
+      <td mat-cell class="center" *matCellDef="let ele"> {{ ele.daysInPeriod }} </td>
+      <td mat-footer-cell class="center" *matFooterCellDef> <b> Total</b> </td>
     </ng-container>
 
     <ng-container matColumnDef="date">
-      <th mat-header-cell *matHeaderCellDef> Date </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.dueDate  | dateFormat}} </td>
+      <th mat-header-cell class="center" *matHeaderCellDef> Date </th>
+      <td mat-cell class="center" *matCellDef="let ele"> {{ ele.dueDate  | dateFormat}} </td>
       <td mat-footer-cell *matFooterCellDef>  </td>
     </ng-container>
 
     <ng-container matColumnDef="paiddate">
-      <th mat-header-cell *matHeaderCellDef> Paid Date </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.obligationsMetOnDate  | dateFormat}} </td>
+      <th mat-header-cell class="center" *matHeaderCellDef> Paid Date </th>
+      <td mat-cell class="center" *matCellDef="let ele"> {{ ele.obligationsMetOnDate  | dateFormat}} </td>
       <td mat-footer-cell *matFooterCellDef>  </td>
     </ng-container>
 
     <ng-container matColumnDef="check">
       <th mat-header-cell *matHeaderCellDef> &nbsp; </th>
-      <td mat-cell *matCellDef="let ele">
+      <td mat-cell class="center" *matCellDef="let ele">
         <span *ngIf="ele.obligationsMetOnDate"> <i class='fa fa-check'></i> </span>
       </td>
       <td mat-footer-cell *matFooterCellDef> </td>
     </ng-container>
 
     <ng-container matColumnDef="principalDue">
-      <th mat-header-cell *matHeaderCellDef> Principal Due </th>
-      <td mat-cell class="check" *matCellDef="let ele"> {{ ele.principalDue | number }} </td>
-      <td mat-footer-cell class="check" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPrincipalExpected | number }}</b>  </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> Principal Due </th>
+      <td mat-cell class="check r-amount" *matCellDef="let ele"> {{ ele.principalDue | number }} </td>
+      <td mat-footer-cell class="check r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPrincipalExpected | currency }}</b>  </td>
     </ng-container>
 
     <ng-container matColumnDef="balanceOfLoan">
-      <th mat-header-cell *matHeaderCellDef> Balance Of Loan </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.principalLoanBalanceOutstanding | number }} </td>
-      <td mat-footer-cell *matFooterCellDef> &nbsp; </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> Balance Of Loan </th>
+      <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.principalLoanBalanceOutstanding | number }} </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef> &nbsp; </td>
     </ng-container>
 
     <ng-container matColumnDef="interest">
-      <th mat-header-cell *matHeaderCellDef> Interest </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.interestOriginalDue | number}} </td>
-      <td mat-footer-cell *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalInterestCharged | number }} </b> </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> Interest </th>
+      <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.interestOriginalDue | number}} </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalInterestCharged | currency }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="fees">
-      <th mat-header-cell *matHeaderCellDef> Fees </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.feeChargesDue | number}} </td>
-      <td mat-footer-cell *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalFeeChargesCharged | number }} </b> </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> Fees </th>
+      <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.feeChargesDue | number}} </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalFeeChargesCharged | currency }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="penalties">
-      <th mat-header-cell *matHeaderCellDef> Penalties </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.penaltyChargesDue | number}} </td>
-      <td mat-footer-cell *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPenaltyChargesCharged | number }} </b> </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> Penalties </th>
+      <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.penaltyChargesDue | number}} </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPenaltyChargesCharged | currency }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="due">
-      <th mat-header-cell *matHeaderCellDef> Due </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.totalDueForPeriod | number}} </td>
-      <td mat-footer-cell *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalRepaymentExpected | number }} </b> </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> Due </th>
+      <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.totalDueForPeriod | number}} </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalRepaymentExpected | currency }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="paid">
-      <th mat-header-cell *matHeaderCellDef> Paid </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.totalPaidForPeriod | number}} </td>
-      <td mat-footer-cell *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalRepayment | number }} </b> </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> Paid </th>
+      <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.totalPaidForPeriod | number}} </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalRepayment | currency }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="inadvance">
-      <th mat-header-cell *matHeaderCellDef> In advance </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.totalPaidInAdvanceForPeriod | number}} </td>
-      <td mat-footer-cell *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPaidInAdvance | number }} </b> </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> In advance </th>
+      <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.totalPaidInAdvanceForPeriod | number}} </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPaidInAdvance | currency }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="late">
-      <th mat-header-cell *matHeaderCellDef> Late </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.totalPaidLateForPeriod | number}} </td>
-      <td mat-footer-cell *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPaidLate | number }} </b> </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> Late </th>
+      <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.totalPaidLateForPeriod | number}} </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPaidLate | currency }} </b> </td>
     </ng-container>
 
     <ng-container *ngIf="isWaived">
       <ng-container matColumnDef="waived">
-        <th mat-header-cell *matHeaderCellDef> Waived </th>
-        <td mat-cell *matCellDef="let ele"> {{ ele.totalWaivedForPeriod | number}} </td>
-        <td mat-footer-cell *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalWaived | number }} </b> </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> Waived </th>
+        <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.totalWaivedForPeriod | number}} </td>
+        <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalWaived | currency }} </b> </td>
       </ng-container>
     </ng-container>
 
@@ -105,9 +105,9 @@
     </ng-container>
 
     <ng-container matColumnDef="outstanding">
-      <th mat-header-cell *matHeaderCellDef> Outstanding </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.totalOutstandingForPeriod | number}} </td>
-      <td mat-footer-cell *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalOutstanding | number }} </b> </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef> Outstanding </th>
+      <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.totalOutstandingForPeriod | number}} </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalOutstanding | currency }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="header">
@@ -115,15 +115,15 @@
     </ng-container>
 
     <ng-container matColumnDef="header-amount">
-      <th mat-header-cell *matHeaderCellDef [attr.colspan]="2"> Loan Amount and Balance </th>
+      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="2"> Loan Amount and Balance </th>
     </ng-container>
 
     <ng-container matColumnDef="header-total-cost">
-      <th mat-header-cell *matHeaderCellDef [attr.colspan]="3"> Total Cost of Loan </th>
+      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="3"> Total Cost of Loan </th>
     </ng-container>
 
     <ng-container matColumnDef="header-installment-totals">
-      <th mat-header-cell *matHeaderCellDef [attr.colspan]="6"> Installment Totals </th>
+      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="6"> Installment Totals </th>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="['header', 'header-amount', 'header-total-cost', 'header-installment-totals']"></tr>
diff --git a/src/app/loans/loans-view/transactions-tab/transactions-tab.component.html b/src/app/loans/loans-view/transactions-tab/transactions-tab.component.html
index eae958039..13a1228a1 100644
--- a/src/app/loans/loans-view/transactions-tab/transactions-tab.component.html
+++ b/src/app/loans/loans-view/transactions-tab/transactions-tab.component.html
@@ -13,58 +13,58 @@
   <table mat-table [dataSource]="showTransactionsData">
 
       <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef> Date </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.manuallyReversed}"> {{ transaction.id }} </td>
+        <th mat-header-cell *matHeaderCellDef> Id </th>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.id }} </td>
       </ng-container>
 
       <ng-container matColumnDef="office">
         <th mat-header-cell *matHeaderCellDef> Office </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.manuallyReversed}"> {{ transaction.officeName }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.officeName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionDate">
         <th mat-header-cell *matHeaderCellDef> Transaction Date </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.manuallyReversed}"> {{ transaction.date  | dateFormat }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.date  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionType">
         <th mat-header-cell *matHeaderCellDef> Transaction Type </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.manuallyReversed}"> {{ transaction.type.value  }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.type.value  }} </td>
       </ng-container>
 
       <ng-container matColumnDef="amount">
         <th mat-header-cell *matHeaderCellDef> Amount </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.manuallyReversed}"> {{ transaction.amount | number }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.amount | number }} </td>
       </ng-container>
 
       <ng-container matColumnDef="principal">
         <th mat-header-cell *matHeaderCellDef> Breakdown </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.manuallyReversed}"> {{ transaction.principalPortion | number }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.principalPortion | number }} </td>
       </ng-container>
 
       <ng-container matColumnDef="interest">
         <th mat-header-cell *matHeaderCellDef> </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.manuallyReversed}"> {{ transaction.interestPortion | number }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.interestPortion | number }} </td>
       </ng-container>
 
       <ng-container matColumnDef="fee">
         <th mat-header-cell *matHeaderCellDef>  </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.manuallyReversed}"> {{ transaction.feeChargesPortion | number }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.feeChargesPortion | number }} </td>
       </ng-container>
 
       <ng-container matColumnDef="penalties">
         <th mat-header-cell *matHeaderCellDef>  </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.manuallyReversed}"> {{ transaction.penaltyChargesPortion | number }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.penaltyChargesPortion | number }} </td>
       </ng-container>
 
       <ng-container matColumnDef="loanBalance">
         <th mat-header-cell *matHeaderCellDef> Loan Balance </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.manuallyReversed}"> {{ transaction.outstandingLoanBalance | number }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.outstandingLoanBalance | number }} </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
         <th mat-header-cell *matHeaderCellDef> Actions </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.manuallyReversed}">
+        <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)">
           <button class="account-action-button" *ngIf="!transaction.manuallyReversed" mat-raised-button color="primary" (click)="routeEdit($event)"
             [routerLink]="[transaction.id, 'reciept']" matTooltip="View Receipts">
             <i class="fa fa-file-text"></i>
diff --git a/src/app/loans/loans-view/transactions-tab/transactions-tab.component.scss b/src/app/loans/loans-view/transactions-tab/transactions-tab.component.scss
index dbb5ffba5..6cb025947 100644
--- a/src/app/loans/loans-view/transactions-tab/transactions-tab.component.scss
+++ b/src/app/loans/loans-view/transactions-tab/transactions-tab.component.scss
@@ -1,3 +1,5 @@
+@import "assets/styles/helper";
+
 .container {
   padding-bottom: 2%;
 
@@ -24,5 +26,10 @@
       text-decoration: line-through;
       color: red;
     }
+    .linked {
+      text-decoration: line-through;
+      color: $status-approved;
+    }
   }
 }
+
diff --git a/src/app/loans/loans-view/transactions-tab/transactions-tab.component.ts b/src/app/loans/loans-view/transactions-tab/transactions-tab.component.ts
index b67b38cfa..49689a0a7 100644
--- a/src/app/loans/loans-view/transactions-tab/transactions-tab.component.ts
+++ b/src/app/loans/loans-view/transactions-tab/transactions-tab.component.ts
@@ -80,6 +80,16 @@ export class TransactionsTabComponent implements OnInit {
     }
   }
 
+  loanTransactionColor(loanTransaction: any): string {
+    if (loanTransaction.manuallyReversed) {
+      return 'strike';
+    }
+    if (loanTransaction.transactionRelations && loanTransaction.transactionRelations.length > 0) {
+      return 'linked';
+    }
+    return '';
+  }
+
   /**
    * Stops the propagation to view pages.
    * @param $event Mouse Event
diff --git a/src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.html b/src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.html
index 04040f6ef..ba3b43877 100644
--- a/src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.html
+++ b/src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.html
@@ -1,12 +1,17 @@
 <div fxLayoutAlign="end" class="container m-b-20 transaction-buttons" fxLayoutGap="2%"
   *ngIf="!(transactionData.type.contra)">
   <span *mifosxHasPermission="'ADJUST_LOAN'">
-    <button mat-raised-button color="primary" [routerLink]="'edit'" *ngIf="allowEdition">
-      <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;Edit
+    <button mat-raised-button color="primary" [routerLink]="'edit'" [disabled]="!allowEdition">
+      <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;{{ 'Edit' | translate }}
     </button>
 
-    <button mat-raised-button color="warn" (click)="undoTransaction()" *ngIf="allowUndo">
-      <fa-icon icon="undo"></fa-icon>&nbsp;&nbsp;Undo
+    <button mat-raised-button color="warn" (click)="undoTransaction()" [disabled]="!allowUndo">
+      <fa-icon icon="undo"></fa-icon>&nbsp;&nbsp;{{ 'Undo' | translate }}
+    </button>
+  </span>
+  <span *mifosxHasPermission="'CHARGEBACK_LOAN'">
+    <button mat-raised-button color="warn" [disabled]="!allowChargeback" (click)="chargebackTransaction()">
+      <fa-icon icon="undo"></fa-icon>&nbsp;&nbsp;{{ 'Chargeback' | translate }}
     </button>
   </span>
 </div>
@@ -18,17 +23,29 @@
     <mat-card-content>
 
       <div fxLayout="row wrap" class="content">
+        <div fxFlex="100%" [ngClass]="loanTransactionColor()">
+        </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Transaction Id
+          {{ 'Transaction Id' | translate }}
         </div>
 
         <div fxFlex="50%">
           {{ transactionData.id }}
         </div>
 
+        <div fxFlex="50%" class="mat-body-strong" *ngIf="transactionData.toLoanTransactionRelation">
+          {{ 'Repayment Transaction' | translate }}
+        </div>
+
+        <div fxFlex="50%" *ngIf="transactionData.toLoanTransactionRelation">
+          <a [href]="loanTransactionRelatedLink(transactionData.toLoanTransactionRelation.fromLoanTransaction)">
+              {{ transactionData.toLoanTransactionRelation.fromLoanTransaction }}
+          </a>
+        </div>
+
         <div fxFlex="50%" class="mat-body-strong">
-          Type
+          {{ 'Type' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -36,15 +53,15 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Transaction Date
+          {{ 'Transaction Date' | translate }}
         </div>
 
         <div fxFlex="50%">
-          {{ transactionData.date  | dateFormat }}
+          {{ transactionData.date | dateFormat }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Currency
+          {{ 'Currency' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -52,17 +69,53 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Amount
+          {{ 'Amount' | translate }}
         </div>
 
         <div fxFlex="50%">
-          {{ transactionData.amount }}
+          {{ transactionData.amount | currency:transactionData.currency.code }} {{ transactionData.currency.code }}
         </div>
 
+        <mat-divider *ngIf="existTransactionRelations" [inset]="true"></mat-divider>
+
+        <div fxFlex="100%" class="mat-body-strong" *ngIf="existTransactionRelations">
+          {{ 'Linked Transactions' | translate }}
+          <br>
+
+          <table mat-table [dataSource]="transactionRelations">
+              <ng-container matColumnDef="relationType">
+                <th mat-header-cell *matHeaderCellDef> Relation Type </th>
+                <td mat-cell *matCellDef="let transactionRel" [matTooltip]="transactionRel.paymentType">
+                  {{ transactionRel.relationType | translate }}
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="toTransaction">
+                <th mat-header-cell *matHeaderCellDef> Transaction </th>
+                <td mat-cell *matCellDef="let transactionRel">
+                  <a [href]="loanTransactionRelatedLink(transactionRel.toLoanTransaction)">
+                    {{ transactionRel.toLoanTransaction }}
+                  </a>
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="amount">
+                <th mat-header-cell *matHeaderCellDef> Amount </th>
+                <td mat-cell *matCellDef="let transactionRel">
+                  {{ transactionRel.amount | currency:transactionData.currency.code }} {{ transactionData.currency.code }}
+                </td>
+              </ng-container>
+              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+          </table>
+        </div>
+
+        <mat-divider *ngIf="transactionData.paymentDetailData" [inset]="true"></mat-divider>
+
         <ng-container *ngIf="transactionData.paymentDetailData">
 
           <div *ngIf="transactionData.paymentDetailData.paymentType" fxFlex="50%" class="mat-body-strong">
-            Payment Type
+            {{ 'Payment Type' | translate }}
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.paymentType" fxFlex="50%">
@@ -70,7 +123,7 @@
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.accountNumber" fxFlex="50%" class="mat-body-strong">
-            Account No.
+            {{ 'Account No.' | translate }}
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.accountNumber" fxFlex="50%">
@@ -78,7 +131,7 @@
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.checkNumber" fxFlex="50%" class="mat-body-strong">
-            Cheque Number
+            {{ 'Cheque Number' | translate }}
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.checkNumber" fxFlex="50%">
@@ -86,7 +139,7 @@
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.routingCode" fxFlex="50%" class="mat-body-strong">
-            Routing Code
+            {{ 'Routing Code' | translate }}
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.routingCode" fxFlex="50%">
@@ -94,7 +147,7 @@
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.receiptNumber" fxFlex="50%" class="mat-body-strong">
-            Receipt No.
+            {{ 'Receipt No.' | translate }}
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.receiptNumber" fxFlex="50%">
@@ -102,7 +155,7 @@
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.bankNumber" fxFlex="50%" class="mat-body-strong">
-            Bank No.
+            {{ 'Bank No.' | translate }}
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.bankNumber" fxFlex="50%">
@@ -113,6 +166,9 @@
 
       </div>
 
+      <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
+        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">{{ 'Back' | translate }}</button>
+      </div>
     </mat-card-content>
 
   </mat-card>
diff --git a/src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.scss b/src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.scss
index 43351954a..cdcd0f30c 100644
--- a/src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.scss
+++ b/src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.scss
@@ -1,3 +1,5 @@
+@import "assets/styles/helper";
+
 .container {
   max-width: 37rem;
   .content {
@@ -11,3 +13,22 @@
 .transaction-buttons {
   margin-top: 3%;
 }
+
+.loan-relation {
+  background-color: $mid-grey;
+}
+
+.active {
+  background-color: $status-active;
+  height: 4px;
+}
+
+.linked {
+  background-color: $status-approved;
+  height: 4px;
+}
+
+.undo {
+  background-color: $status-active-overdue;
+  height: 4px;
+}
diff --git a/src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.ts b/src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.ts
index 0828c8e47..16b90afde 100644
--- a/src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.ts
+++ b/src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.ts
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 
@@ -8,6 +8,12 @@ import { LoansService } from 'app/loans/loans.service';
 import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { OrganizationService } from 'app/organization/organization.service';
+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 { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
+import { MatTableDataSource } from '@angular/material/table';
 
 /** Custom Dialogs */
 
@@ -20,14 +26,27 @@ import { Dates } from 'app/core/utils/dates';
   templateUrl: './view-transaction.component.html',
   styleUrls: ['./view-transaction.component.scss']
 })
-export class ViewTransactionComponent {
+export class ViewTransactionComponent implements OnInit {
 
   /** Transaction data. */
   transactionData: any;
   /** Is Editable */
   allowEdition = true;
-   /** Is Undoable */
-   allowUndo = true;
+  /** Is Undoable */
+  allowUndo = true;
+  /** Is able to be Chargeback */
+  allowChargeback = true;
+  existTransactionRelations = false;
+
+  paymentTypeOptions: {}[] = [];
+  transactionRelations = new MatTableDataSource();
+  /** Columns to be displayed in Transaction Relations table. */
+  displayedColumns: string[] = ['relationType', 'toTransaction', 'amount'];
+  isFullRelated = false;
+  amountRelationsAllowed = 0;
+
+  clientId: number;
+  loanId: number;
 
   /**
    * Retrieves the Transaction data from `resolve`.
@@ -43,13 +62,43 @@ export class ViewTransactionComponent {
               private dateUtils: Dates,
               private router: Router,
               public dialog: MatDialog,
-              private settingsService: SettingsService) {
+              private settingsService: SettingsService,
+              private organizationService: OrganizationService) {
     this.route.data.subscribe((data: { loansAccountTransaction: any }) => {
       this.transactionData = data.loansAccountTransaction;
       this.allowEdition = !this.transactionData.manuallyReversed && !(this.transactionData.type.id === 20 || this.transactionData.type.id === 21 || this.transactionData.type.id === 22
         || this.transactionData.type.id === 23);
       this.allowUndo = !this.transactionData.manuallyReversed;
+      this.allowChargeback = this.transactionData.type.repayment;
+      if (this.transactionData.type.repayment) {
+        if (this.transactionData.transactionRelations) {
+          this.transactionRelations.data = this.transactionData.transactionRelations;
+          this.existTransactionRelations = (this.transactionData.transactionRelations.length > 0);
+          let amountRelations = 0;
+          this.transactionData.transactionRelations.forEach((relation: any) => {
+            amountRelations += relation.amount;
+          });
+          this.amountRelationsAllowed = this.transactionData.amount - amountRelations;
+          this.isFullRelated =  (this.amountRelationsAllowed === 0);
+          this.allowChargeback = this.transactionData.type.repayment && !this.isFullRelated;
+        }
+      }
+      if (!this.allowChargeback || this.existTransactionRelations) {
+        this.allowUndo = false;
+        this.allowEdition = false;
+      }
     });
+    this.clientId = this.route.snapshot.params['clientId'];
+    this.loanId = this.route.snapshot.params['loanId'];
+  }
+
+  ngOnInit(): void {
+    if (this.allowChargeback) {
+      this.organizationService.getPaymentTypesWithCode().toPromise()
+      .then(data => {
+        this.paymentTypeOptions = data;
+      });
+    }
   }
 
   /**
@@ -77,4 +126,62 @@ export class ViewTransactionComponent {
     });
   }
 
+  chargebackTransaction() {
+    const accountId = this.route.parent.parent.parent.snapshot.params['loanId'];
+    const formfields: FormfieldBase[] = [
+      new SelectBase({
+        controlName: 'paymentTypeId',
+        label: 'Payment Type',
+        value: '',
+        options: { label: 'name', value: 'id', data: this.paymentTypeOptions },
+        required: true,
+        order: 1
+      }),
+      new InputBase({
+        controlName: 'amount',
+        label: 'Amount',
+        value: this.amountRelationsAllowed,
+        type: 'number',
+        required: true,
+        max: this.amountRelationsAllowed,
+        order: 2
+      })
+    ];
+    const data = {
+      title: 'Chargeback Repayment Transaction',
+      layout: { addButtonText: 'Chargeback' },
+      formfields: formfields
+    };
+    const chargebackDialogRef = this.dialog.open(FormDialogComponent, { data });
+    chargebackDialogRef.afterClosed().subscribe((response: { data: any }) => {
+      if (response.data) {
+        if (response.data.value.amount <= this.amountRelationsAllowed) {
+          const locale = this.settingsService.language.code;
+          const payload = {
+            transactionAmount: response.data.value.amount,
+            paymentTypeId: response.data.value.paymentTypeId,
+            locale
+          };
+          this.loansService.executeLoansAccountTransactionsCommand(accountId, 'chargeback', payload, this.transactionData.id).subscribe(() => {
+            this.router.navigate(['../'], { relativeTo: this.route });
+          });
+        }
+      }
+    });
+  }
+
+  loanTransactionRelatedLink(transactionId: number) {
+    return `/#/clients/${this.clientId}/loans-accounts/${this.loanId}/transactions/${transactionId}`;
+  }
+
+  loanTransactionColor(): string {
+    if (this.transactionData.manuallyReversed) {
+      return 'undo';
+    }
+    if (this.existTransactionRelations) {
+      return 'linked';
+    }
+    return 'active';
+  }
+
 }
diff --git a/src/app/organization/offices/offices.component.html b/src/app/organization/offices/offices.component.html
index 92cdf820e..ccc568feb 100644
--- a/src/app/organization/offices/offices.component.html
+++ b/src/app/organization/offices/offices.component.html
@@ -7,18 +7,19 @@
     </button>
   </div>
 
-<div #buttonCreateOffice class="in-block">
-  <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_OFFICE'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
-    Create Office
-  </button>
+  <div #buttonCreateOffice class="in-block">
+    <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_OFFICE'">
+      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      Create Office
+    </button>
   </div>
 
-<div #buttonImportOffices class="in-block">
-  <button mat-raised-button color="primary" *mifosxHasPermission="'CREATE_OFFICE'" [routerLink]="['/organization', 'bulk-import', 'Offices']">
-    <fa-icon icon="upload"></fa-icon>&nbsp;&nbsp;
-    Import Offices
-  </button>
+  <div #buttonImportOffices class="in-block">
+    <button mat-raised-button color="primary" *mifosxHasPermission="'CREATE_OFFICE'"
+      [routerLink]="['/organization', 'bulk-import', 'Offices']">
+      <fa-icon icon="upload"></fa-icon>&nbsp;&nbsp;
+      Import Offices
+    </button>
   </div>
 
 </div>
@@ -53,11 +54,12 @@
 
       <ng-container matColumnDef="openingDate">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Opened On </th>
-        <td mat-cell *matCellDef="let offices"> {{ offices.openingDate  | dateFormat }} </td>
+        <td mat-cell *matCellDef="let offices"> {{ offices.openingDate | dateFormat }} </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" [routerLink]="[row.id, 'general']"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"
+        [routerLink]="[row.id, 'general']"></tr>
 
     </table>
 
@@ -69,11 +71,14 @@
 
 <ng-template #templateButtonTreeView let-popover="popover">
   <h2>Tree View</h2>
-  <p class="mw300">This will launch an alternative view which allows you to view the office hierarchy for your organization.</p>
+  <p class="mw300">This will launch an alternative view which allows you to view the office hierarchy for your
+    organization.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn"
+      (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
     <button mat-raised-button color="primary" (click)="popover.close();previousStep();">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateOffice,buttonCreateOffice,'bottom', true);">Next</button>
+    <button mat-raised-button color="primary"
+      (click)="popover.close();showPopover(templateButtonCreateOffice,buttonCreateOffice,'bottom', true);">Next</button>
   </div>
 </ng-template>
 
@@ -81,9 +86,12 @@
   <h2>Create Office</h2>
   <p class="mw300">This option allows you to create new offices in your organization.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonTreeView,buttonTreeView,'bottom', true);">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonImportOffices,buttonImportOffices,'bottom', true);">Next</button>
+    <button mat-raised-button color="warn"
+      (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary"
+      (click)="popover.close();showPopover(templateButtonTreeView,buttonTreeView,'bottom', true);">Back</button>
+    <button mat-raised-button color="primary"
+      (click)="popover.close();showPopover(templateButtonImportOffices,buttonImportOffices,'bottom', true);">Next</button>
   </div>
 </ng-template>
 
@@ -91,26 +99,34 @@
   <h2>Import Offices</h2>
   <p class="mw300">This will launch the Bulk import/Offices page.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateOffice,buttonCreateOffice,'bottom', true);">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter,'bottom', true);">Next</button>
+    <button mat-raised-button color="warn"
+      (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary"
+      (click)="popover.close();showPopover(templateButtonCreateOffice,buttonCreateOffice,'bottom', true);">Back</button>
+    <button mat-raised-button color="primary"
+      (click)="popover.close();showPopover(templateFilter,filter,'bottom', true);">Next</button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
   <h4>Search bar to filter offices.</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonImportOffices,buttonImportOffices,'bottom', true);">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableOffices,tableOffices,'top', true);">Next</button>
+    <button mat-raised-button color="warn"
+      (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary"
+      (click)="popover.close();showPopover(templateButtonImportOffices,buttonImportOffices,'bottom', true);">Back</button>
+    <button mat-raised-button color="primary"
+      (click)="popover.close();showPopover(templateTableOffices,tableOffices,'top', true);">Next</button>
   </div>
 </ng-template>
 
 <ng-template #templateTableOffices let-popover="popover">
   <h4>List of offices in the organization.</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter,'bottom', true);">Back</button>
+    <button mat-raised-button color="warn"
+      (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary"
+      (click)="popover.close();showPopover(templateFilter,filter,'bottom', true);">Back</button>
     <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
   </div>
 </ng-template>
diff --git a/src/app/organization/organization-routing.module.ts b/src/app/organization/organization-routing.module.ts
index 121142e75..8ab1c7728 100644
--- a/src/app/organization/organization-routing.module.ts
+++ b/src/app/organization/organization-routing.module.ts
@@ -76,7 +76,6 @@ import { AdhocQueryResolver } from './adhoc-query/common-resolvers/adhoc-query.r
 import { TellersResolver } from './tellers/common-resolvers/tellers.resolver';
 import { TellerResolver } from './tellers/common-resolvers/teller.resolver';
 import { PaymentTypesResolver } from './payment-types/payment-types.resolver';
-import { PaymentTypeResolver } from './payment-types/payment-type.resolver';
 import { PasswordPreferencesTemplateResolver } from './password-preferences/password-preferences-template.resolver';
 import { EntityDataTableChecksResolver } from './entity-data-table-checks/entity-data-table-checks.resolver';
 import { WorkingDaysResolver } from './working-days/working-days.resolver';
@@ -518,7 +517,7 @@ const routes: Routes = [
                   component: EditPaymentTypeComponent,
                   data: { title: extract('Edit Payment Type'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
                   resolve: {
-                    paymentType: PaymentTypeResolver
+                    paymentType: PaymentTypesResolver
                   }
                 }
               ]
@@ -669,7 +668,6 @@ const routes: Routes = [
     TellersResolver,
     TellerResolver,
     PaymentTypesResolver,
-    PaymentTypeResolver,
     PasswordPreferencesTemplateResolver,
     EntityDataTableChecksResolver,
     WorkingDaysResolver,
diff --git a/src/app/organization/organization.service.ts b/src/app/organization/organization.service.ts
index 330f51457..c10d14468 100644
--- a/src/app/organization/organization.service.ts
+++ b/src/app/organization/organization.service.ts
@@ -487,6 +487,13 @@ export class OrganizationService {
     return this.http.get('/paymenttypes');
   }
 
+  /**
+   * @returns {Observable<any>} Payment Types data
+   */
+   getPaymentTypesWithCode(): Observable<any> {
+    return this.http.get('/paymenttypes?onlyWithCode=true');
+  }
+
   /**
    * @param {any} paymentType Payment type to be created.
    * @returns {Observable<any>}
diff --git a/src/app/organization/payment-types/payment-type.resolver.ts b/src/app/organization/payment-types/payment-type.resolver.ts
deleted file mode 100644
index d30645e3f..000000000
--- a/src/app/organization/payment-types/payment-type.resolver.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/** Angular Imports */
-import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
-
-/** rxjs Imports */
-import { Observable } from 'rxjs';
-
-/** Custom Services */
-import { OrganizationService } from 'app/organization/organization.service';
-
-/**
- * Payment Type data resolver.
- */
-@Injectable()
-export class PaymentTypeResolver implements Resolve<Object> {
-
-  /**
-   * @param {OrganizationService} organizationService Organization service.
-   */
-  constructor(private organizationService: OrganizationService) {}
-
-  /**
-   * Returns the payment type data.
-   * @returns {Observable<any>}
-   */
-  resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const paymentTypeId = route.paramMap.get('id');
-    return this.organizationService.getPaymentType(paymentTypeId);
-  }
-
-}
diff --git a/src/app/organization/payment-types/payment-types.component.html b/src/app/organization/payment-types/payment-types.component.html
index 724f6c418..11ffc0e0b 100644
--- a/src/app/organization/payment-types/payment-types.component.html
+++ b/src/app/organization/payment-types/payment-types.component.html
@@ -30,10 +30,25 @@
         <td mat-cell *matCellDef="let paymentType"> {{ paymentType.description }} </td>
       </ng-container>
 
+      <ng-container matColumnDef="codeName">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Code </th>
+        <td mat-cell *matCellDef="let paymentType"> {{ paymentType.codeName }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="isSystemDefined">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> System Defined </th>
+        <td mat-cell *matCellDef="let paymentType">
+          <div [className]="paymentType.isSystemDefined === true ? 'true text-center' : 'false text-center'">
+            <fa-icon *ngIf="paymentType.isSystemDefined" icon="check-circle" size="lg" matTooltip="Yes" matTooltipPosition="right"></fa-icon>
+            <fa-icon *ngIf="!paymentType.isSystemDefined" icon="times-circle" size="lg" matTooltip="No" matTooltipPosition="right"></fa-icon>
+          </div>
+        </td>
+      </ng-container>
+
       <ng-container matColumnDef="isCashPayment">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Cash Payment </th>
         <td mat-cell *matCellDef="let paymentType">
-          <div [className]="paymentType.isCashPayment === true ? 'true' : 'false'">
+          <div [className]="paymentType.isCashPayment === true ? 'true text-center' : 'false text-center'">
             <fa-icon *ngIf="paymentType.isCashPayment" icon="check-circle" size="lg" matTooltip="Yes" matTooltipPosition="right"></fa-icon>
             <fa-icon *ngIf="!paymentType.isCashPayment" icon="times-circle" size="lg" matTooltip="No" matTooltipPosition="right"></fa-icon>
           </div>
@@ -42,16 +57,16 @@
 
       <ng-container matColumnDef="position">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Position </th>
-        <td mat-cell *matCellDef="let paymentType"> {{ paymentType.position }} </td>
+        <td mat-cell *matCellDef="let paymentType" class="text-center"> {{ paymentType.position }} </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
         <th mat-header-cell *matHeaderCellDef> Actions </th>
         <td mat-cell *matCellDef="let paymentType">
-          <button mat-button [routerLink]="[paymentType.id, 'edit']" color="primary">
+          <button mat-button [routerLink]="[paymentType.id, 'edit']" color="primary" *ngIf="!paymentType.isSystemDefined">
             <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;Edit
           </button>
-          <button mat-button (click)="deletePaymentType(paymentType.id)" color="warn">
+          <button mat-button (click)="deletePaymentType(paymentType.id)" color="warn" *ngIf="!paymentType.isSystemDefined">
             <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete
           </button>
         </td>
diff --git a/src/app/organization/payment-types/payment-types.component.scss b/src/app/organization/payment-types/payment-types.component.scss
index bf52d42c8..1748276d8 100644
--- a/src/app/organization/payment-types/payment-types.component.scss
+++ b/src/app/organization/payment-types/payment-types.component.scss
@@ -9,3 +9,7 @@ table {
 .false {
   color: #f44366;
 }
+
+.text-center {
+  text-align: center;
+}
diff --git a/src/app/organization/payment-types/payment-types.component.ts b/src/app/organization/payment-types/payment-types.component.ts
index 2b8fe8e20..e744fcdf9 100644
--- a/src/app/organization/payment-types/payment-types.component.ts
+++ b/src/app/organization/payment-types/payment-types.component.ts
@@ -6,9 +6,6 @@ import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
 
-/** rxjs Imports */
-import { of } from 'rxjs';
-
 /** Custom Services */
 import { OrganizationService } from '../organization.service';
 
@@ -28,7 +25,7 @@ export class PaymentTypesComponent implements OnInit {
   /** Payment Types data. */
   paymentTypesData: any;
   /** Columns to be displayed in payment types table. */
-  displayedColumns: string[] = ['name', 'description', 'isCashPayment', 'position', 'actions'];
+  displayedColumns: string[] = ['name', 'description', 'codeName', 'isSystemDefined', 'isCashPayment', 'position', 'actions'];
   /** Data source for payment types table. */
   dataSource: MatTableDataSource<any>;
 
diff --git a/src/app/organization/payment-types/payment-types.resolver.ts b/src/app/organization/payment-types/payment-types.resolver.ts
index 05dff3235..f26d4c59b 100644
--- a/src/app/organization/payment-types/payment-types.resolver.ts
+++ b/src/app/organization/payment-types/payment-types.resolver.ts
@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
+import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -23,8 +23,13 @@ export class PaymentTypesResolver implements Resolve<Object> {
    * Returns the payment types data.
    * @returns {Observable<any>}
    */
-  resolve(): Observable<any> {
-    return this.organizationService.getPaymentTypes();
+   resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const paymentTypeId = route.paramMap.get('id');
+    if (paymentTypeId) {
+      return this.organizationService.getPaymentType(paymentTypeId);
+    } else {
+      return this.organizationService.getPaymentTypes();
+    }
   }
 
 }
diff --git a/src/app/settings/settings.service.ts b/src/app/settings/settings.service.ts
index ce64714d6..07c0fef7e 100644
--- a/src/app/settings/settings.service.ts
+++ b/src/app/settings/settings.service.ts
@@ -40,9 +40,10 @@ export class SettingsService {
   }
 
   setDefaultLanguage() {
+    const defaultLanguage = environment.defaultLanguage ? environment.defaultLanguage : 'en-US';
     this.setLanguage({
-      name: environment.defaultLanguage,
-      code: environment.defaultLanguage.substring(0, 2)
+      name: defaultLanguage,
+      code: defaultLanguage.substring(0, 2)
     });
   }
 
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 3bc9b5e06..88c81bf9b 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -73,6 +73,7 @@ import { TranslateModule } from '@ngx-translate/core';
     MaterialModule,
     FormsModule,
     ReactiveFormsModule,
+    TranslateModule
   ]
 })
 export class SharedModule { }
diff --git a/src/assets/styles/_align.scss b/src/assets/styles/_align.scss
index d913ea1dd..3ad825aa0 100644
--- a/src/assets/styles/_align.scss
+++ b/src/assets/styles/_align.scss
@@ -16,3 +16,16 @@
 .v-super {
   vertical-align: super;
 }
+
+.r-amount {
+  text-align: right !important;
+  padding-right: 5px;
+}
+
+.right {
+  text-align: right !important;
+}
+
+.center {
+  text-align: center !important;
+}
diff --git a/src/assets/styles/_status.scss b/src/assets/styles/_status.scss
index dd90da46d..0c6718604 100644
--- a/src/assets/styles/_status.scss
+++ b/src/assets/styles/_status.scss
@@ -26,10 +26,6 @@
   color: $status-active-overdue;
 }
 
-.status-active-overdue {
-  color: $status-active-overdue;
-}
-
 .status-matured {
   color: $status-matured;
 }
diff --git a/src/index.html b/src/index.html
index ef5270584..254789506 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8"/>
-  <title>Mifos X</title>
+  <title>{{ 'APP_NAME' | translate }}</title>
   <base href="/"/>
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
   <meta name="apple-mobile-web-app-capable" content="yes">