feat: add app shell (angular-material)

Add app shell built using angular-material and flex-layout. Refractor
code due to configuration changes.

Fixes #52

README.md

@@ -62,8 +62,6 @@ Tasks are mostly based on the `angular-cli` tool. Use `ng help` to get more help
 
 ## Design guides
 
-- [Bootstrap Material](https://bootswatch.com/materia/)
-- [Angular Bootstrap](https://valor-software.com/ngx-bootstrap/#/)
 - [Angular Material](https://material.angular.io/components/categories)
 
 ## Creating new modules/components

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

@@ -1,12 +1,16 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { Route, extract } from '../../app/core';
+import { Route, extract } from '../core';
 import { AboutComponent } from './about.component';
 
 const routes: Routes = [
   Route.withShell([
-    { path: 'about', component: AboutComponent, data: { title: extract('About') } }
+    {
+      path: 'about',
+      component: AboutComponent,
+      data: { title: extract('About') }
+    }
   ])
 ];
 

src/app/about/about.component.html

@@ -1,10 +1,10 @@
-<div class="container-fluid">
-  <div class="jumbotron text-center">
+<div>
+  <div>
     <h1>
       <span translate>APP_NAME</span>
     </h1>
     <p>
-      <i class="far fa-bookmark"></i> <span translate>Version</span> {{version}}
+      <span translate>Version</span>{{version}}
     </p>
   </div>
 </div>

src/app/about/about.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 import { environment } from '../../environments/environment';
 
 @Component({
-  selector: 'app-about',
+  selector: 'mifosx-about',
   templateUrl: './about.component.html',
   styleUrls: ['./about.component.scss']
 })

src/app/about/about.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+
 import { TranslateModule } from '@ngx-translate/core';
 
 import { AboutRoutingModule } from './about-routing.module';

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

@@ -1,12 +1,16 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { Route, extract } from '../../app/core';
+import { Route, extract } from '../core';
 import { AccountingComponent } from './accounting.component';
 
 const routes: Routes = [
   Route.withShell([
-    { path: 'accounting', component: AccountingComponent}
+    {
+      path: 'accounting',
+      component: AccountingComponent,
+      data: { title: extract('Accounting') }
+    }
   ])
 ];
 

src/app/accounting/accounting.component.html

@@ -1,31 +1,29 @@
-<div class="fluid-container">
- <div class="container">
-   <div class="card-body">
-   <div class="row">
-     <div class="col-sm-6">
+<!-- <div class="fluid-container">
+  <div class="container">
+    <div class="card-body">
+      <div class="row">
+      <div class="col-sm-6">
        <div class="card mt-5">
-<!--     <div class="card-header"><legend> Loan</legend></div>
- -->    <div class="card-body">
-          <div class="list-group">
-            <a href="#" class="list-group-item  list-group-item-action active">
-              <h4 class="list-group-item-heading mb-1">First List Group Item Heading</h4>
-              <p class="list-group-item-text">List Group Item Text</p>
-            </a>
-            <a href="#" class="list-group-item  list-group-item-action">
-              <h4 class="list-group-item-heading mb-1">Second List Group Item Heading</h4>
-              <p class="list-group-item-text">List Group Item Text</p>
-            </a>
-            <a href="#" class="list-group-item  list-group-item-action">
-              <h4 class="list-group-item-heading">Third List Group Item Heading</h4>
-              <p class="list-group-item-text">List Group Item Text</p>
-            </a>
+          <div class="card-body">
+            <div class="list-group">
+              <a href="#" class="list-group-item  list-group-item-action active">
+                <h4 class="list-group-item-heading mb-1">First List Group Item Heading</h4>
+                <p class="list-group-item-text">List Group Item Text</p>
+              </a>
+              <a href="#" class="list-group-item  list-group-item-action">
+                <h4 class="list-group-item-heading mb-1">Second List Group Item Heading</h4>
+                <p class="list-group-item-text">List Group Item Text</p>
+              </a>
+              <a href="#" class="list-group-item  list-group-item-action">
+                <h4 class="list-group-item-heading">Third List Group Item Heading</h4>
+                <p class="list-group-item-text">List Group Item Text</p>
+              </a>
+            </div>
           </div>
+        </div>
       </div>
-    </div>
-  </div>
-    <div class="col-sm-6">
+      <div class="col-sm-6">
         <div class="card mt-5">
-            <!-- <div class="card-header"></div> -->
             <div class="card-body">
               <div class="list-group">
                 <a href="#" class="list-group-item  list-group-item-action active">
@@ -46,4 +44,4 @@
     </div>
    </div>
   </div>
-</div>
+</div> -->

src/app/accounting/accounting.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-accounting',
+  selector: 'mifosx-accounting',
   templateUrl: './accounting.component.html',
   styleUrls: ['./accounting.component.scss']
 })

src/app/app-routing.module.ts

@@ -1,9 +1,13 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
+// Fallback when no prior route is matched
 const routes: Routes = [
-  // Fallback when no prior route is matched
-{ path: '**', redirectTo: '', pathMatch: 'full' },
+  {
+    path: '**',
+    redirectTo: '',
+    pathMatch: 'full'
+  }
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -1,46 +1,52 @@
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { ServiceWorkerModule } from '@angular/service-worker';
+
 import { TranslateModule } from '@ngx-translate/core';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 
 import { environment } from '../environments/environment';
-import { CoreModule } from '../app/core';
-import { SharedModule } from '../app/shared';
+
+import { WebAppComponent } from './web-app.component';
+
+import { CoreModule } from './core/core.module';
+import { SharedModule } from './shared/shared.module';
+import { NavigationModule } from './navigation/navigation.module';
 import { HomeModule } from './home/home.module';
 import { AboutModule } from './about/about.module';
+import { LoginModule } from './login/login.module';
 import { ClientsModule} from './clients/clients.module';
 import { AccountingModule } from './accounting/accounting.module';
-import { LoginModule } from './login/login.module';
-import { AppComponent } from './app.component';
-import { AppRoutingModule } from './app-routing.module';
-import { NavigationModule } from './navigation/navigation.module';
 import { SelfServiceModule } from './self-service/self-service.module';
 
+import { AppRoutingModule } from './app-routing.module';
+
 @NgModule({
   imports: [
     BrowserModule,
-    ServiceWorkerModule.register('./ngsw-worker.js', { enabled: environment.production }),
+    BrowserAnimationsModule,
     FormsModule,
     HttpClientModule,
+    ServiceWorkerModule.register('./ngsw-worker.js', { enabled: environment.production }),
     TranslateModule.forRoot(),
     NgxChartsModule,
     CoreModule,
     SharedModule,
+    NavigationModule,
     HomeModule,
     AboutModule,
+    LoginModule,
     ClientsModule,
     AccountingModule,
-    LoginModule,
-    NavigationModule,
     SelfServiceModule,
     AppRoutingModule
   ],
-  declarations: [AppComponent],
+  declarations: [WebAppComponent],
   providers: [
   ],
-  bootstrap: [AppComponent]
+  bootstrap: [WebAppComponent]
 })
 export class AppModule { }

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

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { Route, extract } from '../../app/core';
+import { Route, extract } from '../core';
 import { ClientsComponent } from './clients.component';
 import { CreateClientComponent} from './create-client/create-client.component';
 import { ViewClientComponent } from './view-client/view-client.component';
@@ -9,10 +9,26 @@ import { ViewLoanComponent } from './view-loan/view-loan.component';
 
 const routes: Routes = [
   Route.withShell([
-    { path: 'clients', component: ClientsComponent},
-    { path: 'clients/create', component: CreateClientComponent},
-    { path: 'clients/view', component: ViewClientComponent},
-    { path: 'clients/viewloan', component: ViewLoanComponent}
+    {
+      path: 'clients',
+      component: ClientsComponent,
+      data: { title: extract('Clients') }
+    },
+    {
+      path: 'clients/create',
+      component: CreateClientComponent,
+      data: { title: extract('Create Client') }
+    },
+    {
+      path: 'clients/view',
+      component: ViewClientComponent,
+      data: { title: extract('View Client') }
+    },
+    {
+      path: 'clients/viewloan',
+      component: ViewLoanComponent,
+      data: { title: extract('View Loan') }
+    }
   ])
 ];
 

src/app/clients/clients.component.html

@@ -1,4 +1,4 @@
-<div class="fluid-container">
+<!-- <div class="fluid-container">
  <div class="container">
   <div class="card mt-5">
     <div class="card-header">
@@ -16,10 +16,8 @@
     </div>
     <div class="card-body">
 
-        <!--Table-->
         <table class="table table-hover table-responsive-md table-fixed">
 
-            <!--Table head-->
             <thead>
                 <tr>
                     <th>#</th>
@@ -31,9 +29,7 @@
 
                 </tr>
             </thead>
-            <!--Table head-->
 
-            <!--Table body-->
             <tbody>
                 <tr>
                     <th scope="row">4</th>
@@ -90,12 +86,10 @@
 
                 </tr>
             </tbody>
-            <!--Table body-->
 
         </table>
-        <!--Table-->
 
       </div>
     </div>
   </div>
-</div>
+</div> -->

src/app/clients/clients.component.scss

@@ -1,4 +1,4 @@
-.table-fixed {
-    table-layout: fixed;
-    overflow: hidden;
-}
+// .table-fixed {
+//     table-layout: fixed;
+//     overflow: hidden;
+// }

src/app/clients/clients.component.ts

@@ -1,10 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import { environment } from '../../environments/environment';
-
-import { HeaderComponent } from '../core/shell/header/header.component';
 
 @Component({
-  selector: 'app-clients',
+  selector: 'mifosx-clients',
   templateUrl: './clients.component.html',
   styleUrls: ['./clients.component.scss']
 })

src/app/clients/clients.module.ts

@@ -1,30 +1,28 @@
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
+
 import { ArchwizardModule } from 'angular-archwizard';
 
+import { ClientsRoutingModule } from './clients-routing.module';
 import { ClientsComponent } from './clients.component';
 import { CreateClientComponent} from './create-client/create-client.component';
-import { ClientsRoutingModule } from './clients-routing.module';
-import { CoreModule } from '../core/core.module';
 import { ViewClientComponent } from './view-client/view-client.component';
 import { ViewLoanComponent } from './view-loan/view-loan.component';
 
 @NgModule({
   imports: [
-    CoreModule,
     CommonModule,
     ClientsRoutingModule,
     ArchwizardModule
   ],
   declarations: [
-  ClientsComponent,
-  CreateClientComponent,
-  ViewClientComponent,
+    ClientsComponent,
+    CreateClientComponent,
+    ViewClientComponent,
     ViewLoanComponent
-],
- schemas: [
-  CUSTOM_ELEMENTS_SCHEMA
-],
-
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
+  ]
 })
 export class ClientsModule { }

src/app/clients/create-client/create-client.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<!-- <div class="container">
 
  <aw-wizard class="mt-5" #wizard [navBarLayout]="'large-empty-symbols'">
   <aw-wizard-step stepTitle="Title of step 1" [navigationSymbol]="{ symbol: '1' }">
@@ -62,8 +62,7 @@
           </div>
         </div>
         <button type="button" class="btn btn-primary float-right" awNextStep>Next Step</button>
-<!--         <button type="button" class="btn btn-primary float-right" [awGoToStep]="{stepIndex: 2}">Go directly to third Step</button>
- -->        </div>
+        </div>
       </div>
     </div>
 
@@ -72,8 +71,7 @@
   <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-header"><legend> Loan</legend></div>
-         -->    <div class="card-body">
+        <div class="card-body">
               <form>
                 <fieldset>
 
@@ -157,7 +155,6 @@
                       </label>
                     </div>
                   </fieldset>
-                  <!-- <button type="submit" class="btn btn-primary">Submit</button> -->
                 </fieldset>
               </form>
 
@@ -174,4 +171,4 @@
     <button type="button" class="btn btn-primary" >Finish</button>
   </aw-wizard-step>
 </aw-wizard>
-</div>
+</div> -->

src/app/clients/create-client/create-client.component.spec.ts

@@ -0,0 +1,25 @@
+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();
+  });
+});

