From 7bd84899cfc690843f37b273a6d5d047f0b9b015 Mon Sep 17 00:00:00 2001
From: Muskan Khedia <36980003+muskankhedia@users.noreply.github.com>
Date: Tue, 30 Jun 2020 10:21:48 +0530
Subject: [PATCH] fix: add recurring and fixed account table in clients view
 section (#956)

Fixes: #955
---
 .../general-tab/general-tab.component.html    | 284 ++++++++++++++++--
 .../general-tab/general-tab.component.scss    |   9 +
 .../general-tab/general-tab.component.ts      |  11 +
 .../loan-account-table.component.ts           |   4 +-
 .../savings-account-table.component.ts        |   4 +-
 .../share-account-table.component.ts          |   4 +-
 src/app/pipes/accounts-filter.pipe.ts         |  15 +-
 7 files changed, 300 insertions(+), 31 deletions(-)

diff --git a/src/app/clients/clients-view/general-tab/general-tab.component.html b/src/app/clients/clients-view/general-tab/general-tab.component.html
index 726fe439e..f1f11d4bc 100644
--- a/src/app/clients/clients-view/general-tab/general-tab.component.html
+++ b/src/app/clients/clients-view/general-tab/general-tab.component.html
@@ -14,10 +14,21 @@
 
   <!-- Upcoming Charges -->
 
-  <h3>Upcoming Charges</h3>
-  <button mat-raised-button class="f-right" color="primary" [routerLink]="['../', 'chargeoverview']">Charges Overview</button>
-  <table mat-table [dataSource]="upcomingCharges">
+  <div class="headingContent">
+    <div fxLayout="column" fxFlex="50%">
+      <div className="headingName">
+        <h3>Upcoming Charges</h3>
+      </div>
+    </div>
+    <div fxLayout="column" fxFlex="50%">
+      <div fxLayout="row" fxLayoutAlign="flex-end">
+        <button mat-raised-button class="f-right" color="primary" [routerLink]="['../', 'chargeoverview']">Charges
+          Overview</button>
+      </div>
+    </div>
+  </div>
 
+  <table mat-table [dataSource]="upcomingCharges">
     <ng-container matColumnDef="Name">
       <th mat-header-cell *matHeaderCellDef> Name </th>
       <td mat-cell *matCellDef="let element"> <i class="fa fa-stop"
@@ -54,10 +65,12 @@
     <ng-container matColumnDef="Actions">
       <th mat-header-cell *matHeaderCellDef> Actions </th>
       <td mat-cell *matCellDef="let element">
-        <button class="account-action-button" mat-raised-button color="primary" [routerLink]="['../','paycharge',element.id]">
+        <button class="account-action-button" mat-raised-button color="primary"
+          [routerLink]="['../','paycharge',element.id]">
           <i class="fa fa-dollar"></i>
         </button>
-        <button class="account-action-button" mat-raised-button color="primary" (click)="waiveCharge(element.id,element.clientId)">
+        <button class="account-action-button" mat-raised-button color="primary"
+          (click)="waiveCharge(element.id,element.clientId)">
           <i class="fa fa-flag"></i>
         </button>
       </td>
@@ -70,10 +83,19 @@
 
 
   <!-- loans overview table -->
-
-  <h3>Loan Accounts</h3>
-  <button mat-raised-button class="f-right" color="primary"
-    (click)="toggleLoanAccountsOverview()">{{showClosedLoanAccounts?'View Active Accounts':'View Closed Accounts'}}</button>
+  <div class="headingContent">
+    <div fxLayout="column" fxFlex="50%">
+      <div class="headingName">
+        <h3>Loan Accounts</h3>
+      </div>
+    </div>
+    <div fxLayout="column" fxFlex="50%">
+      <div fxLayout="row" fxLayoutAlign="flex-end">
+        <button mat-raised-button class="f-right" color="primary"
+          (click)="toggleLoanAccountsOverview()">{{showClosedLoanAccounts?'View Active Accounts':'View Closed Accounts'}}</button>
+      </div>
+    </div>
+  </div>
   <table *ngIf="!showClosedLoanAccounts" mat-table [dataSource]="loanAccounts|accountsFilter:'loan'">
 
     <ng-container matColumnDef="Account No">
@@ -133,7 +155,8 @@
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="openLoansColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: openLoansColumns;" [routerLink]="['/clients', clientid, 'loans', row.id, 'general']" class="select-row"></tr>
+    <tr mat-row *matRowDef="let row; columns: openLoansColumns;"
+      [routerLink]="['/clients', clientid, 'loans', row.id, 'general']" class="select-row"></tr>
   </table>
 
   <!-- Closed Loan Accounts -->
@@ -186,11 +209,22 @@
 
 
   <!-- Saving overview Table -->
+  <div class="headingContent">
+    <div fxLayout="column" fxFlex="50%">
+      <div class="headingName">
+        <h3>Saving Accounts</h3>
+      </div>
+    </div>
+    <div fxLayout="column" fxFlex="50%">
+      <div fxLayout="row" fxLayoutAlign="flex-end">
+        <button mat-raised-button class="f-right" color="primary"
+          (click)="toggleSavingAccountsOverview()">{{showClosedSavingAccounts?'View Active Accounts':'View Closed Accounts'}}</button>
+      </div>
+    </div>
+  </div>
 
-  <h3>Saving Accounts</h3>
-  <button mat-raised-button class="f-right" color="primary"
-    (click)="toggleSavingAccountsOverview()">{{showClosedSavingAccounts?'View Active Accounts':'View Closed Accounts'}}</button>
-  <table *ngIf="!showClosedSavingAccounts" mat-table [dataSource]="savingAccounts|accountsFilter:'saving'">
+  <table *ngIf="!showClosedSavingAccounts" mat-table
+    [dataSource]="savingAccounts|accountsFilter:'saving':'open':'isSavings'">
 
     <ng-container matColumnDef="Account No">
       <th mat-header-cell *matHeaderCellDef> Account No. </th>
@@ -230,12 +264,12 @@
         </button>
         <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
           class="account-action-button" mat-raised-button color="primary"
-          (click)="routeEdit($event)" [routerLink]="['../','savingsaccounts', element.id, 'actions', 'Undo Approval']">
+          [routerLink]="['../','savingsaccounts', element.id, 'actions', 'Undo Approval']">
           <i class="fa fa-undo"></i>
         </button>
         <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
           class="account-action-button" mat-raised-button color="primary"
-          (click)="routeEdit($event)" [routerLink]="['../','savingsaccounts', element.id, 'actions', 'Activate']">
+          [routerLink]="['../','savingsaccounts', element.id, 'actions', 'Activate']">
           <i class="fa fa-check-circle"></i>
         </button>
       </td>
@@ -243,12 +277,14 @@
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="openSavingsColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: openSavingsColumns;" [routerLink]="['../', 'savingsaccounts', row.id, 'transactions']"></tr>
+    <tr mat-row *matRowDef="let row; columns: openSavingsColumns;"
+      [routerLink]="['../', 'savingsaccounts', row.id, 'transactions']"></tr>
   </table>
 
   <!-- Closed Saving Accounts -->
 
-  <table *ngIf="showClosedSavingAccounts" mat-table [dataSource]="savingAccounts|accountsFilter:'saving':'closed'">
+  <table *ngIf="showClosedSavingAccounts" mat-table
+    [dataSource]="savingAccounts|accountsFilter:'saving':'closed':'isSavings'">
 
     <ng-container matColumnDef="Account No">
       <th mat-header-cell *matHeaderCellDef> Account No. </th>
@@ -270,11 +306,210 @@
     <tr mat-row *matRowDef="let row; columns: closedSavingsColumns;"></tr>
   </table>
 
-  <!-- Shares overview Table -->
 
-  <h3>Shares Accounts</h3>
-  <button mat-raised-button class="f-right" color="primary"
-    (click)="toggleShareAccountsOverview()">{{showClosedSavingAccounts?'View Active Accounts':'View Closed Accounts'}}</button>
+  <!-- Fixed Deposit Table -->
+  <div class="headingContent">
+    <div fxLayout="column" fxFlex="50%">
+      <div class="headingName">
+        <h3>Fixed Deposit Accounts</h3>
+      </div>
+    </div>
+    <div fxLayout="column" fxFlex="50%">
+      <div fxLayout="row" fxLayoutAlign="flex-end">
+        <button mat-raised-button class="f-right" color="primary"
+          (click)="toggleFixedAccountsOverview()">{{showClosedFixedAccounts?'View Active Accounts':'View Closed Accounts'}}</button>
+      </div>
+    </div>
+  </div>
+  <table *ngIf="!showClosedFixedAccounts" mat-table
+    [dataSource]="savingAccounts|accountsFilter:'saving':'open':'isFixed'">
+
+    <ng-container matColumnDef="Account No">
+      <th mat-header-cell *matHeaderCellDef> Account No. </th>
+      <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
+        {{element.accountNo}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Saving Account">
+      <th mat-header-cell *matHeaderCellDef> Saving Account </th>
+      <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Last Active">
+      <th mat-header-cell *matHeaderCellDef> Last Active </th>
+      <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate | date}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Balance">
+      <th mat-header-cell *matHeaderCellDef> Balance </th>
+      <td mat-cell *matCellDef="let element"> {{element.accountBalance}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Actions">
+      <th mat-header-cell *matHeaderCellDef> Actions </th>
+      <td mat-cell *matCellDef="let element">
+        <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary">
+          <i class="fa fa-arrow-up"></i>
+        </button>
+        <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary">
+          <i class="fa fa-arrow-down"></i>
+        </button>
+        <button *ngIf="element.status.submittedAndPendingApproval" class="account-action-button" mat-raised-button
+          color="primary">
+          <i class="fa fa-check"></i>
+        </button>
+        <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
+          class="account-action-button" mat-raised-button color="primary"
+          (click)="routeEdit($event)" [routerLink]="['../','savingsaccounts', element.id, 'actions', 'Undo Approval']">
+          <i class="fa fa-undo"></i>
+        </button>
+        <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
+          class="account-action-button" mat-raised-button color="primary"
+          (click)="routeEdit($event)" [routerLink]="['../','savingsaccounts', element.id, 'actions', 'Activate']">
+          <i class="fa fa-check-circle"></i>
+        </button>
+      </td>
+
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="openSavingsColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: openSavingsColumns;"
+      [routerLink]="['../', 'savingsaccounts', row.id, 'transactions']"></tr>
+  </table>
+
+  <!-- Closed Fixed Deposit Accounts -->
+
+  <table *ngIf="showClosedFixedAccounts" mat-table
+    [dataSource]="savingAccounts|accountsFilter:'saving':'closed':'isFixed'">
+
+    <ng-container matColumnDef="Account No">
+      <th mat-header-cell *matHeaderCellDef> Account No. </th>
+      <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
+        {{element.accountNo}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Saving Account">
+      <th mat-header-cell *matHeaderCellDef> Saving Account </th>
+      <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Closed Date">
+      <th mat-header-cell *matHeaderCellDef> Closed Date </th>
+      <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate | date}}</td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="closedSavingsColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: closedSavingsColumns;"></tr>
+  </table>
+
+  <!-- Recurring Deposit Table -->
+  <div class="headingContent">
+    <div fxLayout="column" fxFlex="50%">
+      <div class="headingName">
+        <h3>Recurring Deposit Accounts</h3>
+      </div>
+    </div>
+    <div fxLayout="column" fxFlex="50%">
+      <div fxLayout="row" fxLayoutAlign="flex-end">
+        <button mat-raised-button class="f-right" color="primary"
+          (click)="toggleRecurringAccountsOverview()">{{showClosedRecurringAccounts?'View Active Accounts':'View Closed Accounts'}}</button>
+      </div>
+    </div>
+  </div>
+
+  <table *ngIf="!showClosedRecurringAccounts" mat-table
+    [dataSource]="savingAccounts|accountsFilter:'saving':'open':'isRecurring'">
+
+    <ng-container matColumnDef="Account No">
+      <th mat-header-cell *matHeaderCellDef> Account No. </th>
+      <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
+        {{element.accountNo}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Saving Account">
+      <th mat-header-cell *matHeaderCellDef> Saving Account </th>
+      <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Last Active">
+      <th mat-header-cell *matHeaderCellDef> Last Active </th>
+      <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate | date}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Balance">
+      <th mat-header-cell *matHeaderCellDef> Balance </th>
+      <td mat-cell *matCellDef="let element"> {{element.accountBalance}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Actions">
+      <th mat-header-cell *matHeaderCellDef> Actions </th>
+      <td mat-cell *matCellDef="let element">
+        <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary">
+          <i class="fa fa-arrow-up"></i>
+        </button>
+        <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary">
+          <i class="fa fa-arrow-down"></i>
+        </button>
+        <button *ngIf="element.status.submittedAndPendingApproval" class="account-action-button" mat-raised-button
+          color="primary">
+          <i class="fa fa-check"></i>
+        </button>
+        <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
+          class="account-action-button" mat-raised-button color="primary">
+          <i class="fa fa-undo"></i>
+        </button>
+        <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
+          class="account-action-button" mat-raised-button color="primary">
+          <i class="fa fa-check-circle"></i>
+        </button>
+      </td>
+
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="openSavingsColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: openSavingsColumns;"
+      [routerLink]="['../', 'savingsaccounts', row.id, 'transactions']"></tr>
+  </table>
+
+  <!-- Closed Recurring Deposit Accounts -->
+
+  <table *ngIf="showClosedRecurringAccounts" mat-table
+    [dataSource]="savingAccounts|accountsFilter:'saving':'closed':'isRecurring'">
+
+    <ng-container matColumnDef="Account No">
+      <th mat-header-cell *matHeaderCellDef> Account No. </th>
+      <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
+        {{element.accountNo}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Saving Account">
+      <th mat-header-cell *matHeaderCellDef> Saving Account </th>
+      <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Closed Date">
+      <th mat-header-cell *matHeaderCellDef> Closed Date </th>
+      <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate | date}}</td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="closedSavingsColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: closedSavingsColumns;"></tr>
+  </table>
+  <!-- Shares overview Table -->
+  <div class="headingContent">
+    <div fxLayout="column" fxFlex="50%">
+      <div class="headingName">
+        <h3>Shares Accounts</h3>
+      </div>
+    </div>
+    <div fxLayout="column" fxFlex="50%">
+      <div fxLayout="row" fxLayoutAlign="flex-end">
+        <button mat-raised-button class="f-right" color="primary"
+          (click)="toggleShareAccountsOverview()">{{showClosedSavingAccounts?'View Active Accounts':'View Closed Accounts'}}</button>
+      </div>
+    </div>
+  </div>
+
   <table *ngIf="!showClosedShareAccounts" mat-table [dataSource]="shareAccounts|accountsFilter:'share'">
 
     <ng-container matColumnDef="Account No">
@@ -318,7 +553,8 @@
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="openSharesColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: openSharesColumns;" [routerLink]="['../', 'sharesaccounts', row.id, 'transactions']"></tr>
+    <tr mat-row *matRowDef="let row; columns: openSharesColumns;"
+      [routerLink]="['../', 'sharesaccounts', row.id, 'transactions']"></tr>
   </table>
   <!-- Closed Share Accounts -->
   <table *ngIf="showClosedShareAccounts" mat-table [dataSource]="shareAccounts|accountsFilter:'share':'closed'">
@@ -353,4 +589,4 @@
     <tr mat-row *matRowDef="let row; columns: closedSharesColumns;"></tr>
   </table>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/clients/clients-view/general-tab/general-tab.component.scss b/src/app/clients/clients-view/general-tab/general-tab.component.scss
index 16f4183cc..65f6665da 100644
--- a/src/app/clients/clients-view/general-tab/general-tab.component.scss
+++ b/src/app/clients/clients-view/general-tab/general-tab.component.scss
@@ -25,3 +25,12 @@
   }
 
 }
