Merge pull request #1510 from ramvr1256/glim

feat:glim and gsim account create and view

src/app/groups/common-resolvers/glim-account-resolver.ts

@@ -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 { GroupsService } from '../groups.service';
+
+/**
+ * GLIM Loans Accounts data resolver.
+ */
+@Injectable()
+export class GLIMAccountsResolver implements Resolve<Object> {
+
+  /**
+   * @param {GroupsService} groupsService Groups service.
+   */
+  constructor(private groupsService: GroupsService) { }
+
+  /**
+   * Returns the Group's GLIM Loans Acccounts data.
+   * @param {ActivatedRouteSnapshot} route Route Snapshot.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const groupId = route.parent.paramMap.get('groupId');
+    return this.groupsService.getGLIMAccountsData(groupId);
+  }
+
+}

src/app/groups/common-resolvers/gsim-account-resolver.ts

@@ -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 { GroupsService } from '../groups.service';
+
+/**
+ * GSIM Accounts data resolver.
+ */
+@Injectable()
+export class GSIMAccountsResolver implements Resolve<Object> {
+
+  /**
+   * @param {GroupsService} groupsService Groups service.
+   */
+  constructor(private groupsService: GroupsService) { }
+
+  /**
+   * Returns the Group's GSIM Acccounts data.
+   * @param {ActivatedRouteSnapshot} route Route Snapshot.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const groupId = route.parent.paramMap.get('groupId');
+    return this.groupsService.getGSIMAccountsData(groupId);
+  }
+
+}

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

@@ -30,6 +30,8 @@ import { GroupDatatablesResolver } from './common-resolvers/group-datatables.res
 import { GroupDatatableResolver } from './common-resolvers/group-datatable.resolver';
 import { GroupDataAndTemplateResolver } from './common-resolvers/group-data-and-template.resolver';
 import { GroupActionsResolver } from './common-resolvers/group-actions.resolver';
+import { GLIMAccountsResolver } from './common-resolvers/glim-account-resolver';
+import { GSIMAccountsResolver } from './common-resolvers/gsim-account-resolver';
 
 /** Groups Routes */
 const routes: Routes = [
@@ -71,7 +73,9 @@ const routes: Routes = [
                   data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false },
                   resolve: {
                     groupAccountsData: GroupAccountsResolver,
-                    groupSummary: GroupSummaryResolver
+                    groupSummary: GroupSummaryResolver,
+                    gsimData: GSIMAccountsResolver,
+                    glimData: GLIMAccountsResolver
                   }
                 },
                 {
@@ -166,6 +170,8 @@ const routes: Routes = [
               GroupDatatablesResolver,
               GroupDatatableResolver,
               GroupDataAndTemplateResolver,
-              GroupActionsResolver]
+              GroupActionsResolver,
+              GSIMAccountsResolver,
+              GLIMAccountsResolver]
 })
 export class GroupsRoutingModule { }

src/app/groups/groups-view/general-tab/general-tab.component.html

@@ -193,6 +193,96 @@
 
   </div>
 