src/app/clients/create-client/create-client.component.ts

@@ -1,8 +1,7 @@
 import { Component, OnInit} from '@angular/core';
-import { HeaderComponent } from '../../core/shell/header/header.component';
 
 @Component({
-  selector: 'app-create-client',
+  selector: 'mifosx-create-client',
   templateUrl: './create-client.component.html',
   styleUrls: ['./create-client.component.scss']
 })
@@ -12,4 +11,5 @@ export class CreateClientComponent implements OnInit {
 
   ngOnInit() {
   }
+
 }

src/app/clients/create-client/create-client.module.ts

@@ -1,19 +0,0 @@
-/* import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { CoreModule } from '../../core/core.module';
-
-import { CreateClientComponent } from './create-client.component';
-
-
-@NgModule({
-  imports: [
-    CommonModule,
-    CoreModule
-  ],
-  declarations: [CreateClientComponent],
-  schemas: [
-    CUSTOM_ELEMENTS_SCHEMA
-  ],
-})
-export class CreateClientModule { }
- */

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

@@ -1,4 +1,4 @@
-<div class="fluid-container">
+<!-- <div class="fluid-container">
   <div class="container">
     <div class="row">
 
@@ -36,7 +36,6 @@
                  <div class="card-body">
                     <table class="table table-hover table-responsive-md table-fixed">
 
-                        <!--Table head-->
                         <thead>
                             <tr>
                                 <th>#</th>
@@ -48,9 +47,7 @@
 
                             </tr>
                         </thead>
-                        <!--Table head-->
 
-                        <!--Table body-->
                         <tbody>
                             <tr>
                                 <th scope="row">4</th>
@@ -152,7 +149,6 @@
 
                             </tr>
                         </tbody>
-                        <!--Table body-->
 
                     </table>
                  </div>
@@ -160,9 +156,6 @@
       </div>
 
     </div>
-
-
-
-
+    
   </div>
-</div>
+</div> -->

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

