feat: add create loan account (#1050)

Fixes: #220 
Co-authored-by: Abhijeet Singh <abhijeet40308@gmail.com>

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

@@ -32,7 +32,7 @@
     </mat-card-title-group>
     <mat-card-actions class="client-actions">
       <button mat-raised-button>Edit</button>
-      <button mat-raised-button>+ New Loan</button>
+      <button mat-raised-button [routerLink]="['loans', 'create-loans-account']">+ New Loan</button>
       <button mat-raised-button [routerLink]="['savingsaccounts', 'create-savings-account']">+ New Savings</button>
       <button mat-raised-button>+ Deposit</button>
       <button mat-raised-button [matMenuTriggerFor]="More">More</button>

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-currency-step/recurring-deposits-account-currency-step.component.ts

@@ -29,11 +29,7 @@ export class RecurringDepositsAccountCurrencyStepComponent implements OnInit, On
   }
 
   ngOnChanges() {
-    console.log('out here');
-
     if (this.recurringDepositsAccountProductTemplate) {
-      console.log('here');
-
       this.recurringDepositAccountCurrencyForm.patchValue({
         'currencyCode': this.recurringDepositsAccountProductTemplate.currency.code,
         'decimalPlaces': this.recurringDepositsAccountProductTemplate.currency.decimalPlaces

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.html

@@ -79,7 +79,7 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Recurring Deposit Amount:</span>
-    <span fxFlex="60%">{{ recurringDepositAccountData.mandatoryRecommendedDepositAmount}}</span>
+    <span fxFlex="60%">{{ recurringDepositAccountData?.mandatoryRecommendedDepositAmount}}</span>
   </div>
 
   <div fxFlexFill>

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.ts

@@ -85,7 +85,7 @@ export class RecurringDepositsAccountSettingsStepComponent implements OnInit, On
       this.recurringDepositAccountSettingsForm.patchValue({
         'lockinPeriodFrequency': this.recurringDepositsAccountTemplate.lockinPeriodFrequency,
         'lockinPeriodFrequencyType': this.recurringDepositsAccountTemplate.lockinPeriodFrequencyType && this.recurringDepositsAccountTemplate.lockinPeriodFrequencyType.id,
-        'mandatoryRecommendedDepositAmount': this.recurringDepositsAccountProductTemplate.mandatoryRecommendedDepositAmount,
+        'mandatoryRecommendedDepositAmount': this.recurringDepositsAccountTemplate.mandatoryRecommendedDepositAmount,
       });
     }
   }

src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.html

@@ -128,7 +128,7 @@
             <tr>
               <td>Recurring Deposit Amount</td>
               <td>
-                <span>{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.mandatoryRecommendedDepositAmount | number}}</span>
+                <span>{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData?.mandatoryRecommendedDepositAmount | number}}</span>
               </td>
             </tr>
             <tr>

src/app/deposits/recurring-deposits/recurring-deposits-routing.module.ts