+  <div *ngIf="gsimAccounts">
+
+    <div fxLayout="row" fxLayoutAlign="start" class="table-header">
+      <div class="m-b-10">
+        <h3>GSIM Account Overview</h3>
+      </div>
+    </div>
+
+    <!-- GSIM Accounts Table -->
+    <table mat-table [dataSource]="gsimAccounts"
+      class="mat-elevation-z1 m-b-30">
+
+      <ng-container matColumnDef="GSIM Id">
+        <th mat-header-cell *matHeaderCellDef> GSIM Id </th>
+        <td mat-cell *matCellDef="let element">
+          {{element.gsimId}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Account Number">
+        <th mat-header-cell *matHeaderCellDef> Account Number </th>
+        <td mat-cell *matCellDef="let element"> {{element.accountNumber}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Product">
+        <th mat-header-cell *matHeaderCellDef> Product </th>
+        <td mat-cell *matCellDef="let element"> {{element.childGSIMAccounts[0].productName}}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="Balance">
+        <th mat-header-cell *matHeaderCellDef> Balance </th>
+        <td mat-cell *matCellDef="let element"> {{element.parentBalance}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Status">
+        <th mat-header-cell *matHeaderCellDef> Status </th>
+        <td mat-cell *matCellDef="let element"> {{element.savingsStatus}} </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="gsimAccountsColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: gsimAccountsColumns;" [routerLink]="['../', 'savings-accounts', 'gsim-account', row.accountNumber]"></tr>
+
+    </table>
+
+  </div>
+
+  <div *ngIf="glimAccounts">
+
+    <div fxLayout="row" fxLayoutAlign="start" class="table-header">
+      <div class="m-b-10">
+        <h3>GLIM Loans Account Overview</h3>
+      </div>
+    </div>
+
+    <!-- GLIM Loans Accounts Table -->
+    <table mat-table [dataSource]="glimAccounts"
+      class="mat-elevation-z1 m-b-30">
+
+      <ng-container matColumnDef="GLIM Id">
+        <th mat-header-cell *matHeaderCellDef> GLIM Id </th>
+        <td mat-cell *matCellDef="let element"> 
+          {{element.glimId}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Account Number">
+        <th mat-header-cell *matHeaderCellDef> Account Number </th>
+        <td mat-cell *matCellDef="let element"> {{element.accountNumber}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Product">
+        <th mat-header-cell *matHeaderCellDef> Product </th>
+        <td mat-cell *matCellDef="let element"> {{element.childGLIMAccounts[0].productName}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Original Loan">
+        <th mat-header-cell *matHeaderCellDef> Original Loan </th>
+        <td mat-cell *matCellDef="let element"> {{element.parentPrincipalAmount}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Status">
+        <th mat-header-cell *matHeaderCellDef> Status </th>
+        <td mat-cell *matCellDef="let element">{{element.loanStatus}} </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="glimAccountsColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: glimAccountsColumns;" [routerLink]="['../', 'loans-accounts', 'glim-account', row.glimId]"></tr>
+
+    </table>
+
+  </div>
+
   <div *ngIf="savingAccounts">
 
     <div fxLayout="row" fxLayoutAlign="start" class="table-header">

src/app/groups/groups-view/general-tab/general-tab.component.scss

@@ -26,4 +26,7 @@
   i:hover {
     cursor: pointer;
   }
+  tr:hover {
+    cursor: pointer;
+  }
 }

src/app/groups/groups-view/general-tab/general-tab.component.ts

@@ -18,6 +18,10 @@ export class GeneralTabComponent {
   loanAccounts: any;
   /** Group's savings accounts data */
   savingAccounts: any;
+  /** GSIM Accounts */
+  gsimAccounts: any;
+  /** GLIM Accounts */
+  glimAccounts: any;
   /** Group Summary */
   groupSummary: any;
   /** Group's Client Members */
@@ -32,6 +36,10 @@ export class GeneralTabComponent {
   openSavingsColumns: string[] = ['Account No', 'Saving Account', 'Last Active', 'Balance', 'Actions'];
   /** Columns to be displayed for closed accounts table */
   closedSavingsColumns: string[] = ['Account No', 'Saving Account', 'Closed Date'];
+  /** Columns to be displayed for GSIM Accounts Table */
+  gsimAccountsColumns: string[] = ['GSIM Id', 'Account Number', 'Product', 'Balance', 'Status'];
+  /** Columns to be displayed for GLIM Accounts Table */
+  glimAccountsColumns: string[] = ['GLIM Id', 'Account Number', 'Product', 'Original Loan', 'Status'];
   /** Boolean for toggling loan accounts table */
   showClosedLoanAccounts = false;
   /** Boolean for toggling savings accounts table */
@@ -42,7 +50,9 @@ export class GeneralTabComponent {
    * @param {ActivatedRoute} route Activated Route.
    */
   constructor(private route: ActivatedRoute) {
-    this.route.data.subscribe((data: { groupAccountsData: any, groupClientMembers: any, groupSummary: any }) => {
+    this.route.data.subscribe((data: { groupAccountsData: any, groupClientMembers: any, groupSummary: any, glimData: any, gsimData: any }) => {
+      this.glimAccounts = data.glimData;
+      this.gsimAccounts = data.gsimData;
       this.groupAccountData = data.groupAccountsData;
       this.savingAccounts = data.groupAccountsData.savingsAccounts;
       this.loanAccounts = data.groupAccountsData.loanAccounts;

src/app/groups/groups-view/groups-view.component.html

@@ -73,6 +73,8 @@
             <button mat-menu-item *mifosxHasPermission="'CREATE_LOAN'">Bulk JLG Loan Application</button></span>
           <button mat-menu-item *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'" [routerLink]="['savings-accounts', 'create']">Group Saving Application</button>
           <button mat-menu-item *mifosxHasPermission="'CREATE_LOAN'" [routerLink]="['loans-accounts', 'create']">Group Loan Application</button>
+          <button mat-menu-item  [routerLink]="['loans-accounts', 'glim-account', 'create']">GLIM Loan Application</button>
+          <button mat-menu-item  [routerLink]="['savings-accounts', 'gsim-account' , 'create']"> GSIM Application </button>
         </mat-menu>
 
         <button mat-raised-button [matMenuTriggerFor]="More">More</button>

src/app/groups/groups.service.ts

@@ -312,4 +312,20 @@ export class GroupsService {
     return this.http.get('/groups/template', { params: httpParams });
   }
 
+  /**
+   * @param groupId Group Id of group to get data for.
+   * @returns {Observable<any>} Group GLIM Accounts data.
+   */
+   getGLIMAccountsData(groupId: string): Observable<any> {
+    return this.http.get(`/groups/${groupId}/glimaccounts`);
+  }
+
+  /**
+   * @param groupId Group Id of group to get data for.
+   * @returns {Observable<any>} Group GSIM Accounts data.
+   */
+   getGSIMAccountsData(groupId: string): Observable<any> {
+    return this.http.get(`/groups/${groupId}/gsimaccounts`);
+  }
+
 }

src/app/loans/common-resolvers/glim-loan-template.resolver.ts

@@ -0,0 +1,29 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { LoansService } from '../loans.service';
+
+/**
+ * GLIM Loan template data resolver.
+ */
+@Injectable()
+export class GLIMLoanTemplateResolver implements Resolve<Object> {
+    /**
+     * @param {ProductsService} loansService Loan service.
+     */
+    constructor(private loansService: LoansService) { }
+
+    /**
+     * Returns the loan account template data.
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+        const groupId = route.parent.parent.paramMap.get('groupId');
+        return this.loansService.getGLIMLoanAccountTemplate(groupId);
+    }
+}

src/app/loans/glim-account/create-glim-account/create-glim-account.component.html

@@ -0,0 +1,68 @@
+<div class="container">
+
+  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #loansAccountStepper>
+    <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]="loansAccountDetailsForm">
+
+      <ng-template matStepLabel>DETAILS</ng-template>
+
+      <mifosx-glim-details-step [loansAccountTemplate]="loansAccountTemplate"
+        (loansAccountProductTemplate)="setTemplate($event)" [gsimData]="gsimData">
+      </mifosx-glim-details-step>
+
+    </mat-step>
+
+    <mat-step [stepControl]="loansAccountTermsForm">
+
+      <ng-template matStepLabel>TERMS</ng-template>
+
+      <mifosx-glim-terms-step [loansAccountProductTemplate]="loansAccountProductTemplate"
+      [loansAccountTemplate] = "loansAccountTemplate">
+      </mifosx-glim-terms-step>
+
+    </mat-step>
+
+    <mat-step>
+
+      <ng-template matStepLabel>CHARGES</ng-template>
+
+      <mifosx-glim-charges-step [loansAccountProductTemplate]="loansAccountProductTemplate"
+        [loansAccountTemplate]="loansAccountTemplate"
+          [activeClientMembers]="activeClientMembers"
+        >
+      </mifosx-glim-charges-step>
+
+    </mat-step>
+
+    <mat-step state="preview" *ngIf="loansAccountFormValid" completed>
+
+      <ng-template matStepLabel>PREVIEW</ng-template>
+
+      <mifosx-loans-account-preview-step [loansAccountTemplate]="loansAccountTemplate"
+        [loansAccountProductTemplate]="loansAccountProductTemplate" [loansAccount]="loansAccount" (submit)="submit()">
+      </mifosx-loans-account-preview-step>
+
+    </mat-step>
+
+  </mat-horizontal-stepper>
+
+</div>

src/app/loans/glim-account/create-glim-account/create-glim-account.component.spec.ts

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

src/app/loans/glim-account/create-glim-account/create-glim-account.component.ts

@@ -0,0 +1,185 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Dates } from 'app/core/utils/dates';
+import { LoansService } from 'app/loans/loans.service';
+import { SettingsService } from 'app/settings/settings.service';
+import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
+import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
+import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
+import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
+import { GlimChargesStepComponent } from './glim-account-stepper/glim-charges-step/glim-charges-step.component';
+import { GlimDetailsStepComponent } from './glim-account-stepper/glim-details-step/glim-details-step.component';
+import { GlimTermsStepComponent } from './glim-account-stepper/glim-terms-step/glim-terms-step.component';
+
+@Component({
+  selector: 'mifosx-create-glim-account',
+  templateUrl: './create-glim-account.component.html',
+  styleUrls: ['./create-glim-account.component.scss']
+})
+export class CreateGlimAccountComponent implements OnInit {
+
+  /** Imports all the step component */
+  @ViewChild(GlimDetailsStepComponent, { static: true }) loansAccountDetailsStep: GlimDetailsStepComponent;
+  @ViewChild(GlimTermsStepComponent, { static: true }) loansAccountTermsStep: GlimTermsStepComponent;
+  @ViewChild(GlimChargesStepComponent, { static: true }) loansAccountChargesStep: GlimChargesStepComponent;
+
+  /** Loans Account Template */
+  loansAccountTemplate: any;
+  /** Loans Account Product Template */
+  loansAccountProductTemplate: any;
+  /** Collateral Options */
+  collateralOptions: any;
+  /** Multi Disburse Loan */
+  multiDisburseLoan: any;
+  /** Principal Amount */
+  principal: any;
+
+  accountLinkingOptions: any;
+
+  totalLoan: any;
+
+  /** Table Data Source */
+  dataSource: any;
+  /** Selected Members */
+  selectedMembers: any;
+  /** Selected Members */
+  activeClientMembers: any;
+  gsimData: any;
+  /**
+   * Sets loans account details form.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {LoansService} loansService Loans Service.
+   * @param {SettingsService} settingsService SettingsService
+   */
+  constructor(private route: ActivatedRoute,
+    private router: Router,
+    private loansService: LoansService,
+    private settingsService: SettingsService,
+    public dialog: MatDialog,
+    private dateUtils: Dates) {
+    this.route.data.subscribe((data: {loansAccountTemplate: any, gsimData: any, groupsData: any}) => {
+      this.loansAccountTemplate = data.loansAccountTemplate;
+      this.activeClientMembers = data.groupsData.activeClientMembers;
+      this.gsimData = data.gsimData;
+    });
+   }
+
+  ngOnInit(): void {
+  }
+
+  /**
+   * Sets loans account product template and collateral template
+   * @param {any} $event API response
+   */
+   setTemplate($event: any) {
+    this.loansAccountProductTemplate = $event;
+  }
+
+  /** Get Loans Account Details Form Data */
+  get loansAccountDetailsForm() {
+    return this.loansAccountDetailsStep.loansAccountDetailsForm;
+  }
+
+  /** Get Loans Account Terms Form Data */
+  get loansAccountTermsForm() {
+    return this.loansAccountTermsStep.loansAccountTermsForm;
+  }
+
+  /** Checks wheter all the forms in different steps are valid or not */
+  get loansAccountFormValid() {
+    return (
+      this.loansAccountDetailsForm.valid &&
+      this.loansAccountTermsForm.valid
+    );
+  }
+
+  /** Gets principal Amount */
+  get loanPrincipal() {
+    return this.loansAccountTermsStep.loansAccountTermsForm.value.principal;
+  }
+
+  /** Retrieves Data of all forms except Currency to submit the data */
+  get loansAccount() {
+    this.selectedMembers = this.loansAccountChargesStep.selectedClientMembers;
+    return {
+      ...this.loansAccountDetailsStep.loansAccountDetails,
+      ...this.loansAccountTermsStep.loansAccountTerms,
+      ...this.loansAccountChargesStep.loansAccountCharges,
+    };
+  }
+
+
+
+  setData(client: any): any {
+    const locale = this.settingsService.language.code;
+    const dateFormat = this.settingsService.dateFormat;
+    // const monthDayFormat = 'dd MMMM';
+    const data = {
+      ...this.loansAccount,
+      charges: this.loansAccount.charges.map((charge: any) => ({
+        chargeId: charge.id,
+        amount: charge.amount,
+      })),
+      clientId: client.id,
+      totalLoan: this.totalLoan,
+      loanType: 'glim',
+      amortizationType:	1,
+      isParentAccount: true,
+      principal: client.principal,
+      syncDisbursementWithMeeting: false,
+      expectedDisbursementDate: this.dateUtils.formatDate(this.loansAccount.expectedDisbursementDate, dateFormat),
+      submittedOnDate: this.dateUtils.formatDate(this.loansAccount.submittedOnDate, dateFormat),
+      dateFormat,
+      // monthDayFormat,
+      locale
+    };
+    data.groupId = this.loansAccountTemplate.group.id;
+
+    return JSON.stringify(data);
+
+  }
+
+  /** Request Body Data */
+  buildRequestData(): any[] {
+    const requestData = [];
+    const memberSelected = this.selectedMembers.selectedMembers;
+    this.totalLoanAmount();
+    for (let index = 0; index < memberSelected.length; index++) {
+      console.log(memberSelected);
+      requestData.push({
+        requestId: index.toString(),
+        method : 'POST',
+        relativeUrl: 'loans',
+        body : this.setData( memberSelected[ index ] )
+      }
+      );
+    }
+    return requestData;
+  }
+
+  totalLoanAmount(): any {
+    let total = 0;
+    const memberSelected = this.selectedMembers.selectedMembers;
+    for (let index = 0; index < memberSelected.length; index++) {
+      total += memberSelected[index].principal;
+    }
+    console.log(total);
+    this.totalLoan = total;
+  }
+
+  /**
+   * Creates a new GSIM account.
+   */
+  submit() {
+    const data = this.buildRequestData();
+    console.log(data);
+    this.loansService.createGlimAccount(data).subscribe((response: any) => {
+      this.router.navigate(['../../../'], { relativeTo: this.route });
+    });
+  }
+
+}

src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-charges-step/glim-charges-step.component.html

@@ -0,0 +1,170 @@
+<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Charge</mat-label>
+      <mat-select #charge>
+        <mat-option *ngFor="let charge of chargeData" [value]="charge">
+          {{ charge.name }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+  
+    <div fxFlex="48%" fxFlexAlign="center">
+      <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
+        <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+        Add
+      </button>
+    </div>
+  
+    <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chargesDataSource" [hidden]="chargesDataSource.length === 0">
+  
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.name + ', ' + charge.currency.displaySymbol }}
+        </td>
+      </ng-container>
+  
+      <ng-container matColumnDef="chargeCalculationType">
+        <th mat-header-cell *matHeaderCellDef> Type </th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.chargeCalculationType.value }}
+        </td>
+      </ng-container>
+  
+      <ng-container matColumnDef="amount">
+        <th mat-header-cell *matHeaderCellDef> Amount </th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.amount }} 
+          <button mat-icon-button color="primary" (click)="editChargeAmount(charge)">
+            <fa-icon icon="pen"></fa-icon>
+          </button>
+        </td>
+      </ng-container>
+  
+      <ng-container matColumnDef="chargeTimeType">
+        <th mat-header-cell *matHeaderCellDef> Collected On </th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.chargeTimeType.value }}
+        </td>
+      </ng-container>
+  
+      <ng-container matColumnDef="date">
+        <th mat-header-cell *matHeaderCellDef> Date </th>
+        <td mat-cell *matCellDef="let charge">
+          <span *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
+            {{(charge.dueDate  | dateFormat) || 'Unassigned'}}
+          </span>
+          <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
+            {{(charge.feeOnMonthDay  | dateFormat) || 'Unassigned'}}
+          </span>
+          <span 
+            *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
+              || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
+            N/A
+          </span>
+          <button mat-icon-button color="primary"
+            *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Annual Fee'
+                    || charge.chargeTimeType.value === 'Specified due date'" 
+            (click)="editChargeDate(charge)">
+            <fa-icon icon="pen"></fa-icon>
+          </button>
+        </td>
+      </ng-container>
+  
+      <ng-container matColumnDef="repaymentsEvery">
+        <th mat-header-cell *matHeaderCellDef> Repayments Every </th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.feeInterval || 'Not Provided' }} 
+          <button mat-icon-button color="primary" 
+            *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Monthly Fee'"
+            (click)="editChargeFeeInterval(charge)">
+            <fa-icon icon="pen"></fa-icon>
+          </button>
+        </td>
+      </ng-container>
+  
+      <ng-container matColumnDef="action">
+        <th mat-header-cell *matHeaderCellDef> Actions </th>
+        <td mat-cell *matCellDef="let charge">
+          <button mat-icon-button color="warn" (click)="deleteCharge(charge)">
+            <fa-icon icon="trash"></fa-icon>
+          </button>
+        </td>
+      </ng-container>
+  
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  
+    </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>
+
+         <!-- Weight Column -->
+         <ng-container matColumnDef="purpose">
+          <th mat-header-cell *matHeaderCellDef> Loan Purpose </th>
+          <td mat-cell *matCellDef="let element">
+            <mat-form-field>
+                <mat-label>Select Purpose</mat-label>
+                <mat-select [(ngModel)]="element.loanPurposeId">
+                <mat-option *ngFor="let purpose of loanPurposeOptions" [value]="purpose.id">
+                    {{ purpose.name }}
+                </mat-option>
+                </mat-select>
+            </mat-form-field>
+          </td>
+        </ng-container>
+
+        <!-- Symbol Column -->
+        <ng-container matColumnDef="amount">
+          <th mat-header-cell *matHeaderCellDef> Original Loan </th>
+          <td mat-cell *matCellDef="let element">
+            <mat-form-field>
+                <input type="number" matInput [(ngModel)]="element.principal">
+            </mat-form-field>
+          </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%">
+    <button mat-raised-button matStepperPrevious>
+      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      Previous
+    </button>
+    <button mat-raised-button matStepperNext>
+      Next&nbsp;&nbsp;
+      <fa-icon icon="arrow-right"></fa-icon>
+    </button>
+  </div>
+  

src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-charges-step/glim-charges-step.component.spec.ts

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

src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-charges-step/glim-charges-step.component.ts

@@ -0,0 +1,207 @@
+import { Component, Input, OnInit, OnChanges } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { MatTableDataSource } from '@angular/material/table';
+import { Dates } from 'app/core/utils/dates';
+import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
+import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
+import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
+import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
+
+@Component({
+  selector: 'mifosx-glim-charges-step',
+  templateUrl: './glim-charges-step.component.html',
+  styleUrls: ['./glim-charges-step.component.scss']
+})
+export class GlimChargesStepComponent implements OnInit, OnChanges {
+
+  /** Savings Account Product Template */
+  @Input() loansAccountProductTemplate: any;
+  /** Savings Account Template */
+  @Input() loansAccountTemplate: any;
+  /** Currency Code */
+  // @Input() currencyCode: FormControl;
+  // /** active Client Members in case of GLIM Account */
+  @Input() activeClientMembers?: any;
+
+  /** Charge Data */
+  chargeData: any = [];
+  /** Charges Data Source */
+  chargesDataSource: {}[] = [];
+  /** Component is pristine if there has been no changes by user interaction */
+  pristine = true;
+  /** For Edit Savings Account Form */
+  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', 'purpose', 'amount'];
+
+  /**
+   * @param {MatDialog} dialog Mat Dialog
+   */
+  constructor(public dialog: MatDialog,
+              private dateUtils: Dates) {}
+
+   ngOnInit() {
+    this.dataSource = new MatTableDataSource<any>(this.activeClientMembers);
+   }
+
+   ngOnChanges() {
+    if (this.loansAccountProductTemplate) {
+      this.chargeData = this.loansAccountProductTemplate.chargeOptions;
+    }
+   }
+
+  /**
+   * Adds the charge to charges table
+   * @param {any} charge Charge
+   */
+  addCharge(charge: any) {
+    this.chargesDataSource = this.chargesDataSource.concat([charge.value]);
+    charge.value = '';
+    this.pristine = false;
+  }
+
+  /**
+   * Edits the Charge Amount
+   * @param {any} charge Charge
+   */
+  editChargeAmount(charge: any) {
+    const formfields: FormfieldBase[] = [
+      new InputBase({
+        controlName: 'amount',
+        label: 'Amount',
+        value: charge.amount,
+        type: 'number',
+        required: false
+      }),
+    ];
+    const data = {
+      title: 'Edit Charge Amount',
+      layout: { addButtonText: 'Confirm' },
+      formfields: formfields
+    };
+    const editNoteDialogRef = this.dialog.open(FormDialogComponent, { data });
+    editNoteDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.data) {
+        const newCharge = { ...charge, amount: response.data.value.amount };
+        this.chargesDataSource.splice(this.chargesDataSource.indexOf(charge), 1, newCharge);
+        this.chargesDataSource = this.chargesDataSource.concat([]);
+      }
+    });
+    this.pristine = false;
+  }
+
+  /**
+   * Edits the Charge Date
+   * @param {any} charge Charge
+   */
+  editChargeDate(charge: any) {
+    const formfields: FormfieldBase[] = [
+      new DatepickerBase({
+        controlName: 'date',
+        label: 'Date',
+        value: charge.dueDate || charge.feeOnMonthDay || '',
+        type: 'datetime-local',
+        required: false
+      }),
+    ];
+    const data = {
+      title: 'Edit Charge Date',
+      layout: { addButtonText: 'Confirm' },
+      formfields: formfields
+    };
+    const editNoteDialogRef = this.dialog.open(FormDialogComponent, { data });
+    editNoteDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.data) {
+        let newCharge: any;
+        const dateFormat = 'dd MMMM yyyy';
+        const date = this.dateUtils.formatDate(response.data.value.date, dateFormat);
+        switch (charge.chargeTimeType.value) {
+          case 'Specified due date':
+          case 'Weekly Fee':
+          newCharge = { ...charge, dueDate: date };
+          break;
+          case 'Annual Fee':
+          newCharge = { ...charge, feeOnMonthDay: date };
+          break;
+        }
+        this.chargesDataSource.splice(this.chargesDataSource.indexOf(charge), 1, newCharge);
+        this.chargesDataSource = this.chargesDataSource.concat([]);
+      }
+    });
+    this.pristine = false;
+  }
+
+  /**
+   * Edits the Charge Fee Interval
+   * @param {any} charge Charge
+   */
+  editChargeFeeInterval(charge: any) {
+    const formfields: FormfieldBase[] = [
+      new InputBase({
+        controlName: 'feeInterval',
+        label: 'Fee Interval',
+        value: charge.feeInterval,
+        type: 'text',
+        required: false
+      }),
+    ];
+    const data = {
+      title: 'Edit Charge Fee Interval',
+      layout: { addButtonText: 'Confirm' },
+      formfields: formfields
+    };
+    const editNoteDialogRef = this.dialog.open(FormDialogComponent, { data });
+    editNoteDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.data) {
+        const newCharge = { ...charge, feeInterval: response.data.value.feeInterval };
+        this.chargesDataSource.splice(this.chargesDataSource.indexOf(charge), 1, newCharge);
+        this.chargesDataSource = this.chargesDataSource.concat([]);
+      }
+    });
+    this.pristine = false;
+  }
+
+  /**
+   * Removes the charge from charges table
+   * @param {any} charge Charge
+   */
+  deleteCharge(charge: any) {
+    this.chargesDataSource.splice(this.chargesDataSource.indexOf(charge), 1);
+    this.chargesDataSource = this.chargesDataSource.concat([]);
+    this.pristine = false;
+  }
+
+  /**
+   * Returns loan account charges
+   */
+  get loansAccountCharges() {
+    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/loans/glim-account/create-glim-account/glim-account-stepper/glim-details-step/glim-details-step.component.html

@@ -0,0 +1,89 @@
+<form [formGroup]="loansAccountDetailsForm">
+
+    <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+  
+      <mat-form-field fxFlex="48%">
+        <mat-label>Product Name</mat-label>
+        <mat-select formControlName="productId" required>
+          <mat-option *ngFor="let product of productData" [value]="product.id">
+            {{ product.name }}
+          </mat-option>
+        </mat-select>
+        <mat-error>
+          Product Name is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+  
+      <mat-form-field fxFlex="48%">
+        <mat-label>Loan officer</mat-label>
+        <mat-select formControlName="loanOfficerId">
+          <mat-option *ngFor="let loanOfficer of loanOfficerOptions" [value]="loanOfficer.id">
+            {{ loanOfficer.displayName }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+  
+  
+      <mat-form-field fxFlex="48%">
+        <mat-label>Fund</mat-label>
+        <mat-select formControlName="fundId">
+          <mat-option *ngFor="let fund of fundOptions" [value]="fund.id">
+            {{ fund.name }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+  
+      <mat-form-field fxFlex="48%" (click)="submitPicker.open()">
+        <mat-label>Submitted on</mat-label>
+        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submitPicker" required
+          formControlName="submittedOnDate">
+        <mat-datepicker-toggle matSuffix [for]="submitPicker"></mat-datepicker-toggle>
+        <mat-datepicker #submitPicker></mat-datepicker>
+        <mat-error *ngIf="loansAccountDetailsForm.controls.submittedOnDate?.hasError('required')">
+          Submitted on is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+  
+      <mat-form-field fxFlex="48%" (click)="disbursementPicker.open()">
+        <mat-label>Disbursement on</mat-label>
+        <input matInput [min]="loansAccountDetailsForm.value.submittedOnDate" [max]="maxDate" [matDatepicker]="disbursementPicker" required
+          formControlName="expectedDisbursementDate">
+        <mat-datepicker-toggle matSuffix [for]="disbursementPicker"></mat-datepicker-toggle>
+        <mat-datepicker #disbursementPicker></mat-datepicker>
+        <mat-error *ngIf="loansAccountDetailsForm.controls.submittedOnDate?.hasError('required')">
+          Disbursement on is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+  
+      
+  
+      <mat-divider fxFlex="98%"></mat-divider>
+  
+      <h3 class="mat-h3" fxFlexFill>Savings Linkage</h3>
+  
+      <mat-form-field fxFlex="48%">
+        <mat-label>Link savings</mat-label>
+        <mat-select formControlName="linkAccountId">
+          <mat-option *ngFor="let savingaccount of gsimData" [value]="savingaccount.id">
+            {{ savingaccount.accountNumber }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+  
+      
+  
+    </div>
+  
+    <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+      <button mat-raised-button matStepperPrevious disabled>
+        <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+        Previous
+      </button>
+      <button mat-raised-button matStepperNext>
+        Next&nbsp;&nbsp;
+        <fa-icon icon="arrow-right"></fa-icon>
+      </button>
+    </div>
+  
+  </form>
+  

src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-details-step/glim-details-step.component.spec.ts

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

src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-details-step/glim-details-step.component.ts

@@ -0,0 +1,104 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { LoansService } from 'app/loans/loans.service';
+import { SettingsService } from 'app/settings/settings.service';
+
+@Component({
+  selector: 'mifosx-glim-details-step',
+  templateUrl: './glim-details-step.component.html',
+  styleUrls: ['./glim-details-step.component.scss']
+})
+export class GlimDetailsStepComponent implements OnInit {
+  /** Loans Account Template */
+  @Input() loansAccountTemplate: any;
+  @Input() gsimData: any;
+  /** Minimum date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum date allowed. */
+  maxDate = new Date(2100, 0, 1);
+  /** Product Data */
+  productData: any;
+  /** Loan Officer Data */
+  loanOfficerOptions: any;
+  /** Loan Purpose Options */
+  loanPurposeOptions: any;
+  /** Fund Options */
+  fundOptions: any;
+  /** Account Linking Options */
+  accountLinkingOptions: any;
+  /** For edit loan accounts form */
+  isFieldOfficerPatched = false;
+  /** Loans Account Details Form */
+  loansAccountDetailsForm: FormGroup;
+
+  /** Loans Account Template with product data  */
+  @Output() loansAccountProductTemplate = new EventEmitter();
+  /**
+   * Sets loans account details form.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {LoansService} loansService Loans Service.
+   * @param {SettingsService} settingsService SettingsService
+   */
+   constructor(private formBuilder: FormBuilder,
+    private loansService: LoansService,
+    private settingsService: SettingsService) {
+    this.createLoansAccountDetailsForm();
+  }
+
+  ngOnInit(): void {
+    this.maxDate = this.settingsService.businessDate;
+    this.buildDependencies();
+    if (this.loansAccountTemplate) {
+      this.productData = this.loansAccountTemplate.productOptions;
+      if (this.loansAccountTemplate.loanProductId) {
+        this.loansAccountDetailsForm.patchValue({
+          'productId': this.loansAccountTemplate.loanProductId,
+          'submittedOnDate': this.loansAccountTemplate.timeline.submittedOnDate && new Date(this.loansAccountTemplate.timeline.submittedOnDate),
+          'loanOfficerId': this.loansAccountTemplate.loanOfficerId,
+          'loanPurposeId': this.loansAccountTemplate.loanPurposeId,
+          'fundId': this.loansAccountTemplate.fundId,
+          'expectedDisbursementDate': this.loansAccountTemplate.timeline.expectedDisbursementDate && new Date(this.loansAccountTemplate.timeline.expectedDisbursementDate),
+          'externalId': this.loansAccountTemplate.externalId
+        });
+      }
+    }
+  }
+
+  /**
+   * Creates glim account details form.
+   */
+   createLoansAccountDetailsForm() {
+    this.loansAccountDetailsForm = this.formBuilder.group({
+      'productId': ['', Validators.required],
+      'loanOfficerId': [''],
+      'fundId': [''],
+      'submittedOnDate': [new Date(), Validators.required],
+      'expectedDisbursementDate': ['', Validators.required],
+      'linkAccountId': [''],
+    });
+  }
+
+  /**
+   * Fetches loans account product template on productId value changes
+   */
+   buildDependencies() {
+    const groupId = this.loansAccountTemplate.group.id;
+    this.loansAccountDetailsForm.get('productId').valueChanges.subscribe((productId: string) => {
+      this.loansService.getLoansAccountTemplateResource(groupId, true, productId).subscribe((response: any) => {
+        this.loansAccountProductTemplate.emit(response);
+        this.loanOfficerOptions = response.loanOfficerOptions;
+        this.loanPurposeOptions = response.loanPurposeOptions;
+        this.fundOptions = response.fundOptions;
+        this.accountLinkingOptions = response.accountLinkingOptions;
+      });
+    });
+  }
+
+  /**
+   * Returns loans account details form value.
+   */
+  get loansAccountDetails() {
+    return this.loansAccountDetailsForm.value;
+  }
+
+}

src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-preview-step/glim-preview-step.component.html

@@ -0,0 +1,274 @@
+<div fxLayout="row wrap" fxLayout.lt-md="column">
+
+    <h3 class="mat-h3" fxFlexFill>Details</h3>
+  
+    <mat-divider fxFlexFill></mat-divider>
+  
+    <div fxFlexFill>
+      <span fxFlex="40%">Product:</span>
+      <span fxFlex="60%">{{ loansAccount.productId | find:loansAccountTemplate.productOptions:'id':'name' }}</span>
+    </div>
+  
+    <div fxFlexFill *ngIf="loansAccount.loanOfficerId">
+      <span fxFlex="40%">Loan officer:</span>
+      <span
+        fxFlex="60%">{{ loansAccount.loanOfficerId | find:loansAccountProductTemplate.loanOfficerOptions:'id':'displayName'}}</span>
+    </div>
+  
+    <div fxFlexFill *ngIf="loansAccount.loanPurposeId">
+      <span fxFlex="40%">Loan purpose:</span>
+      <span
+        fxFlex="60%">{{ loansAccount.loanPurposeId | find:loansAccountProductTemplate.loanPurposeOptions:'id':'name'}}</span>
+    </div>
+  
+    <div fxFlexFill *ngIf="loansAccount.fundId">
+      <span fxFlex="40%">Fund:</span>
+      <span fxFlex="60%">{{ loansAccount.fundId | find:loansAccountProductTemplate.fundOptions:'id':'name'}}</span>
+    </div>
+  
+    <div fxFlexFill>
+      <span fxFlex="40%">Submitted on:</span>
+      <span fxFlex="60%">{{ loansAccount.submittedOnDate  | dateFormat }}</span>
+    </div>
+  
+    <div fxFlexFill>
+      <span fxFlex="40%">Disbursement on:</span>
+      <span fxFlex="60%">{{ loansAccount.expectedDisbursementDate  | dateFormat }}</span>
+    </div>
+  
+    <div fxFlexFill *ngIf="loansAccount.externalId">
+      <span fxFlex="40%">External id:</span>
+      <span fxFlex="60%">{{ loansAccount.externalId }}</span>
+    </div>
+  
+    <h3 class="mat-h3" fxFlexFill>Terms</h3>
+  
+    <mat-divider fxFlexFill></mat-divider>
+  
+    <div fxFlexFill>
+      <span fxFlex="40%">Principal:</span>
+      <span fxFlex="60%">{{ loansAccount.principal }} {{loansAccountProductTemplate.currency.DisplaySymbol}}</span>
+    </div>
+  
+    <div fxFlexFill>
+      <span fxFlex="40%">Loan term:</span>
+      <span fxFlex="60%">{{ loansAccount.loanTermFrequency }}
+        {{loansAccount.loanTermFrequencyType | find: loansAccountProductTemplate.termFrequencyTypeOptions:'id':'name'}}</span>
+    </div>
+  
+    <div fxFlexFill>
+      <span fxFlex="40%">Number of repayments:</span>
+      <span fxFlex="60%">{{ loansAccount.numberOfRepayments }}</span>
+    </div>
+  
+    <div fxFlexFill>
+      <span fxFlex="40%">Repaid every:</span>
+      <span fxFlex="60%">{{loansAccount.repaymentEvery}}
+        {{loansAccount.repaymentFrequencyType | find: loansAccountProductTemplate.termFrequencyTypeOptions:'id':'name'}}
+        {{loansAccount.repaymentFrequencyNthDayType | find: loansAccountProductTemplate.repaymentFrequencyNthDayTypeOptions:'id': 'name'}}
+        {{loansAccount.repaymentFrequencyDayOfWeekType | find: loansAccountProductTemplate.repaymentFrequencyDaysOfWeekTypeOptions:'id': 'name'}}</span>
+    </div>
+  
+    <div fxFlexFill *ngIf="loansAccount.repaymentsStartingFromDate">
+      <span fxFlex="40%">First repayment on:</span>
+      <span fxFlex="60%">{{ loansAccount.repaymentsStartingFromDate  | dateFormat }}</span>
+    </div>
+  
+    <div fxFlexFill *ngIf="loansAccount.interestChargedFromDate">
+      <span fxFlex="40%">Interest charged from:</span>
+      <span fxFlex="60%">{{ loansAccount.interestChargedFromDate  | dateFormat }}</span>
+    </div>
+  
+    <div fxFlexFill *ngIf="loansAccount.interestRatePerPeriod">
+      <span fxFlex="40%">Nominal interest rate:</span>
+      <span
+        fxFlex="60%">{{loansAccount.interestRatePerPeriod}}&nbsp;&nbsp;{{loansAccountProductTemplate.interestRateFrequencyType.value}}</span>
+    </div>
+  
+    <div fxFlexFill *ngIf="loansAccount.interestType">
+      <span fxFlex="40%">Interest method: </span>
+      <span fxFlex="60%">{{loansAccount.interestType}}</span>
+    </div>
+  
+    <div fxFlexFill *ngIf="loansAccount.isEqualAmortization">
+      <span fxFlex="40%">Is Equal Amortization:</span>
+      <span fxFlex="60%">{{loansAccount.isEqualAmortization}}</span>
+    </div>
+  
+    <div fxFlexFill>
+      <span fxFlex="40%">Amortization</span>
+      <span
+        fxFlex="60%">{{ loansAccount.amortizationType | find:loansAccountProductTemplate.amortizationTypeOptions:'id':'value' }}</span>
+    </div>
+  
+    <div fxFlexFill>
+      <span fxFlex="40%">Interest calculation period: </span>
+      <span
+        fxFlex="60%">{{ loansAccount.interestCalculationPeriodType | find:loansAccountProductTemplate.interestCalculationPeriodTypeOptions:'id':'value'  }}</span>
+    </div>
+  
+    <div fxFlexFill *ngIf="loansAccount.allowPartialPeriodInterestCalcualtion">
+      <span fxFlex="40%">Calculate interest for exact days in partial period:</span>
+      <span fxFlex="60%">{{ loansAccount.allowPartialPeriodInterestCalcualtion }}</span>
+    </div>
+  
+    <div fxFlexFill *ngIf="loansAccount.inArrearsTolerance">
+      <span fxFlex="40%">Arrears tolerance: </span>
+      <span
+        fxFlex="60%">{{loansAccount.inArrearsTolerance}}&nbsp;{{loansAccountProductTemplate.currency.displaySymbol}}</span>
+    </div>
+  
+    <div fxFlexFill *ngIf="loansAccount.graceOnInterestCharged">
+      <span fxFlex="40%">Interest free period: </span>
+      <span fxFlex="60%">{{ loansAccount.graceOnInterestCharged }}</span>
+    </div>
+  
+    <div fxFlexFill>
+      <span fxFlex="40%">Repayment strategy: </span>
+      <span
+        fxFlex="60%">{{ loansAccount.transactionProcessingStrategyId | find:loansAccountTemplate.transactionProcessingStrategyOptions:'id':'name' }}</span>
+    </div>
+  
+    <h3 class="mat-h3" fxFlexFill>Moratorium</h3>
+  
+    <mat-divider fxFlexFill></mat-divider>
+  
+    <div fxFlexFill *ngIf="loansAccount.graceOnPrincipalPayment">
+      <span fxFlex="40%">On principal payment: </span>
+      <span fxFlex="60%">{{ loansAccount.graceOnPrincipalPayment }}</span>
+    </div>
+  
+    <div fxFlexFill *ngIf="loansAccount.graceOnInterestPayment">
+      <span fxFlex="40%">On interest payment: </span>
+      <span fxFlex="60%">{{ loansAccount.graceOnInterestPayment }}</span>
+    </div>
+  
+    <div fxFlexFill *ngIf="loansAccount.graceOnArrearsAgeing">
+      <span fxFlex="40%">On Arrears Aging: </span>
+      <span fxFlex="60%">{{ loansAccount.graceOnArrearsAgeing }}</span>
+    </div>
+  
+    <div fxFlexFill *ngIf="loansAccount.isTopup">
+      <span fxFlex="40%">Is Topup Loan? </span>
+      <span fxFlex="60%">{{ loansAccount.isTopup }}</span>
+    </div>
+  
+    <div fxFlexFill>
+      <span fxFlex="40%">Recalculate Interest: </span>
+      <span fxFlex="60%">{{ loansAccountProductTemplate?.isInterestRecalculationEnabled? 'Yes' : 'No' }}</span>
+    </div>
+  
+    <div fxFlexFill *ngIf="loansAccountProductTemplate?.daysInMonthType">
+      <span fxFlex="40%">Days in month: </span>
+      <span fxFlex="60%">{{ loansAccountProductTemplate?.daysInMonthType.value }}</span>
+    </div>
+  
+    <div fxFlexFill *ngIf="loansAccount.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
+  
+      <h3 class="mat-h3" fxFlexFill>Charges</h3>
+  
+      <mat-divider fxFlexFill></mat-divider>
+  
+      <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loansAccount.charges">
+  
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef> Name </th>
+          <td mat-cell *matCellDef="let charge">
+            {{ charge.name + ', ' + charge.currency.displaySymbol }}
+          </td>
+        </ng-container>
+  
+        <ng-container matColumnDef="chargeCalculationType">
+          <th mat-header-cell *matHeaderCellDef> Type </th>
+          <td mat-cell *matCellDef="let charge">
+            {{ charge.chargeCalculationType.value }}
+          </td>
+        </ng-container>
+  
+        <ng-container matColumnDef="amount">
+          <th mat-header-cell *matHeaderCellDef> Amount </th>
+          <td mat-cell *matCellDef="let charge">
+            {{ charge.amount }}
+          </td>
+        </ng-container>
+  
+        <ng-container matColumnDef="chargeTimeType">
+          <th mat-header-cell *matHeaderCellDef> Collected On </th>
+          <td mat-cell *matCellDef="let charge">
+            {{ charge.chargeTimeType.value }}
+          </td>
+        </ng-container>
+  
+        <ng-container matColumnDef="date">
+          <th mat-header-cell *matHeaderCellDef> Date </th>
+          <td mat-cell *matCellDef="let charge">
+            <span
+              *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
+              {{(charge.dueDate  | dateFormat) || 'Unassigned'}}
+            </span>
+            <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
+              {{(charge.feeOnMonthDay  | dateFormat) || 'Unassigned'}}
+            </span>
+            <span
+              *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
+                    || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
+              N/A
+            </span>
+          </td>
+        </ng-container>
+  
+        <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
+  
+      </table>
+  
+    </div>
+  
+    <div fxFlexFill *ngIf="loansAccountProductTemplate.overdueCharges.length" fxLayout="row wrap" fxLayout.lt-md="column">
+  
+      <h3 fxFlex="98%" class="mat-h3">Overdue Charges</h3>
+  
+      <mat-divider fxFlex="98%"></mat-divider>
+  
+      <table mat-table class="mat-elevation-z1" [dataSource]="loansAccountProductTemplate.overdueCharges">
+  
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef> Name </th>
+          <td mat-cell *matCellDef="let charge"> {{ charge.name }},{{ charge.currency.displaySymbol }} </td>
+        </ng-container>
+  
+        <ng-container matColumnDef="type">
+          <th mat-header-cell *matHeaderCellDef> Type </th>
+          <td mat-cell *matCellDef="let charge"> {{ charge.chargeCalculationType.value }} </td>
+        </ng-container>
+  
+        <ng-container matColumnDef="amount">
+          <th mat-header-cell *matHeaderCellDef> Amount </th>
+          <td mat-cell *matCellDef="let charge"> {{ charge.amount| number }} </td>
+        </ng-container>
+  
+        <ng-container matColumnDef="collectedon">
+          <th mat-header-cell *matHeaderCellDef> Collected On </th>
+          <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
+        </ng-container>
+  
+        <tr mat-header-row *matHeaderRowDef="overdueChargesDisplayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: overdueChargesDisplayedColumns;"></tr>
+      </table>
+    </div>
+  
+  </div>
+  
+  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+    <button mat-raised-button matStepperPrevious>
+      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      Previous
+    </button>
+    <button mat-raised-button [routerLink]="['../']">
+      Cancel
+    </button>
+    <button mat-raised-button color="primary" (click)="submit.emit()">
+      Submit
+    </button>
+  </div>
+  

src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-preview-step/glim-preview-step.component.spec.ts

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

src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-preview-step/glim-preview-step.component.ts

@@ -0,0 +1,30 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'mifosx-glim-preview-step',
+  templateUrl: './glim-preview-step.component.html',
+  styleUrls: ['./glim-preview-step.component.scss']
+})
+export class GlimPreviewStepComponent implements OnInit {
+
+
+  /** Loans Account Template */
+  @Input() loansAccountTemplate: any;
+  /** Loans Account Product Template */
+  @Input() loansAccountProductTemplate: any;
+  /** Loans Account Data */
+  @Input() loansAccount: any;
+  /** Submit Loans Account */
+  @Output() submit = new EventEmitter();
+
+  /** Charges Displayed Columns */
+  chargesDisplayedColumns: string[] = ['name', 'chargeCalculationType', 'amount', 'chargeTimeType', 'date'];
+  /** Overdue Charges Displayed Columns */
+  overdueChargesDisplayedColumns: string[] = ['name', 'type', 'amount', 'collectedon'];
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-terms-step/glim-terms-step.component.html

@@ -0,0 +1,129 @@
+<form [formGroup]="loansAccountTermsForm">
+
+    <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+      <h4 fxFlex="98%" class="mat-h4">Term Options</h4>
+
+      <mat-form-field fxFlex="48%">
+        <mat-label>Loan Term</mat-label>
+        <input matInput required formControlName="loanTermFrequency">
+        <mat-error *ngIf="loansAccountTermsForm.controls.loanTermFrequency.hasError('required')">
+          Loan Term is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field fxFlex="48%">
+        <mat-label>Frequency</mat-label>
+        <mat-select required formControlName="loanTermFrequencyType">
+          <mat-option *ngFor="let type of termFrequencyTypeData" [value]="type.id">
+            {{ type.value }}
+          </mat-option>
+        </mat-select>
+        <mat-error *ngIf="loansAccountTermsForm.controls.loanTermFrequencyType.hasError('required')">
+          Frequency is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field fxFlex="48%">
+        <mat-label>Number of repayments</mat-label>
+        <input type="number" matInput formControlName="numberOfRepayments">
+        <mat-error *ngIf="loansAccountTermsForm.controls.numberOfRepayments.hasError('required')">
+          Number of repayments is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field fxFlex="48%" (click)="repaymentsPicker.open()">
+        <mat-label>First repayment on</mat-label>
+        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="repaymentsPicker"
+          formControlName="repaymentsStartingFromDate">
+        <mat-datepicker-toggle matSuffix [for]="repaymentsPicker"></mat-datepicker-toggle>
+        <mat-datepicker #repaymentsPicker></mat-datepicker>
+      </mat-form-field>
+
+      <h4 fxFlex="98%" class="mat-h4">Repaid Every</h4>
+
+      <mat-form-field fxFlex="48%">
+        <mat-label>Repaid every</mat-label>
+        <input matInput required formControlName="repaymentEvery"
+          [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.repaymentEvery">
+        <mat-error *ngIf="loansAccountTermsForm.controls.repaymentEvery.hasError('required')">
+          Repaid every is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field fxFlex="48%">
+        <mat-label>Frequency</mat-label>
+        <mat-select formControlName="repaymentFrequencyType" required
+          [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.repaymentEvery">
+          <mat-option *ngFor="let repaymentFrequencyType of termFrequencyTypeData"
+            [value]="repaymentFrequencyType.id">
+            {{ repaymentFrequencyType.value }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field fxFlex="48%" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value == 2">
+        <mat-label>Select On</mat-label>
+        <mat-select formControlName="repaymentFrequencyNthDayType">
+          <mat-option
+            *ngFor="let repaymentFrequencyNthDayType of repaymentFrequencyNthDayTypeData"
+            [value]="repaymentFrequencyNthDayType.id">
+            {{ repaymentFrequencyNthDayType.value }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field fxFlex="48%" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value == 2">
+        <mat-label>Select Day</mat-label>
+        <mat-select formControlName="repaymentFrequencyDayOfWeekType">
+          <mat-option
+            *ngFor="let repaymentFrequencyDayOfWeekType of repaymentFrequencyDaysOfWeekTypeData"
+            [value]="repaymentFrequencyDayOfWeekType.id">
+            {{ repaymentFrequencyDayOfWeekType.value }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field fxFlex="48%" (click)="interestPicker.open()">
+        <mat-label>Interest charged from</mat-label>
+        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="interestPicker"
+          formControlName="interestChargedFromDate">
+        <mat-datepicker-toggle matSuffix [for]="interestPicker"></mat-datepicker-toggle>
+        <mat-datepicker #interestPicker></mat-datepicker>
+      </mat-form-field>
+
+    <ng-container *ngIf="!loansAccountProductTemplate?.isLoanProductLinkedToFloatingRate">
+
+      <mat-form-field fxFlex="48%">
+        <mat-label>Nominal interest rate</mat-label>
+        <input type="number" matInput formControlName="interestRatePerPeriod">
+      </mat-form-field>
+
+        <mat-form-field fxFlex="48%">
+          <mat-label>Interest method</mat-label>
+          <mat-select [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.interestType"
+            formControlName="interestType">
+            <mat-option *ngFor="let interestType of interestTypeData"
+              [value]="interestType.id">
+              {{ interestType.value }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+
+    </ng-container>
+
+    
+
+    </div>
+    <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+      <button mat-raised-button matStepperPrevious>
+        <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+        Previous
+      </button>
+      <button mat-raised-button matStepperNext>
+        Next&nbsp;&nbsp;
+        <fa-icon icon="arrow-right"></fa-icon>
+      </button>
+    </div>
+
+</form>

src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-terms-step/glim-terms-step.component.spec.ts

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

src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-terms-step/glim-terms-step.component.ts

@@ -0,0 +1,145 @@
+import { Component, Input, OnInit, OnChanges } from '@angular/core';
+import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';
+import { SettingsService } from 'app/settings/settings.service';
+
+@Component({
+  selector: 'mifosx-glim-terms-step',
+  templateUrl: './glim-terms-step.component.html',
+  styleUrls: ['./glim-terms-step.component.scss']
+})
+export class GlimTermsStepComponent implements OnInit, OnChanges {
+
+  /** Loans Account Product Template */
+  @Input() loansAccountProductTemplate: any;
+  /** Loans Account Template */
+  @Input() loansAccountTemplate: any;
+
+  /** Minimum date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum date allowed. */
+  maxDate = new Date(2100, 0, 1);
+  /** Loans Account Terms Form */
+  loansAccountTermsForm: FormGroup;
+  /** Term Frequency Type Data */
+  termFrequencyTypeData: any;
+  /** Repayment Frequency Nth Day Type Data */
+  repaymentFrequencyNthDayTypeData: any;
+  /** Repayment Frequency Days of Week Type Data */
+  repaymentFrequencyDaysOfWeekTypeData: any;
+  /** Interest Type Data */
+  interestTypeData: any;
+  /** Amortization Type Data */
+  amortizationTypeData: any;
+  /** Interest Calculation Period Type Data */
+  interestCalculationPeriodTypeData: any;
+  /** Transaction Processing Strategy Data */
+  transactionProcessingStrategyData: any;
+  /** Client Active Loan Data */
+  clientActiveLoanData: any;
+
+  /**
+   * Create Loans Account Terms Form
+   * @param formBuilder FormBuilder
+   * @param {SettingsService} settingsService SettingsService
+   */
+  constructor(private formBuilder: FormBuilder,
+      private settingsService: SettingsService) {
+    this.createloansAccountTermsForm();
+  }
+  /**
+   * Executes on change of input values
+   */
+  ngOnChanges() {
+    if (this.loansAccountProductTemplate) {
+      this.loansAccountTermsForm.patchValue({
+        'principal': this.loansAccountProductTemplate.principal,
+        'loanTermFrequency': this.loansAccountProductTemplate.termFrequency,
+        'loanTermFrequencyType': this.loansAccountProductTemplate.termPeriodFrequencyType.id,
+        'numberOfRepayments': this.loansAccountProductTemplate.numberOfRepayments,
+        'repaymentEvery': this.loansAccountProductTemplate.repaymentEvery,
+        'repaymentFrequencyType': this.loansAccountProductTemplate.repaymentFrequencyType.id,
+        'interestRatePerPeriod': this.loansAccountProductTemplate.interestRatePerPeriod,
+        'interestType': this.loansAccountProductTemplate.interestType.id,
+        'interestCalculationPeriodType': this.loansAccountProductTemplate.interestCalculationPeriodType.id,
+        'transactionProcessingStrategyId': this.loansAccountProductTemplate.transactionProcessingStrategyId,
+      });
+      this.setOptions();
+    }
+  }
+
+  ngOnInit() {
+    this.maxDate = this.settingsService.businessDate;
+    if (this.loansAccountTemplate) {
+      if (this.loansAccountTemplate.loanProductId) {
+        this.loansAccountTermsForm.patchValue({
+          'repaymentsStartingFromDate': this.loansAccountTemplate.expectedFirstRepaymentOnDate && new Date(this.loansAccountTemplate.expectedFirstRepaymentOnDate)
+        });
+      }
+    }
+    this.createloansAccountTermsForm();
+    this.setCustomValidators();
+  }
+
+  /** Custom Validators for the form */
+  setCustomValidators() {
+    const repaymentFrequencyNthDayType = this.loansAccountTermsForm.get('repaymentFrequencyNthDayType');
+    const repaymentFrequencyDayOfWeekType = this.loansAccountTermsForm.get('repaymentFrequencyDayOfWeekType');
+
+    this.loansAccountTermsForm.get('repaymentFrequencyType').valueChanges
+      .subscribe(repaymentFrequencyType => {
+
+        if (repaymentFrequencyType === 2) {
+          repaymentFrequencyNthDayType.setValidators([Validators.required]);
+          repaymentFrequencyDayOfWeekType.setValidators([Validators.required]);
+        } else {
+          repaymentFrequencyNthDayType.setValidators(null);
+          repaymentFrequencyDayOfWeekType.setValidators(null);
+        }
+
+        repaymentFrequencyNthDayType.updateValueAndValidity();
+        repaymentFrequencyDayOfWeekType.updateValueAndValidity();
+      });
+  }
+
+  /** Create Loans Account Terms Form */
+  createloansAccountTermsForm() {
+    this.loansAccountTermsForm = this.formBuilder.group({
+      'principal': ['', Validators.required],
+      'loanTermFrequency': ['', Validators.required],
+      'loanTermFrequencyType': ['', Validators.required],
+      'numberOfRepayments': ['', Validators.required],
+      'repaymentEvery': ['', Validators.required],
+      'repaymentFrequencyType': ['', Validators.required],
+      'repaymentFrequencyNthDayType': [''],
+      'repaymentFrequencyDayOfWeekType': [''],
+      'repaymentsStartingFromDate': [''],
+      'interestChargedFromDate': [''],
+      'interestRatePerPeriod': [''],
+      'interestType': [''],
+      'interestCalculationPeriodType': [''],
+      'transactionProcessingStrategyId': ['']
+    });
+  }
+
+  /**
+   * Sets all select dropdown options.
+   */
+  setOptions() {
+    this.termFrequencyTypeData = this.loansAccountProductTemplate.termFrequencyTypeOptions;
+    this.repaymentFrequencyNthDayTypeData = this.loansAccountProductTemplate.repaymentFrequencyNthDayTypeOptions;
+    this.repaymentFrequencyDaysOfWeekTypeData = this.loansAccountProductTemplate.repaymentFrequencyDaysOfWeekTypeOptions;
+    this.interestTypeData = this.loansAccountProductTemplate.interestTypeOptions;
+    this.amortizationTypeData = this.loansAccountProductTemplate.amortizationTypeOptions;
+    this.interestCalculationPeriodTypeData = this.loansAccountProductTemplate.interestCalculationPeriodTypeOptions;
+    this.transactionProcessingStrategyData = this.loansAccountProductTemplate.transactionProcessingStrategyOptions;
+    this.clientActiveLoanData = this.loansAccountProductTemplate.clientActiveLoanOptions;
+  }
+
+  /**
+   * Returns loans account terms form value.
+   */
+  get loansAccountTerms() {
+    return this.loansAccountTermsForm.value;
+  }
+
+}

src/app/loans/glim-account/glim-account-view.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 { LoansService } from '../loans.service';
+
+/**
+ * GLIM Account data resolver.
+ */
+@Injectable()
+export class GLIMViewResolver implements Resolve<Object> {
+
+  /**
+   * @param {LoansService} loansService Loans service.
+   */
+  constructor(private loansService: LoansService) { }
+
+  /**
+   * 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 glimId = route.paramMap.get('glimId');
+    return this.loansService.getGLIMAccountData(glimId, groupId);
+  }
+
+}

src/app/loans/glim-account/glim-account.component.html

@@ -0,0 +1,46 @@
+<div class="tab-container mat-typography">
+
+  <div style="margin-top: 5px;">
+
+    <h2> GLIM Account Overview</h2>
+
+    <table mat-table [dataSource]="dataSource">
+
+      <ng-container matColumnDef="loanId">
+        <th mat-header-cell *matHeaderCellDef> Loan Id </th>
+        <td mat-cell *matCellDef="let element">
+          {{element.childLoanId}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="clientId">
+        <th mat-header-cell *matHeaderCellDef> Client ID </th>
+        <td mat-cell *matCellDef="let element">{{element.clientId}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="clientName">
+        <th mat-header-cell *matHeaderCellDef> Client Name</th>
+        <td mat-cell *matCellDef="let element">{{element.clientName}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="loanAccountNumber">
+        <th mat-header-cell *matHeaderCellDef> Loan Account Number</th>
+        <td mat-cell *matCellDef="let element"> {{element.childLoanAccountNo}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="clientPrincipalLoan">
+        <th mat-header-cell *matHeaderCellDef> Client Principal Loan </th>
+        <td mat-cell *matCellDef="let element" > {{element.childPrincipalAmount}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="groupPrincipalLoan">
+        <th mat-header-cell *matHeaderCellDef> Group Principal Loan </th>
+        <td mat-cell *matCellDef="let element" > {{element.parentPrincipalAmount}} </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row  [routerLink]="['../../', row.childLoanId, 'general']" *matRowDef="let row; columns: displayedColumns;"></tr>
+
+    </table>
+
+
+</div>

src/app/loans/glim-account/glim-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/loans/glim-account/glim-account.component.spec.ts

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

src/app/loans/glim-account/glim-account.component.ts

@@ -0,0 +1,49 @@
+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-glim-account',
+  templateUrl: './glim-account.component.html',
+  styleUrls: ['./glim-account.component.scss']
+})
+export class GlimAccountComponent implements OnInit {
+
+  /** Columns to be displayed in GLIM overview table. */
+  displayedColumns: string[] = ['loanId', 'clientId', 'clientName', 'loanAccountNumber', 'clientPrincipalLoan', 'groupPrincipalLoan'];
+  /** Data source for charge overview table. */
+  dataSource: MatTableDataSource<any>;
+  /** Charge Overview data */
+  glimOverviewData: 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: { glimData: any }) => {
+      this.glimOverviewData = data.glimData;
+    });
+  }
+
+  ngOnInit(): void {
+    this.setLoanClientChargeOverview();
+  }
+
+  /**
+   * Set GLIM Overview.
+   */
+   setLoanClientChargeOverview() {
+    this.dataSource = new MatTableDataSource(this.glimOverviewData);
+  }
+}

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

@@ -29,6 +29,8 @@ import { ViewTransactionComponent } from './loans-view/transactions/view-transac
 import { EditTransactionComponent } from './loans-view/transactions/edit-transaction/edit-transaction.component';
 import { ViewRecieptComponent } from './loans-view/transactions/view-reciept/view-reciept.component';
 import { ExportTransactionsComponent } from './loans-view/transactions/export-transactions/export-transactions.component';
+import { GlimAccountComponent } from './glim-account/glim-account.component';
+import { CreateGlimAccountComponent } from './glim-account/create-glim-account/create-glim-account.component';
 
 /** Custom Resolvers */
 import { LoanDetailsResolver } from './common-resolvers/loan-details.resolver';
@@ -43,6 +45,12 @@ import { LoansAccountChargeResolver } from './common-resolvers/loans-account-cha
 import { LoansAccountTransactionResolver } from './common-resolvers/loans-account-transaction.resolver';
 import { LoansTransactionRecieptResolver } from './common-resolvers/loans-transaction-reciept.resolver';
 import { LoansAccountTransactionTemplateResolver } from './common-resolvers/loans-account-transaction-template.resolver';
+import { SavingsAccountViewResolver } from 'app/savings/common-resolvers/savings-account-view.resolver';
+import { GroupAccountsResolver } from 'app/groups/common-resolvers/group-account.resolver';
+import { GLIMViewResolver } from './glim-account/glim-account-view.resolver';
+import { GSIMAccountsResolver } from 'app/groups/common-resolvers/gsim-account-resolver';
+import { GLIMLoanTemplateResolver } from './common-resolvers/glim-loan-template.resolver';
+import { GroupViewResolver } from 'app/groups/common-resolvers/group-view.resolver';
 
 /** Loans Route. */
 const routes: Routes = [
@@ -249,6 +257,30 @@ const routes: Routes = [
           }
         },
       ]
+    },
+    {
+      path: 'glim-account',
+      children: [
+        {
+          path: 'create',
+          data: { title: extract('Create GLIM Application'), breadcrumb: 'Create GLIM Application'},
+          component: CreateGlimAccountComponent,
+          resolve: {
+            loansAccountTemplate: GLIMLoanTemplateResolver,
+            gsimData: GSIMAccountsResolver,
+            groupsData: GroupViewResolver,
+          },
+        },
+        {
+          path: ':glimId',
+          data: { title: extract('GSIM Account View'), routeParamBreadcrumb: 'savingAccountId'},
+          component: GlimAccountComponent,
+          resolve: {
+            glimData: GLIMViewResolver,
+            groupsData: GroupAccountsResolver
+          },
+        }
+      ]
     }]
   },
 ];
@@ -268,7 +300,12 @@ const routes: Routes = [
     LoansAccountChargeResolver,
     LoansAccountTransactionResolver,
     LoansAccountTransactionTemplateResolver,
-    LoansTransactionRecieptResolver
+    LoansTransactionRecieptResolver,
+    SavingsAccountViewResolver,
+    GroupAccountsResolver,
+    GLIMViewResolver,
+    GSIMAccountsResolver,
+    GLIMLoanTemplateResolver
   ]
 })
 

