Loan account transaction tab enhacements

src/app/account-transfers/view-account-transfer/view-account-transfer.component.html

@@ -1,9 +1,11 @@
 <div class="container">
-  <span *ngIf="!viewAccountTransferData.reversed">
+  <div fxLayoutAlign="end" class="container m-b-20" fxLayoutGap="2%">
-    <button mat-raised-button color="warn" *mifosxHasPermission="'ADJUST_ACCOUNTTRANSFER'" >
+    <span *ngIf="!viewAccountTransferData.reversed">
-      <fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'labels.buttons.Undo' | translate}}
+      <button mat-raised-button color="warn" *mifosxHasPermission="'ADJUST_ACCOUNTTRANSFER'" >
-    </button>
+        <fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'labels.buttons.Undo' | translate}}
-  </span>
+      </button>
+    </span>
+  </div>
 
   <mat-card>
 

src/app/loans/loans-view/transactions-tab/transactions-tab.component.html

@@ -1,139 +1,195 @@
 <div class="container">
 
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px" class="transaction-buttons" *ngIf="checkStatus()">
+    <mat-checkbox [formControl]="hideReversedParam" (click)="hideReversed()" class="accruals">
+      {{"labels.inputs.Hide Reversed" | translate}}</mat-checkbox>
     <mat-checkbox [formControl]="hideAccrualsParam" (click)="hideAccruals()" class="accruals">
       {{"labels.inputs.Hide Accruals" | translate}}</mat-checkbox>
     <button mat-raised-button color="primary" class="transaction-button" [routerLink]="['export']">
       {{"labels.buttons.Export" | translate}}
     </button>
+    <!--
     <button mat-raised-button color="primary" class="transaction-button">
       {{"labels.buttons.View Journal Entries" | translate}}
     </button>
+    -->
   </div>
 
   <table mat-table [dataSource]="dataSource" matSort>
 
     <ng-container matColumnDef="row">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> # </th>
       <td mat-cell *matCellDef="let idx = index;">{{(idx + 1)}}</td>
     </ng-container>
 
     <ng-container matColumnDef="id">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Id" | translate}} </th>
+      <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)" (click)="showTransactions(transaction)">{{ transaction.id }}</td>
-      <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.id }}
-      </td>
     </ng-container>
 
     <ng-container matColumnDef="office">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Office" | translate}} </th>
+      <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)">{{ transaction.officeName }}</td>
-      <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{
-        transaction.officeName }} </td>
     </ng-container>
 
     <ng-container matColumnDef="externalId">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.External Id" | translate}} </th>
       <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)">
         <mifosx-external-identifier externalId="{{transaction.externalId}}"></mifosx-external-identifier>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="date">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Transaction Date" | translate}} </th>
       <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.date | dateFormat }} </td>
     </ng-container>
 
     <ng-container matColumnDef="transactionType">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction Type" | translate}} </th>
+      <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ 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 class="center" *matHeaderCellDef> {{"labels.inputs.Amount" | translate}} </th>
       <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction"
         [ngClass]="loanTransactionColor(transaction)"> {{ transaction.amount | formatNumber }} </td>
     </ng-container>
 
     <ng-container matColumnDef="principal">
-      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Breakdown" | translate}} </th>
       <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction"
         [ngClass]="loanTransactionColor(transaction)"> {{ transaction.principalPortion | formatNumber }} </td>
     </ng-container>
 
     <ng-container matColumnDef="interest">
-      <th mat-header-cell *matHeaderCellDef> </th>
       <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction"
         [ngClass]="loanTransactionColor(transaction)"> {{ transaction.interestPortion | formatNumber }} </td>
     </ng-container>
 
     <ng-container matColumnDef="fee">
-      <th mat-header-cell *matHeaderCellDef> </th>
       <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction"
         [ngClass]="loanTransactionColor(transaction)"> {{ transaction.feeChargesPortion | formatNumber }} </td>
     </ng-container>
 
     <ng-container matColumnDef="penalties">
-      <th mat-header-cell *matHeaderCellDef> </th>
       <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction"
         [ngClass]="loanTransactionColor(transaction)"> {{ transaction.penaltyChargesPortion | formatNumber }} </td>
     </ng-container>
 
     <ng-container matColumnDef="loanBalance">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Loan Balance" | translate}} </th>
       <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction"
         [ngClass]="loanTransactionColor(transaction)"> {{ transaction.outstandingLoanBalance | formatNumber }} </td>
     </ng-container>
 
     <ng-container matColumnDef="actions">
-      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Actions" | translate}} </th>
+      <td mat-cell *matCellDef="let transaction" class="center">
-      <td mat-cell *matCellDef="let transaction" class="center td-min-space">
+        <button mat-icon-button [matMenuTriggerFor]="transactionMenu" aria-label="" class="action-button" *ngIf="displaySubMenu(transaction)">
-        <button class="account-action-button" *ngIf="allowUndoTransaction(transaction)" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Undo Transaction' | translate}}"
+          <mat-icon>more_vert</mat-icon>
-          matTooltipPosition="left" (click)="undoTransaction(transaction, $event)">
-          <i class="fa fa-undo"></i>
-        </button>
-        <button class="account-action-button" *ngIf="!transaction.manuallyReversed" mat-raised-button color="primary"
-          (click)="routeEdit($event)" [routerLink]="[transaction.id, 'reciept']" matTooltip="{{ 'tooltips.View Receipts' | translate}}">
-          <i class="fa fa-file-text"></i>
-        </button>
-        <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.View Journal Entries' | translate}}"
-          matTooltipPosition="left" (click)="routeEdit($event)"
-          [routerLink]="['/','journal-entry', 'view', 'L'+transaction.id ]">
-          <i class="fa fa-arrow-circle-right"></i>
         </button>