@@ -32,7 +32,7 @@ import { RecurringDepositsAccountTransactionTemplateResolver } from './common-re
 const routes: Routes = [
   {
     path: '',
-    data: { title: extract('All RecurringDeposits'), breadcrumb: 'RecurringDeposits', routeParamBreadcrumb: false },
+    data: { title: extract('All Recurring Deposits'), breadcrumb: 'Recurring Deposits', routeParamBreadcrumb: false },
     children: [
       {
         path: 'create-recurring-deposits-account',

src/app/deposits/recurring-deposits/recurring-deposits.module.ts

@@ -32,9 +32,6 @@ import { ApproveRecurringDepositsAccountComponent } from './recurring-deposits-a
 import { RejectRecurringDepositsAccountComponent } from './recurring-deposits-account-actions/reject-recurring-deposits-account/reject-recurring-deposits-account.component';
 import { WithdrawByClientRecurringDepositsAccountComponent } from './recurring-deposits-account-actions/withdraw-by-client-recurring-deposits-account/withdraw-by-client-recurring-deposits-account.component';
 import { AddChargeRecurringDepositsAccountComponent } from './recurring-deposits-account-actions/add-charge-recurring-deposits-account/add-charge-recurring-deposits-account.component';
-
-/* Dialog Components */
-import { RecurringDepositConfirmationDialogComponent } from './recurring-deposits-account-view/custom-dialogs/recurring-deposit-confirmation-dialog/recurring-deposit-confirmation-dialog.component';
 import { EditRecurringDepositAccountComponent } from './edit-recurring-deposit-account/edit-recurring-deposit-account.component';
 import { PrematureCloseRecurringDepositAccountComponent } from './recurring-deposits-account-actions/premature-close-recurring-deposit-account/premature-close-recurring-deposit-account.component';
 import { CloseRecurringDepositsAccountComponent } from './recurring-deposits-account-actions/close-recurring-deposits-account/close-recurring-deposits-account.component';
@@ -42,6 +39,8 @@ import { DepositRecurringDepositsAccountComponent } from './recurring-deposits-a
 import { ViewTransactionComponent } from './recurring-deposits-account-view/transactions-tab/view-transaction/view-transaction.component';
 import { EditTransactionComponent } from './recurring-deposits-account-view/transactions-tab/edit-transaction/edit-transaction.component';
 
+/* Dialog Components */
+import { RecurringDepositConfirmationDialogComponent } from './recurring-deposits-account-view/custom-dialogs/recurring-deposit-confirmation-dialog/recurring-deposit-confirmation-dialog.component';
 
 /**
  * RecurringDeposits Module

src/app/loans/common-resolvers/loans-account-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';
+
+/**
+ * Loan accounts template data resolver.
+ */
+@Injectable()
+export class LoansAccountTemplateResolver implements Resolve<Object> {
+    /**
+     * @param {ProductsService} productsService Products service.
+     */
+    constructor(private loansService: LoansService) { }
+
+    /**
+     * Returns the loan account template data.
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+        const clientId = route.parent.parent.paramMap.get('clientId');
+        return this.loansService.getLoansAccountTemplateResource(clientId);
+    }
+}

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

@@ -0,0 +1,66 @@
+<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-loans-account-details-step [loansAccountTemplate]="loansAccountTemplate"
+        (loansAccountProductTemplate)="setTemplate($event)">
+      </mifosx-loans-account-details-step>
+
+    </mat-step>
+
+    <mat-step [stepControl]="loansAccountTermsForm">
+
+      <ng-template matStepLabel>TERMS</ng-template>
+
+      <mifosx-loans-account-terms-step [loansAccountProductTemplate]="loansAccountProductTemplate">
+      </mifosx-loans-account-terms-step>
+
+    </mat-step>
+
+    <mat-step>
+
+      <ng-template matStepLabel>CHARGES</ng-template>
+
+      <mifosx-loans-account-charges-step [loansAccountProductTemplate]="loansAccountProductTemplate"
+        [loansAccountTemplate]="loansAccountTemplate" [collateralOptions]="collateralOptions"
+        [loansAccountFormValid]="loansAccountFormValid">
+      </mifosx-loans-account-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/create-loans-account/create-loans-account.component.spec.ts

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

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

@@ -0,0 +1,148 @@
+/** Angular Imports */
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DatePipe } from '@angular/common';
+
+/** Custom Services */
+import { LoansService } from '../loans.service';
+
+/** Step Components */
+import { LoansAccountDetailsStepComponent } from '../loans-account-stepper/loans-account-details-step/loans-account-details-step.component';
+import { LoansAccountTermsStepComponent } from '../loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component';
+import { LoansAccountChargesStepComponent } from '../loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component';
+
+/**
+ * Create loans account
+ */
+@Component({
+  selector: 'mifosx-create-loans-account',
+  templateUrl: './create-loans-account.component.html',
+  styleUrls: ['./create-loans-account.component.scss']
+})
+export class CreateLoansAccountComponent implements OnInit {
+
+  /** Imports all the step component */
+  @ViewChild(LoansAccountDetailsStepComponent) loansAccountDetailsStep: LoansAccountDetailsStepComponent;
+  @ViewChild(LoansAccountTermsStepComponent) loansAccountTermsStep: LoansAccountTermsStepComponent;
+  @ViewChild(LoansAccountChargesStepComponent) loansAccountChargesStep: LoansAccountChargesStepComponent;
+
+  /** Loans Account Template */
+  loansAccountTemplate: any;
+  /** Loans Account Product Template */
+  loansAccountProductTemplate: any;
+  /** Collateral Options */
+  collateralOptions: any;
+
+  /**
+   * Sets loans account create form.
+   * @param {route} ActivatedRoute Activated Route.
+   * @param {router} Router Router.
+   * @param {datePipe} DatePipe Date Pipe
+   * @param {loansService} LoansService Loans Service
+   */
+  constructor(private route: ActivatedRoute,
+    private router: Router,
+    private datePipe: DatePipe,
+    private loansService: LoansService
+  ) {
+    this.route.data.subscribe((data: { loansAccountTemplate: any }) => {
+      this.loansAccountTemplate = data.loansAccountTemplate;
+    });
+  }
+
+  ngOnInit() {
+  }
+
+  /**
+   * Sets loans account product template and collateral template
+   * @param {any} $event API response
+   */
+  setTemplate($event: any) {
+    this.loansAccountProductTemplate = $event;
+    this.loansService.getLoansCollateralTemplateResource(this.loansAccountProductTemplate.loanProductId).subscribe((response: any) => {
+      this.collateralOptions = response.loanCollateralOptions;
+    });
+  }
+
+  /** 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
+    );
+  }
+
+  /** Retrieves Data of all forms except Currency to submit the data */
+  get loansAccount() {
+    return {
+      ...this.loansAccountDetailsStep.loansAccountDetails,
+      ...this.loansAccountTermsStep.loansAccountTerms,
+      ...this.loansAccountChargesStep.loansAccountCharges,
+    };
+  }
+
+  /**
+   * Submits Data to create loan account
+   */
+  submit() {
+    const locale = 'en';
+    const dateFormat = 'dd MMMM yyyy';
+    const loanType = 'individual';
+    let loansAccountData = {
+      ...this.loansAccount,
+      clientId: this.loansAccountTemplate.clientId,
+      charges: this.loansAccount.charges.map((charge: any) => ({
+        chargeId: charge.id,
+        amount: charge.amount,
+        dueDate: charge.dueDate && this.datePipe.transform(charge.dueDate, dateFormat),
+      })),
+      collateral: this.loansAccount.collateral.map((collateralEle: any) => ({
+        type: collateralEle.type,
+        value: collateralEle.value,
+        description: collateralEle.description
+      })),
+      interestChargedFromDate: this.datePipe.transform(this.loansAccount.interestChargedFromDate, dateFormat),
+      repaymentsStartingFromDate: this.datePipe.transform(this.loansAccount.repaymentsStartingFromDate, dateFormat),
+      submittedOnDate: this.datePipe.transform(this.loansAccount.submittedOnDate, dateFormat),
+      expectedDisbursementDate: this.datePipe.transform(this.loansAccount.expectedDisbursementDate, dateFormat),
+      dateFormat,
+      locale,
+      loanType
+    };
+
+    if (loansAccountData.syncRepaymentsWithMeeting) {
+      loansAccountData.calendarId = this.loansAccountProductTemplate.calendarOptions[0].id;
+      delete loansAccountData.syncRepaymentsWithMeeting;
+    }
+
+    if (loansAccountData.recalculationRestFrequencyDate) {
+      loansAccountData.recalculationRestFrequencyDate = this.datePipe.transform(this.loansAccount.recalculationRestFrequencyDate, dateFormat);
+    }
+
+    if (loansAccountData.recalculationCompoundingFrequencyDate) {
+      loansAccountData.recalculationCompoundingFrequencyDate = this.datePipe.transform(this.loansAccount.recalculationCompoundingFrequencyDate, dateFormat);
+    }
+
+    if (loansAccountData.interestCalculationPeriodType === 0) {
+      loansAccountData.allowPartialPeriodInterestCalcualtion = false;
+    }
+    if (!(loansAccountData.isFloatingInterestRate === false)){
+      delete loansAccountData.isFloatingInterestRate;
+    }
+
+    this.loansService.createLoansAccount(loansAccountData).subscribe((response: any) => {
+      this.router.navigate(['../', response.resourceId], { relativeTo: this.route });
+    });
+  }
+
+}

src/app/loans/loans-account-add-collateral-dialog/loans-account-add-collateral-dialog.component.html

@@ -0,0 +1,39 @@
+<h1 mat-dialog-title>Add Loan Collateral</h1>
+
+<div mat-dialog-content [formGroup]="addCollateralForm" fxLayout="column">
+
+  <mat-form-field>
+    <mat-label>Collateral Type</mat-label>
+    <mat-select formControlName="type" required>
+      <mat-option *ngFor="let collateralType of collateralTypeData" [value]="collateralType.id">
+        {{ collateralType.name }}
+      </mat-option>
+    </mat-select>
+    <mat-error>
+      Collateral Type is <strong>required</strong>
+    </mat-error>
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>Value</mat-label>
+    <input type="number" matInput formControlName="value" required>
+    <mat-error>
+      Value is <strong>required</strong>
+    </mat-error>
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>Description</mat-label>
+    <input type="text" matInput formControlName="description" required>
+    <mat-error>
+      Description is <strong>required</strong>
+    </mat-error>
+  </mat-form-field>
+
+</div>
+
+<mat-dialog-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+  <button mat-raised-button mat-dialog-close> Cancel </button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="{ data: addCollateralForm }"
+    [disabled]="!addCollateralForm.valid || addCollateralForm.pristine">{{ layout.addButtonText }}</button>
+</mat-dialog-actions>

src/app/loans/loans-account-add-collateral-dialog/loans-account-add-collateral-dialog.component.spec.ts

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

src/app/loans/loans-account-add-collateral-dialog/loans-account-add-collateral-dialog.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'mifosx-loans-account-add-collateral-dialog',
+  templateUrl: './loans-account-add-collateral-dialog.component.html',
+  styleUrls: ['./loans-account-add-collateral-dialog.component.scss']
+})
+export class LoansAccountAddCollateralDialogComponent implements OnInit {
+
+  layout: {
+    addButtonText?: string
+  } = {
+      addButtonText: 'Add'
+    };
+
+  addCollateralForm: FormGroup;
+  collateralTypeData: any;
+
+  constructor(public dialogRef: MatDialogRef<LoansAccountAddCollateralDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    private formBuilder: FormBuilder) {
+    this.createAddCollateralForm();
+  }
+
+  ngOnInit() {
+    this.dialogRef.updateSize('400px');
+    console.log('collateral: ', this.data.collateralTypeOptions);
+
+    this.collateralTypeData = this.data.collateralTypeOptions;
+  }
+
+  createAddCollateralForm() {
+    this.addCollateralForm = this.formBuilder.group({
+      'type': ['', Validators.required],
+      'value': ['', Validators.required],
+      'description': ['', Validators.required]
+    });
+  }
+
+}

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

@@ -0,0 +1,176 @@
+<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 | date) || 'Unassigned'}}
+        </span>
+        <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
+          {{(charge.feeOnMonthDay | date) || '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="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="chargesDisplayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
+
+  </table>
+
+  <mat-divider fxFlex="98%"></mat-divider>
+
+  <h4 fxFlex="98%" class="mat-h4">Overdue Charges</h4>
+
+  <table mat-table class="mat-elevation-z1" [dataSource]="overDueChargesDataSource">
+
+    <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>
+
+  <mat-divider fxFlex="98%"></mat-divider>
+
+  <div fxFlex="50%">
+    <div fxLayout="column" fxFlex="50%" class="tableName">
+      <h4 fxFlex="98%" class="mat-h4">Collaterals Data</h4>
+    </div>
+
+    <div fxLayout="column" fxFlex="50%">
+      <div fxLayout="row" fxLayoutAlign="flex-end">
+        <button mat-raised-button color="primary" (click)="addCollateral()">
+          <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <table mat-table class="mat-elevation-z1" [dataSource]="collateralDataSource">
+
+    <ng-container matColumnDef="type">
+      <th mat-header-cell *matHeaderCellDef> Type </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.type.name }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="value">
+      <th mat-header-cell *matHeaderCellDef> Value </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.value }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="description">
+      <th mat-header-cell *matHeaderCellDef> Description </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.description }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="action">
+      <th mat-header-cell *matHeaderCellDef> Actions </th>
+      <td mat-cell *matCellDef="let ele; let collateralIndex = index">
+        <button mat-icon-button color="warn" (click)="deleteCollateral(collateralIndex)">
+          <fa-icon icon="trash"></fa-icon>
+        </button>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="loanCollateralDisplayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: loanCollateralDisplayedColumns;"></tr>
+  </table>
+
+</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 [disabled]="!loansAccountFormValid">
+    Next&nbsp;&nbsp;
+    <fa-icon icon="arrow-right"></fa-icon>
+  </button>
+</div>