src/app/loans/loans.module.ts

@@ -59,6 +59,12 @@ import { ViewRecieptComponent } from './loans-view/transactions/view-reciept/vie
 import { ExportTransactionsComponent } from './loans-view/transactions/export-transactions/export-transactions.component';
 import { ViewTransactionComponent } from './loans-view/transactions/view-transaction/view-transaction.component';
 import { EditTransactionComponent } from './loans-view/transactions/edit-transaction/edit-transaction.component';
+import { GlimAccountComponent } from './glim-account/glim-account.component';
+import { CreateGlimAccountComponent } from './glim-account/create-glim-account/create-glim-account.component';
+import { GlimDetailsStepComponent } from './glim-account/create-glim-account/glim-account-stepper/glim-details-step/glim-details-step.component';
+import { GlimChargesStepComponent } from './glim-account/create-glim-account/glim-account-stepper/glim-charges-step/glim-charges-step.component';
+import { GlimTermsStepComponent } from './glim-account/create-glim-account/glim-account-stepper/glim-terms-step/glim-terms-step.component';
+import { GlimPreviewStepComponent } from './glim-account/create-glim-account/glim-account-stepper/glim-preview-step/glim-preview-step.component';
 
 /** Dialog Components */
 import { LoansAccountViewGuarantorDetailsDialogComponent } from './custom-dialog/loans-account-view-guarantor-details-dialog/loans-account-view-guarantor-details-dialog.component';
