Merge pull request #1479 from ramvr1256/collateral

feat: collateral module
2022-08-08 18:04:32 +05:30
parent 2c6fd4bc6b 22428de9b1
commit d95422a5c9
58 changed files with 1892 additions and 61 deletions
@@ -48,6 +48,7 @@ import { ClientActionsResolver } from './common-resolvers/client-actions.resolve
 import { ClientChargeViewResolver } from './common-resolvers/client-charge-view.resolver';
 import { ClientTransactionPayResolver } from './common-resolvers/client-transaction-pay.resolver';
 import { ClientDataAndTemplateResolver } from './common-resolvers/client-and-template.resolver';
+import { ClientCollateralResolver } from './common-resolvers/client-collateral.resolver';

 const routes: Routes = [
  Route.withShell([{
@@ -83,7 +84,8 @@ const routes: Routes = [
            data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false },
            resolve: {
              clientAccountsData: ClientAccountsResolver,
-              clientChargesData: ClientChargesResolver
+              clientChargesData: ClientChargesResolver,
+              clientCollateralData: ClientCollateralResolver
            }
          },
          {
@@ -234,6 +236,10 @@ const routes: Routes = [
            path: 'loans-accounts',
            loadChildren: () => import('../loans/loans.module').then(m => m.LoansModule)
          },
+          {
+            path: 'client-collateral',
+            loadChildren: () => import('../collaterals/collaterals.module').then(m => m.CollateralsModule)
+          },
          {
            path: 'fixed-deposits-accounts',
            loadChildren: () => import('../deposits/fixed-deposits/fixed-deposits.module').then(m => m.FixedDepositsModule)
@@ -285,7 +291,8 @@ const routes: Routes = [
    ClientActionsResolver,
    ClientChargeViewResolver,
    ClientTransactionPayResolver,
-    ClientDataAndTemplateResolver
+    ClientDataAndTemplateResolver,
+    ClientCollateralResolver
  ]
 })
 export class ClientsRoutingModule { }
@@ -0,0 +1,82 @@
+<div class="container">
+
+    <mat-card>
+
+        <form [formGroup]="clientCollateralForm" (ngSubmit)="submit()">
+
+            <mat-card-content>
+
+                <div fxLayout="column">
+                    <mat-form-field>
+                        <mat-label>Collateral</mat-label>
+                        <mat-select required formControlName="collateralId">
+                            <mat-option *ngFor="let clientCollateral of clientCollateralOptions" [value]="clientCollateral.id">
+                                {{ clientCollateral.name }}
+                            </mat-option>
+                        </mat-select>
+                        <mat-error *ngIf="clientCollateralForm.controls.collateralId.hasError('required')">
+                            Collateral is <strong>required</strong>
+                        </mat-error>
+                    </mat-form-field>
+                    
+                    <div *ngIf="collateralDetails" fxLayout="column">
+
+                        <mat-form-field>
+                            <mat-label>Name</mat-label>
+                            <input matInput required formControlName="name">
+                        </mat-form-field>
+
+                        <mat-form-field>
+                            <mat-label>Type/Quality</mat-label>
+                            <input matInput required formControlName="quality">
+                        </mat-form-field>
+
+                        <mat-form-field>
+                            <mat-label>Unit Type</mat-label>
+                            <input matInput required formControlName="unitType">
+                        </mat-form-field>
+
+                        <mat-form-field>
+                            <mat-label>Base Price</mat-label>
+                            <input matInput required formControlName="basePrice">
+                        </mat-form-field>
+
+                        <mat-form-field>
+                            <mat-label>Percentage To Base</mat-label>
+                            <input matInput required formControlName="pctToBase">
+                        </mat-form-field>
+
+                        <mat-form-field>
+                            <mat-label>Quantity</mat-label>
+                            <input matInput required formControlName="quantity">
+                            <mat-error *ngIf="clientCollateralForm.controls.quantity.hasError('required')">
+                                Quantity is <strong>required</strong>
+                            </mat-error>
+                        </mat-form-field>
+
+                        <mat-form-field>
+                            <mat-label>Total</mat-label>
+                            <input matInput required formControlName="totalValue">
+                        </mat-form-field>
+
+                        <mat-form-field>
+                            <mat-label>Total Collateral Value</mat-label>
+                            <input matInput required formControlName="totalCollateralValue">
+                        </mat-form-field>
+
+                    </div>
+
+                </div>
+
+            </mat-card-content>
+
+            <mat-card-actions fxLayoutGap="5px" fxLayout="row" fsLayout.xs="column" fxLayoutAlign="center">
+                <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+                <button mat-raised-button color="primary" [disabled]="!clientCollateralForm.valid">Submit</button> 
+            </mat-card-actions>
+
+        </form>
+    
+    </mat-card>
+
+</div>
@@ -0,0 +1,4 @@
+.container {
+    width: 37rem;
+  }
+  
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddClientCollateralComponent } from './add-client-collateral.component';
+
+describe('AddClientCollateralComponent', () => {
+  let component: AddClientCollateralComponent;
+  let fixture: ComponentFixture<AddClientCollateralComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AddClientCollateralComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddClientCollateralComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,115 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+
+/**
+ * Custom Services
+ */
+import { ClientsService } from 'app/clients/clients.service';
+import { ProductsService } from 'app/products/products.service';
+import { SettingsService } from 'app/settings/settings.service';
+
+@Component({
+  selector: 'mifosx-add-client-collateral',
+  templateUrl: './add-client-collateral.component.html',
+  styleUrls: ['./add-client-collateral.component.scss']
+})
+export class AddClientCollateralComponent implements OnInit {
+
+  /** Client Collateral Form */
+  clientCollateralForm: FormGroup;
+  /** Client Collateral Options */
+  clientCollateralOptions: any;
+  /** Client Id */
+  clientId: any;
+  /** Collateral Details */
+  collateralDetails: any;
+
+  /**
+   * Retirives Collateral Form from `resolve`
+   * @param {FormBuilder} formBuilder Form bUilder.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router.
+   * @param {ProductsService} productsService Products Service
+   */
+  constructor(
+    private formBuilder: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private productsService: ProductsService,
+    private clientsService: ClientsService,
+    private settingsService: SettingsService,
+    ) {
+      this.route.data.subscribe((data: { clientActionData: any }) => {
+        this.clientCollateralOptions = data.clientActionData;
+        console.log(this.clientCollateralOptions);
+      });
+      this.clientId = this.route.parent.snapshot.params['clientId'];
+    }
+
+  ngOnInit(): void {
+    this.createClientCollateralForm();
+    this.buildDependencies();
+  }
+
+  /**
+   * Subscribe to Form controls value changes
+   */
+  buildDependencies() {
+    this.clientCollateralForm.controls.collateralId.valueChanges.subscribe(collateralId => {
+      this.productsService.getCollateral(collateralId).subscribe((data: any) => {
+        this.collateralDetails = data;
+        console.log(data);
+        this.clientCollateralForm.patchValue({
+          'name': data.name,
+          'quality': data.quality,
+          'unitType': data.unitType,
+          'basePrice': this.collateralDetails.basePrice,
+          'pctToBase': this.collateralDetails.pctToBase,
+        });
+      });
+    });
+    this.clientCollateralForm.controls.quantity.valueChanges.subscribe((quantity: any) => {
+      this.clientCollateralForm.patchValue({
+        'totalValue': this.collateralDetails.basePrice * quantity,
+        'totalCollateralValue': this.collateralDetails.basePrice * this.collateralDetails.pctToBase * quantity / 100
+      });
+    });
+  }
+
+  /**
+   * Creates the Clients Collaterals Form
+   */
+  createClientCollateralForm() {
+    this.clientCollateralForm = this.formBuilder.group({
+      'collateralId': [ '', Validators.required ],
+      'quantity': [ '', Validators.required ],
+      'name': [{ value: '', disabled: true }],
+      'quality': [{value: '', disabled: true}],
+      'unitType': [{value: '', disabled: true}],
+      'basePrice': [{value: '', disabled: true}],
+      'pctToBase': [{value: '', disabled: true}],
+      'totalValue': [{value: '', disabled: true}],
+      'totalCollateralValue': [{value: '', disabled: true}],
+    });
+  }
+
+  /**
+   * Submits Client Collateral
+   */
+  submit() {
+    const collateralId = this.clientCollateralForm.value.collateralId;
+    const quantity = this.clientCollateralForm.value.quantity;
+    const locale = this.settingsService.language.code;
+    const clientCollateral = {
+      collateralId,
+      quantity,
+      locale
+    };
+    this.clientsService.createClientCollateral(this.clientId, clientCollateral).subscribe(() => {
+      this.router.navigate(['../../'], {relativeTo: this.route});
+    });
+  }
+
+}
@@ -15,3 +15,4 @@
 <mifosx-take-survey *ngIf="actions['Take Survey']"></mifosx-take-survey>
 <mifosx-client-screen-reports *ngIf="actions['Client Screen Reports']"></mifosx-client-screen-reports>
 <mifosx-create-self-service-user *ngIf="actions['Create Self Service User']"></mifosx-create-self-service-user>
+<mifosx-add-client-collateral *ngIf="actions['Create Collateral']"></mifosx-add-client-collateral>
@@ -29,7 +29,8 @@ export class ClientActionsComponent {
    'Add Charge': boolean
    'Take Survey': boolean
    'Client Screen Reports': boolean,
-    'Create Self Service User': boolean
+    'Create Self Service User': boolean,
+    'Create Collateral': boolean
  } = {
    'Assign Staff': false,
    'Close': false,
@@ -46,7 +47,8 @@ export class ClientActionsComponent {
    'Add Charge': false,
    'Take Survey': false,
    'Client Screen Reports': false,
-    'Create Self Service User': false
+    'Create Self Service User': false,
+    'Create Collateral': false
  };

  /**
@@ -97,6 +97,7 @@
      <button mat-raised-button [matMenuTriggerFor]="More">More</button>
      <mat-menu #More="matMenu">
        <button mat-menu-item (click)="doAction('Add Charge')" *mifosxHasPermission="'CREATE_CLIENTCHARGE'"> Add Charge </button>
+        <button mat-menu-item (click)="doAction('Create Collateral')">Create Collateral</button>
        <button mat-menu-item (click)="doAction('Survey')">Survey</button>
        <button mat-menu-item (click)="doAction('Update Default Savings')" *mifosxHasPermission="'UPDATESAVINGSACCOUNT_CLIENT'"> Update Default Savings </button>
        <button mat-menu-item (click)="doAction('Upload Signature')" *mifosxHasPermission="'CREATE_CLIENTIMAGE'"> Upload Signature </button>
@@ -72,6 +72,7 @@ export class ClientsViewComponent implements OnInit {
      case 'Reactivate':
      case 'Undo Rejection':
      case 'Add Charge':
+      case 'Create Collateral':
      case 'Create Self Service User':
      case 'Client Screen Reports':
        this.router.navigate([`actions/${name}`], { relativeTo: this.route });
@@ -600,4 +600,53 @@

  </table>

+  <!-- Collateral Data Table -->
+  <div class="heading-content">
+    <div fxLayout="column" fxFlex="50%">
+      <div class="heading-name">
+        <h3>Collateral Data</h3>
+      </div>
+    </div>
+    <div fxLayout="column" fxFlex="50%">
+      <div fxLayout="row" fxLayoutAlign="flex-end">
+        <button mat-raised-button class="f-right" color="primary" disabled>
+          View Collaterals
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <table mat-table [dataSource]="collaterals">
+    
+    <ng-container matColumnDef="ID">
+      <th mat-header-cell *matHeaderCellDef>ID</th>
+      <td mat-cell *matCellDef="let element">{{ element.collateralId }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="Name">
+      <th mat-header-cell *matHeaderCellDef>Name</th>
+      <td mat-cell *matCellDef="let element">{{ element.name }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="Quantity">
+      <th mat-header-cell *matHeaderCellDef>Quantity</th>
+      <td mat-cell *matCellDef="let element">{{ element.quantity }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="Total Value">
+      <th mat-header-cell *matHeaderCellDef>Total Value</th>
+      <td mat-cell *matCellDef="let element">{{ element.basePrice*element.quantity }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="Total Collateral Value">
+      <th mat-header-cell *matHeaderCellDef>Total Collateral Value</th>
+      <td mat-cell *matCellDef="let element">{{ element.pctToBase*element.basePrice*element.quantity/100 }}</td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="collateralsColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: collateralsColumns;"
+      [routerLink]="['../', 'client-collateral', row.collateralId]"></tr>
+
+  </table>
+
 </div>
@@ -29,6 +29,8 @@ export class GeneralTabComponent {
  closedSharesColumns: string[] = ['Account No', 'Share Account', 'Approved Shares', 'Pending For Approval Shares', 'Closed Date'];
  /** Upcoming Charges Columns */
  upcomingChargesColumns: string[] = ['Name', 'Due as of', 'Due', 'Paid', 'Waived', 'Outstanding', 'Actions'];
+  /** Collaterals Column */
+  collateralsColumns: string[] = ['ID', 'Name', 'Quantity', 'Total Value', 'Total Collateral Value'];

  /** Client Account Data */
  clientAccountData: any;
@@ -42,6 +44,8 @@ export class GeneralTabComponent {
  upcomingCharges: any;
  /** Client Summary Data */
  clientSummary: any;
+  /** Collaterals Data */
+  collaterals: any;

  /** Show Closed Loan Accounts */
  showClosedLoanAccounts = false;
@@ -67,12 +71,13 @@ export class GeneralTabComponent {
    private clientService: ClientsService,
    private router: Router
  ) {
-    this.route.data.subscribe((data: { clientAccountsData: any, clientChargesData: any, clientSummary: any }) => {
+    this.route.data.subscribe((data: { clientAccountsData: any, clientChargesData: any, clientSummary: any, clientCollateralData: any }) => {
      this.clientAccountData = data.clientAccountsData;
      this.savingAccounts = data.clientAccountsData.savingsAccounts;
      this.loanAccounts = data.clientAccountsData.loanAccounts;
      this.shareAccounts = data.clientAccountsData.shareAccounts;
      this.upcomingCharges = data.clientChargesData.pageItems;
+      this.collaterals = data.clientCollateralData;
      this.clientSummary = data.clientSummary ? data.clientSummary[0] : [];
      this.clientid = this.route.parent.snapshot.params['clientId'];
  });
@@ -57,6 +57,7 @@ import { ClientAddressStepComponent } from './client-stepper/client-address-step
 import { ClientFamilyMemberDialogComponent } from './client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component';
 import { CaptureImageDialogComponent } from './clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component';
 import { CreateSelfServiceUserComponent } from './clients-view/client-actions/create-self-service-user/create-self-service-user.component';
+import { AddClientCollateralComponent } from './clients-view/client-actions/add-client-collateral/add-client-collateral.component';


 /**
@@ -120,7 +121,8 @@ import { CreateSelfServiceUserComponent } from './clients-view/client-actions/cr
    ClientAddressStepComponent,
    ClientFamilyMemberDialogComponent,
    CaptureImageDialogComponent,
-    CreateSelfServiceUserComponent
+    CreateSelfServiceUserComponent,
+    AddClientCollateralComponent
  ],
  providers: [ ]

@@ -363,4 +363,18 @@ export class ClientsService {
    return this.http.post(`/users`, userData);
  }

+  /**
+   * @param clientId Client ID.
+   * @param collateralData Collateral Data
+   */
+  createClientCollateral(clientId: any, collateralData: any) {
+    return this.http.post(`/clients/${clientId}/collaterals`, collateralData);
+  }
+
+  /**
+   * @param clientId Client ID.
+   */
+  getCollateralTemplate(clientId: any) {
+    return this.http.get(`/clients/${clientId}/collaterals/template`);
+  }
 }
@@ -7,6 +7,7 @@ import { Observable } from 'rxjs';

 /** Custom Services */
 import { ClientsService } from '../clients.service';
+import { ProductsService } from 'app/products/products.service';

 /**
 * Client Actions data resolver.
@@ -16,8 +17,10 @@ export class ClientActionsResolver implements Resolve<Object> {

  /**
   * @param {ClientsService} clientsService Clients service.
+   * @param {ProductsService} productsService Products Service
   */
-  constructor(private clientsService: ClientsService) { }
+  constructor(private clientsService: ClientsService,
+    private productsService: ProductsService) { }

  /**
   * Returns the clients actions data.
@@ -42,6 +45,8 @@ export class ClientActionsResolver implements Resolve<Object> {
        return this.clientsService.getOffices();
      case 'Add Charge':
        return this.clientsService.getClientChargeTemplate(clientId);
+      case 'Create Collateral':
+        return this.productsService.getCollaterals();
      case 'Client Screen Reports':
        return this.clientsService.getClientReportTemplates();
      case 'Assign Staff':
@@ -0,0 +1,31 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { ClientsService } from '../clients.service';
+
+/**
+ * Client Charges data resolver.
+ */
+@Injectable()
+export class ClientCollateralResolver implements Resolve<Object> {
+
+    /**
+     * @param {ClientsService} clientsService Clients service.
+     */
+    constructor(private clientsService: ClientsService) { }
+
+    /**
+     * Returns the Client Collateral data.
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+        const clientId = route.parent.paramMap.get('clientId');
+        return this.clientsService.getCollateralTemplate(clientId);
+    }
+
+}
@@ -0,0 +1,52 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+/** Translation Imports */
+import { extract } from '../core/i18n/i18n.service';
+
+/** Custom Components */
+import { ViewCollateralComponent } from './view-collateral/view-collateral.component';
+
+/** Custom Resolvers */
+import { ClientCollateralResolver } from './common-resolvers/client-collateral.resolver';
+import { EditCollateralComponent } from './edit-collateral/edit-collateral.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    data: { title: extract('Collateral'), breadcrumb: 'Collateral', routeParamBreadcrumb: false },
+    children: [
+      {
+        path: ':collateralId',
+        data: { title: extract('Collateral View'), routeParamBreadcrumb: 'collateralId' },
+        children: [
+          {
+            path: '',
+            component: ViewCollateralComponent,
+            resolve: {
+              clientCollateralData: ClientCollateralResolver,
+            }
+          },
+          {
+            path: 'edit',
+            data: { title: extract('edit'), routeParamBreadcrumb: 'edit' },
+            component: EditCollateralComponent,
+            resolve: {
+              clientCollateralData: ClientCollateralResolver,
+            }
+          }
+        ]
+      }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+  declarations: [],
+  providers: [
+    ClientCollateralResolver,
+  ]
+})
+export class CollateralsRoutingModule { }
@@ -0,0 +1,30 @@
+/** Angular Imports */
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { DirectivesModule } from '../directives/directives.module';
+
+/** Custom Modules */
+import { SharedModule } from 'app/shared/shared.module';
+import { PipesModule } from '../pipes/pipes.module';
+
+/** Custom Components */
+import { CollateralsRoutingModule } from './collaterals-routing.module';
+import { ViewCollateralComponent } from './view-collateral/view-collateral.component';
+import { EditCollateralComponent } from './edit-collateral/edit-collateral.component';
+
+
+@NgModule({
+  declarations: [
+    ViewCollateralComponent,
+    EditCollateralComponent
+  ],
+  imports: [
+    CommonModule,
+    CollateralsRoutingModule,
+    SharedModule,
+    DirectivesModule,
+    PipesModule
+  ]
+})
+export class CollateralsModule { }
@@ -0,0 +1,51 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+/**
+ * Collaterals service.
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class CollateralsService {
+  /**
+   * @param {HttpClient} http Http Client to send requests.
+   */
+  constructor(private http: HttpClient) { }
+
+  getFilteredClients(orderBy: string, sortOrder: string, orphansOnly: boolean, displayName: string, officeId?: any): Observable<any> {
+    let httpParams = new HttpParams()
+      .set('displayName', displayName)
+      .set('orphansOnly', orphansOnly.toString())
+      .set('sortOrder', sortOrder)
+      .set('orderBy', orderBy);
+    if (officeId) {
+      httpParams = httpParams.set('officeId', officeId);
+    }
+    return this.http.get('/clients', { params: httpParams });
+  }
+
+  /**
+   * @returns {Observable<any>} Collaterals data
+   */
+   getClientCollateral(clientId: any, clientCollateralId: any): Observable<any> {
+    return this.http.get(`/clients/${clientId}/collaterals/${clientCollateralId}`);
+  }
+
+  /**
+   * @returns {Observable<any>} Collaterals data
+   */
+   updateClientCollateral(clientId: any, clientCollateralId: any, clientCollateralData: any): Observable<any> {
+    return this.http.put(`/clients/${clientId}/collaterals/${clientCollateralId}`, clientCollateralData);
+  }
+
+  /**
+   * @returns {Observable<any>} Delete Collaterals data
+   */
+   deleteCollateral(clientId: any, clientCollateralId: any): Observable<any> {
+    return this.http.delete(`/clients/${clientId}/collaterals/${clientCollateralId}`);
+  }
+}
@@ -0,0 +1,32 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { CollateralsService } from '../collaterals.service';
+
+/**
+ * Client Collateral data resolver.
+ */
+@Injectable()
+export class ClientCollateralResolver implements Resolve<Object> {
+
+    /**
+     * @param {CollateralsService} collateralsService Collaterals service.
+     */
+    constructor(private collateralsService: CollateralsService) { }
+
+    /**
+     * Returns the Client Collateral data.
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+        const clientId = route.parent.paramMap.get('clientId');
+        const collateralId = route.parent.paramMap.get('collateralId');
+        return this.collateralsService.getClientCollateral(clientId, collateralId);
+    }
+
+}
@@ -0,0 +1,51 @@
+<div class="container">
+
+    <mat-card>
+
+        <form [formGroup]="clientCollateralForm" (ngSubmit)="submit()">
+
+            <mat-card-content>
+
+                <div fxLayout="column">
+                    
+                    <div fxLayout="column">
+
+                        <mat-form-field>
+                            <mat-label>Name</mat-label>
+                            <input matInput required formControlName="name">
+                        </mat-form-field>
+
+                        <mat-form-field>
+                            <mat-label>Quantity</mat-label>
+                            <input matInput required formControlName="quantity">
+                            <mat-error *ngIf="clientCollateralForm.controls.quantity.hasError('required')">
+                                Quantity is <strong>required</strong>
+                            </mat-error>
+                        </mat-form-field>
+
+                        <mat-form-field>
+                            <mat-label>Total</mat-label>
+                            <input matInput required formControlName="total">
+                        </mat-form-field>
+
+                        <mat-form-field>
+                            <mat-label>Total Collateral Value</mat-label>
+                            <input matInput required formControlName="totalCollateral">
+                        </mat-form-field>
+
+                    </div>
+
+                </div>
+
+            </mat-card-content>
+
+            <mat-card-actions fxLayoutGap="5px" fxLayout="row" fsLayout.xs="column" fxLayoutAlign="center">
+                <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+                <button mat-raised-button color="primary" [disabled]="!clientCollateralForm.valid">Submit</button> 
+            </mat-card-actions>
+
+        </form>
+    
+    </mat-card>
+
+</div>
@@ -0,0 +1,4 @@
+.container {
+    width: 37rem;
+  }
+  
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditCollateralComponent } from './edit-collateral.component';
+
+describe('EditCollateralComponent', () => {
+  let component: EditCollateralComponent;
+  let fixture: ComponentFixture<EditCollateralComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ EditCollateralComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditCollateralComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,86 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+
+/** Custom Services */
+import { SettingsService } from 'app/settings/settings.service';
+import { CollateralsService } from '../collaterals.service';
+
+@Component({
+  selector: 'mifosx-edit-collateral',
+  templateUrl: './edit-collateral.component.html',
+  styleUrls: ['./edit-collateral.component.scss']
+})
+export class EditCollateralComponent implements OnInit {
+
+
+  /** Client Collateral Form */
+  clientCollateralForm: FormGroup;
+  /** Client Collateral Options */
+  clientCollateralOptions: any;
+  /** Client Id */
+  clientId: any;
+  /** Collateral Details */
+  collateralDetails: any;
+
+  /**
+   * Retirives Collateral Form from `resolve`
+   * @param {FormBuilder} formBuilder Form bUilder.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router.
+   * @param {SettingsService} settingsService Settings Service
+   * @param {CollateralsService} collateralService Collateral Service
+   */
+  constructor(
+    private formBuilder: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private settingsService: SettingsService,
+    private collateralService: CollateralsService
+    ) {
+      this.route.data.subscribe((data: { clientCollateralData: any }) => {
+        this.collateralDetails = data.clientCollateralData;
+      });
+      this.clientId = this.route.parent.snapshot.params['clientId'];
+    }
+
+  ngOnInit(): void {
+    this.createClientCollateralForm();
+  }
+
+  /**
+   * Creates the Edit Clients Collaterals Form
+   */
+  createClientCollateralForm() {
+    this.clientCollateralForm = this.formBuilder.group({
+      'quantity': [ '', Validators.required ],
+      'name': [{ value: '', disabled: true }],
+      'total': [{value: '', disabled: true}],
+      'totalCollateral': [{value: '', disabled: true}],
+    });
+    this.clientCollateralForm.patchValue({
+      'name': this.collateralDetails.name,
+      'quantity': this.collateralDetails.quantity,
+      'total': this.collateralDetails.total,
+      'totalCollateral': this.collateralDetails.totalCollateral,
+    });
+  }
+
+  /**
+   * Submits Updated Client Collateral
+   */
+  submit() {
+    const collateralId = this.collateralDetails.id;
+    const quantity = this.clientCollateralForm.value.quantity;
+    const locale = this.settingsService.language.code;
+    const clientCollateralData = {
+      quantity,
+      locale
+    };
+    this.collateralService.updateClientCollateral(this.clientId, collateralId, clientCollateralData).subscribe(() => {
+      this.router.navigate(['../'], {relativeTo: this.route});
+    });
+  }
+
+}
@@ -0,0 +1,71 @@
+<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
+    <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CHARGE'">
+      <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+      Edit
+    </button>
+    <button mat-raised-button color="warn" (click)="deleteCollateral()" *mifosxHasPermission="'DELETE_CHARGE'">
+      <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+      Delete
+    </button>
+  </div>
+  
+<mat-card class="client-collateral-card">
+
+    <mat-card-content class="content">\
+
+        <div class="tab-container mat-typography">
+
+            <h3>Client Collateral Details</h3>
+          
+            <div fxLayout="row" fxLayoutGap="32px" class="group-details-container m-b-30">
+              <p>
+                Name: {{ clientCollateralData.name }}<br/>
+                Quantity: {{ clientCollateralData.quantity }}<br/>
+                Total Value: {{ clientCollateralData.total }}<br/>
+                Total Collateral Value: {{ clientCollateralData.totalCollateral }}<br/>
+              </p>
+              
+            </div>
+        
+
+            <h3>Transaction Details</h3>
+
+            <table mat-table [dataSource]="clientCollateralData.loanTransactionData"
+            class="mat-elevation-z1 m-b-30">
+
+            <ng-container matColumnDef="ID">
+                <th mat-header-cell *matHeaderCellDef> ID </th>
+                <td mat-cell *matCellDef="let element">
+                {{element.loanId}}
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="Last Repayment">
+                <th mat-header-cell *matHeaderCellDef>Last Repayment</th>
+                <td mat-cell *matCellDef="let element"> {{element.lastRepayment}} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="Remaining Amount">
+                <th mat-header-cell *matHeaderCellDef> Remaining Amount </th>
+                <td mat-cell *matCellDef="let element"> {{element.remainingAmount}} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="Last Repayment Date">
+                <th mat-header-cell *matHeaderCellDef> Last Repayment Date </th>
+                <td mat-cell *matCellDef="let element"> {{element.lastRepaymentDate | dateFormat}} </td>
+
+            </ng-container>
+
+            <!-- <tr mat-header-row *matHeaderRowDef="clientMemberColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: clientMemberColumns;" [routerLink]="['/clients', row.id, 'loans-accounts', 'create']" class="select-row"></tr> -->
+            <tr mat-header-row *matHeaderRowDef="collateralColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: collateralColumns;"></tr>
+      
+            </table>
+
+        </div>
+
+
+    </mat-card-content>
+        
+</mat-card>
@@ -0,0 +1,36 @@
+.client-collateral-card {
+    margin: 0 auto;
+    max-width: 80rem;
+    width: 90%;
+    padding: 0;
+}
+.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;
+    }
+  }
+  
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ViewCollateralComponent } from './view-collateral.component';
+
+describe('ViewCollateralComponent', () => {
+  let component: ViewCollateralComponent;
+  let fixture: ComponentFixture<ViewCollateralComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ViewCollateralComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ViewCollateralComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,52 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { CollateralsService } from '../collaterals.service';
+import { MatDialog } from '@angular/material/dialog';
+
+/** Custom Components */
+import { DeleteDialogComponent } from '../../shared/delete-dialog/delete-dialog.component';
+
+
+@Component({
+  selector: 'mifosx-view-collateral',
+  templateUrl: './view-collateral.component.html',
+  styleUrls: ['./view-collateral.component.scss']
+})
+export class ViewCollateralComponent implements OnInit {
+
+  clientCollateralData: any;
+
+  collateralColumns: string[] = ['ID', 'Last Repayment', 'Remaining Amount', 'Last Repayment Date'];
+
+  constructor(
+    private route: ActivatedRoute,
+    private collateralsService: CollateralsService,
+    private router: Router,
+    private dialog: MatDialog
+  ) {
+    this.route.data.subscribe((data: {clientCollateralData: any}) => {
+      this.clientCollateralData = data.clientCollateralData;
+    });
+  }
+
+  ngOnInit(): void {
+  }
+
+  /**
+   * Deletes the Collateral and redirects to CLients Page.
+   */
+   deleteCollateral() {
+    const deleteCollateralDialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `collateral ${this.clientCollateralData.id}` }
+    });
+    deleteCollateralDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.collateralsService.deleteCollateral(this.clientCollateralData.clientId, this.clientCollateralData.id)
+          .subscribe(() => {
+            this.router.navigate(['../../'], { relativeTo: this.route });
+          });
+      }
+    });
+  }
+
+}
@@ -47,7 +47,7 @@

      <mifosx-loans-account-charges-step [loansAccountProductTemplate]="loansAccountProductTemplate"
        [loansAccountTemplate]="loansAccountTemplate" [collateralOptions]="collateralOptions"
-        [loansAccountFormValid]="loansAccountFormValid">
+        [loansAccountFormValid]="loansAccountFormValid" [loanPrincipal]="loanPrincipal">
      </mifosx-loans-account-charges-step>

    </mat-step>
@@ -5,6 +5,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 /** Custom Services */
 import { LoansService } from '../loans.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { ClientsService } from 'app/clients/clients.service';

 /** Step Components */
 import { LoansAccountDetailsStepComponent } from '../loans-account-stepper/loans-account-details-step/loans-account-details-step.component';
@@ -35,6 +36,8 @@ export class CreateLoansAccountComponent implements OnInit {
  collateralOptions: any;
  /** Multi Disburse Loan */
  multiDisburseLoan: any;
+  /** Principal Amount */
+  principal: any;

  /**
   * Sets loans account create form.
@@ -43,12 +46,14 @@ export class CreateLoansAccountComponent implements OnInit {
   * @param {Dates} dateUtils Date Utils
   * @param {loansService} LoansService Loans Service
   * @param {SettingsService} settingsService Settings Service
+   * @param {ClientsService} clientService Client Service
   */
  constructor(private route: ActivatedRoute,
    private router: Router,
    private dateUtils: Dates,
    private loansService: LoansService,
-    private settingsService: SettingsService
+    private settingsService: SettingsService,
+    private clientService: ClientsService
  ) {
    this.route.data.subscribe((data: { loansAccountTemplate: any }) => {
      this.loansAccountTemplate = data.loansAccountTemplate;
@@ -64,8 +69,9 @@ export class CreateLoansAccountComponent implements OnInit {
   */
  setTemplate($event: any) {
    this.loansAccountProductTemplate = $event;
-    this.loansService.getLoansCollateralTemplateResource(this.loansAccountProductTemplate.loanProductId).subscribe((response: any) => {
-      this.collateralOptions = response.loanCollateralOptions;
+    const clientId = this.loansAccountTemplate.clientId;
+    this.clientService.getCollateralTemplate(clientId).subscribe((response: any) => {
+      this.collateralOptions = response;
    });
    const entityId = (this.loansAccountTemplate.clientId) ? this.loansAccountTemplate.clientId : this.loansAccountTemplate.group.id;
    const isGroup = (this.loansAccountTemplate.clientId) ? false : true;
@@ -89,10 +95,16 @@ export class CreateLoansAccountComponent implements OnInit {
  get loansAccountFormValid() {
    return (
      this.loansAccountDetailsForm.valid &&
-      this.loansAccountTermsForm.valid
+      this.loansAccountTermsForm.valid &&
+      this.loansAccountChargesStep.loansAccountCharges.isValid
    );
  }

+  /** Gets principal Amount */
+  get loanPrincipal() {
+    return this.loansAccountTermsStep.loansAccountTermsForm.value.principal;
+  }
+
  /** Retrieves Data of all forms except Currency to submit the data */
  get loansAccount() {
    return {
@@ -116,9 +128,8 @@ export class CreateLoansAccountComponent implements OnInit {
        dueDate: charge.dueDate && this.dateUtils.formatDate(charge.dueDate, dateFormat),
      })),
      collateral: this.loansAccount.collateral.map((collateralEle: any) => ({
-        type: collateralEle.type,
-        value: collateralEle.value,
-        description: collateralEle.description
+        clientCollateralId: collateralEle.type.collateralId,
+        quantity: collateralEle.value,
      })),
      disbursementData: this.loansAccount.disbursementData.map((item: any) => ({
        expectedDisbursementDate: this.dateUtils.formatDate(item.expectedDisbursementDate, dateFormat),
@@ -157,6 +168,7 @@ export class CreateLoansAccountComponent implements OnInit {
    if (!(this.multiDisburseLoan)) {
      delete loansAccountData.disbursementData;
    }
+    delete loansAccountData.isValid;

    this.loansService.createLoansAccount(loansAccountData).subscribe((response: any) => {
      this.router.navigate(['../', response.resourceId], { relativeTo: this.route });
@@ -3,31 +3,36 @@
 <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">
+    <mat-label>Collateral</mat-label>
+    <mat-select formControlName="collateral" required>
+      <mat-option *ngFor="let collateralType of collateralTypeData" [value]="collateralType" >
        {{ collateralType.name }}
      </mat-option>
    </mat-select>
    <mat-error>
-      Collateral Type is <strong>required</strong>
+      Collateral 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-label>Quantity</mat-label>
+    <input type="number" [max]="maxQuantity" [min]="0" matInput formControlName="quantity" required>
+    <mat-error *ngIf="addCollateralForm.controls.quantity.hasError('required')">
+      Quantity is <strong>required</strong>
+    </mat-error>
+    <mat-error *ngIf="addCollateralForm.controls.quantity.hasError('max')">
+      Quantity can not be more than <strong>{{ maxQuantity }}</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-label>Total Value</mat-label>
+    <input type="text" matInput formControlName="totalValue" [disabled]="true">
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>Total Collateral Value</mat-label>
+    <input type="text" matInput formControlName="totalCollateralValue" [disabled]="true">
  </mat-form-field>

 </div>
@@ -16,7 +16,12 @@ export class LoansAccountAddCollateralDialogComponent implements OnInit {
    };

  addCollateralForm: FormGroup;
+  /** All Collateral Options */
  collateralTypeData: any;
+  /** Selected Collateral */
+  collateralData: any;
+  /** Maximum ALlowed Quantity of selected collateral  */
+  maxQuantity: any = 0;

  constructor(public dialogRef: MatDialogRef<LoansAccountAddCollateralDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any,
@@ -26,14 +31,33 @@ export class LoansAccountAddCollateralDialogComponent implements OnInit {

  ngOnInit() {
    this.dialogRef.updateSize('400px');
-    this.collateralTypeData = this.data.collateralTypeOptions;
+    this.collateralTypeData = this.data.collateralOptions;
+    this.buildDependencies();
  }

  createAddCollateralForm() {
    this.addCollateralForm = this.formBuilder.group({
-      'type': ['', Validators.required],
-      'value': ['', Validators.required],
-      'description': ['', Validators.required]
+      'collateral': ['', Validators.required],
+      'quantity': ['', Validators.required],
+      'totalValue': [{value: '', disabled: true}],
+      'totalCollateralValue': [{value: '', disabled: true}],
+    });
+  }
+
+  /**
+   * Subscribe to Form controls value changes
+   */
+   buildDependencies() {
+    this.addCollateralForm.controls.collateral.valueChanges.subscribe((collateral: any) => {
+      this.collateralData = collateral;
+      this.maxQuantity = collateral.quantity;
+    });
+
+    this.addCollateralForm.controls.quantity.valueChanges.subscribe((quantity: any) => {
+      this.addCollateralForm.patchValue({
+        'totalValue': this.collateralData.basePrice * quantity,
+        'totalCollateralValue': this.collateralData.basePrice * this.collateralData.pctToBase * quantity / 100
+      });
    });
  }

@@ -135,18 +135,23 @@
  <table mat-table class="mat-elevation-z1" [dataSource]="collateralDataSource">

    <ng-container matColumnDef="type">
-      <th mat-header-cell *matHeaderCellDef> Type </th>
+      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let ele"> {{ ele.type.name }} </td>
    </ng-container>

    <ng-container matColumnDef="value">
-      <th mat-header-cell *matHeaderCellDef> Value </th>
+      <th mat-header-cell *matHeaderCellDef> Quantity </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 matColumnDef="totalValue">
+      <th mat-header-cell *matHeaderCellDef> Total Value </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.type.basePrice*ele.value }} </td>
+    </ng-container>
+    
+    <ng-container matColumnDef="totalCollateralValue">
+      <th mat-header-cell *matHeaderCellDef> Total Collateral Value </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.type.pctToBase*ele.type.basePrice*ele.value/100 }} </td>
    </ng-container>

    <ng-container matColumnDef="action">
@@ -169,7 +174,7 @@
    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
    Previous
  </button>
-  <button mat-raised-button matStepperNext [disabled]="!loansAccountFormValid">
+  <button mat-raised-button matStepperNext [disabled]="!isCollateralSufficient">
    Next&nbsp;&nbsp;
    <fa-icon icon="arrow-right"></fa-icon>
  </button>
@@ -31,8 +31,10 @@ export class LoansAccountChargesStepComponent implements OnInit, OnChanges {
  @Input() loansAccountTemplate: any;
  // @Input() loansAccountFormValid: LoansAccountFormValid
  @Input() loansAccountFormValid: boolean;
-  // @Input collateralOptionsL Collateral Options
+  // @Input collateralOptions: Collateral Options
  @Input() collateralOptions: any;
+  // @Input loanPrincipal: Loan Principle
+  @Input() loanPrincipal: any;

  /** Charges Data */
  chargeData: any;
@@ -47,9 +49,13 @@ export class LoansAccountChargesStepComponent implements OnInit, OnChanges {
  /** 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'];
+  loanCollateralDisplayedColumns: string[] = ['type', 'value', 'totalValue', 'totalCollateralValue', 'action'];
  /** Component is pristine if there has been no changes by user interaction */
  pristine = true;
+  /** Check if value of collateral added  is more than principal amount */
+  isCollateralSufficient = false;
+  /** Total value of all collateral added to a loan */
+  totalCollateralValue: any = 0;

  /**
   * Loans Account Charges Form Step
@@ -207,33 +213,53 @@ export class LoansAccountChargesStepComponent implements OnInit, OnChanges {
    });
  }

-  // TODO: Needs to be completed
+  /**
+   * Add a Collateral to the loan
+   */
  addCollateral() {
    const addCollateralDialogRef = this.dialog.open(LoansAccountAddCollateralDialogComponent, {
      data: { collateralOptions: this.collateralOptions }
    });
+    console.log(this.collateralOptions);
    addCollateralDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.addCollateralForm) {
+      console.log(this.loanPrincipal);
+      if (response.data) {
        const collateralData = {
-          type: response.addCollateralForm.value.type,
-          value: response.addCollateralForm.value.value,
-          description: response.addCollateralForm.value.description
+          type: response.data.value.collateral,
+          value: response.data.value.quantity,
        };
-        this.collateralDataSource = this.collateralDataSource.concat(collateralData);

+        this.totalCollateralValue += collateralData.type.pctToBase * collateralData.type.basePrice * collateralData.value / 100;
+        this.collateralDataSource = this.collateralDataSource.concat(collateralData);
+        this.collateralOptions = this.collateralOptions.filter( (user: any) => user.collateralId !== response.data.value.collateral.collateralId);
+        if (this.loanPrincipal < this.totalCollateralValue) {
+          this.isCollateralSufficient = true;
+        } else {
+          this.isCollateralSufficient = false;
+        }
      }
    });
  }
-
+  /**
+   * Delete a added collateral from loan
+   * @param id ID od the collateral to be deleted
+   */
  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);
+        const removed: any = this.collateralDataSource.splice(id, 1);
+        this.collateralOptions = this.collateralOptions.concat(removed[0].type);
+        this.totalCollateralValue -= removed[0].type.pctToBase * removed[0].type.basePrice * removed[0].value / 100;
        this.collateralDataSource = this.collateralDataSource.concat([]);
        this.pristine = false;
+        if (this.loanPrincipal < this.totalCollateralValue) {
+          this.isCollateralSufficient = true;
+        } else {
+          this.isCollateralSufficient = false;
+        }
      }
    });
  }
@@ -244,7 +270,8 @@ export class LoansAccountChargesStepComponent implements OnInit, OnChanges {
  get loansAccountCharges() {
    return {
      charges: this.chargesDataSource,
-      collateral: this.collateralDataSource
+      collateral: this.collateralDataSource,
+      isValid: this.isCollateralSufficient
    };
  }

@@ -2,19 +2,24 @@

  <table mat-table [dataSource]="loanDetails.collateral">

-    <ng-container matColumnDef="type">
-      <th mat-header-cell *matHeaderCellDef> Type </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.type.name }} </td>
+    <ng-container matColumnDef="id">
+      <th mat-header-cell *matHeaderCellDef> ID </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.clientCollateralId }} </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 matColumnDef="quantity">
+      <th mat-header-cell *matHeaderCellDef> Quantity </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.quantity }} </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 matColumnDef="total">
+      <th mat-header-cell *matHeaderCellDef> Total Value </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.total }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="totalCollateral">
+      <th mat-header-cell *matHeaderCellDef> Total Collateral Value </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.totalCollateral }} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
@@ -11,7 +11,7 @@ export class LoanCollateralTabComponent implements OnInit {
  /** Loan Details */
  loanDetails: any;
  /** Columns to be displayed in collateral table. */
-  displayedColumns: string[] = ['type', 'value', 'description'];
+  displayedColumns: string[] = ['id', 'quantity', 'total', 'totalCollateral'];

  /**
   * Retrieves the loans data from `resolve`.
@@ -0,0 +1,31 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { ProductsService } from '../products.service';
+
+/**
+ * Charges data resolver.
+ */
+@Injectable()
+export class CollateralResolver implements Resolve<Object> {
+
+  /**
+   * @param {ProductsService} productsService Products service.
+   */
+  constructor(private productsService: ProductsService) {}
+
+  /**
+   * Returns the products data.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const collateralId = route.paramMap.get('id');
+    return this.productsService.getCollateral(collateralId);
+  }
+
+}
@@ -0,0 +1,28 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom services */
+import { ProductsService } from '../products.service';
+
+/**
+ * Collaterals Template Resolver
+ */
+@Injectable()
+export class CollateralTemplateResolver implements Resolve<Object> {
+    /**
+     * @param {ProductsService} productsService products Service
+     */
+    constructor(private productsService: ProductsService) {}
+
+    /**
+     * Returns the product Data.
+     * @returns {Observable<any>}
+     */
+    resolve(): Observable<any> {
+        return this.productsService.getCollateralTemplate();
+    }
+}
@@ -0,0 +1,56 @@
+<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
+    <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CHARGE'">
+      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      Create Collateral
+    </button>
+  </div>
+  
+  <div class="container">
+  
+    <div fxLayout="row" fxLayoutGap="20px">
+      <mat-form-field fxFlex>
+        <mat-label>Filter</mat-label>
+        <input matInput (keyup)="applyFilter($event.target.value)">
+      </mat-form-field>
+    </div>
+  
+    <div class="mat-elevation-z8">
+  
+      <table mat-table [dataSource]="dataSource" matSort>
+  
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+          <td mat-cell *matCellDef="let collateral"> {{ collateral.name }} </td>
+        </ng-container>
+  
+        <ng-container matColumnDef="quality">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Quality/Type </th>
+          <td mat-cell *matCellDef="let collateral"> {{ collateral.quality }} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="basePrice">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Base Price </th>
+          <td mat-cell *matCellDef="let collateral"> {{ collateral.basePrice }} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="basePercentage">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Base Percentage </th>
+          <td mat-cell *matCellDef="let collateral"> {{ collateral.pctToBase }} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="unitType">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Unit Type </th>
+          <td mat-cell *matCellDef="let collateral"> {{ collateral.unitType }} </td>
+        </ng-container>
+  
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
+  
+      </table>
+  
+      <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+  
+    </div>
+  
+  </div>
+  
@@ -0,0 +1,24 @@
+table {
+    width: 100%;
+  
+    .select-row:hover {
+      cursor: pointer;
+    }
+  }
+  
+  .true {
+    color: #32cd32;
+  }
+  
+  .false {
+    color: #f44366;
+  }
+  
+  .ispenalty {
+    color: #32cd32;
+  }
+  
+  .nopenalty {
+    color: #f44366;
+  }
+  
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CollateralsComponent } from './collaterals.component';
+
+describe('CollateralsComponent', () => {
+  let component: CollateralsComponent;
+  let fixture: ComponentFixture<CollateralsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CollateralsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CollateralsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,61 @@
+/** Angular Imports */
+import { Component, ViewChild, OnInit } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'mifosx-collaterals',
+  templateUrl: './collaterals.component.html',
+  styleUrls: ['./collaterals.component.scss']
+})
+export class CollateralsComponent implements OnInit {
+
+  /** Collateral Data */
+  collateralData: any;
+  /** Columns to be displayed in the Collaterals Table */
+  displayedColumns: string[] = ['name', 'quality', 'basePrice', 'basePercentage', 'unitType'];
+  /** DataSource for the Collateral Table */
+  dataSource: MatTableDataSource<any>;
+
+  /** Paginator for the Collateral Table */
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  /** Sorter for Collateral Table */
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+
+  /**
+   * Retrieves the Collaterals data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   */
+   constructor(private route: ActivatedRoute) {
+    this.route.data.subscribe(( data: { collaterals: any }) => {
+      this.collateralData = data.collaterals;
+    });
+  }
+
+  /**
+   * Filters data in collateral table based on passed value.
+   * @param {string} filterValue Value to filter data.
+   */
+  applyFilter(filterValue: string) {
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
+  /**
+   * Sets the collateral table.
+   */
+  ngOnInit() {
+    this.setCollaterals();
+  }
+
+  /**
+   * Initializes the data source, paginator and sorter for collateral table.
+   */
+   setCollaterals() {
+    this.dataSource = new MatTableDataSource(this.collateralData);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+}
@@ -0,0 +1,28 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { ProductsService } from '../products.service';
+
+/**
+ * Collaterals data resolver
+ */
+@Injectable()
+export class CollateralsResolver implements Resolve<Object> {
+    /**
+     * @param {ProductsService} productsService Products service
+     */
+    constructor(private productsService: ProductsService) {}
+
+    /**
+     * Returns the All Collaterals Data
+     * @returns {Observable<any>}
+     */
+    resolve(): Observable<any> {
+        return this.productsService.getCollaterals();
+    }
+}
@@ -0,0 +1,71 @@
+<div class="container">
+    
+    <mat-card>
+
+        <form [formGroup]="collateralForm" (ngSubmit)="submit()">
+
+            <mat-card-content>
+
+                <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+                    <mat-form-field fxFlex="48%">
+                        <mat-label>Name</mat-label>
+                        <input matInput required formControlName="name">
+                        <mat-error *ngIf="collateralForm.controls.name.hasError('required')">
+                            Name is <strong>required</strong>
+                        </mat-error>
+                    </mat-form-field>
+                    <mat-form-field fxFlex="48%">
+                        <mat-label>Type/Quality</mat-label>
+                        <input matInput required formControlName="quality">
+                        <mat-error *ngIf="collateralForm.controls.quality.hasError('required')">
+                            Quality is <strong>required</strong>
+                        </mat-error>
+                    </mat-form-field>
+                    <mat-form-field fxFlex="48%">
+                        <mat-label>Unit Type</mat-label>
+                        <input matInput required formControlName="unitType">
+                        <mat-error *ngIf="collateralForm.controls.unitType.hasError('required')">
+                           Unit Type is <strong>required</strong>
+                        </mat-error>
+                    </mat-form-field>
+                    <mat-form-field fxFlex="48%">
+                        <mat-label>Base Price</mat-label>
+                        <input matInput required formControlName="basePrice">
+                        <mat-error *ngIf="collateralForm.controls.basePrice.hasError('required')">
+                            Base Price is <strong>required</strong>
+                        </mat-error>
+                    </mat-form-field>
+                    <mat-form-field fxFlex="48%">
+                        <mat-label>Percentage to Base</mat-label>
+                        <input matInput required formControlName="pctToBase">
+                        <mat-error *ngIf="collateralForm.controls.pctToBase.hasError('required')">
+                            Percentage to Base is <strong>required</strong>
+                        </mat-error>
+                    </mat-form-field>
+                    <mat-form-field fxFlex="48%">
+                        <mat-label>Currency</mat-label>
+                        <mat-select required formControlName="currency">
+                            <mat-option *ngFor="let currency of collateralTemplateData" [value]="currency.code">
+                            {{ currency.name }}
+                            </mat-option>
+                        </mat-select>
+                        <mat-error *ngIf="collateralForm.controls.currency.hasError('required')">
+                            Currency is <strong>required</strong>
+                        </mat-error>
+                    </mat-form-field>
+
+                </div>
+                
+            </mat-card-content>
+
+            <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+                <button type="button" mat-raised-button [routerLink]="['../']"> Cancel</button>
+                <button mat-raised-button color="primary" [disabled]="!collateralForm.valid" *mifosxHasPermission="'CREATE_CHARGE'">Submit</button>
+            </mat-card-actions>
+
+        </form>
+
+    </mat-card>
+
+</div>
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateCollateralComponent } from './create-collateral.component';
+
+describe('CreateCollateralComponent', () => {
+  let component: CreateCollateralComponent;
+  let fixture: ComponentFixture<CreateCollateralComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CreateCollateralComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateCollateralComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,82 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
+
+/** Custom Services */
+import { ProductsService } from '../../products.service';
+import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
+
+/**
+ * Create Collateral component.
+ */
+@Component({
+  selector: 'mifosx-create-collateral',
+  templateUrl: './create-collateral.component.html',
+  styleUrls: ['./create-collateral.component.scss']
+})
+export class CreateCollateralComponent implements OnInit {
+
+  /** Collateral form */
+  collateralForm: FormGroup;
+  /** Charges Template data */
+  collateralTemplateData: any;
+
+  /**
+   * Retrieves the collateral template data
+   * @param {FormBuilder} formBuilder Form Builder
+   * @param {ProductsService} productsService Products Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   * @param {SettingsService} settingsService Settings Service
+   */
+  constructor(private formBuilder: FormBuilder,
+              private productsService: ProductsService,
+              private route:  ActivatedRoute,
+              private router: Router,
+              private settingsService: SettingsService) {
+                this.route.data.subscribe((data: { collateralTemplate: any }) => {
+                  this.collateralTemplateData = data.collateralTemplate;
+                });
+               }
+
+  /**
+   * Create and sets Collateral Form
+   */
+  ngOnInit(): void {
+    this.createCollateralForm();
+  }
+
+  /**
+   * Create the Collateral Form
+   */
+  createCollateralForm() {
+    this.collateralForm = this.formBuilder.group({
+      'name': ['', Validators.required],
+      'unitType': ['', Validators.required],
+      'basePrice': ['', Validators.required],
+      'pctToBase': ['', Validators.required],
+      'currency': ['', Validators.required],
+      'quality': ['', Validators.required]
+    });
+  }
+
+  /**
+   * Submit a new collateral Product form
+   */
+  submit() {
+    const collateralFormData = this.collateralForm.value;
+    const locale = this.settingsService.language.code;
+    const data = {
+      ...collateralFormData,
+      locale
+    };
+    this.productsService.createCollateral(data).subscribe((response: any) => {
+      this.router.navigate(['../'], { relativeTo: this.route });
+    });
+  }
+
+
+
+}
@@ -0,0 +1,76 @@
+<div class="container">
+
+    <mat-card>
+
+        <form [formGroup]="collateralForm" (ngSubmit)="submit()">
+
+            <mat-card-content>
+
+                <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+                    <mat-form-field fxFlex="48%">
+                        <mat-label>Name</mat-label>
+                        <input matInput required autoFocus formControlName="name">
+                        <mat-error *ngIf="collateralForm.controls.name.hasError('required')">
+                            Name is <strong>required</strong>
+                        </mat-error>
+                    </mat-form-field>
+
+                    <mat-form-field fxFlex="48%">
+                        <mat-label>Type/Quality</mat-label>
+                        <input matInput required autoFocus formControlName="quality">
+                        <mat-error *ngIf="collateralForm.controls.quality.hasError('required')">
+                            Type/Quality is <strong>required</strong>
+                        </mat-error>
+                    </mat-form-field>
+
+                    <mat-form-field fxFlex="48%">
+                        <mat-label>Unit Type</mat-label>
+                        <input matInput required autoFocus formControlName="unitType">
+                        <mat-error *ngIf="collateralForm.controls.unitType.hasError('required')">
+                            Unit Type is <strong>required</strong>
+                        </mat-error>
+                    </mat-form-field>
+
+                    <mat-form-field fxFlex="48%">
+                        <mat-label>Base Price</mat-label>
+                        <input matInput required autoFocus formControlName="basePrice">
+                        <mat-error *ngIf="collateralForm.controls.basePrice.hasError('required')">
+                            Base Price is <strong>required</strong>
+                        </mat-error>
+                    </mat-form-field>
+
+                    <mat-form-field fxFlex="48%">
+                        <mat-label>Percentage To Base</mat-label>
+                        <input matInput required autoFocus formControlName="pctToBase">
+                        <mat-error *ngIf="collateralForm.controls.pctToBase.hasError('required')">
+                            Percentage to Base is <strong>required</strong>
+                        </mat-error>
+                    </mat-form-field>
+
+                    <mat-form-field fxFlex="48%">
+                        <mat-label>Currency</mat-label>
+                        <mat-select required formControlName="currency">
+                            <mat-option *ngFor="let currency of collateralTemplateData" [value]="currency.code">
+                                {{ currency.name }}
+                            </mat-option>
+                        </mat-select>
+                        <mat-error *ngIf="collateralForm.controls.currency.hasError('required')">
+                            Currency is <strong>required</strong>
+                        </mat-error>
+                    </mat-form-field>
+
+                </div>
+
+            </mat-card-content>
+            
+            <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+                <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+                <button mat-raised-button color="primary" [disabled]="!collateralForm.valid" *mifosxHasPermission="'UPDATE_CHARGE'">Submit</button> 
+            </mat-card-actions>
+
+        </form>
+
+    </mat-card>
+
+</div>
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditCollateralComponent } from './edit-collateral.component';
+
+describe('EditCollateralComponent', () => {
+  let component: EditCollateralComponent;
+  let fixture: ComponentFixture<EditCollateralComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ EditCollateralComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditCollateralComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,73 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+
+/** Custom Services */
+import { ProductsService } from 'app/products/products.service';
+import { SettingsService } from 'app/settings/settings.service';
+
+@Component({
+  selector: 'mifosx-edit-collateral',
+  templateUrl: './edit-collateral.component.html',
+  styleUrls: ['./edit-collateral.component.scss']
+})
+export class EditCollateralComponent implements OnInit {
+
+  /** Colalteral Data */
+  collateralData: any;
+  /** Collateral Template */
+  collateralTemplateData: any;
+  /** Collateral Form */
+  collateralForm: FormGroup;
+
+  /**
+   * Retrieves the Collateral Data from `resolve`
+   * @param {ProductsService} productsService Products Service.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   * @param {SettingsService} settingsService Settings Service.
+   */
+  constructor(private productsService: ProductsService,
+              private formBuilder: FormBuilder,
+              private route: ActivatedRoute,
+              private router: Router,
+              private settingsService: SettingsService) {
+                this.route.data.subscribe((data: { collateral: any, collateralTemplate: any }) => {
+                  this.collateralData = data.collateral;
+                  this.collateralTemplateData = data.collateralTemplate;
+                });
+               }
+
+  ngOnInit(): void {
+    this.editCollateralForm();
+  }
+
+  /**
+   * Edit Collateral Form
+   */
+  editCollateralForm() {
+    this.collateralForm = this.formBuilder.group({
+      'name': [this.collateralData.name, Validators.required],
+      'quality': [this.collateralData.quality, Validators.required],
+      'unitType': [this.collateralData.unitType, Validators.required],
+      'basePrice': [this.collateralData.basePrice, Validators.required],
+      'pctToBase': [this.collateralData.pctToBase, Validators.required],
+      'currency': [this.collateralData.currency, Validators.required],
+    });
+  }
+
+  /**
+   * Submits the updated Collateral Form
+   */
+  submit() {
+    const collateral = this.collateralForm.value;
+    collateral.locale = this.settingsService.language.code;
+    this.productsService.updateCollateral(this.collateralData.id.toString(), collateral)
+      .subscribe((response: any) => {
+        this.router.navigate(['../'], { relativeTo: this.route });
+      });
+  }
+
+}
@@ -0,0 +1,74 @@
+<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
+    <button mat-raised-button color="primary" [routerLink]="['edit']" >
+        <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+        Edit
+    </button>
+    <button mat-raised-button color="warn" (click)="deleteCollateral()" >
+        <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+        Delete
+    </button>
+</div>
+
+<div class="container">
+
+    <mat-card>
+
+        <mat-card-content>
+
+            <div fxLayout="row wrap" class="content">
+
+                <div fxFlex="50%" class="mat-body-strong">
+                    Collateral Name
+                </div>
+
+                <div fxFlex="50%">
+                    {{ collateralData.name }}
+                </div>
+
+                <div fxFlex="50%" class="mat-body-strong">
+                    Quality/Type
+                </div>
+
+                <div fxFlex="50%">
+                    {{ collateralData.quality }}
+                </div>
+
+                <div fxFlex="50%" class="mat-body-strong">
+                    Base Price
+                </div>
+
+                <div fxFlex="50%">
+                    {{ collateralData.basePrice }}
+                </div>
+
+                <div fxFlex="50%" class="mat-body-strong">
+                    Base Percentage
+                </div>
+
+                <div fxFlex="50%">
+                    {{ collateralData.pctToBase }}
+                </div>
+
+                <div fxFlex="50%" class="mat-body-strong">
+                    Unit Type
+                </div>
+
+                <div fxFlex="50%">
+                    {{ collateralData.unitType }}
+                </div>
+
+                <div fxFlex="50%" class="mat-body-strong">
+                    Currency
+                </div>
+
+                <div fxFlex="50%">
+                    {{ collateralData.currency }}
+                </div>
+
+            </div>
+
+        </mat-card-content>
+
+    </mat-card>
+
+</div>
@@ -0,0 +1,11 @@
+.container {
+    max-width: 37rem;
+    
+    .content {
+      div {
+        margin: 1rem 0;
+        word-wrap: break-word;
+      }
+    }
+  }
+  
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ViewCollateralComponent } from './view-collateral.component';
+
+describe('ViewCollateralComponent', () => {
+  let component: ViewCollateralComponent;
+  let fixture: ComponentFixture<ViewCollateralComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ViewCollateralComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ViewCollateralComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,60 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MatDialog } from '@angular/material/dialog';
+
+/** Custom Services */
+import { ProductsService } from 'app/products/products.service';
+
+/** Custom Components */
+import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dialog.component';
+
+/**
+ * View Collateral Component
+ */
+@Component({
+  selector: 'mifosx-view-collateral',
+  templateUrl: './view-collateral.component.html',
+  styleUrls: ['./view-collateral.component.scss']
+})
+export class ViewCollateralComponent implements OnInit {
+
+  /** Collateral Data */
+  collateralData: any;
+
+  /**
+   * Retrieves the Collateral Data from 'resolve.
+   * @param {ProductsService} productsService Products Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   * @param {MatDialog} dialog Dialog reference.
+   */
+  constructor(private productsService: ProductsService,
+              private route: ActivatedRoute,
+              private router: Router,
+              private dialog: MatDialog) {
+                this.route.data.subscribe((data: { collateral: any }) => {
+                    this.collateralData = data.collateral;
+                });
+               }
+
+  ngOnInit(): void {
+  }
+
+  /**
+   * Deletes the collateral and redirects to collaterals
+   */
+  deleteCollateral() {
+    const deleteCollateralDialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `collateral ${this.collateralData.id}` }
+    });
+    deleteCollateralDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.productsService.deleteCollateral(this.collateralData.id)
+          .subscribe(() => {
+            this.router.navigate(['/products/collaterals']);
+          });
+      }
+    });
+  }
+
+}
@@ -50,6 +50,10 @@ import { ViewDividendComponent } from './share-products/view-dividend/view-divid
 import { CreateTaxGroupComponent } from './manage-tax-groups/create-tax-group/create-tax-group.component';
 import { EditTaxGroupComponent } from './manage-tax-groups/edit-tax-group/edit-tax-group.component';
 import { CreateProductMixComponent } from './products-mix/create-product-mix/create-product-mix.component';
