using Azia theme

2022-09-08 19:36:33 -07:00 · 2022-09-08 19:36:33 -07:00 · 6a8df64691
parent 81c4382e3c
commit 6a8df64691
355 changed files with 17292 additions and 16846 deletions
--- a/frontend/angular.json
+++ b/frontend/angular.json
@ -30,8 +30,6 @@
            ],
            "styles": [
              "src/styles.scss",
-              "src/assets/scss/black-dashboard.scss",
-              "src/assets/css/nucleo-icons.css"
            ],
            "scripts": [
              "node_modules/@panva/oauth4webapi/build/index.js"
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@ -13,20 +13,25 @@
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.1.3",
+    "@angular/cdk": "^14.1.3",
    "@angular/common": "^14.1.3",
    "@angular/compiler": "^14.1.3",
    "@angular/core": "^14.1.3",
    "@angular/forms": "^14.1.3",
+    "@angular/localize": "^14.1.3",
    "@angular/platform-browser": "^14.1.3",
    "@angular/platform-browser-dynamic": "^14.1.3",
    "@angular/router": "^14.1.3",
    "@panva/oauth4webapi": "^1.1.3",
    "@ng-bootstrap/ng-bootstrap": "10.0.0",
    "fhirclient": "^2.5.1",
+    "bootstrap": "^4.4.1",
+
    "chart.js": "2.9.4",
    "rxjs": "~6.5.4",
    "tslib": "^2.0.0",
-    "zone.js": "~0.11.8"
+    "zone.js": "~0.11.8",
+    "ng2-charts": "^2.3.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.1.3",
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@ -2,38 +2,26 @@ import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { BrowserModule } from "@angular/platform-browser";
 import { Routes, RouterModule } from "@angular/router";
-
-import { AdminLayoutComponent } from "./layouts/admin-layout/admin-layout.component";
+import { DashboardComponent } from './pages/dashboard/dashboard.component';
+import { MedicalSourcesComponent } from './pages/medical-sources/medical-sources.component';

 const routes: Routes = [
-  {
-    path: "",
-    redirectTo: "dashboard",
-    pathMatch: "full"
-  },
-  {
-    path: "",
-    component: AdminLayoutComponent,
-    children: [
-      {
-        path: "",
-        loadChildren: () => import ("./layouts/admin-layout/admin-layout.module").then(m => m.AdminLayoutModule)
-      }
-    ]
-  },
-  {
-    path: "**",
-    redirectTo: "dashboard"
-  }
+  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
+  { path: 'dashboard', component: DashboardComponent },
+  { path: 'sources', component: MedicalSourcesComponent },
+  // { path: 'general-pages', loadChildren: () => import('./general-pages/general-pages.module').then(m => m.GeneralPagesModule) },
+  // { path: 'ui-elements', loadChildren: () => import('./ui-elements/ui-elements.module').then(m => m.UiElementsModule) },
+  // { path: 'form', loadChildren: () => import('./form/form.module').then(m => m.FormModule) },
+  // { path: 'charts', loadChildren: () => import('./charts/charts.module').then(m => m.ChartsDemoModule) },
+  // { path: 'tables', loadChildren: () => import('./tables/tables.module').then(m => m.TablesModule) },
+  { path: '**', redirectTo: 'dashboard' },
 ];

@NgModule({
  imports: [
+    RouterModule.forRoot(routes),
    CommonModule,
    BrowserModule,
-    RouterModule.forRoot(routes, {
-      useHash: true
-    })
  ],
  exports: [RouterModule]
 })
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@ -1 +1,7 @@
-<router-outlet></router-outlet>
+<div>
+  <app-header *ngIf="showHeader"></app-header>
+  <div class="az-content-wrapper">
+    <router-outlet></router-outlet>
+  </div>
+  <app-footer *ngIf="showFooter"></app-footer>
+</div>
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@ -1,12 +1,24 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
  title = 'fastenhealth';
+
+  public layoutOption: string;
+  showHeader:boolean = true;
+  showFooter:boolean = true;
+
+  ngOnInit() {
+
+    // navbar backdrop for mobile only
+    const navbarBackdrop = document.createElement('div');
+    navbarBackdrop.classList.add('az-navbar-backdrop');
+    document.querySelector('body').appendChild(navbarBackdrop);
+  }
 }


--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@ -4,22 +4,29 @@ import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HttpClientModule } from '@angular/common/http';
-import { AdminLayoutComponent } from "./layouts/admin-layout/admin-layout.component";
 import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
-import { ComponentsModule } from "./components/components.module";
-
+import { HeaderComponent } from './components/header/header.component';
+import { FooterComponent } from './components/footer/footer.component';
+import { DashboardComponent } from './pages/dashboard/dashboard.component';
+import { MedicalSourcesComponent } from './pages/medical-sources/medical-sources.component';
+import { ChartsModule } from 'ng2-charts';
+import {SharedModule} from './components/shared.module';

