penambahan menu device

src/app/_layout/breadcrumb/breadcrumb.component.html

@@ -12,7 +12,7 @@
       </div>
     </div>
   </div>
-  <div class="content-header-right col-md-6 col-12">
+  <!-- <div class="content-header-right col-md-6 col-12">
     <div  class="d-inline-block float-md-right" ngbDropdown>
       <button class="btn btn-info" id="dropdownBasic1" ngbDropdownToggle>Action</button>
       <div ngbDropdownMenu class="arrow _dropdown_mob dropdown-menu-right" aria-labelledby="dropdownBasic1">
@@ -23,5 +23,5 @@
         <button class="dropdown-item">Settings</button>
       </div>
     </div>
-  </div>
+  </div> -->
 </div>

src/app/_layout/settings/menu-settings.config.ts

@@ -851,6 +851,7 @@ export const MenuSettingsConfig: MenuConfig = {
       }
     ]
   },
+
   vertical_menu: {
     items: [
       {
@@ -892,8 +893,31 @@ export const MenuSettingsConfig: MenuConfig = {
       //     ]
       //   }
       // },
-      { section: 'APPS', icon: 'la-ellipsis-h' },
+      
+      { section: 'Hemat', icon: 'la-ellipsis-h' },
 
+      {
+        title: 'Monitoring',
+        icon: 'feather ft-monitor',
+        page: '/monitoring'
+      },
+      {
+        title: 'Device',
+        icon: 'feather ft-life-buoy',
+        page: '/device'
+      },
+      {
+        title: 'Cost Management',
+        icon: 'feather ft-bar-chart-2',
+        page: '/cost-management'
+      },
+      {
+        title: 'User Access',
+        icon: 'feather ft-user-check',
+        page: '/user-access'
+      },
+
+      { section: 'APPS', icon: 'la-ellipsis-h' },
       {
         title: 'To Do',
         icon: 'la-edit',

src/app/app.module.ts

@@ -67,7 +67,7 @@ import { FullLayoutComponent } from './_layout/full-layout/full-layout.component
 import { ToastrModule } from 'ngx-toastr';
 import { UserService } from './_api/user/user.service';
 import { PrivacyPolicyComponent } from './login/privacy-policy/privacy-policy.component';
-import { TermsConditionComponent } from './login/terms-condition/terms-condition.component';;
+import { TermsConditionComponent } from './login/terms-condition/terms-condition.component';
 
 @NgModule({
   imports: [

src/app/app.routing.ts

@@ -48,6 +48,26 @@ const appRoutes: Routes = [
     children: [
       { path: 'logout', component: LoginComponent, canActivate: [AuthGuard] },
       { path: 'changelog', component: ChangelogComponent, canActivate: [AuthGuard] },
+      {
+        path: 'monitoring', loadChildren: () => import('../app/content/hemat-app/monitoring/monitoring.module').then(m => m.MonitoringModule)
+        , canActivate: [AuthGuard]
+      },
+      {
+        path: 'device', loadChildren: () => import('../app/content/hemat-app/device/device.module').then(m => m.DeviceModule)
+        , canActivate: [AuthGuard]
+      },
+      {
+        path: 'cost-management', loadChildren: () => import('../app/content/hemat-app/cost-management/cost-management.module').then(m => m.CostManagementModule)
+        , canActivate: [AuthGuard]
+      },
+      {
+        path: 'user-access', loadChildren: () => import('../app/content/hemat-app/user-access/user-access.module').then(m => m.UserAccessModule)
+        , canActivate: [AuthGuard]
+      },
+      {
+        path: 'master', loadChildren: () => import('../app/content/hemat-app/master/master.module').then(m => m.MasterModule)
+        , canActivate: [AuthGuard]
+      },
       {
         path: 'dashboard', loadChildren: () => import('../app/content/dashboard/dashboard.module').then(m => m.DashboardModule)
         , canActivate: [AuthGuard]

src/app/content/hemat-app/cost-management/cost-management.component.html

@@ -0,0 +1 @@
+<p>cost-management works!</p>

src/app/content/hemat-app/cost-management/cost-management.component.spec.ts

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

src/app/content/hemat-app/cost-management/cost-management.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-cost-management',
+  templateUrl: './cost-management.component.html',
+  styleUrls: ['./cost-management.component.css']
+})
+export class CostManagementComponent {
+
+}

src/app/content/hemat-app/cost-management/cost-management.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CostManagementComponent } from './cost-management.component';
+import { RouterModule } from '@angular/router';
+
+
+
+@NgModule({
+  declarations: [
+    CostManagementComponent
+  ],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        component: CostManagementComponent
+      }
+    ])
+  ]
+})
+export class CostManagementModule { }

src/app/content/hemat-app/device/device.component.css

@@ -0,0 +1,190 @@
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-header .datatable-header-cell .datatable-header-cell-label {
+    font-family: inherit;
+    font-size: medium;
+    font-weight: bold;
+    color: #6B6F82;
+}
+:host ::ng-deep .ngx-datatable .datatable-row-center, .ngx-datatable .datatable-row-group, .ngx-datatable .datatable-row-right {
+    position: relative;
+    height: 50px !important;
+}
+
+:host ::ng-deep .datatable-icon-right:before {
+    font-family: 'icofont';
+    font-style: normal;
+}
+
+:host ::ng-deep .datatable-icon-skip:before {
+    font-family: 'icofont';
+    font-style: normal;
+}
+
+:host ::ng-deep .datatable-icon-left:before {
+    font-family: 'icofont';
+    font-style: normal;
+}
+
+:host ::ng-deep .datatable-icon-left:before {
+    content: "\2039";
+    font-size: x-large;
+}
+
+:host ::ng-deep .datatable-icon-prev:before {
+    content: "\00AB";
+    font-size: x-large;
+}
+
+:host ::ng-deep .datatable-icon-right:before {
+    content: "\203A";
+    font-size: x-large;
+}
+
+:host ::ng-deep .datatable-icon-skip:before {
+    content: "\00BB";
+    font-size: x-large;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
+.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
+.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
+    font-size: 16px;
+    line-height: 22px;
+    padding: 0px 09px;
+    background-color: #d4d2e7;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
+.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right {
+    font-size: 16px;
+    line-height: 22px;
+    padding: 0px 09px;
+    background-color: #d4d2e7;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip {
+    font-size: 16px;
+    line-height: 22px;
+    padding: 0px 09px;
+    background-color: #d4d2e7;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
+    font-size: 16px;
+    line-height: 22px;
+    padding: 0px 09px;
+    background-color: #d4d2e7;
+}
+
+:host ::ng-deep .datatable-footer .datatable-pager ul li:not(.disabled).active a,
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] ul[_ngcontent-c11] li[_ngcontent-c11]:not(.disabled):hover a[_ngcontent-c11] {
+    background-color: #d4d2e7;
+    font-weight: bold;
+    font-size: larger;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager a {
+    height: 32px;
+    min-width: 34px;
+    line-height: 22px;
+    padding: 0;
+    border-radius: 3px;
+    margin: 0 3px;
+    text-align: center;
+    vertical-align: top;
+    padding-top: 3px;
+    text-decoration: none;
+    vertical-align: bottom;
+    color: #7c8091;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
+    font-size: 14px;
+    line-height: 9px;
+    padding: 0px 08px;
+    background-color: #ffffff;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
+    font-size: 0px;
+    line-height: 22px;
+    padding: 0px 09px;
+    background-color: #ffffff;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
+    font-size: 0px;
+    line-height: 22px;
+    padding: 0px 09px;
+    background-color: #ffffff;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip,
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
+    font-size: 0px;
+    line-height: 22px;
+    padding: 0px 09px;
+    background-color: #ffffff;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev,
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
+    font-size: 0px;
+    line-height: 22px;
+    padding: 0px 09px;
+    background-color: #ffffff;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
+    background-color: #545454;
+    font-weight: bold;
+    color: white;
+
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled).active a,
+.ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
+    background-color: #545454;
+    font-weight: bold;
+    color: white;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
+    background: #727e8e;
+    color: #ededed;
+    margin-top: -1px;
+    overflow: inherit;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
+    font-weight: bold;
+    height: unset !important;
+    overflow: inherit
+}
+
+:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager {
+    flex: 0 0 0%;
+}
+
+:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager .pager {
+    display: flex;
+}
+
+:host ::ng-deep .block-ui-wrapper {
+    background: rgba(255, 249, 249, 0.5) !important;
+}
+:host ::ng-deep .ngx-datatable .datatable-footer .selected-count .datatable-pager {
+   flex: 0 0 0%;
+}
+
+:host ::ng-deep .ngx-datatable {
+  display: -webkit-box;
+}
+

src/app/content/hemat-app/device/device.component.html

@@ -0,0 +1,74 @@
+<div class="app-content content">
+    <div class="content-wrapper">
+      <div class="content-header row mb-1">
+        <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
+      </div>
+      <div class="content-body">
+        <!-- Add rows table -->
+        <section id="add-row">
+          <div class="row">
+            <div class="col-12" *blockUI="'addRows'; message: 'Loading'">
+              <m-card [options]="options" (reloadFunction)="reloadAddRows($event)">
+                <ng-container mCardBody>
+                  <!-- <p class="card-text">New rows can be added to a DataTable very easily using the
+                    (addFieldValue()) function.
+                  </p> -->
+                  <button id="addRow" class="btn btn-secondary my-1 mb-2" (click)="addFieldValue()"><i class="feather ft-plus"></i>&nbsp;
+                    Add new row</button>
+                  <div class="table table-striped table-bordered add-rows">
+                    <ngx-datatable class="bootstrap" [sortType]="'multi'" [headerHeight]="50" [limit]="7"
+                      [footerHeight]="40" [rowHeight]="40" [rows]="rows" [columnMode]="'force'"
+                      [loadingIndicator]="loadingIndicator" fxFlex="auto" [perfectScrollbar]="config">
+                      <ngx-datatable-column name="ID" [flexGrow]="1" [minWidth]="20">
+                        <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" *ngfor let element of rows>
+                          <b>{{element.id}}</b>
+                        </ng-template>
+                      </ngx-datatable-column>
+                      <ngx-datatable-column name="Name" [flexGrow]="1" [minWidth]="70">
+                        <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" *ngfor let element of rows>
+                          <span>
+                            {{element.name}}
+                          </span>
+                        </ng-template>
+                      </ngx-datatable-column>
+                      <ngx-datatable-column name="Position" [flexGrow]="1" [minWidth]="90">
+                        <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row" *ngfor let element
+                          of rows>
+                          <span>
+                            {{element.position}}
+                          </span>
+                        </ng-template>
+                      </ngx-datatable-column>
+  
+                      <ngx-datatable-column name="Office" [flexGrow]="1" [minWidth]="90">
+                        <ng-template ngx-datatable-cell-template *ngfor let element of rows>
+                          {{element.office}}
+                        </ng-template>
+                      </ngx-datatable-column>
+  
+                      <ngx-datatable-column name="Age" [flexGrow]="1" [minWidth]="30">
+                        <ng-template ngx-datatable-cell-template *ngfor let element of rows>
+                          {{element.age}}
+                        </ng-template>
+                      </ngx-datatable-column>
+                      <ngx-datatable-column name="Salary" [flexGrow]="1" [minWidth]="90">
+                        <ng-template ngx-datatable-cell-template *ngfor let element of rows>
+                          {{element.salary}}
+                        </ng-template>
+                      </ngx-datatable-column>
+                      <ngx-datatable-column name="Startdate" [flexGrow]="1" [minWidth]="90">
+                        <ng-template ngx-datatable-cell-template *ngfor let element of rows>
+                          {{element.startdate}}
+                        </ng-template>
+                      </ngx-datatable-column>
+                    </ngx-datatable>
+  
+                  </div>
+                </ng-container>
+              </m-card>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>

src/app/content/hemat-app/device/device.component.spec.ts

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

src/app/content/hemat-app/device/device.component.ts

@@ -0,0 +1,203 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgBlockUI, BlockUI } from 'ng-block-ui';
+import { PerfectScrollbarDirective, PerfectScrollbarComponent, PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
+import { TableApiService } from 'src/app/_services/table-api.service';
+
+@Component({
+  selector: 'app-device',
+  templateUrl: './device.component.html',
+  styleUrls: ['./device.component.css']
+})
+export class DeviceComponent implements OnInit{
+  data: any;
+
+  @BlockUI('addRows') blockUIAddRows: NgBlockUI;
+  @BlockUI('rowSelection') blockUIRowSelection: NgBlockUI;
+
+  public config: PerfectScrollbarConfigInterface = { wheelPropagation: true };
+  @ViewChild(PerfectScrollbarComponent) componentRef?: PerfectScrollbarComponent;
+  @ViewChild(PerfectScrollbarDirective, { static: true }) directiveRef?: PerfectScrollbarDirective;
+
+  options = {
+    close: true,
+    expand: true,
+    minimize: true,
+    reload: true
+  };
+  temp = [];
+  selected = [];
+  id: number;
+  loadingIndicator: true;
+  rows: any;
+  editing = {};
+  row: any;
+  public breadcrumb: any;
+
+  constructor(private tableApiservice: TableApiService) { }
+
+  ngOnInit() {
+    this.breadcrumb = {
+      'mainlabel': 'Device List',
+      'links': [
+        {
+          'name': 'Home',
+          'isLink': false,
+          'link': '/dashboard/sales'
+        },
+        {
+          'name': 'Device',
+          'isLink': false
+        }
+      ]
+    };
+      this.tableApiservice.getTableApiData().subscribe(Response => {
+      this.data = Response;
+      this.getTabledata();
+      });
+  }
+  getTabledata() {
+    this.rows = this.data.rows;
+    this.row = this.data.row;
+  }
+  updateFiltername(event) {
+    const val = event.target.value.toLowerCase();
+
+    // filter our data
+    const temp = this.rows.filter(function (d) {
+      return d.name.toLowerCase().indexOf(val) !== -1 || !val;
+    });
+
+
+    this.rows = temp;
+
+  }
+  updateFilterposition(event) {
+    const val = event.target.value.toLowerCase();
+
+    // filter our data
+    const temp = this.rows.filter(function (d) {
+      return d.position.toLowerCase().indexOf(val) !== -1 || !val;
+    });
+
+
+    this.rows = temp;
+
+  }
+  updateFilteroffice(event) {
+    const val = event.target.value.toLowerCase();
+
+    // filter our data
+    const temp = this.rows.filter(function (d) {
+      return d.office.toLowerCase().indexOf(val) !== -1 || !val;
+    });
+
+
+    this.rows = temp;
+
+  }
+
+  updateFilterage(event) {
+    const val = event.target.value.toLowerCase();
+
+    // filter our data
+    const temp = this.rows.filter(function (d) {
+      return d.age.toLowerCase().indexOf(val) !== -1 || !val;
+    });
+
+
+    this.rows = temp;
+
+  }
+  updateFiltersalary(event) {
+    const val = event.target.value.toLowerCase();
+
+    // filter our data
+    const temp = this.rows.filter(function (d) {
+      return d.salary.toLowerCase().indexOf(val) !== -1 || !val;
+    });
+
+
+    this.rows = temp;
+
+  }
+  updateFilterstartdate(event) {
+    const val = event.target.value.toLowerCase();
+
+    // filter our data
+    const temp = this.rows.filter(function (d) {
+      return d.startdate.toLowerCase().indexOf(val) !== -1 || !val;
+    });
+
+
+    this.rows = temp;
+
+  }
+
+  // eslint-disable-next-line @typescript-eslint/member-ordering
+  private newAttribute = { 'id': 15, name: 'Mark', position: 'Otto', office: '@mdo', age: '31', salary: '12000', startdate: '16/05/2017' };
+
+  addFieldValue() {
+    this.rows.push(this.newAttribute);
+    this.rows = [...this.rows];
+  }
+  deleteFieldValue(index) {
+    this.rows.splice(index, 1);
+  }
+  deleteRow(id) {
+    let i = 0;
+    for (const row of this.rows) {
+      if (row.id === id) {
+        break;
+      }
+      i++;
+    }
+    const temp = [...this.rows];
+    temp.splice(i, 1);
+    this.rows = temp;
+  }
+   updateValue(event, cell, rowIndex) {
+
+    this.editing[rowIndex + '-' + cell] = false;
+    this.row[rowIndex][cell] = event.target.value;
+    const temp = [...this.row];
+    this.row = temp;
+  }
+
+  reloadAddRows() {
+    this.blockUIAddRows.start('Loading..');
+
+    setTimeout(() => {
+      this.blockUIAddRows.stop();
+    }, 2500);
+  }
+  onSelect({ selected }) {
+    this.selected.splice(0, this.selected.length);
+    this.selected.push(...selected);
+  }
+  reloadRowSelection() {
+    this.blockUIRowSelection.start('Loading..');
+
+    setTimeout(() => {
+      this.blockUIRowSelection.stop();
+    }, 2500);
+  }
+  deleteCheckedRow() {
+    let index = 0;
+    const removedIndex = [];
+    const temp = [...this.rows];
+    for (const row of temp) {
+      for (const selectedRow of this.selected) {
+        if (row.id === selectedRow.id) {
+          removedIndex.push(index);
+        }
+      }
+      index++;
+    }
+
+    for (let i = removedIndex.length - 1; i >= 0; i--) {
+      temp.splice(removedIndex[i], 1);
+    }
+    this.rows = temp;
+    this.selected = [];
+  }
+}

src/app/content/hemat-app/device/device.module.ts

@@ -0,0 +1,42 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DeviceComponent } from './device.component';
+import { RouterModule } from '@angular/router';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+
+import { NgSelectModule } from '@ng-select/ng-select';
+import { FormsModule } from '@angular/forms';
+import { ClipboardModule } from 'ngx-clipboard';
+import { CardModule } from '../../partials/general/card/card.module';
+import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
+import { BlockUIModule } from 'ng-block-ui';
+import { BlockTemplateComponent } from '../../../_layout/blockui/block-template.component';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+
+
+
+@NgModule({
+  declarations: [
+    DeviceComponent
+  ],
+  imports: [
+    CommonModule,
+    CardModule,
+    BreadcrumbModule,
+    NgSelectModule,
+    FormsModule,
+    ClipboardModule,
+    PerfectScrollbarModule,
+    NgxDatatableModule,
+    BlockUIModule.forRoot({
+      template: BlockTemplateComponent
+    }),
+    RouterModule.forChild([
+      {
+        path: '',
+        component: DeviceComponent
+      }
+    ])
+  ]
+})
+export class DeviceModule { }

src/app/content/hemat-app/master/master.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class MasterModule { }

src/app/content/hemat-app/monitoring/monitoring.component.css

@@ -0,0 +1,281 @@
+:host ::ng-deep .chartist .ct-series-a .ct-line {
+
+    stroke: url(#gradient2);
+    stroke-linecap: round;
+    /* -webkit-filter: drop-shadow(0px 20px 11px rgba(0, 0, 0, 0.5)) !important; */
+   }
+:host ::ng-deep .chartist {
+    filter: drop-shadow(0px 20px 11px rgba(252, 198, 198, 0.8)) !important;
+}
+
+:host ::ng-deep .chartist .ct-grid{
+    stroke-dasharray: 0px;
+    stroke: rgba(0, 0, 0, 0.4);
+    stroke-width: 0.6px;
+}
+:host ::ng-deep .chartist .ct-series-b .ct-line {
+    stroke: #c8c2c3;
+    stroke-dasharray: 8px 3px;
+}
+
+:host ::ng-deep .chartist .ct-label.ct-vertical.ct-start {
+    font-weight: 600;
+    color: #636161;
+    font-size: 12px;
+}
+:host ::ng-deep .earningchart .ct-series-a .ct-area {
+    fill: rgba(255,117,136,1);
+}
+:host ::ng-deep .earningchart .ct-series-a .ct-point-circle {
+    stroke-width: 3px;
+    stroke: #FF4961;
+    fill: #ffffff;
+  }
+
+:host ::ng-deep .earningchart .ct-series-a .ct-line {
+    stroke: #FF4961;
+    stroke-width: 3px;
+}
+
+:host ::ng-deep .avatar-xs {
+  width: 32px !important;
+  border: 2px solid #FFF;
+}
+:host ::ng-deep .donut-chart2{
+    margin-bottom: -25px;
+    margin-top: -17px;
+}
+
+:host ::ng-deep .donut-chart2 .ct-series-a .ct-slice-donut {
+    stroke: #28d094;
+    stroke-width: 5.5px !important;
+}
+
+:host ::ng-deep .donut-chart2 .ct-series-b .ct-slice-donut {
+    stroke: #ff4961;
+    stroke-width: 5.5px !important;
+}
+:host ::ng-deep .donut-chart2 {
+-webkit-filter: drop-shadow(0px 10px 11px rgba(187,187,187)) !important;
+    filter: drop-shadow(0px 10px 11px rgba(187,187,187));
+}
+:host ::ng-deep .donut-chart1 {
+    margin-bottom: -25px;
+    margin-top: -17px;
+}
+:host ::ng-deep .donut-chart1 .ct-series-a .ct-slice-donut {
+    stroke: #ff7889;
+    stroke-width: 5.5px !important;
+}
+
+:host ::ng-deep .donut-chart1 .ct-series-b .ct-slice-donut {
+    stroke: #ffffff;
+    stroke-width: 5.5px !important;
+}
+
+:host ::ng-deep .donut-chart1 .ct-label {
+    fill: #ffffff;
+    color: rgba(0, 0, 0, 0.4);
+    font-size: 1.75rem;
+    line-height: 1;
+}
+
+:host ::ng-deep .donut-chart2 .ct-label {
+    fill: #ff4b62;
+    color: rgba(0, 0, 0, 0.4);
+    font-size: 1.75rem;
+    line-height: 1;
+}
+
+:host ::ng-deep .position-relative {
+    position: relative !important;
+    margin-left: 0px;
+
+}
+
+:host ::ng-deep .pt-1,
+.py-1 {
+    padding-top: 0rem !important;
+}
+
+:host ::ng-deep .chartist .ct-label.ct-horizontal.ct-end {
+    /* align-items: flex-start;
+    justify-content: flex-start;
+    text-align: left;
+    text-anchor: start; */
+    font-weight: 600;
+    color: #636161;
+    font-size: 12px;
+    font-family: sans-serif;
+}
+
+
+:host ::ng-deep .container > .ct-chart .ct-series.ct-series-c .ct-line {
+    stroke-width: 2px;
+    stroke-dasharray: 20px 180px;
+    stroke: #28d094;
+    animation: draw 0.3s linear infinite;
+}
+
+@keyframes draw {
+    from {
+        stroke-dashoffset: 200
+    }
+
+    to {
+        stroke-dashoffset: 0;
+    }
+}
+
+:host ::ng-deep .ct-series-c .ct-point,
+.ct-series-c .ct-line,
+.ct-series-c .ct-bar,
+.ct-series-c .ct-slice-donut {
+    stroke: #28d094;
+}
+
+:host ::ng-deep .ct-chart .ct-series.ct-series-c .ct-line {
+    stroke: #28d094;
+
+}
+
+:host ::ng-deep .ct-series-b .ct-point,
+.ct-series-b .ct-line,
+.ct-series-b .ct-bar,
+.ct-series-b .ct-slice-donut {
+    stroke: #ff4961;
+}
+
+:host ::ng-deep .container > .ct-chart .ct-series.ct-series-a .ct-line {
+    stroke-dasharray: 5px;
+    animation: dash 4s linear infinite;
+
+}
+
+@keyframes dash {
+    to {
+        stroke-dashoffset: 2000;
+    }
+}
+
+:host ::ng-deep .ct-chart .ct-point {
+    stroke-width: 10px;
+    stroke-linecap: round;
+}
+
+:host ::ng-deep .container >  .ct-chart .ct-series.ct-series-b .ct-line {
+    stroke-width: 10px;
+    stroke-dasharray: 15px 5px;
+    animation: draw 4s linear infinite;
+}
+
+@keyframes draw {
+    from {
+        stroke-dashoffset: 100
+    }
+
+    to {
+        stroke-dashoffset: 0;
+    }
+}
+
+
+:host ::ng-deep .container {
+   max-width: 100% !important;
+}
+:host ::ng-deep .btn.gradient-blackberry.active,
+.gradient-blackberry {
+    background-color: #f05b4f;
+
+}
+
+:host ::ng-deep .Visit {
+
+    background-color: #28d094;
+
+}
+
+:host ::ng-deep .Sales {
+    /* background-image: linear-gradient(45deg,#843cf7,#38b8f2)!important; */
+    background-color: #d70206;
+
+}
+
+:host ::ng-deep .col-md-11 {
+    padding-right: 0 !important;
+}
+
+:host ::ng-deep .col-md-1 {
+    padding-left: 0 !important;
+}
+
+:host ::ng-deep .box-shadow-0 .ct-label.ct-vertical.ct-start {
+
+    font-weight: bold;
+    color: #6e6e6e;
+    font-size: 12px;
+}
+
+:host ::ng-deep .box-shadow-0 .ct-label.ct-horizontal.ct-end {
+
+    font-weight: bold;
+    color: #6e6e6e;
+    font-size: 12px;
+}
+
+
+:host ::ng-deep .text-truncate {
+  padding: 0.9rem 2rem;
+}
+
+.mr-2 {
+  margin-left: 1rem !important;
+  margin-right: 0rem !important;
+}
+
+.mt-2 {
+  margin-top : 1.5rem !important;
+}
+
+.ml-2 {
+  margin-left : 2rem !important;
+}
+
+:host ::ng-deep .my-custom-cell {
+  padding-right: 6% !important;
+  padding-top: 1.5% !important;
+}
+
+:host ::ng-deep .border_bottom {
+  margin-bottom: 0rem !important;
+}
+
+:host ::ng-deep .border-top-0 {
+  padding: 1.25rem 2rem !important;
+}
+
+:host ::ng-deep .progress {
+  box-shadow: 0 10px 18px 0 rgba(62, 57, 107, .2);
+  margin-top: 1rem!important;
+}
+
+:host ::ng-deep .btn-danger {
+  color: #FFF !important;
+}
+
+:host ::ng-deep .users-list li + li {
+  margin-left: -10px !important;
+}
+
+
+:host ::ng-deep .block-ui-wrapper {
+  background: rgba(255, 249, 249, 0.5) !important;
+}
+
+:host ::ng-deep .ps--active-x > .ps__rail-x {
+  display: none !important;
+}
+
+:host ::ng-deep .progress {
+    margin-bottom: 1rem !important;
+}

src/app/content/hemat-app/monitoring/monitoring.component.html

@@ -0,0 +1,271 @@
+
+<div class="app-content content">
+    <div class="content-wrapper">
+      <div class="content-header row mb-1">
+      </div>
+      <div class="content-body">
+        <!-- Revenue, Hit Rate & Deals -->
+        <div class="row">
+          <div class="col-xl-6 col-12">
+            <div class="Revenue" *blockUI="'revenue'; message: 'Loading'">
+            <m-card [options]="options" (reloadFunction)="reloadRevenue($event)">
+              <ng-container mCardHeaderTitle>
+                Revenue
+              </ng-container>
+              <ng-container mCardBody>
+                <div class="row mb-1">
+                  <div class="col-6 col-md-4">
+                    <h5>Current week</h5>
+                    <h2 class="danger">$82,124</h2>
+                  </div>
+                  <div class="col-6 col-md-4">
+                    <h5>Previous week</h5>
+                    <h2 class="text-muted">$52,502</h2>
+                  </div>
+                </div>
+                <div class="chartist">
+                  <x-chartist *ngIf="lineArea" [data]="lineArea.data" [type]="lineArea.type" [options]="lineArea.options"
+                    [responsiveOptions]="lineArea.responsiveOptions" [events]="lineArea.events">
+                  </x-chartist>
+                </div>
+              </ng-container>
+            </m-card>
+            </div>
+          </div>
+          <div class="col-xl-6 col-12">
+            <div class="row">
+              <div class="col-md-6 col-12 ">
+                <div class="HitRate" *blockUI="'hitrate'; message: 'Loading'">
+                <m-card [options]="hitRateOptions" id="card" (reloadFunction)="reloadHitRate($event)">
+                  <ng-container mCardHeaderTitle>
+                    Hit Rate <span class="danger">-12%</span>
+                  </ng-container>
+                  <ng-container mCardBody>
+                    <div id="donut-chart2" class="height-230 donut-chart2">
+                      <x-chartist *ngIf="donutChart2" [data]="donutChart2.data" [type]="donutChart2.type" [options]="donutChart2.options"
+                        [responsiveOptions]="donutChart2.responsiveOptions" [events]="donutChart2.events">
+                      </x-chartist>
+                    </div>
+                  </ng-container>
+                </m-card>
+              </div>
+            </div>
+              <div class="col-md-6 col-12">
+                <m-card [options]="dealsOptions">
+                  <ng-container mCardBody>
+                    <h4 class="card-title white">Deals <span class="white">-55%</span>
+                      <span class="float-right">
+                          <span class="white">152</span><span class="red lighten-4">/200</span>
+                      </span>
+                    </h4>
+                    <div id="donut-chart1" class="height-230 donut-chart1">
+                      <x-chartist *ngIf="donutChart1" [data]="donutChart1.data" [type]="donutChart1.type" [options]="donutChart1.options"
+                        [responsiveOptions]="donutChart1.responsiveOptions" [events]="donutChart1.events">
+                      </x-chartist>
+                    </div>
+                  </ng-container>
+                </m-card>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-lg-6 col-12">
+                <div class="card pull-up">
+                  <div class="card-content">
+                    <div class="card-body">
+                      <div class="media d-flex">
+                        <div class="media-body text-left">
+                          <h6 class="text-muted">Order Value </h6>
+                          <h3>$ 88,568</h3>
+                        </div>
+                        <div class="align-self-center">
+                          <i class="icon-trophy success font-large-2 float-right"></i>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-lg-6 col-12">
+                <div class="card pull-up">
+                  <div class="card-content">
+                    <div class="card-body">
+                      <div class="media d-flex">
+                        <div class="media-body text-left">
+                          <h6 class="text-muted">Calls</h6>
+                          <h3>3,568</h3>
+                        </div>
+                        <div class="align-self-center">
+                          <i class="icon-call-in danger font-large-2 float-right"></i>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!--/ Revenue, Hit Rate & Deals -->
+  
+        <!-- Emails Products & Avg Deals -->
+        <div class="row">
+          <div class="col-12 col-md-3">
+            <div class="EmailRate" *blockUI="'email'; message: 'Updating'">
+            <m-card [options]="emailsOptions" (reloadFunction)="reloadEmail($event)">
+              <ng-container mCardHeaderTitle>
+                Emails
+              </ng-container>
+              <ng-container mCardBody>
+                <p>Open rate <span class="float-right text-bold-600">89%</span></p>
+                <ngb-progressbar height="7px" type="danger" [value]="89"></ngb-progressbar>
+                <p class="pt-1">Sent <span class="float-right"><span class="text-bold-600">310</span>/500</span>
+                </p>
+                <ngb-progressbar height="7px" type="success" [value]="50"></ngb-progressbar>
+              </ng-container>
+            </m-card>
+          </div>
+          </div>
+          <div class="col-12 col-md-3">
+            <div class="card">
+              <div class="card-header">
+                <h4 class="card-title">Top Products</h4>
+                <div class="heading-elements">
+                  <ul class="list-inline mb-0">
+                    <li><a class="info">Show all</a></li>
+                  </ul>
+                </div>
+              </div>
+              <div class="card-content collapse show">
+                <div class="card-body p-0">
+                    <div class="table-responsive">
+                    <table class="table mb-0">
+                      <tbody>
+                        <tr>
+                          <th scope="row" class="border-top-0">iPone X</th>
+                          <td class="border-top-0">2245</td>
+                        </tr>
+                        <tr>
+                          <th scope="row">One Plus</th>
+                          <td>1850</td>
+                        </tr>
+                        <tr>
+                          <th scope="row">Samsung S7</th>
+                          <td>1550</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-12 col-md-6">
+            <div class="card">
+              <div class="card-header">
+                <h4 class="card-title text-center">Average Deal Size</h4>
+              </div>
+              <div class="card-content collapse show">
+                <div class="card-body pt-0">
+                  <div class="row">
+                    <div class="col-md-6 col-12 border-right-blue-grey border-right-lighten-5 text-center">
+                      <h6 class="danger text-bold-600">-30%</h6>
+                      <h4 class="font-large-2 text-bold-400">$12,536</h4>
+                      <p class="blue-grey lighten-2 mb-0">Per rep</p>
+                    </div>
+                    <div class="col-md-6 col-12 text-center">
+                      <h6 class="success text-bold-600">12%</h6>
+                      <h4 class="font-large-2 text-bold-400">$18,548</h4>
+                      <p class="blue-grey lighten-2 mb-0">Per team</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!--/ Emails Products & Avg Deals -->
+  
+        <!-- Total earning & Recent Sales  -->
+        <div class="row">
+          <div class="col-12 col-md-4">
+            <div class="card">
+              <div class="card-content">
+                <div class="earning-chart position-relative">
+                  <div class="chart-title position-absolute mt-2 ml-2">
+                    <h1 class="display-4">$1,596</h1>
+                    <span class="text-muted">Total Earning</span>
+                  </div>
+                  <div id="cost-revenue" class="earningchart position-relative">
+                    <x-chartist *ngIf="earningchart" [data]="earningchart.data" [type]="earningchart.type" [options]="earningchart.options"
+                      [responsiveOptions]="earningchart.responsiveOptions" [events]="earningchart.events">
+                    </x-chartist>
+                  </div>
+                  <div class="chart-stats position-absolute position-bottom-0 position-right-0 mb-2 mr-3">
+                    <a [routerLink]="" class="btn round btn-danger mr-1 btn-glow">Statistics <i class="feather ft-bar-chart"></i></a>
+                    <span class="text-muted">for the <a [routerLink]="" class="danger darken-2">last year.</a></span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+  
+          <div id="recent-sales" class="col-12 col-md-8">
+            <div class="card">
+              <div class="card-header">
+                <h4 class="card-title">Recent Sales</h4>
+                <div class="heading-elements">
+                  <ul class="list-inline mb-0">
+                    <li><a [routerLink]="" class="btn btn-sm btn-danger box-shadow-2 round btn-min-width pull-right" (click)="rotueInvoice()">View
+                        all</a></li>
+                  </ul>
+                </div>
+              </div>
+              <div class="card-content mt-1">
+                  <div class="table-responsive" fxFlex="auto" [perfectScrollbar]="config">
+                      <table class="table border_bottom table-hover">
+                        <thead>
+                          <tr>
+                            <th scope="col" class="border-top-0">Product</th>
+                            <th scope="col" class="border-top-0">Customers</th>
+                            <th scope="col" class="border-top-0">Categories</th>
+                            <th scope="col" class="border-top-0">Popularity</th>
+                            <th scope="col" class="border-top-0">Amount</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr *ngFor="let row of rows">
+                            <td class="text-truncate">
+                              {{row.product}}
+                            </td>
+                            <td class="text-truncate p-1">
+                                <ul class="list-unstyled users-list m-0">
+                                    <li class="avatar avatar-sm pull-up" *ngFor="let imageUrl of row.image">
+                                      <img class="media-object rounded-circle" [src]="imageUrl" alt="Avatar">
+                                    </li>
+                                  </ul>
+                            </td>
+                            <td class="text-truncate">
+                              <span>
+                                <button type="button"
+                                  class="btn btn-sm btn-outline-{{row.type}} round">{{row.buttonname}}</button>
+                              </span>
+                            </td>
+                            <td class="text-truncate">
+                                <ngb-progressbar height="7px" type="{{row.type}}" [value]=row.value>
+                                  </ngb-progressbar>
+                            </td>
+                            <td class="text-truncate">{{ row.amount }} </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!--/ Total earning & Recent Sales  -->
+      </div>
+    </div>
+  </div>
+  <!-- ////////////////////////////////////////////////////////////////////////////-->
+  

src/app/content/hemat-app/monitoring/monitoring.component.spec.ts

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

src/app/content/hemat-app/monitoring/monitoring.component.ts

@@ -0,0 +1,333 @@
+import { Component, OnInit, ViewChild, Renderer2 } from '@angular/core';
+import * as Chartist from 'chartist';
+import { DatatableComponent } from '@swimlane/ngx-datatable';
+import { ChartEvent, ChartType } from 'ng-chartist';
+import { BlockUI, NgBlockUI } from 'ng-block-ui';
+import { PerfectScrollbarComponent, PerfectScrollbarDirective, PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
+import { ChartApiService } from '../../../_services/chart.api';
+import { Router } from '@angular/router';
+export interface Chart {
+  type: ChartType;
+  data: Chartist.IChartistData;
+  options?: any;
+  responsiveOptions?: any;
+  events?: ChartEvent;
+}
+@Component({
+  selector: 'app-monitoring',
+  templateUrl: './monitoring.component.html',
+  styleUrls: ['./monitoring.component.css']
+})
+export class MonitoringComponent implements OnInit{
+
+  @BlockUI('revenue') blockUIRevenue: NgBlockUI;
+  @BlockUI('hitrate') blockUIHitRate: NgBlockUI;
+  @BlockUI('email') blockUIEmail: NgBlockUI;
+
+  public config: PerfectScrollbarConfigInterface = { suppressScrollY: true };
+  @ViewChild(PerfectScrollbarComponent) componentRef?: PerfectScrollbarComponent;
+  @ViewChild(PerfectScrollbarDirective, { static: true }) directiveRef?: PerfectScrollbarDirective;
+
+  salesData: any;
+  lineArea: any;
+  earningchart: any;
+  donutChart2: any;
+  donutChart1: any;
+  options = {
+    bodyClass: ['pt-0'],
+    close: false,
+    expand: false,
+    minimize: false,
+    reload: true
+  };
+
+  hitRateOptions = {
+    bodyClass: ['bg-hexagons', 'pt-0'],
+    headerClass: ['bg-hexagons'],
+    cardClass: ['pull-up'],
+    close: false,
+    expand: false,
+    minimize: false,
+    reload: true
+  };
+
+  dealsOptions = {
+    bodyClass: ['bg-hexagons-danger'],
+    cardClass: ['pull-up'],
+    contentClass: ['bg-gradient-directional-danger']
+  };
+
+  emailsOptions = {
+    bodyClass: ['pt-0'],
+    close: false,
+    expand: false,
+    minimize: false,
+    reload: true
+  };
+  loadingIndicator = true;
+
+  firstRow = ['../../../assets/images/portrait/small/avatar-s-4.png',
+    '../../../assets/images/portrait/small/avatar-s-5.png',
+    '../../../assets/images/portrait/small/avatar-s-6.png'];
+  secondRow = ['../../../assets/images/portrait/small/avatar-s-7.png',
+    '../../../assets/images/portrait/small/avatar-s-8.png'];
+  thirdRow = ['../../../assets/images/portrait/small/avatar-s-1.png',
+    '../../../assets/images/portrait/small/avatar-s-2.png',
+    '../../../assets/images/portrait/small/avatar-s-3.png'];
+  fourthRow = ['../../../assets/images/portrait/small/avatar-s-11.png',
+    '../../../assets/images/portrait/small/avatar-s-12.png'];
+  fifthRow = ['../../../assets/images/portrait/small/avatar-s-6.png',
+    '../../../assets/images/portrait/small/avatar-s-4.png'];
+  rows = [
+    {
+      'type': 'danger', 'value': 85, 'product': 'iPhone X',
+      'image': this.firstRow, 'buttonname': 'Mobile', 'amount': '$ 1200.00', 'bagde': '+8 more'
+    },
+    {
+      'type': 'success', 'value': 75, 'product': 'iPad',
+      'image': this.secondRow, 'buttonname': 'Teblet', 'amount': '$ 1190.00', 'bagde': '+5 more'
+    },
+    {
+      'type': 'danger', 'value': 65, 'product': 'OnePlus',
+      'image': this.thirdRow, 'buttonname': 'Mobile', 'amount': '$ 999.00', 'bagde': '+3 more'
+    },
+    {
+      'type': 'success', 'value': 55, 'product': 'ZenPad',
+      'image': this.fourthRow, 'buttonname': 'Teblet', 'amount': '$ 1150.00'
+    },
+    {
+      'type': 'danger', 'value': 45, 'product': 'Pixel 2',
+      'image': this.fifthRow, 'buttonname': 'Mobile', 'amount': '$ 1180.00'
+    }
+  ];
+
+  @ViewChild(DatatableComponent, { static: true }) table: DatatableComponent;
+  Daygraph = true;
+  Weekgraph = false;
+  Monthgraph = false;
+  ngOnInit() {
+    this.chartApiservice.getSalesData().subscribe(Response => {
+      this.salesData = Response;
+      this.getChartdata();
+    });
+  }
+  constructor(private _renderer: Renderer2, private route: Router,
+    private chartApiservice: ChartApiService) { }
+  reloadRevenue() {
+    this.blockUIRevenue.start('Loading..');
+
+    setTimeout(() => {
+      this.blockUIRevenue.stop();
+    }, 2500);
+  }
+
+  reloadHitRate() {
+    this.blockUIHitRate.start('Please Wait..');
+
+    setTimeout(() => {
+      this.blockUIHitRate.stop();
+    }, 2500);
+  }
+
+  reloadEmail() {
+    this.blockUIEmail.start();
+
+    setTimeout(() => {
+      this.blockUIEmail.stop();
+    }, 2500);
+  }
+  rotueInvoice() {
+    this.route.navigate(['/invoice/invoice-summary']);
+  }
+  getChartdata() {
+    const Chartdata = this.salesData;
+    this.lineArea = {
+      type: 'Line',
+      data: Chartdata['lineArea'],
+      options: {
+        lineSmooth: Chartist.Interpolation.simple({
+          divisor: 2.8
+        }),
+        fullWidth: true,
+        height: '270px',
+        showArea: false,
+        showPoint: false,
+        axisX: {
+          showGrid: false,
+          showLabel: true,
+          offset: 32
+        },
+        axisY: {
+          showGrid: true,
+          showLabel: true,
+          scaleMinSpace: 28,
+          offset: 44
+        },
+      },
+      events: {
+        created(data: any): void {
+          const defs = data.svg.elem('defs');
+          defs.elem('linearGradient', {
+            id: 'gradient2',
+            x1: 0,
+            y1: 0,
+            x2: 1,
+            y2: 0
+          }).elem('stop', {
+            offset: 0,
+            'stop-color': 'rgb(255,73,97)'
+          }).parent().elem('stop', {
+            offset: 1,
+            'stop-color': 'rgb(255,73,97)'
+          });
+        },
+        draw(data: any): void {
+          const circleRadius = 4;
+          if (data.type === 'point') {
+            const circle = new Chartist.Svg('circle', {
+              cx: data.x,
+              cy: data.y,
+              r: circleRadius,
+              class: 'ct-point-circle'
+            });
+            data.element.replace(circle);
+          } else if (data.type === 'label') {
+            // adjust label position for rotation
+            const dX = data.width / 2 + (26 - data.width);
+            data.element.attr({ x: data.element.attr('x') - dX });
+          }
+        }
+      },
+    };
+    this.earningchart = {
+      type: 'Line',
+      data: Chartdata['earningchart'],
+      options: {
+        chartPadding: 0,
+        height: '440px',
+        low: 0,
+        showArea: true,
+        fullWidth: true,
+        onlyInteger: true,
+        axisX: {
+          showGrid: false,
+          showLabel: false,
+          offset: -1
+        },
+        axisY: {
+          scaleMinSpace: 40,
+          showGrid: false,
+          showLabel: false,
+          offset: -2
+        },
+      },
+      responsiveOptions: [
+        ['screen and (max-width: 640px) and (min-width: 381px)', {
+          axisX: {
+            labelInterpolationFnc: function (value, index) {
+              return index % 2 === 0 ? value : null;
+            }
+          }
+        }],
+        ['screen and (max-width: 380px)', {
+          axisX: {
+            labelInterpolationFnc: function (value, index) {
+              return index % 3 === 0 ? value : null;
+            }
+          }
+        }]
+      ],
+      events: {
+        created(data: any): void {
+          const defs = data.svg.elem('defs');
+          defs.elem('linearGradient', {
+            id: 'gradient1',
+            x1: 0,
+            y1: 0,
+            x2: 1,
+            y2: 0
+          }).elem('stop', {
+            offset: 0,
+            'stop-color': 'rgb(255,73,97)'
+          }).parent().elem('stop', {
+            offset: 1,
+            'stop-color': 'rgb(255,73,97)'
+          });
+        },
+        draw(data: any): void {
+          const circleRadius = 6;
+          if (data.type === 'point') {
+            const circle = new Chartist.Svg('circle', {
+              cx: data.x,
+              cy: data.y,
+              r: circleRadius,
+              class: 'ct-point-circle'
+            });
+            data.element.replace(circle);
+          }
+        }
+      },
+    };
+    // Doughnut
+    this.donutChart2 = {
+      type: 'Pie',
+      data: Chartdata['donut1'],
+      options: {
+        chartPadding: 0,
+        fullwidth: true,
+        height: '273px',
+        donut: true,
+        showLabel: true,
+        startAngle: 0,
+        labelInterpolationFnc: function (value) {
+          const total = 82;
+          return total + '%';
+        }
+      },
+      events: {
+        draw(data: any): void {
+          if (data.type === 'label') {
+            if (data.index === 0) {
+              data.element.attr({
+                dx: data.element.root().width() / 2,
+                dy: data.element.root().height() / 2
+              });
+            } else {
+              data.element.remove();
+            }
+          }
+        }
+      }
+    };
+    this.donutChart1 = {
+      type: 'Pie',
+      data: Chartdata['donut2'],
+      options: {
+        chartPadding: 0,
+        fullwidth: true,
+        height: '273px',
+        donut: true,
+        showLabel: true,
+        labelInterpolationFnc: function (value) {
+          const total = 76;
+          return total + '%';
+        }
+      },
+      events: {
+        draw(data: any): void {
+          if (data.type === 'label') {
+            if (data.index === 0) {
+              data.element.attr({
+                dx: data.element.root().width() / 2,
+                dy: data.element.root().height() / 2
+              });
+            } else {
+              data.element.remove();
+            }
+          }
+        }
+      }
+    };
+  }
+
+}

src/app/content/hemat-app/monitoring/monitoring.module.ts

@@ -0,0 +1,45 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MonitoringComponent } from './monitoring.component';
+import { RouterModule } from '@angular/router';
+
+
+import { ChartistModule } from 'ng-chartist';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { FormsModule } from '@angular/forms';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { CardModule } from '../../../content/partials/general/card/card.module';
+import { NgChartsModule } from 'ng2-charts';
+import { BlockUIModule } from 'ng-block-ui';
+import { BlockTemplateComponent } from '../../../_layout/blockui/block-template.component';
+import { MatchHeightModule } from '../../../content/partials/general/match-height/match-height.module';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+
+
+
+@NgModule({
+  declarations: [
+    MonitoringComponent
+  ],
+  imports: [
+    CommonModule,
+    ChartistModule,
+    FormsModule,
+    NgChartsModule,
+    CardModule,
+    MatchHeightModule,
+    NgxDatatableModule,
+    PerfectScrollbarModule,
+    NgbModule,
+    BlockUIModule.forRoot({
+      template: BlockTemplateComponent
+    }),
+    RouterModule.forChild([
+      {
+        path: '',
+        component: MonitoringComponent
+      }
+    ])
+  ]
+})
+export class MonitoringModule { }

src/app/content/hemat-app/user-access/user-access.component.html

@@ -0,0 +1 @@
+<p>user-access works!</p>

src/app/content/hemat-app/user-access/user-access.component.spec.ts

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

src/app/content/hemat-app/user-access/user-access.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-user-access',
+  templateUrl: './user-access.component.html',
+  styleUrls: ['./user-access.component.css']
+})
+export class UserAccessComponent {
+
+}

src/app/content/hemat-app/user-access/user-access.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UserAccessComponent } from './user-access.component';
+import { RouterModule } from '@angular/router';
+
+
+
+@NgModule({
+  declarations: [
+    UserAccessComponent
+  ],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        component: UserAccessComponent
+      }
+    ])
+  ]
+})
+export class UserAccessModule { }