+import { CollateralsComponent } from './collaterals/collaterals.component';
+import { CreateCollateralComponent } from './collaterals/create-collateral/create-collateral.component';
+import { EditCollateralComponent } from './collaterals/edit-collateral/edit-collateral.component';
+import { ViewCollateralComponent } from './collaterals/view-collateral/view-collateral.component';

 /** Custom Resolvers */
 import { LoanProductsResolver } from './loan-products/loan-products.resolver';
@@ -94,6 +98,9 @@ import { EditProductMixComponent } from './products-mix/edit-product-mix/edit-pr
 import { ChargesTemplateAndResolver } from './charges/charges-template-and-resolver';
 import { EditFixedDepositProductComponent } from './fixed-deposit-products/edit-fixed-deposit-product/edit-fixed-deposit-product.component';
 import { FixedDepositProductAndTemplateResolver } from './fixed-deposit-products/edit-fixed-deposit-product/fixed-deposit-product-and-template.resolver';
+import { CollateralResolver } from './collaterals/collateral.resolver';
+import { CollateralsResolver } from './collaterals/collaterals.resolver';
+import { CollateralTemplateResolver } from './collaterals/collaterals-template.resolver';

 /** Products Routes */
 const routes: Routes = [
@@ -593,6 +600,52 @@ const routes: Routes = [
              ]
            },
          ]