@@ -128,7 +134,13 @@ import { LoanCreditBalanceRefundComponent } from './loans-view/loan-account-acti
     EditTransactionComponent,
     ViewRecieptComponent,
     ExportTransactionsComponent,
-    LoanCreditBalanceRefundComponent
+    LoanCreditBalanceRefundComponent,
+    GlimAccountComponent,
+    CreateGlimAccountComponent,
+    GlimDetailsStepComponent,
+    GlimChargesStepComponent,
+    GlimTermsStepComponent,
+    GlimPreviewStepComponent
   ],
   providers: [ ],
 })

src/app/loans/loans.service.ts

@@ -440,4 +440,22 @@ export class LoansService {
     return this.http.post(`/loans/${accountId}/transactions`, data, { params: httpParams });
   }
 
+  /**
+   * @param glimId GLIM Id of account to get data for.
+   * @returns {Observable<any>} GLIM Account data.
+   */
+   getGLIMAccountData(glimId: string, groupId: string): Observable<any> {
+    return this.http.get(`/loans/glimAccount/${glimId}`);
+  }
+
+  getGLIMLoanAccountTemplate(groupId: any): Observable<any> {
+    const httpParams = new HttpParams().set('groupId', groupId)
+                                        .set('lendingStrategy', '300')
+                                        .set('templateType', 'jlgbulk');
+  return this.http.get('/loans/template', { params: httpParams });
+  }
+  createGlimAccount(glimAccount: any): Observable<any> {
+    return this.http.post('/batches?enclosingTransaction=true', glimAccount);
+  }
+
 }

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);
     }
    }
 
@@ -192,4 +205,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);
+  }
+
 }