feat:glim and gsim account create and view

src/app/savings/gsim-account/create-gsim-account/create-gsim-account.component.html

@@ -0,0 +1,79 @@
+<div class="container">
+
+    <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #savingProductStepper>
+  
+      <ng-template matStepperIcon="number">
+        <fa-icon icon="pencil-alt" size="sm"></fa-icon>
+      </ng-template>
+  
+      <ng-template matStepperIcon="edit">
+        <fa-icon icon="pencil-alt" size="sm"></fa-icon>
+      </ng-template>
+  
+      <ng-template matStepperIcon="done">
+        <fa-icon icon="check" size="sm"></fa-icon>
+      </ng-template>
+  
+      <ng-template matStepperIcon="error">
+        <fa-icon icon="exclamation-triangle" size="lg"></fa-icon>
+      </ng-template>
+  
+      <ng-template matStepperIcon="preview">
+        <fa-icon icon="eye" size="sm"></fa-icon>
+      </ng-template>
+  
+      <mat-step [stepControl]="savingsAccountDetailsForm">
+  
+        <ng-template matStepLabel>DETAILS</ng-template>
+  
+        <mifosx-savings-account-details-step
+          [savingsAccountTemplate]="savingsAccountTemplate" 
+          (savingsAccountProductTemplate)="setTemplate($event)"
+        >
+        </mifosx-savings-account-details-step>
+  
+      </mat-step>
+  
+      <mat-step [stepControl]="savingsAccountTermsForm">
+  
+        <ng-template matStepLabel>TERMS</ng-template>
+  
+        <mifosx-savings-account-terms-step 
+          [savingsAccountProductTemplate]="savingsAccountProductTemplate"
+        ></mifosx-savings-account-terms-step>
+  
+      </mat-step>
+  
+      <mat-step>
+  
+        <ng-template matStepLabel>CHARGES</ng-template>
+  
+        <mifosx-savings-account-charges-step
+          [savingsAccountProductTemplate]="savingsAccountProductTemplate"
+          [savingsAccountTemplate]="savingsAccountTemplate"
+          [currencyCode]="savingsAccountTermsForm.get('currencyCode')"
+          [activeClientMembers]="activeClientMembers"
+        >
+        </mifosx-savings-account-charges-step>
+  
+      </mat-step>
+  
+      <mat-step *ngIf="savingsAccountFormValid" completed>
+  
+        <ng-template matStepLabel>PREVIEW</ng-template>
+  
+        <mifosx-savings-account-preview-step
+          [savingsAccountProductTemplate]="savingsAccountProductTemplate"
+          [savingsAccountTemplate]="savingsAccountTemplate"
+          [savingsAccountTermsForm]="savingsAccountTermsForm"
+          [savingsAccount]="savingsAccount"
+          (submit)="submit()"
+        >
+        </mifosx-savings-account-preview-step>
+  
+      </mat-step>
+  
+    </mat-horizontal-stepper>
+  
+  </div>
+  