+        },
+        {
+          path: 'collaterals',
+          data: { title: extract('Collaterals'), breadcrumb: 'Collaterals' },
+          children: [
+            {
+              path: 'create',
+              component: CreateCollateralComponent,
+              data: { title: extract('Create Collateral'), breadcrumb: 'Create Collateral' },
+              resolve: {
+                collateralTemplate: CollateralTemplateResolver
+              }
+            },
+            {
+              path: '',
+              component: CollateralsComponent,
+              resolve: {
+                collaterals: CollateralsResolver
+              }
+            },
+            {
+              path: ':id',
+              data: { title: extract('View Collateral'), routeParamBreadcrumb: 'id' },
+              resolve: {
+                collateral: CollateralResolver
+              },
+              children: [
+                {
+                  path: '',
+                  component: ViewCollateralComponent,
+                  resolve: {
+                    collateral: CollateralResolver
+                  },
+                },
+                {
+                  path: 'edit',
+                  component: EditCollateralComponent,
+                  data: { title: extract('Edit Collateral'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                  resolve: {
+                    collateralTemplate: CollateralTemplateResolver,
+                    collateral: CollateralResolver
+                  }
+                },
+              ]
+            },
+          ]
        }
      ]
    }
@@ -647,7 +700,10 @@ const routes: Routes = [
    EditTaxGroupResolver,
    ProductsMixTemplateResolver,
    FixedDepositProductAndTemplateResolver,
-    FloatingRatesResolver
+    FloatingRatesResolver,
+    CollateralResolver,
+    CollateralsResolver,
+    CollateralTemplateResolver
  ]
 })
 export class ProductsRoutingModule { }
