Fix: Display Savings account transactions reversed

src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/transactions-tab.component.ts

@@ -92,7 +92,7 @@ export class TransactionsTabComponent implements OnInit {
    */
   showTransactions(transactionsData: any) {
     if (transactionsData.transfer) {
-      this.router.navigate([`account-transfers/account-transfers/${transactionsData.transfer.id}`], { relativeTo: this.route });
+      this.router.navigate([`../transfer-funds/account-transfers/${transactionsData.transfer.id}`], { relativeTo: this.route });
     } else {
       this.router.navigate([transactionsData.id], { relativeTo: this.route });
     }

src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/view-transaction/view-transaction.component.html

@@ -21,6 +21,8 @@
     <mat-card-content>
 
       <div fxLayout="row wrap" class="content">
+        <div fxFlex="100%" [ngClass]="transactionColor()">
+        </div>
 
         <div fxFlex="50%" class="mat-body-strong">
           {{"labels.inputs.Transaction Id" | translate }}
@@ -126,6 +128,9 @@
 
     </mat-card-content>
 
+    <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px" class="m-b-20">
+      <button type="button" color="primary" mat-raised-button (click)="goBack()">{{  "labels.buttons.Back" | translate}}</button>
+    </mat-card-actions>
   </mat-card>
 
 </div>

src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/view-transaction/view-transaction.component.ts

@@ -11,6 +11,7 @@ import { SettingsService } from 'app/settings/settings.service';
 import { RecurringDepositConfirmationDialogComponent } from '../../custom-dialogs/recurring-deposit-confirmation-dialog/recurring-deposit-confirmation-dialog.component';
 import { Dates } from 'app/core/utils/dates';
 import { TranslateService } from '@ngx-translate/core';
+import { Location } from '@angular/common';
 
 /**
  * View Transaction Component.
@@ -37,6 +38,7 @@ export class ViewTransactionComponent {
    */
   constructor(private recurringDepositsService: RecurringDepositsService,
     private route: ActivatedRoute,
+    private location: Location,
     private dateUtils: Dates,
     private router: Router,
     public dialog: MatDialog,
@@ -70,4 +72,14 @@ export class ViewTransactionComponent {
     });
   }
 
+  transactionColor(): string {
+    if (this.transactionData.manuallyReversed) {
+      return 'undo';
+    }
+    return 'active';
+  }
+
+  goBack(): void {
+    this.location.back();
+  }
 }

src/app/deposits/recurring-deposits/recurring-deposits-routing.module.ts

@@ -130,10 +130,6 @@ const routes: Routes = [
                     resolve: {
                       recurringDepositsAccountTransactionTemplate: RecurringDepositsAccountTransactionTemplateResolver
                     }
-                  },
-                  {
-                    path: 'account-transfers',
-                    loadChildren: () => import('../../account-transfers/account-transfers.module').then(m => m.AccountTransfersModule)
                   }
                 ]
               }
@@ -148,6 +144,10 @@ const routes: Routes = [
             }
           }
         ]
+      },
+      {
+        path: ':recurringDepositAccountId/transfer-funds',
+        loadChildren: () => import('../../account-transfers/account-transfers.module').then(m => m.AccountTransfersModule)
       }
     ]
   },

src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.html

@@ -22,11 +22,16 @@
           <mat-form-field>
             <mat-label>{{"labels.inputs.Transaction Amount" | translate}}</mat-label>
             <input matInput required formControlName="transactionAmount">
-            <mat-error *ngIf="recoveryRepaymentLoanForm.controls.transactionAmount.hasError('required')">
+            <mat-error type="number" *ngIf="recoveryRepaymentLoanForm.controls.transactionAmount.hasError('required')">
               {{"labels.inputs.Transaction Amount" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
+          <mat-form-field>
+            <mat-label>{{"labels.inputs.External Id" | translate}}</mat-label>
+            <input matInput formControlName="externalId">
+          </mat-form-field>
+
           <mat-form-field>
             <mat-label>{{"labels.inputs.Payment Type" | translate}}</mat-label>
             <mat-select formControlName="paymentTypeId">

src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.ts

@@ -65,6 +65,7 @@ export class RecoveryRepaymentComponent implements OnInit {
     this.recoveryRepaymentLoanForm = this.formBuilder.group({
       'transactionDate': [new Date(), Validators.required],
       'transactionAmount': ['', Validators.required],
+      'externalId': [''],
       'paymentTypeId': [''],
       'note': ['']
     });

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

@@ -18,37 +18,37 @@
 
       <ng-container matColumnDef="id">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Id </th>
-        <td mat-cell *matCellDef="let transaction"> {{ transaction.id }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ transaction.id }} </td>
       </ng-container>
 
       <ng-container matColumnDef="date">
         <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Transaction Date </th>
-        <td mat-cell *matCellDef="let transaction"> {{ transaction.date | dateFormat }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ transaction.date | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionType">
         <th mat-header-cell class="center" *matHeaderCellDef> Transaction Type </th>
-        <td mat-cell *matCellDef="let transaction"> {{ transaction.transactionType.value  }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ transaction.transactionType.value  }} </td>
       </ng-container>
 
       <ng-container matColumnDef="debit">
         <th mat-header-cell class="r-amount" *matHeaderCellDef> Debit </th>
-        <td mat-cell class="r-amount" *matCellDef="let transaction"> {{ isDebit(transaction.transactionType) ? (transaction.amount | formatNumber) : 'N/A'}} </td>
+        <td mat-cell class="r-amount" *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ 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>
-        <td mat-cell class="r-amount" *matCellDef="let transaction"> {{ !isDebit(transaction.transactionType) ? (transaction.amount | formatNumber) : 'N/A' }} </td>
+        <td mat-cell class="r-amount" *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ !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>
-        <td mat-cell class="r-amount" *matCellDef="let transaction"> {{ transaction.runningBalance | formatNumber }} </td>
+        <td mat-cell class="r-amount" *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ transaction.runningBalance | formatNumber }} </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
         <th mat-header-cell class="center" *matHeaderCellDef> Actions </th>
-        <td mat-cell class="center" *matCellDef="let transaction">
+        <td mat-cell class="center" *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}">
           <button class="account-action-button" mat-raised-button color="primary" (click)="routeEdit($event)" [routerLink]="[transaction.id, 'reciept']">
             <i class="fa fa-file" matTooltip="View Reciept"></i>
           </button>

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

@@ -23,3 +23,8 @@
     }
   }
 }
+
+.strike {
+  text-decoration: line-through;
+  color: red;
+}

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

@@ -40,7 +40,7 @@ export class TransactionsTabComponent implements OnInit {
   constructor(private route: ActivatedRoute,
               private router: Router) {
     this.route.parent.parent.data.subscribe((data: { savingsAccountData: any }) => {
-      this.transactionsData = data.savingsAccountData.transactions?.filter((transaction: any) => !transaction.reversed);
+      this.transactionsData = data.savingsAccountData.transactions;
       this.tempTransaction = this.transactionsData;
       this.status = data.savingsAccountData.status.value;
     });