diff --git a/src/app/_layout/breadcrumb/breadcrumb.component.html b/src/app/_layout/breadcrumb/breadcrumb.component.html index 802f071..d622f11 100644 --- a/src/app/_layout/breadcrumb/breadcrumb.component.html +++ b/src/app/_layout/breadcrumb/breadcrumb.component.html @@ -12,7 +12,7 @@ -
+
diff --git a/src/app/_layout/settings/menu-settings.config.ts b/src/app/_layout/settings/menu-settings.config.ts index f338ce4..c48c3ce 100644 --- a/src/app/_layout/settings/menu-settings.config.ts +++ b/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', diff --git a/src/app/app.module.ts b/src/app/app.module.ts index d784384..5f93baa 100644 --- a/src/app/app.module.ts +++ b/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: [ diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts index 0669ad3..f702c58 100644 --- a/src/app/app.routing.ts +++ b/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] diff --git a/src/app/content/hemat-app/cost-management/cost-management.component.css b/src/app/content/hemat-app/cost-management/cost-management.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/content/hemat-app/cost-management/cost-management.component.html b/src/app/content/hemat-app/cost-management/cost-management.component.html new file mode 100644 index 0000000..d266170 --- /dev/null +++ b/src/app/content/hemat-app/cost-management/cost-management.component.html @@ -0,0 +1 @@ +

cost-management works!

diff --git a/src/app/content/hemat-app/cost-management/cost-management.component.spec.ts b/src/app/content/hemat-app/cost-management/cost-management.component.spec.ts new file mode 100644 index 0000000..f3acecf --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ CostManagementComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(CostManagementComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/content/hemat-app/cost-management/cost-management.component.ts b/src/app/content/hemat-app/cost-management/cost-management.component.ts new file mode 100644 index 0000000..cf3a18c --- /dev/null +++ b/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 { + +} diff --git a/src/app/content/hemat-app/cost-management/cost-management.module.ts b/src/app/content/hemat-app/cost-management/cost-management.module.ts new file mode 100644 index 0000000..ab16937 --- /dev/null +++ b/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 { } diff --git a/src/app/content/hemat-app/device/device.component.css b/src/app/content/hemat-app/device/device.component.css new file mode 100644 index 0000000..bd893c0 --- /dev/null +++ b/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; +} + diff --git a/src/app/content/hemat-app/device/device.component.html b/src/app/content/hemat-app/device/device.component.html new file mode 100644 index 0000000..65942b0 --- /dev/null +++ b/src/app/content/hemat-app/device/device.component.html @@ -0,0 +1,74 @@ +
+
+
+ +
+
+ +
+
+
+ + + + +
+ + + + {{element.id}} + + + + + + {{element.name}} + + + + + + + {{element.position}} + + + + + + + {{element.office}} + + + + + + {{element.age}} + + + + + {{element.salary}} + + + + + {{element.startdate}} + + + + +
+ + +
+
+
+
+
+
\ No newline at end of file diff --git a/src/app/content/hemat-app/device/device.component.spec.ts b/src/app/content/hemat-app/device/device.component.spec.ts new file mode 100644 index 0000000..68a0476 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ DeviceComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DeviceComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/content/hemat-app/device/device.component.ts b/src/app/content/hemat-app/device/device.component.ts new file mode 100644 index 0000000..31c4a1a --- /dev/null +++ b/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 = []; + } +} diff --git a/src/app/content/hemat-app/device/device.module.ts b/src/app/content/hemat-app/device/device.module.ts new file mode 100644 index 0000000..d8fd2e4 --- /dev/null +++ b/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 { } diff --git a/src/app/content/hemat-app/master/master.module.ts b/src/app/content/hemat-app/master/master.module.ts new file mode 100644 index 0000000..dc281dd --- /dev/null +++ b/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 { } diff --git a/src/app/content/hemat-app/monitoring/monitoring.component.css b/src/app/content/hemat-app/monitoring/monitoring.component.css new file mode 100644 index 0000000..f3a877a --- /dev/null +++ b/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; +} diff --git a/src/app/content/hemat-app/monitoring/monitoring.component.html b/src/app/content/hemat-app/monitoring/monitoring.component.html new file mode 100644 index 0000000..98f8fe6 --- /dev/null +++ b/src/app/content/hemat-app/monitoring/monitoring.component.html @@ -0,0 +1,271 @@ + +
+
+
+
+
+ +
+
+
+ + + Revenue + + +
+
+
Current week
+