+        <mat-menu #transactionMenu="matMenu">
+          <span *ngIf="!isReAgoeOrReAmortize(transaction.type)">
+            <button mat-menu-item (click)="showTransactions(transaction)">
+              <mat-icon><fa-icon icon="eye" size="sm"></fa-icon></mat-icon>
+              <span>{{ 'labels.text.View Transaction' | translate}}</span>
+            </button>
+          </span>
+          <span *ngIf="allowUndoTransaction(transaction)">
+            <button mat-menu-item *mifosxHasPermission="'ADJUST_LOAN'" (click)="undoTransaction(transaction, $event)">
+              <mat-icon><fa-icon icon="undo" size="sm"></fa-icon></mat-icon>
+              <span>{{ 'tooltips.Undo Transaction' | translate}}</span>
+            </button>       
+            <button mat-menu-item class="account-action-button" (click)="routeEdit($event)" [routerLink]="[transaction.id, 'reciept']">
+              <mat-icon><fa-icon icon="receipt" size="sm"></fa-icon></mat-icon>
+              <span>{{ 'tooltips.View Receipts' | translate}}</span>
+            </button>
+          </span>
+          <span *ngIf="isReAge(transaction.type) && !transaction.manuallyReversed">
+            <button mat-menu-item *mifosxHasPermission="'UNDO_REAGE_LOAN'" (click)="undoReAgeOrReAmortize(transaction, $event)">
+              <mat-icon><fa-icon icon="undo" size="sm"></fa-icon></mat-icon>
+              <span>{{ 'labels.menus.Undo Re-Age' | translate}}</span>
+            </button>   
+          </span>
+          <span *ngIf="isReAmortize(transaction.type) && !transaction.manuallyReversed">
+            <button mat-menu-item *mifosxHasPermission="'UNDO_REAMORTIZE_LOAN'" (click)="undoReAgeOrReAmortize(transaction, $event)">
+              <mat-icon><fa-icon icon="undo" size="sm"></fa-icon></mat-icon>
+              <span>{{ 'labels.menus.Undo Re-Amortize' | translate}}</span>
+            </button>   
+          </span>
+          <span *ngIf="viewJournalEntry(transaction.type)">
+            <button mat-menu-item (click)="routeEdit($event)" [routerLink]="['/','journal-entry', 'view', 'L'+transaction.id ]">
+              <mat-icon><fa-icon icon="table-cells" size="sm"></fa-icon></mat-icon>
+              <span>{{ 'tooltips.View Journal Entries' | translate}}</span>
+            </button>
+          </span>
+        </mat-menu>
       </td>
     </ng-container>
 
     <!-- Sub header -->
-    <ng-container matColumnDef="header">
+    <ng-container matColumnDef="h1-row">
+      <th mat-header-cell *matHeaderCellDef> # </th>
+    </ng-container>
+
+    <ng-container matColumnDef="h1-id">
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Id" | translate}} </th>
+    </ng-container>
+
+    <ng-container matColumnDef="h1-office">
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Office" | translate}} </th>
+    </ng-container>
+
+    <ng-container matColumnDef="h1-external-id">
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.External Id" | translate}} </th>
+    </ng-container>
+    
+    <ng-container matColumnDef="h1-transaction-date">
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction Date" | translate}} </th>
+    </ng-container>
+    
+    <ng-container matColumnDef="h1-transaction-type">
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction Type" | translate}} </th>
+    </ng-container>
+
+    <ng-container matColumnDef="h1-space">
+      <th mat-header-cell *matHeaderCellDef> </th>
+    </ng-container>
+    
+    <ng-container matColumnDef="h1-breakdown">
+      <th mat-header-cell *matHeaderCellDef class="center" [attr.colspan]="4"> {{"labels.inputs.Breakdown" | translate}} </th>
+    </ng-container>
+    
+    <ng-container matColumnDef="h1-loan-balance">
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Balance" | translate}} </th>
+    </ng-container>
+    
+    <ng-container matColumnDef="h1-actions">
+      <th mat-header-cell *matHeaderCellDef class="center"> {{"labels.inputs.Actions" | translate}} </th>
+    </ng-container>
+
+    <!-- Sub header -->
+    <ng-container matColumnDef="h2-space">
       <th mat-header-cell *matHeaderCellDef [attr.colspan]="6"> </th>
     </ng-container>
 
-    <ng-container matColumnDef="header-principal">
+    <ng-container matColumnDef="h2-amount">
+      <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> {{"labels.inputs.Amount" | translate}} </th>
+    </ng-container>
+
+    <ng-container matColumnDef="h2-principal">
       <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> {{"labels.inputs.Principal" | translate}} </th>
     </ng-container>
 
-    <ng-container matColumnDef="header-interest">
+    <ng-container matColumnDef="h2-interest">
       <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> {{"labels.inputs.Interest" | translate}} </th>
     </ng-container>
 
-    <ng-container matColumnDef="header-fees">
+    <ng-container matColumnDef="h2-fees">
       <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> {{"labels.inputs.Fees" | translate}} </th>
     </ng-container>
 
-    <ng-container matColumnDef="header-penalties">
+    <ng-container matColumnDef="h2-penalties">
       <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> {{"labels.inputs.Penalties" | translate}} </th>
     </ng-container>
 
-    <ng-container matColumnDef="header-action">
+    <ng-container matColumnDef="h2-action">
-      <th mat-header-cell *matHeaderCellDef [attr.colspan]="1"> </th>
+      <th mat-header-cell *matHeaderCellDef [attr.colspan]="2"> </th>
     </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-header-row *matHeaderRowDef="displayedHeader1Columns"></tr>
-    <tr mat-header-row
+    <tr mat-header-row *matHeaderRowDef="displayedHeader2Columns"></tr>
-      *matHeaderRowDef="['header', 'header-principal', 'header-interest', 'header-fees', 'header-penalties', 'header-action']">
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
-    </tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" (click)="showTransactions(row)">
-    </tr>
 
   </table>
 

src/app/loans/loans-view/transactions-tab/transactions-tab.component.scss

@@ -58,3 +58,8 @@
 .transaction-button {
   min-width: 180px;
 }
+
+.action-button {
+  width: 100%;
+  height: 100%;
+}

src/app/loans/loans-view/transactions-tab/transactions-tab.component.ts

@@ -10,6 +10,8 @@ import { MatDialog } from '@angular/material/dialog';
 import { SettingsService } from 'app/settings/settings.service';
 import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component';
 import { TranslateService } from '@ngx-translate/core';