@@ -40,6 +40,14 @@
            <p matLine>Define charges/penalties for loan products, savings and deposit products</p>
          </mat-list-item>

+          <mat-list-item [routerLink]="['collaterals']">
+            <mat-icon matListIcon>
+              <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
+            </mat-icon>
+            <h4 matLine>Collateral Management</h4>
+            <p matLine>Define collaterals for Collateral Management</p>
+          </mat-list-item>
+
        </mat-nav-list>

      </div>
@@ -93,6 +93,10 @@ import { CreateProductMixComponent } from './products-mix/create-product-mix/cre
 import { EditProductMixComponent } from './products-mix/edit-product-mix/edit-product-mix.component';
 import { CreateChargeComponent } from './charges/create-charge/create-charge.component';
 import { EditFixedDepositProductComponent } from './fixed-deposit-products/edit-fixed-deposit-product/edit-fixed-deposit-product.component';
+import { CollateralsComponent } from './collaterals/collaterals.component';
+import { CreateCollateralComponent } from './collaterals/create-collateral/create-collateral.component';
+import { EditCollateralComponent } from './collaterals/edit-collateral/edit-collateral.component';
+import { ViewCollateralComponent } from './collaterals/view-collateral/view-collateral.component';

 /**
 * Products Module
@@ -193,7 +197,11 @@ import { EditFixedDepositProductComponent } from './fixed-deposit-products/edit-
    EditProductMixComponent,
    ManageTaxGroupsComponent,
    CreateChargeComponent,
-    EditFixedDepositProductComponent
+    EditFixedDepositProductComponent,
+    CollateralsComponent,
+    CreateCollateralComponent,
+    EditCollateralComponent,
+    ViewCollateralComponent
  ],
  providers: [ ]
 })
@@ -415,4 +415,51 @@ export class ProductsService {
    return this.http.put(`/recurringdepositproducts/${recurringDepositProductId}`, recurringDepositProduct);
  }

+  /**
+   * @returns {Observable<any>} Collateral data.
+   */
+  getCollaterals(): Observable<any> {
+    return this.http.get('/collateral-management');
+  }
+
+  /**
+   * @returns {Observable<any>} Collateral Template.
+   */
+  getCollateralTemplate(): Observable<any> {
+    return this.http.get('/collateral-management/template');
+  }
+
+  /**
+   * @param {string} collateralId Collateral ID of Collateral.
+   * @returns {Observable<any>} Collateral.
+   */
+  getCollateral(collateralId: string, template: boolean = false): Observable<any> {
+    const httpParams = new HttpParams().set('template', template.toString());
+    return this.http.get(`/collateral-management/${collateralId}`, { params: httpParams });
+  }
+
+  /**
+   * @param collateralId Collateral Id to be updated.
+   * @param collateral  Collateral Data to be updated.
+   */
+  updateCollateral(collateralId: string, collateral: any): Observable<any> {
+    return this.http.put(`/collateral-management/${collateralId}`, collateral);
+  }
+
+  /**
+   * @param {string} collateralId  Collateral ID of Collateral to be deleted.
+   * @returns {Observable<any>}
+   */
+  deleteCollateral(collateralId: string): Observable<any> {
+    return this.http.delete(`/collateral-management/${collateralId}`);
+  }
+
+  /**
+   * @param {any} collateral Collateral to be created.
+   * @returns {Observable<any>}
+   */
+  createCollateral(collateral: any): Observable<any> {
+    return this.http.post('/collateral-management', collateral);
+  }
+
 }