From 963ec68527d56c6420e54dad8bc1ec24d94d177d Mon Sep 17 00:00:00 2001
From: Jivjyot Singh <jivjyotsingh@gmail.com>
Date: Tue, 28 May 2019 18:07:12 +0530
Subject: [PATCH] refactor: Clients Module

- refactors clients-routing.module.ts for dynamic breadcrumbs.
- refactors clients.service.ts to use HttpClient
- adds resolver to load client data
- removes partially implemented components

fixes: #409
---
 src/app/clients/clients-routing.module.ts     |  57 +--
 src/app/clients/clients.component.ts          |  36 +-
 src/app/clients/clients.module.ts             |  63 +--
 src/app/clients/clients.service.ts            | 356 +---------------
 .../common-resolvers/clients.resolver.ts      |  30 ++
 .../create-address.component.html             |  71 ----
 .../create-address.component.scss             |  17 -
 .../create-address.component.spec.ts          |  28 --
 .../create-address.component.ts               |  77 ----
 .../create-client.component.html              | 248 -----------
 .../create-client.component.scss              |  13 -
 .../create-client.component.spec.ts           |  25 --
 .../create-client/create-client.component.ts  |  25 --
 .../create-identity.component.html            |  53 ---
 .../create-identity.component.scss            |  17 -
 .../create-identity.component.spec.ts         |  28 --
 .../create-identity.component.ts              |  76 ----
 .../edit-address/edit-address.component.html  |  64 ---
 .../edit-address/edit-address.component.scss  |  13 -
 .../edit-address.component.spec.ts            |  28 --
 .../edit-address/edit-address.component.ts    | 108 -----
 .../upload-document.component.html            |  43 --
 .../upload-document.component.scss            |  17 -
 .../upload-document.component.spec.ts         |  28 --
 .../upload-document.component.ts              |  62 ---
 .../view-client-component-dialog.html         |   8 -
 .../view-client/view-client.component.html    | 400 ------------------
 .../view-client/view-client.component.scss    | 182 --------
 .../view-client/view-client.component.spec.ts |  24 --
 .../view-client/view-client.component.ts      | 262 ------------
 .../view-loan/view-loan.component.html        | 354 ----------------
 .../view-loan/view-loan.component.scss        |  15 -
 .../view-loan/view-loan.component.spec.ts     |  24 --
 .../clients/view-loan/view-loan.component.ts  |  15 -
 34 files changed, 89 insertions(+), 2778 deletions(-)
 create mode 100644 src/app/clients/common-resolvers/clients.resolver.ts
 delete mode 100644 src/app/clients/create-address/create-address.component.html
 delete mode 100644 src/app/clients/create-address/create-address.component.scss
 delete mode 100644 src/app/clients/create-address/create-address.component.spec.ts
 delete mode 100644 src/app/clients/create-address/create-address.component.ts
 delete mode 100644 src/app/clients/create-client/create-client.component.html
 delete mode 100644 src/app/clients/create-client/create-client.component.scss
 delete mode 100644 src/app/clients/create-client/create-client.component.spec.ts
 delete mode 100644 src/app/clients/create-client/create-client.component.ts
 delete mode 100644 src/app/clients/create-identity/create-identity.component.html
 delete mode 100644 src/app/clients/create-identity/create-identity.component.scss
 delete mode 100644 src/app/clients/create-identity/create-identity.component.spec.ts
 delete mode 100644 src/app/clients/create-identity/create-identity.component.ts
 delete mode 100644 src/app/clients/edit-address/edit-address.component.html
 delete mode 100644 src/app/clients/edit-address/edit-address.component.scss
 delete mode 100644 src/app/clients/edit-address/edit-address.component.spec.ts
 delete mode 100644 src/app/clients/edit-address/edit-address.component.ts
 delete mode 100644 src/app/clients/upload-document/upload-document.component.html
 delete mode 100644 src/app/clients/upload-document/upload-document.component.scss
 delete mode 100644 src/app/clients/upload-document/upload-document.component.spec.ts
 delete mode 100644 src/app/clients/upload-document/upload-document.component.ts
 delete mode 100644 src/app/clients/view-client/view-client-component-dialog.html
 delete mode 100644 src/app/clients/view-client/view-client.component.html
 delete mode 100644 src/app/clients/view-client/view-client.component.scss
 delete mode 100644 src/app/clients/view-client/view-client.component.spec.ts
 delete mode 100644 src/app/clients/view-client/view-client.component.ts
 delete mode 100644 src/app/clients/view-loan/view-loan.component.html
 delete mode 100644 src/app/clients/view-loan/view-loan.component.scss
 delete mode 100644 src/app/clients/view-loan/view-loan.component.spec.ts
 delete mode 100644 src/app/clients/view-loan/view-loan.component.ts

diff --git a/src/app/clients/clients-routing.module.ts b/src/app/clients/clients-routing.module.ts
index 1efed1a7a..7d6cfbeed 100644
--- a/src/app/clients/clients-routing.module.ts
+++ b/src/app/clients/clients-routing.module.ts
@@ -7,63 +7,30 @@ import { Route } from '../core/route/route.service';
 /** Translation Imports */
 import { extract } from '../core/i18n/i18n.service';
 
+/** Custom Components */
 import { ClientsComponent } from './clients.component';
-import { CreateClientComponent} from './create-client/create-client.component';
-import { ViewClientComponent } from './view-client/view-client.component';
-import { ViewLoanComponent } from './view-loan/view-loan.component';
-import { CreateAddressComponent } from './create-address/create-address.component';
-import { CreateIdentityComponent } from './create-identity/create-identity.component';
-import { UploadDocumentComponent } from './upload-document/upload-document.component';
-import { EditAddressComponent } from './edit-address/edit-address.component';
+
+/** Custom Resolvers */
+import { ClientsResolver } from './common-resolvers/clients.resolver';
 
 const routes: Routes = [
   Route.withShell([
     {
       path: 'clients',
       component: ClientsComponent,
-      data: { title: extract('Clients') }
-    },
-    {
-      path: 'clients/create',
-      component: CreateClientComponent,
-      data: { title: extract('Create Client') }
-    },
-    {
-      path: 'clients/view/:id',
-      component: ViewClientComponent,
-      data: { title: extract('View Client') }
-    },
-    {
-      path: 'clients/viewloan',
-      component: ViewLoanComponent,
-      data: { title: extract('View Loan') }
-    },
-    {
-      path: 'clients/address/:id',
-      component: CreateAddressComponent,
-      data: { title: extract('Create Address') }
-    },
-    {
-      path: 'clients/editaddress/:id/:addressTypeId/:addressId',
-      component: EditAddressComponent,
-      data: { title: extract('Edit Address') }
-    },
-    {
-      path: 'clients/addclientidentifier/:id',
-      component: CreateIdentityComponent,
-      data: { title: extract('Create Identity') }
-    },
-    {
-      path: 'clients/addclientdocument/:id',
-      component: UploadDocumentComponent,
-      data: { title: extract('Create Identity') }
-    },
+      data: { title: extract('Clients'), breadcrumb: 'Clients', routeParamBreadcrumb: false },
+      resolve: {
+        clientsData: ClientsResolver
+      }
+    }
   ])
 ];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
-  providers: []
+  providers: [
+    ClientsResolver
+  ]
 })
 export class ClientsRoutingModule { }