+import { LoanTransaction } from 'app/products/loan-products/models/loan-account.model';
+import { LoanTransactionType } from 'app/loans/models/loan-transaction-type.model';
 
 @Component({
   selector: 'mifosx-transactions-tab',
@@ -24,15 +26,19 @@ export class TransactionsTabComponent implements OnInit {
   tempTransaction: any;
   /** Form control to handle accural parameter */
   hideAccrualsParam: UntypedFormControl;
+  hideReversedParam: UntypedFormControl;
   /** Stores the status of the loan account */
   status: string;
   /** Columns to be displayed in original schedule table. */
   displayedColumns: string[] = ['row', 'id', 'office', 'externalId', 'date', 'transactionType', 'amount', 'principal', 'interest', 'fee', 'penalties', 'loanBalance', 'actions'];
+  displayedHeader1Columns: string[] = ['h1-row', 'h1-id', 'h1-office', 'h1-external-id', 'h1-transaction-date', 'h1-transaction-type', 'h1-space', 'h1-breakdown', 'h1-loan-balance', 'h1-actions'];
+  displayedHeader2Columns: string[] = ['h2-space', 'h2-amount', 'h2-principal', 'h2-interest', 'h2-fees', 'h2-penalties', 'h2-action'];
 
   dataSource: MatTableDataSource<any>;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   @ViewChild(MatSort, { static: true }) sort: MatSort;
 
+  loanId: number;
   /**
    * Retrieves the loans with associations data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
@@ -49,10 +55,12 @@ export class TransactionsTabComponent implements OnInit {
       this.tempTransaction = data.loanDetailsData.transactions;
       this.status = data.loanDetailsData.status.value;
     });
+    this.loanId = this.route.parent.parent.snapshot.params['loanId'];
   }
 
   ngOnInit() {
     this.hideAccrualsParam = new UntypedFormControl(false);
+    this.hideReversedParam = new UntypedFormControl(false);
     this.setLoanTransactions(this.transactions);
   }
 
@@ -65,8 +73,8 @@ export class TransactionsTabComponent implements OnInit {
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
     if (this.tempTransaction) {
-      this.tempTransaction.forEach((element: any) => {
+      this.tempTransaction.forEach((element: LoanTransaction) => {
-        if (this.isAccrual(element.transactionType)) {
+        if (this.isAccrual(element.type)) {
           this.tempTransaction = this.removeItem(this.tempTransaction, element);
         }
       });
@@ -108,29 +116,36 @@ export class TransactionsTabComponent implements OnInit {
    * WAIVE_INTEREST:4
    * WAIVE_CHARGES:9
    * ACCRUAL:10
+   * REFUND:16
+   * CHARGE_PAYMENT:17
+   * REFUND_FOR_ACTIVE_LOAN:18
+   * INCOME_POSTING: 19
    * CREDIT_BALANCE_REFUND:20
    * MERCHANT_ISSUED_REFUND:21
    * PAYOUT_REFUND:22
    * GOODWILL_CREDIT:23
+   * CHARGE_REFUND:24
+   * CHARGEBACK:25
    * CHARGE_ADJUSTMENT:26
+   * CHARGE_OFF:27
    * DOWN_PAYMENT:28
    * REAGE:29
    * REAMORTIZE:30
    */
-  showTransactions(transactionsData: any) {
+  showTransactions(transactionsData: LoanTransaction) {
     if ([1, 2, 4, 9, 20, 21, 22, 23, 26, 28, 29, 30].includes(transactionsData.type.id)) {
       this.router.navigate([transactionsData.id], { relativeTo: this.route });
     }
   }
 
-  allowUndoTransaction(transaction: any) {
+  allowUndoTransaction(transaction: LoanTransaction) {
     if (transaction.manuallyReversed) {
       return false;
     }
-    return ([27].includes(transaction.type.id));
+    return !(transaction.type.disbursement || transaction.type.chargeoff || this.isReAgoeOrReAmortize(transaction.type) );
   }
 
-  loanTransactionColor(transaction: any): string {
+  loanTransactionColor(transaction: LoanTransaction): string {
     if (transaction.manuallyReversed) {
       return 'strike';
     }
@@ -167,13 +182,13 @@ export class TransactionsTabComponent implements OnInit {
    * Stops the propagation to view pages.
    * @param $event Mouse Event
    */
-  undoTransaction(transaction: any, $event: MouseEvent) {
+  undoTransaction(transaction: LoanTransaction, $event: MouseEvent) {
     $event.stopPropagation();
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const loanId = this.route.parent.parent.snapshot.params['loanId'];
     let command = 'undo';
-    let operationDate = transaction.date;
+    let operationDate = this.dateUtils.parseDate(transaction.date);
     let payload = {};
     if (this.isChargeOff(transaction.type)) {
       command = 'undo-charge-off';
@@ -207,31 +222,78 @@ export class TransactionsTabComponent implements OnInit {
     });
   }
 
-  private isAccrual(transactionType: any): boolean {
+  undoReAgeOrReAmortize(transaction: LoanTransaction): void {
+    const actionName = transaction.type.reAmortize ? 'Re-Amortize' : 'Re-Age';
+    const undoTransactionAccountDialogRef = this.dialog.open(ConfirmationDialogComponent, {
+      data: {
+        heading: this.translateService.instant('labels.heading.Undo Transaction'),
+        dialogContext: this.translateService.instant('labels.dialogContext.Are you sure you want undo the transaction type') + ' ' + this.translateService.instant('labels.menus.' + actionName)
+      }
+    });
+    undoTransactionAccountDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.confirm) {
+        const undoCommand = actionName === 'Re-Age' ? 'undoReAge' : 'undoReAmortize';
+        this.loansService.executeLoansAccountTransactionsCommand(String(this.loanId), undoCommand, {}).subscribe(() => {
+          this.reload();
+        });
+      }
+    });
+  }
+
+  private isAccrual(transactionType: LoanTransactionType): boolean {
     return (transactionType.accrual || transactionType.code === 'loanTransactionType.overdueCharge');
   }
 
-  private isChargeOff(transactionType: any): boolean {
+  private isChargeOff(transactionType: LoanTransactionType): boolean {
     return (transactionType.chargeoff || transactionType.code === 'loanTransactionType.chargeOff');
   }
 
-  private isDownPayment(transactionType: any): boolean {
+  private isDownPayment(transactionType: LoanTransactionType): boolean {
     return (transactionType.downPayment || transactionType.code === 'loanTransactionType.downPayment');
   }
 
-  private isReAge(transactionType: any): boolean {
+  private isReAge(transactionType: LoanTransactionType): boolean {
-    return (transactionType.code === 'loanTransactionType.reAge');
+    return (transactionType.reAge || transactionType.code === 'loanTransactionType.reAge');
   }
 
-  private isReAmortize(transactionType: any): boolean {
+  private isReAmortize(transactionType: LoanTransactionType): boolean {
-    return (transactionType.code === 'loanTransactionType.reAmortize');
+    return (transactionType.reAmortize || transactionType.code === 'loanTransactionType.reAmortize');
+  }
+
+  private isReAgoeOrReAmortize(transactionType: LoanTransactionType): boolean {
+    return this.isReAmortize(transactionType) || this.isReAge(transactionType);
+  }
+
+  viewJournalEntry(transactionType: LoanTransactionType): boolean {
+    return !(this.isReAmortize(transactionType) || this.isReAge(transactionType));
   }
 
   private reload() {
     const clientId = this.route.parent.parent.snapshot.params['clientId'];
-    const loanId = this.route.parent.parent.snapshot.params['loanId'];
     const url: string = this.router.url;
     this.router.navigateByUrl(`/clients/${clientId}/loans-accounts`, { skipLocationChange: true })
       .then(() => this.router.navigate([url]));
   }
+
+  hideReversed() {
+    let transactions: LoanTransaction[] = this.transactions;
+    if (!this.hideReversedParam.value) {
+      transactions = [];
+      this.transactions.forEach((t: LoanTransaction) => {
+        if (!t.manuallyReversed) {
+          transactions.push(t);
+        }
+      });
+    }
+    this.dataSource = new MatTableDataSource(transactions);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+  displaySubMenu(transaction: LoanTransaction): boolean {
+    if (this.isReAgoeOrReAmortize(transaction.type) && transaction.manuallyReversed) {
+      return false;
+    }
+    return true;
+  }
 }

src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html

@@ -1,18 +1,19 @@
 <div class="tab-container mat-typography">
 
   <div class="mat-elevation-z1 m-b-25" [hidden]="!accountWithTransactions">
-
     <div fxLayout="row" fxLayoutAlign="start">
       <div class="m-b-10">
-        <h3>All Transactions</h3>
+        <h3>{{"labels.headings.All Transactions" | translate }}</h3>
       </div>
       <div class="action-button m-b-20" fxLayout="row" fxLayoutGap="20px" *ngIf="checkStatus()">
         <mat-checkbox [formControl]="hideReversedParam" (click)="hideReversed()" class="accruals">
           {{"labels.inputs.Hide Reversed" | translate}}</mat-checkbox>
         <mat-checkbox [formControl]="hideAccrualsParam" (click)="hideAccruals()" class="accruals">
           {{"labels.inputs.Hide Accruals" | translate}}</mat-checkbox>
+        <!--
         <button mat-raised-button color="primary" [routerLink]="['/accounting', 'journal-entries']">View Journal Entries</button>
-        <button mat-raised-button color="primary" [routerLink]="['export']">Export</button>
+        -->
+        <button mat-raised-button color="primary" [routerLink]="['export']">{{"labels.buttons.Export" | translate}}</button>
       </div>
     </div>
 
@@ -24,51 +25,64 @@
       </ng-container>
 
       <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Id </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Id" | translate}} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ transaction.id }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)"> {{ transaction.id }} </td>
       </ng-container>
 
       <ng-container matColumnDef="date">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Transaction Date </th>
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{"labels.inputs.Transaction Date" | translate}} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ transaction.date | dateFormat }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)"> {{ transaction.date | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionType">
-        <th mat-header-cell class="center" *matHeaderCellDef> Transaction Type </th>
+        <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Transaction Type" | translate}} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ transaction.transactionType.value  }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)"> {{ transaction.transactionType.value  }} </td>
       </ng-container>
 
       <ng-container matColumnDef="debit">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> Debit </th>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Debit" | translate}} </th>
-        <td mat-cell class="r-amount" *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ isDebit(transaction.transactionType) ? (transaction.amount | formatNumber) : 'N/A'}} </td>
+        <td mat-cell class="r-amount" *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)"> {{ isDebit(transaction.transactionType) ? (transaction.amount | formatNumber) : 'N/A'}} </td>
       </ng-container>
 
       <ng-container matColumnDef="credit">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> Credit </th>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Credit" | translate}} </th>
-        <td mat-cell class="r-amount" *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ !isDebit(transaction.transactionType) ? (transaction.amount | formatNumber) : 'N/A' }} </td>
+        <td mat-cell class="r-amount" *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)"> {{ !isDebit(transaction.transactionType) ? (transaction.amount | formatNumber) : 'N/A' }} </td>
       </ng-container>
 
       <ng-container matColumnDef="balance">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> Balance </th>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Balance" | translate}} </th>
-        <td mat-cell class="r-amount" *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ transaction.runningBalance | formatNumber }} </td>
+        <td mat-cell class="r-amount" *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)"> {{ transaction.runningBalance | formatNumber }} </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell class="center" *matHeaderCellDef> Actions </th>
+        <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Actions" | translate}} </th>
-        <td mat-cell class="center" *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}">
+        <td mat-cell class="center" *matCellDef="let transaction">
-          <button class="account-action-button" mat-raised-button color="primary" (click)="routeEdit($event)" [routerLink]="[transaction.id, 'reciept']">
+          <button mat-icon-button [matMenuTriggerFor]="transactionMenu" aria-label="" class="action-button">
-            <i class="fa fa-file" matTooltip="View Reciept"></i>
+            <mat-icon>more_vert</mat-icon>
-          </button>
-          <button class="account-action-button" mat-raised-button color="primary" matTooltip="View Journal Entries"
-            matTooltipPosition="left" (click)="routeEdit($event)"
-            [routerLink]="['/','journal-entry', 'view', 'S'+transaction.id ]">
-            <i class="fa fa-arrow-circle-right"></i>
           </button>
