feat: add recurring deposit account tab (interest rate chart) (#979)

Fixes: #978
2020-07-03 23:58:39 +05:30
parent 5110296648
commit b9d72f2d2c
22 changed files with 184 additions and 12 deletions
@@ -0,0 +1,32 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { RecurringDepositsService } from '../recurring-deposits.service';
+
+/**
+ * RecurringDeposits Account data resolver.
+ */
+@Injectable()
+export class RecurringDepositsAccountDataResolver implements Resolve<Object> {
+
+  /**
+   * @param {RecurringDepositsService} RecurringDepositsService RecurringDeposits service.
+   */
+  constructor(private recurringDepositsService: RecurringDepositsService) { }
+
+  /**
+   * Returns the RecurringDeposits Account data.
+   * @param {ActivatedRouteSnapshot} route Route Snapshot
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const recurringDepositAccountId = route.parent.paramMap.get('recurringDepositAccountId');
+    return this.recurringDepositsService.getRecurringDepositsAccountData(recurringDepositAccountId);
+  }
+
+}
@@ -0,0 +1,32 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { RecurringDepositsService } from '../recurring-deposits.service';
+
+/**
+ * RecurringDeposits Account data resolver.
+ */
+@Injectable()
+export class RecurringDepositsAccountViewResolver implements Resolve<Object> {
+
+  /**
+   * @param {RecurringDepositsService} RecurringDepositsService RecurringDeposits service.
+   */
+  constructor(private recurringDepositsService: RecurringDepositsService) { }
+
+  /**
+   * Returns the RecurringDeposits Account data.
+   * @param {ActivatedRouteSnapshot} route Route Snapshot
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const recurringDepositAccountId = route.paramMap.get('recurringDepositAccountId');
+    return this.recurringDepositsService.getRecurringDepositsAccountData(recurringDepositAccountId);
+  }
+
+}
@@ -0,0 +1,45 @@
+<div class="tab-container mat-typography">
+
+  <div class="mat-elevation-z1 m-b-25">
+
+    <table mat-table [dataSource]="interestRateChartData">
+
+      <ng-container matColumnDef="period">
+        <th mat-header-cell *matHeaderCellDef> Period </th>
+        <td mat-cell *matCellDef="let rateChart">
+          {{rateChart.fromPeriod}}-{{rateChart.toPeriod}}&nbsp;{{rateChart.periodType.value}}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="amountRange">
+        <th mat-header-cell *matHeaderCellDef> Amount Range </th>
+        <td mat-cell *matCellDef="let rateChart">{{rateChart.amountRangeFrom}}-{{rateChart.amountRangeTo}}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="interest">
+        <th mat-header-cell *matHeaderCellDef> Interest </th>
+        <td mat-cell *matCellDef="let rateChart"> {{ rateChart.annualInterestRate }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="description">
+        <th mat-header-cell *matHeaderCellDef> Description </th>
+        <td mat-cell *matCellDef="let rateChart"> {{ rateChart.description }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="incentives">
+        <th mat-header-cell *matHeaderCellDef> Incentives </th>
+        <td mat-cell *matCellDef="let rateChart">
+          <button mat-button color="primary">
+            <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
+            View Incentives
+          </button>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+    </table>
+
+  </div>
+
+</div>
@@ -0,0 +1,10 @@
+.tab-container {
+  padding: 1%;
+  margin: 1%;
+  h3 {
+    margin:1% auto;
+  }
+  table {
+    width: 100%;
+  }
+}
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InterestRateChartTabComponent } from './interest-rate-chart-tab.component';
+
+describe('InterestRateChartTabComponent', () => {
+  let component: InterestRateChartTabComponent;
+  let fixture: ComponentFixture<InterestRateChartTabComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InterestRateChartTabComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InterestRateChartTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,36 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { MatTableDataSource } from '@angular/material';
+import { ActivatedRoute } from '@angular/router';
+
+/**
+ * Interest Rate Chart Tab Component.
+ */
+@Component({
+  selector: 'mifosx-interest-rate-chart-tab',
+  templateUrl: './interest-rate-chart-tab.component.html',
+  styleUrls: ['./interest-rate-chart-tab.component.scss']
+})
+export class InterestRateChartTabComponent implements OnInit {
+
+  /** Interest Rate Chart Data */
+  interestRateChartData: any;
+  /** Columns to be displayed in interest rate chart table. */
+  displayedColumns: string[] = ['period', 'amountRange', 'interest', 'description', 'incentives'];
+  /** Data source for interest rate chart table. */
+  dataSource: MatTableDataSource<any>;
+
+  /**
+   * Retrieves recurring deposits account data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   */
+  constructor(private route: ActivatedRoute) {
+    this.route.parent.data.subscribe((data: { recurringDepositsAccountData: any }) => {
+      this.interestRateChartData = data.recurringDepositsAccountData.accountChart.chartSlabs;
+    });
+  }
+
+  ngOnInit() {
+  }
+
+}
@@ -0,0 +1,16 @@
+@import "~@angular/material/theming";
+
+@mixin recurring-deposits-account-view-component-theme($theme) {
+  $primary: map-get($theme, primary);
+  mifosx-recurring-deposits-account-view {
+    .recurringDeposits-account-card {
+      .header {
+        background-color: mat-color($primary, 500);
+      }
+      .table-headers {
+        background-color: mat-color($primary, 500);
+        color: mat-contrast($primary, 500);
+      }
+    }
+  }
+}
@@ -0,0 +1,210 @@
+<mat-card class="recurringDeposits-account-card">
+
+  <mat-card-header fxLayout="column" class="header">
+
+    <mat-card-title-group class="header-title-group">
+
+      <div class="profile-image-container">
+        <div>
+          <img mat-card-md-image class="profile-image" matTooltip="Recurring Deposits Account"
+            [src]="'assets/images/recurring-deposits_account_placeholder.png'">
+        </div>
+      </div>
+
+      <div class="mat-typography account-card-title">
+        <mat-card-title>
+          <h3>
+            <i class="fa fa-stop" [ngClass]="recurringDepositsAccountData.status.code | statusLookup"
+              [matTooltip]="recurringDepositsAccountData.status.value"></i>
+            Account Name : {{recurringDepositsAccountData.depositProductName}}
+          </h3>
+        </mat-card-title>
+        <mat-card-subtitle>
+          <p>
+            Account #: {{recurringDepositsAccountData.accountNo}} | Client Name:
+            {{recurringDepositsAccountData.clientName}}<br />
+            <span
+              *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
+              Current Balance:
+              {{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.accountBalance}}<br />
+              Available Balance:
+              {{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.availableBalance}}<br />
+            </span>
+          </p>
+        </mat-card-subtitle>
+      </div>
+
+    </mat-card-title-group>
+
+    <mat-card-actions class="account-actions">
+
+      <ng-container *ngFor="let button of buttonConfig.singleButtons">
+        <button mat-raised-button >
+          <i class="{{button.icon}}"></i> {{button.name}}</button>
+      </ng-container>
+  
+      <ng-container *ngIf="buttonConfig.options.length > 0">
+        <button mat-raised-button [matMenuTriggerFor]="More">More</button>
+        <mat-menu #More="matMenu">
+        <span *ngFor="let option of buttonConfig.options">
+          <button mat-menu-item >{{option.name}}</button>
+        </span>
+        </mat-menu>
+      </ng-container>
+
+    </mat-card-actions>
+
+  </mat-card-header>
+
+  <mat-card-content class="content">
+
+    <div class="recurringDeposits-account-tables" fxLayout="row" fxLayoutGap="2%">
+
+      <div fxFlex="49%"
+        *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
+        <h4 class="table-headers">Savings Details</h4>
+        <table>
+          <tbody>
+            <tr>
+              <td>Field Officer</td>
+              <td>{{recurringDepositsAccountData.fieldOfficerName}}<span
+                  *ngIf="!recurringDepositsAccountData.fieldOfficerName">Unassigned</span></td>
+            </tr>
+            <tr>
+              <td>Activation date</td>
+              <td>{{recurringDepositsAccountData.timeline.activatedOnDate | date}}</td>
+            </tr>
+            <tr>
+              <td>Maturity Date</td>
+              <td><span>{{recurringDepositsAccountData.maturityDate | date}}</span></td>
+            </tr>
+            <tr
+              *ngIf="recurringDepositsAccountData.timeline.closedOnDate || recurringDepositsAccountData.summary.totalWitddrawals">
+              <td *ngIf="recurringDepositsAccountData.timeline.closedOnDate">
+                Closed on Date</td>
+              <td><span>{{recurringDepositsAccountData.timeline.closedOnDate | date}}</span></td>
+            </tr>
+            <tr>
+              <td>Period</td>
+              <td>
+                <span>{{recurringDepositsAccountData.depositPeriod}}&nbsp;{{recurringDepositsAccountData.depositPeriodFrequency.value}}</span>
+              </td>
+            </tr>
+            <tr>
+              <td>Deposit Frequency</td>
+              <td><span>{{recurringDepositsAccountData.recurringFrequency}}
+                  &nbsp;{{recurringDepositsAccountData.recurringFrequencyType.value}}
+                </span></td>
+            </tr>
+            <tr *ngIf="recurringDepositsAccountData.minBalanceForInterestCalculation">
+              <td> Balance Required For Interest Calculation</td>
+              <td><span>{{recurringDepositsAccountData.minBalanceForInterestCalculation}}</span></td>
+            </tr>
+            <tr *ngIf="recurringDepositsAccountData.witdHoldTax">
+              <td> Witdhold Tax Group </td>
+              <td><span>{{recurringDepositsAccountData.taxGroup.name}}</span></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div fxFlex="49%"
+        *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
+        <h4 class="table-headers">Performance History</h4>
+        <table>
+          <tbody>
+            <tr>
+              <td>Principal Amount</td>
+              <td>
+                <span>{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.depositAmount}}</span>
+              </td>
+            </tr>
+            <tr>
+              <td>Maturity Amount</td>
+              <td>
+                <span>{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.maturityAmount | number}}</span>
+              </td>
+            </tr>
+            <tr>
+              <td>Recurring Deposit Amount</td>
+              <td>
+                <span>{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.mandatoryRecommendedDepositAmount | number}}</span>
+              </td>
+            </tr>
+            <tr>
+              <td>Deposits till Date</td>
+              <td><span
+                  *ngIf="recurringDepositsAccountData.summary.totalDeposits">{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.totalDeposits | number}}</span>
+                <span
+                  *ngIf="!recurringDepositsAccountData.summary.totalDeposits">{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;0</span>
+              </td>
+            </tr>
+            <tr>
+              <td>Withdrwals till Date</td>
+              <td><span
+                  *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.totalWithdrawals | number}}</span>
+                <span
+                  *ngIf="!recurringDepositsAccountData.summary.totalWithdrawals">{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;0</span>
+              </td>
+            </tr>
+
+            <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned >= 0">
+              <td >Interest Earned</td>
+              <td><span>{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.totalInterestEarned| number}}</span>
+              </td>
+            </tr>
+
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div class="recurringDeposits-account-tables" fxLayout="row" fxLayoutGap="2%">
+      <div fxFlex="49%"
+        *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
+        <h4 class="table-headers">Interest Details</h4>
+        <table>
+          <tbody>
+            <tr>
+              <td >Interest Rate</td>
+              <td><span>{{recurringDepositsAccountData.nominalAnnualInterestRate}}%</span></td>
+            </tr>
+            <tr>
+              <td>Interest compounding period</td>
+              <td><span>{{recurringDepositsAccountData.interestCompoundingPeriodType.value}}</span></td>
+            </tr>
+            <tr>
+              <td>Interest compounding period</td>
+              <td><span>{{recurringDepositsAccountData.interestPostingPeriodType.value}}</span></td>
+            </tr>
+            <tr>
+              <td>Interest calculated using</td>
+              <td><span>{{recurringDepositsAccountData.interestCalculationType.value}}</span></td>
+            </tr>
+            <tr>
+              <td># Days in Year</td>
+              <td><span>{{recurringDepositsAccountData.interestCalculationDaysInYearType.value}}</span></td>
+            </tr>
+            <tr *ngIf="recurringDepositsAccountData.preClosurePenalApplicable">
+              <td>Pre-closure penal Interest (less)</td>
+              <td><span>{{recurringDepositsAccountData.preClosurePenalInterest}} % on
+                  {{recurringDepositsAccountData.preClosurePenalInterestOnType.value}}</span></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+    </div>
+
+    <nav mat-tab-nav-bar class="navigation-tabs">
+        <a mat-tab-link [routerLink]="['./interest-rate-chart']" routerLinkActive #IRC="routerLinkActive"
+          [active]="IRC.isActive">
+          Interest Rate Chart
+        </a>
+    </nav>
+
+    <router-outlet></router-outlet>
+
+  </mat-card-content>
+
+</mat-card>
@@ -0,0 +1,53 @@
+.recurringDeposits-account-card {
+  margin: 0 auto;
+  max-width: 80rem;
+  width: 90%;
+  padding: 0;
+  .header {
+    padding: 1%;
+    .header-title-group {
+      .account-card-title {
+        color: white;
+        width: 90%;
+        p {
+          color: white;
+        }
+      }
+    }
+    .profile-image-container {
+      margin: 1%;
+      .profile-image {
+        object-fit: cover;
+        border-radius: 20px;
+      }
+    }
+    .account-actions {
+      align-self: flex-end;
+      margin: 0 1%;
+      i {
+        margin-bottom: 2px;
+        margin-right: 4px;
+      }
+    }
+  }
+  .navigation-tabs {
+    background-color: #f2f2f2;
+    overflow: auto;
+  }
+  .content {
+    .recurringDeposits-account-tables {
+      padding: 1%;
+      margin: 1%;
+      .table-headers {
+        margin: 0;
+        padding: 6px;
+      }
+      td {
+        padding: 3px;
+      }
+    } 
+  }
+  i, img:hover {
+    cursor: pointer;
+  }
+}
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RecurringDepositsAccountViewComponent } from './recurring-deposits-account-view.component';
+
+describe('RecurringDepositsAccountViewComponent', () => {
+  let component: RecurringDepositsAccountViewComponent;
+  let fixture: ComponentFixture<RecurringDepositsAccountViewComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RecurringDepositsAccountViewComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RecurringDepositsAccountViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,72 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MatDialog } from '@angular/material';
+import { DatePipe } from '@angular/common';
+
+/** Custom Services */
+import { RecurringDepositsService } from '../recurring-deposits.service';
+
+/** Custom Buttons Configuration */
+import { RecurringDepositsButtonsConfiguration } from './recurring-deposits-buttons.config';
+
+/**
+ * RecurringDeposits Account View Component
+ */
+@Component({
+  selector: 'mifosx-recurring-deposits-account-view',
+  templateUrl: './recurring-deposits-account-view.component.html',
+  styleUrls: ['./recurring-deposits-account-view.component.scss']
+})
+export class RecurringDepositsAccountViewComponent implements OnInit {
+
+  /** RecurringDeposits Account Data */
+  recurringDepositsAccountData: any;
+  buttonConfig: RecurringDepositsButtonsConfiguration;
+  charges: any;
+
+  /**
+   * Fetches recurringDeposits account data from `resolve`
+   * @param {ActivatedRoute} route Activated Route
+   * @param {Router} router Router
+   * @param {RecurringDepositsService} recurringDepositsService RecurringDeposits Service
+   */
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private datePipe: DatePipe,
+              private recurringDepositsService: RecurringDepositsService,
+              public dialog: MatDialog) {
+    this.route.data.subscribe((data: { recurringDepositsAccountData: any }) => {
+      this.recurringDepositsAccountData = data.recurringDepositsAccountData;
+      this.charges = this.recurringDepositsAccountData.charges;
+    });
+  }
+
+  ngOnInit() {
+    this.setConditionalButtons();
+  }
+
+  /**
+   * Adds options to button config. conditionaly.
+   */
+  setConditionalButtons() {
+    const status = this.recurringDepositsAccountData.status.value;
+    this.buttonConfig = new RecurringDepositsButtonsConfiguration(status);
+    if (this.recurringDepositsAccountData.clientId && this.recurringDepositsAccountData.status.value === 'Matured') {
+      this.buttonConfig.addOption({
+        name: 'Transfer Funds',
+      });
+    }
+
+    if (this.recurringDepositsAccountData.charges && this.recurringDepositsAccountData.status.value === 'Matured') {
+      this.charges.forEach((element: any) => {
+        if (element.name === 'Annual fee - INR') {
+          this.buttonConfig.addOption({
+            name: 'Apply Annual Fees',
+          });
+        }
+      });
+    }
+  }
+
+}
@@ -0,0 +1,136 @@
+/** Recurring Deposits Account Buttons Configuration */
+export class RecurringDepositsButtonsConfiguration {
+
+  optionArray: {
+    name: string,
+    taskPermissionName?: string,
+  }[];
+
+  buttonsArray: {
+    name: string,
+    icon: string,
+    taskPermissionName?: string,
+  }[];
+
+  constructor(status: string) {
+    this.setOptions(status);
+    this.setButtons(status);
+  }
+
+  get singleButtons() {
+    return this.buttonsArray;
+  }
+
+  get options() {
+    return this.optionArray;
+  }
+
+  setButtons(status: string) {
+    switch (status) {
+      case 'Active':
+        this.buttonsArray = [
+          {
+            name: 'Deposit',
+            icon: 'fa fa-arrow-up'
+          },
+          {
+            name: 'Premature Close',
+            icon: 'fa fa-arrow-left'
+          },
+          {
+            name: 'Calculate Interest',
+            icon: 'fa fa-table',
+          }
+        ];
+        break;
+      case 'Submitted and pending approval':
+        this.buttonsArray = [
+          {
+            name: 'Modify Application',
+            icon: 'fa fa-pencil ',
+          },
+          {
+            name: 'Approve',
+            icon: 'fa fa-check'
+          }
+        ];
+        break;
+      case 'Approved':
+        this.buttonsArray = [
+          {
+            name: 'Undo Approval',
+            icon: 'fa fa-undo'
+          },
+          {
+            name: 'Activate',
+            icon: 'fa fa-check'
+          }
+        ];
+      break;
+      case 'Matured':
+        this.buttonsArray = [
+          {
+            name: 'Close',
+            icon: 'fa fa-arrow-right'
+          },
+          {
+            name: 'Calculate Interest',
+            icon: 'fa fa-table'
+          },
+          {
+            name: 'Post Interest',
+            icon: 'fa fa-table'
+          }
+        ];
+      break;
+      default:
+        this.buttonsArray = [];
+    }
+  }
+
+  setOptions(status: string) {
+    switch (status) {
+      case 'Active':
+        this.optionArray = [
+          {
+            name: 'Post Interest',
+          },
+          {
+            name: 'Add Charge',
+          }
+        ];
+        break;
+      case 'Submitted and pending approval':
+        this.optionArray = [
+          {
+            name: 'Reject'
+          },
+          {
+            name: 'Withdraw By Client'
+          },
+          {
+            name: 'Add Charge'
+          },
+          {
+            name: 'Delete'
+          }
+        ];
+        break;
+      case 'Matured':
+        this.optionArray = [
+          {
+            name: 'Add Charge'
+          }
+        ];
+        break;
+      case 'Approved':
+      default:
+        this.optionArray = [];
+    }
+  }
+
+  addOption(option: {name: string, taskPermissionName?: string}) {
+    this.optionArray.push(option);
+  }
+
+}
@@ -0,0 +1,51 @@
+/** Angular Imports */
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+/** Translation Imports */
+import { extract } from '../../core/i18n/i18n.service';
+
+/** Custom Components */
+import { RecurringDepositsAccountViewComponent } from './recurring-deposits-account-view/recurring-deposits-account-view.component';
+import { InterestRateChartTabComponent } from './recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component';
+
+/** Custom Resolvers */
+import { RecurringDepositsAccountViewResolver } from './common-resolvers/recurring-deposits-account-view.resolver';
+import { RecurringDepositsAccountDataResolver } from './common-resolvers/recurring-deposits-account-data.resolver';
+
+const routes: Routes = [
+  {
+    path: '',
+    data: { title: extract('All RecurringDeposits'), breadcrumb: 'RecurringDeposits', routeParamBreadcrumb: false },
+    children: [
+      {
+        path: ':recurringDepositAccountId',
+        data: { title: extract('RecurringDeposit Account View'), routeParamBreadcrumb: 'recurringDepositAccountId' },
+        component: RecurringDepositsAccountViewComponent,
+        resolve: {
+          recurringDepositsAccountData: RecurringDepositsAccountViewResolver
+        },
+        children: [
+          {
+            path: 'interest-rate-chart',
+            component: InterestRateChartTabComponent,
+            data: { title: extract('Interest Rate Chart'), breadcrumb: 'Interest Rate Chart', routeParamBreadcrumb: false },
+            resolve: {
+              recurringDepositsAccountData: RecurringDepositsAccountDataResolver
+            }
+          }
+        ]
+      }
+    ]
+  }
+];
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+  declarations: [],
+  providers: [
+    RecurringDepositsAccountViewResolver,
+    RecurringDepositsAccountDataResolver
+  ]
+})
+export class RecurringDepositsRoutingModule {}
@@ -0,0 +1,13 @@
+import { RecurringDepositsModule } from './recurring-deposits.module';
+
+describe('RecurringDepositsModule', () => {
+  let recurringDepositsModule: RecurringDepositsModule;
+
+  beforeEach(() => {
+    recurringDepositsModule = new RecurringDepositsModule();
+  });
+
+  it('should create an instance', () => {
+    expect(recurringDepositsModule).toBeTruthy();
+  });
+});
@@ -0,0 +1,33 @@
+/** Angular Imports */
+import { NgModule } from '@angular/core';
+import { DatePipe } from '@angular/common';
+
+/** Custom Modules */
+import { RecurringDepositsRoutingModule } from './recurring-deposits-routing.module';
+import { SharedModule } from 'app/shared/shared.module';
+import { PipesModule } from '../../pipes/pipes.module';
+import { DirectivesModule } from '../../directives/directives.module';
+
+/** Custom Components */
+import { RecurringDepositsAccountViewComponent } from './recurring-deposits-account-view/recurring-deposits-account-view.component';
+import { InterestRateChartTabComponent } from './recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component';
+
+/**
+ * RecurringDeposits Module
+ *
+ * All components related to RecurringDeposits functions should be declared here.
+ */
+@NgModule({
+  imports: [
+    SharedModule,
+    PipesModule,
+    DirectivesModule,
+    RecurringDepositsRoutingModule
+  ],
+  declarations: [
+    RecurringDepositsAccountViewComponent,
+    InterestRateChartTabComponent
+  ],
+  providers: [DatePipe]
+})
+export class RecurringDepositsModule {}
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { RecurringDepositsService } from './recurring-deposits.service';
+
+describe('RecurringDepositsService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: RecurringDepositsService = TestBed.get(RecurringDepositsService);
+    expect(service).toBeTruthy();
+  });
+});
@@ -0,0 +1,32 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/**
+ * RecurringDeposits Service.
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class RecurringDepositsService {
+
+  constructor(private http: HttpClient) {}
+
+  /**
+   * @param {string} recurringDepositAccountId is recurringDeposit account's Id.
+   * @returns {Observable<any>}
+   */
+  // getRecurringDepositsTransactionTemplateResource(recurringDepositAccountId: string): Observable<any> {
+  //   return this.http.get(`/recurringDepositsaccounts/${recurringDepositAccountId}/transactions/template`);
+  // }
+
+  getRecurringDepositsAccountData(recurringDepositAccountId: any) {
+    const httpParams = new HttpParams()
+      .set('associations', 'all');
+    return this.http.get(`/recurringdepositaccounts/${recurringDepositAccountId}`, { params: httpParams });
+  }
+
+}