diff --git a/src/app/clients/clients.component.ts b/src/app/clients/clients.component.ts
index f3e939660..a4e087f97 100644
--- a/src/app/clients/clients.component.ts
+++ b/src/app/clients/clients.component.ts
@@ -1,9 +1,6 @@
-import {Component, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
-import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
-import { Response} from '@angular/http';
-import {ClientsService} from './clients.service';
-import {DataSource} from '@angular/cdk/collections';
-import { Observable } from 'rxjs';
+import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
+import { ActivatedRoute } from '@angular/router';
 @Component({
   selector: 'mifosx-clients',
   templateUrl: './clients.component.html',
@@ -13,26 +10,17 @@ import { Observable } from 'rxjs';
 })
 export class ClientsComponent implements OnInit {
   post: any = [];
-  private ELEMENT_DATA: any = undefined;
-  displayedColumns =  ['name', 'clientno', 'externalid', 'status', 'mobileNo', 'gender', 'office', 'staff'];
+
+  displayedColumns = ['name', 'clientno', 'externalid', 'status', 'mobileNo', 'gender', 'office', 'staff'];
   dataSource = new MatTableDataSource();
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
-  constructor(private clientService: ClientsService) {}
-
-  ngOnInit() {
-       this.getClients();
-  }
-
-  // GET from clients API
-  getClients() {
-    this.clientService.getClients()
-    .subscribe(
-      (res => {
-        console.log(res);
-        res.active = !!res.active;
+  constructor(private route: ActivatedRoute) {
+    this.route.data.subscribe((clientsData: { clientsData: any }) => {
+      const res = clientsData.clientsData.pageItems;
+      res.active = !!res.active;
       this.dataSource = new MatTableDataSource(res);
       this.dataSource.paginator = this.paginator;
       this.dataSource.sortingDataAccessor = (data: any, property: any) => {
@@ -42,10 +30,12 @@ export class ClientsComponent implements OnInit {
         }
       };
       this.dataSource.sort = this.sort;
-      })
-    );
+    });
   }
 
+
+  ngOnInit() { }
+
   applyFilter(filterValue: string) {
     filterValue = filterValue.trim(); // Remove whitespace
     filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
diff --git a/src/app/clients/clients.module.ts b/src/app/clients/clients.module.ts
index 94f14d867..cb3aaf02d 100644
--- a/src/app/clients/clients.module.ts
+++ b/src/app/clients/clients.module.ts
@@ -1,55 +1,26 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { HttpModule } from '@angular/http';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { CoreModule } from '../core/core.module';
-import { MatTableModule } from '@angular/material/table';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import { ArchwizardModule } from 'angular-archwizard';
+/** Angular Imports */
+import { NgModule } from '@angular/core';
+import { DatePipe } from '@angular/common';
 
+/** Custom Modules */
 import { ClientsRoutingModule } from './clients-routing.module';
+import { SharedModule } from 'app/shared/shared.module';
+
+/** Custom Components */
 import { ClientsComponent } from './clients.component';
-import { CreateClientComponent} from './create-client/create-client.component';
-import { ViewClientComponent } from './view-client/view-client.component';
-import { ViewLoanComponent } from './view-loan/view-loan.component';
-import { CreateAddressComponent } from './create-address/create-address.component';
-import { CreateIdentityComponent } from './create-identity/create-identity.component';
-
-import { ClientsService } from './clients.service';
-import { UploadDocumentComponent } from './upload-document/upload-document.component';
-import { EditAddressComponent } from './edit-address/edit-address.component';
 
+/**
+ * Clients Module
+ *
+ * All components related to Clients should be declared here.
+ */
 @NgModule({
   imports: [
-    CoreModule,
-    CommonModule,
-    ClientsRoutingModule,
-    FormsModule,
-    ReactiveFormsModule,
-    FlexLayoutModule,
-    BrowserModule,  // tslint:disable
-    HttpModule, 
-    MatTableModule,
-    ArchwizardModule,
+    SharedModule,
+    ClientsRoutingModule
   ],
-  declarations: [
-    ClientsComponent,
-    CreateClientComponent,
-    ViewClientComponent,
-    ViewLoanComponent,
-    CreateAddressComponent,
-    CreateIdentityComponent,
-    UploadDocumentComponent,
-    EditAddressComponent
-],
-  providers: [
-    ClientsService,
-    HttpModule  // tslint:disable
-  ],
-  schemas: [
-    CUSTOM_ELEMENTS_SCHEMA
-  ]
+  declarations: [ClientsComponent],
+  providers: [DatePipe]
+
 })
 export class ClientsModule { }
diff --git a/src/app/clients/clients.service.ts b/src/app/clients/clients.service.ts
index de5e5ef38..a434db813 100644
--- a/src/app/clients/clients.service.ts
+++ b/src/app/clients/clients.service.ts
@@ -1,347 +1,25 @@
+/** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Http, Headers, Response, RequestOptions, URLSearchParams } from '@angular/http';
-/* import { HttpHeaders, HttpClient } from '@angular/common/http';
- */
+import { HttpClient, HttpParams } from '@angular/common/http';
+
+/** rxjs Imports */
 import { Observable } from 'rxjs';
-import { of } from 'rxjs';
-import { map } from 'rxjs/operators';
+/**
+ * Clients service.
+ */
+@Injectable({
+  providedIn: 'root'
+})
 
 @Injectable()
 export class ClientsService {
-  constructor(private http: Http) {} // tslint:disable-line
+  /**
+   * @param {HttpClient} http Http Client to send requests.
+   */
+  constructor(private http: HttpClient) { }
 
-  createAuthorizationHeader(headers: Headers) { // tslint:disable-line
-    const username = 'mifos';
-    const password = 'password';
-    headers.append('Authorization', 'Basic ' + btoa(username + ':' + password));
-    headers.append('Content-Type', 'application/json');
-    headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
-    headers.append('Access-Control-Allow-Origin', '*');
+  getClients(): Observable<any> {
+    const httpParams = new HttpParams().set('orderBy', 'id');
+    return this.http.get('/clients', { params: httpParams });
   }
-
-  getClients() {
-    const headers = new Headers(); // tslint:disable-line
-    this.createAuthorizationHeader(headers);
-    return this.http.get(
-        'https://demo.openmf.org/fineract-provider/api/v1/clients?tenantIdentifier=default&pretty=true', {
-          headers: headers
-        })
-      .pipe(
-        map(
-          (response: Response) => { // tslint:disable-line
-            response = response.json();
-            return response['pageItems'];
-
-          }
-        )
-      );
-  }
-  getClientId(clientId: number) {
-    const headers = new Headers(); // tslint:disable-line
-    this.createAuthorizationHeader(headers);
-    return this.http.get('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId +
-        '?tenantIdentifier=default&pretty=true', {
-          headers: headers
-        })
-      .pipe(
-        map(
-          (response: Response) => { // tslint:disable-line
-            response = response.json();
-            return response;
-
-          }
-        )
-      );
-  }
-
-  getClientAccounts(clientId: number) {
-    const headers = new Headers(); // tslint:disable-line
-    this.createAuthorizationHeader(headers);
-    return this.http.get('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId +
-        '/accounts' + '?tenantIdentifier=default&pretty=true', {
-          headers: headers
-        })
-      .pipe(
-        map(
-          (response: Response) => { // tslint:disable-line
-            response = response.json();
-            return response;
-
-          }
-        )
-      );
-  }
-
-  getClientCharges(clientId: number) {
-    const headers = new Headers(); // tslint:disable-line
-    this.createAuthorizationHeader(headers);
-    return this.http.get('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId +
-        '/charges' + '?tenantIdentifier=default&pretty=true', {
-          headers: headers
-        })
-      .pipe(
-        map(
-          (response: Response) => { // tslint:disable-line
-            response = response.json();
-            return response;
-
-          }
-        )
-      );
-  }
-
-  getClientAddress(clientId: number) {
-    const headers = new Headers(); // tslint:disable-line
-    this.createAuthorizationHeader(headers);
-    return this.http.get('https://demo.openmf.org/fineract-provider/api/v1/client/' + clientId +
-        '/addresses' + '?tenantIdentifier=default&pretty=true', {
-          headers: headers
-        })
-      .pipe(
-        map(
-          (response: Response) => { // tslint:disable-line
-            response = response.json();
-            return response;
-
-          }
-        )
-      );
-  }
-
-  getClientNote(clientId: number) {
-    const headers = new Headers(); // tslint:disable-line
-    this.createAuthorizationHeader(headers);
-    return this.http.get('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId +
-        '/notes' + '?tenantIdentifier=default&pretty=true', {
-          headers: headers
-        })
-      .pipe(
-        map(
-          (response: Response) => { // tslint:disable-line
-            response = response.json();
-            return response;
-
-          }
-        )
-      );
-  }
-
-  postClientNote(clientId: number, notes: any) {
-    const headers = new Headers(); // tslint:disable-line
-    this.createAuthorizationHeader(headers);
-    const body = JSON.stringify(notes);
-    return this.http.post('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId +
-        '/notes' + '?tenantIdentifier=default&pretty=true', notes, {
-          headers: headers
-        })
-      .pipe(
-        map(
-          (response: Response) => { // tslint:disable-line
-            response.json();
-          }
-        )
-      );
-  }
-
-  getClientAddressTemplate() {
-    const headers = new Headers(); // tslint:disable-line
-    this.createAuthorizationHeader(headers);
-    return this.http.get('https://demo.openmf.org/fineract-provider/api/v1/client/' +
-        'addresses/template?tenantIdentifier=default', {
-          headers: headers
-        })
-      .pipe(
-        map(
-          (response: Response) => { // tslint:disable-line
-            response = response.json();
-            return response;
-
-          }
-        )
-      );
-  }
-
-  postClientAddress(clientId: number, body: any, type: any) {
-    const headers = new Headers(); // tslint:disable-line
-    const params = new URLSearchParams(); // tslint:disable-line
-    params.set('type', type);
-    this.createAuthorizationHeader(headers);
-    body = JSON.stringify(body);
-    const options = new RequestOptions({ // tslint:disable-line
-      headers: headers,
-      params: params,
-    });
-    return this.http.post('https://demo.openmf.org/fineract-provider/api/v1/client/' + clientId +
-        '/addresses?' + '&tenantIdentifier=default&pretty=true', body,
-        options)
-      .pipe(
-        map(
-          (response: Response) => { // tslint:disable-line
-            response.json();
-          }
-        )
-      );
-  }
-
-  putClientAddress(clientId: number, body: any, type: any) {
-    const headers = new Headers(); // tslint:disable-line
-    const params = new URLSearchParams(); // tslint:disable-line
-    params.set('type', type);
-    this.createAuthorizationHeader(headers);
-   // body = JSON.stringify(body);
-    const options = new RequestOptions({ // tslint:disable-line
-      headers: headers,
-      params: params,
-    });
-    return this.http.put('https://demo.openmf.org/fineract-provider/api/v1/client/' + clientId +
-        '/addresses?' + 'tenantIdentifier=default', body,
-        options)
-      .pipe(
-        map(
-          (response: Response) => { // tslint:disable-line
-            response.json();
-          }
-        )
-      );
-  }
-
-  getClientIdentifierTemplate(clientId: number) {
-    const headers = new Headers(); // tslint:disable-line
-    this.createAuthorizationHeader(headers);
-    return this.http.get('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId +
-        '/identifiers/template?tenantIdentifier=default', {
-          headers: headers
-        })
-      .pipe(
-        map(
-          (response: Response) => { // tslint:disable-line
-            response = response.json();
-            return response['allowedDocumentTypes'];
-
-          }
-        )
-      );
-  }
-
-  getClientIdentifiers(clientId: number) {
-    const headers = new Headers(); // tslint:disable-line
-    this.createAuthorizationHeader(headers);
-    return this.http.get('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId +
-        '/identifiers/?tenantIdentifier=default', {
-          headers: headers
-        })
-      .pipe(
-        map(
-          (response: Response) => { // tslint:disable-line
-            response = response.json();
-            return response;
-
-          }
-        )
-      );
-  }
-
-  postClientIdentifier(clientId: number, body: any) {
-    const headers = new Headers(); // tslint:disable-line
-    this.createAuthorizationHeader(headers);
-    return this.http.post('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId +
-        '/identifiers/?tenantIdentifier=default', body, {
-          headers: headers
-        })
-      .pipe(
-        map(
-          (response: Response) => { // tslint:disable-line
-            response.json();
-          }
-        )
-      );
-  }
-
-  deleteClientIdentifier(clientId: number, identifierId: number) {
-    const headers = new Headers(); // tslint:disable-line
-    this.createAuthorizationHeader(headers);
-    return this.http.delete('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId +
-        '/identifiers/' + identifierId + '/?tenantIdentifier=default', {
-          headers: headers
-        })
-      .pipe(
-        map(
-          (response: Response) => { // tslint:disable-line
-            response.json();
-          }
-        )
-      );
-  }
-  postClientDocument(clientId: number, body: any) {
-    const headers = new Headers(); // tslint:disable-line
-    this.createAuthorizationHeader(headers);
-    headers.append('Content-Type', null);
-    headers.append('Accept', 'multipart/form-data');
-    body = JSON.stringify(body);
-
-    return this.http.post('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId +
-        '/documents/?tenantIdentifier=default', body, {
-          headers: headers
-        })
-      .pipe(
-        map(
-          (response: Response) => { // tslint:disable-line
-            response.json();
-          }
-        )
-      );
-  }
-
-  getClientDocuments(clientId: number) {
-    const headers = new Headers(); // tslint:disable-line
-    this.createAuthorizationHeader(headers);
-    return this.http.get('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId +
-        '/documents/?tenantIdentifier=default', {
-          headers: headers
-        })
-      .pipe(
-        map(
-          (response: Response) => { // tslint:disable-line
-            return response.json();
-          }
-        )
-      );
-  }
-
-  deleteClientDocuments(clientId: number, documentId: number) {
-    const headers = new Headers(); // tslint:disable-line
-    this.createAuthorizationHeader(headers);
-    return this.http.delete('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId +
-        '/documents/' + documentId + '/?tenantIdentifier=default', {
-          headers: headers
-        })
-      .pipe(
-        map(
-          (response: Response) => { // tslint:disable-line
-            response.json();
-          }
-        )
-      );
-  }
-
-  downloadClientDocuments(clientId: number, documentId: number) {
-    const headers = new Headers(); // tslint:disable-line
-    this.createAuthorizationHeader(headers);
-    return this.http.get('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId +
-        '/documents/' + documentId + '/attachment/?tenantIdentifier=default', {
-          headers: headers
-        })
-      .pipe(
-        map(
-          (response: Response) => { // tslint:disable-line
-            return response.json();
-          }
-        )
-      );
-  }
-
-
-
-
 }
-
diff --git a/src/app/clients/common-resolvers/clients.resolver.ts b/src/app/clients/common-resolvers/clients.resolver.ts
new file mode 100644
index 000000000..a672e861f
--- /dev/null
+++ b/src/app/clients/common-resolvers/clients.resolver.ts
@@ -0,0 +1,30 @@
+/** 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';
+
+/**
+ * Clients data resolver.
+ */
+@Injectable()
+export class ClientsResolver implements Resolve<Object> {
+
+    /**
+     * @param {ClientsService} ClientsService Clients service.
+     */
+    constructor(private clientsService: ClientsService) { }
+
+    /**
+     * Returns the Clients data.
+     * @returns {Observable<any>}
+     */
+    resolve(): Observable<any> {
+        return this.clientsService.getClients();
+    }
+
+}
diff --git a/src/app/clients/create-address/create-address.component.html b/src/app/clients/create-address/create-address.component.html
deleted file mode 100644
index d587c67dc..000000000
--- a/src/app/clients/create-address/create-address.component.html
+++ /dev/null
@@ -1,71 +0,0 @@
-<div class="container m-t-40 m-b-40">
-
-  <aw-wizard class="m-t-10" #wizard [navBarLayout]="'large-empty-symbols'">
-    <aw-wizard-step stepTitle="Address" [navigationSymbol]="{ symbol: '1' }">
-
-      <div fxLayoutAlign="center">
-        <mat-card class="example-card">
-          <mat-card-header>
-          </mat-card-header>
-          <mat-card-content>
-            <form class="example-form" (ngSubmit)="onSubmit()" #f="ngForm">
-              <mat-form-field class="example-full-width">
-                <mat-select placeholder="Address Type" [(ngModel)]="addressTypeId" [ngModelOptions]="{standalone: true}" ngDefaultControl>
-                  <div>
-
-                    <mat-option *ngFor="let item of clientAddress?.addressTypeIdOptions" name="option" [value]="item?.id">{{item?.name}}</mat-option>
-                  </div>
-                </mat-select>
-              </mat-form-field>
-
-              <mat-form-field class="example-full-width">
-                <input matInput name="street" placeholder="Street" ngModel>
-              </mat-form-field>
-              <mat-form-field class="example-full-width">
-                <input matInput name="addressLine1" placeholder="Address Line 1" ngModel>
-              </mat-form-field>
-
-
-              <mat-form-field class="example-full-width">
-                <input matInput name="addressLine2" placeholder="Address Line 2" ngModel>
-              </mat-form-field>
-              <mat-form-field class="example-full-width">
-                <input matInput name="addressLine3" placeholder="Address Line 3" ngModel>
-              </mat-form-field>
-              <mat-form-field class="example-full-width">
-                <input matInput name="city" placeholder="City" ngModel>
-              </mat-form-field>
-              <mat-form-field class="example-full-width">
-                <mat-select placeholder="State" [(ngModel)]="addressStateId" [ngModelOptions]="{standalone: true}" ngDefaultControl>
-                  <div>
-
-                    <mat-option *ngFor="let item of clientAddress?.stateProvinceIdOptions" name="option" [value]="item?.id">{{item?.name}}</mat-option>
-                  </div>
-                </mat-select>
-              </mat-form-field>
-              <mat-form-field class="example-full-width">
-                <mat-select placeholder="Country" [(ngModel)]="addressCountryId" [ngModelOptions]="{standalone: true}" ngDefaultControl>
-                  <div>
-
-                    <mat-option *ngFor="let item of clientAddress?.countryIdOptions" name="option" [value]="item?.id">{{item?.name}}</mat-option>
-                  </div>
-                </mat-select>
-              </mat-form-field>
-              <mat-form-field class="example-full-width">
-                <input matInput name="postalCode" placeholder="Postal Code" ngModel>
-              </mat-form-field>
-
-              <button mat-raised-button>Create</button>
-
-            </form>
-
-          </mat-card-content>
-        </mat-card>
-
-
-      </div>
-
-
-    </aw-wizard-step>
-  </aw-wizard>
-</div>
diff --git a/src/app/clients/create-address/create-address.component.scss b/src/app/clients/create-address/create-address.component.scss
deleted file mode 100644
index 4ad60da3c..000000000
--- a/src/app/clients/create-address/create-address.component.scss
+++ /dev/null
@@ -1,17 +0,0 @@
- 
-  
-  .example-form {
-    min-width: 150px;
-    max-width: 500px;
-    width: 100%;
-  }
-  
-  .example-full-width {
-    width: 100%;
-    padding:5px 3px;
-  }
-  
-  .mat-raised-button{
-    margin-left:10px;
-    margin-top:10px;
-  }
\ No newline at end of file
diff --git a/src/app/clients/create-address/create-address.component.spec.ts b/src/app/clients/create-address/create-address.component.spec.ts
deleted file mode 100644
index bbfc57503..000000000
--- a/src/app/clients/create-address/create-address.component.spec.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/* tslint:disable:no-unused-variable */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { CreateAddressComponent } from './create-address.component';
-
-describe('CreateAddressComponent', () => {
-  let component: CreateAddressComponent;
-  let fixture: ComponentFixture<CreateAddressComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ CreateAddressComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(CreateAddressComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/clients/create-address/create-address.component.ts b/src/app/clients/create-address/create-address.component.ts
deleted file mode 100644
index 80267b638..000000000
--- a/src/app/clients/create-address/create-address.component.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { Component, OnInit, ViewEncapsulation, ViewChild  } from '@angular/core';
-import { ActivatedRoute, Params } from '@angular/router';
-import { Subscription } from 'rxjs';
-import { NgForm } from '@angular/forms';
-import { Router } from '@angular/router';
-
-import { ClientsService } from 'app/clients/clients.service';
-
-@Component({
-  selector: 'mifosx-app-create-address',
-  templateUrl: './create-address.component.html',
-  styleUrls: ['./create-address.component.scss'],
-  encapsulation: ViewEncapsulation.None
-
-})
-export class CreateAddressComponent implements OnInit {
-  id: number = undefined;
-  paramsSubscription: Subscription;
-  clientAddress: any = undefined;
-  value: any = undefined;
-  mymodel: any = undefined;
-  addressTypeId: any = undefined;
-  addressStateId: any = undefined;
-  addressCountryId: any = undefined;
-
-  address: any = undefined;
-
-  constructor(private route: ActivatedRoute, private clientService: ClientsService) {}
-
-  @ViewChild('f') addressForm: NgForm;
-
-
-  ngOnInit() {
-    this.paramsSubscription = this.route.params
-      .subscribe(
-        (params: Params) => {
-          this.id = params['id'];
-        }
-      );
-    console.log(this.id);
-    this.getClientAddressTemplate();
-  }
-
-  getClientAddressTemplate() {
-    this.clientService.getClientAddressTemplate()
-      .subscribe(
-        (res => {
-          this.clientAddress = res;
-          console.log(res);
-        })
-      );
-  }
-
-  onSubmit() {
-    this.address = {};
-    console.log(this.addressTypeId);
-    this.address.street = this.addressForm.value.street;
-    this.address.addressLine1 = this.addressForm.value.addressLine1;
-    this.address.addressLine2 = this.addressForm.value.addressLine2;
-    this.address.addressLine3 = this.addressForm.value.addressLine3;
-    this.address.city = this.addressForm.value.city;
-    this.address.stateProvinceId = this.addressStateId;
-    this.address.countryId = this.addressCountryId;
-    this.address.postalCode = this.addressForm.value.postalCode;
-
-
-    this.clientService.postClientAddress(this.id, this.address, this.addressTypeId)
-      .subscribe(
-        (res => {
-          return true;
-        })
-      );
-    this.addressForm.reset();
-  }
-}
-
-
diff --git a/src/app/clients/create-client/create-client.component.html b/src/app/clients/create-client/create-client.component.html
deleted file mode 100644
index f50b881c4..000000000
--- a/src/app/clients/create-client/create-client.component.html
+++ /dev/null
@@ -1,248 +0,0 @@
-<div class="container m-t-40 m-b-40">
-
- <aw-wizard class="m-t-10" #wizard [navBarLayout]="'large-empty-symbols'">
-  <aw-wizard-step stepTitle="Title of step 1" [navigationSymbol]="{ symbol: '1' }">
-
-
-      <div  fxLayoutAlign="center">
-          <mat-card class="example-card">
-              <mat-card-header>
-                <div mat-card-avatar class="example-header-image"></div>
-                <mat-card-title>Shiba Inu</mat-card-title>
-                <mat-card-subtitle>Dog Breed</mat-card-subtitle>
-              </mat-card-header>
-              <mat-card-content>
-                  <form class="example-form">
-                      <mat-form-field class="example-full-width">
-                        <input matInput placeholder="Company (disabled)" disabled value="Google">
-                      </mat-form-field>
-                    
-                      <table class="example-full-width" cellspacing="0"><tr>
-                        <td><mat-form-field class="example-full-width">
-                          <input matInput placeholder="First name">
-                        </mat-form-field></td>
-                        <td><mat-form-field class="example-full-width">
-                          <input matInput placeholder="Long Last Name That Will Be Truncated">
-                        </mat-form-field></td>
-                      </tr></table>
-                    
-                      <p>
-                        <mat-form-field class="example-full-width">
-                          <textarea matInput placeholder="Address">1600 Amphitheatre Pkwy</textarea>
-                        </mat-form-field>
-                        <mat-form-field class="example-full-width">
-                          <textarea matInput placeholder="Address 2"></textarea>
-                        </mat-form-field>
-                      </p>
-                    
-                      <table class="example-full-width" cellspacing="0"><tr>
-                        <td><mat-form-field class="example-full-width">
-                          <input matInput placeholder="City">
-                        </mat-form-field></td>
-                        <td><mat-form-field class="example-full-width">
-                          <input matInput placeholder="State">
-                        </mat-form-field></td>
-                        <td><mat-form-field class="example-full-width">
-                          <input matInput #postalCode maxlength="5" placeholder="Postal Code" value="94043">
-                          <mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
-                        </mat-form-field></td>
-                      </tr></table>
-                    </form>
-                    
-              </mat-card-content>
-              <mat-card-actions>
-                <button mat-button>LIKE</button>
-                <button mat-button>SHARE</button>
-              </mat-card-actions>
-            </mat-card>
-            
-         
-        </div>
-
-
-  </aw-wizard-step>
-  <!-- <aw-wizard-step stepTitle="Title of step 2" [navigationSymbol]="{ symbol: '2' }" >
-      <div class="col-sm-6 mx-auto">
-          <div class="card mt-5">
-        <div class="card-body">
-              <form>
-                <fieldset>
-
-                  <div class="form-group row">
-                    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
-                    <div class="col-sm-10">
-                      <input readonly="" class="form-control-plaintext" id="staticEmail" value="email@example.com" type="text">
-                    </div>
-                  </div>
-                  <div class="form-group">
-                    <label for="exampleInputEmail1">Email address</label>
-                    <input class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" type="email">
-                    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
-                  </div>
-                  <div class="form-group">
-                    <label for="exampleInputPassword1">Password</label>
-                    <input class="form-control" id="exampleInputPassword1" placeholder="Password" type="password">
-                  </div>
-                  <div class="form-group">
-                    <label for="exampleSelect1">Example select</label>
-                    <select class="form-control" id="exampleSelect1">
-                      <option>1</option>
-                      <option>2</option>
-                      <option>3</option>
-                      <option>4</option>
-                      <option>5</option>
-                    </select>
-                  </div>
-                  <div class="form-group">
-                    <label for="exampleSelect2">Example multiple select</label>
-                    <select multiple="" class="form-control" id="exampleSelect2">
-                      <option>1</option>
-                      <option>2</option>
-                      <option>3</option>
-                      <option>4</option>
-                      <option>5</option>
-                    </select>
-                  </div>
-                  <div class="form-group">
-                    <label for="exampleTextarea">Example textarea</label>
-                    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
-                  </div>
-                  <div class="form-group">
-                    <label for="exampleInputFile">File input</label>
-                    <input class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp" type="file">
-                    <small id="fileHelp" class="form-text text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
-                  </div>
-                  <fieldset class="form-group">
-                    <legend>Radio buttons</legend>
-                    <div class="form-check">
-                      <label class="form-check-label">
-                        <input class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked="" type="radio">
-                        Option one is this and that—be sure to include why it's great
-                      </label>
-                    </div>
-                    <div class="form-check">
-                    <label class="form-check-label">
-                        <input class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2" type="radio">
-                        Option two can be something else and selecting it will deselect option one
-                      </label>
-                    </div>
-                    <div class="form-check disabled">
-                    <label class="form-check-label">
-                        <input class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled="" type="radio">
-                        Option three is disabled
-                      </label>
-                    </div>
-                  </fieldset>
-                  <fieldset class="form-group">
-                    <legend>Checkboxes</legend>
-                    <div class="form-check">
-                      <label class="form-check-label">
-                        <input class="form-check-input" value="" checked="" type="checkbox">
-                        Option one is this and that—be sure to include why it's great
-                      </label>
-                    </div>
-                    <div class="form-check disabled">
-                      <label class="form-check-label">
-                        <input class="form-check-input" value="" disabled="" type="checkbox">
-                        Option two is disabled
-                      </label>
-                    </div>
-                  </fieldset>
-                </fieldset>
-              </form>
-
-              <button type="button" class="btn btn-primary float-left" awPreviousStep>Go to previous step</button>
-              <button type="button" class="btn btn-primary float-right" awNextStep>Go to next step</button>
-              </div>
-            </div>
-          </div>
-
-  </aw-wizard-step>
-  <aw-wizard-step stepTitle="Title of step 3" [navigationSymbol]="{ symbol: '3' }">
-    Content of Step 3
-    <button type="button" class="btn btn-primary"  awPreviousStep>Previous Step</button>
-    <button type="button" class="btn btn-primary" >Finish</button>
-  </aw-wizard-step>
-</aw-wizard>
-</div> 
-<div class="container">
-
- <aw-wizard class="mt-5" #wizard [navBarLayout]="'large-empty-symbols'">
-  <aw-wizard-step stepTitle="Title of step 1" [navigationSymbol]="{ symbol: '1' }">
-
-          <div class="col-sm-6 mx-auto">
-              <div class="card mt-5">
-    <div class="card-body">
-      <div class="form-group">
-          <fieldset disabled="">
-            <label class="control-label" for="disabledInput">Disabled input</label>
-            <input class="form-control" id="disabledInput" placeholder="Disabled input here..." disabled="" type="text">
-          </fieldset>
-        </div>
-
-        <div class="form-group">
-          <fieldset>
-            <label class="control-label" for="readOnlyInput">Readonly input</label>
-            <input class="form-control" id="readOnlyInput" placeholder="Readonly input here…" readonly="" type="text">
-          </fieldset>
-        </div>
-
-        <div class="form-group has-success">
-          <label class="form-control-label" for="inputSuccess1">Valid input</label>
-          <input value="correct value" class="form-control is-valid" id="inputValid" type="text">
-          <div class="valid-feedback">Success! You've done it.</div>
-        </div>
-
-        <div class="form-group has-danger">
-          <label class="form-control-label" for="inputDanger1">Invalid input</label>
-          <input value="wrong value" class="form-control is-invalid" id="inputInvalid" type="text">
-          <div class="invalid-feedback">Sorry, that username's taken. Try another?</div>
-        </div>
-
-        <div class="form-group">
-          <label class="col-form-label col-form-label-lg" for="inputLarge">Large input</label>
-          <input class="form-control form-control-lg" placeholder=".form-control-lg" id="inputLarge" type="text">
-        </div>
-
-        <div class="form-group">
-          <label class="col-form-label" for="inputDefault">Default input</label>
-          <input class="form-control" placeholder="Default input" id="inputDefault" type="text">
-        </div>
-
-        <div class="form-group">
-          <label class="col-form-label col-form-label-sm" for="inputSmall">Small input</label>
-          <input class="form-control form-control-sm" placeholder=".form-control-sm" id="inputSmall" type="text">
-        </div>
-
-        <div class="form-group">
-          <label class="control-label">Input addons</label>
-          <div class="form-group">
-            <div class="input-group mb-3">
-              <div class="input-group-prepend">
-                <span class="input-group-text">$</span>
-              </div>
-              <input class="form-control" aria-label="Amount (to the nearest dollar)" type="text">
-              <div class="input-group-append">
-                <span class="input-group-text">.00</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <button type="button" class="btn btn-primary float-right" awNextStep>Next Step</button>
-        </div>
-      </div>
-    </div>
-
-
-  </aw-wizard-step>
-  <aw-wizard-step stepTitle="Title of step 2" [navigationSymbol]="{ symbol: '2' }" >
-     
-
-  </aw-wizard-step>
-  <aw-wizard-step stepTitle="Title of step 3" [navigationSymbol]="{ symbol: '3' }">
-    Content of Step 3
-    <button type="button" class="btn btn-primary"  awPreviousStep>Previous Step</button>
-    <button type="button" class="btn btn-primary" >Finish</button>
-  </aw-wizard-step> -->
-</aw-wizard>
-</div> 
diff --git a/src/app/clients/create-client/create-client.component.scss b/src/app/clients/create-client/create-client.component.scss
deleted file mode 100644
index 81c45bbeb..000000000
--- a/src/app/clients/create-client/create-client.component.scss
+++ /dev/null
@@ -1,13 +0,0 @@
- .example-card {
-    width: 500px;
-  } 
-  
-  .example-form {
-    min-width: 150px;
-    max-width: 500px;
-    width: 100%;
-  }
-  
-  .example-full-width {
-    width: 100%;
-  }
\ No newline at end of file
diff --git a/src/app/clients/create-client/create-client.component.spec.ts b/src/app/clients/create-client/create-client.component.spec.ts
deleted file mode 100644
index 9a8598793..000000000
--- a/src/app/clients/create-client/create-client.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CreateClientComponent } from './create-client.component';
-
-describe('CreateClientComponent', () => {
-  let component: CreateClientComponent;
-  let fixture: ComponentFixture<CreateClientComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ CreateClientComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(CreateClientComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/clients/create-client/create-client.component.ts b/src/app/clients/create-client/create-client.component.ts
deleted file mode 100644
index e7e322c4a..000000000
--- a/src/app/clients/create-client/create-client.component.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Component, OnInit} from '@angular/core';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-@Component({
-  selector: 'mifosx-create-client',
-  templateUrl: './create-client.component.html',
-  styleUrls: ['./create-client.component.scss']
-})
-export class CreateClientComponent implements OnInit {
-
-  isLinear = false;
-  firstFormGroup: FormGroup;
-  secondFormGroup: FormGroup;
-
-  constructor(private _formBuilder: FormBuilder) { }
-
-  ngOnInit() {
-    this.firstFormGroup = this._formBuilder.group({
-      firstCtrl: ['', Validators.required]
-    });
-    this.secondFormGroup = this._formBuilder.group({
-      secondCtrl: ['', Validators.required]
-    });
-  }
-
-}
diff --git a/src/app/clients/create-identity/create-identity.component.html b/src/app/clients/create-identity/create-identity.component.html
deleted file mode 100644
index 976a6df11..000000000
--- a/src/app/clients/create-identity/create-identity.component.html
+++ /dev/null
@@ -1,53 +0,0 @@
-<div class="container m-t-40 m-b-40">
-
-    <aw-wizard class="m-t-10" #wizard [navBarLayout]="'large-empty-symbols'">
-      <aw-wizard-step stepTitle="Address" [navigationSymbol]="{ symbol: '1' }">
-  
-        <!--         [(ngModel)]="item.id" [ngModelOptions]="{standalone: true}" ngDefaultControl
-   -->
-        <div fxLayoutAlign="center">
-          <mat-card class="example-card">
-            <mat-card-header>
-            </mat-card-header>
-            <mat-card-content>
-              <form class="example-form" (ngSubmit)="onSubmit()" #f="ngForm">
-                <mat-form-field class="example-full-width">
-                  <mat-select placeholder="Document Type" [(ngModel)]="document" [ngModelOptions]="{standalone: true}" ngDefaultControl>
-                    <div>
-  
-                      <mat-option *ngFor="let item of clientIdentifierDocument" name="option" [value]="item?.id">{{item?.name}}</mat-option>
-                    </div>
-                  </mat-select>
-                </mat-form-field>
-                <mat-form-field class="example-full-width">
-                    <mat-select placeholder="Status" [(ngModel)]="status" [ngModelOptions]="{standalone: true}" ngDefaultControl>
-                      <div>
-    
-                        <mat-option *ngFor="let item of statusTypes" name="option" [value]="item?.label">{{item?.label}}</mat-option>
-                      </div>
-                    </mat-select>
-                  </mat-form-field>
-  
-                <mat-form-field class="example-full-width">
-                  <input matInput name="uniqueid" placeholder="Unique ID #" ngModel>
-                </mat-form-field>
-                <mat-form-field class="example-full-width">
-                  <input matInput name="description" placeholder="Description" ngModel>
-                </mat-form-field>
-  
-  
-                <button mat-raised-button>Create</button>
-  
-              </form>
-  
-            </mat-card-content>
-          </mat-card>
-  
-  
-        </div>
-  
-  
-      </aw-wizard-step>
-    </aw-wizard>
-  </div>
-  
\ No newline at end of file
diff --git a/src/app/clients/create-identity/create-identity.component.scss b/src/app/clients/create-identity/create-identity.component.scss
deleted file mode 100644
index 4ad60da3c..000000000
--- a/src/app/clients/create-identity/create-identity.component.scss
+++ /dev/null
@@ -1,17 +0,0 @@
- 
-  
-  .example-form {
-    min-width: 150px;
-    max-width: 500px;
-    width: 100%;
-  }
-  
-  .example-full-width {
-    width: 100%;
-    padding:5px 3px;
-  }
-  
-  .mat-raised-button{
-    margin-left:10px;
-    margin-top:10px;
-  }
\ No newline at end of file
diff --git a/src/app/clients/create-identity/create-identity.component.spec.ts b/src/app/clients/create-identity/create-identity.component.spec.ts
deleted file mode 100644
index 3dd7ca09e..000000000
--- a/src/app/clients/create-identity/create-identity.component.spec.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/* tslint:disable:no-unused-variable */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { CreateIdentityComponent } from './create-identity.component';
-
-describe('CreateIdentityComponent', () => {
-  let component: CreateIdentityComponent;
-  let fixture: ComponentFixture<CreateIdentityComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ CreateIdentityComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(CreateIdentityComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/clients/create-identity/create-identity.component.ts b/src/app/clients/create-identity/create-identity.component.ts
deleted file mode 100644
index 9ddc86230..000000000
--- a/src/app/clients/create-identity/create-identity.component.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { Component, OnInit, ViewEncapsulation, ViewChild  } from '@angular/core';
-import { ActivatedRoute, Params } from '@angular/router';
-import { Subscription } from 'rxjs';
-import { NgForm } from '@angular/forms';
-import { Router } from '@angular/router';
-
-import { ClientsService } from 'app/clients/clients.service';
-@Component({
-  selector: 'mifosx-app-create-identity',
-  templateUrl: './create-identity.component.html',
-  styleUrls: ['./create-identity.component.scss']
-})
-export class CreateIdentityComponent implements OnInit {
-  id: number = undefined;
-  paramsSubscription: Subscription;
-  clientIdentifierDocument: any = undefined;
-  document: any = undefined;
-  status: any = undefined;
-  value: any = undefined;
-  mymodel: any = undefined;
-  addressTypeId: any = undefined;
-  addressStateId: any = undefined;
-  addressCountryId: any = undefined;
-
-  identifier: any = undefined;
-  statusTypes = [{
-    id: 1,
-    label: 'Active'
-  }, {
-    id: 2,
-    label: 'Inactive',
-}];
-  constructor(private route: ActivatedRoute, private clientService: ClientsService) {}
-
-  @ViewChild('f') identifierForm: NgForm;
-
-
-  ngOnInit() {
-    this.paramsSubscription = this.route.params
-      .subscribe(
-        (params: Params) => {
-          this.id = params['id'];
-        }
-      );
-    console.log(this.id);
-    this.getClientIdentifierTemplate(this.id);
-  }
-
-  getClientIdentifierTemplate(id: any) {
-    this.clientService.getClientIdentifierTemplate(id)
-      .subscribe(
-        (res => {
-          this.clientIdentifierDocument = res;
-          console.log(res);
-        })
-      );
-  }
-
-  onSubmit() {
-    this.identifier = {};
-    this.identifier.description = this.identifierForm.value.description;
-    this.identifier.documentKey = this.identifierForm.value.uniqueid;
-    this.identifier.documentTypeId = this.document;
-    this.identifier.status = this.status;
-
-
-    this.clientService.postClientIdentifier(this.id, this.identifier)
-      .subscribe(
-        (res => {
-          return true;
-        })
-      );
-    this.identifierForm.reset();
-  }
-
-}
diff --git a/src/app/clients/edit-address/edit-address.component.html b/src/app/clients/edit-address/edit-address.component.html
deleted file mode 100644
index e91808eed..000000000
--- a/src/app/clients/edit-address/edit-address.component.html
+++ /dev/null
@@ -1,64 +0,0 @@
-<div class="container m-t-40 m-b-40">
-
-  <aw-wizard class="m-t-10" #wizard [navBarLayout]="'large-empty-symbols'">
-    <aw-wizard-step stepTitle="Address" [navigationSymbol]="{ symbol: '1' }">
-
-      <div fxLayoutAlign="center">
-        <mat-card class="example-card">
-          <mat-card-header>
-          </mat-card-header>
-          <mat-card-content>
-            <form class="example-form" *ngIf="form" (ngSubmit)="onSubmit()" #f="ngForm">
-
-
-              <mat-form-field class="example-full-width">
-                <input matInput name="street" placeholder="Street" [(ngModel)]="form.street">
-              </mat-form-field>
-              <mat-form-field class="example-full-width">
-                <input matInput name="addressLine1" placeholder="Address Line 1" [(ngModel)]="form.addressLine1">
-              </mat-form-field>
-
-
-              <mat-form-field class="example-full-width">
-                <input matInput name="addressLine2" placeholder="Address Line 2" [(ngModel)]="form.addressLine2">
-              </mat-form-field>
-              <mat-form-field class="example-full-width">
-                <input matInput name="addressLine3" placeholder="Address Line 3" [(ngModel)]="form.addressLine3">
-              </mat-form-field>
-              <mat-form-field class="example-full-width">
-                <input matInput name="city" placeholder="City" [(ngModel)]="form.city">
-              </mat-form-field>
-              <mat-form-field class="example-full-width">
-                <mat-select placeholder="State" [(ngModel)]="form.stateProvinceId" [ngModelOptions]="{standalone: true}" ngDefaultControl>
-                  <div>
-
-                    <mat-option *ngFor="let item of clientAddress?.stateProvinceIdOptions" name="option" [value]="item?.id">{{item?.name}}</mat-option>
-                  </div>
-                </mat-select>
-              </mat-form-field>
-              <mat-form-field class="example-full-width">
-                <mat-select placeholder="Country" [(ngModel)]="form.countryId" [ngModelOptions]="{standalone: true}" ngDefaultControl>
-                  <div>
-
-                    <mat-option *ngFor="let item of clientAddress?.countryIdOptions" name="option" [value]="item?.id">{{item?.name}}</mat-option>
-                  </div>
-                </mat-select>
-              </mat-form-field>
-              <mat-form-field class="example-full-width">
-                <input matInput name="postalCode" placeholder="Postal Code" [(ngModel)]="form.postalCode">
-              </mat-form-field>
-
-              <button mat-raised-button>Update</button>
-
-            </form>
-
-          </mat-card-content>
-        </mat-card>
-
-
-      </div>
-
-
-    </aw-wizard-step>
-  </aw-wizard>
-</div>
diff --git a/src/app/clients/edit-address/edit-address.component.scss b/src/app/clients/edit-address/edit-address.component.scss
deleted file mode 100644
index 15edfa57c..000000000
--- a/src/app/clients/edit-address/edit-address.component.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.example-card {
-    width: 500px;
-  } 
-  
-  .example-form {
-    min-width: 150px;
-    max-width: 500px;
-    width: 100%;
-  }
-  
-  .example-full-width {
-    width: 100%;
-  }
\ No newline at end of file
diff --git a/src/app/clients/edit-address/edit-address.component.spec.ts b/src/app/clients/edit-address/edit-address.component.spec.ts
deleted file mode 100644
index 7e9277a5a..000000000
--- a/src/app/clients/edit-address/edit-address.component.spec.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/* tslint:disable:no-unused-variable */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { EditAddressComponent } from './edit-address.component';
-
-describe('EditAddressComponent', () => {
-  let component: EditAddressComponent;
-  let fixture: ComponentFixture<EditAddressComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ EditAddressComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(EditAddressComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/clients/edit-address/edit-address.component.ts b/src/app/clients/edit-address/edit-address.component.ts
deleted file mode 100644
index 159cd10dc..000000000
--- a/src/app/clients/edit-address/edit-address.component.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import { Component, OnInit, ViewEncapsulation, ViewChild  } from '@angular/core';
-import { ActivatedRoute, Params } from '@angular/router';
-import { Subscription } from 'rxjs';
-import { NgForm } from '@angular/forms';
-import { Router } from '@angular/router';
-import { FormControl } from '@angular/forms';
-import { ClientsService } from 'app/clients/clients.service';
-
-@Component({
-  selector: 'mifosx-app-edit-address',
-  templateUrl: './edit-address.component.html',
-  styleUrls: ['./edit-address.component.scss']
-})
-export class EditAddressComponent implements OnInit {
-
-  id: number = undefined;
-  paramsSubscription: Subscription;
-  clientAddress: any = undefined;
-  clientAddressK: any = undefined;
-  value: any = undefined;
-  mymodel: any = undefined;
-  addressTypeId: number = undefined;
-  addressId: number = undefined;
-  addressStateId: any = undefined;
-  addressCountryId: any = undefined;
-  random: any = undefined;
-
-  address: any = undefined;
-
-  form: any = undefined;
-
-  constructor(private route: ActivatedRoute, private clientService: ClientsService) {}
-
-  @ViewChild('f') addressForm: NgForm;
-
-
-  ngOnInit() {
-    this.paramsSubscription = this.route.params
-      .subscribe(
-        (params: Params) => {
-          this.id = params['id'];
-          this.addressTypeId = +params['addressTypeId'];
-          this.addressId = +params['addressId'];
-
-          console.log(this.addressId);
-          console.log(this.addressTypeId);
-        }
-      );
-    this.getClientAddressTemplate();
-    this.getClientAddress(this.id, this.addressId);
-  }
-
-  getClientAddressTemplate() {
-    this.clientService.getClientAddressTemplate()
-      .subscribe(
-        (res => {
-          this.clientAddress = res;
-          //  console.log(res);
-        })
-      );
-  }
-
-  getClientAddress(id: any, addressId: any) {
-    this.clientService.getClientAddress(id)
-      .subscribe(
-        (res => {
-          this.form = {};
-          this.clientAddressK = res;
-          this.clientAddressK.forEach((item: any) => {
-            if (item.addressId === addressId) {
-              this.form.street = item.street;
-              this.form.addressLine1 = item.addressLine1;
-              this.form.addressLine2 = item.addressLine2;
-              this.form.addressLine3 = item.addressLine3;
-              this.form.city = item.city;
-              this.form.stateProvinceId = item.stateProvinceId;
-              this.form.countryId = item.countryId;
-              this.form.postalCode = item.postalCode;
-            }
-          });
-        })
-      );
-  }
-
-  onSubmit() {
-    this.address = {};
-    this.address.addressId = this.addressId;
-    this.address.street = this.form.street;
-    this.address.addressLine1 = this.form.addressLine1;
-    this.address.addressLine2 = this.form.addressLine2;
-    this.address.addressLine3 = this.form.addressLine3;
-    this.address.city = this.form.city;
-    this.address.stateProvinceId = this.form.stateProvinceId;
-    this.address.countryId = this.form.countryId;
-    this.address.postalCode = this.form.postalCode;
-    this.address.locale = 'en';
-
-    console.log(this.address);
-
-    this.clientService.putClientAddress(this.id, this.address, this.addressTypeId)
-      .subscribe(
-        (res => {
-          return true;
-        })
-      );
-  }
-}
-
diff --git a/src/app/clients/upload-document/upload-document.component.html b/src/app/clients/upload-document/upload-document.component.html
deleted file mode 100644
index 2cd710a70..000000000
--- a/src/app/clients/upload-document/upload-document.component.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<div class="container m-t-40 m-b-40">
-
-  <aw-wizard class="m-t-10" #wizard [navBarLayout]="'large-empty-symbols'">
-    <aw-wizard-step stepTitle="Document" [navigationSymbol]="{ symbol: '1' }">
-
-      <!--         [(ngModel)]="item.id" [ngModelOptions]="{standalone: true}" ngDefaultControl
-   -->
-      <div fxLayoutAlign="center">
-        <mat-card class="example-card">
-          <mat-card-header>
-          </mat-card-header>
-          <mat-card-content>
-            <form class="example-form" (ngSubmit)="onSubmit()" #f="ngForm">
-              <mat-form-field class="example-full-width">
-                <input matInput name="name" placeholder="Name" ngModel>
-              </mat-form-field>
-
-              <mat-form-field class="example-full-width">
-                <input matInput name="description" placeholder="Description" ngModel>
-              </mat-form-field>
-
-              <div class="example-full-width">
-                <input type="file" #inputFile (change)="onFileSelected($event)" [style.display]="'none'" />
-
-                <button mat-button (click)="inputFile.click()">Import file</button> {{ inputFile.value }}
-              </div>
-
-
-              <button mat-raised-button>Create</button>
-
-            </form>
-
-          </mat-card-content>
-        </mat-card>
-
-
-      </div>
-
-
-    </aw-wizard-step>
-  </aw-wizard>
-</div>
-
diff --git a/src/app/clients/upload-document/upload-document.component.scss b/src/app/clients/upload-document/upload-document.component.scss
deleted file mode 100644
index 4ad60da3c..000000000
--- a/src/app/clients/upload-document/upload-document.component.scss
+++ /dev/null
@@ -1,17 +0,0 @@
- 
-  
-  .example-form {
-    min-width: 150px;
-    max-width: 500px;
-    width: 100%;
-  }
-  
-  .example-full-width {
-    width: 100%;
-    padding:5px 3px;
-  }
-  
-  .mat-raised-button{
-    margin-left:10px;
-    margin-top:10px;
-  }
\ No newline at end of file
diff --git a/src/app/clients/upload-document/upload-document.component.spec.ts b/src/app/clients/upload-document/upload-document.component.spec.ts
deleted file mode 100644
index c6c107792..000000000
--- a/src/app/clients/upload-document/upload-document.component.spec.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/* tslint:disable:no-unused-variable */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { UploadDocumentComponent } from './upload-document.component';
-
-describe('UploadDocumentComponent', () => {
-  let component: UploadDocumentComponent;
-  let fixture: ComponentFixture<UploadDocumentComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ UploadDocumentComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(UploadDocumentComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/clients/upload-document/upload-document.component.ts b/src/app/clients/upload-document/upload-document.component.ts
deleted file mode 100644
index a3d263864..000000000
--- a/src/app/clients/upload-document/upload-document.component.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Component, OnInit, ViewEncapsulation, ViewChild  } from '@angular/core';
-import { ActivatedRoute, Params } from '@angular/router';
-import { Subscription } from 'rxjs';
-import { NgForm } from '@angular/forms';
-import { Router } from '@angular/router';
-
-import { ClientsService } from 'app/clients/clients.service';
-
-@Component({
-  selector: 'mifosx-app-upload-document',
-  templateUrl: './upload-document.component.html',
-  styleUrls: ['./upload-document.component.scss']
-})
-export class UploadDocumentComponent implements OnInit {
-
-  id: number = undefined;
-  paramsSubscription: Subscription;
-
-  document: any = undefined;
-
-
-  filename: any = undefined;
-  constructor(private route: ActivatedRoute, private clientService: ClientsService) {}
-
-  @ViewChild('f') documentForm: NgForm;
-
-
-  ngOnInit() {
-    this.paramsSubscription = this.route.params
-      .subscribe(
-        (params: Params) => {
-          this.id = params['id'];
-        }
-      );
-    console.log(this.id);
-    // this.getClientIdentifierTemplate(this.id);
-  }
-
-
-
-  onFileSelected($event: any) {
-    this.filename = $event.target.files[0].name;
-    console.log(this.filename);
-  }
-
-  onSubmit() {
-    this.document = {};
-    this.document.description = this.documentForm.value.description;
-    this.document.name = this.documentForm.value.name;
-    this.document.filename = this.filename;
-    console.log(this.filename);
-
-    this.clientService.postClientDocument(this.id, this.document)
-      .subscribe(
-        (res => {
-          return true;
-        })
-      );
-    this.documentForm.reset();
-  }
-}
-
diff --git a/src/app/clients/view-client/view-client-component-dialog.html b/src/app/clients/view-client/view-client-component-dialog.html
deleted file mode 100644
index 9feb3e42c..000000000
--- a/src/app/clients/view-client/view-client-component-dialog.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<h2 mat-dialog-title>Install Angular</h2>
-<mat-dialog-content>
-  <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
-</mat-dialog-content>
-<mat-dialog-actions>
-  <button mat-button mat-dialog-close>Cancel</button>
-  <button mat-button [mat-dialog-close]="true" cdkFocusInitial>Install</button>
-</mat-dialog-actions>
diff --git a/src/app/clients/view-client/view-client.component.html b/src/app/clients/view-client/view-client.component.html
deleted file mode 100644
index cb49a8bf8..000000000
--- a/src/app/clients/view-client/view-client.component.html
+++ /dev/null
@@ -1,400 +0,0 @@
-<div class="container m-t-40 m-b-40">
-  <mat-tab-group mat-stretch-tabs>
-    <mat-tab label="Clients">
-      <div fxLayout="row" fxLayoutGap="20px" class="m-t-30">
-        <div fxFlex="30%">
-          <mat-card class="example-card">
-            <mat-card-header>
-              <mat-card-title>
-                <h3>{{clientInfo?.displayName}}</h3>
-              </mat-card-title>
-              <mat-card-subtitle> </mat-card-subtitle>
-            </mat-card-header>
-            <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
-            <mat-card-content class="border">
-
-              <table>
-                <tr>
-                  <th>Name:</th>
-                  <td>{{clientInfo?.displayName}}</td>
-                </tr>
-                <tr>
-                  <th>Activation date</th>
-                  <td>{{clientInfo?.activationDate}}</td>
-                </tr>
-
-                <tr>
-                  <th>Member</th>
-                  <td>{{clientInfo?.groupNames}}</td>
-                </tr>
-
-                <tr>
-                  <th>Is Staff</th>
-                  <td>{{clientInfo?.isStaff}}</td>
-                </tr>
-
-                <tr>
-                  <th>Mobile No</th>
-                  <td>{{clientInfo?.mobileNo}}</td>
-                </tr>
-
-                <tr>
-                  <th>Gender</th>
-                  <td>{{clientInfo?.gender.name }}</td>
-                </tr>
-                <tr>
-                  <th>Client Type</th>
-                  <td>{{clientInfo?.clientType.name}}</td>
-                </tr>
-                <tr>
-                  <th>Client Classification</th>
-                  <td>{{clientInfo?.clientClassification.name}}</td>
-                </tr>
-
-                <tr>
-                  <th>Date of Birth</th>
-                  <td>{{clientInfo?.dateOfBirth}}</td>
-                </tr>
-
-
-
-              </table>
-            </mat-card-content>
-
-          </mat-card>
-        </div>
-        <div fxFlex="70%">
-          <div class="mat-elevation-z8 m-b-55">
-
-            <!-- LOAN TABLE -->
-            <mat-toolbar>
-              <span>Loan Account Overview</span>
-
-            </mat-toolbar>
-
-            <table mat-table [dataSource]="dataSourceLoan" matSort>
-
-              <!-- Name Column -->
-              <ng-container matColumnDef="account">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header='accountNo'> Account #ng </th>
-                <td mat-cell *matCellDef="let row"> {{row.accountNo}} </td>
-              </ng-container>
-
-              <!-- Account no Column -->
-              <ng-container matColumnDef="loanAccount">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header='productName'> Loan Account </th>
-                <td mat-cell *matCellDef="let row"> {{row.productName}} </td>
-              </ng-container>
-
-              <!-- External ID Column -->
-              <ng-container matColumnDef="originalLoan">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header='originalLoan'> Original Loan </th>
-                <td mat-cell *matCellDef="let row"> {{row.originalLoan}} </td>
-              </ng-container>
-
-
-
-              <!-- Status Column -->
-              <ng-container matColumnDef="loanBalance">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header='loanBalance'> Loan Balance </th>
-                <td mat-cell *matCellDef="let row"> {{row.loanBalance}} </td>
-              </ng-container>
-
-              <!-- Color Column -->
-              <ng-container matColumnDef="amountPaid">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header='amountPaid'> Amount Paid </th>
-                <td mat-cell *matCellDef="let row"> {{row.amountPaid}} </td>
-              </ng-container>
-
-
-              <!-- ID Column -->
-              <ng-container matColumnDef="type">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header='loanType.value'> Type </th>
-                <td mat-cell *matCellDef="let row"> {{row.loanType.value}} </td>
-              </ng-container>
-
-              <tr mat-header-row *matHeaderRowDef="displayedLoanColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: displayedLoanColumns;" [routerLink]="[]">
-
-              </tr>
-            </table>
-            <mat-paginator #loanPaginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-          </div>
-          <!-- SAVINGS TABLE -->
-
-          <div class="mat-elevation-z8 m-b-55">
-            <mat-toolbar>
-              <span>Savings Account Overview</span>
-            </mat-toolbar>
-            <table mat-table [dataSource]="dataSourceSavings" matSort matSortActive="accountNo">
-
-              <!-- Name Column -->
-              <ng-container matColumnDef="account">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header="accountNo"> Account # </th>
-                <td mat-cell *matCellDef="let row"> {{row.accountNo}} </td>
-              </ng-container>
-
-              <!-- Account no Column -->
-              <ng-container matColumnDef="savingsAccount">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header='productName'> Saving Account </th>
-                <td mat-cell *matCellDef="let row"> {{row.productName}} </td>
-              </ng-container>
-
-              <!-- External ID Column -->
-              <ng-container matColumnDef="lastActive">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header='lastActiveTransactionDate'> Last Active </th>
-                <td mat-cell *matCellDef="let row"> {{row.lastActiveTransactionDate}} </td>
-              </ng-container>
-
-
-
-              <!-- Status Column -->
-              <ng-container matColumnDef="balance">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header='accountBalance'> Balance </th>
-                <td mat-cell *matCellDef="let row"> {{row.accountBalance}} </td>
-              </ng-container>
-
-
-              <tr mat-header-row *matHeaderRowDef="displayedSavingsColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: displayedSavingsColumns;" [routerLink]="[]">
-
-              </tr>
-            </table>
-            <mat-paginator #savingsPaginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
-          </div>
-
-
-          <!-- SHARES TABLE -->
-
-          <div class="mat-elevation-z8 m-b-55">
-            <mat-toolbar>
-              <span>Shares Account Overview</span>
-            </mat-toolbar>
-            <table mat-table [dataSource]="dataSourceShares" matSort>
-
-              <!-- Name Column -->
-              <ng-container matColumnDef="account">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header='accountNo'> Account # </th>
-                <td mat-cell *matCellDef="let row"> {{row.accountNo}} </td>
-              </ng-container>
-
-              <!-- Account no Column -->
-              <ng-container matColumnDef="shareAccount">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header='productName'> Share Account#</th>
-                <td mat-cell *matCellDef="let row"> {{row.productName}} </td>
-              </ng-container>
-
-              <!-- External ID Column -->
-              <ng-container matColumnDef="approvedShares">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header='totalApprovedShares'> Approved Shares </th>
-                <td mat-cell *matCellDef="let row"> {{row.totalApprovedShares}} </td>
-              </ng-container>
-
-
-
-              <!-- Status Column -->
-              <ng-container matColumnDef="pending">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header='totalPendingForApprovalShares'> Pending for Approval Shares </th>
-                <td mat-cell *matCellDef="let row"> {{row.totalPendingForApprovalShares}} </td>
-              </ng-container>
-
-
-              <tr mat-header-row *matHeaderRowDef="displayedSharesColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: displayedSharesColumns;" [routerLink]="[]">
-
-              </tr>
-            </table>
-            <mat-paginator #sharesPaginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
-          </div>
-        </div>
-      </div>
-    </mat-tab>
-    <mat-tab label="Address">
-      <div class="m-l-20 m-t-30">
-        <button mat-raised-button [routerLink]="['/clients/address', id]" routerLinkActive="active">Create Address</button>
-      </div>
-      <div fxLayout="row wrap" fxLayoutGap="40px" class="m-t-30 m-b-30">
-        <div *ngFor="let item of clientAddress">
-          <mat-card class="address-card m-t-20 m-l-20">
-            <mat-card-header>
-              <div mat-card-avatar class=""></div>
-              <mat-card-title>{{item?.addressType}}</mat-card-title>
-            </mat-card-header>
-            <mat-card-content>
-
-              <div class="custom-table">
-                <table>
-                  <tr>
-                    <th>Street</th>
-                    <td>{{item?.street}}</td>
-                  </tr>
-                  <tr>
-                    <th> Address Line 1 </th>
-                    <td>{{item?.addressLine1}}</td>
-                  </tr>
-                  <tr>
-                    <th> Address Line 2 </th>
-                    <td>{{item?.addressLine2}}</td>
-                  </tr>
-                  <tr>
-                    <th> Address Line 3 </th>
-                    <td>{{item?.addressLine3}}</td>
-                  </tr>
-                  <tr>
-                    <th> City </th>
-                    <td>{{item?.city}}</td>
-                  </tr>
-                  <tr>
-                    <th> State / Province
-                      <td>{{item?.stateName}}</td>
-                  </tr>
-                  <tr>
-                    <th> Country
-                      <td>{{item?.countryName}}</td>
-                  </tr>
-                  <tr>
-                    <th> Postal Code </th>
-                    <td>{{item?.postalCode}}</td>
-                  </tr>
-                  <tr>
-                    <th> is Active ? </th>
-                    <td>{{item?.isActive}}</td>
-                  </tr>
-
-                </table>
-              </div>
-            </mat-card-content>
-            <mat-card-actions>
-              <button mat-button  [routerLink]="['/clients/editaddress', id, item.addressTypeId, item.addressId]" routerLinkActive="active">EDIT</button>
-              <button mat-button>ENABLE</button>
-            </mat-card-actions>
-          </mat-card>
-        </div>
-      </div>
-    </mat-tab>
-    <mat-tab label="Notes">
-      <div fxLayout="row" fxLayoutGap="20px" class="m-t-30" fxLayoutAlign="center center">
-        <div fxFlex="70%">
-          <form (ngSubmit)="onSubmit()" #f="ngForm">
-
-            <mat-form-field>
-              <input matInput name="clientnotes" placeholder="Textarea" ngModel>
-            </mat-form-field>
-            <div class="m-l-10">
-              <button mat-raised-button>Create</button>
-            </div>
-
-          </form>
-          <div *ngFor="let item of allNotes">
-            <mat-card class="m-t-30">
-              {{item.note}}
-            </mat-card>
-          </div>
-
-        </div>
-      </div>
-
-    </mat-tab>
-    <mat-tab label="Identities">
-
-
-      <div class="m-l-10 m-b-30 m-t-30">
-        <button mat-raised-button [routerLink]="['/clients/addclientidentifier', id]" routerLinkActive="active">Create Identity</button>
-      </div>
-      <div class="mat-elevation-z8 m-b-55">
-        <table mat-table [dataSource]="dataSourceIdentifiers" matSort>
-
-          <!-- Name Column -->
-          <ng-container matColumnDef="id">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header='id'> ID </th>
-            <td mat-cell *matCellDef="let row"> {{row.id}} </td>
-          </ng-container>
-
-          <!-- Account no Column -->
-          <ng-container matColumnDef="description">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header='description'> Description </th>
-            <td mat-cell *matCellDef="let row"> {{row.description}} </td>
-          </ng-container>
-
-          <!-- External ID Column -->
-          <ng-container matColumnDef="type">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header='type'> Type </th>
-            <td mat-cell *matCellDef="let row"> {{row.documentType.name}} </td>
-          </ng-container>
-
-
-
-          <!-- Status Column -->
-          <ng-container matColumnDef="status">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header='status'> Status </th>
-            <td mat-cell *matCellDef="let row"> {{row.status}} </td>
-          </ng-container>
-
-
-          <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef> Actions </th>
-            <td mat-cell *matCellDef="let row">
-              <i class="fa fa-times" (click)="$event.stopPropagation(); deleteClientIdentifier(id, row.id)"></i>
-            </td>
-          </ng-container>
-
-          <tr mat-header-row *matHeaderRowDef="displayedIdentifierColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: displayedIdentifierColumns;" [routerLink]="[]">
-
-          </tr>
-        </table>
-      </div>
-    </mat-tab>
-
-    <mat-tab label="Documents">
-      <div class="m-l-10 m-b-30 m-t-30">
-        <button mat-raised-button [routerLink]="['/clients/addclientdocument', id]" routerLinkActive="active">Create Identity</button>
-      </div>
-      <div class="mat-elevation-z8 m-b-55">
-        <table mat-table [dataSource]="dataSourceDocuments" matSort>
-
-
-          <ng-container matColumnDef="name">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header='name'> Name </th>
-            <td mat-cell *matCellDef="let row"> {{row.name}} </td>
-          </ng-container>
-
-
-          <ng-container matColumnDef="description">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header='description'> Description </th>
-            <td mat-cell *matCellDef="let row"> {{row.description}} </td>
-          </ng-container>
-
-
-          <ng-container matColumnDef="filename">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header='type'> Type </th>
-            <td mat-cell *matCellDef="let row"> {{row.fileName}} </td>
-          </ng-container>
-
-          <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header='actions'> Actions </th>
-            <td mat-cell *matCellDef="let row">
-              <i class="fa fa-cloud-download"></i>
-              <!-- <i class="p-l-5 fa fa-eye"></i> -->
-              <i class="p-l-5 fa fa-times" (click)="$event.stopPropagation(); deleteClientDocuments(id, row.id)"></i>              
-            </td>
-          </ng-container>
-
-
-
-          <tr mat-header-row *matHeaderRowDef="displayedDocumentColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: displayedDocumentColumns;" [routerLink]="[]">
-
-          </tr>
-        </table>
-      </div>
-    </mat-tab>
-
-  </mat-tab-group>
-
-
-</div>
-<p>User with ID {{ id }} loaded.</p>
-
diff --git a/src/app/clients/view-client/view-client.component.scss b/src/app/clients/view-client/view-client.component.scss
deleted file mode 100644
index e319f0297..000000000
--- a/src/app/clients/view-client/view-client.component.scss
+++ /dev/null
@@ -1,182 +0,0 @@
-.example-card {
-  //  width:40%;
-}
-
-.address-card {
-  width: 470px;
-}
-
-.example-header-image {
-  background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
-  background-size: cover;
-}
-
-.border {
-  border: 0.5px solid #DDD;
-  border-right-width: 0;
-  border-left-width: 0;
-  border-radius: 0;
-}
-
-th {
-  white-space: nowrap;
-  overflow: hidden;
-  text-align: left;
-  padding: 6px 3px 6px;
-}
-
-tr {
-  word-wrap: break-word;
-  padding: 6px 0px 6px;
-}
-
-/* .mat-row:nth-child(even) {
-  background-color: #fafafa;
-}
-
-.mat-header-row {
-  background-color: #fafafa;
-} */
-
-table {
-  width: 100%;
-}
-
-.mat-form-field {
-  font-size: 14px;
-  width: 100%;
-}
-
-td,
-th {
-  width: 15%;
-}
-
-.mat-tab-label {
-  // font-weight: bold;
-}
-
-.mat-tab-label.mat-tab-label-active {}
-
-.mat-toolbar {
-  font-size: 18px;
-  background-color: #fafafa;
-}
-
-// css horizontal table with responsiveness
-.custom-table {
-  table {
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    border-collapse: collapse;
-    border-spacing: 0;
-  }
-  table tr {
-    border: 1px solid #ddd;
-    border-right-width: 0;
-    border-left-width: 0;
-    padding: 5px;
-  }
-  table th {
-    padding: 10px;
-    text-align: middle;
-  }
-  table td {
-    padding: 10px;
-    text-align: middle;
-  }
-  table th {
-    text-transform: uppercase;
-    font-size: 14px;
-    letter-spacing: 1px;
-  }
-  tr:nth-child(even) {
-    //  background-color: #fafafa;
-  }
-  @media screen and (max-width: 600px) {
-    table {
-      border: 0;
-    }
-    table thead {
-      display: none;
-    }
-    table tr {
-      margin-bottom: 10px;
-      display: block;
-      border-bottom: 2px solid #ddd;
-    }
-    table td {
-      display: block;
-      text-align: left;
-      font-size: 13px;
-      border-bottom: 1px dotted #ccc;
-    }
-    table td:last-child {
-      border-bottom: 0;
-    }
-    table td:before {
-      content: attr(data-label);
-      float: left;
-      text-transform: uppercase;
-      font-weight: bold;
-    }
-    table th {
-      border: 0px;
-    }
-  }
-}
-
-// css vertical table with responsiveness
-.document-table {
-  table {
-    border: 1px solid #ccc;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    border-collapse: collapse;
-    border-spacing: 0;
-  }
-  table tr {
-    border: 1px solid #ddd;
-    padding: 5px;
-  }
-  table th,
-  table td {
-    padding: 10px;
-    text-align: center;
-  }
-  table th {
-    text-transform: uppercase;
-    font-size: 14px;
-    letter-spacing: 1px;
-  }
-  @media screen and (max-width: 600px) {
-    table {
-      border: 0;
-    }
-    table thead {
-      display: none;
-    }
-    table tr {
-      margin-bottom: 10px;
-      display: block;
-      border-bottom: 2px solid #ddd;
-    }
-    table td {
-      display: block;
-      text-align: right;
-      font-size: 13px;
-      border-bottom: 1px dotted #ccc;
-    }
-    table td:last-child {
-      border-bottom: 0;
-    }
-    table td:before {
-      content: attr(data-label);
-      float: left;
-      text-transform: uppercase;
-      font-weight: bold;
-    }
-  }
-}
diff --git a/src/app/clients/view-client/view-client.component.spec.ts b/src/app/clients/view-client/view-client.component.spec.ts
deleted file mode 100644
index 8b02d3f2e..000000000
--- a/src/app/clients/view-client/view-client.component.spec.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { ViewClientComponent } from './view-client.component';
-
-describe('CreateClientComponent', () => {
-  let component: ViewClientComponent;
-  let fixture: ComponentFixture<ViewClientComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ViewClientComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ViewClientComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/clients/view-client/view-client.component.ts b/src/app/clients/view-client/view-client.component.ts
deleted file mode 100644
index 77467c33d..000000000
--- a/src/app/clients/view-client/view-client.component.ts
+++ /dev/null
@@ -1,262 +0,0 @@
-import { ClientsService } from 'app/clients/clients.service';
-import { Component, OnInit, OnDestroy, ViewEncapsulation, ViewChild } from '@angular/core';
-import { ActivatedRoute, Params } from '@angular/router';
-import { Subscription } from 'rxjs';
-import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator, MatSort, MatTableDataSource, MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
-import { NgForm } from '@angular/forms';
-import { Router } from '@angular/router';
-@Component({
-  selector: 'mifosx-view-client',
-  templateUrl: './view-client.component.html',
-  styleUrls: ['./view-client.component.scss'],
-  encapsulation: ViewEncapsulation.None
-})
-export class ViewClientComponent implements OnInit, OnDestroy {
-  notes: any = undefined;
-  id: number = undefined;
-  loanAccounts: any = undefined;
-  savingsAccounts: any = undefined;
-  shareAccounts: any = undefined;
-  upcomingCharges: any = undefined;
-  clientInfo: any = undefined;
-  paramsSubscription: Subscription;
-  post: any = [];
-  clientAddress: any = undefined;
-  allNotes: any = undefined;
-  clientIdentifiers: any = undefined;
-  clientDocuments: any = undefined;
-  docId: any = undefined;
-  private LOAN_DATA: any = undefined;
-  private SAVINGS_DATA: any = undefined;
-  private SHARES_DATA: any = undefined;
-  displayedLoanColumns = ['account', 'loanAccount', 'originalLoan', 'loanBalance', 'amountPaid', 'type'];
-  displayedSavingsColumns = ['account', 'savingsAccount', 'lastActive', 'balance'];
-  displayedSharesColumns = ['account', 'shareAccount', 'approvedShares', 'pending'];
-  displayedIdentifierColumns = ['id', 'description', 'type', 'status', 'actions'];
-  displayedDocumentColumns = ['name', 'description', 'filename', 'actions'];
-
-  dataSourceLoan = new MatTableDataSource([]);
-  dataSourceSavings = new MatTableDataSource([]);
-  dataSourceShares = new MatTableDataSource([]);
-  dataSourceIdentifiers = new MatTableDataSource([]);
-  dataSourceDocuments = new MatTableDataSource([]);
-
-  @ViewChild('f') noteForm: NgForm;
-  @ViewChild(MatPaginator) paginator: MatPaginator;
-  @ViewChild('loanPaginator') loanPaginator: MatPaginator;
-  @ViewChild('savingsPaginator') savingsPaginator: MatPaginator;
-  @ViewChild('sharesPaginator') sharesPaginator: MatPaginator;
-  @ViewChild(MatSort) sort: MatSort;
-
-  constructor(private route: ActivatedRoute, private clientService: ClientsService,
-              private router: Router, public dialog: MatDialog) {}
-
-  ngOnInit() {
-    this.paramsSubscription = this.route.params
-      .subscribe(
-        (params: Params) => {
-          this.id = params['id'];
-        }
-      );
-
-    this.getClientId(this.id);
-    this.getClientAccounts(this.id);
-    this.getClientCharges(this.id);
-    this.getClientAddress(this.id);
-    this.getClientNotes(this.id);
-    this.getClientIdentifier(this.id);
-    this.getClientDocuments(this.id);
-  }
-
-  getClientId(id: any) {
-    this.clientService.getClientId(id)
-      .subscribe(
-        (res => {
-          const groupArray = new Array;
-          this.clientInfo = res;
-          this.clientInfo.dateOfBirth = this.clientInfo.dateOfBirth.reverse().join('-');
-          this.clientInfo.activationDate = this.clientInfo.activationDate.reverse().join('-');
-
-          this.clientInfo.groups.forEach(function (item: any) {
-            groupArray.push(item.name);
-          });
-          this.clientInfo.groupNames = groupArray.join('|');
-
-        })
-      );
-  }
-
-  getClientAccounts(id: any) {
-    this.clientService.getClientAccounts(id)
-      .subscribe(
-        (res => {
-          this.loanAccounts = res['loanAccounts'];
-          this.savingsAccounts = res['savingsAccounts'];
-          this.shareAccounts = res['shareAccounts'];
-          this.LOAN_DATA = this.loanAccounts;
-          this.SAVINGS_DATA = this.savingsAccounts;
-          this.SHARES_DATA = this.shareAccounts;
-          this.dataSourceLoan = new MatTableDataSource(this.LOAN_DATA);
-          this.dataSourceSavings = new MatTableDataSource(this.SAVINGS_DATA);
-          this.dataSourceShares = new MatTableDataSource(this.SHARES_DATA);
-          this.dataSourceLoan.paginator = this.loanPaginator;
-          this.dataSourceSavings.paginator = this.savingsPaginator;
-          this.dataSourceShares.paginator = this.sharesPaginator;
-          this.dataSourceLoan.sort = this.sort;
-          this.dataSourceSavings.sort = this.sort;
-          this.dataSourceShares.sort = this.sort;
-
-        })
-      );
-  }
-
-  getClientCharges(id: any) {
-    this.clientService.getClientCharges(id)
-      .subscribe(
-        (res => {
-          this.upcomingCharges = res['pageItems'];
-        })
-      );
-  }
-
-  getClientAddress(id: any) {
-    this.clientService.getClientAddress(id)
-      .subscribe(
-        (res => {
-          this.clientAddress = res;
-        })
-      );
-  }
-
-  getClientNotes(id: any) {
-    this.clientService.getClientNote(id)
-      .subscribe(
-        (res => {
-          this.allNotes = res;
-        })
-      );
-  }
-
-  getClientIdentifier(id: any) {
-    this.clientService.getClientIdentifiers(id)
-      .subscribe(
-        (res => {
-          this.clientIdentifiers = res;
-          this.clientIdentifiers.forEach(function (item: any) {
-            item.status = item.status.split('.')[1];
-          });
-
-          this.dataSourceIdentifiers = new MatTableDataSource(this.clientIdentifiers);
-          this.dataSourceIdentifiers.paginator = this.paginator;
-          this.dataSourceIdentifiers.sort = this.sort;
-        })
-      );
-  }
-
-  getClientDocuments(id: any) {
-    this.clientService.getClientDocuments(id)
-      .subscribe(
-        (res => {
-          this.clientDocuments = res;
-          this.docId = res.id;
-          this.dataSourceDocuments = new MatTableDataSource(res);
-          this.dataSourceDocuments.paginator = this.paginator;
-          this.dataSourceDocuments.sort = this.sort;
-        })
-      );
-
-  }
-  onSubmit() {
-    //  this.submitted = true;
-    this.notes = {};
-    //  const d = new Date();
-    this.notes.note = this.noteForm.value.clientnotes;
-    // this.notes.createdOn =  d;
-    console.log(this.notes);
-    this.clientService.postClientNote(this.id, this.notes)
-      .subscribe(
-        (res => {
-          this.getClientNotes(this.id);
-          return true;
-        })
-      );
-    this.noteForm.reset();
-
-  }
-
-  deleteClientIdentifier(id: number, identifierId: number) {
-    this.clientService.deleteClientIdentifier(id, identifierId)
-      .subscribe(
-        (res => {
-          this.getClientIdentifier(this.id);
-          return true;
-        })
-      );
-  }
-  deleteClientDocuments(id: number, docId: number) {
-    console.log(docId);
-    this.clientService.deleteClientDocuments(id, docId)
-      .subscribe(
-        (res => {
-          this.getClientDocuments(this.id);
-          return true;
-        })
-      );
-  }
-
-/*   openDialog() {
-    const dialogRef = this.dialog.open(ViewClientDialogComponent, {
-      height: '350px'
-    });
-
-    dialogRef.afterClosed().subscribe(result => {
-      console.log(`Dialog result: ${result}`);
-    });
-  }
- */
-  ngOnDestroy() {
-    this.paramsSubscription.unsubscribe();
-  }
-
-}
-
-
-/*
-@Component({
-  selector: 'mifosx-view-client-component-dialog',
-  templateUrl: 'view-client-component-dialog.html',
-})
-export class ViewClientDialogComponent implements OnInit, OnDestroy {
-
-  paramsSubscription: Subscription;
-  id: any = undefined;
-  clientDocuments: any = undefined;
-  constructor(private route: ActivatedRoute, private clientService: ClientsService,
-    private router: Router, public dialog: MatDialog) {}
-
-  ngOnInit() {
-    this.paramsSubscription = this.route.params
-      .subscribe(
-        (params: Params) => {
-          this.id = params['id'];
-        }
-      );
-      this.getClientDocuments(this.id);
-    }
-
-    getClientDocuments(id: any) {
-      this.clientService.getClientDocuments(id)
-        .subscribe(
-          (res => {
-            this.clientDocuments = res;
-          })
-        );
-    }
-
-    ngOnDestroy() {
-      this.paramsSubscription.unsubscribe();
-    }
-
-}
- */
diff --git a/src/app/clients/view-loan/view-loan.component.html b/src/app/clients/view-loan/view-loan.component.html
deleted file mode 100644
index 744d7bdab..000000000
--- a/src/app/clients/view-loan/view-loan.component.html
+++ /dev/null
@@ -1,354 +0,0 @@
-<!-- <div class="fluid-container">
-  <div class="container">
-    <div class="col text-center">
-      <div class="card  border-secondary d-inline-block mt-5">
-
-        <div class="btn-group" role="group">
-          <button type="button" class="btn btn-flat btn-default">
-            <b>Add Loan</b>
-          </button>
-          <button type="button" class="btn btn-flat btn-default">
-            <b>Approve</b>
-          </button>
-          <button type="button" class="btn btn-flat btn-default">
-            <b>Modify</b>
-          </button>
-          <button type="button" class="btn btn-flat btn-default">
-            <b>Reject</b>
-          </button>
-          <button type="button" class="btn btn-flat btn-default">
-            <b>More</b>
-          </button>
-        </div>
-
-      </div>
-    </div>
-    <div class="row mt-5 mb-5">
-      <div class="col-sm-4">
-        <div class="card">
-          <table class="table table-hover table-responsive-md table-fixed">
-            <tr>
-              <th>Name:</th>
-              <td>Bill Gates</td>
-            </tr>
-            <tr>
-              <th>Telephone:</th>
-              <td>555 77 854</td>
-            </tr>
-            <tr>
-              <th>Telephone:</th>
-              <td>555 77 855</td>
-            </tr>
-            <tr>
-              <th>Telephone:</th>
-              <td>555 77 855</td>
-            </tr>
-            <tr>
-              <th>Telephone:</th>
-              <td>555 77 855</td>
-            </tr>
-            <tr>
-              <th>Telephone:</th>
-              <td>555 77 855</td>
-            </tr>
-          </table>
-        </div>
-        <div class="card mt-4">
-          <table class="table table-hover table-responsive-md table-fixed">
-            <tr>
-              <th>Telephone:</th>
-              <td>555 77 855</td>
-            </tr>
-            <tr>
-              <th>Telephone:</th>
-              <td>555 77 855</td>
-            </tr>
-          </table>
-        </div>
-      </div>
-
-      <div class="col-sm-8">
-        <div class="card ml-4">
-          <table class="table table-hover table-responsive-md table-fixed">
-
-            <thead>
-              <tr>
-                <th>#</th>
-                <th>Name</th>
-                <th>Surname</th>
-                <th>Country</th>
-                <th>City</th>
-                <th>Position</th>
-
-              </tr>
-            </thead>
-
-            <tbody>
-              <tr>
-                <th scope="row">4</th>
-                <td>Jerry</td>
-                <td>Horwitz</td>
-                <td>Italy</td>
-                <td>Bari</td>
-                <td>Editor-in-chief</td>
-
-              </tr>
-              <tr>
-                <th scope="row">5</th>
-                <td>Janis</td>
-                <td>Joplin</td>
-                <td>Poland</td>
-                <td>Warsaw</td>
-                <td>Video Maker</td>
-
-              </tr>
-              <tr>
-                <th scope="row">6</th>
-                <td>Gary</td>
-                <td>Winogrand</td>
-                <td>Germany</td>
-                <td>Berlin</td>
-                <td>Photographer</td>
-
-              </tr>
-              <tr>
-                <th scope="row">7</th>
-                <td>Angie</td>
-                <td>Smith</td>
-                <td>USA</td>
-                <td>San Francisco</td>
-                <td>Teacher</td>
-
-              </tr>
-              <tr>
-                <th scope="row">8</th>
-                <td>John</td>
-                <td>Mattis</td>
-                <td>France</td>
-                <td>Paris</td>
-                <td>Actor</td>
-
-              </tr>
-              <tr>
-                <th scope="row">9</th>
-                <td>Otto</td>
-                <td>Morris</td>
-                <td>Germany</td>
-                <td>Munich</td>
-                <td>Singer</td>
-
-              </tr>
-              <tr>
-                <th scope="row">9</th>
-                <td>Otto</td>
-                <td>Morris</td>
-                <td>Germany</td>
-                <td>Munich</td>
-                <td>Singer</td>
-
-              </tr>
-              <tr>
-                <th scope="row">9</th>
-                <td>Otto</td>
-                <td>Morris</td>
-                <td>Germany</td>
-                <td>Munich</td>
-                <td>Singer</td>
-
-              </tr>
-              <tr>
-                <th scope="row">9</th>
-                <td>Otto</td>
-                <td>Morris</td>
-                <td>Germany</td>
-                <td>Munich</td>
-                <td>Singer</td>
-
-              </tr>
-              <tr>
-                <th scope="row">9</th>
-                <td>Otto</td>
-                <td>Morris</td>
-                <td>Germany</td>
-                <td>Munich</td>
-                <td>Singer</td>
-
-              </tr>
-              <tr>
-                <th scope="row">9</th>
-                <td>Otto</td>
-                <td>Morris</td>
-                <td>Germany</td>
-                <td>Munich</td>
-                <td>Singer</td>
-
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-    <div class="card bg-secondary mb-5 mt-5">
-      <ngb-tabset class="ml-3 mt-1 mr-3">
-        <ngb-tab title="Simple">
-
-          <ng-template ngbTabContent>
-
-            <table class="table table-active table-hover table-responsive-md table-fixed mt-3">
-
-              <thead>
-                <tr>
-                  <th>#</th>
-                  <th>Name</th>
-                  <th>Surname</th>
-                  <th>Country</th>
-                  <th>City</th>
-                  <th>Position</th>
-
-                </tr>
-              </thead>
-
-              <tbody>
-                <tr>
-                  <th scope="row">4</th>
-                  <td>Jerry</td>
-                  <td>Horwitz</td>
-                  <td>Italy</td>
-                  <td>Bari</td>
-                  <td>Editor-in-chief</td>
-
-                </tr>
-                <tr>
-                  <th scope="row">5</th>
-                  <td>Janis</td>
-                  <td>Joplin</td>
-                  <td>Poland</td>
-                  <td>Warsaw</td>
-                  <td>Video Maker</td>
-
-                </tr>
-                <tr>
-                  <th scope="row">6</th>
-                  <td>Gary</td>
-                  <td>Winogrand</td>
-                  <td>Germany</td>
-                  <td>Berlin</td>
-                  <td>Photographer</td>
-
-                </tr>
-                <tr>
-                  <th scope="row">7</th>
-                  <td>Angie</td>
-                  <td>Smith</td>
-                  <td>USA</td>
-                  <td>San Francisco</td>
-                  <td>Teacher</td>
-
-                </tr>
-                <tr>
-                  <th scope="row">8</th>
-                  <td>John</td>
-                  <td>Mattis</td>
-                  <td>France</td>
-                  <td>Paris</td>
-                  <td>Actor</td>
-
-                </tr>
-                <tr>
-                  <th scope="row">9</th>
-                  <td>Otto</td>
-                  <td>Morris</td>
-                  <td>Germany</td>
-                  <td>Munich</td>
-                  <td>Singer</td>
-
-                </tr>
-                <tr>
-                  <th scope="row">9</th>
-                  <td>Otto</td>
-                  <td>Morris</td>
-                  <td>Germany</td>
-                  <td>Munich</td>
-                  <td>Singer</td>
-
-                </tr>
-                <tr>
-                  <th scope="row">9</th>
-                  <td>Otto</td>
-                  <td>Morris</td>
-                  <td>Germany</td>
-                  <td>Munich</td>
-                  <td>Singer</td>
-
-                </tr>
-                <tr>
-                  <th scope="row">9</th>
-                  <td>Otto</td>
-                  <td>Morris</td>
-                  <td>Germany</td>
-                  <td>Munich</td>
-                  <td>Singer</td>
-
-                </tr>
-
-              </tbody>
-
-            </table>
-
-          </ng-template>
-
-        </ngb-tab>
-        <ngb-tab>
-          <ng-template ngbTabTitle>
-            <b>Title</b>
-          </ng-template>
-          <ng-template ngbTabContent>
-            <table class="table table-active table-hover table-responsive-md table-fixed mt-3">
-
-              <thead>
-                <tr>
-                  <th scope="col">#</th>
-                  <th scope="col">First</th>
-                  <th scope="col">Last</th>
-                  <th scope="col">Handle</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <th scope="row">1</th>
-                  <td>Mark</td>
-                  <td>Otto</td>
-                  <td>@mdo</td>
-                </tr>
-                <tr>
-                  <th scope="row">2</th>
-                  <td>Jacob</td>
-                  <td>Thornton</td>
-                  <td>@fat</td>
-                </tr>
-                <tr>
-                  <th scope="row">3</th>
-                  <td colspan="2">Larry the Bird</td>
-                  <td>@twitter</td>
-                </tr>
-              </tbody>
-
-            </table>
-
-          </ng-template>
-        </ngb-tab>
-        <ngb-tab title="Disabled">
-          <ng-template ngbTabContent>
-            <p>Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id diam. Nulla facilisi.
-              Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget tincidunt eu, congue et odio.
-              Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus ultrices et. Sed diam urna,
-              egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim,
-              nec tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque penatibus
-              et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac lorem aliquet ultricies in
-              eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p>
-          </ng-template>
-        </ngb-tab>
-      </ngb-tabset>
-    </div>
-  </div>
-</div> -->
diff --git a/src/app/clients/view-loan/view-loan.component.scss b/src/app/clients/view-loan/view-loan.component.scss
deleted file mode 100644
index c10ea5c95..000000000
--- a/src/app/clients/view-loan/view-loan.component.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-// .btn-flat {
-//     filter:progid:DXImageTransform.Microsoft.Gradient(enabled='false');
-//     -webkit-box-shadow: none;
-//     -moz-box-shadow: none;
-//     box-shadow: none;
-//     background-image:none;
-//     border:0;
-// }
-
-// .btn {
-//     border: 1px solid #DDD;
-//     border-right-width: 0;
-//     border-radius: 0;
-//   }
-
diff --git a/src/app/clients/view-loan/view-loan.component.spec.ts b/src/app/clients/view-loan/view-loan.component.spec.ts
deleted file mode 100644
index 8a5d2b13c..000000000
--- a/src/app/clients/view-loan/view-loan.component.spec.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { ViewLoanComponent } from './view-loan.component';
-
-describe('ViewLoanComponent', () => {
-  let component: ViewLoanComponent;
-  let fixture: ComponentFixture<ViewLoanComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ViewLoanComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ViewLoanComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/clients/view-loan/view-loan.component.ts b/src/app/clients/view-loan/view-loan.component.ts
deleted file mode 100644
index c348a7aa0..000000000
--- a/src/app/clients/view-loan/view-loan.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'mifosx-view-loan',
-  templateUrl: './view-loan.component.html',
-  styleUrls: ['./view-loan.component.scss']
-})
-export class ViewLoanComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}