@@ -1,11 +1,7 @@
-/* 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 { ViewClientComponent } from './view-client.component';
 
-describe('ViewClientComponent', () => {
+describe('CreateClientComponent', () => {
   let component: ViewClientComponent;
   let fixture: ComponentFixture<ViewClientComponent>;
 

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

@@ -1,8 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import { HeaderComponent } from '../../core/shell/header/header.component';
 
 @Component({
-  selector: 'app-view-client',
+  selector: 'mifosx-view-client',
   templateUrl: './view-client.component.html',
   styleUrls: ['./view-client.component.scss']
 })

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

@@ -1,4 +1,4 @@
-<div class="fluid-container">
+<!-- <div class="fluid-container">
   <div class="container">
     <div class="col text-center">
       <div class="card  border-secondary d-inline-block mt-5">
@@ -71,7 +71,6 @@
         <div class="card ml-4">
           <table class="table table-hover table-responsive-md table-fixed">
 
-            <!--Table head-->
             <thead>
               <tr>
                 <th>#</th>
@@ -83,9 +82,7 @@
 
               </tr>
             </thead>
-            <!--Table head-->
 
-            <!--Table body-->
             <tbody>
               <tr>
                 <th scope="row">4</th>
@@ -187,8 +184,6 @@
 
               </tr>
             </tbody>
-            <!--Table body-->
-
           </table>
         </div>
       </div>
@@ -201,7 +196,6 @@
 
             <table class="table table-active table-hover table-responsive-md table-fixed mt-3">
 
-              <!--Table head-->
               <thead>
                 <tr>
                   <th>#</th>
@@ -213,9 +207,7 @@
 
                 </tr>
               </thead>
-              <!--Table head-->
 
-              <!--Table body-->
               <tbody>
                 <tr>
                   <th scope="row">4</th>
@@ -300,7 +292,6 @@
                 </tr>
 
               </tbody>
-              <!--Table body-->
 
             </table>
 
@@ -360,4 +351,4 @@
       </ngb-tabset>
     </div>
   </div>
-</div>
+</div> -->

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

@@ -1,14 +1,14 @@
-.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-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;
-  }
+// .btn {
+//     border: 1px solid #DDD;
+//     border-right-width: 0;
+//     border-radius: 0;
+//   }

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

@@ -1,8 +1,4 @@
-/* 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 { ViewLoanComponent } from './view-loan.component';
 
 describe('ViewLoanComponent', () => {

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

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-view-loan',
+  selector: 'mifosx-view-loan',
   templateUrl: './view-loan.component.html',
   styleUrls: ['./view-loan.component.scss']
 })

src/app/core/authentication/authentication.service.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+
 import { Observable, of } from 'rxjs';
 
 export interface Credentials {

src/app/core/core.module.ts

@@ -2,10 +2,27 @@ import { NgModule, Optional, SkipSelf } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule } from '@angular/common/http';
 import { RouteReuseStrategy, RouterModule } from '@angular/router';
+import { LayoutModule } from '@angular/cdk/layout';
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+import {  MatToolbarModule,
+          MatButtonModule,
+          MatSidenavModule,
+          MatIconModule,
+          MatListModule,
+          MatGridListModule,
+          MatCardModule,
+          MatMenuModule,
+          MatCheckboxModule,
+          MatTooltipModule,
+          MatDividerModule,
+          MatSelectModule,
+          MatInputModule,
+          MatFormFieldModule,
+          MatTabsModule } from '@angular/material';
+
 import { TranslateModule } from '@ngx-translate/core';
 
-import { ShellComponent } from './shell/shell.component';
-import { HeaderComponent } from './shell/header/header.component';
 import { RouteReusableStrategy } from './route-reusable-strategy';
 import { AuthenticationService } from './authentication/authentication.service';
 import { AuthenticationGuard } from './authentication/authentication.guard';
@@ -16,20 +33,42 @@ import { ApiPrefixInterceptor } from './http/api-prefix.interceptor';
 import { ErrorHandlerInterceptor } from './http/error-handler.interceptor';
 import { CacheInterceptor } from './http/cache.interceptor';
 
+import { ShellComponent } from './shell/shell.component';
+import { SidenavComponent } from './shell/sidenav/sidenav.component';
+import { ToolbarComponent } from './shell/toolbar/toolbar.component';
+import { ContentComponent } from './shell/content/content.component';
+
 @NgModule({
   imports: [
     CommonModule,
     HttpClientModule,
     TranslateModule,
-    RouterModule
+    RouterModule,
+    LayoutModule,
+    FlexLayoutModule,
+    MatSidenavModule,
+    MatGridListModule,
+    MatToolbarModule,
+    MatTabsModule,
+    MatButtonModule,
+    MatIconModule,
+    MatListModule,
+    MatCardModule,
+    MatMenuModule,
+    MatCheckboxModule,
+    MatTooltipModule,
+    MatDividerModule,
+    MatSelectModule,
+    MatFormFieldModule,
+    MatInputModule
   ],
-
   declarations: [
-    HeaderComponent,
-    ShellComponent
+    ShellComponent,
+    SidenavComponent,
+    ToolbarComponent,
+    ContentComponent
   ],
   exports: [
-    HeaderComponent
   ],
   providers: [
     AuthenticationService,

src/app/core/http/api-prefix.interceptor.spec.ts

@@ -2,7 +2,7 @@ import { TestBed, inject } from '@angular/core/testing';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
 
-import { environment } from '@env/environment';
+import { environment } from '../../../environments/environment';
 import { ApiPrefixInterceptor } from './api-prefix.interceptor';
 
 describe('ApiPrefixInterceptor', () => {

src/app/core/http/api-prefix.interceptor.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
+
 import { Observable } from 'rxjs';
 
 import { environment } from '../../../environments/environment';

src/app/core/http/cache.interceptor.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http';
+
 import { Observable, Subscriber } from 'rxjs';
 
 import { HttpCacheService } from './http-cache.service';

src/app/core/http/error-handler.interceptor.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
+
 import { Observable } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 

src/app/core/http/http-cache.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpResponse } from '@angular/common/http';
+
 import { each } from 'lodash';
 
 import { Logger } from '../logger.service';

src/app/core/http/http.service.ts

@@ -1,5 +1,6 @@
 import { Inject, Injectable, InjectionToken, Injector, Optional } from '@angular/core';
 import { HttpClient, HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
+
 import { Observable } from 'rxjs';
 
 import { ErrorHandlerInterceptor } from './error-handler.interceptor';

src/app/core/i18n.service.spec.ts

@@ -1,4 +1,5 @@
 import { TestBed, inject } from '@angular/core/testing';
+
 import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
 import { Subject } from 'rxjs';
 

src/app/core/i18n.service.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+
 import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
 import { includes } from 'lodash';
 

src/app/core/shell/content/content.component.html

@@ -0,0 +1,2 @@
+<!-- TODO: Breadcrumb Links -->
+<router-outlet></router-outlet>

src/app/core/shell/content/content.component.spec.ts

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

src/app/core/shell/content/content.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'mifosx-content',
+  templateUrl: './content.component.html',
+  styleUrls: ['./content.component.scss']
+})
+export class ContentComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/core/shell/header/header.component.html

@@ -1,76 +0,0 @@
-<!-- <header>
-  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-    <a class="navbar-brand" href="https://github.com/ngx-rocket" translate>APP_NAME</a>
-    <button class="navbar-toggler" type="button" aria-controls="navbar-menu"
-            aria-label="Toggle navigation" (click)="toggleMenu()" [attr.aria-expanded]="!menuHidden">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <div id="navbar-menu" class="collapse navbar-collapse float-xs-none" [ngbCollapse]="menuHidden">
-      <div class="navbar-nav">
-        <a class="nav-item nav-link text-uppercase" routerLink="/home" routerLinkActive="active">
-          <i class="fas fa-home"></i>
-          <span translate>Home</span>
-        </a>
-        <a class="nav-item nav-link text-uppercase" routerLink="/about" routerLinkActive="active">
-          <i class="fas fa-question-circle"></i>
-          <span translate>About</span>
-        </a>
-      </div>
-      <div class="navbar-nav ml-auto">
-        <div class="nav-item" ngbDropdown placement="bottom-right">
-          <a id="language-dropdown" class="nav-link" ngbDropdownToggle>{{currentLanguage}}</a>
-          <div ngbDropdownMenu aria-labelledby="language-dropdown">
-            <button class="dropdown-item" *ngFor="let language of languages" (click)="setLanguage(language)">
-              {{language}}
-            </button>
-          </div>
-        </div>
-        <div class="nav-item" ngbDropdown placement="bottom-right">
-          <a id="user-dropdown" class="nav-link" ngbDropdownToggle>
-            <i class="fas fa-user-circle"></i>
-          </a>
-          <div ngbDropdownMenu aria-labelledby="user-dropdown">
-            <h6 class="dropdown-header">
-              <span translate>Logged in as</span> <b>{{username}}</b></h6>
-            <div class="dropdown-divider"></div>
-            <button class="dropdown-item" (click)="logout()" translate>Logout</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </nav>
-</header> -->
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-  <a class="navbar-brand" href="#"><h2>MifosX</h2></a>
-  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
-    <span class="navbar-toggler-icon"></span>
-  </button>
-
-  <div class="collapse navbar-collapse" id="navbarColor02">
-    <ul class="navbar-nav mr-auto">
-      <li class="nav-item active">
-        <a class="nav-link" href="#"><h5 class="font-weight-normal">Home</h5> <span class="sr-only">(current)</span></a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" routerLink="/clients" routerLinkActive="active"><h5 class="font-weight-normal">Clients</h5></a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" href="#"><h5 class="font-weight-normal">Groups</h5></a>
-      </li>
-        <li class="nav-item dropdown" ngbDropdown>
-            <a class="nav-link" id="self-service-dropdown">
-              <h5 class="font-weight-normal" ngbDropdownToggle>Self Service</h5>
-            </a>
-              <div class="dropdown-menu" ngbDropdownMenu arial-labelledby="self-service-dropdown">
-                <a class="dropdown-item" routerLink="/self-service/users" routerLinkActive="active">User Management</a>
-              </div>
-          </li>
-    </ul>
-    <form class="form-inline my-2 my-lg-0">
-      <input class="form-control mr-sm-2" placeholder="Search" type="text">
-    <!--   <button class="btn btn-secondary my-2 mr-sm-2 my-sm-0" type="submit">Search</button> -->
-    </form>
-    <button class="btn btn-secondary my-2 mr-sm-2 my-sm-0" (click)="logout()" type="submit">Logout</button>
-
-  </div>
-</nav>

src/app/core/shell/header/header.component.scss

@@ -1,10 +0,0 @@
-/* @import "src/theme/theme-variables";
-
-.navbar {
-  margin-bottom: $spacer;
-}
-
-.nav-link.dropdown-toggle {
-  cursor: pointer;
-}
- */