src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.scss

@@ -0,0 +1,36 @@
+table {
+  width: 100%;
+}
+
+.mat-elevation-z1 {
+  margin: 1em 0 1.5em 0;
+}
+
+.margin-t {
+  margin-top: 1em;
+}
+
+h4 {
+  font-weight: 500;
+  margin: 1em 0;
+}
+
+h3 {
+  font-weight: 500;
+}
+
+mat-divider {
+  margin: 1em 0 1em 0;
+}
+
+.margin-v {
+  margin: 1em 0;
+}
+
+.margin-b {
+  margin: 0 0 1em 0;
+}
+
+.tableName {
+    padding-left: 2%;
+}

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

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

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

@@ -0,0 +1,249 @@
+/** Angular Imports */
+import { Component, OnInit, Input, OnChanges } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { MatDialog } from '@angular/material';
+
+/** Dialog Components */
+import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
+import { LoansAccountAddCollateralDialogComponent } from 'app/loans/loans-account-add-collateral-dialog/loans-account-add-collateral-dialog.component';
+
+/** Custom Services */
+import { DatePipe } from '@angular/common';
+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';
+
+/**
+ * Recurring Deposit Account Charges Step
+ */
+@Component({
+  selector: 'mifosx-loans-account-charges-step',
+  templateUrl: './loans-account-charges-step.component.html',
+  styleUrls: ['./loans-account-charges-step.component.scss']
+})
+export class LoansAccountChargesStepComponent implements OnInit, OnChanges {
+
+  // @Input loansAccountProductTemplate: LoansAccountProductTemplate
+  @Input() loansAccountProductTemplate: any;
+  // @Imput loansAccountTemplate: LoansAccountTemplate
+  @Input() loansAccountTemplate: any;
+  // @Input() loansAccountFormValid: LoansAccountFormValid
+  @Input() loansAccountFormValid: boolean;
+  // @Input collateralOptionsL Collateral Options
+  @Input() collateralOptions: any;
+
+  /** Charges Data */
+  chargeData: any;
+  /** Charges Data Source */
+  chargesDataSource: {}[] = [];
+  /** Overdue Charges Data Source */
+  overDueChargesDataSource: {}[] = [];
+  /** Collateral Data Source */
+  collateralDataSource: {}[] = [];
+  /** Charges table columns */
+  chargesDisplayedColumns: string[] = ['name', 'chargeCalculationType', 'amount', 'chargeTimeType', 'date', 'action'];
+  /** Columns to be displayed in overdue charges table. */
+  overdueChargesDisplayedColumns: string[] = ['name', 'type', 'amount', 'collectedon'];
+  /** Columns to be displayed in collateral table. */
+  loanCollateralDisplayedColumns: string[] = ['type', 'value', 'description', 'action'];
+  /** Component is pristine if there has been no changes by user interaction */
+  pristine = true;
+
+  /**
+   * Loans Account Charges Form Step
+   * @param {dialog} MatDialog Mat Dialog
+   * @param {datePipe} DatePipe DatePipe
+   */
+  constructor(public dialog: MatDialog,
+    private datePipe: DatePipe) {
+  }
+
+  ngOnInit() {
+    if ( this.loansAccountTemplate.charges) {
+      this.chargesDataSource = this.loansAccountTemplate.charges.map((charge: any) => ({ ...charge, id: charge.chargeId })) || [];
+    }
+  }
+
+  /**
+   * Executes on change of input values
+   */
+  ngOnChanges() {
+    if (this.loansAccountProductTemplate) {
+      this.chargeData = this.loansAccountProductTemplate.chargeOptions;
+      if (this.loansAccountProductTemplate.overdueCharges) {
+        this.overDueChargesDataSource = this.loansAccountProductTemplate.overdueCharges;
+      }
+    }
+  }
+
+  /**
+   * Add a 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.datePipe.transform(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;
+  }
+
+  /**
+   * Delete a particular charge
+   * @param charge Charge
+   */
+  deleteCharge(charge: any) {
+    const deleteChargeDialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `charge ${charge.name}` }
+    });
+    deleteChargeDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.chargesDataSource.splice(this.chargesDataSource.indexOf(charge), 1);
+        this.chargesDataSource = this.chargesDataSource.concat([]);
+        this.pristine = false;
+      }
+    });
+  }
+
+  // TODO: Needs to be completed
+  addCollateral() {
+    const addCollateralDialogRef = this.dialog.open(LoansAccountAddCollateralDialogComponent, {
+      data: { collateralOptions: this.collateralOptions }
+    });
+    addCollateralDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.addCollateralForm) {
+        console.log('formdata: ', response.addCollateralForm);
+        const collateralData = {
+          type: response.addCollateralForm.value.type,
+          value: response.addCollateralForm.value.value,
+          description: response.addCollateralForm.value.description
+        };
+        this.collateralDataSource = this.collateralDataSource.concat(collateralData);
+
+      }
+    });
+  }
+
+  deleteCollateral(id: any) {
+    const deleteCollateralDialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `collateral` }
+    });
+    deleteCollateralDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.collateralDataSource.splice(this.collateralDataSource.indexOf(id), 1);
+        this.collateralDataSource = this.collateralDataSource.concat([]);
+        this.pristine = false;
+      }
+    });
+  }
+
+  /**
+   * Returns Loans Account Charges and Collateral Form
+   */
+  get loansAccountCharges() {
+    return {
+      charges: this.chargesDataSource,
+      collateral: this.collateralDataSource
+    };
+  }
+
+}

