From cfc27b53e25fd3e89b45ace315d6ef48d7241cb2 Mon Sep 17 00:00:00 2001
From: Muskan Khedia <36980003+muskankhedia@users.noreply.github.com>
Date: Tue, 11 Aug 2020 17:04:46 +0530
Subject: [PATCH] feat: add view account transfer (#1192)

Fixes: #1188
---
 .../account-transfers-routing.module.ts       | 23 +++++-
 .../account-transfers.module.ts               |  9 +-
 .../account-transfers.service.ts              |  5 ++
 .../view-account-transfer.resolver.ts         | 31 +++++++
 .../make-account-transfers.component.html}    |  0
 .../make-account-transfers.component.scss}    |  0
 .../make-account-transfers.component.spec.ts  | 25 ++++++
 .../make-account-transfers.component.ts}      |  8 +-
 .../view-account-transfer.component.html      | 82 +++++++++++++++++++
 .../view-account-transfer.component.scss      | 12 +++
 .../view-account-transfer.component.spec.ts}  | 12 +--
 .../view-account-transfer.component.ts        | 23 ++++++
 .../transactions-tab.component.html           |  2 +-
 .../transactions-tab.component.ts             | 17 +++-
 .../fixed-deposits-routing.module.ts          |  4 +
 .../transactions-tab.component.html           |  2 +-
 .../transactions-tab.component.ts             | 17 +++-
 .../recurring-deposits-routing.module.ts      |  4 +
 .../transactions-tab.component.html           |  2 +-
 .../transactions-tab.component.ts             | 17 +++-
 src/app/savings/savings-routing.module.ts     |  6 +-
 21 files changed, 274 insertions(+), 27 deletions(-)
 create mode 100644 src/app/account-transfers/common-resolvers/view-account-transfer.resolver.ts
 rename src/app/account-transfers/{make-account-transers/make-account-transers.component.html => make-account-transfers/make-account-transfers.component.html} (100%)
 rename src/app/account-transfers/{make-account-transers/make-account-transers.component.scss => make-account-transfers/make-account-transfers.component.scss} (100%)
 create mode 100644 src/app/account-transfers/make-account-transfers/make-account-transfers.component.spec.ts
 rename src/app/account-transfers/{make-account-transers/make-account-transers.component.ts => make-account-transfers/make-account-transfers.component.ts} (96%)
 create mode 100644 src/app/account-transfers/view-account-transfer/view-account-transfer.component.html
 create mode 100644 src/app/account-transfers/view-account-transfer/view-account-transfer.component.scss
 rename src/app/account-transfers/{make-account-transers/make-account-transers.component.spec.ts => view-account-transfer/view-account-transfer.component.spec.ts} (50%)
 create mode 100644 src/app/account-transfers/view-account-transfer/view-account-transfer.component.ts

diff --git a/src/app/account-transfers/account-transfers-routing.module.ts b/src/app/account-transfers/account-transfers-routing.module.ts
index f01f47747..857351b34 100644
--- a/src/app/account-transfers/account-transfers-routing.module.ts
+++ b/src/app/account-transfers/account-transfers-routing.module.ts
@@ -9,9 +9,10 @@ import { extract } from '../core/i18n/i18n.service';
 import { ViewStandingInstructionsComponent } from './view-standing-instructions/view-standing-instructions.component';
 import { EditStandingInstructionsComponent } from './edit-standing-instructions/edit-standing-instructions.component';
 import { CreateStandingInstructionsComponent } from './create-standing-instructions/create-standing-instructions.component';
-import { MakeAccountTransersComponent } from './make-account-transers/make-account-transers.component';
+import { MakeAccountTransfersComponent } from './make-account-transfers/make-account-transfers.component';
 import { ListStandingInstructionsComponent } from './list-standing-instructions/list-standing-instructions.component';
 import { ListTransactionsComponent } from './list-transactions/list-transactions.component';