src/app/core/shell/header/header.component.spec.ts

@@ -1,40 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { TranslateModule } from '@ngx-translate/core';
-import { RouterTestingModule } from '@angular/router/testing';
-
-import { AuthenticationService } from '../../authentication/authentication.service';
-import { MockAuthenticationService } from '../../authentication/authentication.service.mock';
-import { I18nService } from '../../i18n.service';
-import { HeaderComponent } from './header.component';
-
-describe('HeaderComponent', () => {
-  let component: HeaderComponent;
-  let fixture: ComponentFixture<HeaderComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule,
-        NgbModule.forRoot(),
-        TranslateModule.forRoot()
-      ],
-      declarations: [HeaderComponent],
-      providers: [
-        { provide: AuthenticationService, useClass: MockAuthenticationService },
-        I18nService
-      ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(HeaderComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/core/shell/header/header.component.ts

@@ -1,48 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-
-import { AuthenticationService } from '../../authentication/authentication.service';
-import { I18nService } from '../../i18n.service';
-
-@Component({
-  selector: 'app-header',
-  templateUrl: './header.component.html',
-  styleUrls: ['./header.component.scss']
-})
-export class HeaderComponent implements OnInit {
-
-  menuHidden = true;
-
-  constructor(private router: Router,
-              private authenticationService: AuthenticationService,
-              private i18nService: I18nService) { }
-
-  ngOnInit() { }
-
-  toggleMenu() {
-    this.menuHidden = !this.menuHidden;
-  }
-
-  setLanguage(language: string) {
-    this.i18nService.language = language;
-  }
-
-  logout() {
-    this.authenticationService.logout()
-      .subscribe(() => this.router.navigate(['/login'], { replaceUrl: true }));
-  }
-
-  get currentLanguage(): string {
-    return this.i18nService.language;
-  }
-
-  get languages(): string[] {
-    return this.i18nService.supportedLanguages;
-  }
-
-  get username(): string | null {
-    const credentials = this.authenticationService.credentials;
-    return credentials ? credentials.username : null;
-  }
-
-}

src/app/core/shell/shell.component.html

@@ -1,2 +1,26 @@
-<app-header></app-header>
-<router-outlet></router-outlet>
+<mat-sidenav-container id="mifosx-shell-container" autosize>
+
+  <mat-sidenav
+    #sidenav
+    class="sidebar-panel"
+    [ngClass]="{
+      'sidebar-full': !sidenavCollapsed,
+      'sidebar-compact': sidenavCollapsed
+    }"
+    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
+    [mode]="(isHandset$ | async) ? 'over' : 'side'"
+    [opened]="!(isHandset$ | async)">
+
+    <mifosx-sidenav [sidenavCollapsed]="sidenavCollapsed"></mifosx-sidenav>
+
+  </mat-sidenav>
+
+  <mat-sidenav-content>
+
+    <mifosx-toolbar [sidenav]="sidenav" (collapse)="toggleCollapse($event)"></mifosx-toolbar>
+
+    <mifosx-content></mifosx-content>
+
+  </mat-sidenav-content>
+
+</mat-sidenav-container>

src/app/core/shell/shell.component.scss

@@ -0,0 +1,20 @@
+#mifosx-shell-container {
+  max-width: 100%;
+  height: 100vh;
+
+  .sidebar-panel {
+    background-color: white;  // TODO: Theme Configuration
+    min-height: 100vh;
+    overflow: hidden;
+    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+  }
+
+  .sidebar-full {
+    width: 15rem;
+  }
+
+  .sidebar-compact {
+    width: 4rem;
+  }
+
+}

src/app/core/shell/shell.component.spec.ts

@@ -1,7 +1,6 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { AuthenticationService } from '../authentication/authentication.service';
 import { MockAuthenticationService } from '../authentication/authentication.service.mock';
@@ -17,7 +16,6 @@ describe('ShellComponent', () => {
       imports: [
         RouterTestingModule,
         TranslateModule.forRoot(),
-        NgbModule.forRoot(),
         CoreModule
       ],
       providers: [

src/app/core/shell/shell.component.ts

@@ -1,14 +1,29 @@
 import { Component, OnInit } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 @Component({
-  selector: 'app-shell',
+  selector: 'mifosx-shell',
   templateUrl: './shell.component.html',
   styleUrls: ['./shell.component.scss']
 })
 export class ShellComponent implements OnInit {
 
-  constructor() { }
+  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
+  .pipe(
+    map(result => result.matches)
+  );
+  sidenavCollapsed = false;
 
-  ngOnInit() { }
+  constructor(private breakpointObserver: BreakpointObserver) { }
+
+  ngOnInit() {
+  }
+
+  toggleCollapse($event: boolean) {
+    this.sidenavCollapsed = $event;
+  }
 
 }

src/app/core/shell/sidenav/sidenav.component.html

@@ -0,0 +1,75 @@
+<div
+  [ngClass]="{
+  'sidebar-full': !sidenavCollapsed,
+  'sidebar-compact': sidenavCollapsed
+  }">
+
+  <div class="navigation-panel" fxLayout="column">
+
+    <div class="app-brand">
+      <img src="assets/images/MifosX_logo.png" alt="app-logo" class="app-logo">
+      <span class="app-logo-text text-muted">Mifos</span>
+    </div>
+
+    <div class="app-user">
+      <div class="app-user-photo">
+        <img src="assets/images/user_placeholder.png" alt="app-user-photo">
+      </div>
+      <span class="app-user-name mb-05">
+        Abhay Chawla
+      </span>
+      <div class="app-user-controls">
+        <button class="text-muted xs-button" mat-icon-button>
+          <mat-icon>settings</mat-icon>
+        </button>
+        <button class="text-muted xs-button" mat-icon-button matTooltip="Sign Out" (click)="logout()">
+          <mat-icon>exit_to_app</mat-icon>
+        </button>
+      </div>
+    </div>
+
+    <div class="app-sidenav">
+
+      <div class="icon-menu">
+        <div class="mt-1 mb-1 nav-item-sep">
+          <mat-divider></mat-divider>
+          <span class="text-muted icon-menu-title">Frequently Accessed</span>
+        </div>
+        <div class="icon-menu-item">
+          <button mat-raised-button matTooltip="Home">
+            <mat-icon>home</mat-icon>
+          </button>
+        </div>
+        <div class="icon-menu-item">
+          <button mat-raised-button matTooltip="Dashboard">
+            <mat-icon>dashboard</mat-icon>
+          </button>
+        </div>
+        <div class="icon-menu-item">
+          <button mat-raised-button matTooltip="Navigation">
+            <mat-icon>navigation</mat-icon>
+          </button>
+        </div>
+      </div>
+
+      <div class="nav-item-sep">
+        <mat-divider></mat-divider>
+        <span class="text-muted">Main Items</span>
+      </div>
+
+      <mat-nav-list>
+        <mat-list-item routerLink="/dashboard">
+          <mat-icon matListIcon>dashboard</mat-icon>
+          <a matLine>Dashboard</a>
+        </mat-list-item>
+        <mat-list-item>
+          <mat-icon matListIcon>navigation</mat-icon>
+          <a matLine>Navigation</a>
+        </mat-list-item>
+      </mat-nav-list>
+
+    </div>
+
+  </div>
+
+</div>

src/app/core/shell/sidenav/sidenav.component.scss

@@ -0,0 +1,160 @@
+img {
+  max-width: 100%;
+}
+
+.navigation-panel {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding-top: 64px;
+  background: hsla(0,0%,100%,.95);
+}
+
+.app-brand {
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  justify-content: center;
+  text-align: center;
+  position: fixed;
+  width: 100%;
+  max-width: 15rem;
+  height: 64px;
+  line-height: 64px;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  color: #444;
+
+  .app-logo {
+    width: auto;
+    height: 42px;
+    margin-right: 8px;
+  }
+
+  .app-logo-text {
+    width: auto;
+    height: auto;
+    font-size: 2rem;
+    font-weight: normal;
+  }
+}
+
+.app-user {
+  text-align: center;
+  width: 100%;
+  padding: 1rem 0 .4rem;
+
+  .app-user-photo {
+    width: 72px;
+    margin: 0 auto 8px;
+    height: 72px;
+    border: 1px solid hsla(210,8%,51%,.13);
+    padding: 4px;
+    border-radius: 50%;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+  }
+
+  .app-user-name {
+    display: block;
+    font-size: .875rem;
+    font-weight: 300;
+    color: rgba(0,0,0,.96);
+    margin-left: -2px;
+  }
+}
+
+.app-sidenav {
+  .icon-menu {
+    padding: 0 24px;
+    opacity: 1;
+
+    .mat-divider {
+      margin: 0 -24px;
+    }
+
+    .icon-menu-title {
+      padding-left: 0;
+      margin-left: -8px;
+    }
+
+    .icon-menu-item {
+      display: inline-block;
+
+      button {
+        min-width: auto;
+        margin: 4px;
+      }
+    }
+  }
+
+  .nav-item-sep {
+    padding: 0;
+    margin: 1rem 0;
+  }
+
+  mat-nav-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+}
+
+.nav-item-sep {
+  span {
+    padding: 16px 0 0 16px;
+    display: block;
+    font-size: 12px;
+  }
+}
+
+.sidebar-compact {
+  .app-brand {
+    .app-logo {
+      margin: auto;
+    }
+
+    .app-logo-text {
+      display: none;
+    }
+  }
+
+  .app-user {
+    display: none;
+  }
+
+  .app-sidenav {
+    .icon-menu {
+      padding: 8px 0 0;
+      width: 4rem;
+
+      .nav-item-sep {
+        display: none;
+      }
+
+      span {
+        display: none;
+      }
+
+      .icon-menu-item {
+        button {
+          margin: 0 0 4px 0;
+          padding: 0 20px;
+        }
+      }
+    }
+
+    .nav-item-sep {
+      span {
+        display: none;
+      }
+    }
+  }
+}

src/app/core/shell/sidenav/sidenav.component.spec.ts

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

src/app/core/shell/sidenav/sidenav.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { AuthenticationService } from '../../authentication/authentication.service';
+
+@Component({
+  selector: 'mifosx-sidenav',
+  templateUrl: './sidenav.component.html',
+  styleUrls: ['./sidenav.component.scss']
+})
+export class SidenavComponent implements OnInit {
+
+  @Input() sidenavCollapsed: boolean;
+
+  constructor(private router: Router,
+              private authenticationService: AuthenticationService) { }
+
+  ngOnInit() {
+  }
+
+  logout() {
+    this.authenticationService.logout()
+      .subscribe(() => this.router.navigate(['/login'], { replaceUrl: true }));
+  }
+
+}

src/app/core/shell/toolbar/toolbar.component.html

@@ -0,0 +1,115 @@
+<mat-toolbar fxLayout="row" color="primary" class="toolbar">
+
+  <button mat-icon-button *ngIf="!sidenavCollapsed" (click)="toggleSidenav()" matTooltip="Toggle Hide/Open">
+    <mat-icon>menu</mat-icon>
+  </button>
+
+  <button mat-icon-button *ngIf="sidenav.opened" (click)="toggleCollapse()" matTooltip="Toggle Collapse" fxHide.lt-md="true">
+    <mat-icon *ngIf="!sidenavCollapsed">chevron_left</mat-icon>
+    <mat-icon *ngIf="sidenavCollapsed">chevron_right</mat-icon>
+  </button>
+
+  <nav mat-tab-nav-bar backgroundColor="primary" class="ml-1">
+
+    <a mat-tab-link [active]="true" class="tab-link" [matMenuTriggerFor]="institutionMenu" #institutionMenuTrigger="matMenuTrigger" (mouseenter)="onMouseEnter(institutionMenuTrigger)">
+      <mat-icon class="mr-05">business</mat-icon>
+      Institution
+    </a>
+
+    <span fxHide.lt-lg="true">
+
+      <a mat-tab-link class="tab-link">
+          <mat-icon class="mr-05">account_balance</mat-icon>
+        Accounting
+      </a>
+      <a mat-tab-link class="tab-link" [matMenuTriggerFor]="reportsMenu" #reportsMenuTrigger="matMenuTrigger" (mouseenter)="reportsMenuTrigger.openMenu()">
+        <mat-icon class="mr-05">insert_chart_outlined</mat-icon>
+        Reports
+      </a>
+      <a mat-tab-link class="tab-link" [matMenuTriggerFor]="adminMenu" #adminMenuTrigger="matMenuTrigger" (mouseenter)="adminMenuTrigger.openMenu()">
+          <mat-icon class="mr-05">security</mat-icon>
+        Admin
+      </a>
+      <a mat-tab-link class="tab-link" [matMenuTriggerFor]="selfServiceMenu" #selfServiceMenuTrigger="matMenuTrigger" (mouseenter)="selfServiceMenuTrigger.openMenu()">
+          <mat-icon class="mr-05">people</mat-icon>
+        Self Service
+      </a>
+
+    </span>
+
+  </nav>
+
+  <span fxFlex="auto"></span>
+
+  <div *ngIf="searchVisible" class="search-bar" fxFlex="auto" fxHide.lt-sm="true" [@fadeInOut]>
+    <mat-form-field class="search">
+      <input matInput type="text" placeholder="Search">
+    </mat-form-field>
+  </div>
+
+  <button mat-icon-button class="ml-1" (click)="toggleVisibility()" fxHide.lt-sm="true">
+    <mat-icon>search</mat-icon>
+  </button>
+
+  <mat-select placeholder="Language" [(value)]="selectedLanguage" class="ml-1 language" fxHide.lt-md>
+    <mat-option value="English">English</mat-option>
+    <mat-option value="Hindi">Hindi</mat-option>
+  </mat-select>
+
+  <button mat-icon-button class="ml-1" matTooltip="Color Schemes" fxHide.lt-md>
+    <mat-icon>format_color_fill</mat-icon>
+  </button>
+
+  <button mat-icon-button class="ml-1" matTooltip="Notifications">
+    <mat-icon>notifications</mat-icon>
+  </button>
+
+  <button mat-icon-button class="ml-1 img-button">
+    <img src="assets/images/user_placeholder.png">
+  </button>
+
+</mat-toolbar>
+
+<mat-menu #institutionMenu="matMenu" [overlapTrigger]="false">
+  <span (mouseleave)="institutionMenuTrigger.closeMenu()">
+    <button mat-menu-item>Clients</button>
+    <button mat-menu-item>Groups</button>
+    <button mat-menu-item>Centers</button>
+    <span fxHide.lg>
+      <button mat-menu-item>Accounting</button>
+      <button mat-menu-item [matMenuTriggerFor]="reportsMenu">Reports</button>
+      <button mat-menu-item [matMenuTriggerFor]="adminMenu">Admin</button>
+      <button mat-menu-item [matMenuTriggerFor]="selfServiceMenu">Self Service</button>
+    </span>
+  </span>
+</mat-menu>
+
+<mat-menu #reportsMenu="matMenu" [overlapTrigger]="false">
+  <span (mouseleave)="reportsMenuTrigger.closeMenu()">
+    <button mat-menu-item>All</button>
+    <button mat-menu-item>Clients</button>
+    <button mat-menu-item>Loans</button>
+    <button mat-menu-item>Savings</button>
+    <button mat-menu-item>Funds</button>
+    <button mat-menu-item>Accounting</button>
+    <button mat-menu-item>XBRL</button>
+  </span>
+</mat-menu>
+
+<mat-menu #adminMenu="matMenu" [overlapTrigger]="false">
+  <span (mouseleave)="adminMenuTrigger.closeMenu()">
+    <button mat-menu-item>Users</button>
+    <button mat-menu-item>Organisation</button>
+    <button mat-menu-item>System</button>
+    <button mat-menu-item>Products</button>
+    <button mat-menu-item>Templates</button>
+  </span>
+</mat-menu>
+
+<mat-menu #selfServiceMenu="matMenu" [overlapTrigger]="false">
+  <span (mouseleave)="selfServiceMenuTrigger.closeMenu()">
+    <button mat-menu-item>User Management</button>
+    <button mat-menu-item>App Configuration</button>
+    <button mat-menu-item>Task Management</button>
+  </span>
+</mat-menu>

src/app/core/shell/toolbar/toolbar.component.scss

@@ -0,0 +1,45 @@
+mat-form-field {
+  font-size: 1rem;
+  margin-top: 6px;
+}
+
+.toolbar {
+  position: relative;
+  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+}
+
+.tab-link {
+  min-width: auto;
+  padding: 0 16px;
+}
+
+.search-bar {
+  mat-form-field {
+    margin-right: 1rem;
+    max-width: 400px;
+    width: 100%;
+    margin-left: 20px;
+  }
+}
+
+.language {
+  min-width: 80px;
+  width: 80px;
+  font-size: .875rem;
+}
+
+.ml-1 {
+  margin-left: 1rem;
+}
+
+.mr-1 {
+  margin-right: 1rem;
+}
+
+.img-button {
+  img {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+  }
+}

src/app/core/shell/toolbar/toolbar.component.spec.ts

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

src/app/core/shell/toolbar/toolbar.component.ts

@@ -0,0 +1,67 @@
+import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
+import { MatSidenav, MatMenuTrigger } from '@angular/material';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import {style, state, animate, transition, trigger} from '@angular/animations';
+
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'mifosx-toolbar',
+  templateUrl: './toolbar.component.html',
+  styleUrls: ['./toolbar.component.scss'],
+  animations: [
+    trigger('fadeInOut', [
+      transition(':enter', [
+        style({ opacity: 0 }),
+        animate(500, style({ opacity: 1 }))
+      ]),
+      transition(':leave', [
+        animate(500, style({ opacity: 0 }))
+      ])
+    ])
+  ]
+})
+export class ToolbarComponent implements OnInit {
+
+  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
+  .pipe(
+    map(result => result.matches)
+  );
+
+  isHandset: boolean;
+  searchVisible = false;
+  selectedLanguage = 'English';
+  sidenavCollapsed = false;
+
+  @Input() sidenav: MatSidenav;
+  @Output() collapse = new EventEmitter<boolean>();
+
+  constructor(private breakpointObserver: BreakpointObserver) { }
+
+  ngOnInit() {
+    this.isHandset$.subscribe(isHandset => {
+      this.isHandset = isHandset;
+    });
+  }
+
+  toggleSidenav() {
+    this.sidenav.toggle();
+  }
+
+  toggleCollapse() {
+    this.sidenavCollapsed = !this.sidenavCollapsed;
+    this.collapse.emit(this.sidenavCollapsed);
+  }
+
+  toggleVisibility() {
+    this.searchVisible = !this.searchVisible;
+  }
+
+  onMouseEnter(menuTrigger: MatMenuTrigger) {
+    if (!this.isHandset) {
+      menuTrigger.openMenu();
+    }
+  }
+
+}

src/app/home/dashboard/dashboard.component.html

@@ -1,4 +1,4 @@
-<div class="fluid-container">
+<!-- <div class="fluid-container">
   <div class="container">
     <div class="row mt-5">
       <div class="col-sm-4">
@@ -96,18 +96,6 @@
               </div>
             </div>
             </div>
-           <!--  <div class="col-sm-4 ">
-            <div class="card">
-              <div class="card-body">
-                <div class="ngx-charts">
-                <ngx-charts-pie-chart
-                [view]="view"
-                [scheme]="colorScheme"
-                [results]="single"></ngx-charts-pie-chart>
-              </div>
-             </div>
-            </div>
-          </div> -->
         </div>
     </div>
-  </div>
+  </div> -->

src/app/home/dashboard/dashboard.component.scss

@@ -1,5 +1,3 @@
-
-.ngx-charts {
-    position: relative;
-
-  }
+// .ngx-charts {
+//     position: relative;
+// }

src/app/home/dashboard/dashboard.component.spec.ts

@@ -1,7 +1,4 @@
-/* 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 { DashboardComponent } from './dashboard.component';
 

src/app/home/dashboard/dashboard.component.ts

@@ -1,16 +1,16 @@
 import { Component, OnInit } from '@angular/core';
-import { NgxChartsModule } from '@swimlane/ngx-charts';
+
 import { single } from './data';
 
 @Component({
-  selector: 'app-dashboard',
+  selector: 'mifosx-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss']
 })
 export class DashboardComponent implements OnInit {
+
   single: any[];
   multi: any[];
-
   view: any[] = [600, 350];
 
   // options
@@ -26,11 +26,12 @@ export class DashboardComponent implements OnInit {
   colorScheme = {
     domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
   };
+
   constructor() {
     Object.assign(this, { single });
   }
-  ngOnInit() {
 
+  ngOnInit() {
   }
 
 }

src/app/home/dashboard/data.ts

@@ -1,58 +1,58 @@
 export const single = [
-    {
-        'name': 'Germany',
-        'value': 89400001
-    },
-    {
-        'name': 'USA',
-        'value': 5000000
-    },
-    {
-        'name': 'France',
-        'value': 7200000
-    }
+  {
+    'name': 'Germany',
+    'value': 89400001
+  },
+  {
+    'name': 'USA',
+    'value': 5000000
+  },
+  {
+    'name': 'France',
+    'value': 7200000
+  }
 ];
 
 export const multi = [
-    {
-        'name': 'Germany',
-        'series': [
-            {
-                'name': '2010',
-                'value': 7300000
-            },
-            {
-                'name': '2011',
-                'value': 8940000
-            }
-        ]
-    },
+  {
+    'name': 'Germany',
+    'series': [
+      {
+        'name': '2010',
+        'value': 7300000
+      },
+      {
+        'name': '2011',
+        'value': 8940000
+      }
+    ]
+  },
 
-    {
-        'name': 'USA',
-        'series': [
-            {
-                'name': '2010',
-                'value': 7870000
-            },
-            {
-                'name': '2011',
-                'value': 8270000
-            }
-        ]
-    },
+  {
+    'name': 'USA',
+    'series': [
+      {
+        'name': '2010',
+        'value': 7870000
+      },
+      {
+        'name': '2011',
+        'value': 8270000
+      }
+    ]
+  },
 
-    {
-        'name': 'France',
-        'series': [
-            {
-                'name': '2010',
-                'value': 5000002
-            },
-            {
-                'name': '2011',
-                'value': 5800000
-            }
-        ]
-    }
+  {
+    'name': 'France',
+    'series': [
+      {
+        'name': '2010',
+        'value': 5000002
+      },
+      {
+        'name': '2011',
+        'value': 5800000
+      }
+    ]
+  }
 ];

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

@@ -1,15 +1,27 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { Route, extract } from '../../app/core';
+import { Route, extract } from '../core';
 import { HomeComponent } from './home.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 
 const routes: Routes = [
   Route.withShell([
-    { path: '', redirectTo: '/home', pathMatch: 'full' },
-    { path: 'home', component: HomeComponent, data: { title: extract('Home') } },
-    { path: 'home/dashboard', component: DashboardComponent}
+    {
+      path: '',
+      redirectTo: '/home',
+      pathMatch: 'full'
+    },
+    {
+      path: 'home',
+      component: HomeComponent,
+      data: { title: extract('Home') }
+    },
+    {
+      path: 'home/dashboard',
+      component: DashboardComponent,
+      data: { title: extract('Dashboard') }
+    }
   ])
 ];
 

src/app/home/home.component.html

@@ -1,7 +1,8 @@
-<div class="container-fluid">
+<!-- <div class="container-fluid">
   <div class="text-center mt-5">
-      <img class="logo" src="assets/images/mifos_lg-logo.jpg"/>
-    <!-- <app-loader [isLoading]="isLoading"></app-loader>
-    <q [hidden]="isLoading">{{quote}}</q> -->
+    <app-loader [isLoading]="isLoading"></app-loader>
+    <q [hidden]="isLoading">{{quote}}</q>
   </div>
-</div>
+</div> -->
+
+<img class="logo" src="assets/images/mifos_lg-logo.jpg"/>

src/app/home/home.component.scss

@@ -1,9 +1,9 @@
-.logo {
-  width: 500px;
-}
+// .logo {
+//   width: 500px;
+// }
 
-q {
-  font-style: italic;
-  font-size: 1.2rem;
-  quotes: "« " " »";
-}
+// q {
+//   font-style: italic;
+//   font-size: 1.2rem;
+//   quotes: "« " " »";
+// }

src/app/home/home.component.spec.ts

@@ -1,8 +1,8 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 
-import { CoreModule } from '@app/core';
-import { SharedModule } from '@app/shared';
+import { CoreModule } from '../core';
+import { SharedModule } from '../shared';
 import { HomeComponent } from './home.component';
 import { QuoteService } from './quote.service';
 

src/app/home/home.component.ts

@@ -1,10 +1,11 @@
 import { Component, OnInit } from '@angular/core';
+
 import { finalize } from 'rxjs/operators';
 
 import { QuoteService } from './quote.service';
 
 @Component({
-  selector: 'app-home',
+  selector: 'mifosx-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss']
 })
@@ -17,9 +18,9 @@ export class HomeComponent implements OnInit {
 
   ngOnInit() {
     this.isLoading = true;
-    this.quoteService.getRandomQuote({ category: 'dev' })
-      .pipe(finalize(() => { this.isLoading = false; }))
-      .subscribe((quote: string) => { this.quote = quote; });
+    // this.quoteService.getRandomQuote({ category: 'dev' })
+    //   .pipe(finalize(() => { this.isLoading = false; }))
+    //   .subscribe((quote: string) => { this.quote = quote; });
   }
 
 }

src/app/home/home.module.ts

@@ -1,10 +1,10 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+
 import { TranslateModule } from '@ngx-translate/core';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 
-import { CoreModule } from '../../app/core';
-import { SharedModule } from '../../app/shared';
+import { SharedModule } from '../shared';
 import { HomeRoutingModule } from './home-routing.module';
 import { HomeComponent } from './home.component';
 import { QuoteService } from './quote.service';
@@ -15,14 +15,13 @@ import { DashboardComponent } from './dashboard/dashboard.component';
     CommonModule,
     TranslateModule,
     NgxChartsModule,
-    CoreModule,
     SharedModule,
     HomeRoutingModule
   ],
   declarations: [
     HomeComponent,
     DashboardComponent
-],
+  ],
   providers: [
     QuoteService
   ]

src/app/home/quote.service.spec.ts

@@ -1,7 +1,7 @@
 import { TestBed, inject, async } from '@angular/core/testing';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 
-import { CoreModule, HttpCacheService } from '@app/core';
+import { CoreModule, HttpCacheService } from '../core';
 import { QuoteService } from './quote.service';
 
 describe('QuoteService', () => {

src/app/home/quote.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+
 import { Observable, of } from 'rxjs';
 import { map, catchError } from 'rxjs/operators';
 

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

@@ -1,11 +1,15 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { extract } from '../../app/core';
+import { extract } from '../core';
 import { LoginComponent } from './login.component';
 
 const routes: Routes = [
-  { path: 'login', component: LoginComponent, data: { title: extract('Login') } }
+  {
+    path: 'login',
+    component: LoginComponent,
+    data: { title: extract('Login') }
+  }
 ];
 
 @NgModule({

src/app/login/login.component.html

@@ -1,3 +1,5 @@
+<!-- TODO: UPDATE WITH ANGULAR MATERIAL -->
+
 <div class="login-container bg-light">
   <div class="login-box">
     <img class="text-center img-responsive" src="assets/images/mifos-logo-flat.png" style="width:30%">

src/app/login/login.component.spec.ts

@@ -1,10 +1,10 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { TranslateModule } from '@ngx-translate/core';
 import { RouterTestingModule } from '@angular/router/testing';
 import { ReactiveFormsModule } from '@angular/forms';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
-import { CoreModule } from '@app/core';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { CoreModule } from '../core';
 import { LoginComponent } from './login.component';
 
 describe('LoginComponent', () => {
@@ -14,7 +14,6 @@ describe('LoginComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [
-        NgbModule.forRoot(),
         RouterTestingModule,
         TranslateModule.forRoot(),
         ReactiveFormsModule,

src/app/login/login.component.ts

@@ -1,15 +1,16 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+
 import { finalize } from 'rxjs/operators';
 
 import { environment } from '../../environments/environment';
-import { Logger, I18nService, AuthenticationService } from '../../app/core';
+import { Logger, I18nService, AuthenticationService } from '../core';
 
 const log = new Logger('Login');
 
 @Component({
-  selector: 'app-login',
+  selector: 'mifosx-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.scss']
 })

src/app/login/login.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
+
 import { TranslateModule } from '@ngx-translate/core';
 
 import { LoginRoutingModule } from './login-routing.module';

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

@@ -1,12 +1,16 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { Route, extract } from '../../app/core';
+import { Route, extract } from '../core';
 import { NavigationComponent } from './navigation.component';
 
 const routes: Routes = [
   Route.withShell([
-    { path: 'navigation', component: NavigationComponent}
+    {
+      path: 'navigation',
+      component: NavigationComponent,
+      data: { title: extract('Navigation') }
+    }
   ])
 ];
 

src/app/navigation/navigation.component.html

@@ -1,9 +1,6 @@
-<div class="fluid-container">
+<!-- <div class="fluid-container">
   <div class="container">
 
-       <!--  <div class="card card-header">
-        <h4 class="col-sm-3 font-weight-bold">Navigation</h4> -->
-
         <div class="col-sm-4 mt-5 mb-3 mx-auto">
           <input class="form-control mr-sm-2" placeholder="Filter by Name" type="text">
         </div>
@@ -16,16 +13,13 @@
               <div class="card col-sm-4 mx-auto">
                 <table class="table table-hover table-responsive-md table-fixed">
 
-                    <!--Table head-->
                     <thead>
                         <tr>
                             <th>#</th>
                             <th>Name</th>
                         </tr>
                     </thead>
-                    <!--Table head-->
 
-                    <!--Table body-->
                     <tbody>
                         <tr>
                             <th scope="row">4</th>
@@ -80,7 +74,6 @@
                         </tr>
 
                     </tbody>
-                    <!--Table body-->
 
                 </table>
               </div>
@@ -93,16 +86,13 @@
                 <div class="card col-sm-4 mx-auto">
                     <table class="table table-hover table-responsive-md table-fixed">
 
-                        <!--Table head-->
                         <thead>
                             <tr>
                                 <th>#</th>
                                 <th>Name</th>
                             </tr>
                         </thead>
-                        <!--Table head-->
 
-                        <!--Table body-->
                         <tbody>
                             <tr>
                                 <th scope="row">4</th>
@@ -142,7 +132,6 @@
                             </tr>
 
                         </tbody>
-                        <!--Table body-->
 
                     </table>
                   </div>
@@ -161,4 +150,4 @@
           </div>
         </div>
       </div>
-    </div>
+    </div> -->

src/app/navigation/navigation.component.spec.ts

@@ -1,7 +1,4 @@
-/* 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 { NavigationComponent } from './navigation.component';
 

src/app/navigation/navigation.component.ts

@@ -1,12 +1,14 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-navigation',
+  selector: 'mifosx-navigation',
   templateUrl: './navigation.component.html',
   styleUrls: ['./navigation.component.scss']
 })
 export class NavigationComponent implements OnInit {
+
   currentJustify = 'start';
+
   constructor() { }
 
   ngOnInit() {

src/app/self-service/create-user/create-user.component.html

@@ -1,4 +1,4 @@
-<div class="fluid-container">
+<!-- <div class="fluid-container">
   <div class="container">
     <div class="card mt-5">
       <div class="card-header">
@@ -7,7 +7,6 @@
       <div class="card-body">
           <div class="row mb-3">
             <div class="col-sm-12">
-                <!-- <div class="form-group"> -->
                     <div class="custom-control custom-radio custom-control-inline">
                       <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input" (change)="isCollapsed = false" checked>
                       <label class="custom-control-label" for="customRadio1">Existing User</label>
@@ -16,7 +15,6 @@
                     <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input" (change)="isCollapsed = true">
                     <label class="custom-control-label" for="customRadio2">New User</label>
                   </div>
-                <!-- </div> -->
             </div>
           </div>
           <div id="collapseExample">
@@ -121,4 +119,4 @@
       </div>
     </div>
   </div>
-</div>
+</div> -->

src/app/self-service/create-user/create-user.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-create-user',
+  selector: 'mifosx-create-user',
   templateUrl: './create-user.component.html',
   styleUrls: ['./create-user.component.scss']
 })

src/app/self-service/self-service-routing.module.ts

@@ -1,16 +1,28 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { Route, extract } from '../../app/core';
+import { Route, extract } from '../core';
 import { UserManagementComponent } from './user-management/user-management.component';
 import { CreateUserComponent } from './create-user/create-user.component';
 import { ViewUserComponent } from './view-user/view-user.component';
 
 const routes: Routes = [
   Route.withShell([
-    { path: 'self-service/users', component: UserManagementComponent, data: { title: extract('Self Service') } },
-    { path: 'self-service/users/create', component: CreateUserComponent },
-    { path: 'self-service/users/view', component: ViewUserComponent }
+    {
+      path: 'self-service/users',
+      component: UserManagementComponent,
+      data: { title: extract('Self Service Users') }
+    },
+    {
+      path: 'self-service/users/create',
+      component: CreateUserComponent,
+      data: { title: extract('Create Self Service User') }
+    },
+    {
+      path: 'self-service/users/view',
+      component: ViewUserComponent,
+      data: { title: extract('View Self Service User') }
+    }
   ])
 ];
 

src/app/self-service/self-service.module.ts

@@ -3,14 +3,12 @@ import { CommonModule } from '@angular/common';
 
 import { UserManagementComponent } from './user-management/user-management.component';
 import { SelfServiceRoutingModule } from './self-service-routing.module';
-import { CoreModule } from '../../app/core';
 import { CreateUserComponent } from './create-user/create-user.component';
 import { ViewUserComponent } from './view-user/view-user.component';
 
 @NgModule({
   imports: [
     CommonModule,
-    CoreModule,
     SelfServiceRoutingModule
   ],
   declarations: [

src/app/self-service/user-management/user-management.component.html

@@ -1,4 +1,4 @@
-<div class="fluid-container">
+<!-- <div class="fluid-container">
  <div class="container">
   <div class="card mt-5">
     <div class="card-header">
@@ -62,10 +62,8 @@
     </div>
     <div class="card-body">
 
-        <!--Table-->
         <table class="table table-hover table-responsive-md table-fixed">
 
-            <!--Table head-->
             <thead>
                 <tr>
                     <th>
@@ -81,9 +79,7 @@
                     <th>Staff</th>
                 </tr>
             </thead>
-            <!--Table head-->
 
-            <!--Table body-->
             <tbody>
                 <tr>
                     <th scope="row">
@@ -170,13 +166,10 @@
 
                 </tr>
             </tbody>
-            <!--Table body-->
 
         </table>
-        <!--Table-->
 
       </div>
     </div>
-    <!-- <ngb-pagination  class="d-flex justify-content-center" [collectionSize]="70" [(page)]="page" [boundaryLinks]="true"></ngb-pagination> -->
   </div>
-</div>
+</div> -->

src/app/self-service/user-management/user-management.component.scss

@@ -1,6 +1,6 @@
-td, th {
-  text-align: center;
-}
-ngb-pagination {
-  margin: 20px 0px;
-}
+// td, th {
+//   text-align: center;
+// }
+// ngb-pagination {
+//   margin: 20px 0px;
+// }

src/app/self-service/user-management/user-management.component.ts

@@ -1,11 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-user-management',
+  selector: 'mifosx-user-management',
   templateUrl: './user-management.component.html',
   styleUrls: ['./user-management.component.scss']
 })
 export class UserManagementComponent implements OnInit {
+
   page = 1;
   isCollapsed = true;
 

src/app/self-service/view-user/view-user.component.html

@@ -1,4 +1,4 @@
-<div class="fluid-container">
+<!-- <div class="fluid-container">
   <div class="container">
     <div class="card mt-5">
       <div class="card-header">
@@ -27,12 +27,7 @@
         <div class="row mt-2">
           <div class="col-sm-6">
             <table class="table table-striped">
-                <!-- <thead>
-                  <tr>
-                    <th scope="col">Last</th>
-                    <th scope="col">Handle</th>
-                  </tr>
-                </thead> -->
+
                 <tbody>
                   <tr>
                     <th scope="row">Username</th>
@@ -81,4 +76,4 @@
       </div>
     </div>
   </div>
-</div>
+</div> -->

src/app/self-service/view-user/view-user.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-view-user',
+  selector: 'mifosx-view-user',
   templateUrl: './view-user.component.html',
   styleUrls: ['./view-user.component.scss']
 })

src/app/shared/loader/loader.component.html

@@ -1,4 +1,5 @@
-<div [hidden]="!isLoading" class="text-xs-center">
-  <i class="fas fa-cog fa-spin fa-3x"></i> <span>{{message}}</span>
+<!-- TODO: Loading Component -->
+<div [hidden]="!isLoading">
+  <span>{{message}}</span>
 </div>
 

src/app/shared/loader/loader.component.scss

@@ -1,3 +0,0 @@
-.fa {
-  vertical-align: middle;
-}

src/app/shared/loader/loader.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, Input } from '@angular/core';
 
 @Component({
-  selector: 'app-loader',
+  selector: 'mifosx-loader',
   templateUrl: './loader.component.html',
   styleUrls: ['./loader.component.scss']
 })

src/app/web-app.component.spec.ts

@@ -2,8 +2,8 @@ import { TestBed, async } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
 
-import { CoreModule } from '@app/core';
-import { AppComponent } from './app.component';
+import { CoreModule } from './core/core.module';
+import { WebAppComponent } from './web-app.component';
 
 describe('AppComponent', () => {
   beforeEach(async(() => {
@@ -13,14 +13,14 @@ describe('AppComponent', () => {
         TranslateModule.forRoot(),
         CoreModule
       ],
-      declarations: [AppComponent],
+      declarations: [WebAppComponent],
       providers: []
     });
     TestBed.compileComponents();
   }));
 
   it('should create the app', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
+    const fixture = TestBed.createComponent(WebAppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
   }));

src/app/web-app.component.ts

@@ -1,20 +1,22 @@
 import { Component, OnInit } from '@angular/core';
 import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
 import { Title } from '@angular/platform-browser';
+
 import { TranslateService } from '@ngx-translate/core';
 import { merge } from 'rxjs';
 import { filter, map, mergeMap } from 'rxjs/operators';
 
 import { environment } from '../environments/environment';
-import { Logger, I18nService } from '../app/core';
-const log = new Logger('App');
+import { Logger, I18nService } from './core';
+
+const log = new Logger('MifosX');
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  selector: 'mifosx-web-app',
+  templateUrl: './web-app.component.html',
+  styleUrls: ['./web-app.component.scss']
 })
-export class AppComponent implements OnInit {
+export class WebAppComponent implements OnInit {
 
   constructor(private router: Router,
               private activatedRoute: ActivatedRoute,
@@ -30,7 +32,6 @@ export class AppComponent implements OnInit {
 
     log.debug('init');
 
-
     // Setup translations
     this.i18nService.init(environment.defaultLanguage, environment.supportedLanguages);
 
@@ -55,6 +56,7 @@ export class AppComponent implements OnInit {
           this.titleService.setTitle(this.translateService.instant(title));
         }
       });
+
   }
 
 }

src/index.html

@@ -36,8 +36,8 @@
     window.addEventListener('load',function() { window.scrollTo(0, 1); });
   </script>
 
-  <app-root>
+  <mifosx-web-app>
     Loading...
-  </app-root>
+  </mifosx-web-app>
 </body>
 </html>

src/main.scss

@@ -4,7 +4,71 @@
  */
 
 // Theme customization
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
 
 // 3rd party libraries
 
 // Other imports
+
+/* You can add global styles to this file, and also import other style files */
+body, html {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  -webkit-tap-highlight-color: transparent;
+  min-height: 100%;
+  -webkit-font-smoothing: antialiased;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-weight: 400;
+  font-size: .875rem;
+  color: rgba(0,0,0,.87);
+  line-height: 1.5;
+  font-family: Roboto, Helvetica Neue, sans-serif;
+}
+
+div {
+  box-sizing: border-box;
+}
+
+.mat-icon-button.xs-button {
+  height: 20px;
+  width: 20px;
+  line-height: 20px;
+}
+
+.mat-icon-button.xs-button .mat-icon {
+  font-size: 16px;
+  line-height: 20px;
+  height: 20px;
+  width: 20px;
+}
+
+.text-muted {
+  color: rgba(0, 0, 0, .54);
+}
+
+.mb-05 {
+  margin-bottom: .5rem;
+}
+
+.mr-05 {
+  margin-right: .5rem;
+}
+
+.mb-1 {
+  margin-bottom: 1rem;
+}
+
+.mt-1 {
+  margin-top: 1rem;
+}
+

src/main.ts

@@ -1,7 +1,7 @@
 /*
  * Entry point of the application.
  * Only platform bootstrapping code should be here.
- * For app-specific initialization, use `app/app.component.ts`.
+ * For app-specific initialization, use `app/web-app.component.ts`.
  */
 
 import { enableProdMode } from '@angular/core';