feat:glim and gsim account create and view

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);
+  }
+
 }