src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.html

@@ -0,0 +1,101 @@
+<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>Loan purpose</mat-label>
+      <mat-select formControlName="loanPurposeId">
+        <mat-option *ngFor="let loanPurpose of loanPurposeOptions" [value]="loanPurpose.id">
+          {{ loanPurpose.name }}
+        </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%">
+      <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%">
+      <mat-label>Disbursement on</mat-label>
+      <input matInput [min]="minDate" [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-form-field fxFlex="48%">
+      <mat-label>External id</mat-label>
+      <input matInput formControlName="externalId">
+    </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 accountLinkingOptions" [value]="savingaccount.id">
+          {{ savingaccount.productName }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <mat-checkbox fxFlex="48%" formControlName="createStandingInstructionAtDisbursement">
+      <p>Create standing instructions at disbursement</p>
+    </mat-checkbox>
+
+  </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/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.scss

@@ -0,0 +1,24 @@
+h4 {
+  font-weight: 500;
+  margin: 1em 0;
+}
+
+h3 {
+  font-weight: 500;
+}
+
+mat-divider {
+  margin: 1em 0 2em 0;
+}
+
+.margin-v {
+  margin: 1em 0;
+}
+
+.margin-b {
+  margin: 0 0 1em 0;
+}
+
+.margin-t {
+  margin-top: 1em;
+}

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

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

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

@@ -0,0 +1,111 @@
+/** Angular Imports */
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+
+/** Custom Services */
+import { LoansService } from '../../loans.service';
+import { DatePipe } from '@angular/common';
+import { ReportsRoutingModule } from 'app/reports/reports-routing.module';
+
+/**
+ * Loans Account Details Step
+ */
+@Component({
+  selector: 'mifosx-loans-account-details-step',
+  templateUrl: './loans-account-details-step.component.html',
+  styleUrls: ['./loans-account-details-step.component.scss']
+})
+export class LoansAccountDetailsStepComponent implements OnInit {
+
+  /** Loans Account Template */
+  @Input() loansAccountTemplate: any;
+
+  /** Minimum date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum date allowed. */
+  maxDate = new Date();
+  /** 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.
+   */
+  constructor(private formBuilder: FormBuilder,
+    private loansService: LoansService,
+    private datePipe: DatePipe) {
+    this.createLoansAccountDetailsForm();
+  }
+
+  ngOnInit() {
+    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),
+        });
+      }
+    }
+  }
+
+  /**
+   * Creates loans account details form.
+   */
+  createLoansAccountDetailsForm() {
+    this.loansAccountDetailsForm = this.formBuilder.group({
+      'productId': ['', Validators.required],
+      'loanOfficerId': [''],
+      'loanPurposeId': [''],
+      'fundId': [''],
+      'submittedOnDate': ['', Validators.required],
+      'expectedDisbursementDate': ['', Validators.required],
+      'externalId': [''],
+      'linkAccountId': [''],
+      'createStandingInstructionAtDisbursement': ['']
+    });
+  }
+
+  /**
+   * Fetches loans account product template on productId value changes
+   */
+  buildDependencies() {
+    const clientId = this.loansAccountTemplate.clientId;
+    this.loansAccountDetailsForm.get('productId').valueChanges.subscribe((productId: string) => {
+      this.loansService.getLoansAccountTemplateResource(clientId, productId).subscribe((response: any) => {
+        this.loansAccountProductTemplate.emit(response);
+        this.loanOfficerOptions = response.loanOfficerOptions;
+        this.loanPurposeOptions = response.loanPurposeOptions;
+        this.fundOptions = response.fundOptions;
+        this.accountLinkingOptions = response.accountLinkingOptions;
+        if (response.createStandingInstructionAtDisbursement) {
+          this.loansAccountDetailsForm.get('createStandingInstructionAtDisbursement').patchValue(response.createStandingInstructionAtDisbursement);
+        }
+      });
+    });
+  }
+
+  /**
+   * Returns loans account details form value.
+   */
+  get loansAccountDetails() {
+    return this.loansAccountDetailsForm.value;
+  }
+
+}

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