+          <mat-menu #transactionMenu="matMenu">
+            <button mat-menu-item (click)="showTransactions(transaction)">
+              <mat-icon><fa-icon icon="eye" size="sm"></fa-icon></mat-icon>
+              <span>{{ 'labels.text.View Transaction' | translate}}</span>
+            </button>
+            <button mat-menu-item *mifosxHasPermission="'ADJUST_LOAN'" (click)="undoTransaction(transaction, $event)">
+              <mat-icon><fa-icon icon="undo" size="sm"></fa-icon></mat-icon>
+              <span>{{ 'tooltips.Undo Transaction' | translate}}</span>
+            </button>  
+            <button mat-menu-item class="account-action-button" (click)="routeEdit($event)" [routerLink]="[transaction.id, 'reciept']">
+              <mat-icon><fa-icon icon="receipt" size="sm"></fa-icon></mat-icon>
+              <span>{{ 'tooltips.View Receipts' | translate}}</span>
+            </button>
+            <button mat-menu-item (click)="routeEdit($event)" [routerLink]="['/','journal-entry', 'view', 'S'+transaction.id ]">
+              <mat-icon><fa-icon icon="table-cells" size="sm"></fa-icon></mat-icon>
+              <span>{{ 'tooltips.View Journal Entries' | translate}}</span>
+            </button>
+          </mat-menu>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" (click)="showTransactions(row)"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
 
     </table>
 