src/app/savings/gsim-account/create-gsim-account/create-gsim-account.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateGsimAccountComponent } from './create-gsim-account.component';
+
+describe('CreateGsimAccountComponent', () => {
+  let component: CreateGsimAccountComponent;
+  let fixture: ComponentFixture<CreateGsimAccountComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CreateGsimAccountComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateGsimAccountComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/savings/gsim-account/create-gsim-account/create-gsim-account.component.ts

@@ -0,0 +1,167 @@
+/** Angular Imports */
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+
+/** Custom Components */
+import { SavingsAccountDetailsStepComponent } from '../../savings-account-stepper/savings-account-details-step/savings-account-details-step.component';
+import { SavingsAccountTermsStepComponent } from '../../savings-account-stepper/savings-account-terms-step/savings-account-terms-step.component';
+import { SavingsAccountChargesStepComponent } from '../../savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component';
+
+/** Custom Services */
+import { SavingsService } from '../../savings.service';
+import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
+
+/**
+ * Create GSIM Account Component
+ */
+@Component({
+  selector: 'mifosx-create-gsim-account',
+  templateUrl: './create-gsim-account.component.html',
+  styleUrls: ['./create-gsim-account.component.scss']
+})
+
+export class CreateGsimAccountComponent implements OnInit {
+
+  /** Savings Account Template */
+  savingsAccountTemplate: any;
+  /** Savings Account Product Template */
+  savingsAccountProductTemplate: any;
+  /** Table Data Source */
+  dataSource: any;
+  /** Selected Members */
+  selectedMembers: any;
+
+  /** Savings Account Details Step */
+  @ViewChild(SavingsAccountDetailsStepComponent, { static: true }) savingsAccountDetailsStep: SavingsAccountDetailsStepComponent;
+  /** Savings Account Terms Step */
+  @ViewChild(SavingsAccountTermsStepComponent, { static: true }) savingsAccountTermsStep: SavingsAccountTermsStepComponent;
+  /** Savings Account Charges Step */
+  @ViewChild(SavingsAccountChargesStepComponent, { static: true }) savingsAccountChargesStep: SavingsAccountChargesStepComponent;
+
+  /**
+   * Fetches savings account template from `resolve`
+   * @param {ActivatedRoute} route Activated Route
+   * @param {Router} router Router
+   * @param {Dates} dateUtils Date Utils
+   * @param {SavingsService} savingsService Savings Service
+   * @param {SettingsService} settingsService Settings Service
+   */
+   constructor(private route: ActivatedRoute,
+              private router: Router,
+              private dateUtils: Dates,
+              private savingsService: SavingsService,
+              private settingsService: SettingsService
+              ) {
+      this.route.data.subscribe((data: { savingsAccountTemplate: any, groupsData: any }) => {
+      this.savingsAccountTemplate = data.savingsAccountTemplate;
+      this.dataSource = data.groupsData.activeClientMembers;
+    });
+  }
+
+  ngOnInit(): void {
+  }
+
+  /**
+   * Sets savings account product template.
+   * @param {any} $event API response
+   */
+   setTemplate($event: any) {
+    this.savingsAccountProductTemplate = $event;
+  }
+
+  /**
+   * Retrieves savings account details form.
+   */
+  get savingsAccountDetailsForm() {
+    return this.savingsAccountDetailsStep.savingsAccountDetailsForm;
+  }
+
+  /**
+   * Retrieves savings account terms form.
+   */
+  get savingsAccountTermsForm() {
+    return this.savingsAccountTermsStep.savingsAccountTermsForm;
+  }
+
+  /**
+   * Retrieves savings account terms form.
+   */
+   get activeClientMembers() {
+    return this.dataSource;
+  }
+
+  /**
+   * Checks validity of overall savings account form.
+   */
+  get savingsAccountFormValid() {
+    return (
+      this.savingsAccountDetailsForm.valid &&
+      this.savingsAccountTermsForm.valid
+    );
+  }
+
+  /**
+   * Retrieves savings account object.
+   */
+  get savingsAccount() {
+    this.selectedMembers = this.savingsAccountChargesStep.selectedClientMembers;
+    return {
+      ...this.savingsAccountDetailsStep.savingsAccountDetails,
+      ...this.savingsAccountTermsStep.savingsAccountTerms,
+      ...this.savingsAccountChargesStep.savingsAccountCharges
+    };
+  }
+
+  /** Set Body for each client selected */
+  setData(client: any): any {
+    const locale = this.settingsService.language.code;
+    const dateFormat = this.settingsService.dateFormat;
+    const monthDayFormat = 'dd MMMM';
+    const data = {
+      ...this.savingsAccount,
+      charges: this.savingsAccount.charges.map((charge: any) => ({
+        chargeId: charge.id,
+        amount: charge.amount,
+      })),
+      clientId: client.id,
+      isGSIM: true,
+      isParentAccount: true,
+      submittedOnDate: this.dateUtils.formatDate(this.savingsAccount.submittedOnDate, dateFormat),
+      dateFormat,
+      monthDayFormat,
+      locale
+    };
+    data.groupId = this.savingsAccountTemplate.groupId;
+
+    return data;
+
+  }
+
+  /** Request Body Data */
+  buildRequestData(): any[] {
+    const requestData = [];
+    const memberSelected = this.selectedMembers.selectedMembers;
+    for (let index = 0; index < 1; index++) {
+      console.log(index);
+      requestData.push(
+        this.setData( memberSelected[ index ] ),
+      );
+    }
+    return requestData;
+  }
+
+  /**
+   * Creates a new GSIM account.
+   */
+  submit() {
+    const data = this.buildRequestData();
+    const gsimData = {
+      clientArray: data,
+    };
+    this.savingsService.createGsimAcccount(gsimData).subscribe((response: any) => {
+      this.router.navigate(['../', response.resourceId], { relativeTo: this.route });
+    });
+  }
+
+}

src/app/savings/gsim-account/gsim-account.component.html

@@ -0,0 +1,66 @@
+<div class="tab-container mat-typography">
+
+    <div style="margin-top: 5px;">
+  
+      <h2> GSIM Account Overview</h2>
+  
+      <table mat-table [dataSource]="dataSource">
+  
+        <ng-container matColumnDef="clientDetails">
+          <th mat-header-cell *matHeaderCellDef> Client Details </th>
+          <td mat-cell *matCellDef="let element">
+            {{element.displayName}} </td>
+        </ng-container>
+  
+        <ng-container matColumnDef="savingsAccount">
+          <th mat-header-cell *matHeaderCellDef> Saving Account </th>
+          <td mat-cell *matCellDef="let element"><i class="fa fa-stop" [ngClass]="element.status.code|statusLookup" [matTooltip]="element.status.value"></i> {{element.accountNo}} </td>
+        </ng-container>
+  
+        <ng-container matColumnDef="products">
+          <th mat-header-cell *matHeaderCellDef> Products </th>
+          <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
+        </ng-container>
+  
+        <ng-container matColumnDef="balance">
+          <th mat-header-cell *matHeaderCellDef> Balance </th>
+          <td mat-cell *matCellDef="let element" >  </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"
+              (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Deposit']">
+              <i class="fa fa-arrow-up" matTooltip="Deposit"></i>
+            </button>
+            <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary"
+              (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Withdrawal']">
+              <i class="fa fa-arrow-down" matTooltip="Withdraw"></i>
+            </button>
+            <button *ngIf="element.status.submittedAndPendingApproval" class="account-action-button" mat-raised-button color="primary"
+              (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Approve']">
+              <i class="fa fa-check" matTooltip="Approve"></i>
+            </button>
+            <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
+              class="account-action-button" mat-raised-button color="primary"
+              (click)="routeEdit($event)" [routerLink]="['../../../','savings-accounts', element.id, 'actions', 'Undo Approval']">
+              <i class="fa fa-undo" matTooltip="Undo Approval"></i>
+            </button>
+            <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
+              class="account-action-button" mat-raised-button color="primary"
+              (click)="routeEdit($event)" [routerLink]="['../../', element.id, 'actions', 'Activate']">
+              <i class="fa fa-check-circle" matTooltip="Activate"></i>
+            </button>
+          </td>
+        </ng-container>
+  
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row  [routerLink]="['../../', row.id, 'transactions']" *matRowDef="let row; columns: displayedColumns;"></tr>
+  
+      </table>
+  
+      <mat-paginator [pageSizeOptions]="[10, 20, 25]" showFirstLastButtons></mat-paginator>
+  
+  </div>
+  

src/app/savings/gsim-account/gsim-account.component.scss

@@ -0,0 +1,33 @@
+.tab-container {
+    padding: 1%;
+    margin: 1%;
+    h3 {
+      margin:1% auto;
+    }
+    .group-details-container {
+      border: 1px solid;
+      padding: 1%;
+    }
+    .action-button{
+      margin-left: auto;
+    }
+    table {
+      width: 100%;
+      .account-action-button{
+        min-width: 26px;
+        padding: 0 6px;
+        margin: 4px;
+        line-height: 25px;
+      }
+      tr.select-row:hover {
+        cursor: pointer;
+      }
+    }
+    i:hover {
+      cursor: pointer;
+    }
+    tr:hover {
+      cursor: pointer;
+    }
+  }
+  

src/app/savings/gsim-account/gsim-account.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GsimAccountComponent } from './gsim-account.component';
+
+describe('GsimAccountComponent', () => {
+  let component: GsimAccountComponent;
+  let fixture: ComponentFixture<GsimAccountComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GsimAccountComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GsimAccountComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/savings/gsim-account/gsim-account.component.ts

@@ -0,0 +1,68 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+import { ActivatedRoute } from '@angular/router';
+
+/**
+ * GSIM Accounts Overview component.
+ */
+@Component({
+  selector: 'mifosx-gsim-account',
+  templateUrl: './gsim-account.component.html',
+  styleUrls: ['./gsim-account.component.scss']
+})
+export class GsimAccountComponent implements OnInit {
+
+  /** Columns to be displayed in charge overview table. */
+  displayedColumns: string[] = ['clientDetails', 'savingsAccount', 'products', 'balance', 'Actions'];
+  /** Data source for charge overview table. */
+  dataSource: MatTableDataSource<any>;
+  /** Charge Overview data */
+  gsimOverviewData: any;
+
+  savingAccountData: any;
+
+  groupsData: any;
+
+  /** Paginator for charge overview table. */
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+
+  /**
+   * Retrieves the charge overview data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {MatDialog} dialog Dialog reference.
+   */
+   constructor(private route: ActivatedRoute,
+               public dialog: MatDialog) {
+      this.route.data.subscribe((data: { gsimData: any, savingAccountData: any, groupsData: any }) => {
+      this.gsimOverviewData = data.gsimData[0].childGSIMAccounts;
+      this.savingAccountData = data.savingAccountData;
+      this.groupsData = data.groupsData;
+      console.log(data);
+    });
+  }
+
+  ngOnInit(): void {
+    this.setLoanClientChargeOverview();
+  }
+
+  /**
+   * Set Client Charge Overview.
+   */
+   setLoanClientChargeOverview() {
+    this.dataSource = new MatTableDataSource(this.gsimOverviewData);
+    console.log(this.dataSource);
+    console.log(this.gsimOverviewData);
+    // this.dataSource.paginator = this.paginator;
+  }
+
+  /**
+   * Stops the propagation to view pages.
+   * @param $event Mouse Event
+   */
+   routeEdit($event: MouseEvent) {
+    $event.stopPropagation();
+  }
+
+}

src/app/savings/gsim-account/gsim-account.resolver.ts

@@ -0,0 +1,33 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { SavingsService } from '../savings.service';
+
+/**
+ * GSIM Account data resolver.
+ */
+@Injectable()
+export class GSIMViewResolver implements Resolve<Object> {
+
+  /**
+   * @param {SavingsService} savingsService Savings service.
+   */
+  constructor(private savingsService: SavingsService) { }
+
+  /**
+   * Returns the Savings Account data.
+   * @param {ActivatedRouteSnapshot} route Route Snapshot
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const groupId = route.paramMap.get('groupId');
+    const savingAccountId = route.paramMap.get('savingAccountId');
+    return this.savingsService.getGSIMAccountData(savingAccountId, groupId);
+  }
+
+}

src/app/savings/savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component.html

@@ -98,6 +98,38 @@
 
   </table>
 
+  <div fxFlex="98%" *ngIf="activeClientMembers">
+    <table fxFlex="98%" mat-table [dataSource]="dataSource">
+
+      <!-- Check Column -->
+      <ng-container matColumnDef="check">
+          <th mat-header-cell *matHeaderCellDef>
+              <mat-checkbox (change)="toggleSelects()" [(ngModel)]="selectAllItems"></mat-checkbox>
+          </th>
+          <td mat-cell *matCellDef="let element">
+              <mat-checkbox (change)="toggleSelect()" [(ngModel)]="element.selected"></mat-checkbox>
+          </td>
+      </ng-container>
+  
+      <!-- Position Column -->
+      <ng-container matColumnDef="id">
+        <th mat-header-cell *matHeaderCellDef> Client ID </th>
+        <td mat-cell *matCellDef="let element"> {{element.id}} </td>
+      </ng-container>
+  
+      <!-- Name Column -->
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> Client Name </th>
+        <td mat-cell *matCellDef="let element"> {{element.displayName}} </td>
+      </ng-container>
+  
+  
+      <tr mat-header-row *matHeaderRowDef="displayedColumn"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumn;"></tr>
+    </table>
+  </div>
+  
+
 </div>
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">

src/app/savings/savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component.ts

@@ -11,6 +11,7 @@ import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-
 import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
 import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
 import { Dates } from 'app/core/utils/dates';
+import { MatTableDataSource } from '@angular/material/table';
 
 /**
  * Savings Account Charges Step
@@ -28,6 +29,8 @@ export class SavingsAccountChargesStepComponent implements OnInit, OnChanges {
   @Input() savingsAccountTemplate: any;
   /** Currency Code */
   @Input() currencyCode: FormControl;
+  /** active Client Members in case of GSIM Account */
+  @Input() activeClientMembers?: any;
 
   /** Charge Data */
   chargeData: any = [];
@@ -39,6 +42,15 @@ export class SavingsAccountChargesStepComponent implements OnInit, OnChanges {
   isChargesPatched = false;
   /** Display columns for charges table */
   displayedColumns: string[] = ['name', 'chargeCalculationType', 'amount', 'chargeTimeType', 'date', 'repaymentsEvery', 'action'];
+  /** Table Data Source */
+  dataSource: any;
+  /** Check for select all the Clients List */
+  selectAllItems = false;
+  /** Loan Purpose Options */
+  loanPurposeOptions: string[] = [];
+  /** Table Displayed Columns */
+  displayedColumn: string[] = ['check', 'id', 'name'];
+
 
   /**
    * @param {MatDialog} dialog Mat Dialog
@@ -54,6 +66,7 @@ export class SavingsAccountChargesStepComponent implements OnInit, OnChanges {
       } else {
         this.chargesDataSource = [];
       }
+      this.dataSource = new MatTableDataSource<any>(this.activeClientMembers);
     });
    }
 
@@ -191,4 +204,21 @@ export class SavingsAccountChargesStepComponent implements OnInit, OnChanges {
     return { charges: this.chargesDataSource };
   }
 
+  get selectedClientMembers() {
+    return { selectedMembers: this.activeClientMembers.filter( (item: any) => item.selected ) };
+  }
+
+  /** Toggle all checks */
+  toggleSelects() {
+    for (const member of this.activeClientMembers) {
+      member.selected = this.selectAllItems;
+    }
+  }
+
+  /** Check if all the checks are selected */
+  toggleSelect() {
+    const len = this.activeClientMembers.length;
+    this.selectAllItems = len === 0 ? false : this.activeClientMembers.filter( (item: any) => item.selected ).length === len;
+  }
+
 }

src/app/savings/savings-routing.module.ts

@@ -19,6 +19,8 @@ import { ViewChargeComponent } from './savings-account-view/view-charge/view-cha
 import { ViewRecieptComponent } from './savings-account-view/transactions/view-reciept/view-reciept.component';
 import { ExportTransactionsComponent } from './savings-account-view/transactions-tab/export-transactions/export-transactions.component';
 import { EditTransactionComponent } from './savings-account-view/transactions/edit-transaction/edit-transaction.component';
+import { CreateGsimAccountComponent } from './gsim-account/create-gsim-account/create-gsim-account.component';
+import { GsimAccountComponent } from './gsim-account/gsim-account.component';
 
 /** Custom Resolvers */
 import { SavingsAccountViewResolver } from './common-resolvers/savings-account-view.resolver';
@@ -31,7 +33,10 @@ import { SavingsAccountChargeResolver } from './common-resolvers/savings-account
 import { SavingsAccountActionsResolver } from './common-resolvers/savings-account-actions.resolver';
 import { SavingsTransactionRecieptResolver } from './common-resolvers/savings-transaction-reciept.resolver';
 import { SavingsAccountTransactionTemplateResolver } from './common-resolvers/savings-account-transaction-template.resolver';
-
+import { GSIMAccountsResolver } from 'app/groups/common-resolvers/gsim-account-resolver';
+import { GroupAccountsResolver } from 'app/groups/common-resolvers/group-account.resolver';
+import { GSIMViewResolver } from './gsim-account/gsim-account.resolver';
+import { GroupViewResolver } from 'app/groups/common-resolvers/group-view.resolver';
 /** Savings Routes */
 const routes: Routes = [
   {
@@ -184,6 +189,35 @@ const routes: Routes = [
             loadChildren: () => import('../account-transfers/account-transfers.module').then(m => m.AccountTransfersModule)
           }
         ]
+      },
+      {
+        path: 'gsim-account',
+        children: [
+          {
+            path: 'create',
+            data: { title: extract('Create GSIM Application'), breadcrumb: 'Create GSIM Application'},
+            component: CreateGsimAccountComponent,
+            resolve: {
+              groupsData: GroupViewResolver,
+              savingsAccountTemplate: SavingsAccountTemplateResolver
+            },
+          },
+          {
+            path: ':savingAccountId',
+            data: { title: extract('GSIM Account View'), routeParamBreadcrumb: 'savingAccountId'},
+            children: [
+              {
+                path: '',
+                component: GsimAccountComponent,
+                resolve: {
+                  gsimData: GSIMViewResolver,
+                  savingAccountData: SavingsAccountViewResolver,
+                  groupsData: GroupAccountsResolver
+                },
+              },
+            ]
+          },
+        ]
       }
     ]
   },
@@ -201,6 +235,9 @@ const routes: Routes = [
               SavingsAccountChargeResolver,
               SavingsAccountActionsResolver,
               SavingsTransactionRecieptResolver,
-              SavingsAccountTransactionTemplateResolver]
+              SavingsAccountTransactionTemplateResolver,
+              GSIMAccountsResolver,
+              GroupAccountsResolver,
+              GSIMViewResolver]
 })
 export class SavingsRoutingModule {}

src/app/savings/savings.module.ts

@@ -45,6 +45,8 @@ import { ViewRecieptComponent } from './savings-account-view/transactions/view-r
 import { ExportTransactionsComponent } from './savings-account-view/transactions-tab/export-transactions/export-transactions.component';
 import { EditTransactionComponent } from './savings-account-view/transactions/edit-transaction/edit-transaction.component';
 import { ApplyAnnualFeesSavingsAccountComponent } from './saving-account-actions/apply-annual-fees-savings-account/apply-annual-fees-savings-account.component';
+import { GsimAccountComponent } from './gsim-account/gsim-account.component';
+import { CreateGsimAccountComponent } from './gsim-account/create-gsim-account/create-gsim-account.component';
 
 
 /**
@@ -96,7 +98,9 @@ import { ApplyAnnualFeesSavingsAccountComponent } from './saving-account-actions
     ViewRecieptComponent,
     ExportTransactionsComponent,
     EditTransactionComponent,
-    ApplyAnnualFeesSavingsAccountComponent
+    ApplyAnnualFeesSavingsAccountComponent,
+    GsimAccountComponent,
+    CreateGsimAccountComponent
   ],
   providers: [ ]
 })

src/app/savings/savings.service.ts

@@ -269,4 +269,21 @@ export class SavingsService {
     return this.http.delete(`/savingsaccounts/${accountId}/charges/${chargeId}`);
   }
 
+  /**
+   * @param savingAccountId GSIM Account Id of account to get data for.
+   * @returns {Observable<any>} Savings data.
+   */
+   getGSIMAccountData(savingAccountId: string, groupId: string): Observable<any> {
+    const httpParams = new HttpParams().set('parentGSIMAccountNo', savingAccountId );
+    return this.http.get(`/groups/${groupId}/gsimaccounts`, { params: httpParams });
+  }
+
+  /**
+   * @param {any} gsimData GSIM Account Data
+   * @returns {Observable<any>}
+   */
+  createGsimAcccount(gsimData: any): Observable<any> {
+    return this.http.post(`/savingsaccounts/gsim`, gsimData);
+  }
+
 }