@NgModule({
  declarations: [
    AppComponent,
-    AdminLayoutComponent,
+    HeaderComponent,
+    FooterComponent,
+    DashboardComponent,
+    MedicalSourcesComponent,
  ],
  imports: [
    BrowserModule,
+    SharedModule,
    AppRoutingModule,
    HttpClientModule,
    NgbModule,
-    ComponentsModule
+    ChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
--- a/frontend/src/app/components/components-sidebar/components-sidebar.component.html
+++ b/frontend/src/app/components/components-sidebar/components-sidebar.component.html
@ -0,0 +1,26 @@
+<div class="az-content-left az-content-left-components">
+  <div class="component-item">
+    <label>UI Elements</label>
+    <nav class="nav flex-column">
+      <a routerLink="/ui-elements/buttons" routerLinkActive="active" class="nav-link">Buttons</a>
+      <a routerLink="/ui-elements/dropdown" routerLinkActive="active" class="nav-link">Dropdown</a>
+      <a routerLink="/ui-elements/icons" routerLinkActive="active" class="nav-link">Icons</a>
+    </nav>
+
+    <label>Forms</label>
+    <nav class="nav flex-column">
+      <a routerLink="/form/form-elements" routerLinkActive="active" class="nav-link">Form Elements</a>
+    </nav>
+
+    <label>Charts</label>
+    <nav class="nav flex-column">
+      <a routerLink="/charts/chartjs" routerLinkActive="active" class="nav-link">ChartJS</a>
+    </nav>
+
+    <label>Tables</label>
+    <nav class="nav flex-column">
+      <a routerLink="/tables/basic-tables" routerLinkActive="active" class="nav-link">Basic Tables</a>
+    </nav>
+  </div><!-- component-item -->
+
+</div><!-- az-content-left -->
--- a/frontend/src/app/components/components-sidebar/components-sidebar.component.scss
+++ b/frontend/src/app/components/components-sidebar/components-sidebar.component.scss
--- a/frontend/src/app/components/components-sidebar/components-sidebar.component.spec.ts
+++ b/frontend/src/app/components/components-sidebar/components-sidebar.component.spec.ts
@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ComponentsSidebarComponent } from './components-sidebar.component';
+
+describe('ComponentsSidebarComponent', () => {
+  let component: ComponentsSidebarComponent;
+  let fixture: ComponentFixture<ComponentsSidebarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ComponentsSidebarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ComponentsSidebarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/frontend/src/app/components/components-sidebar/components-sidebar.component.ts
+++ b/frontend/src/app/components/components-sidebar/components-sidebar.component.ts
@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-components-sidebar',
+  templateUrl: './components-sidebar.component.html',
+  styleUrls: ['./components-sidebar.component.scss']
+})
+export class ComponentsSidebarComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
--- a/frontend/src/app/components/components.module.ts
+++ b/frontend/src/app/components/components.module.ts
@ -1,15 +0,0 @@
-import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { RouterModule } from "@angular/router";
-import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
-
-import { FooterComponent } from "./footer/footer.component";
-import { NavbarComponent } from "./navbar/navbar.component";
-import { SidebarComponent } from "./sidebar/sidebar.component";
-
-@NgModule({
-  imports: [CommonModule, RouterModule, NgbModule],
-  declarations: [FooterComponent, NavbarComponent, SidebarComponent],
-  exports: [FooterComponent, NavbarComponent, SidebarComponent]
-})
-export class ComponentsModule {}
--- a/frontend/src/app/components/footer/footer.component.html
+++ b/frontend/src/app/components/footer/footer.component.html
@ -1,25 +1,8 @@
-<footer class=" footer">
-  <div class=" container-fluid">
-    <ul class=" nav">
-      <li class=" nav-item">
-        <a class=" nav-link" href="https://www.creative-tim.com?ref=bda-footer">
-          Creative Tim
-        </a>
-      </li>
-      <li class=" nav-item">
-        <a class=" nav-link" href="https://www.creative-tim.com/about-us?ref=bda-footer">
-          About Us
-        </a>
-      </li>
-      <li class=" nav-item">
-        <a class=" nav-link" href="http://blog.creative-tim.com?ref=bda-footer"> Blog </a>
-      </li>
-    </ul>
-    <div class=" copyright">
-      &copy; {{ test | date: "yyyy" }} made with
-      <i class=" tim-icons icon-heart-2"> </i> by
-      <a href="https://www.creative-tim.com?ref=bda-footer" target="_blank"> Creative Tim </a>
-      for a better web.
+<div class="az-footer ht-40">
+  <div class="container ht-100p pd-t-0-f">
+    <div class="d-sm-flex justify-content-center justify-content-sm-between py-2 w-100">
+      <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">Copyright © bootstrapdash.com 2020</span>
+      <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center">Free <a href="https://www.bootstrapdash.com/angular-admin-templates/" target="_blank">  angular admin template </a> from <a href="https://www.bootstrapdash.com/" target="_blank">bootstrapdash.com </a></span>
    </div>
-  </div>
-</footer>
+  </div><!-- container -->
+</div><!-- az-footer -->
--- a/frontend/src/app/components/footer/footer.component.scss
+++ b/frontend/src/app/components/footer/footer.component.scss
--- a/frontend/src/app/components/footer/footer.component.spec.ts
+++ b/frontend/src/app/components/footer/footer.component.spec.ts
@ -1,15 +1,16 @@
-import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';

-import { FooterComponent } from "./footer.component";
+import { FooterComponent } from './footer.component';

-describe("FooterComponent", () => {
+describe('FooterComponent', () => {
  let component: FooterComponent;
  let fixture: ComponentFixture<FooterComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
-      declarations: [FooterComponent]
-    }).compileComponents();
+      declarations: [ FooterComponent ]
+    })
+    .compileComponents();
  }));

  beforeEach(() => {
@ -18,7 +19,7 @@ describe("FooterComponent", () => {
    fixture.detectChanges();
  });

-  it("should create", () => {
+  it('should create', () => {
    expect(component).toBeTruthy();
  });
 });
--- a/frontend/src/app/components/footer/footer.component.ts
+++ b/frontend/src/app/components/footer/footer.component.ts
@ -1,14 +1,15 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';

@Component({
-  selector: "app-footer",
-  templateUrl: "./footer.component.html",
-  styleUrls: ["./footer.component.css"]
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss']
 })
 export class FooterComponent implements OnInit {
-  test: Date = new Date();

-  constructor() {}
+  constructor() { }
+
+  ngOnInit() {
+  }

-  ngOnInit() {}
 }
--- a/frontend/src/app/components/header/header.component.html
+++ b/frontend/src/app/components/header/header.component.html
@ -0,0 +1,90 @@
+<div class="az-header">
+  <div class="container">
+    <div class="az-header-left">
+      <a routerLink="/" class="az-logo"><span></span> azia</a>
+      <a href="#" id="azMenuShow" (click)="toggleHeaderMenu($event)" class="az-header-menu-icon d-lg-none"><span></span></a>
+    </div><!-- az-header-left -->
+    <div class="az-header-menu">
+      <div class="az-header-menu-header">
+        <a routerLink="/" class="az-logo"><span></span> azia</a>
+        <a href="#" (click)="toggleHeaderMenu($event)" class="close">&times;</a>
+      </div><!-- az-header-menu-header -->
+      <ul class="nav">
+        <li class="nav-item" ngbDropdown [ngClass]="{ 'active': dashboard.isActive }">
+          <a routerLink="/dashboard" routerLinkActive="active" #dashboard="routerLinkActive" class="nav-link"><i class="typcn typcn-chart-area-outline"></i> Dashboard</a>
+        </li>
+        <li class="nav-item" ngbDropdown [ngClass]="{ 'active': sources.isActive }">
+          <a routerLink="/sources" routerLinkActive="active" #sources="routerLinkActive" class="nav-link"><i class="typcn typcn-document"></i> Sources</a>
+        </li>
+      </ul>
+    </div><!-- az-header-menu -->
+    <div class="az-header-right">
+      <a routerLink="/" class="az-header-search-link"><i class="fas fa-search"></i></a>
+      <div class="az-header-message">
+        <a routerLink="/"><i class="typcn typcn-messages"></i></a>
+      </div><!-- az-header-message -->
+      <div class="dropdown az-header-notification" ngbDropdown>
+        <a class="new" id="notificationsDropdown" ngbDropdownToggle><i class="typcn typcn-bell"></i></a>
+        <div class="dropdown-menu" ngbDropdownMenu aria-labelledby="notificationsDropdown">
+          <div class="az-dropdown-header mg-b-20 d-sm-none">
+            <a class="az-header-arrow" (click)="closeMenu($event)"><i class="icon ion-md-arrow-back"></i></a>
+          </div>
+          <h6 class="az-notification-title">Notifications</h6>
+          <p class="az-notification-text">You have 2 unread notification</p>
+          <div class="az-notification-list">
+            <div class="media new">
+              <div class="az-img-user"><img src="assets/images/img2.jpg" alt=""></div>
+              <div class="media-body">
+                <p>Congratulate <strong>Socrates Itumay</strong> for work anniversaries</p>
+                <span>Mar 15 12:32pm</span>
+              </div><!-- media-body -->
+            </div><!-- media -->
+            <div class="media new">
+              <div class="az-img-user online"><img src="assets/images/img3.jpg" alt=""></div>
+              <div class="media-body">
+                <p><strong>Joyce Chua</strong> just created a new blog post</p>
+                <span>Mar 13 04:16am</span>
+              </div><!-- media-body -->
+            </div><!-- media -->
+            <div class="media">
+              <div class="az-img-user"><img src="assets/images/img4.jpg" alt=""></div>
+              <div class="media-body">
+                <p><strong>Althea Cabardo</strong> just created a new blog post</p>
+                <span>Mar 13 02:56am</span>
+              </div><!-- media-body -->
+            </div><!-- media -->
+            <div class="media">
+              <div class="az-img-user"><img src="assets/images/img5.jpg" alt=""></div>
+              <div class="media-body">
+                <p><strong>Adrian Monino</strong> added new comment on your photo</p>
+                <span>Mar 12 10:40pm</span>
+              </div><!-- media-body -->
+            </div><!-- media -->
+          </div><!-- az-notification-list -->
+          <div class="dropdown-footer"><a href="">View All Notifications</a></div>
+        </div><!-- dropdown-menu -->
+      </div><!-- az-header-notification -->
+      <div class="dropdown az-profile-menu" ngbDropdown>
+        <a class="az-img-user" id="profileDropdown" ngbDropdownToggle><img src="assets/images/img1.jpg" alt="user"></a>
+        <div class="dropdown-menu" ngbDropdownMenu aria-labelledby="profileDropdown">
+          <div class="az-dropdown-header d-sm-none">
+            <a class="az-header-arrow" (click)="closeMenu($event)"><i class="icon ion-md-arrow-back"></i></a>
+          </div>
+          <div class="az-header-profile">
+            <div class="az-img-user">
+              <img src="assets/images/img1.jpg" alt="">
+            </div><!-- az-img-user -->
+            <h6>Aziana Pechon</h6>
+            <span>Premium Member</span>
+          </div><!-- az-header-profile -->
+
+          <a routerLink="/general-pages/profile" class="dropdown-item"><i class="typcn typcn-user-outline"></i> My Profile</a>
+          <a routerLink="/general-pages/profile" class="dropdown-item"><i class="typcn typcn-edit"></i> Edit Profile</a>
+          <a routerLink="/general-pages/profile" class="dropdown-item"><i class="typcn typcn-time"></i> Activity Logs</a>
+          <a routerLink="/general-pages/profile" class="dropdown-item"><i class="typcn typcn-cog-outline"></i> Account Settings</a>
+          <a routerLink="/general-pages/signin" class="dropdown-item"><i class="typcn typcn-power-outline"></i> Sign Out</a>
+        </div><!-- dropdown-menu -->
+      </div>
+    </div><!-- az-header-right -->
+  </div><!-- container -->
+</div><!-- az-header -->
--- a/frontend/src/app/components/sidebar/sidebar.component.css
+++ b/frontend/src/app/components/sidebar/sidebar.component.css
--- a/frontend/src/app/components/header/header.component.spec.ts
+++ b/frontend/src/app/components/header/header.component.spec.ts
@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/frontend/src/app/components/header/header.component.ts
+++ b/frontend/src/app/components/header/header.component.ts
@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss']
+})
+export class HeaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  closeMenu(e) {
+    e.target.closest('.dropdown').classList.remove('show');
+    e.target.closest('.dropdown .dropdown-menu').classList.remove('show');
+  }
+
+  toggleHeaderMenu(event) {
+    event.preventDefault();
+    document.querySelector('body').classList.toggle('az-header-menu-show');
+  }
+
+}
--- a/frontend/src/app/components/navbar/navbar.component.html
+++ b/frontend/src/app/components/navbar/navbar.component.html
@ -1,137 +0,0 @@
-<nav class=" navbar navbar-expand-lg navbar-absolute navbar-transparent">
-  <div class=" container-fluid">
-    <div class=" navbar-wrapper">
-      <div class=" navbar-toggle d-inline">
-        <button class=" navbar-toggler" type="button" (click)="sidebarToggle()">
-          <span class=" navbar-toggler-bar bar1"> </span>
-          <span class=" navbar-toggler-bar bar2"> </span>
-          <span class=" navbar-toggler-bar bar3"> </span>
-        </button>
-      </div>
-      <a class=" navbar-brand" href="javascript:void(0)"> {{ getTitle() }} </a>
-    </div>
-    <button
-      aria-label="Toggle navigation"
-      class=" navbar-toggler"
-      (click)="collapse()"
-      [attr.aria-expanded]="!isCollapsed"
-      aria-controls="collapseExample"
-      id="navigation"
-      type="button"
-    >
-      <span class=" navbar-toggler-bar navbar-kebab"> </span>
-      <span class=" navbar-toggler-bar navbar-kebab"> </span>
-      <span class=" navbar-toggler-bar navbar-kebab"> </span>
-    </button>
-    <div class=" navbar-collapse" [ngbCollapse]="isCollapsed" id="navigation">
-      <ul class=" navbar-nav ml-auto">
-        <li class=" search-bar input-group">
-          <button
-            class=" btn btn-link"
-            data-target="#searchModal"
-            data-toggle="modal"
-            (click)="open(content)"
-            id="search-button"
-          >
-            <i class=" tim-icons icon-zoom-split"> </i>
-            <span class=" d-lg-none d-md-block"> Search </span>
-          </button>
-        </li>
-        <li class=" nav-item" ngbDropdown>
-          <a
-            class=" nav-link"
-            data-toggle="dropdown"
-            href="javascript:void(0)"
-            ngbDropdownToggle
-          >
-            <div class=" notification d-none d-lg-block d-xl-block"></div>
-            <i class=" tim-icons icon-sound-wave"> </i>
-            <p class=" d-lg-none">Notifications</p>
-          </a>
-          <ul class=" dropdown-menu-right dropdown-navbar" ngbDropdownMenu>
-            <li class=" nav-link">
-              <a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
-                Mike John responded to your email
-              </a>
-            </li>
-            <li class=" nav-link">
-              <a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
-                You have 5 more tasks
-              </a>
-            </li>
-            <li class=" nav-link">
-              <a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
-                Your friend Michael is in town
-              </a>
-            </li>
-            <li class=" nav-link">
-              <a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
-                Another notification
-              </a>
-            </li>
-            <li class=" nav-link">
-              <a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
-                Another one
-              </a>
-            </li>
-          </ul>
-        </li>
-        <li class=" nav-item" ngbDropdown>
-          <a
-            class=" nav-link"
-            data-toggle="dropdown"
-            href="javascript:void(0)"
-            ngbDropdownToggle
-          >
-            <div class=" photo">
-              <img alt="Profile Photo" src="assets/img/anime3.png" />
-            </div>
-            <b class=" caret d-none d-lg-block d-xl-block"> </b>
-            <p class=" d-lg-none">Log out</p>
-          </a>
-          <ul class=" dropdown-navbar" ngbDropdownMenu>
-            <li class=" nav-link">
-              <a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
-                Profile
-              </a>
-            </li>
-            <li class=" nav-link">
-              <a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
-                Settings
-              </a>
-            </li>
-            <li class=" dropdown-divider"></li>
-            <li class=" nav-link">
-              <a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
-                Log out
-              </a>
-            </li>
-          </ul>
-        </li>
-        <li class=" separator d-lg-none"></li>
-      </ul>
-    </div>
-  </div>
-</nav>
-
-<ng-template #content let-modal>
-  <div class=" modal-header">
-    <input
-      class=" form-control"
-      id="inlineFormInputGroup"
-      placeholder="SEARCH"
-      type="text"
-    />
-
-    <button
-      aria-label="Close"
-      class=" close"
-      data-dismiss="modal"
-      type="button"
-      (click)="modal.dismiss('Cross click')"
-    >
-      <i class=" tim-icons icon-simple-remove"> </i>
-    </button>
-  </div>
-
-</ng-template>
--- a/frontend/src/app/components/navbar/navbar.component.spec.ts
+++ b/frontend/src/app/components/navbar/navbar.component.spec.ts
@ -1,24 +0,0 @@
-import { async, ComponentFixture, TestBed } from "@angular/core/testing";
-
-import { NavbarComponent } from "./navbar.component";
-
-describe("NavbarComponent", () => {
-  let component: NavbarComponent;
-  let fixture: ComponentFixture<NavbarComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [NavbarComponent]
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(NavbarComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it("should create", () => {
-    expect(component).toBeTruthy();
-  });
-});
--- a/frontend/src/app/components/navbar/navbar.component.ts
+++ b/frontend/src/app/components/navbar/navbar.component.ts
@ -1,196 +0,0 @@
-import { Component, OnInit, ElementRef, OnDestroy } from "@angular/core";
-import { ROUTES } from "../sidebar/sidebar.component";
-import { Location } from "@angular/common";
-import { Router } from "@angular/router";
-import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
-
-@Component({
-  selector: "app-navbar",
-  templateUrl: "./navbar.component.html",
-  styleUrls: ["./navbar.component.css"]
-})
-export class NavbarComponent implements OnInit, OnDestroy {
-  private listTitles: any[];
-  location: Location;
-  mobile_menu_visible: any = 0;
-  private toggleButton: any;
-  private sidebarVisible: boolean;
-
-  public isCollapsed = true;
-
-  closeResult: string;
-
-  constructor(
-    location: Location,
-    private element: ElementRef,
-    private router: Router,
-    private modalService: NgbModal
-  ) {
-    this.location = location;
-    this.sidebarVisible = false;
-  }
-  // function that adds color white/transparent to the navbar on resize (this is for the collapse)
-   updateColor = () => {
-   var navbar = document.getElementsByClassName('navbar')[0];
-     if (window.innerWidth < 993 && !this.isCollapsed) {
-       navbar.classList.add('bg-white');
-       navbar.classList.remove('navbar-transparent');
-     } else {
-       navbar.classList.remove('bg-white');
-       navbar.classList.add('navbar-transparent');
-     }
-   };
-  ngOnInit() {
-    window.addEventListener("resize", this.updateColor);
-    this.listTitles = ROUTES.filter(listTitle => listTitle);
-    const navbar: HTMLElement = this.element.nativeElement;
-    this.toggleButton = navbar.getElementsByClassName("navbar-toggler")[0];
-    this.router.events.subscribe(event => {
-      this.sidebarClose();
-      var $layer: any = document.getElementsByClassName("close-layer")[0];
-      if ($layer) {
-        $layer.remove();
-        this.mobile_menu_visible = 0;
-      }
-    });
-  }
-
-  collapse() {
-    this.isCollapsed = !this.isCollapsed;
-    const navbar = document.getElementsByTagName("nav")[0];
-    if (!this.isCollapsed) {
-      navbar.classList.remove("navbar-transparent");
-      navbar.classList.add("bg-white");
-    } else {
-      navbar.classList.add("navbar-transparent");
-      navbar.classList.remove("bg-white");
-    }
-  }
-
-  sidebarOpen() {
-    const toggleButton = this.toggleButton;
-    const mainPanel = <HTMLElement>(
-      document.getElementsByClassName("main-panel")[0]
-    );
-    const html = document.getElementsByTagName("html")[0];
-    if (window.innerWidth < 991) {
-      mainPanel.style.position = "fixed";
-    }
-
-    setTimeout(function() {
-      toggleButton.classList.add("toggled");
-    }, 500);
-
-    html.classList.add("nav-open");
-
-    this.sidebarVisible = true;
-  }
-  sidebarClose() {
-    const html = document.getElementsByTagName("html")[0];
-    this.toggleButton.classList.remove("toggled");
-    const mainPanel = <HTMLElement>(
-      document.getElementsByClassName("main-panel")[0]
-    );
-
-    if (window.innerWidth < 991) {
-      setTimeout(function() {
-        mainPanel.style.position = "";
-      }, 500);
-    }
-    this.sidebarVisible = false;
-    html.classList.remove("nav-open");
-  }
-  sidebarToggle() {
-    // const toggleButton = this.toggleButton;
-    // const html = document.getElementsByTagName('html')[0];
-    var $toggle = document.getElementsByClassName("navbar-toggler")[0];
-
-    if (this.sidebarVisible === false) {
-      this.sidebarOpen();
-    } else {
-      this.sidebarClose();
-    }
-    const html = document.getElementsByTagName("html")[0];
-
-    if (this.mobile_menu_visible == 1) {
-      // $('html').removeClass('nav-open');
-      html.classList.remove("nav-open");
-      if ($layer) {
-        $layer.remove();
-      }
-      setTimeout(function() {
-        $toggle.classList.remove("toggled");
-      }, 400);
-
-      this.mobile_menu_visible = 0;
-    } else {
-      setTimeout(function() {
-        $toggle.classList.add("toggled");
-      }, 430);
-
-      var $layer = document.createElement("div");
-      $layer.setAttribute("class", "close-layer");
-
-      if (html.querySelectorAll(".main-panel")) {
-        document.getElementsByClassName("main-panel")[0].appendChild($layer);
-      } else if (html.classList.contains("off-canvas-sidebar")) {
-        document
-          .getElementsByClassName("wrapper-full-page")[0]
-          .appendChild($layer);
-      }
-
-      setTimeout(function() {
-        $layer.classList.add("visible");
-      }, 100);
-
-      $layer.onclick = function() {
-        //asign a function
-        html.classList.remove("nav-open");
-        this.mobile_menu_visible = 0;
-        $layer.classList.remove("visible");
-        setTimeout(function() {
-          $layer.remove();
-          $toggle.classList.remove("toggled");
-        }, 400);
-      }.bind(this);
-
-      html.classList.add("nav-open");
-      this.mobile_menu_visible = 1;
-    }
-  }
-
-  getTitle() {
-    var titlee = this.location.prepareExternalUrl(this.location.path());
-    if (titlee.charAt(0) === "#") {
-      titlee = titlee.slice(1);
-    }
-
-    for (var item = 0; item < this.listTitles.length; item++) {
-      if (this.listTitles[item].path === titlee) {
-        return this.listTitles[item].title;
-      }
-    }
-    return "Dashboard";
-  }
-
-  open(content) {
-    this.modalService.open(content, {windowClass: 'modal-search'}).result.then((result) => {
-      this.closeResult = `Closed with: ${result}`;
-    }, (reason) => {
-      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
-    });
-  }
-
-  private getDismissReason(reason: any): string {
-    if (reason === ModalDismissReasons.ESC) {
-      return 'by pressing ESC';
-    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
-      return 'by clicking on a backdrop';
-    } else {
-      return  `with: ${reason}`;
-    }
-  }
-  ngOnDestroy(){
-     window.removeEventListener("resize", this.updateColor);
-  }
-}
--- a/frontend/src/app/components/shared.module.ts
+++ b/frontend/src/app/components/shared.module.ts
@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { ComponentsSidebarComponent } from './components-sidebar/components-sidebar.component';
+import { RouterModule } from '@angular/router';
+import { UtilitiesSidebarComponent } from './utilities-sidebar/utilities-sidebar.component';
+
+@NgModule({
+  imports: [
+    RouterModule
+  ],
+  declarations: [
+    ComponentsSidebarComponent,
+    UtilitiesSidebarComponent
+  ],
+  exports: [
+    ComponentsSidebarComponent,
+    UtilitiesSidebarComponent
+  ]
+})
+
+export class SharedModule { }
--- a/frontend/src/app/components/sidebar/sidebar.component.html
+++ b/frontend/src/app/components/sidebar/sidebar.component.html
@ -1,24 +0,0 @@
-<div class="logo">
-  <a href="https://www.creative-tim.com?ref=bda-sidebar-logo" class="simple-text logo-mini">
-    <div class="logo-img">
-      <img src="./assets/img/angular2-logo-white.png" />
-    </div>
-  </a>
-  <a href="https://www.creative-tim.com?ref=bda-sidebar-logo" class="simple-text logo-normal">
-    Creative Tim
-  </a>
-</div>
-<div class="sidebar-wrapper">
-  <ul class="nav">
-    <li
-      routerLinkActive="active"
-      *ngFor="let menuItem of menuItems"
-      class="{{ menuItem.class }} nav-item"
-    >
-      <a [routerLink]="[menuItem.path]">
-        <i class="tim-icons  {{ menuItem.icon }}"></i>
-        <p>{{ menuItem.title }}</p>
-      </a>
-    </li>
-  </ul>
-</div>
--- a/frontend/src/app/components/sidebar/sidebar.component.spec.ts
+++ b/frontend/src/app/components/sidebar/sidebar.component.spec.ts
@ -1,24 +0,0 @@
-import { async, ComponentFixture, TestBed } from "@angular/core/testing";
-
-import { SidebarComponent } from "./sidebar.component";
-
-describe("SidebarComponent", () => {
-  let component: SidebarComponent;
-  let fixture: ComponentFixture<SidebarComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [SidebarComponent]
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SidebarComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it("should create", () => {
-    expect(component).toBeTruthy();
-  });
-});
--- a/frontend/src/app/components/sidebar/sidebar.component.ts
+++ b/frontend/src/app/components/sidebar/sidebar.component.ts
@ -1,115 +0,0 @@
-import { Component, OnInit } from "@angular/core";
-
-declare interface RouteInfo {
-  path: string;
-  title: string;
-  icon: string;
-  class: string;
-}
-export const ROUTES: RouteInfo[] = [
-  {
-    path: "/dashboard",
-    title: "Dashboard",
-    icon: "icon-chart-pie-36",
-    class: ""
-  },
-  {
-    path: "/providers",
-    title: "Medical Providers",
-    icon: "icon-cloud-download-93",
-    class: ""
-  },
-  {
-    path: "/patient",
-    title: "Patient Profile",
-    icon: "icon-single-02",
-    class: ""
-  },
-  {
-    path: "/allergies",
-    title: "Allergies",
-    icon: "icon-puzzle-10",
-    class: ""
-  },
-  {
-    path: "/encounters",
-    title: "Encounters",
-    icon: "icon-align-center",
-    class: ""
-  },
-  {
-    path: "/immunizations",
-    title: "Immunizations",
-    icon: "icon-align-center",
-    class: ""
-  },
-  {
-    path: "/instructions",
-    title: "Instructions",
-    icon: "icon-align-center",
-    class: ""
-  },
-  {
-    path: "/medications",
-    title: "Medications",
-    icon: "icon-align-center",
-    class: ""
-  },
-  {
-    path: "/organizations",
-    title: "Organizations",
-    icon: "icon-align-center",
-    class: ""
-  },
-  {
-    path: "/problems",
-    title: "Problems",
-    icon: "icon-align-center",
-    class: ""
-  },
-  {
-    path: "/procedures",
-    title: "Procedures",
-    icon: "icon-align-center",
-    class: ""
-  },
-  {
-    path: "/test_results",
-    title: "Test Results",
-    icon: "icon-align-center",
-    class: ""
-  },
-  {
-    path: "/vitals",
-    title: "Vitals",
-    icon: "icon-align-center",
-    class: ""
-  },
-  {
-    path: "/demographics",
-    title: "Demographics",
-    icon: "icon-align-center",
-    class: ""
-  }
-];
-
-@Component({
-  selector: "app-sidebar",
-  templateUrl: "./sidebar.component.html",
-  styleUrls: ["./sidebar.component.css"]
-})
-export class SidebarComponent implements OnInit {
-  menuItems: any[];
-
-  constructor() {}
-
-  ngOnInit() {
-    this.menuItems = ROUTES.filter(menuItem => menuItem);
-  }
-  isMobileMenu() {
-    if (window.innerWidth > 991) {
-      return false;
-    }
-    return true;
-  }
-}
--- a/frontend/src/app/components/utilities-sidebar/utilities-sidebar.component.html
+++ b/frontend/src/app/components/utilities-sidebar/utilities-sidebar.component.html
@ -0,0 +1,19 @@
+<div class="az-content-left az-content-left-components">
+  <div class="component-item">
+    <label>Tables</label>
+    <nav class="nav flex-column">
+      <a routerLink="/utilities/background" routerLinkActive="active" class="nav-link">Background</a>
+      <a routerLink="/utilities/border" routerLinkActive="active" class="nav-link">Border</a>
+      <a routerLink="/utilities/display" routerLinkActive="active" class="nav-link">Display</a>
+      <a routerLink="/utilities/flex" routerLinkActive="active" class="nav-link">Flex</a>
+      <a routerLink="/utilities/height" routerLinkActive="active" class="nav-link">Height</a>
+      <a routerLink="/utilities/margin" routerLinkActive="active" class="nav-link">Margin</a>
+      <a routerLink="/utilities/padding" routerLinkActive="active"  class="nav-link">Padding</a>
+      <a routerLink="/utilities/position" routerLinkActive="active" class="nav-link">Position</a>
+      <a routerLink="/utilities/typography" routerLinkActive="active" class="nav-link">Typography</a>
+      <a routerLink="/utilities/width" routerLinkActive="active" class="nav-link">Width</a>
+      <a routerLink="/utilities/extras" routerLinkActive="active" class="nav-link">Extras</a>
+    </nav>
+  </div><!-- component-item -->
+
+</div><!-- az-content-left -->
--- a/frontend/src/app/components/utilities-sidebar/utilities-sidebar.component.scss
+++ b/frontend/src/app/components/utilities-sidebar/utilities-sidebar.component.scss
--- a/frontend/src/app/components/utilities-sidebar/utilities-sidebar.component.spec.ts
+++ b/frontend/src/app/components/utilities-sidebar/utilities-sidebar.component.spec.ts
@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UtilitiesSidebarComponent } from './utilities-sidebar.component';
+
+describe('UtilitiesSidebarComponent', () => {
+  let component: UtilitiesSidebarComponent;
+  let fixture: ComponentFixture<UtilitiesSidebarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UtilitiesSidebarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UtilitiesSidebarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/frontend/src/app/components/utilities-sidebar/utilities-sidebar.component.ts
+++ b/frontend/src/app/components/utilities-sidebar/utilities-sidebar.component.ts
@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-utilities-sidebar',
+  templateUrl: './utilities-sidebar.component.html',
+  styleUrls: ['./utilities-sidebar.component.scss']
+})
+export class UtilitiesSidebarComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
--- a/frontend/src/app/layouts/admin-layout/admin-layout.component.html
+++ b/frontend/src/app/layouts/admin-layout/admin-layout.component.html
@ -1,44 +0,0 @@
-<div class="wrapper">
-  <div class="sidebar"><app-sidebar></app-sidebar></div>
-  <div class="main-panel">
-    <app-navbar></app-navbar>
-    <router-outlet></router-outlet>
-    <app-footer></app-footer>
-  </div>
-</div>
-<div class=" fixed-plugin">
-  <div class=" show-dropdown" ngbDropdown>
-    <a data-toggle="dropdown" ngbDropdownToggle>
-      <i class=" fa fa-cog fa-2x"> </i>
-    </a>
-    <ul ngbDropdownMenu>
-      <li class=" header-title">Sidebar Background</li>
-      <li class=" adjustments-line">
-        <a class=" switch-trigger background-color" href="javascript:void(0)">
-          <div class=" badge-colors text-center">
-            <span
-              class=" badge filter badge-danger"
-              [ngClass]="{'active':sidebarColor==='red'}" (click)="changeSidebarColor('red')"
-            >
-            </span>
-            <span
-              class=" badge filter badge-primary"
-              [ngClass]="{'active':sidebarColor==='primary'}" (click)="changeSidebarColor('primary')"
-            >
-            </span>
-            <span class=" badge filter badge-info" [ngClass]="{'active':sidebarColor==='blue'}" (click)="changeSidebarColor('blue')"> </span>
-            <span class=" badge filter badge-success" [ngClass]="{'active':sidebarColor==='green'}" (click)="changeSidebarColor('green')">
-            </span>
-          </div>
-          <div class=" clearfix"></div>
-        </a>
-      </li>
-      <li class=" adjustments-line text-center color-change">
-        <span class=" color-label"> LIGHT MODE </span>
-        <span class=" badge light-badge mr-2" (click)="changeDashboardColor('white-content')"> </span>
-        <span class=" badge dark-badge ml-2" (click)="changeDashboardColor('black-content')"> </span>
-        <span class=" color-label"> DARK MODE </span>
-      </li>
-    </ul>
-  </div>
-</div>
--- a/frontend/src/app/layouts/admin-layout/admin-layout.component.spec.ts
+++ b/frontend/src/app/layouts/admin-layout/admin-layout.component.spec.ts
@ -1,24 +0,0 @@
-import { async, ComponentFixture, TestBed } from "@angular/core/testing";
-
-import { AdminLayoutComponent } from "./admin-layout.component";
-
-describe("AdminLayoutComponent", () => {
-  let component: AdminLayoutComponent;
-  let fixture: ComponentFixture<AdminLayoutComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [AdminLayoutComponent]
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(AdminLayoutComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it("should create", () => {
-    expect(component).toBeTruthy();
-  });
-});
--- a/frontend/src/app/layouts/admin-layout/admin-layout.component.ts
+++ b/frontend/src/app/layouts/admin-layout/admin-layout.component.ts
@ -1,35 +0,0 @@
-import { Component, OnInit } from "@angular/core";
-
-@Component({
-  selector: "app-admin-layout",
-  templateUrl: "./admin-layout.component.html",
-  styleUrls: ["./admin-layout.component.scss"]
-})
-export class AdminLayoutComponent implements OnInit {
-  public sidebarColor: string = "red";
-
-  constructor() {}
-  changeSidebarColor(color){
-    var sidebar = document.getElementsByClassName('sidebar')[0];
-    var mainPanel = document.getElementsByClassName('main-panel')[0];
-
-    this.sidebarColor = color;
-
-    if(sidebar != undefined){
-        sidebar.setAttribute('data',color);
-    }
-    if(mainPanel != undefined){
-        mainPanel.setAttribute('data',color);
-    }
-  }
-  changeDashboardColor(color){
-    var body = document.getElementsByTagName('body')[0];
-    if (body && color === 'white-content') {
-        body.classList.add(color);
-    }
-    else if(body.classList.contains('white-content')) {
-      body.classList.remove('white-content');
-    }
-  }
-  ngOnInit() {}
-}
--- a/frontend/src/app/layouts/admin-layout/admin-layout.module.ts
+++ b/frontend/src/app/layouts/admin-layout/admin-layout.module.ts
@ -1,29 +0,0 @@
-import { NgModule } from "@angular/core";
-import { HttpClientModule } from "@angular/common/http";
-import { RouterModule } from "@angular/router";
-import { CommonModule } from "@angular/common";
-import { FormsModule } from "@angular/forms";
-
-import { AdminLayoutRoutes } from "./admin-layout.routing";
-import { DashboardComponent } from "../../pages/dashboard/dashboard.component";
-import { PatientComponent } from "../../pages/patient/patient.component";
-import { MedicalProvidersComponent } from "../../pages/medical-providers/medical-providers.component";
-
-
-import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
-
-@NgModule({
-  imports: [
-    CommonModule,
-    RouterModule.forChild(AdminLayoutRoutes),
-    FormsModule,
-    HttpClientModule,
-    NgbModule,
-  ],
-  declarations: [
-    DashboardComponent,
-    PatientComponent,
-    MedicalProvidersComponent
-  ]
-})
-export class AdminLayoutModule {}
--- a/frontend/src/app/layouts/admin-layout/admin-layout.routing.ts
+++ b/frontend/src/app/layouts/admin-layout/admin-layout.routing.ts
@ -1,11 +0,0 @@
-import { Routes } from "@angular/router";
-
-import { DashboardComponent } from "../../pages/dashboard/dashboard.component";
-import { PatientComponent } from "../../pages/patient/patient.component";
-import {MedicalProvidersComponent} from '../../pages/medical-providers/medical-providers.component';
-
-export const AdminLayoutRoutes: Routes = [
-  { path: "dashboard", component: DashboardComponent },
-  { path: "patient", component: PatientComponent },
-  { path: "providers", component: MedicalProvidersComponent },
-];
--- a/frontend/src/app/pages/dashboard/dashboard.component.html
+++ b/frontend/src/app/pages/dashboard/dashboard.component.html
@ -1,384 +1,392 @@

-<div class=" content">
-  <div class=" row">
-    <div class=" col-12">
-      <div class=" card card-chart">
-        <div class=" card-header">
-          <div class=" row">
-            <div class=" col-sm-6 text-left">
-              <h5 class=" card-category">Total Shipments</h5>
-              <h2 class=" card-title">Performance</h2>
+<div class="az-content az-content-dashboard">
+  <div class="container">
+    <div class="az-content-body">
+      <div class="az-dashboard-one-title">
+        <div>
+          <h2 class="az-dashboard-title">Hi, welcome back!</h2>
+          <p class="az-dashboard-text">Your web analytics dashboard template.</p>
        </div>
-            <div class=" col-sm-6">
-              <div
-                class=" btn-group btn-group-toggle float-right"
-                data-toggle="buttons"
-              >
-                <label class=" btn btn-sm btn-danger btn-simple" (click)="data=datasets[0];updateOptions();clicked=true;clicked1=false;clicked2=false" [ngClass]="{'active':clicked===true}">
-                  <input checked="checked" name="options" type="radio" />
+        <div class="az-content-header-right">
+          <div class="media">
+            <div class="media-body">
+              <label>Start Date</label>
+              <h6>Oct 10, 2018</h6>
+            </div><!-- media-body -->
+          </div><!-- media -->
+          <div class="media">
+            <div class="media-body">
+              <label>End Date</label>
+              <h6>Oct 23, 2018</h6>
+            </div><!-- media-body -->
+          </div><!-- media -->
+          <div class="media">
+            <div class="media-body">
+              <label>Event Category</label>
+              <h6>All Categories</h6>
+            </div><!-- media-body -->
+          </div><!-- media -->
+          <a href="" class="btn btn-purple">Export</a>
+        </div>
+      </div><!-- az-dashboard-one-title -->

-                  <span
-                    class=" d-none d-sm-block d-md-block d-lg-block d-xl-block"
-                  >
-                    Accounts
-                  </span>
-                  <span class=" d-block d-sm-none">
-                    <i class=" tim-icons icon-single-02"> </i>
-                  </span>
-                </label>
-                <label class=" btn btn-sm btn-danger btn-simple" (click)="data=datasets[1];updateOptions();clicked=false;clicked1=true;clicked2=false" [ngClass]="{'active':clicked1===true}">
-                  <input
-                    class=" d-none d-sm-none"
-                    name="options"
-                    type="radio"
-                  />
+      <div class="az-dashboard-nav">
+        <nav class="nav">
+          <a class="nav-link active" routerLink="/">Overview</a>
+          <a class="nav-link" routerLink="/">Audiences</a>
+          <a class="nav-link" routerLink="/">Demographics</a>
+          <a class="nav-link" routerLink="/">More</a>
+        </nav>

-                  <span
-                    class=" d-none d-sm-block d-md-block d-lg-block d-xl-block"
-                  >
-                    Purchases
-                  </span>
-                  <span class=" d-block d-sm-none">
-                    <i class=" tim-icons icon-gift-2"> </i>
-                  </span>
-                </label>
-                <label class=" btn btn-sm btn-danger btn-simple" (click)="data=datasets[2];updateOptions();clicked=false;clicked1=false;clicked2=true" [ngClass]="{'active':clicked2===true}">
-                  <input class=" d-none" name="options" type="radio" />
+        <nav class="nav">
+          <a class="nav-link" routerLink="/"><i class="far fa-save"></i> Save Report</a>
+          <a class="nav-link" routerLink="/"><i class="far fa-file-pdf"></i> Export to PDF</a>
+          <a class="nav-link" routerLink="/"><i class="far fa-envelope"></i>Send to Email</a>
+          <a class="nav-link" routerLink="/"><i class="fas fa-ellipsis-h"></i></a>
+        </nav>
+      </div>

-                  <span
-                    class=" d-none d-sm-block d-md-block d-lg-block d-xl-block"
-                  >
-                    Sessions
-                  </span>
-                  <span class=" d-block d-sm-none">
-                    <i class=" tim-icons icon-tap-02"> </i>
-                  </span>
-                </label>
+      <div class="row row-sm mg-b-20">
+        <div class="col-lg-7 ht-lg-100p">
+          <div class="card card-dashboard-one">
+            <div class="card-header">
+              <div>
+                <h6 class="card-title">Website Audience Metrics</h6>
+                <p class="card-text">Audience to which the users belonged while on the current date range.</p>
+              </div>
+              <div class="btn-group">
+                <button class="btn active">Day</button>
+                <button class="btn">Week</button>
+                <button class="btn">Month</button>
+              </div>
+            </div><!-- card-header -->
+            <div class="card-body">
+              <div class="card-body-top">
+                <div>
+                  <label class="mg-b-0">Users</label>
+                  <h2>13,956</h2>
+                </div>
+                <div>
+                  <label class="mg-b-0">Bounce Rate</label>
+                  <h2>33.50%</h2>
+                </div>
+                <div>
+                  <label class="mg-b-0">Page Views</label>
+                  <h2>83,123</h2>
+                </div>
+                <div>
+                  <label class="mg-b-0">Sessions</label>
+                  <h2>16,869</h2>
+                </div>
+              </div><!-- card-body-top -->
+              <div class="page-view-chart-wrapper">
+                <canvas baseChart [chartType]="'line'" [datasets]="pageViewChartData" [labels]="pageViewChartLabels" [options]="pageViewChartOptions" [colors]="pageViewChartColors"></canvas>
+              </div>
+              <!-- flot-chart-wrapper -->
+            </div><!-- card-body -->
+          </div><!-- card -->
+        </div><!-- col -->
+        <div class="col-lg-5 mg-t-20 mg-lg-t-0">
+          <div class="row row-sm">
+            <div class="col-sm-6">
+              <div class="card card-dashboard-two">
+                <div class="card-header">
+                  <h6>33.50% <i class="icon ion-md-trending-up tx-success"></i> <small>18.02%</small></h6>
+                  <p>Bounce Rate</p>
+                </div><!-- card-header -->
+                <div class="card-body">
+                  <div class="bounce-rate-chart-wrapper">
+                    <canvas baseChart [chartType]="'line'" [datasets]="bounceRateChartData" [labels]="bounceRateChartLabels" [options]="bounceRateChartOptions" [colors]="bounceRateChartColors"></canvas>
+                  </div>
+                </div><!-- card-body -->
+              </div><!-- card -->
+            </div><!-- col -->
+            <div class="col-sm-6 mg-t-20 mg-sm-t-0">
+              <div class="card card-dashboard-two">
+                <div class="card-header">
+                  <h6>86k <i class="icon ion-md-trending-down tx-danger"></i> <small>0.86%</small></h6>
+                  <p>Total Users</p>
+                </div><!-- card-header -->
+                <div class="card-body">
+                  <div class="users-bar-chart-wrapper">
+                    <canvas baseChart [chartType]="'bar'" [datasets]="usersBarChartData" [labels]="usersBarChartLabels" [options]="usersBarChartOptions" [colors]="usersBarChartColors"></canvas>
+                  </div><!-- chart-wrapper -->
+                </div><!-- card-body -->
+              </div><!-- card -->
+            </div><!-- col -->
+            <div class="col-sm-12 mg-t-20">
+              <div class="card card-dashboard-three">
+                <div class="card-header">
+                  <p>All Sessions</p>
+                  <h6>16,869 <small class="tx-success"><i class="icon ion-md-arrow-up"></i> 2.87%</small></h6>
+                  <small>The total number of sessions within the date range. It is the period time a user is actively engaged with your website, page or app, etc.</small>
+                </div><!-- card-header -->
+                <div class="card-body">
+                  <div class="sessions-chart-wrapper">
+                    <canvas baseChart [chartType]="'bar'" [datasets]="sessionsChartData" [labels]="sessionsChartLabels" [options]="sessionsChartOptions" [colors]="sessionsChartColors"></canvas>
+                  </div><!-- chart-wrapper -->
                </div>
              </div>
            </div>
+          </div><!-- row -->
+        </div><!--col -->
+      </div><!-- row -->
+
+      <div class="row row-sm mg-b-20">
+        <div class="col-lg-4">
+          <div class="card card-dashboard-pageviews">
+            <div class="card-header">
+              <h6 class="card-title">Page Views by Page Title</h6>
+              <p class="card-text">This report is based on 100% of sessions.</p>
+            </div><!-- card-header -->
+            <div class="card-body">
+              <div class="az-list-item">
+                <div>
+                  <h6>Admin Home</h6>
+                  <span>/demo/admin/index.html</span>
                </div>
-        <div class=" card-body">
-          <div class=" chart-area"><canvas id="chartBig1"> </canvas></div>
+                <div>
+                  <h6 class="tx-primary">7,755</h6>
+                  <span>31.74% (-100.00%)</span>
+                </div>
+              </div><!-- list-group-item -->
+              <div class="az-list-item">
+                <div>
+                  <h6>Form Elements</h6>
+                  <span>/demo/admin/forms.html</span>
+                </div>
+                <div>
+                  <h6 class="tx-primary">5,215</h6>
+                  <span>28.53% (-100.00%)</span>
+                </div>
+              </div><!-- list-group-item -->
+              <div class="az-list-item">
+                <div>
+                  <h6>Utilities</h6>
+                  <span>/demo/admin/util.html</span>
+                </div>
+                <div>
+                  <h6 class="tx-primary">4,848</h6>
+                  <span>25.35% (-100.00%)</span>
+                </div>
+              </div><!-- list-group-item -->
+              <div class="az-list-item">
+                <div>
+                  <h6>Form Validation</h6>
+                  <span>/demo/admin/validation.html</span>
+                </div>
+                <div>
+                  <h6 class="tx-primary">3,275</h6>
+                  <span>23.17% (-100.00%)</span>
+                </div>
+              </div><!-- list-group-item -->
+              <div class="az-list-item">
+                <div>
+                  <h6>Modals</h6>
+                  <span>/demo/admin/modals.html</span>
+                </div>
+                <div>
+                  <h6 class="tx-primary">3,003</h6>
+                  <span>22.21% (-100.00%)</span>
+                </div>
+              </div><!-- list-group-item -->
+            </div><!-- card-body -->
+          </div><!-- card -->
+
+        </div><!-- col -->
+        <div class="col-lg-8 mg-t-20 mg-lg-t-0">
+          <div class="card card-dashboard-four">
+            <div class="card-header">
+              <h6 class="card-title">Sessions by Channel</h6>
+            </div><!-- card-header -->
+            <div class="card-body row">
+              <div class="col-md-6 d-flex align-items-center">
+                <div class="chart">
+                  <canvas baseChart [chartType]="'doughnut'" [datasets]="sessionsByChannelChartData" [labels]="sessionsByChannelChartLabels" [options]="sessionsByChannelChartOptions" height="210"></canvas>
+                </div>
+              </div><!-- col -->
+              <div class="col-md-6 col-lg-5 mg-lg-l-auto mg-t-20 mg-md-t-0">
+                <div class="az-traffic-detail-item">
+                  <div>
+                    <span>Organic Search</span>
+                    <span>1,320 <span>(25%)</span></span>
+                  </div>
+                  <div class="progress">
+                    <div class="progress-bar bg-purple wd-25p" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+                  </div><!-- progress -->
+                </div>
+                <div class="az-traffic-detail-item">
+                  <div>
+                    <span>Email</span>
+                    <span>987 <span>(20%)</span></span>
+                  </div>
+                  <div class="progress">
+                    <div class="progress-bar bg-primary wd-20p" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
+                  </div><!-- progress -->
+                </div>
+                <div class="az-traffic-detail-item">
+                  <div>
+                    <span>Referral</span>
+                    <span>2,010 <span>(30%)</span></span>
+                  </div>
+                  <div class="progress">
+                    <div class="progress-bar bg-info wd-30p" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
+                  </div><!-- progress -->
+                </div>
+                <div class="az-traffic-detail-item">
+                  <div>
+                    <span>Social</span>
+                    <span>654 <span>(15%)</span></span>
+                  </div>
+                  <div class="progress">
+                    <div class="progress-bar bg-teal wd-15p" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
+                  </div><!-- progress -->
+                </div>
+                <div class="az-traffic-detail-item">
+                  <div>
+                    <span>Other</span>
+                    <span>400 <span>(10%)</span></span>
+                  </div>
+                  <div class="progress">
+                    <div class="progress-bar bg-gray-500 wd-10p" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
+                  </div><!-- progress -->
+                </div>
+              </div><!-- col -->
+            </div><!-- card-body -->
+          </div><!-- card-dashboard-four -->
+        </div><!-- col -->
+      </div><!-- row -->
+
+      <div class="row row-sm mg-b-20 mg-lg-b-0">
+        <div class="col-lg-5 col-xl-4">
+          <div class="row row-sm">
+            <div class="col-md-6 col-lg-12 mg-b-20 mg-md-b-0 mg-lg-b-20">
+              <div class="card card-dashboard-five">
+                <div class="card-header">
+                  <h6 class="card-title">Acquisition</h6>
+                  <span class="card-text">Tells you where your visitors originated from, such as search engines, social networks or website referrals.</span>
+                </div><!-- card-header -->
+                <div class="card-body row row-sm">
+                  <div class="col-6 d-sm-flex align-items-center">
+                    <div class="card-chart bg-primary">
+                      <canvas baseChart class="w-50" [chartType]="'bar'" [datasets]="acquisitionOneChartData" [labels]="acquisitionOneChartLabels" [options]="acquisitionOneChartOptions" [colors]="acquisitionOneChartColors"></canvas>
+                    </div>
+                    <div>
+                      <label>Bounce Rate</label>
+                      <h4>33.50%</h4>
+                    </div>
+                  </div><!-- col -->
+                  <div class="col-6 d-sm-flex align-items-center">
+                    <div class="card-chart bg-purple">
+                      <canvas baseChart class="w-50" [chartType]="'bar'" [datasets]="acquisitionTwoChartData" [labels]="acquisitionTwoChartLabels" [options]="acquisitionTwoChartOptions" [colors]="acquisitionTwoChartColors"></canvas>
+                    </div>
+                    <div>
+                      <label>Sessions</label>
+                      <h4>9,065</h4>
+                    </div>
+                  </div><!-- col -->
+                </div><!-- card-body -->
+              </div><!-- card-dashboard-five -->
+            </div><!-- col -->
+            <div class="col-md-6 col-lg-12">
+              <div class="card card-dashboard-five">
+                <div class="card-header">
+                  <h6 class="card-title">Sessions</h6>
+                  <span class="card-text"> A session is the period time a user is actively engaged with your website, app, etc.</span>
+                </div><!-- card-header -->
+                <div class="card-body row row-sm">
+                  <div class="col-6">
+                    <div class="d-flex align-items-center">
+                      <div class="mg-b-10 mg-sm-b-0 mg-sm-r-10 wd-50">
+                        <canvas baseChart [chartType]="'doughnut'" [datasets]="sessionsChartOneData" [labels]="sessionsChartOneLabels" [options]="sessionsChartOneOptions" height="45"></canvas>
+                      </div>
+                      <div>
+                        <label>% New Sessions</label>
+                        <h4>26.80%</h4>
                      </div>
                    </div>
+                  </div><!-- col -->
+                  <div class="col-6 d-flex align-items-center">
+                    <div class="d-flex align-items-center">
+                      <div class="mg-b-10 mg-sm-b-0 mg-sm-r-10 wd-50">
+                        <canvas baseChart [chartType]="'doughnut'" [datasets]="sessionsChartTwoData" [labels]="sessionsChartTwoLabels" [options]="sessionsChartTwoOptions" height="45"></canvas>
+                      </div>
+                      <div>
+                        <label>Pages/Session</label>
+                        <h4>1,005</h4>
                      </div>
                    </div>
-  <div class=" row">
-    <div class=" col-lg-4">
-      <div class=" card card-chart">
-        <div class=" card-header">
-          <h5 class=" card-category">Total Shipments</h5>
-          <h3 class=" card-title">
-            <i class=" tim-icons icon-bell-55 text-danger-states"> </i> 763,215
-          </h3>
-        </div>
-        <div class=" card-body">
-          <div class=" chart-area"><canvas id="chartLineRed"> </canvas></div>
-        </div>
-      </div>
-    </div>
-    <div class=" col-lg-4">
-      <div class=" card card-chart">
-        <div class=" card-header">
-          <h5 class=" card-category">Daily Sales</h5>
-          <h3 class=" card-title">
-            <i class=" tim-icons icon-delivery-fast text-info"> </i> 3,500€
-          </h3>
-        </div>
-        <div class=" card-body">
-          <div class=" chart-area"><canvas id="CountryChart"> </canvas></div>
-        </div>
-      </div>
-    </div>
-    <div class=" col-lg-4">
-      <div class=" card card-chart">
-        <div class=" card-header">
-          <h5 class=" card-category">Completed Tasks</h5>
-          <h3 class=" card-title">
-            <i class=" tim-icons icon-send text-success"> </i> 12,100K
-          </h3>
-        </div>
-        <div class=" card-body">
-          <div class=" chart-area"><canvas id="chartLineGreen"> </canvas></div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class=" row">
-    <div class=" col-lg-6 col-md-12">
-      <div class=" card card-tasks">
-        <div class=" card-header">
-          <h6 class=" title d-inline">Tasks(5)</h6>
-          <p class=" card-category d-inline">today</p>
-          <div ngbDropdown>
-            <button
-              class=" btn btn-link btn-icon"
-              data-toggle="dropdown"
-              ngbDropdownToggle
-              type="button"
-            >
-              <i class=" tim-icons icon-settings-gear-63"> </i>
-            </button>
-            <div
-              aria-labelledby="dropdownMenuLink"
-              class=" dropdown-menu-right"
-              ngbDropdownMenu
-            >
-              <a href="javascript:void(0)" ngbDropdownItem> Action </a>
-              <a href="javascript:void(0)" ngbDropdownItem> Another action </a>
-              <a href="javascript:void(0)" ngbDropdownItem> Something else </a>
-            </div>
-          </div>
-        </div>
-        <div class=" card-body">
-          <div class=" table-full-width table-responsive">
-            <table class=" table">
-              <tbody>
+                  </div><!-- col -->
+                </div><!-- card-body -->
+              </div><!-- card-dashboard-five -->
+            </div><!-- col -->
+          </div><!-- row -->
+        </div><!-- col-lg-3 -->
+        <div class="col-lg-7 col-xl-8 mg-t-20 mg-lg-t-0">
+          <div class="card card-table-one">
+            <h6 class="card-title">What pages do your users visit</h6>
+            <p class="az-content-text mg-b-20">Part of this date range occurs before the new users metric had been calculated, so the old users metric is displayed.</p>
+            <div class="table-responsive">
+              <table class="table">
+                <thead>
                  <tr>
-                <td>
-                  <div class=" form-check">
-                    <label class=" form-check-label">
-                      <input
-                        class=" form-check-input"
-                        type="checkbox"
-                        value=""
-                      />
-
-                      <span class=" form-check-sign">
-                          <span class=" check"> </span>
-                        </span>
-                    </label>
-                  </div>
-                </td>
-                <td>
-                  <p class=" title">Update the Documentation</p>
-                  <p class=" text-muted">
-                    Dwuamish Head, Seattle, WA 8:47 AM
-                  </p>
-                </td>
-                <td class=" td-actions text-right">
-                  <button class=" btn btn-link" type="button" placement="left" ngbTooltip="Edit Task" container="body" >
-                    <i class=" tim-icons icon-pencil"> </i>
-                  </button>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <div class=" form-check">
-                    <label class=" form-check-label">
-                      <input
-                        checked=""
-                        class=" form-check-input"
-                        type="checkbox"
-                        value=""
-                      />
-
-                      <span class=" form-check-sign">
-                          <span class=" check"> </span>
-                        </span>
-                    </label>
-                  </div>
-                </td>
-                <td>
-                  <p class=" title">GDPR Compliance</p>
-                  <p class=" text-muted">
-                    The GDPR is a regulation that requires businesses to
-                    protect the personal data and privacy of Europe citizens
-                    for transactions that occur within EU member states.
-                  </p>
-                </td>
-                <td class=" td-actions text-right">
-                  <button class=" btn btn-link" type="button" placement="left" ngbTooltip="Edit Task" container="body" >
-                    <i class=" tim-icons icon-pencil"> </i>
-                  </button>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <div class=" form-check">
-                    <label class=" form-check-label">
-                      <input
-                        class=" form-check-input"
-                        type="checkbox"
-                        value=""
-                      />
-
-                      <span class=" form-check-sign">
-                          <span class=" check"> </span>
-                        </span>
-                    </label>
-                  </div>
-                </td>
-                <td>
-                  <p class=" title">Solve the issues</p>
-                  <p class=" text-muted">
-                    Fifty percent of all respondents said they would be more
-                    likely to shop at a company
-                  </p>
-                </td>
-                <td class=" td-actions text-right">
-                  <button class=" btn btn-link" type="button" placement="left" ngbTooltip="Edit Task" container="body" >
-                    <i class=" tim-icons icon-pencil"> </i>
-                  </button>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <div class=" form-check">
-                    <label class=" form-check-label">
-                      <input
-                        class=" form-check-input"
-                        type="checkbox"
-                        value=""
-                      />
-
-                      <span class=" form-check-sign">
-                          <span class=" check"> </span>
-                        </span>
-                    </label>
-                  </div>
-                </td>
-                <td>
-                  <p class=" title">Release v2.0.0</p>
-                  <p class=" text-muted">
-                    Ra Ave SW, Seattle, WA 98116, SUA 11:19 AM
-                  </p>
-                </td>
-                <td class=" td-actions text-right">
-                  <button class=" btn btn-link" type="button" placement="left" ngbTooltip="Edit Task" container="body"  >
-                    <i class=" tim-icons icon-pencil"> </i>
-                  </button>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <div class=" form-check">
-                    <label class=" form-check-label">
-                      <input
-                        class=" form-check-input"
-                        type="checkbox"
-                        value=""
-                      />
-
-                      <span class=" form-check-sign">
-                          <span class=" check"> </span>
-                        </span>
-                    </label>
-                  </div>
-                </td>
-                <td>
-                  <p class=" title">Export the processed files</p>
-                  <p class=" text-muted">
-                    The report also shows that consumers will not easily
-                    forgive a company once a breach exposing their personal
-                    data occurs.
-                  </p>
-                </td>
-                <td class=" td-actions text-right">
-                  <button class=" btn btn-link" type="button" placement="left" ngbTooltip="Edit Task" container="body" >
-                    <i class=" tim-icons icon-pencil"> </i>
-                  </button>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <div class=" form-check">
-                    <label class=" form-check-label">
-                      <input
-                        class=" form-check-input"
-                        type="checkbox"
-                        value=""
-                      />
-
-                      <span class=" form-check-sign">
-                          <span class=" check"> </span>
-                        </span>
-                    </label>
-                  </div>
-                </td>
-                <td>
-                  <p class=" title">Arival at export process</p>
-                  <p class=" text-muted">
-                    Capitol Hill, Seattle, WA 12:34 AM
-                  </p>
-                </td>
-                <td class=" td-actions text-right">
-                  <button class=" btn btn-link" type="button" placement="left" ngbTooltip="Edit Task" container="body" >
-                    <i class=" tim-icons icon-pencil"> </i>
-                  </button>
-                </td>
-              </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class=" col-lg-6 col-md-12">
-      <div class=" card">
-        <div class=" card-header">
-          <h4 class=" card-title">Simple Table</h4>
-        </div>
-        <div class=" card-body">
-          <div class=" table-responsive">
-            <table class=" table tablesorter" id="">
-              <thead class=" text-primary">
-              <tr>
-                <th>Name</th>
-                <th>Country</th>
-                <th>City</th>
-                <th class=" text-center">Salary</th>
+                    <th class="wd-5p">&nbsp;</th>
+                    <th class="wd-45p">Country</th>
+                    <th>Entrances</th>
+                    <th>Bounce Rate</th>
+                    <th>Exits</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
-                <td>Dakota Rice</td>
-                <td>Niger</td>
-                <td>Oud-Turnhout</td>
-                <td class=" text-center">$36,738</td>
+                    <td><i class="flag-icon flag-icon-us flag-icon-squared"></i></td>
+                    <td><strong>United States</strong></td>
+                    <td><strong>134</strong> (1.51%)</td>
+                    <td>33.58%</td>
+                    <td>15.47%</td>
                  </tr>
                  <tr>
-                <td>Minerva Hooper</td>
-                <td>CuraÃ§ao</td>
-                <td>Sinaai-Waas</td>
-                <td class=" text-center">$23,789</td>
+                    <td><i class="flag-icon flag-icon-gb flag-icon-squared"></i></td>
+                    <td><strong>United Kingdom</strong></td>
+                    <td><strong>290</strong> (3.30%)</td>
+                    <td>9.22%</td>
+                    <td>7.99%</td>
                  </tr>
                  <tr>
-                <td>Sage Rodriguez</td>
-                <td>Netherlands</td>
-                <td>Baileux</td>
-                <td class=" text-center">$56,142</td>
+                    <td><i class="flag-icon flag-icon-in flag-icon-squared"></i></td>
+                    <td><strong>India</strong></td>
+                    <td><strong>250</strong> (3.00%)</td>
+                    <td>20.75%</td>
+                    <td>2.40%</td>
                  </tr>
                  <tr>
-                <td>Philip Chaney</td>
-                <td>Korea, South</td>
-                <td>Overland Park</td>
-                <td class=" text-center">$38,735</td>
+                    <td><i class="flag-icon flag-icon-ca flag-icon-squared"></i></td>
+                    <td><strong>Canada</strong></td>
+                    <td><strong>216</strong> (2.79%)</td>
+                    <td>32.07%</td>
+                    <td>15.09%</td>
                  </tr>
                  <tr>
-                <td>Doris Greene</td>
-                <td>Malawi</td>
-                <td>Feldkirchen in KÃ¤rnten</td>
-                <td class=" text-center">$63,542</td>
+                    <td><i class="flag-icon flag-icon-fr flag-icon-squared"></i></td>
+                    <td><strong>France</strong></td>
+                    <td><strong>216</strong> (2.79%)</td>
+                    <td>32.07%</td>
+                    <td>15.09%</td>
                  </tr>
                  <tr>
-                <td>Mason Porter</td>
-                <td>Chile</td>
-                <td>Gloucester</td>
-                <td class=" text-center">$78,615</td>
-              </tr>
-              <tr>
-                <td>Jon Porter</td>
-                <td>Portugal</td>
-                <td>Gloucester</td>
-                <td class=" text-center">$98,615</td>
+                    <td><i class="flag-icon flag-icon-ph flag-icon-squared"></i></td>
+                    <td><strong>Philippines</strong></td>
+                    <td><strong>197</strong> (2.12%)</td>
+                    <td>32.07%</td>
+                    <td>15.09%</td>
                  </tr>
                </tbody>
              </table>
+            </div><!-- table-responsive -->
+          </div><!-- card -->
+        </div><!-- col-lg -->
+
+      </div><!-- row -->
+    </div><!-- az-content-body -->
  </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
+</div><!-- az-content -->
--- a/frontend/src/app/pages/dashboard/dashboard.component.scss
+++ b/frontend/src/app/pages/dashboard/dashboard.component.scss
@ -0,0 +1,5 @@
+.page-view-chart-wrapper {
+  canvas {
+    width: 100%;
+  }
+}
--- a/frontend/src/app/pages/dashboard/dashboard.component.spec.ts
+++ b/frontend/src/app/pages/dashboard/dashboard.component.spec.ts
@ -1,4 +1,4 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';

 import { DashboardComponent } from './dashboard.component';

@ -6,12 +6,14 @@ describe('DashboardComponent', () => {
  let component: DashboardComponent;
  let fixture: ComponentFixture<DashboardComponent>;

-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
      declarations: [ DashboardComponent ]
    })
    .compileComponents();
+  }));