@@ -0,0 +1,273 @@
+<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="loansAccountProductTemplate">
+    <span fxFlex="40%">Loan officer: :</span>
+    <span
+      fxFlex="60%">{{ loansAccount.loanOfficerId | find:loansAccountProductTemplate.loanOfficerOptions:'id':'name'}}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Loan purpose:</span>
+    <span
+      fxFlex="60%">{{ loansAccount.loanPurposeId | find:loansAccountProductTemplate.loanPurposeOptions:'id':'name'}}</span>
+  </div>
+
+  <div fxFlexFill>
+    <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 | date }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Disbursement on:</span>
+    <span fxFlex="60%">{{ loansAccount.expectedDisbursementDate | date }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <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>
+    <span fxFlex="40%">First repayment on</span>
+    <span fxFlex="60%">{{ loansAccount.repaymentsStartingFromDate | date }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Interest charged from</span>
+    <span fxFlex="60%">{{ loansAccount.interestChargedFromDate | date }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Nominal interest rate</span>
+    <span
+      fxFlex="60%">{{loansAccount.interestRatePerPeriod}}&nbsp;&nbsp;{{loansAccountProductTemplate.interestRateFrequencyType.value}}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Interest method </span>
+    <span fxFlex="60%">{{loansAccount.interestType}}</span>
+  </div>
+
+  <div fxFlexFill>
+    <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:loansAccountTemplate.amortizationTypeOptions:'id':'name' }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Interest calculation period </span>
+    <span
+      fxFlex="60%">{{ loansAccount.interestCalculationPeriodType | find:loansAccountTemplate.interestCalculationPeriodTypeOptions:'id':'name'  }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Calculate interest for exact days in partial period</span>
+    <span fxFlex="60%">{{ loansAccount.allowPartialPeriodInterestCalcualtion }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Arrears tolerance </span>
+    <span
+      fxFlex="60%">{{loansAccount.inArrearsTolerance}}&nbsp;{{loansAccountProductTemplate.currency.displaySymbol}}</span>
+  </div>
+
+  <div fxFlexFill>
+    <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>
+    <span fxFlex="40%">On principal payment </span>
+    <span fxFlex="60%">{{ loansAccount.graceOnPrincipalPayment }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">On interest payment </span>
+    <span fxFlex="60%">{{ loansAccount.graceOnInterestPayment }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">On Arrears Aging </span>
+    <span fxFlex="60%">{{ loansAccount.graceOnArrearsAgeing }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <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>
+    <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 | date) || 'Unassigned'}}
+          </span>
+          <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
+            {{(charge.feeOnMonthDay | date) || '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/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.scss

@@ -0,0 +1,24 @@
+table {
+  width: 100%;
+}
+
+.mat-elevation-z1 {
+  margin: 1em 0 1.5em 0;
+}
+
+h2, h3, h4 {
+  margin: 0;
+  font-weight: 500;
+}
+
+span {
+  margin: 0.5em 0;
+}
+
+mat-divider {
+  margin: 0 0 0.5em 0;
+}
+
+.margin-t {
+  margin-top: 1em;
+}

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

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

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

@@ -0,0 +1,32 @@
+/** Angular Imports */
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+/**
+ * Create Loans Account Preview Step
+ */
+@Component({
+  selector: 'mifosx-loans-account-preview-step',
+  templateUrl: './loans-account-preview-step.component.html',
+  styleUrls: ['./loans-account-preview-step.component.scss']
+})
+export class LoansAccountPreviewStepComponent 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() { }
+
+}

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

@@ -0,0 +1,350 @@
+<form [formGroup]="loansAccountTermsForm">
+
+    <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+      <mat-form-field fxFlex="48%">
+        <mat-label>Principal {{loansAccountProductTemplate?.currency.displaySymbol}}</mat-label>
+        <input type="number" matInput formControlName="principal">
+        <mat-error *ngIf="loansAccountTermsForm.controls.principal.hasError('required')">
+          Principal is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <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%">
+        <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>
+
+      <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" required>
+          <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" required>
+          <mat-option
+            *ngFor="let repaymentFrequencyDayOfWeekType of repaymentFrequencyDaysOfWeekTypeData"
+            [value]="repaymentFrequencyDayOfWeekType.id">
+            {{ repaymentFrequencyDayOfWeekType.value }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field fxFlex="48%">
+        <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>
+
+        <mat-checkbox fxFlex="48%" formControlName="isEqualAmortization"
+          [checked]="loansAccountProductTemplate?.isEqualAmortization">
+          <p>Is Equal Amortization</p>
+        </mat-checkbox>
+
+    </ng-container>
+
+    <ng-container *ngIf="loansAccountProductTemplate?.isLoanProductLinkedToFloatingRate">
+
+      <!-- <mat-form-field fxFlex="48%">
+        <mat-label>Interest Rate Differential</mat-label>
+        <input matInput formControlName="interestRateDifferential">
+      </mat-form-field> -->
+
+      <div fxFlex="48%" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+        <mat-form-field fxFlex="48%">
+          <mat-label>Interest Method</mat-label>
+          <mat-select formControlName="interestType">
+            <mat-option [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.interestType"
+              *ngFor="let interestType of interestTypeData" [value]="interestType.id">
+              {{ interestType.value }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+
+        <mat-checkbox fxFlex="48%" formControlName="isFloatingInterestRate">
+          <p>Is Floating Rate?</p>
+        </mat-checkbox>
+
+      </div>
+
+    </ng-container>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Amortization</mat-label>
+      <mat-select [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.amortizationType"
+        formControlName="amortizationType">
+        <mat-option *ngFor="let amortizationType of amortizationTypeData"
+          [value]="amortizationType.id">
+          {{ amortizationType.value }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <h4 fxFlex="98%" class="mat-h4">Interest Calculations</h4>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Interest calculation period</mat-label>
+      <mat-select
+        [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.interestCalculationPeriodType"
+        formControlName="interestCalculationPeriodType">
+        <mat-option
+          *ngFor="let interestCalculationPeriodType of interestCalculationPeriodTypeData"
+          [value]="interestCalculationPeriodType.id">
+          {{ interestCalculationPeriodType.value }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <!-- <mat-checkbox *ngIf="interestCalculationPeriodType != 0" fxFlex="48%" -->
+    <mat-checkbox fxFlex="48%" formControlName="allowPartialPeriodInterestCalcualtion"
+      [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.interestCalculationPeriodType">
+      <p>Calculate interest for exact days in partial period</p>
+    </mat-checkbox>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Arrears tolerance {{loansAccountProductTemplate?.currency.displaySymbol}}</mat-label>
+      <input matInput type="number"
+        [attr.disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.inArrearsTolerance"
+        formControlName="inArrearsTolerance">
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Interest free period</mat-label>
+      <input matInput formControlName="graceOnInterestCharged">
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Repayment strategy</mat-label>
+      <mat-select
+        [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.transactionProcessingStrategyId"
+        formControlName="transactionProcessingStrategyId">
+        <mat-option
+          *ngFor="let transactionProcessingStrategy of transactionProcessingStrategyData"
+          [value]="transactionProcessingStrategy.id">
+          {{ transactionProcessingStrategy.value }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <h4 fxFlex="98%" class="mat-h4">Moratorium</h4>
+
+    <mat-checkbox fxFlex="23%" labelPosition="before" formControlName="graceOnPrincipalPayment" class="margin-v"
+    [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.graceOnPrincipalAndInterestPayment">
+      On Principal Payment
+    </mat-checkbox>
+
+    <mat-checkbox fxFlex="23%" labelPosition="before" formControlName="graceOnInterestPayment" class="margin-v"
+    [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.graceOnPrincipalAndInterestPayment">
+      On Interest Payment
+    </mat-checkbox>
+
+    <mat-checkbox fxFlex="23%" labelPosition="before" formControlName="graceOnArrearsAgeing" class="margin-v"
+    [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.graceOnArrearsAgeing">
+      On Arreas Aging
+    </mat-checkbox>
+
+    <mat-form-field fxFlex="48%" *ngIf="loansAccountProductTemplate?.canDefineInstallmentAmount">
+      <mat-label>Installment Amount</mat-label>
+      <input type="number" matInput formControlName="fixedEmiAmount">
+    </mat-form-field>
+
+    <ng-container *ngIf="loansAccountProductTemplate?.canUseForTopup">
+
+      <mat-checkbox fxFlex="48%" formControlName="isTopup">
+        <p>Is Topup Loan?</p>
+      </mat-checkbox>
+
+      <mat-form-field fxFlex="48%" *ngIf="loansAccountTermsForm.controls.isTopup.value">
+        <mat-label>Loan closed with Topup</mat-label>
+        <mat-select formControlName="loanIdToClose">
+          <mat-option *ngFor="let clientActiveLoan of clientActiveLoanData"
+            [value]="clientActiveLoan.id">
+            {{ clientActiveLoan.accountNo }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+
+    </ng-container>
+
+    <mat-divider fxFlex="98%"></mat-divider>
+
+    <div fxFlexFill>
+      <span fxFlex="40%">Recalculate Interest</span>
+      <span fxFlex="60%">{{ loansAccountProductTemplate?.isInterestRecalculationEnabled? 'Yes' : 'No' }}</span>
+    </div>
+
+    <div fxFlexFill *ngIf="loansAccountProductTemplate?.isInterestRecalculationEnabled">
+      <span fxFlex="40%">Days in year</span>
+      <span fxFlex="60%">{{ loansAccountProductTemplate?.daysInYearType.value}}</span>
+    </div>
+
+    <ng-container *ngIf="loansAccountProductTemplate?.isInterestRecalculationEnabled">
+
+      <div fxFlexFill *ngIf="loansAccountProductTemplate?.isInterestRecalculationEnabled">
+        <span fxFlex="40%">Advance payments adjustment type</span>
+        <span fxFlex="60%">{{ loansAccountProductTemplate?.interestRecalculationData.rescheduleStrategyType.value }}</span>
+      </div>
+
+      <div fxFlexFill *ngIf="loansAccountProductTemplate?.isInterestRecalculationEnabled">
+        <span fxFlex="40%">Days in month</span>
+        <span fxFlex="60%">{{ loansAccountProductTemplate?.daysInMonthType.value }}</span>
+      </div>
+
+    </ng-container>
+
+    <ng-container *ngIf="loansAccountProductTemplate?.isInterestRecalculationEnabled">
+
+      <div fxFlexFill>
+        <span fxFlex="40%">Interest recalculation compounding on</span>
+        <span fxFlex="60%">{{ loansAccountProductTemplate?.interestRecalculationData.interestRecalculationCompoundingType.value }}</span>
+      </div>
+
+      <div fxFlexFill>
+        <span fxFlex="40%">Frequency Interval for recalculation</span>
+        <span fxFlex="60%">
+          <span>{{ loansAccountProductTemplate?.interestRecalculationData.recalculationRestFrequencyType.value}}</span>
+          <span *ngIf="loansAccountProductTemplate?.interestRecalculationData.recalculationRestFrequencyType.id == 3 &&
+                loansAccountProductTemplate?.interestRecalculationData.recalculationRestFrequencyWeekday != null">
+            on {{ loansAccountProductTemplate?.interestRecalculationData.recalculationRestFrequencyWeekday.value}}</span>
+          <span *ngIf="loansAccountProductTemplate?.interestRecalculationData.recalculationRestFrequencyType.id == 4 &&
+                loansAccountProductTemplate?.interestRecalculationData.recalculationRestFrequencyOnDay != null">on day
+            {{ loansAccountProductTemplate?.interestRecalculationData.recalculationRestFrequencyOnDay}}</span>
+          <span *ngIf="loansAccountProductTemplate?.interestRecalculationData.recalculationRestFrequencyType.id == 4 &&
+                loansAccountProductTemplate?.interestRecalculationData.recalculationRestFrequencyOnDay == null &&
+                loansAccountProductTemplate?.interestRecalculationData.recalculationRestFrequencyNthDay != null">on
+            {{ loansAccountProductTemplate?.interestRecalculationData.recalculationRestFrequencyNthDay.value}}
+            {{ loansAccountProductTemplate?.interestRecalculationData.recalculationRestFrequencyWeekday.value}}</span>
+        </span>
+      </div>
+
+    </ng-container>
+
+    <div fxFlexFill *ngIf="loansAccountProductTemplate?.isInterestRecalculationEnabled && loansAccountProductTemplate?.interestRecalculationData.recalculationRestFrequencyType.id != 1">
+      <span fxFlex="40%">Frequency Interval for recalculation</span>
+      <span fxFlex="60%">{{ loansAccountProductTemplate?.interestRecalculationData.recalculationRestFrequencyInterval}}</span>
+    </div>
+
+    <ng-container
+      *ngIf="loansAccountProductTemplate?.isInterestRecalculationEnabled  && loansAccountProductTemplate?.interestRecalculationData.interestRecalculationCompoundingType.id != 0">
+
+      <div fxFlexFill>
+        <span fxFlex="40%">Frequency for compounding</span>
+        <span fxFlex="60%">{{ loansAccountProductTemplate?.interestRecalculationData.recalculationCompoundingFrequencyType.value}}
+          <span *ngIf="loansAccountProductTemplate?.interestRecalculationData.recalculationCompoundingFrequencyType.id == 3 &&
+            loansAccountProductTemplate?.interestRecalculationData.recalculationCompoundingFrequencyWeekday != null">
+            on {{ loansAccountProductTemplate?.interestRecalculationData.recalculationCompoundingFrequencyWeekday.value}}
+          </span>
+          <span *ngIf="loansAccountProductTemplate?.interestRecalculationData.recalculationCompoundingFrequencyType.id == 4 &&
+            loansAccountProductTemplate?.interestRecalculationData.recalculationCompoundingFrequencyOnDay != null">on day
+            {{ loansAccountProductTemplate?.interestRecalculationData.recalculationCompoundingFrequencyOnDay}}
+          </span>
+          <span *ngIf="loansAccountProductTemplate?.interestRecalculationData.recalculationCompoundingFrequencyType.id == 4 &&
+            loansAccountProductTemplate?.interestRecalculationData.recalculationCompoundingFrequencyOnDay == null &&
+            loansAccountProductTemplate?.interestRecalculationData.recalculationCompoundingFrequencyNthDay != null">on
+            {{ loansAccountProductTemplate?.interestRecalculationData.recalculationCompoundingFrequencyNthDay.value}}
+            {{ loansAccountProductTemplate?.interestRecalculationData.recalculationCompoundingFrequencyWeekday.value}}
+          </span>
+        </span>
+      </div>
+
+    </ng-container>
+
+    <div fxFlexFill *ngIf="loansAccountProductTemplate?.isInterestRecalculationEnabled && loansAccountProductTemplate?.interestRecalculationData.interestRecalculationCompoundingType.id != 0 && loansAccountProductTemplate?.interestRecalculationData.recalculationCompoundingFrequencyType.id != 1">
+      <span fxFlex="40%">Frequency Interval for compounding</span>
+      <span fxFlex="60%">{{ loansAccountProductTemplate?.interestRecalculationData.recalculationCompoundingFrequencyInterval}}</span>
+    </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>
+
+</form>

src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.scss

@@ -0,0 +1,24 @@
+h4 {
+  font-weight: 500;
+  margin: 1em 0;
+}
+
+h3 {
+  font-weight: 500;
+}
+
+mat-divider {
+  margin: 1em 0 2em 0;
+}
+
+.margin-v {
+  margin: 1em 0;
+}
+
+.margin-b {
+  margin: 0 0 1em 0;
+}
+
+.margin-t {
+  margin-top: 1em;
+}

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

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

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

@@ -0,0 +1,142 @@
+/** Angular Imports */
+import { Component, OnInit, Input, OnChanges } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+
+/**
+ * Create Loans Account Terms Step
+ */
+@Component({
+  selector: 'mifosx-loans-account-terms-step',
+  templateUrl: './loans-account-terms-step.component.html',
+  styleUrls: ['./loans-account-terms-step.component.scss']
+})
+export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
+
+  /** Loans Account Product Template */
+  @Input() loansAccountProductTemplate: any;
+
+  /** Minimum date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum date allowed. */
+  maxDate = new Date();
+  /** 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 route Route
+   * @param router Router
+   */
+  constructor(private formBuilder: FormBuilder,
+              private route: ActivatedRoute,
+              private router: Router) {
+    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,
+        'amortizationType': this.loansAccountProductTemplate.amortizationType.id,
+        'isEqualAmortization': this.loansAccountProductTemplate.isEqualAmortization,
+        'interestType': this.loansAccountProductTemplate.interestType.id,
+        'isFloatingInterestRate': this.loansAccountProductTemplate.isLoanProductLinkedToFloatingRate ? false : '',
+        'interestCalculationPeriodType': this.loansAccountProductTemplate.interestCalculationPeriodType.id,
+        'allowPartialPeriodInterestCalcualtion': this.loansAccountProductTemplate.allowPartialPeriodInterestCalcualtion,
+        'inArrearsTolerance': this.loansAccountProductTemplate.inArrearsTolerance,
+        'graceOnPrincipalPayment': this.loansAccountProductTemplate.graceOnPrincipalPayment,
+        'graceOnInterestPayment': this.loansAccountProductTemplate.graceOnInterestPayment,
+        'graceOnArrearsAgeing': this.loansAccountProductTemplate.graceOnArrearsAgeing,
+        'transactionProcessingStrategyId': this.loansAccountProductTemplate.transactionProcessingStrategyId,
+        'graceOnInterestCharged': this.loansAccountProductTemplate.graceOnInterestCharged,
+        'fixedEmiAmount': this.loansAccountProductTemplate.fixedEmiAmount,
+        'maxOutstandingLoanBalance': this.loansAccountProductTemplate.maxOutstandingLoanBalance
+      });
+      this.setOptions();
+    }
+  }
+
+  ngOnInit() { }
+
+  /** 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': ['', Validators.required],
+      'repaymentFrequencyDayOfWeekType': ['', Validators.required],
+      'repaymentsStartingFromDate': [''],
+      'interestChargedFromDate': [''],
+      'interestRatePerPeriod': [''],
+      'interestType': [''],
+      // 'interestRateDifferential': [''],
+      'isFloatingInterestRate': [''],
+      'isEqualAmortization': [''],
+      'amortizationType': [''],
+      'interestCalculationPeriodType': [''],
+      'allowPartialPeriodInterestCalcualtion': [''],
+      'inArrearsTolerance': [''],
+      'graceOnInterestCharged': [''],
+      'transactionProcessingStrategyId': [''],
+      'graceOnPrincipalPayment': [''],
+      'graceOnInterestPayment': [''],
+      'graceOnArrearsAgeing': [''],
+      'loanIdToClose': [''],
+      'fixedEmiAmount': [''],
+      'isTopup': [''],
+      'maxOutstandingLoanBalance': ['']
+    });
+  }
+
+  /**
+   * 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/loans-routing.module.ts

@@ -18,6 +18,10 @@ import { OverdueChargesTabComponent } from './loans-view/overdue-charges-tab/ove
 import { ChargesTabComponent } from './loans-view/charges-tab/charges-tab.component';
 import { DatatableTabComponent } from './loans-view/datatable-tab/datatable-tab.component';
 import { LoanAccountActionsComponent } from './loans-view/loan-account-actions/loan-account-actions.component';
+import { FloatingInterestRatesComponent } from './loans-view/floating-interest-rates/floating-interest-rates.component';
+import { LoanTrancheDetailsComponent } from './loans-view/loan-tranche-details/loan-tranche-details.component';
+import { LoanCollateralTabComponent } from './loans-view/loan-collateral-tab/loan-collateral-tab.component';
+import { CreateLoansAccountComponent } from './create-loans-account/create-loans-account.component';
 
 /** Custom Resolvers */
 import { LoanChargeTemplateResolver } from './common-resolvers/loan-charge-template.resolver';
@@ -28,15 +32,22 @@ import { LoanDetailsChargesResolver } from './common-resolvers/loan-details-char
 import { LoanDatatablesResolver } from './common-resolvers/loan-datatables.resolver';
 import { LoanDatatableResolver } from './common-resolvers/loan-datatable.resolver';
 import { LoanActionButtonResolver } from './common-resolvers/loan-action-button.resolver';
-import { FloatingInterestRatesComponent } from './loans-view/floating-interest-rates/floating-interest-rates.component';
-import { LoanTrancheDetailsComponent } from './loans-view/loan-tranche-details/loan-tranche-details.component';
-import { LoanCollateralTabComponent } from './loans-view/loan-collateral-tab/loan-collateral-tab.component';
+import { LoansAccountTemplateResolver } from './common-resolvers/loans-account-template.resolver';
 
 const routes: Routes = [
   {
     path: '',
     // Component to View All existing Loans Comes Here
-    children: [{
+    children: [
+      {
+        path: 'create-loans-account',
+        data: { title: extract('Create Loans Account'), breadcrumb: 'Create Loans Account' },
+        component: CreateLoansAccountComponent,
+        resolve: {
+          loansAccountTemplate: LoansAccountTemplateResolver
+        }
+      },
+      {
       path: ':loanId',
       data: { title: extract('Loan View'), routeParamBreadcrumb: 'loanId' },
       component: LoansViewComponent,
@@ -177,7 +188,8 @@ const routes: Routes = [
     LoanDetailsChargesResolver,
     LoanDatatablesResolver,
     LoanDatatableResolver,
-    LoanActionButtonResolver
+    LoanActionButtonResolver,
+    LoansAccountTemplateResolver
   ]
 })
 

src/app/loans/loans.module.ts

@@ -36,6 +36,12 @@ import { LoanTrancheDetailsComponent } from './loans-view/loan-tranche-details/l
 import { CloseAsRescheduledComponent } from './loans-view/loan-account-actions/close-as-rescheduled/close-as-rescheduled.component';
 import { LoanRescheduleComponent } from './loans-view/loan-account-actions/loan-reschedule/loan-reschedule.component';
 import { LoanCollateralTabComponent } from './loans-view/loan-collateral-tab/loan-collateral-tab.component';
+import { CreateLoansAccountComponent } from './create-loans-account/create-loans-account.component';
+import { LoansAccountDetailsStepComponent } from './loans-account-stepper/loans-account-details-step/loans-account-details-step.component';
+import { LoansAccountTermsStepComponent } from './loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component';
+import { LoansAccountChargesStepComponent } from './loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component';
+import { LoansAccountPreviewStepComponent } from './loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component';
+import { LoansAccountAddCollateralDialogComponent } from './loans-account-add-collateral-dialog/loans-account-add-collateral-dialog.component';
 
 /**
  * Loans Module
@@ -72,6 +78,15 @@ import { LoanCollateralTabComponent } from './loans-view/loan-collateral-tab/loa
     CloseAsRescheduledComponent,
     LoanRescheduleComponent,
     LoanCollateralTabComponent,
+    CreateLoansAccountComponent,
+    LoansAccountDetailsStepComponent,
+    LoansAccountTermsStepComponent,
+    LoansAccountChargesStepComponent,
+    LoansAccountPreviewStepComponent,
+    LoansAccountAddCollateralDialogComponent,
+  ],
+  entryComponents: [
+    LoansAccountAddCollateralDialogComponent
   ],
   providers: [DatePipe],
 })

src/app/loans/loans.service.ts

@@ -164,7 +164,7 @@ export class LoansService {
     return this.http.delete(`/datatables/${datatableName}/${loanId}`, { params: httpParams });
   }
 
-  /*
+  /**
    * @param {string} loanId Loan Id.
    * @param {any} data Data.
    * @returns {Observable<any>}
@@ -174,7 +174,11 @@ export class LoansService {
     return this.http.post(`/loans/${loanId}`, data, {params: httpParams});
   }
 
-  getForeclosureData(loanId: any, foreclosuredata: any) {
+  /**
+   * @param {string|number} loanId Loan Id.
+   * @param {any} foreclosuredata ForeClosure Data
+   */
+  getForeclosureData(loanId: string|number, foreclosuredata: any) {
     const httpParams = new HttpParams().set('command', foreclosuredata.command)
                                        .set('dateFormat', foreclosuredata.dateFormat)
                                        .set('locale', foreclosuredata.locale)
@@ -183,19 +187,62 @@ export class LoansService {
 
   }
 
+  /**
+   * @param {string|number} loanId Loan Id
+   * @param {any} data Data
+   */
   loanForclosureData(loanId: any, data: any) {
     const httpParams = new HttpParams().set('command', 'foreclosure');
     return this.http.post(`/loans/${loanId}/transactions`, data, {params: httpParams});
   }
 
+  /**
+   * Returns the Reschedule Loans Template
+   */
   rescheduleLoanTemplate() {
     return this.http.get('/rescheduleloans/template');
   }
 
+  /**
+   * Submits Reschedule Data
+   * @param {any} data Data
+   */
   submitRescheduleData(data: any) {
-    // https://staging.mifos.io/fineract-provider/api/v1/rescheduleloans?command=reschedule
     const httpParams = new HttpParams().set('command', 'reschedule');
     return this.http.post('/rescheduleloans', data, {params: httpParams});
   }
 
+  /**
+   * Gets Loan Account Template
+   * @param {any} clientId Client ID
+   * @param {any} productId Product ID
+   */
+  getLoansAccountTemplateResource(clientId: any, productId?: any): Observable<any> {
+    let httpParams = new HttpParams().set('activeOnly', 'true')
+                                      .set('clientId', clientId)
+                                      .set('staffInSelectedOfficeOnly', 'true')
+                                      .set('templateType', 'individual');
+    httpParams = productId ? httpParams.set('productId', productId) : httpParams;
+    return this.http.get('/loans/template', { params: httpParams });
+  }
+
+  /**
+   * Get Loans Collateral Template
+   * @param {any} productId Product ID
+   */
+  getLoansCollateralTemplateResource(productId: any): Observable<any> {
+    const httpParams = new HttpParams().set('fields', 'id, loanCollateralOptions')
+                                  .set('productId', productId)
+                                  .set('templateType', 'collateral');
+    return this.http.get('/loans/template', { params: httpParams });
+  }
+
+  /**
+   * Creates Loans Account
+   * @param {any} loanAccount Loan Account
+   */
+  createLoansAccount(loanAccount: any): Observable<any> {
+    return this.http.post('/loans', loanAccount);
+  }
+
 }