Chargeback Loan Transaction

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>

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>

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;
+    }
   }
 }
+

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

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>

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;
+}

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';
+  }
+
 }