+
+.headingContent{
+  margin-bottom: 1%;
+  margin-top: 1%;
+}
+
+.headingName {
+  display: block;
+}
diff --git a/src/app/clients/clients-view/general-tab/general-tab.component.ts b/src/app/clients/clients-view/general-tab/general-tab.component.ts
index 59d6ee5f1..9da4a4408 100644
--- a/src/app/clients/clients-view/general-tab/general-tab.component.ts
+++ b/src/app/clients/clients-view/general-tab/general-tab.component.ts
@@ -31,6 +31,9 @@ export class GeneralTabComponent {
   showClosedLoanAccounts = false;
   showClosedSavingAccounts = false;
   showClosedShareAccounts = false;
+  showClosedRecurringAccounts = false;
+  showClosedFixedAccounts = false;
+
   clientid: any;
 
   constructor(
@@ -59,6 +62,14 @@ export class GeneralTabComponent {
     this.showClosedShareAccounts = !this.showClosedShareAccounts;
   }
 
+  toggleRecurringAccountsOverview() {
+    this.showClosedRecurringAccounts = !this.showClosedRecurringAccounts;
+  }
+
+  toggleFixedAccountsOverview() {
+    this.showClosedFixedAccounts = !this.showClosedFixedAccounts;
+  }
+
   /**
    * Waive Charge.
    * @param chargeId Selected Charge Id.
diff --git a/src/app/navigation/loan-account-table/loan-account-table.component.ts b/src/app/navigation/loan-account-table/loan-account-table.component.ts
index baaa4897f..c3c340f99 100644
--- a/src/app/navigation/loan-account-table/loan-account-table.component.ts
+++ b/src/app/navigation/loan-account-table/loan-account-table.component.ts
@@ -29,7 +29,7 @@ export class LoanAccountTableComponent implements OnInit {
   /** Loan Account Setter */
   @Input() set loanAccountData(data: any) {
     this.accountData = data;
-    const filteredAccountData = this.accountsFilterPipe.transform(data, 'loan', this.showClosed ? 'closed' : 'open');
+    const filteredAccountData = this.accountsFilterPipe.transform(data, 'loan', this.showClosed ? 'closed' : 'open', 'isLoan');
     this.dataSource = new MatTableDataSource(filteredAccountData);
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
@@ -56,7 +56,7 @@ export class LoanAccountTableComponent implements OnInit {
    */
   toggleClosed() {
     this.showClosed = !this.showClosed;
-    const filteredAccountData = this.accountsFilterPipe.transform(this.accountData, 'loan', this.showClosed ? 'closed' : 'open');
+    const filteredAccountData = this.accountsFilterPipe.transform(this.accountData, 'loan', this.showClosed ? 'closed' : 'open', 'isLoan');
     this.dataSource = new MatTableDataSource(filteredAccountData);
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
diff --git a/src/app/navigation/savings-account-table/savings-account-table.component.ts b/src/app/navigation/savings-account-table/savings-account-table.component.ts
index e4c674a29..6241561e0 100644
--- a/src/app/navigation/savings-account-table/savings-account-table.component.ts
+++ b/src/app/navigation/savings-account-table/savings-account-table.component.ts
@@ -29,7 +29,7 @@ export class SavingsAccountTableComponent implements OnInit {
   /** Savings Account Setter */
   @Input() set savingsAccountData(data: any) {
     this.accountData = data;
-    const filteredAccountData = this.accountsFilterPipe.transform(data, 'saving', this.showClosed ? 'closed' : 'open');
+    const filteredAccountData = this.accountsFilterPipe.transform(data, 'saving', this.showClosed ? 'closed' : 'open', 'isSavings');
     this.dataSource = new MatTableDataSource(filteredAccountData);
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
@@ -56,7 +56,7 @@ export class SavingsAccountTableComponent implements OnInit {
    */
   toggleClosed() {
     this.showClosed = !this.showClosed;
-    const filteredAccountData = this.accountsFilterPipe.transform(this.accountData, 'saving', this.showClosed ? 'closed' : 'open');
+    const filteredAccountData = this.accountsFilterPipe.transform(this.accountData, 'saving', this.showClosed ? 'closed' : 'open', 'isSavings');
     this.dataSource = new MatTableDataSource(filteredAccountData);
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
diff --git a/src/app/navigation/share-account-table/share-account-table.component.ts b/src/app/navigation/share-account-table/share-account-table.component.ts
index 822d84315..6d52180f6 100644
--- a/src/app/navigation/share-account-table/share-account-table.component.ts
+++ b/src/app/navigation/share-account-table/share-account-table.component.ts
@@ -29,7 +29,7 @@ export class ShareAccountTableComponent implements OnInit {
   /** Share Account Setter */
   @Input() set shareAccountData(data: any) {
     this.accountData = data;
-    const filteredAccountData = this.accountsFilterPipe.transform(data, 'share', this.showClosed ? 'closed' : 'open');
+    const filteredAccountData = this.accountsFilterPipe.transform(data, 'share', this.showClosed ? 'closed' : 'open', 'isShare');
     this.dataSource = new MatTableDataSource(filteredAccountData);
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
@@ -56,7 +56,7 @@ export class ShareAccountTableComponent implements OnInit {
    */
   toggleClosed() {
     this.showClosed = !this.showClosed;
-    const filteredAccountData = this.accountsFilterPipe.transform(this.accountData, 'share', this.showClosed ? 'closed' : 'open');
+    const filteredAccountData = this.accountsFilterPipe.transform(this.accountData, 'share', this.showClosed ? 'closed' : 'open', 'isShare');
     this.dataSource = new MatTableDataSource(filteredAccountData);
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
diff --git a/src/app/pipes/accounts-filter.pipe.ts b/src/app/pipes/accounts-filter.pipe.ts
index 91779b04a..2a09b7299 100644
--- a/src/app/pipes/accounts-filter.pipe.ts
+++ b/src/app/pipes/accounts-filter.pipe.ts
@@ -5,7 +5,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 })
 export class AccountsFilterPipe implements PipeTransform {
 
-  transform(accounts: any, type: any, status: any): any {
+  transform(accounts: any, type: any, status: any, checkSavings: any): any {
     if (accounts) {
       if (type === 'loan') {
         if (status === 'closed') {
@@ -27,6 +27,19 @@ export class AccountsFilterPipe implements PipeTransform {
         }
       }
       if (type === 'saving') {
+        if (checkSavings === 'isFixed') {
+          accounts = accounts.filter((account: any) => {
+            return (account.depositType.value === 'Fixed Deposit');
+          });
+        } else if (checkSavings === 'isRecurring') {
+          accounts = accounts.filter((account: any) => {
+            return (account.depositType.value === 'Recurring Deposit');
+          });
+        } else if (checkSavings === 'isSavings') {
+          accounts = accounts.filter((account: any) => {
+            return (account.depositType.value === 'Savings');
+          });
+        }
         if (status === 'closed') {
           accounts = accounts.filter((account: any) => {
             return (account.status.code === 'savingsAccountStatusType.withdrawn.by.applicant' ||