+import { ViewAccountTransferComponent } from './view-account-transfer/view-account-transfer.component';
 
 /** Custom Resolvers */
 import { ViewStandingInstructionsResolver } from './common-resolvers/view-standing-instructions.resolver';
@@ -19,6 +20,7 @@ import { StandingInstructionsDataAndTemplateResolver } from './common-resolvers/
 import { StandingInstructionsTemplateResolver } from './common-resolvers/standing-instructions-template.resolver';
 import { MakeAccountTransferTemplateResolver } from './common-resolvers/make-account-transfer-template.resolver';
 import { ListTransactionsResolver } from './common-resolvers/list-transactions.resolver';
+import { ViewAccountTransferResolver } from './common-resolvers/view-account-transfer.resolver';
 
 /** Loans Route. */
 const routes: Routes = [
@@ -36,7 +38,7 @@ const routes: Routes = [
       {
         path: 'make-account-transfer',
         data: { title: extract('Account Transfer'), breadcrumb: 'Account Transfer', routeParamBreadcrumb: 'Account Transfer' },
-        component: MakeAccountTransersComponent,
+        component: MakeAccountTransfersComponent,
         resolve: {
           accountTransferTemplate: MakeAccountTransferTemplateResolver
         }
@@ -49,6 +51,20 @@ const routes: Routes = [
           standingIntructionsTemplate: StandingInstructionsTemplateResolver
         }
       },
+      {
+        path: 'account-transfers',
+        data: { title: extract('View Account Transfer'), breadcrumb: 'Account Transfers', routeParamBreadcrumb: false },
+        children: [
+          {
+            path: ':transferid',
+            data: { routeParamBreadcrumb: 'transferid' },
+            component: ViewAccountTransferComponent,
+            resolve: {
+              viewAccountTransferData: ViewAccountTransferResolver
+            }
+          }
+        ]
+      },
       {
         path: ':standingInstructionsId',
         data: { title: extract('Standing Instructions'), routeParamBreadcrumb: 'standingInstructionsId' },
@@ -91,7 +107,8 @@ const routes: Routes = [
     StandingInstructionsDataAndTemplateResolver,
     StandingInstructionsTemplateResolver,
     MakeAccountTransferTemplateResolver,
-    ListTransactionsResolver
+    ListTransactionsResolver,
+    ViewAccountTransferResolver
   ]
 })
 
diff --git a/src/app/account-transfers/account-transfers.module.ts b/src/app/account-transfers/account-transfers.module.ts
index 5e0295c92..dcfbcf20d 100644
--- a/src/app/account-transfers/account-transfers.module.ts
+++ b/src/app/account-transfers/account-transfers.module.ts
@@ -12,10 +12,10 @@ import { DirectivesModule } from '../directives/directives.module';
 import { ViewStandingInstructionsComponent } from './view-standing-instructions/view-standing-instructions.component';
 import { EditStandingInstructionsComponent } from './edit-standing-instructions/edit-standing-instructions.component';
 import { CreateStandingInstructionsComponent } from './create-standing-instructions/create-standing-instructions.component';
-import { MakeAccountTransersComponent } from './make-account-transers/make-account-transers.component';
+import { MakeAccountTransfersComponent } from './make-account-transfers/make-account-transfers.component';
 import { ListStandingInstructionsComponent } from './list-standing-instructions/list-standing-instructions.component';
 import { ListTransactionsComponent } from './list-transactions/list-transactions.component';
-
+import { ViewAccountTransferComponent } from './view-account-transfer/view-account-transfer.component';
 /**
  * Account Transfers Module
  *
@@ -27,9 +27,10 @@ import { ListTransactionsComponent } from './list-transactions/list-transactions
     ViewStandingInstructionsComponent,
     EditStandingInstructionsComponent,
     CreateStandingInstructionsComponent,
-    MakeAccountTransersComponent,
+    MakeAccountTransfersComponent,
     ListStandingInstructionsComponent,
-    ListTransactionsComponent
+    ListTransactionsComponent,
+    ViewAccountTransferComponent
   ],
   providers: [DatePipe]
 })
diff --git a/src/app/account-transfers/account-transfers.service.ts b/src/app/account-transfers/account-transfers.service.ts
index 6ff5446c9..4cd0b4fd4 100644
--- a/src/app/account-transfers/account-transfers.service.ts
+++ b/src/app/account-transfers/account-transfers.service.ts
@@ -103,4 +103,9 @@ export class AccountTransfersService {
                                         .set('offset', '0');
     return this.http.get(`/standinginstructions/${standingInstructionsId}`, { params: httpParams });
   }
+
+  getViewAccountTransferDetails(transferId: any): Observable<any> {
+    return this.http.get(`/accounttransfers/${transferId}`);
+  }
+
 }
diff --git a/src/app/account-transfers/common-resolvers/view-account-transfer.resolver.ts b/src/app/account-transfers/common-resolvers/view-account-transfer.resolver.ts
new file mode 100644
index 000000000..95ecf5e5c
--- /dev/null
+++ b/src/app/account-transfers/common-resolvers/view-account-transfer.resolver.ts
@@ -0,0 +1,31 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { AccountTransfersService } from '../account-transfers.service';
+
+/**
+ * View Account Transfer data resolver.
+ */
+@Injectable()
+export class ViewAccountTransferResolver implements Resolve<Object> {
+
+    /**
+     * @param {AccountTransfersService} AccountTransfersService Savings service.
+     */
+    constructor(private accountTransfersService: AccountTransfersService) { }
+
+    /**
+     * Returns the View Account Transfer data.
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+        const transferId = route.paramMap.get('transferid');
+        return this.accountTransfersService.getViewAccountTransferDetails(transferId);
+    }
+
+}
diff --git a/src/app/account-transfers/make-account-transers/make-account-transers.component.html b/src/app/account-transfers/make-account-transfers/make-account-transfers.component.html
similarity index 100%
rename from src/app/account-transfers/make-account-transers/make-account-transers.component.html
rename to src/app/account-transfers/make-account-transfers/make-account-transfers.component.html
diff --git a/src/app/account-transfers/make-account-transers/make-account-transers.component.scss b/src/app/account-transfers/make-account-transfers/make-account-transfers.component.scss
similarity index 100%
rename from src/app/account-transfers/make-account-transers/make-account-transers.component.scss
rename to src/app/account-transfers/make-account-transfers/make-account-transfers.component.scss
diff --git a/src/app/account-transfers/make-account-transfers/make-account-transfers.component.spec.ts b/src/app/account-transfers/make-account-transfers/make-account-transfers.component.spec.ts
new file mode 100644
index 000000000..6f16ad54a
--- /dev/null
+++ b/src/app/account-transfers/make-account-transfers/make-account-transfers.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MakeAccountTransfersComponent } from './make-account-transfers.component';
+
+describe('MakeAccountTransfersComponent', () => {
+  let component: MakeAccountTransfersComponent;
+  let fixture: ComponentFixture<MakeAccountTransfersComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MakeAccountTransfersComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MakeAccountTransfersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/account-transfers/make-account-transers/make-account-transers.component.ts b/src/app/account-transfers/make-account-transfers/make-account-transfers.component.ts
similarity index 96%
rename from src/app/account-transfers/make-account-transers/make-account-transers.component.ts
rename to src/app/account-transfers/make-account-transfers/make-account-transfers.component.ts
index acb793de7..5af46c103 100644
--- a/src/app/account-transfers/make-account-transers/make-account-transers.component.ts
+++ b/src/app/account-transfers/make-account-transfers/make-account-transfers.component.ts
@@ -6,11 +6,11 @@ import { DatePipe } from '@angular/common';
 import { ClientsService } from 'app/clients/clients.service';
 
 @Component({
-  selector: 'mifosx-make-account-transers',
-  templateUrl: './make-account-transers.component.html',
-  styleUrls: ['./make-account-transers.component.scss']
+  selector: 'mifosx-make-account-transfers',
+  templateUrl: './make-account-transfers.component.html',
+  styleUrls: ['./make-account-transfers.component.scss']
 })
-export class MakeAccountTransersComponent implements OnInit, AfterViewInit {
+export class MakeAccountTransfersComponent implements OnInit, AfterViewInit {
 
   /** Standing Instructions Data */
   accountTransferTemplateData: any;
diff --git a/src/app/account-transfers/view-account-transfer/view-account-transfer.component.html b/src/app/account-transfers/view-account-transfer/view-account-transfer.component.html
new file mode 100644
index 000000000..517ff0c52
--- /dev/null
+++ b/src/app/account-transfers/view-account-transfer/view-account-transfer.component.html
@@ -0,0 +1,82 @@
+<div class="container">
+
+  <mat-card>
+
+    <mat-card-content>
+
+      <div fxLayout="row wrap" fxLayout.lt-md="column">
+
+        <h3 class="mat-h3" fxFlexFill>Transaction Details</h3>
+
+        <mat-divider [inset]="true"></mat-divider>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Transaction Amount:</span>
+          <span fxFlex="60%">{{ viewAccountTransferData.transferAmount }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Transaction Date:</span>
+          <span fxFlex="60%">{{ viewAccountTransferData.transferDate | date }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Description:</span>
+          <span fxFlex="60%">{{ viewAccountTransferData.transferDescription }}</span>
+        </div>
+
+        <h3 class="mat-h3" fxFlexFill>Transferred From</h3>
+
+        <mat-divider [inset]="true"></mat-divider>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Office:</span>
+          <span fxFlex="60%">{{ viewAccountTransferData.fromOffice.name }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Client:</span>
+          <span fxFlex="60%">{{ viewAccountTransferData.fromClient.displayName }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Account Type:</span>
+          <span fxFlex="60%">{{ viewAccountTransferData.fromAccountType.value }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Account #:</span>
+          <span fxFlex="60%">{{ viewAccountTransferData.fromAccount.accountNo }}</span>
+        </div>
+
+        <h3 class="mat-h3" fxFlexFill>Transferred To</h3>
+
+        <mat-divider [inset]="true"></mat-divider>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Office:</span>
+          <span fxFlex="60%">{{ viewAccountTransferData.toOffice.name }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Client:</span>
+          <span fxFlex="60%">{{ viewAccountTransferData.toClient.displayName }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Account Type:</span>
+          <span fxFlex="60%">{{ viewAccountTransferData.toAccountType.value }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Account #:</span>
+          <span fxFlex="60%">{{ viewAccountTransferData.toAccount.accountNo }}</span>
+        </div>
+
+      </div>
+
+    </mat-card-content>
+
+  </mat-card>
+
+</div>
diff --git a/src/app/account-transfers/view-account-transfer/view-account-transfer.component.scss b/src/app/account-transfers/view-account-transfer/view-account-transfer.component.scss
new file mode 100644
index 000000000..4156d541f
--- /dev/null
+++ b/src/app/account-transfers/view-account-transfer/view-account-transfer.component.scss
@@ -0,0 +1,12 @@
+h3 {
+    margin: 0;
+    font-weight: 500;
+}
+
+span {
+    margin: 0.5em 0;
+}
+
+mat-divider {
+  margin: 0 0 0.5em 0;
+}
diff --git a/src/app/account-transfers/make-account-transers/make-account-transers.component.spec.ts b/src/app/account-transfers/view-account-transfer/view-account-transfer.component.spec.ts
similarity index 50%
rename from src/app/account-transfers/make-account-transers/make-account-transers.component.spec.ts
rename to src/app/account-transfers/view-account-transfer/view-account-transfer.component.spec.ts
index 1ab095121..ef12f99b7 100644
--- a/src/app/account-transfers/make-account-transers/make-account-transers.component.spec.ts
+++ b/src/app/account-transfers/view-account-transfer/view-account-transfer.component.spec.ts
@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { MakeAccountTransersComponent } from './make-account-transers.component';
+import { ViewAccountTransferComponent } from './view-account-transfer.component';
 
-describe('MakeAccountTransersComponent', () => {
-  let component: MakeAccountTransersComponent;
-  let fixture: ComponentFixture<MakeAccountTransersComponent>;
+describe('ViewAccountTransferComponent', () => {
+  let component: ViewAccountTransferComponent;
+  let fixture: ComponentFixture<ViewAccountTransferComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ MakeAccountTransersComponent ]
+      declarations: [ ViewAccountTransferComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(MakeAccountTransersComponent);
+    fixture = TestBed.createComponent(ViewAccountTransferComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/src/app/account-transfers/view-account-transfer/view-account-transfer.component.ts b/src/app/account-transfers/view-account-transfer/view-account-transfer.component.ts
new file mode 100644
index 000000000..fe98d8566
--- /dev/null
+++ b/src/app/account-transfers/view-account-transfer/view-account-transfer.component.ts
@@ -0,0 +1,23 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'mifosx-view-account-transfer',
+  templateUrl: './view-account-transfer.component.html',
+  styleUrls: ['./view-account-transfer.component.scss']
+})
+export class ViewAccountTransferComponent {
+
+  viewAccountTransferData: any;
+  /**
+   * Retrieves the view account transfer data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   */
+  constructor(private route: ActivatedRoute) {
+    this.route.data.subscribe((data: { viewAccountTransferData: any }) => {
+      this.viewAccountTransferData = data.viewAccountTransferData;
+    });
+  }
+
+}
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.html
index 51a1a4cce..dccf69526 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.html
@@ -41,7 +41,7 @@
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" [routerLink]="[row.id]"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" (click)="showTransactions(row)"></tr>
 
     </table>
 
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.ts b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.ts
index 772723b43..b6dfd0be5 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.ts
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.ts
@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { MatTableDataSource } from '@angular/material';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
 /**
  * Transactions Tab Component.
@@ -26,7 +26,8 @@ export class TransactionsTabComponent implements OnInit {
    * Retrieves fixed deposits account data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor(private route: ActivatedRoute,
+              private router: Router) {
     this.route.parent.data.subscribe((data: { fixedDepositsAccountData: any }) => {
       this.transactionsData = data.fixedDepositsAccountData.transactions;
       this.status = data.fixedDepositsAccountData.status.value;
@@ -46,4 +47,16 @@ export class TransactionsTabComponent implements OnInit {
             || transactionType.overdraftInterest === true || transactionType.withholdTax === true;
   }
 
+  /**
+   * Show Transactions Details
+   * @param transactionsData Transactions Data
+   */
+  showTransactions(transactionsData: any) {
+    if (transactionsData.transfer) {
+      this.router.navigate([`account-transfers/account-transfers/${transactionsData.transfer.id}`], { relativeTo: this.route });
+    } else {
+      this.router.navigate([transactionsData.id], { relativeTo: this.route });
+    }
+  }
+
 }
diff --git a/src/app/deposits/fixed-deposits/fixed-deposits-routing.module.ts b/src/app/deposits/fixed-deposits/fixed-deposits-routing.module.ts
index 21be82559..dbf6c39dc 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposits-routing.module.ts
+++ b/src/app/deposits/fixed-deposits/fixed-deposits-routing.module.ts
@@ -102,6 +102,10 @@ const routes: Routes = [
                 path: '',
                 redirectTo: '../transactions', pathMatch: 'prefix'
               },
+              {
+                path: 'account-transfers',
+                loadChildren: '../../account-transfers/account-transfers.module#AccountTransfersModule'
+              },
               {
                 path: ':id',
                 data: { routeParamBreadcrumb: 'id' },
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/transactions-tab.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/transactions-tab.component.html
index 0df5b85dd..f4a955a33 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/transactions-tab.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/transactions-tab.component.html
@@ -37,7 +37,7 @@
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" [routerLink]="[row.id]"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" (click)="showTransactions(row)"></tr>
 
     </table>
 
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/transactions-tab.component.ts b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/transactions-tab.component.ts
index 36adf738b..68fa8c26c 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/transactions-tab.component.ts
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/transactions-tab.component.ts
@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { MatTableDataSource } from '@angular/material';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
 /**
  * Transactions Tab Component.
@@ -26,7 +26,8 @@ export class TransactionsTabComponent implements OnInit {
    * Retrieves recurring deposits account data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor(private route: ActivatedRoute,
+              private router: Router) {
     this.route.parent.data.subscribe((data: { recurringDepositsAccountData: any }) => {
       this.transactionsData = data.recurringDepositsAccountData.transactions;
       this.status = data.recurringDepositsAccountData.status.value;
@@ -46,4 +47,16 @@ export class TransactionsTabComponent implements OnInit {
       || transactionType.overdraftInterest === true || transactionType.withholdTax === true;
   }
 
+  /**
+   * Show Transactions Details
+   * @param transactionsData Transactions Data
+   */
+  showTransactions(transactionsData: any) {
+    if (transactionsData.transfer) {
+      this.router.navigate([`account-transfers/account-transfers/${transactionsData.transfer.id}`], { relativeTo: this.route });
+    } else {
+      this.router.navigate([transactionsData.id], { relativeTo: this.route });
+    }
+  }
+
 }
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-routing.module.ts b/src/app/deposits/recurring-deposits/recurring-deposits-routing.module.ts
index 7e4a026ff..256d1d9dc 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-routing.module.ts
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-routing.module.ts
@@ -131,6 +131,10 @@ const routes: Routes = [
                     resolve: {
                       recurringDepositsAccountTransactionTemplate: RecurringDepositsAccountTransactionTemplateResolver
                     }
+                  },
+                  {
+                    path: 'account-transfers',
+                    loadChildren: '../../account-transfers/account-transfers.module#AccountTransfersModule'
                   }
                 ]
               }
diff --git a/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html b/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html
index 5e26a95ac..6567c826f 100644
--- a/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html
+++ b/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html
@@ -54,7 +54,7 @@
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" [routerLink]="[row.id]"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" (click)="showTransactions(row)"></tr>
 
     </table>
 
diff --git a/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.ts b/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.ts
index 54ecfe033..d10de7844 100644
--- a/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.ts
+++ b/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.ts
@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { MatTableDataSource } from '@angular/material';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
 /**
  * Transactions Tab Component.
@@ -26,7 +26,8 @@ export class TransactionsTabComponent implements OnInit {
    * Retrieves savings account data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  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.status = data.savingsAccountData.status.value;
@@ -57,6 +58,18 @@ export class TransactionsTabComponent implements OnInit {
     return false;
   }
 
+  /**
+   * Show Transactions Details
+   * @param transactionsData Transactions Data
+   */
+  showTransactions(transactionsData: any) {
+    if (transactionsData.transfer) {
+      this.router.navigate([`account-transfers/account-transfers/${transactionsData.transfer.id}`], { relativeTo: this.route });
+    } else {
+      this.router.navigate([transactionsData.id], { relativeTo: this.route });
+    }
+  }
+
   /**
    * Stops the propagation to view pages.
    * @param $event Mouse Event
diff --git a/src/app/savings/savings-routing.module.ts b/src/app/savings/savings-routing.module.ts
index b962c171f..0d798c9e6 100644
--- a/src/app/savings/savings-routing.module.ts
+++ b/src/app/savings/savings-routing.module.ts
@@ -116,6 +116,10 @@ const routes: Routes = [
                 path: '',
                 redirectTo: '../transactions', pathMatch: 'prefix'
               },
+              {
+                path: 'account-transfers',
+                loadChildren: '../account-transfers/account-transfers.module#AccountTransfersModule'
+              },
               {
                 path: ':id',
                 data: { routeParamBreadcrumb: 'id' },
@@ -180,7 +184,7 @@ const routes: Routes = [
         ]
       }
     ]
-  }
+  },
 ];
 @NgModule({
   imports: [RouterModule.forChild(routes)],