src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.scss

@@ -1,3 +1,5 @@
+@import "assets/styles/helper";
+
 .tab-container {
   padding: 1%;
   margin: 1%;
@@ -27,4 +29,8 @@
 .strike {
   text-decoration: line-through;
   color: red;
+}
+
+.transfer {
+  color: $status-transfer;
 }

src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.ts

@@ -5,7 +5,12 @@ import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
-import { SavingsAccountTransaction } from 'app/savings/models/savings-account-transaction.model';
+import { Dates } from 'app/core/utils/dates';
+import { SavingsAccountTransaction, SavingsAccountTransactionType } from 'app/savings/models/savings-account-transaction.model';
+import { SavingsService } from 'app/savings/savings.service';
+import { SettingsService } from 'app/settings/settings.service';
+import { UndoTransactionDialogComponent } from '../custom-dialogs/undo-transaction-dialog/undo-transaction-dialog.component';
+import { MatDialog } from '@angular/material/dialog';
 
 /**
  * Transactions Tab Component.
@@ -35,17 +40,24 @@ export class TransactionsTabComponent implements OnInit {
 
   accountWithTransactions = false;
 
+  accountId: string;
+
   /**
    * Retrieves savings account data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
   constructor(private route: ActivatedRoute,
-              private router: Router) {
+              private router: Router,
+              private savingsService: SavingsService,
+              private settingsService: SettingsService,
+              private dialog: MatDialog,
+              private dateUtils: Dates) {
     this.route.parent.parent.data.subscribe((data: { savingsAccountData: any }) => {
       this.transactionsData = data.savingsAccountData.transactions;
       this.tempTransaction = this.transactionsData;
       this.status = data.savingsAccountData.status.value;
     });
+    this.accountId = this.route.parent.parent.snapshot.params['savingAccountId'];
   }
 
   ngOnInit() {
@@ -76,12 +88,12 @@ export class TransactionsTabComponent implements OnInit {
    * Checks if transaction is debit.
    * @param {any} transactionType Transaction Type
    */
-  isDebit(transactionType: any) {
+  isDebit(transactionType: SavingsAccountTransactionType) {
     return transactionType.withdrawal === true || transactionType.feeDeduction === true
             || transactionType.overdraftInterest === true || transactionType.withholdTax === true;
   }
 
-  isAccrual(transactionType: any): boolean {
+  isAccrual(transactionType: SavingsAccountTransactionType): boolean {
     return (transactionType.accrual || transactionType.code === 'savingsAccountTransactionType.accrual');
   }
 
@@ -100,7 +112,7 @@ export class TransactionsTabComponent implements OnInit {
    * Show Transactions Details
    * @param transactionsData Transactions Data
    */
-  showTransactions(transactionsData: any) {
+  showTransactions(transactionsData: SavingsAccountTransaction) {
     if (transactionsData.transfer) {
       this.router.navigate([`../transfer-funds/account-transfers/${transactionsData.transfer.id}`], { relativeTo: this.route });
     } else {
@@ -139,4 +151,39 @@ export class TransactionsTabComponent implements OnInit {
     this.dataSource.sort = this.sort;
   }
 
+  savingsTransactionColor(transaction: SavingsAccountTransaction): string {
+    if (transaction.reversed) {
+      return 'strike';
+    }
+    if (transaction.transfer) {
+      return 'transfer';
+    }
+    return '';
+  }
+
+  undoTransaction(transactionData: SavingsAccountTransaction): void {
+    const undoTransactionAccountDialogRef = this.dialog.open(UndoTransactionDialogComponent);
+    undoTransactionAccountDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.confirm) {
+        const locale = this.settingsService.language.code;
+        const dateFormat = this.settingsService.dateFormat;
+        const data = {
+          transactionDate: this.dateUtils.parseDate(transactionData.date),
+          transactionAmount: 0,
+          dateFormat,
+          locale
+        };
+        this.savingsService.executeSavingsAccountTransactionsCommand(this.accountId, 'undo', data, transactionData.id).subscribe(() => {
+          this.reload();
+        });
+      }
+    });
+  }
+
+  private reload() {
+    const clientId = this.route.parent.parent.snapshot.params['clientId'];
+    const url: string = this.router.url;
+    this.router.navigateByUrl(`/clients/${clientId}/savings-accounts`, { skipLocationChange: true })
+      .then(() => this.router.navigate([url]));
+  }
 }

src/app/savings/savings-account-view/transactions/view-transaction/savings-transaction-general-tab/savings-transaction-general-tab.component.html

@@ -4,20 +4,20 @@
     <span *mifosxHasPermission="'ADJUSTTRANSACTION_SAVINGSACCOUNT'">
       <button mat-raised-button color="primary" *ngIf="transactionData.transactionType.value == 'Transfer' || transactionData.reversed == 'true'
           || transactionData.transactionType.id==3 || transactionData.transactionType.id==17" [routerLink]="'edit'">
-        <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
+        <fa-icon icon="edit" class="m-r-10"></fa-icon>{{"labels.buttons.Edit" | translate}}
       </button>
     </span>
   </span>
   <span *ngIf="!transactionData.reversed && transactionData.transactionType.amountHold">
     <button mat-raised-button color="primary" *mifosxHasPermission="'RELEASEAMOUNT_SAVINGSACCOUNT'"
       (click)="releaseAmount()">
-      <fa-icon icon="lock-open" class="m-r-10"></fa-icon>Release Amount
+      <fa-icon icon="lock-open" class="m-r-10"></fa-icon>{{"labels.buttons.Release Amount" | translate}}
     </button>
   </span>
   <span *ngIf="allowUndo()">
     <button mat-raised-button color="warn" *mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
       (click)="undoTransaction()">
-      <fa-icon icon="undo" class="m-r-10"></fa-icon>Undo
+      <fa-icon icon="undo" class="m-r-10"></fa-icon>{{"labels.buttons.Undo" | translate}}
     </button>
   </span>
 </div>
@@ -31,7 +31,7 @@
       <div fxLayout="row wrap" class="content">
 
         <div fxFlex="50%" class="mat-body-strong">
-          Transaction Id
+          {{"labels.inputs.Id" | translate}}
         </div>
 
         <div fxFlex="50%">
@@ -39,7 +39,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Type
+          {{"labels.inputs.Transaction Type" | translate}}
         </div>
 
         <div fxFlex="50%">
@@ -47,7 +47,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Transaction Date
+          {{"labels.inputs.Transaction Date" | translate}}
         </div>
 
         <div fxFlex="50%">
@@ -55,7 +55,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Currency
+          {{"labels.inputs.Currency" | translate}}
         </div>
 
         <div fxFlex="50%">
@@ -63,18 +63,18 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Amount
+          {{"labels.inputs.Amount" | translate}}
         </div>
 
         <div fxFlex="50%">
           {{ transactionData.amount | currency:transactionData.currency.code }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div fxFlex="50%" class="mat-body-strong" *ngIf="transactionData.note">
-          Note
+          {{"labels.inputs.Note" | translate}}
         </div>
 
-        <div fxFlex="50%">
+        <div fxFlex="50%" *ngIf="transactionData.note">
           {{ transactionData.note }}
         </div>
 

src/app/shared/accounting/view-journal-entry-transaction/view-journal-entry-transaction.component.html

@@ -63,14 +63,12 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="id">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Entry ID' | translate }}
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Entry ID' | translate }}</th>
-        </th>
         <td mat-cell *matCellDef="let transaction"> {{ transaction.id }} </td>
       </ng-container>
 
       <ng-container matColumnDef="glAccountType">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Type' | translate }}
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Type' | translate }}</th>
-        </th>
         <td mat-cell *matCellDef="let transaction"> {{ transaction.glAccountType.value }} </td>
       </ng-container>
 
@@ -87,24 +85,21 @@
       </ng-container>
 
       <ng-container matColumnDef="debit">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Debit' | translate }}
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Debit' | translate }}</th>
-        </th>
         <td mat-cell *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'DEBIT'"> {{
             (transaction.currency.displaySymbol || transaction.currency.code) }} {{ transaction.amount | formatNumber }}
           </span></td>
       </ng-container>
 
       <ng-container matColumnDef="credit">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Credit' | translate }}
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Credit' | translate }}</th>
-        </th>
         <td mat-cell *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'CREDIT'"> {{
             (transaction.currency.displaySymbol || transaction.currency.code) }} {{ transaction.amount | formatNumber }}
           </span></td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="viewJournalEntry(row)" class="select-row">
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="viewJournalEntry(row)" class="select-row"></tr>
-      </tr>
 
     </table>
 