$82,124

+
+
+
Previous week
+

$52,502

+
+
+
+ + +
+ + +
+
+
+
+
+
+ + + Hit Rate -12% + + +
+ + +
+ + +
+
+
+ + +

Deals -55% + + 152/200 + +

+
+ + +
+ + +
+
+
+
+
+
+
+
+
+
Order Value
+

$ 88,568

+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
Calls
+

3,568

+
+
+ +
+
+
+
+
+
+
+
+
+ + + +
+
+
+ + + Emails + + +

Open rate 89%

+ +

Sent 310/500 +

+ + + +
+
+
+
+
+

Top Products

+
+ +
+
+
+
+
+ + + + + + + + + + + + + + + +
iPone X2245
One Plus1850
Samsung S71550
+
+
+
+
+
+
+
+
+

Average Deal Size

+
+
+
+
+
+
-30%
+

$12,536

+

Per rep

+
+
+
12%
+

$18,548

+

Per team

+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+

$1,596

+ Total Earning +
+
+ + +
+
+ Statistics + for the last year. +
+
+
+
+
+ +
+
+
+

Recent Sales

+
+ +
+
+
+
+ + + + + + + + + + + + + + + + + + + +
ProductCustomersCategoriesPopularityAmount
+ {{row.product}} + +
    +
  • + Avatar +
    • +
+ 		+ + + + + + + {{ row.amount }}
+
+
+
+
+
+ +
+
+
+ + \ No newline at end of file diff --git a/src/app/content/hemat-app/monitoring/monitoring.component.spec.ts b/src/app/content/hemat-app/monitoring/monitoring.component.spec.ts new file mode 100644 index 0000000..5bc21ba --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ MonitoringComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(MonitoringComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/content/hemat-app/monitoring/monitoring.component.ts b/src/app/content/hemat-app/monitoring/monitoring.component.ts new file mode 100644 index 0000000..e9fe07c --- /dev/null +++ b/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(); + } + } + } + } + }; + } + +} diff --git a/src/app/content/hemat-app/monitoring/monitoring.module.ts b/src/app/content/hemat-app/monitoring/monitoring.module.ts new file mode 100644 index 0000000..ea7ddf7 --- /dev/null +++ b/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 { } diff --git a/src/app/content/hemat-app/user-access/user-access.component.css b/src/app/content/hemat-app/user-access/user-access.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/content/hemat-app/user-access/user-access.component.html b/src/app/content/hemat-app/user-access/user-access.component.html new file mode 100644 index 0000000..f771098 --- /dev/null +++ b/src/app/content/hemat-app/user-access/user-access.component.html @@ -0,0 +1 @@ +

user-access works!

diff --git a/src/app/content/hemat-app/user-access/user-access.component.spec.ts b/src/app/content/hemat-app/user-access/user-access.component.spec.ts new file mode 100644 index 0000000..4335983 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ UserAccessComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(UserAccessComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/content/hemat-app/user-access/user-access.component.ts b/src/app/content/hemat-app/user-access/user-access.component.ts new file mode 100644 index 0000000..a762f63 --- /dev/null +++ b/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 { + +} diff --git a/src/app/content/hemat-app/user-access/user-access.module.ts b/src/app/content/hemat-app/user-access/user-access.module.ts new file mode 100644 index 0000000..e9a6a49 --- /dev/null +++ b/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 { }