feat: add clients view page

- add client view page
- add general tab 
- add status lookup pipe to store styles based on status
- add accounts filter pipe to filter accounts
- add status related colors in _color.scss

Fixes: #216

src/app/app.module.ts

@@ -35,6 +35,7 @@ import { SystemModule } from './system/system.module';
 import { ProductsModule } from './products/products.module';
 
 
+
 /** Main Routing Module */
 import { AppRoutingModule } from './app-routing.module';
 
@@ -63,7 +64,7 @@ import { AppRoutingModule } from './app-routing.module';
     SelfServiceModule,
     SystemModule,
     ProductsModule,
-    AppRoutingModule
+    AppRoutingModule,
   ],
   declarations: [WebAppComponent, NotFoundComponent],
   providers: [],

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

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, Component } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 /** Routing Imports */
@@ -9,20 +9,50 @@ import { extract } from '../core/i18n/i18n.service';
 
 /** Custom Components */
 import { ClientsComponent } from './clients.component';
+import { ClientsViewComponent } from './clients-view/clients-view.component';
+import { GeneralTabComponent } from './clients-view/general-tab/general-tab.component';
 
 /** Custom Resolvers */
 import { ClientsResolver } from './common-resolvers/clients.resolver';
+import { ClientViewResolver } from './common-resolvers/client-view.resolver';
+import { ClientAccountsResolver } from './common-resolvers/client-accounts.resolver';
+import { ClientChargesResolver } from './common-resolvers/client-charges.resolver';
+import { ClientSummaryResolver } from './common-resolvers/client-summary.resolver';
 
 const routes: Routes = [
-  Route.withShell([
-    {
-      path: 'clients',
-      component: ClientsComponent,
-      data: { title: extract('Clients'), breadcrumb: 'Clients', routeParamBreadcrumb: false },
-      resolve: {
-        clientsData: ClientsResolver
+  Route.withShell([{
+    path: 'clients',
+    data: { title: extract('Clients'), breadcrumb: 'Clients', routeParamBreadcrumb: false },
+    children: [
+      {
+        path: '',
+        component: ClientsComponent,
+        resolve: {
+          clientsData: ClientsResolver
+        }
+      },
+      {
+        path: ':clientId',
+        component: ClientsViewComponent,
+        data: { title: extract('Clients View'), routeParamBreadcrumb: 'clientId' },
+        resolve: {
+          clientViewData: ClientViewResolver
+        },
+        children: [
+          {
+            path: 'general',
+            component: GeneralTabComponent,
+            resolve: {
+              clientAccountsData: ClientAccountsResolver,
+              clientChargesData: ClientChargesResolver,
+              clientSummary: ClientSummaryResolver
+            },
+
+          }
+        ]
       }
-    }
+    ]
+  }
   ])
 ];
 
@@ -30,7 +60,11 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
   providers: [
-    ClientsResolver
+    ClientsResolver,
+    ClientViewResolver,
+    ClientAccountsResolver,
+    ClientChargesResolver,
+    ClientSummaryResolver
   ]
 })
 export class ClientsRoutingModule { }

src/app/clients/clients-view/clients-view.component-theme.scss

@@ -0,0 +1,13 @@
+@import "~@angular/material/theming";
+
+@mixin clients-view-component-theme($theme) {
+  $primary: map-get($theme, primary);
+
+  mifosx-clients-view {
+    .client-card {
+      .header {
+        background-color: mat-color($primary, 500);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,52 @@
+<mat-card class="client-card">
+  <mat-card-header fxLayout="column" class="header">
+    <mat-card-title-group class="header-title-group">
+      <!-- change this -->
+      <div class="profile-image-container">
+        <div>
+          <img mat-card-md-image class="profile-image" [src]="(clientImage)?clientImage:'../../../assets/images/user_placeholder.png'">
+        </div>
+      </div>
+      <div class="mat-typography client-card-title">
+        <mat-card-title>
+          <h3>
+            Client Name : {{clientViewData.displayName}}
+          </h3>
+        </mat-card-title>
+        <mat-card-subtitle>
+          <p>
+            Client #:{{clientViewData.accountNo}} | External
+            Id: {{clientViewData.externalId}} | Staff:{{clientViewData.staffName}}<br />
+            Activation Date :
+            {{(clientViewData.activationDate)?(clientViewData.activationDate|date) :'Not Activated'}}<br />
+            Member Of : <span *ngFor="let group of clientViewData.groups">
+              <a>{{group.name}}</a>
+              &nbsp;
+            </span>
+            <span *ngIf="!clientViewData.groups">Unassigned</span>
+            <br />
+          </p>
+        </mat-card-subtitle>
+      </div>
+    </mat-card-title-group>
+    <mat-card-actions class="client-actions">
+      <button mat-raised-button>Edit</button>
+      <button mat-raised-button>+ New Loan</button>
+      <button mat-raised-button>+ New Savings</button>
+      <button mat-raised-button>+ Deposit</button>
+      <button mat-raised-button [matMenuTriggerFor]="More">More</button>
+      <mat-menu #More="matMenu">
+        <button mat-menu-item>Item 1</button>
+        <button mat-menu-item>Item 2</button>
+      </mat-menu>
+    </mat-card-actions>
+  </mat-card-header>
+  <mat-card-content>
+    <nav mat-tab-nav-bar>
+      <a mat-tab-link [routerLink]="['./general']" routerLinkActive active="true">
+        General
+      </a>
+    </nav>
+    <router-outlet></router-outlet>
+  </mat-card-content>
+</mat-card>

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

@@ -0,0 +1,29 @@
+.client-card {
+  margin: 0 auto;
+  max-width: 80rem;
+  width: 90%;
+  padding: 0;
+  .header {
+    padding: 1%;
+    .header-title-group {
+      .client-card-title {
+        color: white;
+        width: 90%;
+        p {
+          color: white;
+        }
+      }
+    }
+    .profile-image-container {
+      margin: 1%;
+      .profile-image {
+        object-fit: cover;
+        border-radius: 20px;
+      }
+    }
+    .client-actions {
+      align-self: flex-end;
+      margin: 0 1%;
+    }
+  }
+}

src/app/clients/clients-view/clients-view.component.spec.ts

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

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

@@ -0,0 +1,31 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { DomSanitizer } from '@angular/platform-browser';
+
+/** Custom Services */
+import { ClientsService } from '../clients.service';
+@Component({
+  selector: 'mifosx-clients-view',
+  templateUrl: './clients-view.component.html',
+  styleUrls: ['./clients-view.component.scss']
+})
+export class ClientsViewComponent implements OnInit {
+  clientViewData: any;
+  clientImage: any;
+  constructor(private route: ActivatedRoute,
+    private clientsService: ClientsService,
+    private _sanitizer: DomSanitizer) {
+    this.route.data.subscribe((data: { clientViewData: any }) => {
+      this.clientViewData = data.clientViewData;
+    });
+
+  }
+
+  ngOnInit() {
+    this.clientsService.getClientProfileImage(this.clientViewData.id).subscribe(base64Image => {
+      this.clientImage = this._sanitizer.bypassSecurityTrustResourceUrl(base64Image);
+    });
+  }
+
+}

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

@@ -0,0 +1,363 @@
+<div class="tab-container mat-typography">
+  <h3>Performance History</h3>
+  <div fxLayout="row" fxLayoutGap="32px" class="performance-history-container">
+    <p>
+      No. Of Loan Cycles :{{clientSummary.loanCycle}} <br />
+      No. of Active Loans :{{clientSummary.activeLoans}} <br />
+      Last Loan Amount :{{clientSummary.lastLoanAmount}} <br />
+    </p>
+    <p>
+      No. of Active Savings :{{clientSummary.activeSavings}} <br />
+      Total Savings :{{clientSummary.totalSavings}} <br />
+
+    </p>
+  </div>
+
+  <!-- Upcoming Charges -->
+
+  <h3>Upcoming Charges</h3>
+  <button mat-raised-button class="f-right" color="primary">Charges Overview</button>
+  <table mat-table [dataSource]="upcomingCharges" class="mat-elevation-z1">
+
+    <ng-container matColumnDef="Name">
+      <th mat-header-cell *matHeaderCellDef> Name </th>
+      <td mat-cell *matCellDef="let element"> <i class="fa fa-stop"
+          [ngClass]="(!(element.isWaived || element.isPaid))|statusLookup"></i>
+        {{element.name}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Due as of">
+      <th mat-header-cell *matHeaderCellDef> Due as of </th>
+      <td mat-cell *matCellDef="let element"> {{element.dueDate|date}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Due">
+      <th mat-header-cell *matHeaderCellDef> Due </th>
+      <td mat-cell *matCellDef="let element"> {{element.amount}} </td>
+    </ng-container>
+    <ng-container matColumnDef="Paid">
+      <th mat-header-cell *matHeaderCellDef>Paid </th>
+      <td mat-cell *matCellDef="let element"> {{element.amountPaid}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Waived">
+      <th mat-header-cell *matHeaderCellDef> Waived </th>
+      <td mat-cell *matCellDef="let element"> {{element.amountWaived}} </td>
+    </ng-container>
+
+
+    <ng-container matColumnDef="Outstanding">
+      <th mat-header-cell *matHeaderCellDef> Outstanding </th>
+      <td mat-cell *matCellDef="let element"> {{element.amountOutstanding}} </td>
+    </ng-container>
+
+
+    <ng-container matColumnDef="Actions">
+      <th mat-header-cell *matHeaderCellDef> Actions </th>
+      <td mat-cell *matCellDef="let element">
+        <button class="account-action-button" mat-raised-button color="primary">
+          <i class="fa fa-dollar"></i>
+        </button>
+        <button class="account-action-button" mat-raised-button color="primary">
+          <i class="fa fa-flag"></i>
+        </button>
+      </td>
+
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="upcomingChargesColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: upcomingChargesColumns;"></tr>
+  </table>
+
+
+  <!-- loans overview table -->
+
+  <h3>Loan Accounts</h3>
+  <button mat-raised-button class="f-right" color="primary"
+    (click)="toggleLoanAccountsOverview()">{{showClosedLoanAccounts?'View Active Accounts':'View Closed Accounts'}}</button>
+  <table *ngIf="!showClosedLoanAccounts" mat-table [dataSource]="loanAccounts|accountsFilter:'loan'"
+    class="mat-elevation-z1">
+
+    <ng-container matColumnDef="Account No">
+      <th mat-header-cell *matHeaderCellDef> Account No. </th>
+      <td mat-cell *matCellDef="let element"> <i class="fa fa-stop"
+          [ngClass]="element.inArrears?'status-active-overdue':(element.status.code|statusLookup)"></i>
+        {{element.accountNo}}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Loan Account">
+      <th mat-header-cell *matHeaderCellDef> Loan Account </th>
+      <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Original Loan">
+      <th mat-header-cell *matHeaderCellDef> Original Loan </th>
+      <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate | date}} </td>
+    </ng-container>
+    <ng-container matColumnDef="Loan Balance">
+      <th mat-header-cell *matHeaderCellDef>Loan Balance </th>
+      <td mat-cell *matCellDef="let element"> {{element.loanBalance}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Amount Paid">
+      <th mat-header-cell *matHeaderCellDef> Amount Paid </th>
+      <td mat-cell *matCellDef="let element"> {{element.accountBalance}} </td>
+    </ng-container>
+
+
+    <ng-container matColumnDef="Type">
+      <th mat-header-cell *matHeaderCellDef> Type </th>
+      <td mat-cell *matCellDef="let element">
+        <i class="fa fa-large" [ngClass]="(element.loanType.value=== 'Individual')?'fa-user':'fa-group'"></i>
+      </td>
+    </ng-container>
+
+
+    <ng-container matColumnDef="Actions">
+      <th mat-header-cell *matHeaderCellDef> Actions </th>
+      <td mat-cell *matCellDef="let element">
+        <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary">
+          <i class="fa fa-dollar"></i>
+        </button>
+        <button *ngIf="element.status.pendingApproval" class="account-action-button" mat-raised-button color="primary">
+          <i class="fa fa-check"></i>
+        </button>
+        <button *ngIf="!element.status.pendingApproval && !element.status.active && !element.status.overpaid"
+          class="account-action-button" mat-raised-button color="primary">
+          <i class="fa fa-flag"></i>
+        </button>
+        <button *ngIf="!element.status.pendingApproval && !element.status.active && element.status.overpaid"
+          class="account-action-button" mat-raised-button color="primary">
+          <i class="fa fa-exchange"></i>
+        </button>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="openLoansColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: openLoansColumns;"></tr>
+  </table>
+
+  <!-- Closed Loan Accounts -->
+  <table *ngIf="showClosedLoanAccounts" mat-table [dataSource]="loanAccounts|accountsFilter:'loan':'closed'"
+    class="mat-elevation-z1">
+
+    <ng-container matColumnDef="Account No">
+      <th mat-header-cell *matHeaderCellDef> Account No. </th>
+      <td mat-cell *matCellDef="let element"> <i class="fa fa-stop"
+          [ngClass]="element.inArrears?'status-active-overdue':(element.status.code|statusLookup)"></i>
+        {{element.accountNo}}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Loan Account">
+      <th mat-header-cell *matHeaderCellDef> Loan Account </th>
+      <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Original Loan">
+      <th mat-header-cell *matHeaderCellDef> Original Loan </th>
+      <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate | date}} </td>
+    </ng-container>
+    <ng-container matColumnDef="Loan Balance">
+      <th mat-header-cell *matHeaderCellDef>Loan Balance </th>
+      <td mat-cell *matCellDef="let element"> {{element.loanBalance}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Amount Paid">
+      <th mat-header-cell *matHeaderCellDef> Amount Paid </th>
+      <td mat-cell *matCellDef="let element"> {{element.accountBalance}} </td>
+    </ng-container>
+
+
+    <ng-container matColumnDef="Type">
+      <th mat-header-cell *matHeaderCellDef> Type </th>
+      <td mat-cell *matCellDef="let element">
+        <i class="fa fa-large" [ngClass]="(element.loanType.value=== 'Individual')?'fa-user':'fa-group'"></i>
+      </td>
+    </ng-container>
+
+
+    <ng-container matColumnDef="Closed Date">
+      <th mat-header-cell *matHeaderCellDef> Closed Date </th>
+      <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate | date}}</td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="closedLoansColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: closedLoansColumns;"></tr>
+  </table>
+
+
+  <!-- Saving overview Table -->
+
+  <h3>Saving Accounts</h3>
+  <button mat-raised-button class="f-right" color="primary"
+    (click)="toggleSavingAccountsOverview()">{{showClosedSavingAccounts?'View Active Accounts':'View Closed Accounts'}}</button>
+  <table *ngIf="!showClosedSavingAccounts" mat-table [dataSource]="savingAccounts|accountsFilter:'saving'"
+    class="mat-elevation-z1">
+
+    <ng-container matColumnDef="Account No">
+      <th mat-header-cell *matHeaderCellDef> Account No. </th>
+      <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
+        {{element.accountNo}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Saving Account">
+      <th mat-header-cell *matHeaderCellDef> Saving Account </th>
+      <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Last Active">
+      <th mat-header-cell *matHeaderCellDef> Last Active </th>
+      <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate | date}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Balance">
+      <th mat-header-cell *matHeaderCellDef> Balance </th>
+      <td mat-cell *matCellDef="let element"> {{element.accountBalance}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Actions">
+      <th mat-header-cell *matHeaderCellDef> Actions </th>
+      <td mat-cell *matCellDef="let element">
+        <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary">
+          <i class="fa fa-arrow-up"></i>
+        </button>
+        <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary">
+          <i class="fa fa-arrow-down"></i>
+        </button>
+        <button *ngIf="element.status.submittedAndPendingApproval" class="account-action-button" mat-raised-button
+          color="primary">
+          <i class="fa fa-check"></i>
+        </button>
+        <button *ngIf="element.status.submittedAndPendingApproval" class="account-action-button" mat-raised-button
+          color="primary">
+          <i class="fa fa-check"></i>
+        </button>
+        <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
+          class="account-action-button" mat-raised-button color="primary">
+          <i class="fa fa-undo"></i>
+        </button>
+        <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
+          class="account-action-button" mat-raised-button color="primary">
+          <i class="fa fa-check-circle"></i>
+        </button>
+      </td>
+
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="openSavingsColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: openSavingsColumns;"></tr>
+  </table>
+
+  <!-- Closed Saving Accounts -->
+
+  <table *ngIf="showClosedSavingAccounts" mat-table [dataSource]="savingAccounts|accountsFilter:'saving':'closed'"
+    class="mat-elevation-z1">
+
+    <ng-container matColumnDef="Account No">
+      <th mat-header-cell *matHeaderCellDef> Account No. </th>
+      <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
+        {{element.accountNo}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Saving Account">
+      <th mat-header-cell *matHeaderCellDef> Saving Account </th>
+      <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Closed Date">
+      <th mat-header-cell *matHeaderCellDef> Closed Date </th>
+      <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate | date}}</td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="closedSavingsColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: closedSavingsColumns;"></tr>
+  </table>
+
+  <!-- Shares overview Table -->
+
+  <h3>Shares Accounts</h3>
+  <button mat-raised-button class="f-right" color="primary"
+    (click)="toggleShareAccountsOverview()">{{showClosedSavingAccounts?'View Active Accounts':'View Closed Accounts'}}</button>
+  <table *ngIf="!showClosedShareAccounts" mat-table [dataSource]="shareAccounts|accountsFilter:'share'"
+    class="mat-elevation-z1">
+
+    <ng-container matColumnDef="Account No">
+      <th mat-header-cell *matHeaderCellDef> Account No. </th>
+      <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
+        {{element.accountNo}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Share Account">
+      <th mat-header-cell *matHeaderCellDef> Share Account </th>
+      <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Approved Shares">
+      <th mat-header-cell *matHeaderCellDef> Approved Shares </th>
+      <td mat-cell *matCellDef="let element"> {{element.totalApprovedShares}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Pending For Approval Shares">
+      <th mat-header-cell *matHeaderCellDef> Pending For Approval Shares </th>
+      <td mat-cell *matCellDef="let element"> {{element.totalPendingForApprovalShares}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Actions">
+      <th mat-header-cell *matHeaderCellDef> Actions </th>
+      <td mat-cell *matCellDef="let element">
+        <button *ngIf="element.status.submittedAndPendingApproval" class="account-action-button" mat-raised-button
+          color="primary">
+          <i class="fa fa-check"></i>
+        </button>
+        <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
+          class="account-action-button" mat-raised-button color="primary">
+          <i class="fa fa-undo"></i>
+        </button>
+        <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
+          class="account-action-button" mat-raised-button color="primary">
+          <i class="fa fa-check-circle"></i>
+        </button>
+      </td>
+
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="openSharesColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: openSharesColumns;"></tr>
+  </table>
+  <!-- Closed Share Accounts -->
+  <table *ngIf="showClosedShareAccounts" mat-table [dataSource]="shareAccounts|accountsFilter:'share':'closed'"
+    class="mat-elevation-z1">
+
+    <ng-container matColumnDef="Account No">
+      <th mat-header-cell *matHeaderCellDef> Account No. </th>
+      <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
+        {{element.accountNo}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Share Account">
+      <th mat-header-cell *matHeaderCellDef> Share Account </th>
+      <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Approved Shares">
+      <th mat-header-cell *matHeaderCellDef> Approved Shares </th>
+      <td mat-cell *matCellDef="let element"> {{element.totalApprovedShares}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Pending For Approval Shares">
+      <th mat-header-cell *matHeaderCellDef> Pending For Approval Shares </th>
+      <td mat-cell *matCellDef="let element"> {{element.totalPendingForApprovalShares}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Closed Date">
+      <th mat-header-cell *matHeaderCellDef> Closed Date </th>
+      <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate | date}}</td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="closedSharesColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: closedSharesColumns;"></tr>
+  </table>
+
+</div>

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

@@ -0,0 +1,22 @@
+.tab-container {
+  padding: 1%;
+  margin: 1%;
+
+  h3{
+    margin:1% auto;
+  }
+  .performance-history-container {
+    border: 1px solid;
+    padding: 1%;
+  }
+
+  table {
+    width: 100%;
+    .account-action-button{
+      min-width: 26px;
+      padding: 0 6px;
+      margin: 4px;
+      line-height: 25px;
+    }
+  }
+}

src/app/clients/clients-view/general-tab/general-tab.component.spec.ts

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

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

@@ -0,0 +1,60 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { DatePipe } from '@angular/common';
+
+
+
+@Component({
+  selector: 'mifosx-general-tab',
+  templateUrl: './general-tab.component.html',
+  styleUrls: ['./general-tab.component.scss']
+})
+export class GeneralTabComponent implements OnInit {
+  openLoansColumns: string[] = ['Account No', 'Loan Account', 'Original Loan', 'Loan Balance', 'Amount Paid', 'Type', 'Actions'];
+  closedLoansColumns: string[] = ['Account No', 'Loan Account', 'Original Loan', 'Loan Balance', 'Amount Paid', 'Type', 'Closed Date'];
+  openSavingsColumns: string[] = ['Account No', 'Saving Account', 'Last Active', 'Balance', 'Actions'];
+  closedSavingsColumns: string[] = ['Account No', 'Saving Account', 'Closed Date'];
+  openSharesColumns: string[] = ['Account No', 'Share Account', 'Approved Shares', 'Pending For Approval Shares', 'Actions'];
+  closedSharesColumns: string[] = ['Account No', 'Share Account', 'Approved Shares', 'Pending For Approval Shares', 'Closed Date'];
+  upcomingChargesColumns: string[] = ['Name', 'Due as of', 'Due', 'Paid', 'Waived', 'Outstanding', 'Actions'];
+  clientAccountData: any;
+  loanAccounts: any;
+  savingAccounts: any;
+  shareAccounts: any;
+  upcomingCharges: any;
+  clientSummary: any;
+  showClosedLoanAccounts = false;
+  showClosedSavingAccounts = false;
+  showClosedShareAccounts = false;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private datePipe: DatePipe,
+  ) {
+    this.route.data.subscribe((data: { clientAccountsData: any, clientChargesData: any, clientSummary: any }) => {
+      this.clientAccountData = data.clientAccountsData;
+      this.savingAccounts = data.clientAccountsData.savingsAccounts;
+      this.loanAccounts = data.clientAccountsData.loanAccounts;
+      this.shareAccounts = data.clientAccountsData.shareAccounts;
+      this.upcomingCharges = data.clientChargesData.pageItems;
+      this.clientSummary = data.clientSummary[0];
+    });
+  }
+
+  ngOnInit() {
+  }
+
+  toggleLoanAccountsOverview() {
+    this.showClosedLoanAccounts = !this.showClosedLoanAccounts;
+  }
+
+  toggleSavingAccountsOverview() {
+    this.showClosedSavingAccounts = !this.showClosedSavingAccounts;
+  }
+  toggleShareAccountsOverview() {
+    this.showClosedShareAccounts = !this.showClosedShareAccounts;
+  }
+
+}

src/app/clients/clients.component.html

@@ -63,7 +63,7 @@
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['view', row.id]">
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id,'general']">
          
       </tr>
     </table>
@@ -71,28 +71,4 @@
     <mat-paginator [pageSizeOptions]="[10, 25, 100]"></mat-paginator>
   </div>
 
-
-  <!-- Copyright 2018 Google Inc. All Rights Reserved.
-      Use of this source code is governed by an MIT-style license that
-      can be found in the LICENSE file at http://angular.io/license -->
 </div>
-
-
-
-<!-- <div class="container">
-  <div class="row">
-    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
-      <input type="text" #serverName>
-      <button class="btn btn-primary" (click)="onAddServer(serverName.value)">Add Server</button>
-      <br><br>
-      <button class="btn btn-primary" (click)="onSave()">Save</button>
-      <button class="btn btn-primary" (click)="onGet()">Get</button>
-      <hr>
-      <ul class="list-group" *ngFor="let server of post">
-        <li class="list-group-item">{{ server.firstname }} (ID: {{ server.id }})</li>
-      </ul>
-    </div>
-  </div>
-</div>
- -->
-

src/app/clients/clients.module.ts

@@ -8,6 +8,10 @@ import { SharedModule } from 'app/shared/shared.module';
 
 /** Custom Components */
 import { ClientsComponent } from './clients.component';
+import { ClientsViewComponent } from './clients-view/clients-view.component';
+import { GeneralTabComponent } from './clients-view/general-tab/general-tab.component';
+import {PipesModule} from '../pipes/pipes.module';
+
 
 /**
  * Clients Module
@@ -17,9 +21,13 @@ import { ClientsComponent } from './clients.component';
 @NgModule({
   imports: [
     SharedModule,
-    ClientsRoutingModule
+    ClientsRoutingModule,
+    PipesModule
   ],
-  declarations: [ClientsComponent],
+  declarations: [
+    ClientsComponent,
+    ClientsViewComponent,
+    GeneralTabComponent],
   providers: [DatePipe]
 
 })

src/app/clients/clients.service.ts

@@ -22,4 +22,23 @@ export class ClientsService {
     const httpParams = new HttpParams().set('orderBy', 'id');
     return this.http.get('/clients', { params: httpParams });
   }
+  getClientData(clientId: string) {
+    return this.http.get(`/clients/${clientId}`);
+  }
+  getClientAccountData(clientId: string) {
+    return this.http.get(`/clients/${clientId}/accounts`);
+  }
+  getClientChargesData(clientId: string) {
+    const httpParams = new HttpParams().set('pendingPayment', 'true');
+    return this.http.get(`/clients/${clientId}/charges`, { params: httpParams });
+  }
+  getClientSummary(clientId: string) {
+    const httpParams = new HttpParams().set('R_clientId', clientId)
+      .set('genericResultSet', 'false');
+    return this.http.get(`/runreports/ClientSummary`, { params: httpParams });
+  }
+  getClientProfileImage(clientId: string) {
+    const httpParams = new HttpParams().set('maxHeight', '150');
+    return this.http.get(`/clients/${clientId}/images`, { params: httpParams, responseType: 'text' });
+  }
 }

src/app/clients/common-resolvers/client-accounts.resolver.ts

@@ -0,0 +1,31 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { ClientsService } from '../clients.service';
+
+/**
+ * Client Accounts data resolver.
+ */
+@Injectable()
+export class ClientAccountsResolver implements Resolve<Object> {
+
+    /**
+     * @param {ClientsService} ClientsService Clients service.
+     */
+    constructor(private clientsService: ClientsService) { }
+
+    /**
+     * Returns the Client Account data.
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+        const clientId = route.parent.paramMap.get('clientId');
+        return this.clientsService.getClientAccountData(clientId);
+    }
+
+}

src/app/clients/common-resolvers/client-charges.resolver.ts

@@ -0,0 +1,31 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { ClientsService } from '../clients.service';
+
+/**
+ * Client Charges data resolver.
+ */
+@Injectable()
+export class ClientChargesResolver implements Resolve<Object> {
+
+    /**
+     * @param {ClientsService} ClientsService Clients service.
+     */
+    constructor(private clientsService: ClientsService) { }
+
+    /**
+     * Returns the Client Charge data.
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+        const clientId = route.parent.paramMap.get('clientId');
+        return this.clientsService.getClientChargesData(clientId);
+    }
+
+}

src/app/clients/common-resolvers/client-summary.resolver.ts

@@ -0,0 +1,31 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { ClientsService } from '../clients.service';
+
+/**
+ * Client Summary resolver.
+ */
+@Injectable()
+export class ClientSummaryResolver implements Resolve<Object> {
+
+    /**
+     * @param {ClientsService} ClientsService Clients service.
+     */
+    constructor(private clientsService: ClientsService) { }
+
+    /**
+     * Returns the Client Summary data.
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+        const clientId = route.parent.paramMap.get('clientId');
+        return this.clientsService.getClientSummary(clientId);
+    }
+
+}

src/app/clients/common-resolvers/client-view.resolver.ts

@@ -0,0 +1,31 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { ClientsService } from '../clients.service';
+
+/**
+ * Clients data resolver.
+ */
+@Injectable()
+export class ClientViewResolver implements Resolve<Object> {
+
+    /**
+     * @param {ClientsService} ClientsService Clients service.
+     */
+    constructor(private clientsService: ClientsService) { }
+
+    /**
+     * Returns the Clients data.
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+        const clientId = route.paramMap.get('clientId');
+        return this.clientsService.getClientData(clientId);
+    }
+
+}

src/app/pipes/accounts-filter.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { AccountsFilterPipe } from './accounts-filter.pipe';
+
+describe('AccountsFilterPipe', () => {
+  it('create an instance', () => {
+    const pipe = new AccountsFilterPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/pipes/accounts-filter.pipe.ts

@@ -0,0 +1,62 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'accountsFilter'
+})
+export class AccountsFilterPipe implements PipeTransform {
+
+  transform(accounts: any, type: any, status: any): any {
+    if (accounts) {
+      if (type === 'loan') {
+        if (status === 'closed') {
+          accounts = accounts.filter((account: any) => {
+            return (account.status.code === 'loanStatusType.closed.written.off' ||
+              account.status.code === 'loanStatusType.closed.obligations.met' ||
+              account.status.code === 'loanStatusType.closed.reschedule.outstanding.amount' ||
+              account.status.code === 'loanStatusType.withdrawn.by.client' ||
+              account.status.code === 'loanStatusType.rejected');
+          });
+        } else {
+          accounts = accounts.filter((account: any) => {
+            return (account.status.code !== 'loanStatusType.closed.written.off' &&
+              account.status.code !== 'loanStatusType.closed.obligations.met' &&
+              account.status.code !== 'loanStatusType.closed.reschedule.outstanding.amount' &&
+              account.status.code !== 'loanStatusType.withdrawn.by.client' &&
+              account.status.code !== 'loanStatusType.rejected');
+          });
+        }
+      }
+      if (type === 'saving') {
+        if (status === 'closed') {
+          accounts = accounts.filter((account: any) => {
+            return (account.status.code === 'savingsAccountStatusType.withdrawn.by.applicant' ||
+              account.status.code === 'savingsAccountStatusType.closed' ||
+              account.status.code === 'savingsAccountStatusType.pre.mature.closure' ||
+              account.status.code === 'savingsAccountStatusType.rejected');
+          });
+        } else {
+          accounts = accounts.filter((account: any) => {
+            return (account.status.code !== 'savingsAccountStatusType.withdrawn.by.applicant' &&
+              account.status.code !== 'savingsAccountStatusType.closed' &&
+              account.status.code !== 'savingsAccountStatusType.pre.mature.closure' &&
+              account.status.code !== 'savingsAccountStatusType.rejected');
+          });
+        }
+      }
+      if (type === 'share') {
+        if (status === 'closed') {
+          accounts = accounts.filter((account: any) => {
+            return (account.status.code === 'shareAccountStatusType.closed' ||
+              account.status.code === 'shareAccountStatusType.rejected');
+          });
+        } else {
+          accounts = accounts.filter((account: any) => {
+            return (account.status.code !== 'shareAccountStatusType.closed' &&
+              account.status.code !== 'shareAccountStatusType.rejected');
+          });
+        }
+      }
+      return accounts;
+    }
+  }
+}

src/app/pipes/fetch-image.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { FetchImagePipe } from './fetch-image.pipe';
+
+describe('FetchImagePipe', () => {
+  it('create an instance', () => {
+    const pipe = new FetchImagePipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/pipes/pipes.module.spec.ts

@@ -0,0 +1,13 @@
+import { PipesModule } from './pipes.module';
+
+describe('PipesModule', () => {
+  let pipesModule: PipesModule;
+
+  beforeEach(() => {
+    pipesModule = new PipesModule();
+  });
+
+  it('should create an instance', () => {
+    expect(pipesModule).toBeTruthy();
+  });
+});

src/app/pipes/pipes.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { StatusLookupPipe } from './status-lookup.pipe';
+import { AccountsFilterPipe } from './accounts-filter.pipe';
+
+
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [StatusLookupPipe, AccountsFilterPipe],
+  providers: [StatusLookupPipe, AccountsFilterPipe],
+  exports: [StatusLookupPipe, AccountsFilterPipe]
+})
+export class PipesModule { }

src/app/pipes/status-lookup.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { StatusLookupPipe } from './status-lookup.pipe';
+
+describe('StatusLookupPipe', () => {
+  it('create an instance', () => {
+    const pipe = new StatusLookupPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/pipes/status-lookup.pipe.ts

@@ -0,0 +1,31 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'statusLookup'
+})
+export class StatusLookupPipe implements PipeTransform {
+
+  transform(status: string): string {
+    const cssClassNameLookup = {
+      'true': 'status-active',
+      'false': 'status-deleted',
+      'Active': 'status-active',
+      'charges.StatusType.active.true': 'status-active',
+      'loanStatusType.submitted.and.pending.approval': 'status-pending',
+      'loanStatusType.approved': 'status-approved',
+      'loanStatusType.active': 'status-active',
+      'loanStatusType.overpaid': 'status-overpaid',
+      'savingsAccountStatusType.submitted.and.pending.approval': 'status-pending',
+      'savingsAccountStatusType.approved': 'status-approved',
+      'savingsAccountStatusType.active': 'status-active',
+      'savingsAccountStatusType.activeInactive': 'status-active-overdue',
+      'savingsAccountStatusType.activeDormant': 'status-active-overdue',
+      'savingsAccountStatusType.matured': 'status-matured',
+      'shareAccountStatusType.submitted.and.pending.approval': 'status-pending',
+      'shareAccountStatusType.approved': 'status-approved',
+      'shareAccountStatusType.active': 'status-active',
+      'shareAccountStatusType.rejected': 'status-rejected',
+    };
+    return cssClassNameLookup[status];
+  }
+}

src/app/shared/shared.module.ts

@@ -1,4 +1,4 @@
- /** Angular Imports */
+/** Angular Imports */
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
@@ -31,7 +31,7 @@ import { MaterialModule } from './material.module';
     FileUploadComponent,
     FooterComponent,
     LanguageSelectorComponent,
-    ThemePickerComponent
+    ThemePickerComponent,
   ],
   exports: [
     FileUploadComponent,

src/assets/styles/_colours.scss

@@ -44,20 +44,29 @@ $msg-danger: #d9534f;
 $msg-info: #5bc0de;
 
 //Social Colors
-$dailymile: #FFAA25;
-$facebook: #3B5998;
+$dailymile: #ffaa25;
+$facebook: #3b5998;
 $flickr: #f80082;
-$github: #F7F7F7;
+$github: #f7f7f7;
 $google: #d7473d;
-$instagram: #37658D;
-$linkedin: #2C8CC0;
+$instagram: #37658d;
+$linkedin: #2c8cc0;
 $pinterest: #c5142b;
 $runkeeper: #3193d3;
 $skype: #00abee;
-$spotify: #7AB800;
-$twitter: #3B8ACA;
+$spotify: #7ab800;
+$twitter: #3b8aca;
 
 // Set Site Specific Base, Highlight and Accent Colors Here for easy switching between themes
 $base: $dark-grey;
 $highlight: $belize-hole;
-$accent: $peter-river;
+$accent: $peter-river;
+
+//Status Colors Defined Here
+$status-active: #00ce00;
+$status-deleted: #000000;
+$status-pending: #ffa500;
+$status-approved: #0f36e4;
+$status-overpaid: #800080;
+$status-active-overdue: #ff0000;
+$status-matured: #ff4000;

src/theme/custom/denim-yellowgreen.scss

@@ -1,6 +1,6 @@
 @import '~@angular/material/theming';
 // Plus imports for other components in your app.
-
+@import '../../app/clients/clients-view/clients-view.component-theme.scss';
 // Custom material palette
 $mat-denim: (
   100: #5ba2ec,
@@ -45,3 +45,4 @@ $mifosx-app-theme: mat-light-theme($mifosx-app-primary, $mifosx-app-accent, $mif
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
 @include angular-material-theme($mifosx-app-theme);
+@include clients-view-component-theme($mifosx-app-theme);

src/theme/custom/pictonblue-yellowgreen.scss

@@ -1,6 +1,6 @@
 @import '~@angular/material/theming';
 // Plus imports for other components in your app.
-
+@import '../../app/clients/clients-view/clients-view.component-theme.scss';
 // Custom material palette
 $mat-picton-blue: (
   100: #6ce0ff,
@@ -45,3 +45,4 @@ $mifosx-app-theme: mat-light-theme($mifosx-app-primary, $mifosx-app-accent, $mif
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
 @include angular-material-theme($mifosx-app-theme);
+@include clients-view-component-theme($mifosx-app-theme);