+  beforeEach(() => {
    fixture = TestBed.createComponent(DashboardComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
--- a/frontend/src/app/pages/dashboard/dashboard.component.ts
+++ b/frontend/src/app/pages/dashboard/dashboard.component.ts
@ -1,470 +1,482 @@
-import { Component, OnInit } from "@angular/core";
-import Chart from 'chart.js';
+import { Component, OnInit } from '@angular/core';

@Component({
-  selector: "app-dashboard",
-  templateUrl: "dashboard.component.html"
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss']
 })
 export class DashboardComponent implements OnInit {
-  public canvas : any;
-  public ctx;
-  public datasets: any;
-  public data: any;
-  public myChartData;
-  public clicked: boolean = true;
-  public clicked1: boolean = false;
-  public clicked2: boolean = false;

-  constructor() {}
+  constructor() { }

  ngOnInit() {
-    var gradientChartOptionsConfigurationWithTooltipBlue: any = {
-      maintainAspectRatio: false,
-      legend: {
-        display: false
-      },
-
-      tooltips: {
-        backgroundColor: '#f5f5f5',
-        titleFontColor: '#333',
-        bodyFontColor: '#666',
-        bodySpacing: 4,
-        xPadding: 12,
-        mode: "nearest",
-        intersect: 0,
-        position: "nearest"
-      },
-      responsive: true,
-      scales: {
-        yAxes: [{
-          barPercentage: 1.6,
-          gridLines: {
-            drawBorder: false,
-            color: 'rgba(29,140,248,0.0)',
-            zeroLineColor: "transparent",
-          },
-          ticks: {
-            suggestedMin: 60,
-            suggestedMax: 125,
-            padding: 20,
-            fontColor: "#2380f7"
  }
-        }],
-
-        xAxes: [{
-          barPercentage: 1.6,
-          gridLines: {
-            drawBorder: false,
-            color: 'rgba(29,140,248,0.1)',
-            zeroLineColor: "transparent",
-          },
-          ticks: {
-            padding: 20,
-            fontColor: "#2380f7"
-          }
-        }]
-      }
-    };
-
-    var gradientChartOptionsConfigurationWithTooltipPurple: any = {
-      maintainAspectRatio: false,
-      legend: {
-        display: false
-      },
-
-      tooltips: {
-        backgroundColor: '#f5f5f5',
-        titleFontColor: '#333',
-        bodyFontColor: '#666',
-        bodySpacing: 4,
-        xPadding: 12,
-        mode: "nearest",
-        intersect: 0,
-        position: "nearest"
-      },
-      responsive: true,
-      scales: {
-        yAxes: [{
-          barPercentage: 1.6,
-          gridLines: {
-            drawBorder: false,
-            color: 'rgba(29,140,248,0.0)',
-            zeroLineColor: "transparent",
-          },
-          ticks: {
-            suggestedMin: 60,
-            suggestedMax: 125,
-            padding: 20,
-            fontColor: "#9a9a9a"
-          }
-        }],
-
-        xAxes: [{
-          barPercentage: 1.6,
-          gridLines: {
-            drawBorder: false,
-            color: 'rgba(225,78,202,0.1)',
-            zeroLineColor: "transparent",
-          },
-          ticks: {
-            padding: 20,
-            fontColor: "#9a9a9a"
-          }
-        }]
-      }
-    };
-
-    var gradientChartOptionsConfigurationWithTooltipRed: any = {
-      maintainAspectRatio: false,
-      legend: {
-        display: false
-      },
-
-      tooltips: {
-        backgroundColor: '#f5f5f5',
-        titleFontColor: '#333',
-        bodyFontColor: '#666',
-        bodySpacing: 4,
-        xPadding: 12,
-        mode: "nearest",
-        intersect: 0,
-        position: "nearest"
-      },
-      responsive: true,
-      scales: {
-        yAxes: [{
-          barPercentage: 1.6,
-          gridLines: {
-            drawBorder: false,
-            color: 'rgba(29,140,248,0.0)',
-            zeroLineColor: "transparent",
-          },
-          ticks: {
-            suggestedMin: 60,
-            suggestedMax: 125,
-            padding: 20,
-            fontColor: "#9a9a9a"
-          }
-        }],
-
-        xAxes: [{
-          barPercentage: 1.6,
-          gridLines: {
-            drawBorder: false,
-            color: 'rgba(233,32,16,0.1)',
-            zeroLineColor: "transparent",
-          },
-          ticks: {
-            padding: 20,
-            fontColor: "#9a9a9a"
-          }
-        }]
-      }
-    };
-
-    var gradientChartOptionsConfigurationWithTooltipOrange: any = {
-      maintainAspectRatio: false,
-      legend: {
-        display: false
-      },
-
-      tooltips: {
-        backgroundColor: '#f5f5f5',
-        titleFontColor: '#333',
-        bodyFontColor: '#666',
-        bodySpacing: 4,
-        xPadding: 12,
-        mode: "nearest",
-        intersect: 0,
-        position: "nearest"
-      },
-      responsive: true,
-      scales: {
-        yAxes: [{
-          barPercentage: 1.6,
-          gridLines: {
-            drawBorder: false,
-            color: 'rgba(29,140,248,0.0)',
-            zeroLineColor: "transparent",
-          },
-          ticks: {
-            suggestedMin: 50,
-            suggestedMax: 110,
-            padding: 20,
-            fontColor: "#ff8a76"
-          }
-        }],
-
-        xAxes: [{
-          barPercentage: 1.6,
-          gridLines: {
-            drawBorder: false,
-            color: 'rgba(220,53,69,0.1)',
-            zeroLineColor: "transparent",
-          },
-          ticks: {
-            padding: 20,
-            fontColor: "#ff8a76"
-          }
-        }]
-      }
-    };
-
-    var gradientChartOptionsConfigurationWithTooltipGreen: any = {
-      maintainAspectRatio: false,
-      legend: {
-        display: false
-      },
-
-      tooltips: {
-        backgroundColor: '#f5f5f5',
-        titleFontColor: '#333',
-        bodyFontColor: '#666',
-        bodySpacing: 4,
-        xPadding: 12,
-        mode: "nearest",
-        intersect: 0,
-        position: "nearest"
-      },
-      responsive: true,
-      scales: {
-        yAxes: [{
-          barPercentage: 1.6,
-          gridLines: {
-            drawBorder: false,
-            color: 'rgba(29,140,248,0.0)',
-            zeroLineColor: "transparent",
-          },
-          ticks: {
-            suggestedMin: 50,
-            suggestedMax: 125,
-            padding: 20,
-            fontColor: "#9e9e9e"
-          }
-        }],
-
-        xAxes: [{
-          barPercentage: 1.6,
-          gridLines: {
-            drawBorder: false,
-            color: 'rgba(0,242,195,0.1)',
-            zeroLineColor: "transparent",
-          },
-          ticks: {
-            padding: 20,
-            fontColor: "#9e9e9e"
-          }
-        }]
-      }
-    };


-    var gradientBarChartConfiguration: any = {
-      maintainAspectRatio: false,
-      legend: {
-        display: false
-      },
-
-      tooltips: {
-        backgroundColor: '#f5f5f5',
-        titleFontColor: '#333',
-        bodyFontColor: '#666',
-        bodySpacing: 4,
-        xPadding: 12,
-        mode: "nearest",
-        intersect: 0,
-        position: "nearest"
-      },
-      responsive: true,
-      scales: {
-        yAxes: [{
-
-          gridLines: {
-            drawBorder: false,
-            color: 'rgba(29,140,248,0.1)',
-            zeroLineColor: "transparent",
-          },
-          ticks: {
-            suggestedMin: 60,
-            suggestedMax: 120,
-            padding: 20,
-            fontColor: "#9e9e9e"
-          }
-        }],
-
-        xAxes: [{
-
-          gridLines: {
-            drawBorder: false,
-            color: 'rgba(29,140,248,0.1)',
-            zeroLineColor: "transparent",
-          },
-          ticks: {
-            padding: 20,
-            fontColor: "#9e9e9e"
-          }
-        }]
-      }
-    };
-
-    this.canvas = document.getElementById("chartLineRed");
-    this.ctx = this.canvas.getContext("2d");
-
-    var gradientStroke = this.ctx.createLinearGradient(0, 230, 0, 50);
-
-    gradientStroke.addColorStop(1, 'rgba(233,32,16,0.2)');
-    gradientStroke.addColorStop(0.4, 'rgba(233,32,16,0.0)');
-    gradientStroke.addColorStop(0, 'rgba(233,32,16,0)'); //red colors
-
-    var data = {
-      labels: ['JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
-      datasets: [{
-        label: "Data",
-        fill: true,
-        backgroundColor: gradientStroke,
-        borderColor: '#ec250d',
+  pageViewChartData = [{
+    label: 'This week',
+    data: [36.57, 38.9, 42.3, 41.8, 37.4, 32.5, 28.1, 24.7, 23.4, 20.4, 16.5, 12.1, 9.2, 5.1, 9.6, 10.8, 13.2, 18.2, 13.9, 18.7, 13.7, 11.3, 13.7, 15.8, 12.9, 17.5, 21.9, 18.2, 14.3, 18.2, 14.8, 13.01, 14.5, 15.4, 16.6, 19.4, 14.5, 17.7, 13.8, 9.4, 11.9, 9.7, 6.1, 1.4, 2.3, 2.3, 4.5, 3.7, 5.7, 5.08, 1.9, 8.2,
+       7.9, 5.02, 2.8, 6.8, 6.2, 9.8, 9.3, 11.9, 10, 9, 6, 4.5, 2.7, 4.3, 3.6, 4.2, 2, 1.4, 3.7, 1.5, 5.7, 4.9, 1, 4.7, 6.3, 4.2, 5.1, 5.2, 3.8, 8.2, 7.2, 6.5, 1.7, 11.4, 10.5, 3.8, 4.7, 8.5, 10.2, 11, 15.6, 19.7, 18.1, 13.5, 12, 7.5, 3.7, 9.7, 9.2, 13.4, 18.4, 22.4, 18.7, 15.2, 14.5, 14.4, 12, 13.7, 13.3, 15.4,
+        15.8, 17.7, 14.3, 10.6, 12.7, 14.7, 18.6, 22.9, 18, 22.8, 23.8, 27.1, 24.7, 20, 22.7, 20.9, 16.6, 15.1, 13.1, 10.7, 11.4, 13.1, 10.1, 9.2, 9.2, 10.3, 15.2, 12.5, 14, 18.2, 16.3, 17.7, 18.9, 15.3, 18.1, 16.3, 14.8, 10 ],
    borderWidth: 2,
-        borderDash: [],
-        borderDashOffset: 0.0,
-        pointBackgroundColor: '#ec250d',
-        pointBorderColor: 'rgba(255,255,255,0)',
-        pointHoverBackgroundColor: '#ec250d',
-        pointBorderWidth: 20,
-        pointHoverRadius: 4,
-        pointHoverBorderWidth: 15,
-        pointRadius: 4,
-        data: [80, 100, 70, 80, 120, 80],
-      }]
-    };
-
-    var myChart = new Chart(this.ctx, {
-      type: 'line',
-      data: data,
-      options: gradientChartOptionsConfigurationWithTooltipRed
-    });
-
-
-    this.canvas = document.getElementById("chartLineGreen");
-    this.ctx = this.canvas.getContext("2d");
-
-
-    var gradientStroke = this.ctx.createLinearGradient(0, 230, 0, 50);
-
-    gradientStroke.addColorStop(1, 'rgba(66,134,121,0.15)');
-    gradientStroke.addColorStop(0.4, 'rgba(66,134,121,0.0)'); //green colors
-    gradientStroke.addColorStop(0, 'rgba(66,134,121,0)'); //green colors
-
-    var data = {
-      labels: ['JUL', 'AUG', 'SEP', 'OCT', 'NOV'],
-      datasets: [{
-        label: "My First dataset",
-        fill: true,
-        backgroundColor: gradientStroke,
-        borderColor: '#00d6b4',
+    fill: true
+  },
+  {
+    label: 'Current week',
+    data: [53, 50.3, 49.4, 47.7, 49, 50.6, 48.7, 48.8, 53.5, 52.9, 49, 50.2, 48.3, 44.8, 40.7, 41.2, 45.6, 44.6, 41.3, 38.2, 39.6, 41, 39.4, 35.6, 38.5, 38.5, 40.6, 38.7, 42.9, 46.3, 43.5, 40.6, 36.5, 31.7, 28.9, 29.6, 29.5, 33.1, 37, 35.8, 37.6, 39.6, 39, 34.1, 37.4, 39.2, 38.4, 37.7, 40.1, 35.8, 31.5, 31.8,
+       30.5, 25.7, 28.2, 28.4, 30, 32.1, 32.9, 37.6, 35.2, 39.1, 41.3, 41.4, 43.7, 39.4, 39.2, 43.8, 42.4, 43.6, 38.7 , 43.5, 41.8, 44.8, 46.1, 47.6, 49, 46.4, 51.2, 50.1, 53.6, 56, 52.7, 56.6, 60.2, 58.3, 56.5, 55.7, 54.7, 54.2, 58.6, 57, 60.5, 57.6, 56.1, 55.1, 54.3, 52.3, 54.5, 54.1, 51.9, 51.1, 46.3, 48.3,
+        45.8, 48.2, 43.3, 45.8, 43.4, 41.3, 40.9, 38.4, 40.1, 44.8, 44, 41.4, 37.8, 39.2, 35.2, 32.1, 35.6, 38, 37.9, 38.7, 37.4, 37.5, 33.1, 35, 33.1, 31.8, 29.1, 31.9, 34.3, 32.9, 33.1, 37.1, 32.6, 36.9, 35.9, 38.1, 42.5, 41.5, 45.5, 46.3, 45.7, 45.4, 42.5, 44.4, 39.7, 44.7],
    borderWidth: 2,
-        borderDash: [],
-        borderDashOffset: 0.0,
-        pointBackgroundColor: '#00d6b4',
-        pointBorderColor: 'rgba(255,255,255,0)',
-        pointHoverBackgroundColor: '#00d6b4',
-        pointBorderWidth: 20,
-        pointHoverRadius: 4,
-        pointHoverBorderWidth: 15,
-        pointRadius: 4,
-        data: [90, 27, 60, 12, 80],
-      }]
+    fill: true
+  }];
+
+  pageViewChartLabels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49',
+   '50', '51', '52', '53', '54', '55', '56', '57', '58', '59', '60', '61', '62', '63', '64', '65', '66', '67', '68', '69', '70', '71', '72', '73', '74', '75', '76', '77', '78', '79', '80', '81', '82', '83', '84', '85', '86', '87', '88', '89', '90', '91', '92', '93', '94', '95', '96', '97', '98', '99',
+   '100', '101', '102', '103', '104', '105', '106', '107', '108', '109', '110', '111', '112', '113', '114', '115', '116', '117', '118', '119', '120', '121', '122', '123', '124', '125', '126', '127', '128', '129', '130', '131', '132', '133', '134', '135', '136', '137', '138', '139', '140', '141', '142', '143', '144', '145', '146', '147', '148', '149'];
+
+  pageViewChartOptions = {
+
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      yAxes: [{
+        display: true,
+        gridLines: {
+          drawBorder: false,
+          display: true,
+          drawTicks: false,
+          color: '#eef0fa',
+          zeroLineColor: 'rgba(90, 113, 208, 0)',
+        },
+        ticks: {
+          display: false,
+          beginAtZero: true,
+          min: 0,
+          max: 100,
+          stepSize: 32,
+          padding: 10,
+        }
+      }],
+      xAxes: [{
+        display: false,
+        position: 'bottom',
+        gridLines: {
+          drawBorder: false,
+          display: false,
+          drawTicks: false,
+        },
+        ticks: {
+          beginAtZero: true,
+          stepSize: 10,
+          fontColor: "#a7afb7",
+          padding: 10,
+        }
+      }],
+    },
+    legend: {
+      display: false,
+    },
+    elements: {
+      point: {
+        radius: 0
+      },
+      line: {
+        tension: 0
+      }
+    },
+    tooltips: {
+      backgroundColor: 'rgba(2, 171, 254, 1)',
+    },
  };

-    var myChart = new Chart(this.ctx, {
-      type: 'line',
-      data: data,
-      options: gradientChartOptionsConfigurationWithTooltipGreen
-
-    });
-
-
-
-    var chart_labels = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
-    this.datasets = [
-      [100, 70, 90, 70, 85, 60, 75, 60, 90, 80, 110, 100],
-      [80, 120, 105, 110, 95, 105, 90, 100, 80, 95, 70, 120],
-      [60, 80, 65, 130, 80, 105, 90, 130, 70, 115, 60, 130]
+  pageViewChartColors = [
+    {
+      backgroundColor: [
+        'rgba(255, 255, 255, 1)',
+      ],
+      borderColor: [
+        'rgb(0, 123, 255)'
+      ]
+    },
+    {
+      backgroundColor: [
+        'rgba(86, 11, 208, .05)',
+      ],
+      borderColor: [
+        'rgb(86, 11, 208)'
+      ],
+    }
  ];
-    this.data = this.datasets[0];



-    this.canvas = document.getElementById("chartBig1");
-    this.ctx = this.canvas.getContext("2d");
-
-    var gradientStroke = this.ctx.createLinearGradient(0, 230, 0, 50);
-
-    gradientStroke.addColorStop(1, 'rgba(233,32,16,0.2)');
-    gradientStroke.addColorStop(0.4, 'rgba(233,32,16,0.0)');
-    gradientStroke.addColorStop(0, 'rgba(233,32,16,0)'); //red colors
-
-    var config = {
-      type: 'line',
-      data: {
-        labels: chart_labels,
-        datasets: [{
-          label: "My First dataset",
-          fill: true,
-          backgroundColor: gradientStroke,
-          borderColor: '#ec250d',
+  bounceRateChartData = [{
+    label: 'This week',
+    data: [27.2, 29.9, 29.6, 25.7, 25.9, 29.3, 31.1, 27.9, 28.4, 25.4, 23.2, 18.2, 14, 12.7, 11, 13.7, 9.7, 12.6, 10.9, 12.7, 13.8, 12.9, 13.8, 10.2, 5.8, 7.6, 8.8, 5.6, 5.6, 6.3, 4.2, 3.6, 5.4, 6.5, 8.1, 10.9, 7.6, 9.7, 10.9, 9.5, 5.4, 4.9, .7, 2.3, 5.5, 10, 10.6, 8.3, 8.4, 8.5, 5.8 ],
    borderWidth: 2,
-          borderDash: [],
-          borderDashOffset: 0.0,
-          pointBackgroundColor: '#ec250d',
-          pointBorderColor: 'rgba(255,255,255,0)',
-          pointHoverBackgroundColor: '#ec250d',
-          pointBorderWidth: 20,
-          pointHoverRadius: 4,
-          pointHoverBorderWidth: 15,
-          pointRadius: 4,
-          data: this.data,
-        }]
+    fill: true
+  }];
+
+  bounceRateChartLabels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51'];
+
+  bounceRateChartOptions = {
+
+    responsive:true,
+    maintainAspectRatio:false,
+    scales: {
+      yAxes: [{
+        display: false,
+        gridLines: {
+          drawBorder: false,
+          display: true,
+          drawTicks: false,
+        },
+        ticks: {
+          display: false,
+          beginAtZero: true,
+          min: 0,
+          max: 40,
+          stepSize: 10,
+        }
+      }],
+      xAxes: [{
+        display: false,
+        position: 'bottom',
+        gridLines: {
+          drawBorder: false,
+          display: false,
+          drawTicks: false,
+        },
+        ticks: {
+          beginAtZero: true,
+          stepSize: 10,
+          fontColor: "#a7afb7",
+          padding: 10,
+        }
+      }],
+    },
+    legend: {
+      display: false,
+    },
+    elements: {
+      point: {
+        radius: 0
+      },
+      line: {
+        tension: 0
+      }
+    },
+    tooltips: {
+      backgroundColor: 'rgba(2, 171, 254, 1)',
    },
-      options: gradientChartOptionsConfigurationWithTooltipRed
  };
-    this.myChartData = new Chart(this.ctx, config);
+
+  bounceRateChartColors = [
+    {
+      backgroundColor: [
+        'rgba(0, 204, 212, .2)',
+      ],
+      borderColor: [
+        'rgb(0, 204, 212)'
+      ]
+    }
+  ];


-    this.canvas = document.getElementById("CountryChart");
-    this.ctx  = this.canvas.getContext("2d");
-    var gradientStroke = this.ctx.createLinearGradient(0, 230, 0, 50);
+  //  Total users chart
+  usersBarChartData = [{
+    label: '# of Votes',
+    data: [27.2, 29.9, 29.6, 25.7, 25.9, 29.3, 31.1, 27.9, 28.4, 25.4, 23.2, 18.2, 14, 12.7, 11, 13.7, 9.7, 12.6, 10.9, 12.7, 13.8],
+    borderWidth: 1,
+    fill: false
+  }];

-    gradientStroke.addColorStop(1, 'rgba(29,140,248,0.2)');
-    gradientStroke.addColorStop(0.4, 'rgba(29,140,248,0.0)');
-    gradientStroke.addColorStop(0, 'rgba(29,140,248,0)'); //blue colors
+  usersBarChartLabels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18'];

+  usersBarChartOptions = {

-    var myChart = new Chart(this.ctx, {
-      type: 'bar',
-      responsive: true,
+    responsive:true,
+    maintainAspectRatio:false,
+    scales: {
+      yAxes: [{
+        display: false,
+        ticks: {
+          display: false,
+        },
+        gridLines: {
+          drawBorder: false,
+          display: false
+        }
+      }],
+      xAxes: [{
+        display: false,
+        barThickness: 5.5,
+        ticks: {
+          display: false,
+        },
+        gridLines: {
+          drawBorder: false,
+          display: false
+        }
+      }]
+
+    },
    legend: {
      display: false
    },
-      data: {
-        labels: ['USA', 'GER', 'AUS', 'UK', 'RO', 'BR'],
-        datasets: [{
-          label: "Countries",
-          fill: true,
-          backgroundColor: gradientStroke,
-          hoverBackgroundColor: gradientStroke,
-          borderColor: '#1f8ef1',
-          borderWidth: 2,
-          borderDash: [],
-          borderDashOffset: 0.0,
-          data: [53, 20, 10, 80, 100, 45],
-        }]
-      },
-      options: gradientBarChartConfiguration
-    });
+    elements: {
+      point: {
+        radius: 0
+      }
+    }
+  };

+  usersBarChartColors = [
+    {
+      backgroundColor: '#007bff',
+      borderColor: '#007bff'
    }
-  public updateOptions() {
-    this.myChartData.data.datasets[0].data = this.data;
-    this.myChartData.update();
+  ];
+
+
+  //  Total users chart
+  sessionsChartData = [{
+    label: '# of Votes',
+    data: [2, 4, 10, 20, 45, 40, 35, 18],
+    borderWidth: 1,
+    fill: false
+  },
+  {
+    label: '# of Rate',
+    data: [3, 6, 15, 35, 50, 45, 35, 25],
+    borderWidth: 1,
+    fill: false
+  }];
+
+  sessionsChartLabels = [0,1,2,3,4,5,6,7];
+
+  sessionsChartOptions = {
+
+    responsive:true,
+    maintainAspectRatio:false,
+    scales: {
+      yAxes: [{
+        display: false,
+        ticks: {
+          beginAtZero:true,
+          fontSize: 11,
+          max: 80
+        },
+        gridLines: {
+          drawBorder: false,
        }
+      }],
+      xAxes: [{
+        barPercentage: 0.6,
+        gridLines: {
+          color: 'rgba(0,0,0,0.08)',
+          drawBorder: false
+        },
+        ticks: {
+          beginAtZero:true,
+          fontSize: 11,
+          display: false
+        }
+      }]
+
+    },
+    legend: {
+      display: false
+    },
+    elements: {
+      point: {
+        radius: 0
+      }
+    }
+  };
+
+  sessionsChartColors = [
+    {
+      backgroundColor: '#560bd0'
+    },
+    {
+      backgroundColor: '#cad0e8'
+    }
+  ];
+
+
+  // Sessions by channel doughnut chart
+  sessionsByChannelChartData = [{
+    data: [25,20,30,15,10],
+    backgroundColor: ['#6f42c1', '#007bff','#17a2b8','#00cccc','#adb2bd'],
+  }];
+
+  sessionsByChannelChartLabels: ['Search', 'Email', 'Referral', 'Social', 'Other'];
+  sessionsByChannelChartOptions = {
+    cutoutPercentage: 50,
+    maintainAspectRatio: false,
+    responsive: true,
+    legend: {
+      display: false,
+    },
+    animation: {
+      animateScale: true,
+      animateRotate: true
+    }
+  };
+
+
+  // Sessions by channel doughnut chart
+  sessionsChartOneData = [{
+    data: [40,60],
+    backgroundColor: ['#007bff', '#cad0e8'],
+    borderColor: ['#007bff', '#cad0e8'],
+  }];
+
+  sessionsChartOneLabels: ['Search', 'Email'];
+  sessionsChartOneOptions = {
+    cutoutPercentage: 78,
+    maintainAspectRatio: false,
+    responsive: true,
+    legend: {
+      display: false,
+    },
+    animation: {
+      animateScale: true,
+      animateRotate: true
+    }
+  };
+
+  // Sessions by channel doughnut chart
+  sessionsChartTwoData = [{
+    data: [25,75],
+    backgroundColor: ['#00cccc', '#cad0e8'],
+    borderColor: ['#00cccc', '#cad0e8']
+  }];
+
+  sessionsChartTwoLabels: ['Search', 'Email'];
+  sessionsChartTwoOptions = {
+    cutoutPercentage: 78,
+    maintainAspectRatio: false,
+    responsive: true,
+    legend: {
+      display: false,
+    },
+    animation: {
+      animateScale: true,
+      animateRotate: true
+    }
+  };
+
+
+  //  Acquisition chart one
+  acquisitionOneChartData = [{
+    label: '# of Votes',
+    data: [4,2.5,5,3,5],
+    borderWidth: 1,
+    fill: false
+  }];
+
+  acquisitionOneChartLabels = ['1', '2', '3', '4', '5'];
+
+  acquisitionOneChartOptions = {
+
+    responsive:true,
+    maintainAspectRatio:false,
+    scales: {
+      yAxes: [{
+        display: false,
+        ticks: {
+          display: false,
+        },
+        gridLines: {
+          drawBorder: false,
+          display: false
+        }
+      }],
+      xAxes: [{
+        display: false,
+        barThickness: 5.5,
+        ticks: {
+          display: false,
+        },
+        gridLines: {
+          drawBorder: false,
+          display: false
+        }
+      }]
+
+    },
+    legend: {
+      display: false
+    },
+    elements: {
+      point: {
+        radius: 0
+      }
+    }
+  };
+
+  acquisitionOneChartColors = [
+    {
+      backgroundColor: '#fff',
+      borderColor: '#fff'
+    }
+  ];
+
+    //  Acquisition chart two
+    acquisitionTwoChartData = [{
+      label: '# of Votes',
+      data: [5,2,3,5,1.5],
+      borderWidth: 1,
+      fill: false
+    }];
+
+    acquisitionTwoChartLabels = ['1', '2', '3', '4', '5'];
+
+    acquisitionTwoChartOptions = {
+
+    responsive:true,
+    maintainAspectRatio:false,
+      scales: {
+        yAxes: [{
+          display: false,
+          ticks: {
+            display: false,
+          },
+          gridLines: {
+            drawBorder: false,
+            display: false
+          }
+        }],
+        xAxes: [{
+          display: false,
+          barThickness: 5.5,
+          ticks: {
+            display: false,
+          },
+          gridLines: {
+            drawBorder: false,
+            display: false
+          }
+        }]
+
+      },
+      legend: {
+        display: false
+      },
+      elements: {
+        point: {
+          radius: 0
+        }
+      }
+    };
+
+    acquisitionTwoChartColors = [
+      {
+        backgroundColor: '#fff',
+        borderColor: '#fff'
+      }
+    ];
+
 }
--- a/frontend/src/app/pages/medical-providers/medical-providers.component.html
+++ b/frontend/src/app/pages/medical-providers/medical-providers.component.html
@ -1,62 +0,0 @@
-<div class=" content">
-  <div class=" row">
-    <div class=" col-md-12">
-      <div class=" card">
-        <div class=" card-header">
-          <h5 class=" title">Medical Providers</h5>
-          <p class=" category">
-            The following medical providers have API's which Fasten can use to retrieve your medical history.
-            Please click the logos below to initiate the connection.
-          </p>
-        </div>
-        <div class=" card-body all-icons">
-          <div class=" row">
-
-            <div  class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-              <button (click)="connect($event, 'aetna')">
-                <img class=" tim-icons icon-alert-circle-exc" src="assets/img/provider_logos/aetna.png">
-                <p>Aetna</p>
-              </button>
-            </div>
-
-
-            <div class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-              <button (click)="connect($event, 'anthem')">
-                <img class=" tim-icons icon-alert-circle-exc" src="assets/img/provider_logos/anthem.png">
-                <p>Anthem</p>
-              </button>
-            </div>
-
-            <div class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-              <button (click)="connect($event, 'cigna')">
-                <img class=" tim-icons icon-alert-circle-exc" src="assets/img/provider_logos/cigna.jpg">
-                <p>Cigna</p>
-              </button>
-            </div>
-
-            <div class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-              <button (click)="connect($event, 'humana')" >
-                <img class=" tim-icons icon-alert-circle-exc" src="assets/img/provider_logos/humana.webp">
-                <p>Humana</p>
-              </button>
-            </div>
-
-            <div class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-              <button (click)="connect($event, 'kaiser')">
-                <img class=" tim-icons icon-alert-circle-exc" src="assets/img/provider_logos/kaiser.jpg">
-                <p>Kaiser</p>
-              </button>
-            </div>
-
-            <div class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-              <button (click)="connect($event, 'united_healthcare')">
-                <img class=" tim-icons icon-alert-circle-exc" src="assets/img/provider_logos/unitedhealthcare.jpg">
-                <p>United Healthcare</p>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
--- a/frontend/src/app/pages/medical-providers/medical-providers.component.spec.ts
+++ b/frontend/src/app/pages/medical-providers/medical-providers.component.spec.ts
@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MedicalProvidersComponent } from './medical-providers.component';
-
-describe('MedicalProvidersComponent', () => {
-  let component: MedicalProvidersComponent;
-  let fixture: ComponentFixture<MedicalProvidersComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ MedicalProvidersComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(MedicalProvidersComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
--- a/frontend/src/app/pages/medical-sources/medical-sources.component.html
+++ b/frontend/src/app/pages/medical-sources/medical-sources.component.html
@ -0,0 +1,160 @@
+<div class="az-content">
+  <div class="container">
+    <app-components-sidebar></app-components-sidebar>
+    <div class="az-content-body pd-lg-l-40 d-flex flex-column">
+      <div class="az-content-breadcrumb">
+        <span>Medical Sources</span>
+      </div>
+      <h2 class="az-content-title">Medical Sources</h2>
+
+      <div class="az-content-label mg-b-5">Hospitals & Medical Clinics</div>
+      <p class="mg-b-20">The following medical insurance companies have API's which Fasten can use to retrieve your medical history.
+        Please click the logos below to initiate the connection.</p>
+
+      <div class="row row-sm">
+        <div class="col-lg">
+          <input class="form-control" placeholder="Input box" type="text">
+        </div><!-- col -->
+        <div class="col-lg mg-t-10 mg-lg-t-0">
+          <input class="form-control" placeholder="Input box (readonly)" readonly="" type="text">
+        </div><!-- col -->
+        <div class="col-lg mg-t-10 mg-lg-t-0">
+          <input class="form-control" placeholder="Input box (disabled)" disabled="" type="text">
+        </div><!-- col -->
+      </div><!-- row -->
+
+      <hr class="mg-y-30">
+
+      <div class="az-content-label mg-b-5">Insurance Companies</div>
+      <p class="mg-b-20">The following medical insurance companies have API's which Fasten can use to retrieve your medical history.
+        Please click the logos below to initiate the connection.</p>
+
+      <div class="row row-sm">
+        <div (click)="connect($event, 'aetna')" class="col-md-6 col-lg-4 d-flex align-items-stretch">
+          <div class="card bd-0">
+            <img src="assets/sources/aetna.png" alt="Image" class="img-fluid">
+            <div class="card-body bd bd-t-0">
+              <p class="card-text">Aetna</p>
+            </div>
+          </div>
+        </div>
+
+        <div (click)="connect($event, 'anthem')" class="col-md-6 col-lg-4 d-flex align-items-stretch">
+          <div class="card bd-0">
+            <img src="assets/sources/anthem.png" alt="Image" class="img-fluid">
+            <div class="card-body bd bd-t-0">
+              <p class="card-text">Anthem</p>
+            </div>
+          </div>
+        </div>
+
+        <div (click)="connect($event, 'cigna')" class="col-md-6 col-lg-4 d-flex align-items-stretch">
+          <div class="card bd-0">
+            <img src="assets/sources/cigna.png" alt="Image" class="img-fluid">
+            <div class="card-body bd bd-t-0">
+              <p class="card-text">Cigna</p>
+            </div>
+          </div>
+        </div>
+
+        <div (click)="connect($event, 'humana')" class="col-md-6 col-lg-4 d-flex align-items-stretch">
+          <div class="card bd-0">
+            <img src="assets/sources/humana.png" alt="Image" class="img-fluid">
+            <div class="card-body bd bd-t-0">
+              <p class="card-text">Humana</p>
+            </div>
+          </div>
+        </div>
+
+        <div (click)="connect($event, 'kaiser')" class="col-md-6 col-lg-4 d-flex align-items-stretch">
+          <div class="card bd-0">
+            <img src="assets/sources/kaiser.png" alt="Image" class="img-fluid">
+            <div class="card-body bd bd-t-0">
+              <p class="card-text">Kaiser</p>
+            </div>
+          </div>
+        </div>
+
+        <div (click)="connect($event, 'unitedhealthcare')" class="col-md-6 col-lg-4 d-flex align-items-stretch">
+          <div class="card bd-0">
+            <img src="assets/sources/unitedhealthcare.png" alt="Image" class="img-fluid">
+            <div class="card-body bd bd-t-0">
+              <p class="card-text">United Healthcare</p>
+            </div>
+          </div>
+        </div>
+
+
+      </div><!-- row -->
+
+
+
+      <div class="ht-40"></div>
+
+    </div><!-- az-content-body -->
+  </div><!-- container -->
+</div><!-- az-content -->
+
+
+<!--<div class=" content">-->
+<!--  <div class=" row">-->
+<!--    <div class=" col-md-12">-->
+<!--      <div class=" card">-->
+<!--        <div class=" card-header">-->
+<!--          <h5 class=" title">Medical Sources</h5>-->
+<!--          <p class=" category">-->
+<!--            The following medical sources have API's which Fasten can use to retrieve your medical history.-->
+<!--            Please click the logos below to initiate the connection.-->
+<!--          </p>-->
+<!--        </div>-->
+<!--        <div class=" card-body all-icons">-->
+<!--          <div class=" row">-->
+
+<!--            <div  class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">-->
+<!--              <button (click)="connect($event, 'aetna')">-->
+<!--                <img class=" tim-icons icon-alert-circle-exc" style="max-width:100px;" src="assets/sources/aetna.png">-->
+<!--                <p>Aetna</p>-->
+<!--              </button>-->
+<!--            </div>-->
+
+
+<!--            <div class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">-->
+<!--              <button (click)="connect($event, 'anthem')">-->
+<!--                <img class=" tim-icons icon-alert-circle-exc" style="max-width:100px;" src="assets/sources/anthem.png">-->
+<!--                <p>Anthem</p>-->
+<!--              </button>-->
+<!--            </div>-->
+
+<!--            <div class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">-->
+<!--              <button (click)="connect($event, 'cigna')">-->
+<!--                <img class=" tim-icons icon-alert-circle-exc" style="max-width:100px;" src="assets/sources/cigna.png">-->
+<!--                <p>Cigna</p>-->
+<!--              </button>-->
+<!--            </div>-->
+
+<!--            <div class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">-->
+<!--              <button (click)="connect($event, 'humana')" >-->
+<!--                <img class=" tim-icons icon-alert-circle-exc" style="max-width:100px;" src="assets/sources/humana.png">-->
+<!--                <p>Humana</p>-->
+<!--              </button>-->
+<!--            </div>-->
+
+<!--            <div class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">-->
+<!--              <button (click)="connect($event, 'kaiser')">-->
+<!--                <img class=" tim-icons icon-alert-circle-exc" style="max-width:100px;" src="assets/sources/kaiser.png">-->
+<!--                <p>Kaiser</p>-->
+<!--              </button>-->
+<!--            </div>-->
+
+<!--            <div class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">-->
+<!--              <button (click)="connect($event, 'united_healthcare')">-->
+<!--                <img class=" tim-icons icon-alert-circle-exc" style="max-width:100px;" src="assets/sources/unitedhealthcare.png">-->
+<!--                <p>United Healthcare</p>-->
+<!--              </button>-->
+<!--            </div>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </div>-->
+<!--  </div>-->
+<!--</div>-->
--- a/frontend/src/app/pages/medical-providers/medical-providers.component.scss
+++ b/frontend/src/app/pages/medical-providers/medical-providers.component.scss
--- a/frontend/src/app/pages/medical-sources/medical-sources.component.spec.ts
+++ b/frontend/src/app/pages/medical-sources/medical-sources.component.spec.ts
@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MedicalSourcesComponent } from './medical-sources.component';
+
+describe('MedicalSourcesComponent', () => {
+  let component: MedicalSourcesComponent;
+  let fixture: ComponentFixture<MedicalSourcesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MedicalSourcesComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MedicalSourcesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/frontend/src/app/pages/medical-providers/medical-providers.component.ts
+++ b/frontend/src/app/pages/medical-providers/medical-providers.component.ts
@ -15,11 +15,11 @@ export const retryCount = 24; //wait 2 minutes (5 * 24 = 120)
 export const retryWaitMilliSeconds = 5000; //wait 5 seconds

@Component({
-  selector: 'app-medical-providers',
-  templateUrl: './medical-providers.component.html',
-  styleUrls: ['./medical-providers.component.scss']
+  selector: 'app-medical-sources',
+  templateUrl: './medical-sources.component.html',
+  styleUrls: ['./medical-sources.component.scss']
 })
-export class MedicalProvidersComponent implements OnInit {
+export class MedicalSourcesComponent implements OnInit {

  constructor(
    private passportApi: PassportService,
--- a/frontend/src/assets/css/nucleo-icons.css
+++ b/frontend/src/assets/css/nucleo-icons.css
@ -1,543 +0,0 @@
-/* --------------------------------
-
-Nucleo Outline Web Font - nucleoapp.com/
-License - nucleoapp.com/license/
-Created using IcoMoon - icomoon.io
-
-------------------------------- */
-
-@font-face {
-  font-family: 'Nucleo';
-  src: url('../fonts/nucleo.eot');
-  src: url('../fonts/nucleo.eot') format('embedded-opentype'), url('../fonts/nucleo.woff2') format('woff2'), url('../fonts/nucleo.woff') format('woff'), url('../fonts/nucleo.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
-}
-
-/*------------------------
-	base class definition
-------------------------*/
-
-.tim-icons {
-  display: inline-block;
-  font: normal normal normal 1em/1 'Nucleo';
-  vertical-align: middle;
-  speak: none;
-  text-transform: none;
-  /* Better Font Rendering */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.font-icon-detail {
-  text-align: center;
-  padding: 45px 0 30px;
-  border: 1px solid #e44cc4;
-  border-radius: .1875rem;
-  margin: 15px 0;
-  min-height: 168px;
-}
-
-.font-icon-detail i {
-  color: #FFFFFF;
-  font-size: 1.5em;
-}
-
-.font-icon-detail p {
-  color: #e44cc4 !important;
-  margin-top: 30px;
-  padding: 0 10px;
-  font-size: .7142em;
-}
-
-/*------------------------
-  change icon size
-------------------------*/
-
-.tim-icons-sm {
-  font-size: 0.8em;
-}
-
-.tim-icons-lg {
-  font-size: 1.2em;
-}
-
-/* absolute units */
-
-.tim-icons-16 {
-  font-size: 16px;
-}
-
-.tim-icons-32 {
-  font-size: 32px;
-}
-
-/*----------------------------------
-  add a square/circle background
-----------------------------------*/
-
-.tim-icons-bg-square,
-.tim-icons-bg-circle {
-  padding: 0.35em;
-}
-
-.tim-icons-bg-circle {
-  border-radius: 50%;
-}
-
-/*------------------------
-  list icons
-------------------------*/
-
-/*------------------------
-  spinning icons
-------------------------*/
-
-.tim-icons-is-spinning {
-  -webkit-animation: tim-icons-spin 2s infinite linear;
-  -moz-animation: tim-icons-spin 2s infinite linear;
-  animation: tim-icons-spin 2s infinite linear;
-}
-
-@-webkit-keyframes tim-icons-spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-  }
-}
-
-@-moz-keyframes tim-icons-spin {
-  0% {
-    -moz-transform: rotate(0deg);
-  }
-  100% {
-    -moz-transform: rotate(360deg);
-  }
-}
-
-@keyframes tim-icons-spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-    -moz-transform: rotate(0deg);
-    -ms-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    -moz-transform: rotate(360deg);
-    -ms-transform: rotate(360deg);
-    -o-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-
-/*------------------------
-  rotated/flipped icons
-------------------------*/
-
-/*------------------------
-	icons
-------------------------*/
-
-.icon-alert-circle-exc::before {
-  content: "\ea02";
-}
-
-.icon-align-center::before {
-  content: "\ea03";
-}
-
-.icon-align-left-2::before {
-  content: "\ea04";
-}
-
-.icon-app::before {
-  content: "\ea05";
-}
-
-.icon-atom::before {
-  content: "\ea06";
-}
-
-.icon-attach-87::before {
-  content: "\ea07";
-}
-
-.icon-badge::before {
-  content: "\ea08";
-}
-
-.icon-bag-16::before {
-  content: "\ea09";
-}
-
-.icon-bank::before {
-  content: "\ea0a";
-}
-
-.icon-basket-simple::before {
-  content: "\ea0b";
-}
-
-.icon-bell-55::before {
-  content: "\ea0c";
-}
-
-.icon-bold::before {
-  content: "\ea0d";
-}
-
-.icon-book-bookmark::before {
-  content: "\ea0e";
-}
-
-.icon-bulb-63::before {
-  content: "\ea0f";
-}
-
-.icon-bullet-list-67::before {
-  content: "\ea10";
-}
-
-.icon-bus-front-12::before {
-  content: "\ea11";
-}
-
-.icon-button-pause::before {
-  content: "\ea12";
-}
-
-.icon-button-power::before {
-  content: "\ea13";
-}
-
-.icon-calendar-60::before {
-  content: "\ea14";
-}
-
-.icon-camera-18::before {
-  content: "\ea15";
-}
-
-.icon-caps-small::before {
-  content: "\ea16";
-}
-
-.icon-cart::before {
-  content: "\ea17";
-}
-
-.icon-chart-bar-32::before {
-  content: "\ea18";
-}
-
-.icon-chart-pie-36::before {
-  content: "\ea19";
-}
-
-.icon-chat-33::before {
-  content: "\ea1a";
-}
-
-.icon-check-2::before {
-  content: "\ea1b";
-}
-
-.icon-cloud-download-93::before {
-  content: "\ea1c";
-}
-
-.icon-cloud-upload-94::before {
-  content: "\ea1d";
-}
-
-.icon-coins::before {
-  content: "\ea1e";
-}
-
-.icon-compass-05::before {
-  content: "\ea1f";
-}
-
-.icon-controller::before {
-  content: "\ea20";
-}
-
-.icon-credit-card::before {
-  content: "\ea21";
-}
-
-.icon-delivery-fast::before {
-  content: "\ea22";
-}
-
-.icon-double-left::before {
-  content: "\ea23";
-}
-
-.icon-double-right::before {
-  content: "\ea24";
-}
-
-.icon-email-85::before {
-  content: "\ea25";
-}
-
-.icon-gift-2::before {
-  content: "\ea26";
-}
-
-.icon-globe-2::before {
-  content: "\ea27";
-}
-
-.icon-headphones::before {
-  content: "\ea28";
-}
-
-.icon-heart-2::before {
-  content: "\ea29";
-}
-
-.icon-html5::before {
-  content: "\ea2a";
-}
-
-.icon-image-02::before {
-  content: "\ea2b";
-}
-
-.icon-istanbul::before {
-  content: "\ea2c";
-}
-
-.icon-key-25::before {
-  content: "\ea2d";
-}
-
-.icon-laptop::before {
-  content: "\ea2e";
-}
-
-.icon-light-3::before {
-  content: "\ea2f";
-}
-
-.icon-link-72::before {
-  content: "\ea30";
-}
-
-.icon-lock-circle::before {
-  content: "\ea31";
-}
-
-.icon-map-big::before {
-  content: "\ea32";
-}
-
-.icon-minimal-down::before {
-  content: "\ea33";
-}
-
-.icon-minimal-left::before {
-  content: "\ea34";
-}
-
-.icon-minimal-right::before {
-  content: "\ea35";
-}
-
-.icon-minimal-up::before {
-  content: "\ea36";
-}
-
-.icon-mobile::before {
-  content: "\ea37";
-}
-
-.icon-molecule-40::before {
-  content: "\ea38";
-}
-
-.icon-money-coins::before {
-  content: "\ea39";
-}
-
-.icon-notes::before {
-  content: "\ea3a";
-}
-
-.icon-palette::before {
-  content: "\ea3b";
-}
-
-.icon-paper::before {
-  content: "\ea3c";
-}
-
-.icon-pencil::before {
-  content: "\ea3d";
-}
-
-.icon-pin::before {
-  content: "\ea3e";
-}
-
-.icon-planet::before {
-  content: "\ea3f";
-}
-
-.icon-puzzle-10::before {
-  content: "\ea40";
-}
-
-.icon-satisfied::before {
-  content: "\ea41";
-}
-
-.icon-scissors::before {
-  content: "\ea42";
-}
-
-.icon-send::before {
-  content: "\ea43";
-}
-
-.icon-settings-gear-63::before {
-  content: "\ea44";
-}
-
-.icon-settings::before {
-  content: "\ea45";
-}
-
-.icon-simple-add::before {
-  content: "\ea46";
-}
-
-.icon-simple-delete::before {
-  content: "\ea47";
-}
-
-.icon-simple-remove::before {
-  content: "\ea48";
-}
-
-.icon-single-02::before {
-  content: "\ea49";
-}
-
-.icon-single-copy-04::before {
-  content: "\ea4a";
-}
-
-.icon-sound-wave::before {
-  content: "\ea4b";
-}
-
-.icon-spaceship::before {
-  content: "\ea4c";
-}
-
-.icon-square-pin::before {
-  content: "\ea4d";
-}
-
-.icon-support-17::before {
-  content: "\ea4e";
-}
-
-.icon-tablet-2::before {
-  content: "\ea4f";
-}
-
-.icon-tag::before {
-  content: "\ea50";
-}
-
-.icon-tap-02::before {
-  content: "\ea51";
-}
-
-.icon-tie-bow::before {
-  content: "\ea52";
-}
-
-.icon-time-alarm::before {
-  content: "\ea53";
-}
-
-.icon-trash-simple::before {
-  content: "\ea54";
-}
-
-.icon-triangle-right-17::before {
-  content: "\ea55";
-}
-
-.icon-trophy::before {
-  content: "\ea56";
-}
-
-.icon-tv-2::before {
-  content: "\ea57";
-}
-
-.icon-upload::before {
-  content: "\ea58";
-}
-
-.icon-user-run::before {
-  content: "\ea59";
-}
-
-.icon-vector::before {
-  content: "\ea5a";
-}
-
-.icon-video-66::before {
-  content: "\ea5b";
-}
-
-.icon-volume-98::before {
-  content: "\ea5c";
-}
-
-.icon-wallet-43::before {
-  content: "\ea5d";
-}
-
-.icon-watch-time::before {
-  content: "\ea5e";
-}
-
-.icon-wifi::before {
-  content: "\ea5f";
-}
-
-.icon-world::before {
-  content: "\ea60";
-}
-
-.icon-zoom-split::before {
-  content: "\ea61";
-}
-
-.icon-refresh-01::before {
-  content: "\ea62";
-}
-
-.icon-refresh-02::before {
-  content: "\ea63";
-}
-
-.icon-shape-star::before {
-  content: "\ea64";
-}
-
-.icon-components::before {
-  content: "\ea65";
-}
--- a/frontend/src/assets/demo/demo.css
+++ b/frontend/src/assets/demo/demo.css
@ -1,77 +0,0 @@
-/*
- =========================================================
- * Black Dashboard Angular - v1.2.0
- =========================================================
-
- * Product Page: https://www.creative-tim.com/product/black-dashboard-angular
- * Copyright 2020 Creative Tim (https://www.creative-tim.com)
- * Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard/blob/master/LICENSE.md)
-
- =========================================================
-
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-*/
-.tim-row {
-  margin-bottom: 20px;
-}
-
-.tim-white-buttons {
-  background-color: #777777;
-}
-
-.typography-line {
-  padding-left: 25%;
-  margin-bottom: 35px;
-  position: relative;
-  display: block;
-  width: 100%;
-}
-
-.typography-line span {
-  bottom: 10px;
-  color: #c0c1c2;
-  display: block;
-  font-weight: 400;
-  font-size: 13px;
-  line-height: 13px;
-  left: 0;
-  position: absolute;
-  width: 260px;
-  text-transform: none;
-}
-
-.tim-row {
-  padding-top: 60px;
-}
-
-.tim-row h3 {
-  margin-top: 0;
-}
-
-.offline-doc .page-header {
-  display: flex;
-  align-items: center;
-}
-
-.offline-doc .footer {
-  position: absolute;
-  width: 100%;
-  background: transparent;
-  bottom: 0;
-  color: #fff;
-  z-index: 1;
-}
-
-@media all and (min-width: 992px) {
-  .sidebar .nav>li.active-pro {
-    position: absolute;
-    width: 100%;
-    bottom: 10px;
-  }
-}
-
-.card.card-upgrade .card-category {
-  max-width: 530px;
-  margin: 0 auto;
-}
--- a/frontend/src/assets/fonts/nucleo.eot
+++ b/frontend/src/assets/fonts/nucleo.eot
--- a/frontend/src/assets/fonts/nucleo.ttf
+++ b/frontend/src/assets/fonts/nucleo.ttf
--- a/frontend/src/assets/fonts/nucleo.woff
+++ b/frontend/src/assets/fonts/nucleo.woff
--- a/frontend/src/assets/fonts/nucleo.woff2
+++ b/frontend/src/assets/fonts/nucleo.woff2
--- a/frontend/src/assets/images/azia-social.png
+++ b/frontend/src/assets/images/azia-social.png
--- a/frontend/src/assets/images/eight.jpg
+++ b/frontend/src/assets/images/eight.jpg
--- a/frontend/src/assets/images/eight.png
+++ b/frontend/src/assets/images/eight.png
--- a/frontend/src/assets/images/five.jpg
+++ b/frontend/src/assets/images/five.jpg
--- a/frontend/src/assets/images/five.png
+++ b/frontend/src/assets/images/five.png
--- a/frontend/src/assets/images/four.jpg
+++ b/frontend/src/assets/images/four.jpg
--- a/frontend/src/assets/images/four.png
+++ b/frontend/src/assets/images/four.png
--- a/frontend/src/assets/images/img-dashboard-eight.png
+++ b/frontend/src/assets/images/img-dashboard-eight.png
--- a/frontend/src/assets/images/img-dashboard-five.png
+++ b/frontend/src/assets/images/img-dashboard-five.png
--- a/frontend/src/assets/images/img-dashboard-four.png
+++ b/frontend/src/assets/images/img-dashboard-four.png
--- a/frontend/src/assets/images/img-dashboard-nine.png
+++ b/frontend/src/assets/images/img-dashboard-nine.png
--- a/frontend/src/assets/images/img-dashboard-one.png
+++ b/frontend/src/assets/images/img-dashboard-one.png
--- a/frontend/src/assets/images/img-dashboard-seven.png
+++ b/frontend/src/assets/images/img-dashboard-seven.png
--- a/frontend/src/assets/images/img-dashboard-six.png
+++ b/frontend/src/assets/images/img-dashboard-six.png
--- a/frontend/src/assets/images/img-dashboard-ten.png
+++ b/frontend/src/assets/images/img-dashboard-ten.png
--- a/frontend/src/assets/images/img-dashboard-three.png
+++ b/frontend/src/assets/images/img-dashboard-three.png
--- a/frontend/src/assets/images/img-dashboard-two.png
+++ b/frontend/src/assets/images/img-dashboard-two.png
--- a/frontend/src/assets/images/img1.jpg
+++ b/frontend/src/assets/images/img1.jpg
--- a/frontend/src/assets/images/img10.jpg
+++ b/frontend/src/assets/images/img10.jpg
--- a/frontend/src/assets/images/img11.jpg
+++ b/frontend/src/assets/images/img11.jpg
--- a/frontend/src/assets/images/img12.jpg
+++ b/frontend/src/assets/images/img12.jpg
--- a/frontend/src/assets/images/img13.jpg
+++ b/frontend/src/assets/images/img13.jpg
--- a/frontend/src/assets/images/img14.jpg
+++ b/frontend/src/assets/images/img14.jpg
--- a/frontend/src/assets/images/img15.jpg
+++ b/frontend/src/assets/images/img15.jpg
--- a/frontend/src/assets/images/img16.jpg
+++ b/frontend/src/assets/images/img16.jpg
--- a/frontend/src/assets/images/img17.jpg
+++ b/frontend/src/assets/images/img17.jpg
--- a/frontend/src/assets/images/img18.jpg
+++ b/frontend/src/assets/images/img18.jpg
--- a/frontend/src/assets/images/img19.jpg
+++ b/frontend/src/assets/images/img19.jpg
--- a/frontend/src/assets/images/img2.jpg
+++ b/frontend/src/assets/images/img2.jpg
--- a/frontend/src/assets/images/img20.jpg
+++ b/frontend/src/assets/images/img20.jpg
--- a/frontend/src/assets/images/img21.jpg
+++ b/frontend/src/assets/images/img21.jpg
--- a/frontend/src/assets/images/img22.jpg
+++ b/frontend/src/assets/images/img22.jpg
--- a/frontend/src/assets/images/img23.jpg
+++ b/frontend/src/assets/images/img23.jpg
--- a/frontend/src/assets/images/img24.jpg
+++ b/frontend/src/assets/images/img24.jpg
--- a/frontend/src/assets/images/img3.jpg
+++ b/frontend/src/assets/images/img3.jpg
--- a/frontend/src/assets/images/img4.jpg
+++ b/frontend/src/assets/images/img4.jpg
--- a/frontend/src/assets/images/img5.jpg
+++ b/frontend/src/assets/images/img5.jpg
--- a/frontend/src/assets/images/img6.jpg
+++ b/frontend/src/assets/images/img6.jpg
--- a/frontend/src/assets/images/img7.jpg
+++ b/frontend/src/assets/images/img7.jpg
--- a/frontend/src/assets/images/img8.jpg
+++ b/frontend/src/assets/images/img8.jpg
--- a/frontend/src/assets/images/img9.jpg
+++ b/frontend/src/assets/images/img9.jpg
--- a/frontend/src/assets/images/mastercard.png
+++ b/frontend/src/assets/images/mastercard.png
--- a/frontend/src/assets/images/nine.jpg
+++ b/frontend/src/assets/images/nine.jpg
--- a/frontend/src/assets/images/nine.png
+++ b/frontend/src/assets/images/nine.png
--- a/frontend/src/assets/images/one.jpg
+++ b/frontend/src/assets/images/one.jpg
--- a/frontend/src/assets/images/one.png
+++ b/frontend/src/assets/images/one.png
--- a/frontend/src/assets/images/seven.jpg
+++ b/frontend/src/assets/images/seven.jpg
--- a/frontend/src/assets/images/seven.png
+++ b/frontend/src/assets/images/seven.png
--- a/Show More
+++ b/Show More