@@ -123,4 +118,9 @@
       {{"labels.text.No data found" | translate}}
     </div>
   </div>
+
+  <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px" class="m-t-15 m-b-15">
+    <button type="button" color="primary" mat-raised-button (click)="goBack()">{{ 'labels.buttons.Back' | translate
+      }}</button>
+  </div>
 </div>

src/app/shared/accounting/view-journal-entry-transaction/view-journal-entry-transaction.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { ViewJournalEntryComponent } from '../view-journal-entry/view-journal-entry.component';
 import { RevertTransactionComponent } from 'app/accounting/revert-transaction/revert-transaction.component';
 import { AccountingService } from 'app/accounting/accounting.service';

src/app/shared/icons.module.ts

@@ -109,7 +109,9 @@ import {
   faFileExport,
   faCalculator,
   faCalendarCheck,
-  faPause
+  faPause,
+  faReceipt,
+  faTableCells
 } from '@fortawesome/free-solid-svg-icons';
 
 /**
@@ -231,7 +233,10 @@ export class IconsModule {
       faTasks,
       faCoins,
       faPiggyBank,
-      faBars
+      faBars,
+      faUndo,
+      faReceipt,
+      faTableCells
     );
   }
 

src/app/shared/transaction-payment-detail/transaction-payment-detail.component.html

@@ -1,49 +1,36 @@
-<ng-container class="content">
+<div fxLayout="row wrap" class="content">
-  <div *ngIf="paymentDetailData.paymentType" fxFlex="50%" class="attribute">
+  <div fxFlex="50%" class="mat-body-strong">
-    {{ 'Payment Type' | translate}}
+    {{ 'labels.inputs.Payment Type' | translate}}
   </div>
 
-  <div *ngIf="paymentDetailData.paymentType" fxFlex="50%">
+  <div fxFlex="50%">
     {{ paymentDetailData.paymentType.name }}
   </div>
-
+</div>
-  <div *ngIf="paymentDetailData.accountNumber" fxFlex="50%" class="attribute">
+<table *ngIf="hasSomeValue()">
-    {{ 'Account No.' | translate}}
+  <tbody>
-  </div>
+    <tr>
-
+      <td class="mat-body-strong center" colspan="2">{{ 'labels.inputs.Payment Details' | translate}}</td>
-  <div *ngIf="paymentDetailData.accountNumber" fxFlex="50%">
+    </tr>
-    {{ paymentDetailData.accountNumber }}
+    <tr *ngIf="isNotNullOrEmpty(paymentDetailData.accountNumber)">
-  </div>
+      <td class="mat-body-strong">{{ 'labels.inputs.Account No' | translate}}</td>
-
+      <td>{{ paymentDetailData.accountNumber }}</td>
-  <div *ngIf="paymentDetailData.checkNumber" fxFlex="50%" class="attribute">
+    </tr>
-    {{ 'Cheque Number' | translate}}
+    <tr *ngIf="isNotNullOrEmpty(paymentDetailData.checkNumber)">
-  </div>
+      <td class="mat-body-strong">{{ 'labels.inputs.Cheque Number' | translate}}</td>
-
+      <td>{{ paymentDetailData.checkNumber }}</td>
-  <div *ngIf="paymentDetailData.checkNumber" fxFlex="50%">
+    </tr>
-    {{ paymentDetailData.checkNumber }}
+    <tr *ngIf="isNotNullOrEmpty(paymentDetailData.routingCode)">
-  </div>
+      <td class="mat-body-strong">{{ 'labels.inputs.Routing Code' | translate}}</td>
-
+      <td class="mat-body-strong">{{ paymentDetailData.routingCode }}</td>
-  <div *ngIf="paymentDetailData.routingCode" fxFlex="50%" class="attribute">
+    </tr>
-    {{ 'Routing Code' | translate}}
+    <tr *ngIf="isNotNullOrEmpty(paymentDetailData.receiptNumber)">
-  </div>
+      <td class="mat-body-strong">{{ 'labels.inputs.Receipt No' | translate}}</td>
-
+      <td>{{ paymentDetailData.receiptNumber }}</td>
-  <div *ngIf="paymentDetailData.routingCode" fxFlex="50%">
+    </tr>
-    {{ paymentDetailData.routingCode }}
+    <tr *ngIf="isNotNullOrEmpty(paymentDetailData.bankNumber)">
-  </div>
+      <td class="mat-body-strong">{{ 'labels.inputs.Bank No' | translate}}</td>
-
+      <td>{{ paymentDetailData.bankNumber }}</td>
-  <div *ngIf="paymentDetailData.receiptNumber" fxFlex="50%" class="attribute">
+    </tr>
-    {{ 'Receipt No.' | translate}}
+  </tbody>
-  </div>
+</table>
-
-  <div *ngIf="paymentDetailData.receiptNumber" fxFlex="50%">
-    {{ paymentDetailData.receiptNumber }}
-  </div>
-
-  <div *ngIf="paymentDetailData.bankNumber" fxFlex="50%" class="attribute">
-    {{ 'Bank No.' | translate}}
-  </div>
-
-  <div *ngIf="paymentDetailData.bankNumber" fxFlex="50%">
-    {{ paymentDetailData.bankNumber }}
-  </div>
-</ng-container>

src/app/shared/transaction-payment-detail/transaction-payment-detail.component.scss

@@ -2,7 +2,7 @@
 
 .content {
   width: 100%;
-  background-color: $concrete;
+  padding-bottom: 25px;
 
   div {
     text-align: left;

src/app/shared/transaction-payment-detail/transaction-payment-detail.component.ts

@@ -15,4 +15,18 @@ export class TransactionPaymentDetailComponent implements OnInit {
 
   ngOnInit(): void {}
 
+  hasSomeValue(): boolean {
+    return (
+      this.isNotNullOrEmpty(this.paymentDetailData.accountNumber) ||
+      this.isNotNullOrEmpty(this.paymentDetailData.bankNumber) ||
+      this.isNotNullOrEmpty(this.paymentDetailData.checkNumber) ||
+      this.isNotNullOrEmpty(this.paymentDetailData.receiptNumber) ||
+      this.isNotNullOrEmpty(this.paymentDetailData.routingCode)
+    );
+  }
+
+  isNotNullOrEmpty(value: any): boolean {
+    return (value !== null && value !== '');
+  }
+
 }

src/assets/styles/_background.scss

@@ -1,7 +1,9 @@
 body {
   table {
-    tr:nth-child(even) {
+    tbody {
-      background-color: #f2f2f2;
+      tr:nth-child(even) {
+        background-color: #f2f2f2;
+      }
     }
   }
 }

src/assets/styles/_colours.scss

@@ -73,6 +73,7 @@ $status-overpaid: #800080;
 $status-downpayment: #16a085;
 $status-reage: #e08e0b;
 $status-reamortize: #4461e2;
+$status-transfer: #16a085;
 $status-active-overdue: #ff0000;
 $status-matured: #ff4000;
 $state-done: #2af72a;

src/assets/translations/cs-CS.json

@@ -1684,6 +1684,7 @@
       "Payment Allocation Order": "Příkaz k přidělování plateb",
       "Payment Allocation Rule": "Pravidlo přidělování plateb",
       "Payment Due At": "Splatnost platby v",
+      "Payment Details": "Platební údaje",
       "Payment Type": "Způsob platby",
       "Payment Type Id": "ID typu platby",
       "Payment due as of": "Splatnost platby ke dni",

src/assets/translations/de-DE.json

@@ -1684,6 +1684,7 @@
       "Payment Allocation Order": "Zahlungszuweisungsbestellung",
       "Payment Allocation Rule": "Zahlungszuweisungsregel",
       "Payment Due At": "Zahlung fällig am",
+      "Payment Details": "Zahlungsdetails",
       "Payment Type": "Zahlungsart",
       "Payment Type Id": "Zahlungsart-ID",
       "Payment due as of": "Zahlung fällig ab",

src/assets/translations/en-US.json

@@ -1683,6 +1683,7 @@
             "Payment Allocation Order": "Payment Allocation Order",
             "Payment Allocation Rule": "Payment Allocation Rule",
             "Payment Due At": "Payment Due At",
+            "Payment Details": "Payment Details",
             "Payment Type": "Payment Type",
             "Payment Type Id": "Payment Type Id",
             "Payment due as of": "Payment due as of",

src/assets/translations/es-MX.json

@@ -1684,6 +1684,7 @@
             "Payment Allocation Order": "Orden de asignación de pagos",
             "Payment Allocation Rule": "Regla de asignación de pagos",
             "Payment Due At": "Pago vencido en",
+            "Payment Details": "Detalles del pago",
             "Payment Type": "Tipo de pago",
             "Payment Type Id": "Id del tipo de pago",
             "Payment due as of": "Pago vencido a partir de",
@@ -2099,8 +2100,8 @@
             "Assign Loan Officer": "Asignar oficial de Créditos",
             "Assign Staff": "Asignar personal",
             "Block Account": "Bloquear cuenta",
-            "Block Deposit": "Depósito en bloque",
+            "Block Deposit": "Bloquear depósitos",
-            "Block Withdrawal": "Retiro en bloque",
+            "Block Withdrawal": "Bloquear retiros",
             "Breadcrumbs": "Migas de pan",
             "Calculate Interest": "Calcular interés",
             "Centers": "Centros",
@@ -2169,8 +2170,8 @@
             "Theme Picker": "Selector de temas",
             "Transfer Funds": "Transferir fondos",
             "Unblock Account": "Desbloquear cuenta",
-            "Unblock Deposit": "Desbloquear depósito",
+            "Unblock Deposit": "Desbloquear depósitos",
-            "Unblock Withdrawal": "Desbloquear retiro",
+            "Unblock Withdrawal": "Desbloquear retiros",
             "Undo Activation": "Deshacer la activación",
             "Undo Approval": "Deshacer aprobación",
             "Undo Disbursal": "Deshacer desembolso",

src/assets/translations/fr-FR.json

@@ -1684,6 +1684,7 @@
       "Payment Allocation Order": "Ordonnance d'allocation de paiement",
       "Payment Allocation Rule": "Règle d'allocation de paiement",
       "Payment Due At": "Paiement dû à",
+      "Payment Details": "Détails de paiement",
       "Payment Type": "Type de paiement",
       "Payment Type Id": "Identifiant du type de paiement",
       "Payment due as of": "Paiement dû à compter du",

src/assets/translations/it-IT.json

@@ -1684,6 +1684,7 @@
       "Payment Allocation Order": "Ordine di allocazione dei pagamenti",
       "Payment Allocation Rule": "Regola di allocazione dei pagamenti",
       "Payment Due At": "Pagamento dovuto a",
+      "Payment Details": "Dettagli di pagamento",
       "Payment Type": "Modalità di pagamento",
       "Payment Type Id": "Identificativo tipo di pagamento",
       "Payment due as of": "Pagamento dovuto a partire dal",

src/assets/translations/ko-KO.json

@@ -1685,6 +1685,7 @@
       "Payment Allocation Order": "지불 할당 명령",
       "Payment Allocation Rule": "지불 할당 규칙",
       "Payment Due At": "지불 기한",
+      "Payment Details": "지불 세부 사항",
       "Payment Type": "결제 유형",
       "Payment Type Id": "결제 유형 ID",
       "Payment due as of": "지급 기한:",

src/assets/translations/lt-LT.json

@@ -1684,6 +1684,7 @@
       "Payment Allocation Order": "Mokėjimo paskirstymo užsakymas",
       "Payment Allocation Rule": "Mokėjimo paskirstymo taisyklė",
       "Payment Due At": "Mokėjimo terminas",
+      "Payment Details": "Mokėjimo detalės",
       "Payment Type": "Mokėjimo tipas",
       "Payment Type Id": "Mokėjimo tipo ID",
       "Payment due as of": "Mokėjimo terminas",

src/assets/translations/lv-LV.json

@@ -1684,6 +1684,7 @@
       "Payment Allocation Order": "Maksājumu sadales pasūtījums",
       "Payment Allocation Rule": "Maksājumu sadales noteikums",
       "Payment Due At": "Maksājuma termiņš plkst",
+      "Payment Details": "Maksājumu informācija",
       "Payment Type": "Maksājuma veids",
       "Payment Type Id": "Maksājuma veida ID",
       "Payment due as of": "Maksājuma termiņš no plkst",

src/assets/translations/ne-NE.json

@@ -1684,6 +1684,7 @@
       "Payment Allocation Order": "भुक्तानी सम्झौता अर्डर",
       "Payment Allocation Rule": "भुक्तानी सम्झौता नियम",
       "Payment Due At": "भुक्तान बाँकी मा",
+      "Payment Details": "भुक्तानी विवरण",
       "Payment Type": "भुक्तानी प्रकार",
       "Payment Type Id": "भुक्तानी प्रकार आईडी",
       "Payment due as of": "मिति सम्मको भुक्तानी",

src/assets/translations/pt-PT.json

@@ -1684,6 +1684,7 @@
       "Payment Allocation Order": "Ordem de alocação de pagamento",
       "Payment Allocation Rule": "Regra de alocação de pagamento",
       "Payment Due At": "Pagamento devido em",
+      "Payment Details": "Detalhes do pagamento",
       "Payment Type": "Tipo de pagamento",
       "Payment Type Id": "ID do tipo de pagamento",
       "Payment due as of": "Pagamento devido a partir de",

src/assets/translations/sw-SW.json

@@ -1684,6 +1684,7 @@
       "Payment Allocation Order": "Agizo la ugawaji wa malipo",
       "Payment Allocation Rule": "Sheria ya Ugawaji wa Malipo",
       "Payment Due At": "Malipo Yanayodaiwa Saa",
+      "Payment Details": "Maelezo ya malipo",
       "Payment Type": "Aina ya malipo",
       "Payment Type Id": "Kitambulisho cha Aina ya Malipo",
       "Payment due as of": "Malipo yanayodaiwa kufikia",

src/theme/_dark_content.scss

@@ -144,8 +144,10 @@
 
 body.dark-theme {
   table {
-    tr:nth-child(even) {
+    tbody {
-      background-color: #303135 !important;
+      tr:nth-child(even) {
+        background-color: #303135 !important;
+      }
     }
   }
 }

src/theme/_material-palette.scss

@@ -26,9 +26,9 @@ $accent-palette: (
 /* ############ Dark mode palettes ################*/
 
 $dark-primary-palette: (
-  100: #273350,
+  100: #5ba2ec,
-  500: #313f6b,
+  500: #1074b9,
-  700: #39415c,
+  700: #004989,
   contrast: (
     100: white,
     500: rgba(white, 0.87),
@@ -37,9 +37,9 @@ $dark-primary-palette: (
 );
 
 $dark-accent-palette: (
-  100: #364461,
+  100: #e7ffa5,
-  500: #3e5372,
+  500: #b4d575,
-  700: #476385,
+  700: #83a447,
   contrast: (
     100: white,
     500: white,