initial commit

src/app/@core/core.module.ts

@@ -0,0 +1,170 @@
+import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NbAuthModule, NbDummyAuthStrategy } from '@nebular/auth';
+import { NbSecurityModule, NbRoleProvider } from '@nebular/security';
+import { of as observableOf } from 'rxjs';
+
+import { throwIfAlreadyLoaded } from './module-import-guard';
+import {
+  AnalyticsService,
+  LayoutService,
+  PlayerService,
+  SeoService,
+  StateService,
+} from './utils';
+import { UserData } from './data/users';
+import { ElectricityData } from './data/electricity';
+import { SmartTableData } from './data/smart-table';
+import { UserActivityData } from './data/user-activity';
+import { OrdersChartData } from './data/orders-chart';
+import { ProfitChartData } from './data/profit-chart';
+import { TrafficListData } from './data/traffic-list';
+import { EarningData } from './data/earning';
+import { OrdersProfitChartData } from './data/orders-profit-chart';
+import { TrafficBarData } from './data/traffic-bar';
+import { ProfitBarAnimationChartData } from './data/profit-bar-animation-chart';
+import { TemperatureHumidityData } from './data/temperature-humidity';
+import { SolarData } from './data/solar';
+import { TrafficChartData } from './data/traffic-chart';
+import { StatsBarData } from './data/stats-bar';
+import { CountryOrderData } from './data/country-order';
+import { StatsProgressBarData } from './data/stats-progress-bar';
+import { VisitorsAnalyticsData } from './data/visitors-analytics';
+import { SecurityCamerasData } from './data/security-cameras';
+
+import { UserService } from './mock/users.service';
+import { ElectricityService } from './mock/electricity.service';
+import { SmartTableService } from './mock/smart-table.service';
+import { UserActivityService } from './mock/user-activity.service';
+import { OrdersChartService } from './mock/orders-chart.service';
+import { ProfitChartService } from './mock/profit-chart.service';
+import { TrafficListService } from './mock/traffic-list.service';
+import { EarningService } from './mock/earning.service';
+import { OrdersProfitChartService } from './mock/orders-profit-chart.service';
+import { TrafficBarService } from './mock/traffic-bar.service';
+import { ProfitBarAnimationChartService } from './mock/profit-bar-animation-chart.service';
+import { TemperatureHumidityService } from './mock/temperature-humidity.service';
+import { SolarService } from './mock/solar.service';
+import { TrafficChartService } from './mock/traffic-chart.service';
+import { StatsBarService } from './mock/stats-bar.service';
+import { CountryOrderService } from './mock/country-order.service';
+import { StatsProgressBarService } from './mock/stats-progress-bar.service';
+import { VisitorsAnalyticsService } from './mock/visitors-analytics.service';
+import { SecurityCamerasService } from './mock/security-cameras.service';
+import { MockDataModule } from './mock/mock-data.module';
+
+const socialLinks = [
+  {
+    url: 'https://github.com/akveo/nebular',
+    target: '_blank',
+    icon: 'github',
+  },
+  {
+    url: 'https://www.facebook.com/akveo/',
+    target: '_blank',
+    icon: 'facebook',
+  },
+  {
+    url: 'https://twitter.com/akveo_inc',
+    target: '_blank',
+    icon: 'twitter',
+  },
+];
+
+const DATA_SERVICES = [
+  { provide: UserData, useClass: UserService },
+  { provide: ElectricityData, useClass: ElectricityService },
+  { provide: SmartTableData, useClass: SmartTableService },
+  { provide: UserActivityData, useClass: UserActivityService },
+  { provide: OrdersChartData, useClass: OrdersChartService },
+  { provide: ProfitChartData, useClass: ProfitChartService },
+  { provide: TrafficListData, useClass: TrafficListService },
+  { provide: EarningData, useClass: EarningService },
+  { provide: OrdersProfitChartData, useClass: OrdersProfitChartService },
+  { provide: TrafficBarData, useClass: TrafficBarService },
+  { provide: ProfitBarAnimationChartData, useClass: ProfitBarAnimationChartService },
+  { provide: TemperatureHumidityData, useClass: TemperatureHumidityService },
+  { provide: SolarData, useClass: SolarService },
+  { provide: TrafficChartData, useClass: TrafficChartService },
+  { provide: StatsBarData, useClass: StatsBarService },
+  { provide: CountryOrderData, useClass: CountryOrderService },
+  { provide: StatsProgressBarData, useClass: StatsProgressBarService },
+  { provide: VisitorsAnalyticsData, useClass: VisitorsAnalyticsService },
+  { provide: SecurityCamerasData, useClass: SecurityCamerasService },
+];
+
+export class NbSimpleRoleProvider extends NbRoleProvider {
+  getRole() {
+    // here you could provide any role based on any auth flow
+    return observableOf('guest');
+  }
+}
+
+export const NB_CORE_PROVIDERS = [
+  ...MockDataModule.forRoot().providers,
+  ...DATA_SERVICES,
+  ...NbAuthModule.forRoot({
+
+    strategies: [
+      NbDummyAuthStrategy.setup({
+        name: 'email',
+        delay: 3000,
+      }),
+    ],
+    forms: {
+      login: {
+        socialLinks: socialLinks,
+      },
+      register: {
+        socialLinks: socialLinks,
+      },
+    },
+  }).providers,
+
+  NbSecurityModule.forRoot({
+    accessControl: {
+      guest: {
+        view: '*',
+      },
+      user: {
+        parent: 'guest',
+        create: '*',
+        edit: '*',
+        remove: '*',
+      },
+    },
+  }).providers,
+
+  {
+    provide: NbRoleProvider, useClass: NbSimpleRoleProvider,
+  },
+  AnalyticsService,
+  LayoutService,
+  PlayerService,
+  SeoService,
+  StateService,
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+  ],
+  exports: [
+    NbAuthModule,
+  ],
+  declarations: [],
+})
+export class CoreModule {
+  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
+    throwIfAlreadyLoaded(parentModule, 'CoreModule');
+  }
+
+  static forRoot(): ModuleWithProviders<CoreModule> {
+    return {
+      ngModule: CoreModule,
+      providers: [
+        ...NB_CORE_PROVIDERS,
+      ],
+    };
+  }
+}

src/app/@core/data/README.md

@@ -0,0 +1 @@
+Application-wise data providers.

src/app/@core/data/country-order.ts

@@ -0,0 +1,6 @@
+import { Observable } from 'rxjs';
+
+export abstract class CountryOrderData {
+  abstract getCountriesCategories(): Observable<string[]>;
+  abstract getCountriesCategoriesData(country: string): Observable<number[]>;
+}

src/app/@core/data/earning.ts

@@ -0,0 +1,21 @@
+import { Observable } from 'rxjs';
+
+export interface LiveUpdateChart {
+  liveChart: { value: [string, number] }[];
+  delta: {
+    up: boolean;
+    value: number;
+  };
+  dailyIncome: number;
+}
+
+export interface PieChart {
+  value: number;
+  name: string;
+}
+
+export abstract class EarningData {
+  abstract getEarningLiveUpdateCardData(currency: string): Observable<any[]>;
+  abstract getEarningCardData(currency: string): Observable<LiveUpdateChart>;
+  abstract getEarningPieChartData(): Observable<PieChart[]>;
+}

src/app/@core/data/electricity.ts

@@ -0,0 +1,25 @@
+import { Observable } from 'rxjs';
+
+export interface Month {
+  month: string;
+  delta: string;
+  down: boolean;
+  kWatts: string;
+  cost: string;
+}
+
+export interface Electricity {
+  title: string;
+  active?: boolean;
+  months: Month[];
+}
+
+export interface ElectricityChart {
+  label: string;
+  value: number;
+}
+
+export abstract class ElectricityData {
+  abstract getListData(): Observable<Electricity[]>;
+  abstract getChartData(): Observable<ElectricityChart[]>;
+}

src/app/@core/data/orders-chart.ts

@@ -0,0 +1,8 @@
+export interface OrdersChart {
+  chartLabel: string[];
+  linesData: number[][];
+}
+
+export abstract class OrdersChartData {
+  abstract getOrdersChartData(period: string): OrdersChart;
+}

src/app/@core/data/orders-profit-chart.ts

@@ -0,0 +1,14 @@
+import { Observable } from 'rxjs';
+import { OrdersChart } from './orders-chart';
+import { ProfitChart  } from './profit-chart';
+
+export interface OrderProfitChartSummary {
+  title: string;
+  value: number;
+}
+
+export abstract class OrdersProfitChartData {
+  abstract getOrderProfitChartSummary(): Observable<OrderProfitChartSummary[]>;
+  abstract getOrdersChartData(period: string): Observable<OrdersChart>;
+  abstract getProfitChartData(period: string): Observable<ProfitChart>;
+}

src/app/@core/data/profit-bar-animation-chart.ts

@@ -0,0 +1,5 @@
+import { Observable } from 'rxjs';
+
+export abstract class ProfitBarAnimationChartData {
+  abstract getChartData(): Observable<{ firstLine: number[]; secondLine: number[]; }>;
+}

src/app/@core/data/profit-chart.ts

@@ -0,0 +1,8 @@
+export interface ProfitChart {
+  chartLabel: string[];
+  data: number[][];
+}
+
+export abstract class ProfitChartData {
+  abstract getProfitChartData(period: string): ProfitChart;
+}

src/app/@core/data/security-cameras.ts

@@ -0,0 +1,10 @@
+import { Observable } from 'rxjs';
+
+export interface Camera {
+  title: string;
+  source: string;
+}
+
+export abstract class SecurityCamerasData {
+  abstract getCamerasData(): Observable<Camera[]>;
+}

src/app/@core/data/smart-table.ts

@@ -0,0 +1,4 @@
+
+export abstract class SmartTableData {
+  abstract getData(): any[];
+}

src/app/@core/data/solar.ts

@@ -0,0 +1,5 @@
+import { Observable } from 'rxjs';
+
+export abstract class SolarData {
+  abstract getSolarData(): Observable<number>;
+}

src/app/@core/data/stats-bar.ts

@@ -0,0 +1,5 @@
+import { Observable } from 'rxjs';
+
+export abstract class StatsBarData {
+  abstract getStatsBarData(): Observable<number[]>;
+}

src/app/@core/data/stats-progress-bar.ts

@@ -0,0 +1,12 @@
+import { Observable } from 'rxjs';
+
+export interface ProgressInfo {
+  title: string;
+  value: number;
+  activeProgress: number;
+  description: string;
+}
+
+export abstract class StatsProgressBarData {
+  abstract getProgressInfoData(): Observable<ProgressInfo[]>;
+}

src/app/@core/data/temperature-humidity.ts

@@ -0,0 +1,12 @@
+import { Observable } from 'rxjs';
+
+export interface Temperature {
+  value: number;
+  min: number;
+  max: number;
+}
+
+export abstract class TemperatureHumidityData {
+  abstract getTemperatureData(): Observable<Temperature>;
+  abstract getHumidityData(): Observable<Temperature>;
+}

src/app/@core/data/traffic-bar.ts

@@ -0,0 +1,11 @@
+import { Observable } from 'rxjs';
+
+export interface TrafficBar {
+  data: number[];
+  labels: string[];
+  formatter: string;
+}
+
+export abstract class TrafficBarData {
+  abstract getTrafficBarData(period: string): Observable<TrafficBar>;
+}

src/app/@core/data/traffic-chart.ts

@@ -0,0 +1,5 @@
+import { Observable } from 'rxjs';
+
+export abstract class TrafficChartData {
+  abstract getTrafficChartData(): Observable<number[]>;
+}

src/app/@core/data/traffic-list.ts

@@ -0,0 +1,20 @@
+import { Observable } from 'rxjs';
+
+export interface TrafficList {
+  date: string;
+  value: number;
+  delta: {
+    up: boolean;
+    value: number;
+  };
+  comparison: {
+    prevDate: string;
+    prevValue: number;
+    nextDate: string;
+    nextValue: number;
+  };
+}
+
+export abstract class TrafficListData {
+  abstract getTrafficListData(period: string): Observable<TrafficList>;
+}

src/app/@core/data/user-activity.ts

@@ -0,0 +1,12 @@
+import { Observable } from 'rxjs';
+
+export interface UserActive {
+  date: string;
+  pagesVisitCount: number;
+  deltaUp: boolean;
+  newVisits: number;
+}
+
+export abstract class UserActivityData {
+  abstract getUserActivityData(period: string): Observable<UserActive[]>;
+}

src/app/@core/data/users.ts

@@ -0,0 +1,21 @@
+import { Observable } from 'rxjs';
+
+export interface User {
+  name: string;
+  picture: string;
+}
+
+export interface Contacts {
+  user: User;
+  type: string;
+}
+
+export interface RecentUsers extends Contacts {
+  time: number;
+}
+
+export abstract class UserData {
+  abstract getUsers(): Observable<User[]>;
+  abstract getContacts(): Observable<Contacts[]>;
+  abstract getRecentUsers(): Observable<RecentUsers[]>;
+}

src/app/@core/data/visitors-analytics.ts

@@ -0,0 +1,12 @@
+import { Observable } from 'rxjs';
+
+export interface OutlineData {
+  label: string;
+  value: number;
+}
+
+export abstract class VisitorsAnalyticsData {
+  abstract getInnerLineChartData(): Observable<number[]>;
+  abstract getOutlineLineChartData(): Observable<OutlineData[]>;
+  abstract getPieChartData(): Observable<number>;
+}

src/app/@core/mock/README.md

@@ -0,0 +1 @@
+Application-wise data providers.

src/app/@core/mock/country-order.service.ts

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { of as observableOf, Observable } from 'rxjs';
+import { CountryOrderData } from '../data/country-order';
+
+@Injectable()
+export class CountryOrderService extends CountryOrderData {
+
+  private countriesCategories = [
+    'Sofas',
+    'Furniture',
+    'Lighting',
+    'Tables',
+    'Textiles',
+  ];
+  private countriesCategoriesLength = this.countriesCategories.length;
+  private generateRandomData(nPoints: number): number[] {
+    return Array.from(Array(nPoints)).map(() => {
+      return Math.round(Math.random() * 20);
+    });
+  }
+
+  getCountriesCategories(): Observable<string[]> {
+    return observableOf(this.countriesCategories);
+  }
+
+  getCountriesCategoriesData(country: string): Observable<number[]> {
+    return observableOf(this.generateRandomData(this.countriesCategoriesLength));
+  }
+}

src/app/@core/mock/earning.service.ts

@@ -0,0 +1,103 @@
+import { Injectable } from '@angular/core';
+import { of as observableOf, Observable } from 'rxjs';
+import { LiveUpdateChart, PieChart, EarningData } from '../data/earning';
+
+@Injectable()
+export class EarningService extends EarningData {
+
+  private currentDate: Date = new Date();
+  private currentValue = Math.random() * 1000;
+  private ONE_DAY = 24 * 3600 * 1000;
+
+  private pieChartData = [
+    {
+      value: 50,
+      name: 'Bitcoin',
+    },
+    {
+      value: 25,
+      name: 'Tether',
+    },
+    {
+      value: 25,
+      name: 'Ethereum',
+    },
+  ];
+
+  private liveUpdateChartData = {
+    bitcoin: {
+      liveChart: [],
+      delta: {
+        up: true,
+        value: 4,
+      },
+      dailyIncome: 45895,
+    },
+    tether: {
+      liveChart: [],
+      delta: {
+        up: false,
+        value: 9,
+      },
+      dailyIncome: 5862,
+    },
+    ethereum: {
+      liveChart: [],
+      delta: {
+        up: false,
+        value: 21,
+      },
+      dailyIncome: 584,
+    },
+  };
+
+  getDefaultLiveChartData(elementsNumber: number) {
+    this.currentDate = new Date();
+    this.currentValue = Math.random() * 1000;
+
+    return Array.from(Array(elementsNumber))
+      .map(item => this.generateRandomLiveChartData());
+  }
+
+  generateRandomLiveChartData() {
+    this.currentDate = new Date(+this.currentDate + this.ONE_DAY);
+    this.currentValue = this.currentValue + Math.random() * 20 - 11;
+
+    if (this.currentValue < 0) {
+      this.currentValue = Math.random() * 100;
+    }
+
+    return {
+      value: [
+        [
+          this.currentDate.getFullYear(),
+          this.currentDate.getMonth(),
+          this.currentDate.getDate(),
+        ].join('/'),
+        Math.round(this.currentValue),
+      ],
+    };
+  }
+
+  getEarningLiveUpdateCardData(currency): Observable<any[]> {
+    const data = this.liveUpdateChartData[currency.toLowerCase()];
+    const newValue = this.generateRandomLiveChartData();
+
+    data.liveChart.shift();
+    data.liveChart.push(newValue);
+
+    return observableOf(data.liveChart);
+  }
+
+  getEarningCardData(currency: string): Observable<LiveUpdateChart> {
+    const data = this.liveUpdateChartData[currency.toLowerCase()];
+
+    data.liveChart = this.getDefaultLiveChartData(150);
+
+    return observableOf(data);
+  }
+
+  getEarningPieChartData(): Observable<PieChart[]> {
+    return observableOf(this.pieChartData);
+  }
+}

src/app/@core/mock/electricity.service.ts

@@ -0,0 +1,95 @@
+import { Injectable } from '@angular/core';
+import { of as observableOf, Observable } from 'rxjs';
+import { Electricity, ElectricityChart, ElectricityData } from '../data/electricity';
+
+@Injectable()
+export class ElectricityService extends ElectricityData {
+
+  private listData: Electricity[] = [
+    {
+      title: '2015',
+      months: [
+        { month: 'Jan', delta: '0.97', down: true, kWatts: '816', cost: '97' },
+        { month: 'Feb', delta: '1.83', down: true, kWatts: '806', cost: '95' },
+        { month: 'Mar', delta: '0.64', down: true, kWatts: '803', cost: '94' },
+        { month: 'Apr', delta: '2.17', down: false, kWatts: '818', cost: '98' },
+        { month: 'May', delta: '1.32', down: true, kWatts: '809', cost: '96' },
+        { month: 'Jun', delta: '0.05', down: true, kWatts: '808', cost: '96' },
+        { month: 'Jul', delta: '1.39', down: false, kWatts: '815', cost: '97' },
+        { month: 'Aug', delta: '0.73', down: true, kWatts: '807', cost: '95' },
+        { month: 'Sept', delta: '2.61', down: true, kWatts: '792', cost: '92' },
+        { month: 'Oct', delta: '0.16', down: true, kWatts: '791', cost: '92' },
+        { month: 'Nov', delta: '1.71', down: true, kWatts: '786', cost: '89' },
+        { month: 'Dec', delta: '0.37', down: false, kWatts: '789', cost: '91' },
+      ],
+    },
+    {
+      title: '2016',
+      active: true,
+      months: [
+        { month: 'Jan', delta: '1.56', down: true, kWatts: '789', cost: '91' },
+        { month: 'Feb', delta: '0.33', down: false, kWatts: '791', cost: '92' },
+        { month: 'Mar', delta: '0.62', down: true, kWatts: '790', cost: '92' },
+        { month: 'Apr', delta: '1.93', down: true, kWatts: '783', cost: '87' },
+        { month: 'May', delta: '2.52', down: true, kWatts: '771', cost: '83' },
+        { month: 'Jun', delta: '0.39', down: false, kWatts: '774', cost: '85' },
+        { month: 'Jul', delta: '1.61', down: true, kWatts: '767', cost: '81' },
+        { month: 'Aug', delta: '1.41', down: true, kWatts: '759', cost: '76' },
+        { month: 'Sept', delta: '1.03', down: true, kWatts: '752', cost: '74' },
+        { month: 'Oct', delta: '2.94', down: false, kWatts: '769', cost: '82' },
+        { month: 'Nov', delta: '0.26', down: true, kWatts: '767', cost: '81' },
+        { month: 'Dec', delta: '1.62', down: true, kWatts: '760', cost: '76' },
+      ],
+    },
+    {
+      title: '2017',
+      months: [
+        { month: 'Jan', delta: '1.34', down: false, kWatts: '789', cost: '91' },
+        { month: 'Feb', delta: '0.95', down: false, kWatts: '793', cost: '93' },
+        { month: 'Mar', delta: '0.25', down: true, kWatts: '791', cost: '92' },
+        { month: 'Apr', delta: '1.72', down: false, kWatts: '797', cost: '95' },
+        { month: 'May', delta: '2.62', down: true, kWatts: '786', cost: '90' },
+        { month: 'Jun', delta: '0.72', down: false, kWatts: '789', cost: '91' },
+        { month: 'Jul', delta: '0.78', down: true, kWatts: '784', cost: '89' },
+        { month: 'Aug', delta: '0.36', down: true, kWatts: '782', cost: '88' },
+        { month: 'Sept', delta: '0.55', down: false, kWatts: '787', cost: '90' },
+        { month: 'Oct', delta: '1.81', down: true, kWatts: '779', cost: '86' },
+        { month: 'Nov', delta: '1.12', down: true, kWatts: '774', cost: '84' },
+        { month: 'Dec', delta: '0.52', down: false, kWatts: '776', cost: '95' },
+      ],
+    },
+  ];
+
+  private chartPoints = [
+    490, 490, 495, 500,
+    505, 510, 520, 530,
+    550, 580, 630, 720,
+    800, 840, 860, 870,
+    870, 860, 840, 800,
+    720, 200, 145, 130,
+    130, 145, 200, 570,
+    635, 660, 670, 670,
+    660, 630, 580, 460,
+    380, 350, 340, 340,
+    340, 340, 340, 340,
+    340, 340, 340,
+  ];
+
+  chartData: ElectricityChart[];
+
+  constructor() {
+    super();
+    this.chartData = this.chartPoints.map((p, index) => ({
+      label: (index % 5 === 3) ? `${Math.round(index / 5)}` : '',
+      value: p,
+    }));
+  }
+
+  getListData(): Observable<Electricity[]> {
+    return observableOf(this.listData);
+  }
+
+  getChartData(): Observable<ElectricityChart[]> {
+    return observableOf(this.chartData);
+  }
+}

src/app/@core/mock/mock-data.module.ts

@@ -0,0 +1,65 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { UserService } from './users.service';
+import { ElectricityService } from './electricity.service';
+import { SmartTableService } from './smart-table.service';
+import { UserActivityService } from './user-activity.service';
+import { OrdersChartService } from './orders-chart.service';
+import { ProfitChartService } from './profit-chart.service';
+import { TrafficListService } from './traffic-list.service';
+import { PeriodsService } from './periods.service';
+import { EarningService } from './earning.service';
+import { OrdersProfitChartService } from './orders-profit-chart.service';
+import { TrafficBarService } from './traffic-bar.service';
+import { ProfitBarAnimationChartService } from './profit-bar-animation-chart.service';
+import { TemperatureHumidityService } from './temperature-humidity.service';
+import { SolarService } from './solar.service';
+import { TrafficChartService } from './traffic-chart.service';
+import { StatsBarService } from './stats-bar.service';
+import { CountryOrderService } from './country-order.service';
+import { StatsProgressBarService } from './stats-progress-bar.service';
+import { VisitorsAnalyticsService } from './visitors-analytics.service';
+import { SecurityCamerasService } from './security-cameras.service';
+
+const SERVICES = [
+  UserService,
+  ElectricityService,
+  SmartTableService,
+  UserActivityService,
+  OrdersChartService,
+  ProfitChartService,
+  TrafficListService,
+  PeriodsService,
+  EarningService,
+  OrdersProfitChartService,
+  TrafficBarService,
+  ProfitBarAnimationChartService,
+  TemperatureHumidityService,
+  SolarService,
+  TrafficChartService,
+  StatsBarService,
+  CountryOrderService,
+  StatsProgressBarService,
+  VisitorsAnalyticsService,
+  SecurityCamerasService,
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+  ],
+  providers: [
+    ...SERVICES,
+  ],
+})
+export class MockDataModule {
+  static forRoot(): ModuleWithProviders<MockDataModule> {
+    return {
+      ngModule: MockDataModule,
+      providers: [
+        ...SERVICES,
+      ],
+    };
+  }
+}

src/app/@core/mock/orders-chart.service.ts

@@ -0,0 +1,155 @@
+import { Injectable } from '@angular/core';
+import { PeriodsService } from './periods.service';
+import { OrdersChart, OrdersChartData } from '../data/orders-chart';
+
+@Injectable()
+export class OrdersChartService extends OrdersChartData {
+
+  private year = [
+    '2012',
+    '2013',
+    '2014',
+    '2015',
+    '2016',
+    '2017',
+    '2018',
+  ];
+
+  private data = { };
+
+  constructor(private period: PeriodsService) {
+    super();
+    this.data = {
+      week: this.getDataForWeekPeriod(),
+      month: this.getDataForMonthPeriod(),
+      year: this.getDataForYearPeriod(),
+    };
+  }
+
+  private getDataForWeekPeriod(): OrdersChart {
+    return {
+      chartLabel: this.getDataLabels(42, this.period.getWeeks()),
+      linesData: [
+        [
+          184, 267, 326, 366, 389, 399,
+          392, 371, 340, 304, 265, 227,
+          191, 158, 130, 108, 95, 91, 97,
+          109, 125, 144, 166, 189, 212,
+          236, 259, 280, 300, 316, 329,
+          338, 342, 339, 329, 312, 288,
+          258, 221, 178, 128, 71,
+        ],
+        [
+          158, 178, 193, 205, 212, 213,
+          204, 190, 180, 173, 168, 164,
+          162, 160, 159, 158, 159, 166,
+          179, 195, 215, 236, 257, 276,
+          292, 301, 304, 303, 300, 293,
+          284, 273, 262, 251, 241, 234,
+          232, 232, 232, 232, 232, 232,
+        ],
+        [
+          58, 137, 202, 251, 288, 312,
+          323, 324, 311, 288, 257, 222,
+          187, 154, 124, 100, 81, 68, 61,
+          58, 61, 69, 80, 96, 115, 137,
+          161, 186, 210, 233, 254, 271,
+          284, 293, 297, 297, 297, 297,
+          297, 297, 297, 297, 297,
+        ],
+      ],
+    };
+  }
+
+  private getDataForMonthPeriod(): OrdersChart {
+    return {
+      chartLabel: this.getDataLabels(47, this.period.getMonths()),
+      linesData: [
+        [
+          5, 63, 113, 156, 194, 225,
+          250, 270, 283, 289, 290,
+          286, 277, 264, 244, 220,
+          194, 171, 157, 151, 150,
+          152, 155, 160, 166, 170,
+          167, 153, 135, 115, 97,
+          82, 71, 64, 63, 62, 61,
+          62, 65, 73, 84, 102,
+          127, 159, 203, 259, 333,
+        ],
+        [
+          6, 83, 148, 200, 240,
+          265, 273, 259, 211,
+          122, 55, 30, 28, 36,
+          50, 68, 88, 109, 129,
+          146, 158, 163, 165,
+          173, 187, 208, 236,
+          271, 310, 346, 375,
+          393, 400, 398, 387,
+          368, 341, 309, 275,
+          243, 220, 206, 202,
+          207, 222, 247, 286, 348,
+        ],
+        [
+          398, 348, 315, 292, 274,
+          261, 251, 243, 237, 231,
+          222, 209, 192, 172, 152,
+          132, 116, 102, 90, 80, 71,
+          64, 58, 53, 49, 48, 54, 66,
+          84, 104, 125, 142, 156, 166,
+          172, 174, 172, 167, 159, 149,
+          136, 121, 105, 86, 67, 45, 22,
+        ],
+      ],
+    };
+  }
+
+  private getDataForYearPeriod(): OrdersChart {
+    return {
+      chartLabel: this.getDataLabels(42, this.year),
+      linesData: [
+        [
+          190, 269, 327, 366, 389, 398,
+          396, 387, 375, 359, 343, 327,
+          312, 298, 286, 276, 270, 268,
+          265, 258, 247, 234, 220, 204,
+          188, 172, 157, 142, 128, 116,
+          106, 99, 95, 94, 92, 89, 84,
+          77, 69, 60, 49, 36, 22,
+        ],
+        [
+          265, 307, 337, 359, 375, 386,
+          393, 397, 399, 397, 390, 379,
+          365, 347, 326, 305, 282, 261,
+          241, 223, 208, 197, 190, 187,
+          185, 181, 172, 160, 145, 126,
+          105, 82, 60, 40, 26, 19, 22,
+          43, 82, 141, 220, 321,
+        ],
+        [
+          9, 165, 236, 258, 244, 206,
+          186, 189, 209, 239, 273, 307,
+          339, 365, 385, 396, 398, 385,
+          351, 300, 255, 221, 197, 181,
+          170, 164, 162, 161, 159, 154,
+          146, 135, 122, 108, 96, 87,
+          83, 82, 82, 82, 82, 82, 82,
+        ],
+      ],
+    };
+  }
+
+  getDataLabels(nPoints: number, labelsArray: string[]): string[] {
+    const labelsArrayLength = labelsArray.length;
+    const step = Math.round(nPoints / labelsArrayLength);
+
+    return Array.from(Array(nPoints)).map((item, index) => {
+      const dataIndex = Math.round(index / step);
+
+      return index % step === 0 ? labelsArray[dataIndex] : '';
+    });
+  }
+
+  getOrdersChartData(period: string): OrdersChart {
+    return this.data[period];
+  }
+}

src/app/@core/mock/orders-profit-chart.service.ts

@@ -0,0 +1,45 @@
+import { of as observableOf,  Observable } from 'rxjs';
+import { Injectable } from '@angular/core';
+import { OrdersChart, OrdersChartData } from '../data/orders-chart';
+import { OrderProfitChartSummary, OrdersProfitChartData } from '../data/orders-profit-chart';
+import { ProfitChart, ProfitChartData } from '../data/profit-chart';
+
+@Injectable()
+export class OrdersProfitChartService extends OrdersProfitChartData {
+
+  private summary = [
+    {
+      title: 'Marketplace',
+      value: 3654,
+    },
+    {
+      title: 'Last Month',
+      value: 946,
+    },
+    {
+      title: 'Last Week',
+      value: 654,
+    },
+    {
+      title: 'Today',
+      value: 230,
+    },
+  ];
+
+  constructor(private ordersChartService: OrdersChartData,
+              private profitChartService: ProfitChartData) {
+    super();
+  }
+
+  getOrderProfitChartSummary(): Observable<OrderProfitChartSummary[]> {
+    return observableOf(this.summary);
+  }
+
+  getOrdersChartData(period: string): Observable<OrdersChart> {
+    return observableOf(this.ordersChartService.getOrdersChartData(period));
+  }
+
+  getProfitChartData(period: string): Observable<ProfitChart> {
+    return observableOf(this.profitChartService.getProfitChartData(period));
+  }
+}

src/app/@core/mock/periods.service.ts

@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class PeriodsService {
+  getYears() {
+    return [
+      '2010', '2011', '2012',
+      '2013', '2014', '2015',
+      '2016', '2017', '2018',
+    ];
+  }
+
+  getMonths() {
+    return [
+      'Jan', 'Feb', 'Mar',
+      'Apr', 'May', 'Jun',
+      'Jul', 'Aug', 'Sep',
+      'Oct', 'Nov', 'Dec',
+    ];
+  }
+
+  getWeeks() {
+    return [
+      'Mon',
+      'Tue',
+      'Wed',
+      'Thu',
+      'Fri',
+      'Sat',
+      'Sun',
+    ];
+  }
+}

src/app/@core/mock/profit-bar-animation-chart.service.ts

@@ -0,0 +1,43 @@
+import { Injectable } from '@angular/core';
+import { of as observableOf,  Observable } from 'rxjs';
+import { ProfitBarAnimationChartData } from '../data/profit-bar-animation-chart';
+
+@Injectable()
+export class ProfitBarAnimationChartService extends ProfitBarAnimationChartData {
+
+  private data: any;
+
+  constructor() {
+    super();
+    this.data = {
+      firstLine: this.getDataForFirstLine(),
+      secondLine: this.getDataForSecondLine(),
+    };
+  }
+
+  getDataForFirstLine(): number[] {
+    return this.createEmptyArray(100)
+      .map((_, index) => {
+        const oneFifth = index / 5;
+
+        return (Math.sin(oneFifth) * (oneFifth - 10) + index / 6) * 5;
+      });
+  }
+
+  getDataForSecondLine(): number[] {
+    return this.createEmptyArray(100)
+      .map((_, index) => {
+        const oneFifth = index / 5;
+
+        return (Math.cos(oneFifth) * (oneFifth - 10) + index / 6) * 5;
+      });
+  }
+
+  createEmptyArray(nPoints: number) {
+    return Array.from(Array(nPoints));
+  }
+
+  getChartData(): Observable<{ firstLine: number[]; secondLine: number[]; }> {
+    return observableOf(this.data);
+  }
+}

src/app/@core/mock/profit-chart.service.ts

@@ -0,0 +1,77 @@
+import { Injectable } from '@angular/core';
+import { PeriodsService } from './periods.service';
+import { ProfitChart, ProfitChartData } from '../data/profit-chart';
+
+@Injectable()
+export class ProfitChartService extends ProfitChartData {
+
+  private year = [
+    '2012',
+    '2013',
+    '2014',
+    '2015',
+    '2016',
+    '2017',
+    '2018',
+  ];
+
+  private data = { };
+
+  constructor(private period: PeriodsService) {
+    super();
+    this.data = {
+      week: this.getDataForWeekPeriod(),
+      month: this.getDataForMonthPeriod(),
+      year: this.getDataForYearPeriod(),
+    };
+  }
+
+  private getDataForWeekPeriod(): ProfitChart {
+    const nPoint = this.period.getWeeks().length;
+
+    return {
+      chartLabel: this.period.getWeeks(),
+      data: [
+        this.getRandomData(nPoint),
+        this.getRandomData(nPoint),
+        this.getRandomData(nPoint),
+      ],
+    };
+  }
+
+  private getDataForMonthPeriod(): ProfitChart {
+    const nPoint = this.period.getMonths().length;
+
+    return {
+      chartLabel: this.period.getMonths(),
+      data: [
+        this.getRandomData(nPoint),
+        this.getRandomData(nPoint),
+        this.getRandomData(nPoint),
+      ],
+    };
+  }
+
+  private getDataForYearPeriod(): ProfitChart {
+    const nPoint = this.year.length;
+
+    return {
+      chartLabel: this.year,
+      data: [
+        this.getRandomData(nPoint),
+        this.getRandomData(nPoint),
+        this.getRandomData(nPoint),
+      ],
+    };
+  }
+
+  private getRandomData(nPoints: number): number[] {
+    return Array.from(Array(nPoints)).map(() => {
+      return Math.round(Math.random() * 500);
+    });
+  }
+
+  getProfitChartData(period: string): ProfitChart {
+    return this.data[period];
+  }
+}

src/app/@core/mock/security-cameras.service.ts

@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+import { of as observableOf, Observable } from 'rxjs';
+import { Camera, SecurityCamerasData } from '../data/security-cameras';
+
+@Injectable()
+export class SecurityCamerasService extends SecurityCamerasData {
+
+  private cameras: Camera[] = [
+    {
+      title: 'Camera #1',
+      source: 'assets/images/camera1.jpg',
+    },
+    {
+      title: 'Camera #2',
+      source: 'assets/images/camera2.jpg',
+    },
+    {
+      title: 'Camera #3',
+      source: 'assets/images/camera3.jpg',
+    },
+    {
+      title: 'Camera #4',
+      source: 'assets/images/camera4.jpg',
+    },
+  ];
+
+  getCamerasData(): Observable<Camera[]> {
+    return observableOf(this.cameras);
+  }
+}

src/app/@core/mock/smart-table.service.ts

@@ -0,0 +1,432 @@
+import { Injectable } from '@angular/core';
+import { SmartTableData } from '../data/smart-table';
+
+@Injectable()
+export class SmartTableService extends SmartTableData {
+
+  data = [{
+    id: 1,
+    firstName: 'Mark',
+    lastName: 'Otto',
+    username: '@mdo',
+    email: 'mdo@gmail.com',
+    age: '28',
+  }, {
+    id: 2,
+    firstName: 'Jacob',
+    lastName: 'Thornton',
+    username: '@fat',
+    email: 'fat@yandex.ru',
+    age: '45',
+  }, {
+    id: 3,
+    firstName: 'Larry',
+    lastName: 'Bird',
+    username: '@twitter',
+    email: 'twitter@outlook.com',
+    age: '18',
+  }, {
+    id: 4,
+    firstName: 'John',
+    lastName: 'Snow',
+    username: '@snow',
+    email: 'snow@gmail.com',
+    age: '20',
+  }, {
+    id: 5,
+    firstName: 'Jack',
+    lastName: 'Sparrow',
+    username: '@jack',
+    email: 'jack@yandex.ru',
+    age: '30',
+  }, {
+    id: 6,
+    firstName: 'Ann',
+    lastName: 'Smith',
+    username: '@ann',
+    email: 'ann@gmail.com',
+    age: '21',
+  }, {
+    id: 7,
+    firstName: 'Barbara',
+    lastName: 'Black',
+    username: '@barbara',
+    email: 'barbara@yandex.ru',
+    age: '43',
+  }, {
+    id: 8,
+    firstName: 'Sevan',
+    lastName: 'Bagrat',
+    username: '@sevan',
+    email: 'sevan@outlook.com',
+    age: '13',
+  }, {
+    id: 9,
+    firstName: 'Ruben',
+    lastName: 'Vardan',
+    username: '@ruben',
+    email: 'ruben@gmail.com',
+    age: '22',
+  }, {
+    id: 10,
+    firstName: 'Karen',
+    lastName: 'Sevan',
+    username: '@karen',
+    email: 'karen@yandex.ru',
+    age: '33',
+  }, {
+    id: 11,
+    firstName: 'Mark',
+    lastName: 'Otto',
+    username: '@mark',
+    email: 'mark@gmail.com',
+    age: '38',
+  }, {
+    id: 12,
+    firstName: 'Jacob',
+    lastName: 'Thornton',
+    username: '@jacob',
+    email: 'jacob@yandex.ru',
+    age: '48',
+  }, {
+    id: 13,
+    firstName: 'Haik',
+    lastName: 'Hakob',
+    username: '@haik',
+    email: 'haik@outlook.com',
+    age: '48',
+  }, {
+    id: 14,
+    firstName: 'Garegin',
+    lastName: 'Jirair',
+    username: '@garegin',
+    email: 'garegin@gmail.com',
+    age: '40',
+  }, {
+    id: 15,
+    firstName: 'Krikor',
+    lastName: 'Bedros',
+    username: '@krikor',
+    email: 'krikor@yandex.ru',
+    age: '32',
+  }, {
+    'id': 16,
+    'firstName': 'Francisca',
+    'lastName': 'Brady',
+    'username': '@Gibson',
+    'email': 'franciscagibson@comtours.com',
+    'age': 11,
+  }, {
+    'id': 17,
+    'firstName': 'Tillman',
+    'lastName': 'Figueroa',
+    'username': '@Snow',
+    'email': 'tillmansnow@comtours.com',
+    'age': 34,
+  }, {
+    'id': 18,
+    'firstName': 'Jimenez',
+    'lastName': 'Morris',
+    'username': '@Bryant',
+    'email': 'jimenezbryant@comtours.com',
+    'age': 45,
+  }, {
+    'id': 19,
+    'firstName': 'Sandoval',
+    'lastName': 'Jacobson',
+    'username': '@Mcbride',
+    'email': 'sandovalmcbride@comtours.com',
+    'age': 32,
+  }, {
+    'id': 20,
+    'firstName': 'Griffin',
+    'lastName': 'Torres',
+    'username': '@Charles',
+    'email': 'griffincharles@comtours.com',
+    'age': 19,
+  }, {
+    'id': 21,
+    'firstName': 'Cora',
+    'lastName': 'Parker',
+    'username': '@Caldwell',
+    'email': 'coracaldwell@comtours.com',
+    'age': 27,
+  }, {
+    'id': 22,
+    'firstName': 'Cindy',
+    'lastName': 'Bond',
+    'username': '@Velez',
+    'email': 'cindyvelez@comtours.com',
+    'age': 24,
+  }, {
+    'id': 23,
+    'firstName': 'Frieda',
+    'lastName': 'Tyson',
+    'username': '@Craig',
+    'email': 'friedacraig@comtours.com',
+    'age': 45,
+  }, {
+    'id': 24,
+    'firstName': 'Cote',
+    'lastName': 'Holcomb',
+    'username': '@Rowe',
+    'email': 'coterowe@comtours.com',
+    'age': 20,
+  }, {
+    'id': 25,
+    'firstName': 'Trujillo',
+    'lastName': 'Mejia',
+    'username': '@Valenzuela',
+    'email': 'trujillovalenzuela@comtours.com',
+    'age': 16,
+  }, {
+    'id': 26,
+    'firstName': 'Pruitt',
+    'lastName': 'Shepard',
+    'username': '@Sloan',
+    'email': 'pruittsloan@comtours.com',
+    'age': 44,
+  }, {
+    'id': 27,
+    'firstName': 'Sutton',
+    'lastName': 'Ortega',
+    'username': '@Black',
+    'email': 'suttonblack@comtours.com',
+    'age': 42,
+  }, {
+    'id': 28,
+    'firstName': 'Marion',
+    'lastName': 'Heath',
+    'username': '@Espinoza',
+    'email': 'marionespinoza@comtours.com',
+    'age': 47,
+  }, {
+    'id': 29,
+    'firstName': 'Newman',
+    'lastName': 'Hicks',
+    'username': '@Keith',
+    'email': 'newmankeith@comtours.com',
+    'age': 15,
+  }, {
+    'id': 30,
+    'firstName': 'Boyle',
+    'lastName': 'Larson',
+    'username': '@Summers',
+    'email': 'boylesummers@comtours.com',
+    'age': 32,
+  }, {
+    'id': 31,
+    'firstName': 'Haynes',
+    'lastName': 'Vinson',
+    'username': '@Mckenzie',
+    'email': 'haynesmckenzie@comtours.com',
+    'age': 15,
+  }, {
+    'id': 32,
+    'firstName': 'Miller',
+    'lastName': 'Acosta',
+    'username': '@Young',
+    'email': 'milleryoung@comtours.com',
+    'age': 55,
+  }, {
+    'id': 33,
+    'firstName': 'Johnston',
+    'lastName': 'Brown',
+    'username': '@Knight',
+    'email': 'johnstonknight@comtours.com',
+    'age': 29,
+  }, {
+    'id': 34,
+    'firstName': 'Lena',
+    'lastName': 'Pitts',
+    'username': '@Forbes',
+    'email': 'lenaforbes@comtours.com',
+    'age': 25,
+  }, {
+    'id': 35,
+    'firstName': 'Terrie',
+    'lastName': 'Kennedy',
+    'username': '@Branch',
+    'email': 'terriebranch@comtours.com',
+    'age': 37,
+  }, {
+    'id': 36,
+    'firstName': 'Louise',
+    'lastName': 'Aguirre',
+    'username': '@Kirby',
+    'email': 'louisekirby@comtours.com',
+    'age': 44,
+  }, {
+    'id': 37,
+    'firstName': 'David',
+    'lastName': 'Patton',
+    'username': '@Sanders',
+    'email': 'davidsanders@comtours.com',
+    'age': 26,
+  }, {
+    'id': 38,
+    'firstName': 'Holden',
+    'lastName': 'Barlow',
+    'username': '@Mckinney',
+    'email': 'holdenmckinney@comtours.com',
+    'age': 11,
+  }, {
+    'id': 39,
+    'firstName': 'Baker',
+    'lastName': 'Rivera',
+    'username': '@Montoya',
+    'email': 'bakermontoya@comtours.com',
+    'age': 47,
+  }, {
+    'id': 40,
+    'firstName': 'Belinda',
+    'lastName': 'Lloyd',
+    'username': '@Calderon',
+    'email': 'belindacalderon@comtours.com',
+    'age': 21,
+  }, {
+    'id': 41,
+    'firstName': 'Pearson',
+    'lastName': 'Patrick',
+    'username': '@Clements',
+    'email': 'pearsonclements@comtours.com',
+    'age': 42,
+  }, {
+    'id': 42,
+    'firstName': 'Alyce',
+    'lastName': 'Mckee',
+    'username': '@Daugherty',
+    'email': 'alycedaugherty@comtours.com',
+    'age': 55,
+  }, {
+    'id': 43,
+    'firstName': 'Valencia',
+    'lastName': 'Spence',
+    'username': '@Olsen',
+    'email': 'valenciaolsen@comtours.com',
+    'age': 20,
+  }, {
+    'id': 44,
+    'firstName': 'Leach',
+    'lastName': 'Holcomb',
+    'username': '@Humphrey',
+    'email': 'leachhumphrey@comtours.com',
+    'age': 28,
+  }, {
+    'id': 45,
+    'firstName': 'Moss',
+    'lastName': 'Baxter',
+    'username': '@Fitzpatrick',
+    'email': 'mossfitzpatrick@comtours.com',
+    'age': 51,
+  }, {
+    'id': 46,
+    'firstName': 'Jeanne',
+    'lastName': 'Cooke',
+    'username': '@Ward',
+    'email': 'jeanneward@comtours.com',
+    'age': 59,
+  }, {
+    'id': 47,
+    'firstName': 'Wilma',
+    'lastName': 'Briggs',
+    'username': '@Kidd',
+    'email': 'wilmakidd@comtours.com',
+    'age': 53,
+  }, {
+    'id': 48,
+    'firstName': 'Beatrice',
+    'lastName': 'Perry',
+    'username': '@Gilbert',
+    'email': 'beatricegilbert@comtours.com',
+    'age': 39,
+  }, {
+    'id': 49,
+    'firstName': 'Whitaker',
+    'lastName': 'Hyde',
+    'username': '@Mcdonald',
+    'email': 'whitakermcdonald@comtours.com',
+    'age': 35,
+  }, {
+    'id': 50,
+    'firstName': 'Rebekah',
+    'lastName': 'Duran',
+    'username': '@Gross',
+    'email': 'rebekahgross@comtours.com',
+    'age': 40,
+  }, {
+    'id': 51,
+    'firstName': 'Earline',
+    'lastName': 'Mayer',
+    'username': '@Woodward',
+    'email': 'earlinewoodward@comtours.com',
+    'age': 52,
+  }, {
+    'id': 52,
+    'firstName': 'Moran',
+    'lastName': 'Baxter',
+    'username': '@Johns',
+    'email': 'moranjohns@comtours.com',
+    'age': 20,
+  }, {
+    'id': 53,
+    'firstName': 'Nanette',
+    'lastName': 'Hubbard',
+    'username': '@Cooke',
+    'email': 'nanettecooke@comtours.com',
+    'age': 55,
+  }, {
+    'id': 54,
+    'firstName': 'Dalton',
+    'lastName': 'Walker',
+    'username': '@Hendricks',
+    'email': 'daltonhendricks@comtours.com',
+    'age': 25,
+  }, {
+    'id': 55,
+    'firstName': 'Bennett',
+    'lastName': 'Blake',
+    'username': '@Pena',
+    'email': 'bennettpena@comtours.com',
+    'age': 13,
+  }, {
+    'id': 56,
+    'firstName': 'Kellie',
+    'lastName': 'Horton',
+    'username': '@Weiss',
+    'email': 'kellieweiss@comtours.com',
+    'age': 48,
+  }, {
+    'id': 57,
+    'firstName': 'Hobbs',
+    'lastName': 'Talley',
+    'username': '@Sanford',
+    'email': 'hobbssanford@comtours.com',
+    'age': 28,
+  }, {
+    'id': 58,
+    'firstName': 'Mcguire',
+    'lastName': 'Donaldson',
+    'username': '@Roman',
+    'email': 'mcguireroman@comtours.com',
+    'age': 38,
+  }, {
+    'id': 59,
+    'firstName': 'Rodriquez',
+    'lastName': 'Saunders',
+    'username': '@Harper',
+    'email': 'rodriquezharper@comtours.com',
+    'age': 20,
+  }, {
+    'id': 60,
+    'firstName': 'Lou',
+    'lastName': 'Conner',
+    'username': '@Sanchez',
+    'email': 'lousanchez@comtours.com',
+    'age': 16,
+  }];
+
+  getData() {
+    return this.data;
+  }
+}

src/app/@core/mock/solar.service.ts

@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+import { of as observableOf,  Observable } from 'rxjs';
+import { SolarData } from '../data/solar';
+
+@Injectable()
+export class SolarService extends SolarData {
+  private value = 42;
+
+  getSolarData(): Observable<number> {
+    return observableOf(this.value);
+  }
+}

src/app/@core/mock/stats-bar.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { of as observableOf, Observable } from 'rxjs';
+import { StatsBarData } from '../data/stats-bar';
+
+@Injectable()
+export class StatsBarService extends StatsBarData {
+
+  private statsBarData: number[] = [
+    300, 520, 435, 530,
+    730, 620, 660, 860,
+  ];
+
+  getStatsBarData(): Observable<number[]> {
+    return observableOf(this.statsBarData);
+  }
+}

src/app/@core/mock/stats-progress-bar.service.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { of as observableOf, Observable } from 'rxjs';
+import { ProgressInfo, StatsProgressBarData } from '../data/stats-progress-bar';
+
+@Injectable()
+export class StatsProgressBarService extends StatsProgressBarData {
+  private progressInfoData: ProgressInfo[] = [
+    {
+      title: 'Today’s Profit',
+      value: 572900,
+      activeProgress: 70,
+      description: 'Better than last week (70%)',
+    },
+    {
+      title: 'New Orders',
+      value: 6378,
+      activeProgress: 30,
+      description: 'Better than last week (30%)',
+    },
+    {
+      title: 'New Comments',
+      value: 200,
+      activeProgress: 55,
+      description: 'Better than last week (55%)',
+    },
+  ];
+
+  getProgressInfoData(): Observable<ProgressInfo[]> {
+    return observableOf(this.progressInfoData);
+  }
+}

src/app/@core/mock/temperature-humidity.service.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { of as observableOf,  Observable } from 'rxjs';
+import { TemperatureHumidityData, Temperature } from '../data/temperature-humidity';
+
+@Injectable()
+export class TemperatureHumidityService extends TemperatureHumidityData {
+
+  private temperatureDate: Temperature = {
+    value: 24,
+    min: 12,
+    max: 30,
+  };
+
+  private humidityDate: Temperature = {
+    value: 87,
+    min: 0,
+    max: 100,
+  };
+
+  getTemperatureData(): Observable<Temperature> {
+    return observableOf(this.temperatureDate);
+  }
+
+  getHumidityData(): Observable<Temperature> {
+    return observableOf(this.humidityDate);
+  }
+}

src/app/@core/mock/traffic-bar.service.ts

@@ -0,0 +1,47 @@
+import { Injectable } from '@angular/core';
+import { of as observableOf,  Observable } from 'rxjs';
+import { PeriodsService } from './periods.service';
+import { TrafficBarData, TrafficBar } from '../data/traffic-bar';
+
+@Injectable()
+export class TrafficBarService extends TrafficBarData {
+
+  private data = { };
+
+  constructor(private period: PeriodsService) {
+    super();
+    this.data = {
+      week: this.getDataForWeekPeriod(),
+      month: this.getDataForMonthPeriod(),
+      year: this.getDataForYearPeriod(),
+    };
+  }
+
+  getDataForWeekPeriod(): TrafficBar {
+    return {
+      data: [10, 15, 19, 7, 20, 13, 15],
+      labels: this.period.getWeeks(),
+      formatter: '{c0} MB',
+    };
+  }
+
+  getDataForMonthPeriod(): TrafficBar {
+    return {
+      data: [0.5, 0.3, 0.8, 0.2, 0.3, 0.7, 0.8, 1, 0.7, 0.8, 0.6, 0.7],
+      labels: this.period.getMonths(),
+      formatter: '{c0} GB',
+    };
+  }
+
+  getDataForYearPeriod(): TrafficBar {
+    return {
+      data: [10, 15, 19, 7, 20, 13, 15, 19, 11],
+      labels: this.period.getYears(),
+      formatter: '{c0} GB',
+    };
+  }
+
+  getTrafficBarData(period: string): Observable<TrafficBar> {
+    return observableOf(this.data[period]);
+  }
+}

src/app/@core/mock/traffic-chart.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { of as observableOf,  Observable } from 'rxjs';
+import { TrafficChartData } from '../data/traffic-chart';
+
+@Injectable()
+export class TrafficChartService extends TrafficChartData {
+
+  private data: number[] = [
+    300, 520, 435, 530,
+    730, 620, 660, 860,
+  ];
+
+  getTrafficChartData(): Observable<number[]> {
+    return observableOf(this.data);
+  }
+}

src/app/@core/mock/traffic-list.service.ts

@@ -0,0 +1,85 @@
+import { Injectable } from '@angular/core';
+import { of as observableOf,  Observable } from 'rxjs';
+import { PeriodsService } from './periods.service';
+import { TrafficList, TrafficListData } from '../data/traffic-list';
+
+@Injectable()
+export class TrafficListService extends TrafficListData {
+
+  private getRandom = (roundTo: number) => Math.round(Math.random() * roundTo);
+  private data = {};
+
+  constructor(private period: PeriodsService) {
+    super();
+    this.data = {
+      week: this.getDataWeek(),
+      month: this.getDataMonth(),
+      year: this.getDataYear(),
+    };
+  }
+
+  private getDataWeek(): TrafficList[] {
+    const getFirstDateInPeriod = () => {
+      const weeks = this.period.getWeeks();
+
+      return weeks[weeks.length - 1];
+    };
+
+    return this.reduceData(this.period.getWeeks(), getFirstDateInPeriod);
+  }
+
+  private getDataMonth(): TrafficList[] {
+    const getFirstDateInPeriod = () => {
+      const months = this.period.getMonths();
+
+      return months[months.length - 1];
+    };
+
+    return this.reduceData(this.period.getMonths(), getFirstDateInPeriod);
+  }
+
+  private getDataYear(): TrafficList[] {
+    const getFirstDateInPeriod = () => {
+      const years = this.period.getYears();
+
+      return `${parseInt(years[0], 10) - 1}`;
+    };
+
+    return this.reduceData(this.period.getYears(), getFirstDateInPeriod);
+  }
+
+  private reduceData(timePeriods: string[], getFirstDateInPeriod: () => string): TrafficList[] {
+    return timePeriods.reduce((result, timePeriod, index) => {
+      const hasResult = result[index - 1];
+      const prevDate = hasResult ?
+        result[index - 1].comparison.nextDate :
+        getFirstDateInPeriod();
+      const prevValue = hasResult ?
+        result[index - 1].comparison.nextValue :
+        this.getRandom(100);
+      const nextValue = this.getRandom(100);
+      const deltaValue = prevValue - nextValue;
+
+      const item = {
+        date: timePeriod,
+        value: this.getRandom(1000),
+        delta: {
+          up: deltaValue <= 0,
+          value: Math.abs(deltaValue),
+        },
+        comparison: {
+          prevDate,
+          prevValue,
+          nextDate: timePeriod,
+          nextValue,
+        },
+      };
+
+      return [...result, item];
+    }, []);
+  }
+
+  getTrafficListData(period: string): Observable<TrafficList> {
+    return observableOf(this.data[period]);
+  }
+}

src/app/@core/mock/user-activity.service.ts

@@ -0,0 +1,57 @@
+import { Injectable } from '@angular/core';
+import { of as observableOf,  Observable } from 'rxjs';
+import { PeriodsService } from './periods.service';
+import { UserActive, UserActivityData } from '../data/user-activity';
+
+@Injectable()
+export class UserActivityService extends UserActivityData {
+
+  private getRandom = (roundTo: number) => Math.round(Math.random() * roundTo);
+  private generateUserActivityRandomData(date) {
+    return {
+      date,
+      pagesVisitCount: this.getRandom(1000),
+      deltaUp: this.getRandom(1) % 2 === 0,
+      newVisits: this.getRandom(100),
+    };
+  }
+
+  data = {};
+
+  constructor(private periods: PeriodsService) {
+    super();
+    this.data = {
+      week: this.getDataWeek(),
+      month: this.getDataMonth(),
+      year: this.getDataYear(),
+    };
+  }
+
+  private getDataWeek(): UserActive[] {
+    return this.periods.getWeeks().map((week) => {
+      return this.generateUserActivityRandomData(week);
+    });
+  }
+
+  private getDataMonth(): UserActive[] {
+    const currentDate = new Date();
+    const days = currentDate.getDate();
+    const month = this.periods.getMonths()[currentDate.getMonth()];
+
+    return Array.from(Array(days)).map((_, index) => {
+      const date = `${index + 1} ${month}`;
+
+      return this.generateUserActivityRandomData(date);
+    });
+  }
+
+  private getDataYear(): UserActive[] {
+    return this.periods.getYears().map((year) => {
+      return this.generateUserActivityRandomData(year);
+    });
+  }
+
+  getUserActivityData(period: string): Observable<UserActive[]> {
+    return observableOf(this.data[period]);
+  }
+}

src/app/@core/mock/users.service.ts

@@ -0,0 +1,53 @@
+import { of as observableOf,  Observable } from 'rxjs';
+import { Injectable } from '@angular/core';
+import { Contacts, RecentUsers, UserData } from '../data/users';
+
+@Injectable()
+export class UserService extends UserData {
+
+  private time: Date = new Date;
+
+  private users = {
+    nick: { name: 'Nick Jones', picture: 'assets/images/nick.png' },
+    eva: { name: 'Eva Moor', picture: 'assets/images/eva.png' },
+    jack: { name: 'Jack Williams', picture: 'assets/images/jack.png' },
+    lee: { name: 'Lee Wong', picture: 'assets/images/lee.png' },
+    alan: { name: 'Alan Thompson', picture: 'assets/images/alan.png' },
+    kate: { name: 'Kate Martinez', picture: 'assets/images/kate.png' },
+  };
+  private types = {
+    mobile: 'mobile',
+    home: 'home',
+    work: 'work',
+  };
+  private contacts: Contacts[] = [
+    { user: this.users.nick, type: this.types.mobile },
+    { user: this.users.eva, type: this.types.home },
+    { user: this.users.jack, type: this.types.mobile },
+    { user: this.users.lee, type: this.types.mobile },
+    { user: this.users.alan, type: this.types.home },
+    { user: this.users.kate, type: this.types.work },
+  ];
+  private recentUsers: RecentUsers[]  = [
+    { user: this.users.alan, type: this.types.home, time: this.time.setHours(21, 12)},
+    { user: this.users.eva, type: this.types.home, time: this.time.setHours(17, 45)},
+    { user: this.users.nick, type: this.types.mobile, time: this.time.setHours(5, 29)},
+    { user: this.users.lee, type: this.types.mobile, time: this.time.setHours(11, 24)},
+    { user: this.users.jack, type: this.types.mobile, time: this.time.setHours(10, 45)},
+    { user: this.users.kate, type: this.types.work, time: this.time.setHours(9, 42)},
+    { user: this.users.kate, type: this.types.work, time: this.time.setHours(9, 31)},
+    { user: this.users.jack, type: this.types.mobile, time: this.time.setHours(8, 0)},
+  ];
+
+  getUsers(): Observable<any> {
+    return observableOf(this.users);
+  }
+
+  getContacts(): Observable<Contacts[]> {
+    return observableOf(this.contacts);
+  }
+
+  getRecentUsers(): Observable<RecentUsers[]> {
+    return observableOf(this.recentUsers);
+  }
+}

src/app/@core/mock/visitors-analytics.service.ts

@@ -0,0 +1,57 @@
+import { Injectable } from '@angular/core';
+import { of as observableOf, Observable } from 'rxjs';
+import { PeriodsService } from './periods.service';
+import { OutlineData, VisitorsAnalyticsData } from '../data/visitors-analytics';
+
+@Injectable()
+export class VisitorsAnalyticsService extends VisitorsAnalyticsData {
+
+  constructor(private periodService: PeriodsService) {
+    super();
+  }
+
+  private pieChartValue = 75;
+  private innerLinePoints: number[] = [
+    94, 188, 225, 244, 253, 254, 249, 235, 208,
+    173, 141, 118, 105, 97, 94, 96, 104, 121, 147,
+    183, 224, 265, 302, 333, 358, 375, 388, 395,
+    400, 400, 397, 390, 377, 360, 338, 310, 278,
+    241, 204, 166, 130, 98, 71, 49, 32, 20, 13, 9,
+  ];
+  private outerLinePoints: number[] = [
+    85, 71, 59, 50, 45, 42, 41, 44 , 58, 88,
+    136 , 199, 267, 326, 367, 391, 400, 397,
+    376, 319, 200, 104, 60, 41, 36, 37, 44,
+    55, 74, 100 , 131, 159, 180, 193, 199, 200,
+    195, 184, 164, 135, 103, 73, 50, 33, 22, 15, 11,
+  ];
+  private generateOutlineLineData(): OutlineData[] {
+    const months = this.periodService.getMonths();
+    const outerLinePointsLength = this.outerLinePoints.length;
+    const monthsLength = months.length;
+
+    return this.outerLinePoints.map((p, index) => {
+      const monthIndex = Math.round(index / 4);
+      const label = (index % Math.round(outerLinePointsLength / monthsLength) === 0)
+        ? months[monthIndex]
+        : '';
+
+      return {
+        label,
+        value: p,
+      };
+    });
+  }
+
+  getInnerLineChartData(): Observable<number[]> {
+    return observableOf(this.innerLinePoints);
+  }
+
+  getOutlineLineChartData(): Observable<OutlineData[]> {
+    return observableOf(this.generateOutlineLineData());
+  }
+
+  getPieChartData(): Observable<number> {
+    return observableOf(this.pieChartValue);
+  }
+}

src/app/@core/module-import-guard.ts

@@ -0,0 +1,5 @@
+export function throwIfAlreadyLoaded(parentModule: any, moduleName: string) {
+  if (parentModule) {
+    throw new Error(`${moduleName} has already been loaded. Import Core modules in the AppModule only.`);
+  }
+}

src/app/@core/utils/analytics.service.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { Location } from '@angular/common';
+import { filter } from 'rxjs/operators';
+
+declare const ga: any;
+
+@Injectable()
+export class AnalyticsService {
+  private enabled: boolean;
+
+  constructor(private location: Location, private router: Router) {
+    this.enabled = false;
+  }
+
+  trackPageViews() {
+    if (this.enabled) {
+      this.router.events.pipe(
+        filter((event) => event instanceof NavigationEnd),
+      )
+        .subscribe(() => {
+          ga('send', {hitType: 'pageview', page: this.location.path()});
+        });
+    }
+  }
+
+  trackEvent(eventName: string) {
+    if (this.enabled) {
+      ga('send', 'event', eventName);
+    }
+  }
+}

src/app/@core/utils/index.ts

@@ -0,0 +1,13 @@
+import { LayoutService } from './layout.service';
+import { AnalyticsService } from './analytics.service';
+import { PlayerService } from './player.service';
+import { StateService } from './state.service';
+import { SeoService } from './seo.service';
+
+export {
+  LayoutService,
+  AnalyticsService,
+  PlayerService,
+  SeoService,
+  StateService,
+};

src/app/@core/utils/layout.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { delay, shareReplay, debounceTime } from 'rxjs/operators';
+
+@Injectable()
+export class LayoutService {
+
+  protected layoutSize$ = new Subject();
+  protected layoutSizeChange$ = this.layoutSize$.pipe(
+    shareReplay({ refCount: true }),
+  );
+
+  changeLayoutSize() {
+    this.layoutSize$.next();
+  }
+
+  onChangeLayoutSize(): Observable<any> {
+    return this.layoutSizeChange$.pipe(delay(1));
+  }
+
+  onSafeChangeLayoutSize(): Observable<any> {
+    return this.layoutSizeChange$.pipe(
+      debounceTime(350),
+    );
+  }
+}

src/app/@core/utils/player.service.ts

@@ -0,0 +1,66 @@
+import { Injectable } from '@angular/core';
+
+export class Track {
+  name: string;
+  artist: string;
+  url: string;
+  cover: string;
+}
+
+@Injectable()
+export class PlayerService {
+  current: number;
+  playlist: Track[] = [
+    {
+      name: 'Don\'t Wanna Fight',
+      artist: 'Alabama Shakes',
+      url: 'https://p.scdn.co/mp3-preview/6156cdbca425a894972c02fca9d76c0b70e001af',
+      cover: 'assets/images/cover1.jpg',
+    },
+    {
+      name: 'Harder',
+      artist: 'Daft Punk',
+      url: 'https://p.scdn.co/mp3-preview/92a04c7c0e96bf93a1b1b1cae7dfff1921969a7b',
+      cover: 'assets/images/cover2.jpg',
+    },
+    {
+      name: 'Come Together',
+      artist: 'Beatles',
+      url: 'https://p.scdn.co/mp3-preview/83090a4db6899eaca689ae35f69126dbe65d94c9',
+      cover: 'assets/images/cover3.jpg',
+    },
+  ];
+
+  random(): Track {
+    this.current = Math.floor(Math.random() * this.playlist.length);
+    return this.playlist[this.current];
+  }
+
+  next(): Track {
+    return this.getNextTrack();
+  }
+
+  prev() {
+    return this.getPrevTrack();
+  }
+
+  private getNextTrack(): Track {
+    if (this.current === this.playlist.length - 1) {
+      this.current = 0;
+    } else {
+      this.current++;
+    }
+
+    return this.playlist[this.current];
+  }
+
+  private getPrevTrack(): Track {
+    if (this.current === 0) {
+      this.current = this.playlist.length - 1;
+    } else {
+      this.current--;
+    }
+
+    return this.playlist[this.current];
+  }
+}

src/app/@core/utils/seo.service.ts

@@ -0,0 +1,58 @@
+import { Injectable, Inject, PLATFORM_ID, OnDestroy } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { NavigationEnd, Router } from '@angular/router';
+import { NB_DOCUMENT } from '@nebular/theme';
+import { filter, takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+
+@Injectable()
+export class SeoService implements OnDestroy {
+
+  private readonly destroy$ = new Subject<void>();
+  private readonly dom: Document;
+  private readonly isBrowser: boolean;
+  private linkCanonical: HTMLLinkElement;
+
+  constructor(
+    private router: Router,
+    @Inject(NB_DOCUMENT) document,
+    @Inject(PLATFORM_ID) platformId,
+  ) {
+    this.isBrowser = isPlatformBrowser(platformId);
+    this.dom = document;
+
+    if (this.isBrowser) {
+      this.createCanonicalTag();
+    }
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  createCanonicalTag() {
+    this.linkCanonical = this.dom.createElement('link');
+    this.linkCanonical.setAttribute('rel', 'canonical');
+    this.dom.head.appendChild(this.linkCanonical);
+    this.linkCanonical.setAttribute('href', this.getCanonicalUrl());
+  }
+
+  trackCanonicalChanges() {
+    if (!this.isBrowser) {
+      return;
+    }
+
+    this.router.events.pipe(
+      filter((event) => event instanceof NavigationEnd),
+      takeUntil(this.destroy$),
+    )
+      .subscribe(() => {
+        this.linkCanonical.setAttribute('href', this.getCanonicalUrl());
+      });
+  }
+
+  private getCanonicalUrl(): string {
+    return this.dom.location.origin + this.dom.location.pathname;
+  }
+}

src/app/@core/utils/state.service.ts

@@ -0,0 +1,92 @@
+import { Injectable, OnDestroy } from '@angular/core';
+import { of as observableOf,  Observable,  BehaviorSubject } from 'rxjs';
+import { takeWhile } from 'rxjs/operators';
+
+import { NbLayoutDirectionService, NbLayoutDirection } from '@nebular/theme';
+
+@Injectable()
+export class StateService implements OnDestroy {
+
+  protected layouts: any = [
+    {
+      name: 'One Column',
+      icon: 'nb-layout-default',
+      id: 'one-column',
+      selected: true,
+    },
+    {
+      name: 'Two Column',
+      icon: 'nb-layout-two-column',
+      id: 'two-column',
+    },
+    {
+      name: 'Center Column',
+      icon: 'nb-layout-centre',
+      id: 'center-column',
+    },
+  ];
+
+  protected sidebars: any = [
+    {
+      name: 'Sidebar at layout start',
+      icon: 'nb-layout-sidebar-left',
+      id: 'start',
+      selected: true,
+    },
+    {
+      name: 'Sidebar at layout end',
+      icon: 'nb-layout-sidebar-right',
+      id: 'end',
+    },
+  ];
+
+  protected layoutState$ = new BehaviorSubject(this.layouts[0]);
+  protected sidebarState$ = new BehaviorSubject(this.sidebars[0]);
+
+  alive = true;
+
+  constructor(directionService: NbLayoutDirectionService) {
+    directionService.onDirectionChange()
+      .pipe(takeWhile(() => this.alive))
+      .subscribe(direction => this.updateSidebarIcons(direction));
+
+    this.updateSidebarIcons(directionService.getDirection());
+  }
+
+  ngOnDestroy() {
+    this.alive = false;
+  }
+
+  private updateSidebarIcons(direction: NbLayoutDirection) {
+    const [ startSidebar, endSidebar ] = this.sidebars;
+    const isLtr = direction === NbLayoutDirection.LTR;
+    const startIconClass = isLtr ? 'nb-layout-sidebar-left' : 'nb-layout-sidebar-right';
+    const endIconClass = isLtr ? 'nb-layout-sidebar-right' : 'nb-layout-sidebar-left';
+    startSidebar.icon = startIconClass;
+    endSidebar.icon = endIconClass;
+  }
+
+  setLayoutState(state: any): any {
+    this.layoutState$.next(state);
+  }
+
+  getLayoutStates(): Observable<any[]> {
+    return observableOf(this.layouts);
+  }
+
+  onLayoutState(): Observable<any> {
+    return this.layoutState$.asObservable();
+  }
+
+  setSidebarState(state: any): any {
+    this.sidebarState$.next(state);
+  }
+
+  getSidebarStates(): Observable<any[]> {
+    return observableOf(this.sidebars);
+  }
+
+  onSidebarState(): Observable<any> {
+    return this.sidebarState$.asObservable();
+  }
+}

src/app/@theme/components/footer/footer.component.scss

@@ -0,0 +1,30 @@
+@import '../../styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+@import '~bootstrap/scss/mixins/breakpoints';
+
+@include nb-install-component() {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .socials {
+    font-size: 2rem;
+
+    a {
+      padding: 0.4rem;
+      color: nb-theme(text-hint-color);
+      transition: color ease-out 0.1s;
+
+      &:hover {
+        color: nb-theme(text-basic-color);
+      }
+    }
+  }
+
+  @include media-breakpoint-down(is) {
+    .socials {
+      font-size: 1.5rem;
+    }
+  }
+}

src/app/@theme/components/footer/footer.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-footer',
+  styleUrls: ['./footer.component.scss'],
+  template: `
+    <span class="created-by">
+      Created with ♥ by <b><a href="#" target="_blank">Chris</a></b> 2022
+    </span>
+    <!-- <div class="socials">
+      <a href="#" target="_blank" class="ion ion-social-github"></a>
+      <a href="#" target="_blank" class="ion ion-social-facebook"></a>
+      <a href="#" target="_blank" class="ion ion-social-twitter"></a>
+      <a href="#" target="_blank" class="ion ion-social-linkedin"></a>
+    </div> -->
+  `,
+})
+export class FooterComponent {
+}

src/app/@theme/components/header/header.component.html

@@ -0,0 +1,28 @@
+<div class="header-container">
+  <div class="logo-container">
+    <a (click)="toggleSidebar()" href="#" class="sidebar-toggle">
+      <nb-icon icon="menu-2-outline"></nb-icon>
+    </a>
+    <a class="logo" href="#" (click)="navigateHome()"><img class="h-100" src='/assets/images/ArkLogo.svg' />
+      {{header}}</a>
+  </div>
+  <!-- <nb-select [selected]="currentTheme" (selectedChange)="changeTheme($event)" status="primary">
+    <nb-option *ngFor="let theme of themes" [value]="theme.value"> {{ theme.name }}</nb-option>
+  </nb-select> -->
+</div>
+
+<div class="header-container">
+  <nb-actions size="small">
+    <!-- 
+    <nb-action class="control-item">
+      <nb-search type="rotate-layout"></nb-search>
+    </nb-action>
+    <nb-action class="control-item" icon="email-outline"></nb-action>
+    <nb-action class="control-item" icon="bell-outline"></nb-action> -->
+    <nb-action class="user-action" *ngIf="user">
+      <nb-user [nbContextMenu]="userMenu" nbContextMenuTag="UserProfileMenu" [onlyPicture]="userPictureOnly"
+        [name]="userFullName" [picture]="avatarImage">
+      </nb-user>
+    </nb-action>
+  </nb-actions>
+</div>

src/app/@theme/components/header/header.component.scss

@@ -0,0 +1,76 @@
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/breakpoints';
+@import '../../styles/themes';
+
+@include nb-install-component() {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+
+  .logo-container {
+    display: flex;
+    align-items: center;
+    width: calc(#{nb-theme(sidebar-width)} - #{nb-theme(header-padding)});
+  }
+
+  nb-action {
+    height: auto;
+    display: flex;
+    align-content: center;
+  }
+
+  nb-user {
+    cursor: pointer;
+  }
+
+  ::ng-deep nb-search button {
+    padding: 0!important;
+  }
+
+  .header-container {
+    display: flex;
+    align-items: center;
+    width: auto;
+
+    .sidebar-toggle {
+      @include nb-ltr(padding-right, 1.25rem);
+      @include nb-rtl(padding-left, 1.25rem);
+      text-decoration: none;
+      color: nb-theme(text-hint-color);
+      nb-icon {
+        font-size: 1.75rem;
+      }
+    }
+
+    .logo {
+      //padding: 0 1.25rem;
+      padding: 3px 0.25rem;
+      font-size: 1.75rem;
+      @include nb-ltr(border-left, 1px solid nb-theme(divider-color));
+      @include nb-rtl(border-right, 1px solid nb-theme(divider-color));
+      white-space: nowrap;
+      text-decoration: none;
+      height: 58px;
+
+      color: #c0d9b4;
+      font-size: 21px;
+      font-weight: 600;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    .control-item {
+      display: none;
+    }
+    .user-action {
+      border: none;
+      padding: 0;
+    }
+  }
+
+  @include media-breakpoint-down(is) {
+    nb-select {
+      display: none;
+    }
+  }
+}

src/app/@theme/components/header/header.component.ts

@@ -0,0 +1,137 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { NbMediaBreakpointsService, NbMenuItem, NbMenuService, NbSidebarService, NbThemeService } from '@nebular/theme';
+
+import { UserData } from '../../../@core/data/users';
+import { LayoutService } from '../../../@core/utils';
+import { map, takeUntil, first } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+import { HeaderService } from '../../../services/header.service';
+import { NbAuthService } from '@nebular/auth';
+import { AuthService } from '../../../services/auth.service';
+import { UserProfileAction } from '../../../entity/Auth';
+
+@Component({
+  selector: 'ngx-header',
+  styleUrls: ['./header.component.scss'],
+  templateUrl: './header.component.html',
+})
+export class HeaderComponent implements OnInit, OnDestroy {
+  header: string = '';
+  private destroy$: Subject<void> = new Subject<void>();
+  userPictureOnly: boolean = false;
+
+  themes = [
+    {
+      value: 'default',
+      name: 'Light',
+    },
+    {
+      value: 'dark',
+      name: 'Dark',
+    },
+    {
+      value: 'cosmic',
+      name: 'Cosmic',
+    },
+    {
+      value: 'corporate',
+      name: 'Corporate',
+    },
+  ];
+
+  currentTheme = 'default';
+
+  userMenu: NbMenuItem[] = [
+    {
+      title: 'Profile',
+      data: UserProfileAction.GoToProfile
+    },
+    {
+      title: 'Log out',
+      data: UserProfileAction.LogOut
+    }];
+
+  public get user() {
+    return this.authService.userAccess;
+  }
+  public get userFullName() {
+    if (this.user) {
+      return `${this.user.firstName} ${this.user.lastName}`;
+    } else {
+      return null;
+    }
+  }
+  public get avatarImage() {
+    if (this.user && this.user.avatarImage) {
+      return this.user.avatarImage
+    } else {
+      return null;
+    }
+  }
+  constructor(private sidebarService: NbSidebarService,
+    private menuService: NbMenuService,
+    private themeService: NbThemeService,
+    private userService: UserData,
+    private layoutService: LayoutService,
+    private breakpointService: NbMediaBreakpointsService,
+    private headerService: HeaderService,
+    private oAuthService: NbAuthService,
+    private authService: AuthService,
+  ) {
+
+    this.headerService.headerChange$.pipe(takeUntil(this.destroy$)).subscribe(result => {
+      this.header = result;
+    });
+    this.menuService.onItemClick().pipe(takeUntil(this.destroy$))
+      .subscribe(result => {
+        if (result.item.title == 'Log out') this.logout();
+      });
+  }
+
+
+
+  ngOnInit() {
+    this.currentTheme = this.themeService.currentTheme;
+
+    const { xl } = this.breakpointService.getBreakpointsMap();
+    this.themeService.onMediaQueryChange()
+      .pipe(
+        map(([, currentBreakpoint]) => currentBreakpoint.width < xl),
+        takeUntil(this.destroy$),
+      )
+      .subscribe((isLessThanXl: boolean) => this.userPictureOnly = isLessThanXl);
+
+    this.themeService.onThemeChange()
+      .pipe(
+        map(({ name }) => name),
+        takeUntil(this.destroy$),
+      )
+      .subscribe(themeName => this.currentTheme = themeName);
+
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  changeTheme(themeName: string) {
+    this.themeService.changeTheme(themeName);
+  }
+
+  toggleSidebar(): boolean {
+    this.sidebarService.toggle(true, 'menu-sidebar');
+    this.layoutService.changeLayoutSize();
+
+    return false;
+  }
+
+  navigateHome() {
+    this.menuService.navigateHome();
+    return false;
+  }
+  logout() {
+    this.authService.logout();
+
+  }
+}

src/app/@theme/components/index.ts

@@ -0,0 +1,4 @@
+export * from './header/header.component';
+export * from './footer/footer.component';
+export * from './search-input/search-input.component';
+export * from './tiny-mce/tiny-mce.component';

src/app/@theme/components/search-input/search-input.component.scss

@@ -0,0 +1,33 @@
+:host {
+  display: flex;
+  align-items: center;
+
+  i.control-icon {
+    &::before {
+      font-size: 2.3rem;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  input {
+    border: none;
+    outline: none;
+    margin-left: 1rem;
+    width: 15rem;
+    transition: width 0.2s ease;
+
+    &.hidden {
+      width: 0;
+      margin: 0;
+    }
+  }
+
+  ::ng-deep search-input {
+    input {
+      background: transparent;
+    }
+  }
+}

src/app/@theme/components/search-input/search-input.component.ts

@@ -0,0 +1,35 @@
+import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'ngx-search-input',
+  styleUrls: ['./search-input.component.scss'],
+  template: `
+    <i class="control-icon ion ion-ios-search"
+       (click)="showInput()"></i>
+    <input placeholder="Type your search request here..."
+           #input
+           [class.hidden]="!isInputShown"
+           (blur)="hideInput()"
+           (input)="onInput($event)">
+  `,
+})
+export class SearchInputComponent {
+  @ViewChild('input', { static: true }) input: ElementRef;
+
+  @Output() search: EventEmitter<string> = new EventEmitter<string>();
+
+  isInputShown = false;
+
+  showInput() {
+    this.isInputShown = true;
+    this.input.nativeElement.focus();
+  }
+
+  hideInput() {
+    this.isInputShown = false;
+  }
+
+  onInput(val: string) {
+    this.search.emit(val);
+  }
+}

src/app/@theme/components/tiny-mce/tiny-mce.component.ts

@@ -0,0 +1,37 @@
+import { Component, OnDestroy, AfterViewInit, Output, EventEmitter, ElementRef } from '@angular/core';
+import { LocationStrategy } from '@angular/common';
+
+@Component({
+  selector: 'ngx-tiny-mce',
+  template: '',
+})
+export class TinyMCEComponent implements OnDestroy, AfterViewInit {
+
+  @Output() editorKeyup = new EventEmitter<any>();
+
+  editor: any;
+
+  constructor(
+    private host: ElementRef,
+    private locationStrategy: LocationStrategy,
+  ) { }
+
+  ngAfterViewInit() {
+    tinymce.init({
+      target: this.host.nativeElement,
+      plugins: ['link', 'paste', 'table'],
+      skin_url: `${this.locationStrategy.getBaseHref()}assets/skins/lightgray`,
+      setup: editor => {
+        this.editor = editor;
+        editor.on('keyup', () => {
+          this.editorKeyup.emit(editor.getContent());
+        });
+      },
+      height: '320',
+    });
+  }
+
+  ngOnDestroy() {
+    tinymce.remove(this.editor);
+  }
+}

src/app/@theme/layouts/index.ts

@@ -0,0 +1,4 @@
+export * from './one-column/one-column.layout';
+export * from './two-columns/two-columns.layout';
+export * from './three-columns/three-columns.layout';
+export * from './plain/plain.layout';

src/app/@theme/layouts/one-column/one-column.layout.scss

@@ -0,0 +1,9 @@
+@import '../../styles/themes';
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+  .menu-sidebar ::ng-deep .scrollable {
+    padding-top: nb-theme(layout-padding-top);
+  }
+}

src/app/@theme/layouts/one-column/one-column.layout.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-one-column-layout',
+  styleUrls: ['./one-column.layout.scss'],
+  template: `
+    <nb-layout windowMode>
+      <nb-layout-header fixed>
+        <ngx-header></ngx-header>
+      </nb-layout-header>
+
+      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
+        <ng-content select="nb-menu"></ng-content>
+      </nb-sidebar>
+
+      <nb-layout-column>
+        <ng-content select="router-outlet"></ng-content>
+      </nb-layout-column>
+
+      <nb-layout-footer fixed>
+        <ngx-footer></ngx-footer>
+      </nb-layout-footer>
+    </nb-layout>
+  `,
+})
+export class OneColumnLayoutComponent {}

src/app/@theme/layouts/plain/plain.layout.scss

@@ -0,0 +1,9 @@
+@import '../../styles/themes';
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+  .menu-sidebar ::ng-deep .scrollable {
+    padding-top: nb-theme(layout-padding-top);
+  }
+}

src/app/@theme/layouts/plain/plain.layout.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-plain-layout',
+  styleUrls: ['./plain.layout.scss'],
+  template: `
+    <nb-layout>
+
+
+      <nb-layout-column>
+        <ng-content select="router-outlet"></ng-content>
+      </nb-layout-column>
+
+      <nb-layout-footer fixed>
+        <ngx-footer></ngx-footer>
+      </nb-layout-footer>
+    </nb-layout>
+  `,
+})
+export class PlainLayoutComponent { }

src/app/@theme/layouts/three-columns/three-columns.layout.scss

@@ -0,0 +1,9 @@
+@import '../../styles/themes';
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+  .menu-sidebar ::ng-deep .scrollable {
+    padding-top: nb-theme(layout-padding-top);
+  }
+}

src/app/@theme/layouts/three-columns/three-columns.layout.ts

@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-three-columns-layout',
+  styleUrls: ['./three-columns.layout.scss'],
+  template: `
+    <nb-layout windowMode>
+      <nb-layout-header fixed>
+        <ngx-header></ngx-header>
+      </nb-layout-header>
+
+      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
+        <ng-content select="nb-menu"></ng-content>
+      </nb-sidebar>
+
+      <nb-layout-column class="small">
+      </nb-layout-column>
+
+      <nb-layout-column>
+        <ng-content select="router-outlet"></ng-content>
+      </nb-layout-column>
+
+      <nb-layout-column class="small">
+      </nb-layout-column>
+
+      <nb-layout-footer fixed>
+        <ngx-footer></ngx-footer>
+      </nb-layout-footer>
+    </nb-layout>
+  `,
+})
+export class ThreeColumnsLayoutComponent {}

src/app/@theme/layouts/two-columns/two-columns.layout.scss

@@ -0,0 +1,9 @@
+@import '../../styles/themes';
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+  .menu-sidebar ::ng-deep .scrollable {
+    padding-top: nb-theme(layout-padding-top);
+  }
+}

src/app/@theme/layouts/two-columns/two-columns.layout.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-two-columns-layout',
+  styleUrls: ['./two-columns.layout.scss'],
+  template: `
+    <nb-layout windowMode>
+      <nb-layout-header fixed>
+        <ngx-header></ngx-header>
+      </nb-layout-header>
+
+      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
+        <ng-content select="nb-menu"></ng-content>
+      </nb-sidebar>
+
+      <nb-layout-column class="small">
+      </nb-layout-column>
+
+      <nb-layout-column>
+        <ng-content select="router-outlet"></ng-content>
+      </nb-layout-column>
+
+      <nb-layout-footer fixed>
+        <ngx-footer></ngx-footer>
+      </nb-layout-footer>
+
+    </nb-layout>
+  `,
+})
+export class TwoColumnsLayoutComponent {}

src/app/@theme/pipes/capitalize.pipe.ts

@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'ngxCapitalize' })
+export class CapitalizePipe implements PipeTransform {
+
+  transform(input: string): string {
+    return input && input.length
+      ? (input.charAt(0).toUpperCase() + input.slice(1).toLowerCase())
+      : input;
+  }
+}

src/app/@theme/pipes/index.ts

@@ -0,0 +1,5 @@
+export * from './capitalize.pipe';
+export * from './plural.pipe';
+export * from './round.pipe';
+export * from './timing.pipe';
+export * from './number-with-commas.pipe';

src/app/@theme/pipes/number-with-commas.pipe.ts

@@ -0,0 +1,9 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'ngxNumberWithCommas' })
+export class NumberWithCommasPipe implements PipeTransform {
+
+  transform(input: number): string {
+    return new Intl.NumberFormat().format(input);
+  }
+}

src/app/@theme/pipes/plural.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'ngxPlural' })
+export class PluralPipe implements PipeTransform {
+
+  transform(input: number, label: string, pluralLabel: string = ''): string {
+    input = input || 0;
+    return input === 1
+      ? `${input} ${label}`
+      : pluralLabel
+        ? `${input} ${pluralLabel}`
+        : `${input} ${label}s`;
+  }
+}

src/app/@theme/pipes/round.pipe.ts

@@ -0,0 +1,9 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'ngxRound' })
+export class RoundPipe implements PipeTransform {
+
+  transform(input: number): number {
+    return Math.round(input);
+  }
+}

src/app/@theme/pipes/timing.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'timing' })
+export class TimingPipe implements PipeTransform {
+  transform(time: number): string {
+    if (time) {
+      const minutes = Math.floor(time / 60);
+      const seconds = Math.floor(time % 60);
+      return `${this.initZero(minutes)}${minutes}:${this.initZero(seconds)}${seconds}`;
+    }
+
+    return '00:00';
+  }
+
+  private initZero(time: number): string {
+    return time < 10 ? '0' : '';
+  }
+}

src/app/@theme/styles/_layout.scss

@@ -0,0 +1,8 @@
+@mixin ngx-layout() {
+  @include media-breakpoint-down(is) {
+    .row {
+      margin-left: -10px;
+      margin-right: -10px;
+    }
+  }
+}

src/app/@theme/styles/_overrides.scss

@@ -0,0 +1,11 @@
+@import './themes';
+
+@mixin nb-overrides() {
+  nb-select.size-medium button {
+    padding: 0.4375rem 2.2rem 0.4375rem 1.125rem !important;
+
+    nb-icon {
+      right: 0.41rem !important;
+    }
+  }
+}

src/app/@theme/styles/pace.theme.scss

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+ @mixin ngx-pace-theme() {
+
+  .pace .pace-progress {
+    background: nb-theme(color-primary-default);
+  }
+
+  .pace .pace-progress-inner {
+    box-shadow: 0 0 10px nb-theme(color-primary-default), 0 0 5px nb-theme(color-primary-default);
+  }
+
+  .pace .pace-activity {
+    display: none;
+  }
+}

src/app/@theme/styles/styles.scss

@@ -0,0 +1,33 @@
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');
+
+// themes - our custom or/and out of the box themes
+@import 'themes';
+
+// framework component themes (styles tied to theme variables)
+@import '~@nebular/theme/styles/globals';
+@import '~@nebular/auth/styles/globals';
+
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
+@import '~bootstrap/scss/mixins';
+@import '~bootstrap/scss/grid';
+
+// loading progress bar theme
+@import './pace.theme';
+
+@import './layout';
+@import './overrides';
+
+// install the framework and custom global styles
+@include nb-install() {
+
+  // framework global styles
+  @include nb-theme-global();
+  @include nb-auth-global();
+
+  @include ngx-layout();
+  // loading progress bar
+  @include ngx-pace-theme();
+
+  @include nb-overrides();
+};

src/app/@theme/styles/theme.corporate.ts

@@ -0,0 +1,308 @@
+import { NbJSThemeOptions, CORPORATE_THEME as baseTheme } from '@nebular/theme';
+
+const baseThemeVariables = baseTheme.variables;
+
+export const CORPORATE_THEME = {
+  name: 'corporate',
+  base: 'corporate',
+  variables: {
+    temperature: {
+      arcFill: [ '#ffa36b', '#ffa36b', '#ff9e7a', '#ff9888', '#ff8ea0' ],
+      arcEmpty: baseThemeVariables.bg2,
+      thumbBg: baseThemeVariables.bg2,
+      thumbBorder: '#ffa36b',
+    },
+
+    solar: {
+      gradientLeft: baseThemeVariables.primary,
+      gradientRight: baseThemeVariables.primary,
+      shadowColor: 'rgba(0, 0, 0, 0)',
+      secondSeriesFill: baseThemeVariables.bg2,
+      radius: ['80%', '90%'],
+    },
+
+    traffic: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+
+      yAxisSplitLine: 'rgba(0, 0, 0, 0)',
+
+      lineBg: baseThemeVariables.primary,
+      lineShadowBlur: '0',
+      itemColor: baseThemeVariables.border4,
+      itemBorderColor: baseThemeVariables.border4,
+      itemEmphasisBorderColor: baseThemeVariables.primaryLight,
+      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+      shadowLineShadow: 'rgba(0, 0, 0, 0)',
+      gradFrom: baseThemeVariables.bg,
+      gradTo: baseThemeVariables.bg,
+    },
+
+    electricity: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: baseThemeVariables.fgText,
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+
+      axisLineColor: baseThemeVariables.border3,
+      xAxisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'solid',
+      lineWidth: '4',
+      lineGradFrom: baseThemeVariables.primary,
+      lineGradTo: baseThemeVariables.primary,
+      lineShadow: 'rgba(0, 0, 0, 0)',
+
+      areaGradFrom: 'rgba(0, 0, 0, 0)',
+      areaGradTo: 'rgba(0, 0, 0, 0)',
+      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+    },
+
+    bubbleMap: {
+      titleColor: baseThemeVariables.fgText,
+      areaColor: baseThemeVariables.bg4,
+      areaHoverColor: baseThemeVariables.fgHighlight,
+      areaBorderColor: baseThemeVariables.border5,
+    },
+
+    profitBarAnimationEchart: {
+      textColor: baseThemeVariables.fgText,
+
+      firstAnimationBarColor: baseThemeVariables.primary,
+      secondAnimationBarColor: baseThemeVariables.success,
+
+      splitLineStyleOpacity: '1',
+      splitLineStyleWidth: '1',
+      splitLineStyleColor: baseThemeVariables.separator,
+
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '16',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+    },
+
+    trafficBarEchart: {
+      gradientFrom: baseThemeVariables.warningLight,
+      gradientTo: baseThemeVariables.warning,
+      shadow: baseThemeVariables.warningLight,
+      shadowBlur: '0',
+
+      axisTextColor: baseThemeVariables.fgText,
+      axisFontSize: '12',
+
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+    },
+
+    countryOrders: {
+      countryBorderColor: baseThemeVariables.border4,
+      countryFillColor: baseThemeVariables.bg4,
+      countryBorderWidth: '1',
+      hoveredCountryBorderColor: baseThemeVariables.primary,
+      hoveredCountryFillColor: baseThemeVariables.primaryLight,
+      hoveredCountryBorderWidth: '1',
+
+      chartAxisLineColor: baseThemeVariables.border4,
+      chartAxisTextColor: baseThemeVariables.fg,
+      chartAxisFontSize: '16',
+      chartGradientTo: baseThemeVariables.primary,
+      chartGradientFrom: baseThemeVariables.primaryLight,
+      chartAxisSplitLine: baseThemeVariables.separator,
+      chartShadowLineColor: baseThemeVariables.primaryLight,
+
+      chartLineBottomShadowColor: baseThemeVariables.primary,
+
+      chartInnerLineColor: baseThemeVariables.bg2,
+    },
+
+    echarts: {
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.fgText,
+      splitLineColor: baseThemeVariables.separator,
+      itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
+      tooltipBackgroundColor: baseThemeVariables.primary,
+      areaOpacity: '0.7',
+    },
+
+    chartjs: {
+      axisLineColor: baseThemeVariables.separator,
+      textColor: baseThemeVariables.fgText,
+    },
+
+    orders: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '20',
+
+      axisLineColor: baseThemeVariables.border4,
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'solid',
+      lineWidth: '4',
+
+      // first line
+      firstAreaGradFrom: baseThemeVariables.bg3,
+      firstAreaGradTo: baseThemeVariables.bg3,
+      firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+
+      // second line
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
+
+      secondAreaGradFrom: 'rgba(0, 0, 0, 0)',
+      secondAreaGradTo: 'rgba(0, 0, 0, 0)',
+      secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+
+      // third line
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,
+
+      thirdAreaGradFrom: 'rgba(0, 0, 0, 0)',
+      thirdAreaGradTo: 'rgba(0, 0, 0, 0)',
+      thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+    },
+
+    profit: {
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.border4,
+      splitLineColor: baseThemeVariables.separator,
+      areaOpacity: '1',
+
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+
+      // first bar
+      firstLineGradFrom: baseThemeVariables.bg3,
+      firstLineGradTo: baseThemeVariables.bg3,
+      firstLineShadow: 'rgba(0, 0, 0, 0)',
+
+      // second bar
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
+      secondLineShadow: 'rgba(0, 0, 0, 0)',
+
+      // third bar
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.success,
+      thirdLineShadow: 'rgba(0, 0, 0, 0)',
+    },
+
+    orderProfitLegend: {
+      firstItem: baseThemeVariables.success,
+      secondItem: baseThemeVariables.primary,
+      thirdItem: baseThemeVariables.bg3,
+    },
+
+    visitors: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipLineWidth: '1',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '20',
+
+      axisLineColor: baseThemeVariables.border4,
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'dotted',
+      lineWidth: '6',
+      lineGradFrom: '#ffffff',
+      lineGradTo: '#ffffff',
+      lineShadow: 'rgba(0, 0, 0, 0)',
+
+      areaGradFrom: baseThemeVariables.primary,
+      areaGradTo: baseThemeVariables.primaryLight,
+
+      innerLineStyle: 'solid',
+      innerLineWidth: '1',
+
+      innerAreaGradFrom: baseThemeVariables.success,
+      innerAreaGradTo: baseThemeVariables.success,
+    },
+
+    visitorsLegend: {
+      firstIcon: baseThemeVariables.success,
+      secondIcon: baseThemeVariables.primary,
+    },
+
+    visitorsPie: {
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
+      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
+      firstPieRadius: ['65%', '90%'],
+
+      secondPieGradientLeft: baseThemeVariables.warning,
+      secondPieGradientRight: baseThemeVariables.warningLight,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
+      secondPieRadius: ['63%', '92%'],
+      shadowOffsetX: '-4',
+      shadowOffsetY: '-4',
+    },
+
+    visitorsPieLegend: {
+      firstSection: baseThemeVariables.warning,
+      secondSection: baseThemeVariables.success,
+    },
+
+    earningPie: {
+      radius: ['65%', '100%'],
+      center: ['50%', '50%'],
+
+      fontSize: '22',
+
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
+      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
+
+      secondPieGradientLeft: baseThemeVariables.primary,
+      secondPieGradientRight: baseThemeVariables.primary,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
+
+      thirdPieGradientLeft: baseThemeVariables.warning,
+      thirdPieGradientRight: baseThemeVariables.warning,
+      thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
+    },
+
+    earningLine: {
+      gradFrom: baseThemeVariables.primary,
+      gradTo: baseThemeVariables.primary,
+
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '16',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+    },
+  },
+} as NbJSThemeOptions;

src/app/@theme/styles/theme.cosmic.ts

@@ -0,0 +1,308 @@
+import { NbJSThemeOptions, COSMIC_THEME as baseTheme } from '@nebular/theme';
+
+const baseThemeVariables = baseTheme.variables;
+
+export const COSMIC_THEME = {
+  name: 'cosmic',
+  base: 'cosmic',
+  variables: {
+    temperature: {
+      arcFill: [ '#2ec7fe', '#31ffad', '#7bff24', '#fff024', '#f7bd59' ],
+      arcEmpty: baseThemeVariables.bg2,
+      thumbBg: '#ffffff',
+      thumbBorder: '#ffffff',
+    },
+
+    solar: {
+      gradientLeft: baseThemeVariables.primary,
+      gradientRight: baseThemeVariables.primary,
+      shadowColor: 'rgba(0, 0, 0, 0)',
+      secondSeriesFill: baseThemeVariables.bg2,
+      radius: ['70%', '90%'],
+    },
+
+    traffic: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(50, 50, 89); border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      lineBg: baseThemeVariables.border2,
+      lineShadowBlur: '14',
+      itemColor: baseThemeVariables.border2,
+      itemBorderColor: baseThemeVariables.border2,
+      itemEmphasisBorderColor: baseThemeVariables.primary,
+      shadowLineDarkBg: baseThemeVariables.border3,
+      shadowLineShadow: baseThemeVariables.border3,
+      gradFrom: baseThemeVariables.bg,
+      gradTo: baseThemeVariables.bg2,
+    },
+
+    electricity: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: baseThemeVariables.fgText,
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+
+      axisLineColor: baseThemeVariables.border3,
+      xAxisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.border2,
+      lineStyle: 'dotted',
+      lineWidth: '6',
+      lineGradFrom: baseThemeVariables.success,
+      lineGradTo: baseThemeVariables.warning,
+      lineShadow: baseThemeVariables.bg4,
+
+      areaGradFrom: baseThemeVariables.bg2,
+      areaGradTo: baseThemeVariables.bg3,
+      shadowLineDarkBg: baseThemeVariables.bg3,
+    },
+
+    bubbleMap: {
+      titleColor: baseThemeVariables.fgText,
+      areaColor: baseThemeVariables.bg4,
+      areaHoverColor: baseThemeVariables.fgHighlight,
+      areaBorderColor: baseThemeVariables.border5,
+    },
+
+    profitBarAnimationEchart: {
+      textColor: baseThemeVariables.fgText,
+
+      firstAnimationBarColor: baseThemeVariables.primary,
+      secondAnimationBarColor: baseThemeVariables.success,
+
+      splitLineStyleOpacity: '1',
+      splitLineStyleWidth: '1',
+      splitLineStyleColor: baseThemeVariables.border2,
+
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '16',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+    },
+
+    trafficBarEchart: {
+      gradientFrom: baseThemeVariables.warningLight,
+      gradientTo: baseThemeVariables.warning,
+      shadow: baseThemeVariables.warningLight,
+      shadowBlur: '5',
+
+      axisTextColor: baseThemeVariables.fgText,
+      axisFontSize: '12',
+
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+    },
+
+    countryOrders: {
+      countryBorderColor: baseThemeVariables.border4,
+      countryFillColor: baseThemeVariables.bg3,
+      countryBorderWidth: '1',
+      hoveredCountryBorderColor: baseThemeVariables.primary,
+      hoveredCountryFillColor: baseThemeVariables.primaryLight,
+      hoveredCountryBorderWidth: '1',
+
+      chartAxisLineColor: baseThemeVariables.border4,
+      chartAxisTextColor: baseThemeVariables.fg,
+      chartAxisFontSize: '16',
+      chartGradientTo: baseThemeVariables.primary,
+      chartGradientFrom: baseThemeVariables.primaryLight,
+      chartAxisSplitLine: baseThemeVariables.separator,
+      chartShadowLineColor: baseThemeVariables.primaryLight,
+
+      chartLineBottomShadowColor: baseThemeVariables.primary,
+
+      chartInnerLineColor: baseThemeVariables.bg2,
+    },
+
+    echarts: {
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.fgText,
+      splitLineColor: baseThemeVariables.separator,
+      itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
+      tooltipBackgroundColor: baseThemeVariables.primary,
+      areaOpacity: '1',
+    },
+
+    chartjs: {
+      axisLineColor: baseThemeVariables.separator,
+      textColor: baseThemeVariables.fgText,
+    },
+
+    orders: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '20',
+
+      axisLineColor: baseThemeVariables.border4,
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'solid',
+      lineWidth: '4',
+
+      // first line
+      firstAreaGradFrom: baseThemeVariables.bg2,
+      firstAreaGradTo: baseThemeVariables.bg2,
+      firstShadowLineDarkBg: baseThemeVariables.bg2,
+
+      // second line
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
+
+      secondAreaGradFrom: 'rgba(161, 110, 255, 0.8)',
+      secondAreaGradTo: 'rgba(161, 110, 255, 0.5)',
+      secondShadowLineDarkBg: baseThemeVariables.primary,
+
+      // third line
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,
+
+      thirdAreaGradFrom: 'rgba(0, 214, 143, 0.7)',
+      thirdAreaGradTo: 'rgba(0, 214, 143, 0.4)',
+      thirdShadowLineDarkBg: baseThemeVariables.success,
+    },
+
+    profit: {
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.border4,
+      splitLineColor: baseThemeVariables.separator,
+      areaOpacity: '1',
+
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+
+      // first bar
+      firstLineGradFrom: baseThemeVariables.bg2,
+      firstLineGradTo: baseThemeVariables.bg2,
+      firstLineShadow: 'rgba(0, 0, 0, 0)',
+
+      // second bar
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
+      secondLineShadow: 'rgba(0, 0, 0, 0)',
+
+      // third bar
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,
+      thirdLineShadow: 'rgba(0, 0, 0, 0)',
+    },
+
+    orderProfitLegend: {
+      firstItem: baseThemeVariables.success,
+      secondItem: baseThemeVariables.primary,
+      thirdItem: baseThemeVariables.bg2,
+    },
+
+    visitors: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipLineWidth: '1',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '20',
+
+      axisLineColor: baseThemeVariables.border4,
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'dotted',
+      lineWidth: '6',
+      lineGradFrom: '#ffffff',
+      lineGradTo: '#ffffff',
+      lineShadow: 'rgba(0, 0, 0, 0)',
+
+      areaGradFrom: baseThemeVariables.primary,
+      areaGradTo: baseThemeVariables.primaryLight,
+
+      innerLineStyle: 'solid',
+      innerLineWidth: '1',
+
+      innerAreaGradFrom: baseThemeVariables.success,
+      innerAreaGradTo: baseThemeVariables.success,
+    },
+
+    visitorsLegend: {
+      firstIcon: baseThemeVariables.success,
+      secondIcon: baseThemeVariables.primary,
+    },
+
+    visitorsPie: {
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.successLight,
+      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
+      firstPieRadius: ['70%', '90%'],
+
+      secondPieGradientLeft: baseThemeVariables.warning,
+      secondPieGradientRight: baseThemeVariables.warningLight,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
+      secondPieRadius: ['60%', '95%'],
+      shadowOffsetX: '0',
+      shadowOffsetY: '3',
+    },
+
+    visitorsPieLegend: {
+      firstSection: baseThemeVariables.warning,
+      secondSection: baseThemeVariables.success,
+    },
+
+    earningPie: {
+      radius: ['65%', '100%'],
+      center: ['50%', '50%'],
+
+      fontSize: '22',
+
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
+      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
+
+      secondPieGradientLeft: baseThemeVariables.primary,
+      secondPieGradientRight: baseThemeVariables.primary,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
+
+      thirdPieGradientLeft: baseThemeVariables.warning,
+      thirdPieGradientRight: baseThemeVariables.warning,
+      thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
+    },
+
+    earningLine: {
+      gradFrom: baseThemeVariables.primary,
+      gradTo: baseThemeVariables.primary,
+
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '16',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+    },
+  },
+} as NbJSThemeOptions;

src/app/@theme/styles/theme.dark.ts

@@ -0,0 +1,314 @@
+import { NbJSThemeOptions, DARK_THEME as baseTheme } from '@nebular/theme';
+
+const baseThemeVariables = baseTheme.variables;
+
+export const DARK_THEME = {
+  name: 'dark',
+  base: 'dark',
+  variables: {
+    temperature: {
+      arcFill: [
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+      ],
+      arcEmpty: baseThemeVariables.bg2,
+      thumbBg: baseThemeVariables.bg2,
+      thumbBorder: baseThemeVariables.primary,
+    },
+
+    solar: {
+      gradientLeft: baseThemeVariables.primary,
+      gradientRight: baseThemeVariables.primary,
+      shadowColor: 'rgba(0, 0, 0, 0)',
+      secondSeriesFill: baseThemeVariables.bg2,
+      radius: ['80%', '90%'],
+    },
+
+    traffic: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      lineBg: baseThemeVariables.border4,
+      lineShadowBlur: '1',
+      itemColor: baseThemeVariables.border4,
+      itemBorderColor: baseThemeVariables.border4,
+      itemEmphasisBorderColor: baseThemeVariables.primary,
+      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+      shadowLineShadow: 'rgba(0, 0, 0, 0)',
+      gradFrom: baseThemeVariables.bg2,
+      gradTo: baseThemeVariables.bg2,
+    },
+
+    electricity: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: baseThemeVariables.fgText,
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+
+      axisLineColor: baseThemeVariables.border3,
+      xAxisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'solid',
+      lineWidth: '4',
+      lineGradFrom: baseThemeVariables.primary,
+      lineGradTo: baseThemeVariables.primary,
+      lineShadow: 'rgba(0, 0, 0, 0)',
+
+      areaGradFrom: baseThemeVariables.bg2,
+      areaGradTo: baseThemeVariables.bg2,
+      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+    },
+
+    bubbleMap: {
+      titleColor: baseThemeVariables.fgText,
+      areaColor: baseThemeVariables.bg4,
+      areaHoverColor: baseThemeVariables.fgHighlight,
+      areaBorderColor: baseThemeVariables.border5,
+    },
+
+    profitBarAnimationEchart: {
+      textColor: baseThemeVariables.fgText,
+
+      firstAnimationBarColor: baseThemeVariables.primary,
+      secondAnimationBarColor: baseThemeVariables.success,
+
+      splitLineStyleOpacity: '1',
+      splitLineStyleWidth: '1',
+      splitLineStyleColor: baseThemeVariables.separator,
+
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '16',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+    },
+
+    trafficBarEchart: {
+      gradientFrom: baseThemeVariables.warningLight,
+      gradientTo: baseThemeVariables.warning,
+      shadow: baseThemeVariables.warningLight,
+      shadowBlur: '0',
+
+      axisTextColor: baseThemeVariables.fgText,
+      axisFontSize: '12',
+
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+    },
+
+    countryOrders: {
+      countryBorderColor: baseThemeVariables.border4,
+      countryFillColor: baseThemeVariables.bg3,
+      countryBorderWidth: '1',
+      hoveredCountryBorderColor: baseThemeVariables.primary,
+      hoveredCountryFillColor: baseThemeVariables.primaryLight,
+      hoveredCountryBorderWidth: '1',
+
+      chartAxisLineColor: baseThemeVariables.border4,
+      chartAxisTextColor: baseThemeVariables.fg,
+      chartAxisFontSize: '16',
+      chartGradientTo: baseThemeVariables.primary,
+      chartGradientFrom: baseThemeVariables.primaryLight,
+      chartAxisSplitLine: baseThemeVariables.separator,
+      chartShadowLineColor: baseThemeVariables.primaryLight,
+
+      chartLineBottomShadowColor: baseThemeVariables.primary,
+
+      chartInnerLineColor: baseThemeVariables.bg2,
+    },
+
+    echarts: {
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.fgText,
+      splitLineColor: baseThemeVariables.separator,
+      itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
+      tooltipBackgroundColor: baseThemeVariables.primary,
+      areaOpacity: '0.7',
+    },
+
+    chartjs: {
+      axisLineColor: baseThemeVariables.separator,
+      textColor: baseThemeVariables.fgText,
+    },
+
+    orders: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '20',
+
+      axisLineColor: baseThemeVariables.border4,
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'solid',
+      lineWidth: '4',
+
+      // first line
+      firstAreaGradFrom: baseThemeVariables.bg3,
+      firstAreaGradTo: baseThemeVariables.bg3,
+      firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+
+      // second line
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
+
+      secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)',
+      secondAreaGradTo: 'rgba(51, 102, 255, 0)',
+      secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+
+      // third line
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,
+
+      thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
+      thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
+      thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+    },
+
+    profit: {
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.border4,
+      splitLineColor: baseThemeVariables.separator,
+      areaOpacity: '1',
+
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+
+      // first bar
+      firstLineGradFrom: baseThemeVariables.bg3,
+      firstLineGradTo: baseThemeVariables.bg3,
+      firstLineShadow: 'rgba(0, 0, 0, 0)',
+
+      // second bar
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
+      secondLineShadow: 'rgba(0, 0, 0, 0)',
+
+      // third bar
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,
+      thirdLineShadow: 'rgba(0, 0, 0, 0)',
+    },
+
+    orderProfitLegend: {
+      firstItem: baseThemeVariables.success,
+      secondItem: baseThemeVariables.primary,
+      thirdItem: baseThemeVariables.bg3,
+    },
+
+    visitors: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '20',
+
+      axisLineColor: baseThemeVariables.border4,
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'dotted',
+      lineWidth: '6',
+      lineGradFrom: '#ffffff',
+      lineGradTo: '#ffffff',
+      lineShadow: 'rgba(0, 0, 0, 0)',
+
+      areaGradFrom: baseThemeVariables.primary,
+      areaGradTo: baseThemeVariables.primaryLight,
+
+      innerLineStyle: 'solid',
+      innerLineWidth: '1',
+
+      innerAreaGradFrom: baseThemeVariables.success,
+      innerAreaGradTo: baseThemeVariables.success,
+    },
+
+    visitorsLegend: {
+      firstIcon: baseThemeVariables.success,
+      secondIcon: baseThemeVariables.primary,
+    },
+
+    visitorsPie: {
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
+      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
+      firstPieRadius: ['70%', '90%'],
+
+      secondPieGradientLeft: baseThemeVariables.warning,
+      secondPieGradientRight: baseThemeVariables.warningLight,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
+      secondPieRadius: ['60%', '97%'],
+      shadowOffsetX: '0',
+      shadowOffsetY: '0',
+    },
+
+    visitorsPieLegend: {
+      firstSection: baseThemeVariables.warning,
+      secondSection: baseThemeVariables.success,
+    },
+
+    earningPie: {
+      radius: ['65%', '100%'],
+      center: ['50%', '50%'],
+
+      fontSize: '22',
+
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
+      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
+
+      secondPieGradientLeft: baseThemeVariables.primary,
+      secondPieGradientRight: baseThemeVariables.primary,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
+
+      thirdPieGradientLeft: baseThemeVariables.warning,
+      thirdPieGradientRight: baseThemeVariables.warning,
+      thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
+    },
+
+    earningLine: {
+      gradFrom: baseThemeVariables.primary,
+      gradTo: baseThemeVariables.primary,
+
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '16',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+    },
+  },
+} as NbJSThemeOptions;

src/app/@theme/styles/theme.default.ts

@@ -0,0 +1,314 @@
+import { NbJSThemeOptions, DEFAULT_THEME as baseTheme } from '@nebular/theme';
+
+const baseThemeVariables = baseTheme.variables;
+
+export const DEFAULT_THEME = {
+  name: 'default',
+  base: 'default',
+  variables: {
+    temperature: {
+      arcFill: [
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+      ],
+      arcEmpty: baseThemeVariables.bg2,
+      thumbBg: baseThemeVariables.bg2,
+      thumbBorder: baseThemeVariables.primary,
+    },
+
+    solar: {
+      gradientLeft: baseThemeVariables.primary,
+      gradientRight: baseThemeVariables.primary,
+      shadowColor: 'rgba(0, 0, 0, 0)',
+      secondSeriesFill: baseThemeVariables.bg2,
+      radius: ['80%', '90%'],
+    },
+
+    traffic: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      lineBg: baseThemeVariables.border4,
+      lineShadowBlur: '1',
+      itemColor: baseThemeVariables.border4,
+      itemBorderColor: baseThemeVariables.border4,
+      itemEmphasisBorderColor: baseThemeVariables.primary,
+      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+      shadowLineShadow: 'rgba(0, 0, 0, 0)',
+      gradFrom: baseThemeVariables.bg2,
+      gradTo: baseThemeVariables.bg2,
+    },
+
+    electricity: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: baseThemeVariables.fgText,
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+
+      axisLineColor: baseThemeVariables.border3,
+      xAxisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'solid',
+      lineWidth: '4',
+      lineGradFrom: baseThemeVariables.primary,
+      lineGradTo: baseThemeVariables.primary,
+      lineShadow: 'rgba(0, 0, 0, 0)',
+
+      areaGradFrom: baseThemeVariables.bg2,
+      areaGradTo: baseThemeVariables.bg2,
+      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+    },
+
+    bubbleMap: {
+      titleColor: baseThemeVariables.fgText,
+      areaColor: baseThemeVariables.bg4,
+      areaHoverColor: baseThemeVariables.fgHighlight,
+      areaBorderColor: baseThemeVariables.border5,
+    },
+
+    profitBarAnimationEchart: {
+      textColor: baseThemeVariables.fgText,
+
+      firstAnimationBarColor: baseThemeVariables.primary,
+      secondAnimationBarColor: baseThemeVariables.success,
+
+      splitLineStyleOpacity: '1',
+      splitLineStyleWidth: '1',
+      splitLineStyleColor: baseThemeVariables.separator,
+
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '16',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+    },
+
+    trafficBarEchart: {
+      gradientFrom: baseThemeVariables.warningLight,
+      gradientTo: baseThemeVariables.warning,
+      shadow: baseThemeVariables.warningLight,
+      shadowBlur: '0',
+
+      axisTextColor: baseThemeVariables.fgText,
+      axisFontSize: '12',
+
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+    },
+
+    countryOrders: {
+      countryBorderColor: baseThemeVariables.border4,
+      countryFillColor: baseThemeVariables.bg3,
+      countryBorderWidth: '1',
+      hoveredCountryBorderColor: baseThemeVariables.primary,
+      hoveredCountryFillColor: baseThemeVariables.primaryLight,
+      hoveredCountryBorderWidth: '1',
+
+      chartAxisLineColor: baseThemeVariables.border4,
+      chartAxisTextColor: baseThemeVariables.fg,
+      chartAxisFontSize: '16',
+      chartGradientTo: baseThemeVariables.primary,
+      chartGradientFrom: baseThemeVariables.primaryLight,
+      chartAxisSplitLine: baseThemeVariables.separator,
+      chartShadowLineColor: baseThemeVariables.primaryLight,
+
+      chartLineBottomShadowColor: baseThemeVariables.primary,
+
+      chartInnerLineColor: baseThemeVariables.bg2,
+    },
+
+    echarts: {
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.fgText,
+      splitLineColor: baseThemeVariables.separator,
+      itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
+      tooltipBackgroundColor: baseThemeVariables.primary,
+      areaOpacity: '0.7',
+    },
+
+    chartjs: {
+      axisLineColor: baseThemeVariables.separator,
+      textColor: baseThemeVariables.fgText,
+    },
+
+    orders: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '20',
+
+      axisLineColor: baseThemeVariables.border4,
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'solid',
+      lineWidth: '4',
+
+      // first line
+      firstAreaGradFrom: baseThemeVariables.bg3,
+      firstAreaGradTo: baseThemeVariables.bg3,
+      firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+
+      // second line
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
+
+      secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)',
+      secondAreaGradTo: 'rgba(51, 102, 255, 0)',
+      secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+
+      // third line
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,
+
+      thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
+      thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
+      thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+    },
+
+    profit: {
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.border4,
+      splitLineColor: baseThemeVariables.separator,
+      areaOpacity: '1',
+
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+
+      // first bar
+      firstLineGradFrom: baseThemeVariables.bg3,
+      firstLineGradTo: baseThemeVariables.bg3,
+      firstLineShadow: 'rgba(0, 0, 0, 0)',
+
+      // second bar
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
+      secondLineShadow: 'rgba(0, 0, 0, 0)',
+
+      // third bar
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,
+      thirdLineShadow: 'rgba(0, 0, 0, 0)',
+    },
+
+    orderProfitLegend: {
+      firstItem: baseThemeVariables.success,
+      secondItem: baseThemeVariables.primary,
+      thirdItem: baseThemeVariables.bg3,
+    },
+
+    visitors: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipLineWidth: '1',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '20',
+
+      axisLineColor: baseThemeVariables.border4,
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'dotted',
+      lineWidth: '6',
+      lineGradFrom: '#ffffff',
+      lineGradTo: '#ffffff',
+      lineShadow: 'rgba(0, 0, 0, 0)',
+
+      areaGradFrom: baseThemeVariables.primary,
+      areaGradTo: baseThemeVariables.primaryLight,
+
+      innerLineStyle: 'solid',
+      innerLineWidth: '1',
+
+      innerAreaGradFrom: baseThemeVariables.success,
+      innerAreaGradTo: baseThemeVariables.success,
+    },
+
+    visitorsLegend: {
+      firstIcon: baseThemeVariables.success,
+      secondIcon: baseThemeVariables.primary,
+    },
+
+    visitorsPie: {
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
+      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
+      firstPieRadius: ['70%', '90%'],
+
+      secondPieGradientLeft: baseThemeVariables.warning,
+      secondPieGradientRight: baseThemeVariables.warningLight,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
+      secondPieRadius: ['60%', '97%'],
+      shadowOffsetX: '0',
+      shadowOffsetY: '0',
+    },
+
+    visitorsPieLegend: {
+      firstSection: baseThemeVariables.warning,
+      secondSection: baseThemeVariables.success,
+    },
+
+    earningPie: {
+      radius: ['65%', '100%'],
+      center: ['50%', '50%'],
+
+      fontSize: '22',
+
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
+      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
+
+      secondPieGradientLeft: baseThemeVariables.primary,
+      secondPieGradientRight: baseThemeVariables.primary,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
+
+      thirdPieGradientLeft: baseThemeVariables.warning,
+      thirdPieGradientRight: baseThemeVariables.warning,
+      thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
+    },
+
+    earningLine: {
+      gradFrom: baseThemeVariables.primary,
+      gradTo: baseThemeVariables.primary,
+
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '16',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+    },
+  },
+} as NbJSThemeOptions;

src/app/@theme/styles/themes.scss

@@ -0,0 +1,88 @@
+// @nebular theming framework
+@import '~@nebular/theme/styles/theming';
+// @nebular out of the box themes
+@import '~@nebular/theme/styles/themes';
+
+$nb-themes: nb-register-theme((
+  layout-padding-top: 2.25rem,
+
+  menu-item-icon-margin: 0 0.5rem 0 0,
+
+  card-height-tiny: 13.5rem,
+  card-height-small: 21.1875rem,
+  card-height-medium: 28.875rem,
+  card-height-large: 36.5625rem,
+  card-height-giant: 44.25rem,
+  card-margin-bottom: 1.875rem,
+  card-header-with-select-padding-top: 0.5rem,
+  card-header-with-select-padding-bottom: 0.5rem,
+
+  select-min-width: 6rem,
+
+  slide-out-background: #f7f9fc,
+  slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
+  slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
+), default, default);
+
+$nb-themes: nb-register-theme((
+  layout-padding-top: 2.25rem,
+
+  menu-item-icon-margin: 0 0.5rem 0 0,
+
+  card-height-tiny: 13.5rem,
+  card-height-small: 21.1875rem,
+  card-height-medium: 28.875rem,
+  card-height-large: 36.5625rem,
+  card-height-giant: 44.25rem,
+  card-margin-bottom: 1.875rem,
+  card-header-with-select-padding-top: 0.5rem,
+  card-header-with-select-padding-bottom: 0.5rem,
+
+  select-min-width: 6rem,
+
+  slide-out-background: #252547,
+  slide-out-shadow-color: 2px 0 3px #29157a,
+  slide-out-shadow-color-rtl: -2px 0 3px #29157a,
+), cosmic, cosmic);
+
+$nb-themes: nb-register-theme((
+  layout-padding-top: 2.25rem,
+
+  menu-item-icon-margin: 0 0.5rem 0 0,
+
+  card-height-tiny: 13.5rem,
+  card-height-small: 21.1875rem,
+  card-height-medium: 28.875rem,
+  card-height-large: 36.5625rem,
+  card-height-giant: 44.25rem,
+  card-margin-bottom: 1.875rem,
+  card-header-with-select-padding-top: 0.5rem,
+  card-header-with-select-padding-bottom: 0.5rem,
+
+  select-min-width: 6rem,
+
+  slide-out-background: linear-gradient(270deg, #edf1f7 0%, #e4e9f2 100%),
+  slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
+  slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
+), corporate, corporate);
+
+$nb-themes: nb-register-theme((
+  layout-padding-top: 2.25rem,
+
+  menu-item-icon-margin: 0 0.5rem 0 0,
+
+  card-height-tiny: 13.5rem,
+  card-height-small: 21.1875rem,
+  card-height-medium: 28.875rem,
+  card-height-large: 36.5625rem,
+  card-height-giant: 44.25rem,
+  card-margin-bottom: 1.875rem,
+  card-header-with-select-padding-top: 0.5rem,
+  card-header-with-select-padding-bottom: 0.5rem,
+
+  select-min-width: 6rem,
+
+  slide-out-background: linear-gradient(270deg, #222b45 0%, #151a30 100%),
+  slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
+  slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
+), dark, dark);

src/app/@theme/theme.module.ts

@@ -0,0 +1,94 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  NbActionsModule,
+  NbLayoutModule,
+  NbMenuModule,
+  NbSearchModule,
+  NbSidebarModule,
+  NbUserModule,
+  NbContextMenuModule,
+  NbButtonModule,
+  NbSelectModule,
+  NbIconModule,
+  NbThemeModule,
+} from '@nebular/theme';
+import { NbEvaIconsModule } from '@nebular/eva-icons';
+import { NbSecurityModule } from '@nebular/security';
+
+import {
+  FooterComponent,
+  HeaderComponent,
+  SearchInputComponent,
+  TinyMCEComponent,
+} from './components';
+import {
+  CapitalizePipe,
+  PluralPipe,
+  RoundPipe,
+  TimingPipe,
+  NumberWithCommasPipe,
+} from './pipes';
+import {
+  OneColumnLayoutComponent,
+  ThreeColumnsLayoutComponent,
+  TwoColumnsLayoutComponent,
+  PlainLayoutComponent
+} from './layouts';
+import { DEFAULT_THEME } from './styles/theme.default';
+import { COSMIC_THEME } from './styles/theme.cosmic';
+import { CORPORATE_THEME } from './styles/theme.corporate';
+import { DARK_THEME } from './styles/theme.dark';
+
+const NB_MODULES = [
+  NbLayoutModule,
+  NbMenuModule,
+  NbUserModule,
+  NbActionsModule,
+  NbSearchModule,
+  NbSidebarModule,
+  NbContextMenuModule,
+  NbSecurityModule,
+  NbButtonModule,
+  NbSelectModule,
+  NbIconModule,
+  NbEvaIconsModule,
+];
+const COMPONENTS = [
+  HeaderComponent,
+  FooterComponent,
+  SearchInputComponent,
+  TinyMCEComponent,
+  OneColumnLayoutComponent,
+  ThreeColumnsLayoutComponent,
+  TwoColumnsLayoutComponent,
+  PlainLayoutComponent
+];
+const PIPES = [
+  CapitalizePipe,
+  PluralPipe,
+  RoundPipe,
+  TimingPipe,
+  NumberWithCommasPipe,
+];
+
+@NgModule({
+  imports: [CommonModule, ...NB_MODULES],
+  exports: [CommonModule, ...PIPES, ...COMPONENTS],
+  declarations: [...COMPONENTS, ...PIPES],
+})
+export class ThemeModule {
+  static forRoot(): ModuleWithProviders<ThemeModule> {
+    return {
+      ngModule: ThemeModule,
+      providers: [
+        ...NbThemeModule.forRoot(
+          {
+            name: 'default',
+          },
+          [DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME],
+        ).providers,
+      ],
+    };
+  }
+}

src/app/ScreenBase.ts

@@ -0,0 +1,193 @@
+import { Component, EventEmitter, HostListener, Injectable, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Observable, Subject } from 'rxjs';
+import { Subscription } from 'rxjs';
+import { first, map, take } from 'rxjs/operators';
+import { ICrudService } from './services/crudServices/crud.service';
+import { StateService } from './services/state.service';
+@Injectable()
+// @Component({
+//     template: ''
+// })
+export abstract class ScreenBase<T> implements OnInit, OnDestroy {
+    private _screenSaveDoneSubscription: Subscription;
+    protected wasWaitingForDependency: boolean = false;
+    protected refndx: string;
+    protected linkPath: string;
+    protected screenUpdateWaitList: string[] = undefined;
+    /**
+     * Current screen, will set to state service after `screenOnInit()`
+     */
+    protected screen: string;
+
+    /**
+     * Current screen with shared screen lock id like: A71S and A71SC
+     */
+    protected sharedScreenId: string = null;
+    protected subscriptions: Subscription[] = [];
+    protected lockScreen: boolean = true;
+    protected allData: T[] = [];;
+    //constants = Constants;
+    //screenInfo: NavigatorItem;
+    @Input() isSnapshotView: boolean = false;
+
+    @Input() isLoading: boolean = true;
+    @Input() isScreen: boolean = true;
+
+    @Input() readonly: boolean = false;
+    @Input() isProcessing: boolean = false;
+    @Output() screenSaveDone = new EventEmitter<any>();
+    constructor(
+        protected crudService: ICrudService<T>,
+        protected stateService: StateService,
+        protected route: ActivatedRoute,
+    ) { }
+
+    ngOnInit(): void {
+        if (false == this.isSnapshotView) {
+            //   this.subscriptions.push(this.stateService.saveSubject.subscribe({ next: () => this.save() }));
+            //   this.subscriptions.push(this.stateService.cancelSubject.subscribe({ next: () => this.cancel() }));
+
+            this.route.url
+                .pipe(take(1))
+                .subscribe(url => {
+                    this.linkPath = url[0].path.toLowerCase();
+
+                    this.screenOnInit();
+
+
+                    //this.screenInfo = this.stateService.treeListService.screenSEQ.find(n => n.screen == this.screen);
+                    //Doing Security at here
+
+                    if (false == this.isSnapshotView) {
+
+                        this.runGetAllData();
+
+                    }
+                });
+        }
+        else {
+            this.initializeForSnapshot();
+        }
+    }
+
+
+    ngOnDestroy(): void {
+        this.subscriptions.forEach(subscription => { if (subscription) subscription.unsubscribe(); });
+    }
+    protected runGetAllData() {
+
+        this.isLoading = true;
+        this.getAllData().pipe(first()).subscribe(result => {
+            this.isLoading = false;
+            this.allData = result;
+            this.allDataLoaded();
+        });
+    }
+    /**
+     * after get refndx from state service, and will be called when refndx changed.
+     */
+    abstract screenOnInit(): void;
+
+
+    /**
+     * will be called when saving triggered by user or system.
+     */
+    save(): ScreenSavingRef {
+        let saveRef = new ScreenSavingRef();
+        if (this.saveMethod != null) {
+            this.beforeSave().pipe(first()).subscribe(result => {
+                if (result) {
+
+                    this.saveMethod.pipe(first()).subscribe(result => {
+                        saveRef.saveDone(result);
+                        this.saveDone();
+                        this.screenSaveDone.next(result);
+                    });
+                }
+            });
+        } else {
+            saveRef.onSaveDone = Observable.of(false);
+        }
+        return saveRef;
+
+    };
+
+    /**
+     * save method for send saving request to api
+     */
+    abstract get saveMethod(): Observable<any>;
+
+    /**
+     * will be called when screen id and refndx initialized or user click cancel button.     */
+
+
+    protected getAllData() {
+        this.isLoading = true;
+        return this.crudService.getAll();
+    }
+    /**
+     * will be called when canceling triggered by user or system.
+     */
+    cancel(): void {
+        this.runGetAllData();
+    };
+
+    saveDone(): void {
+        //do something after saving
+        //update screen history
+
+        //alert(`Save Done: do something after ${this.screen} saving`);
+    }
+
+
+    /**
+     * will be called on `ngOnInit` if `isSnapshotView==true`
+     *    */
+    protected initializeForSnapshot(): void {
+
+    }
+
+    /**
+     * will be called after `runGetAllData`
+     *    */
+    protected allDataLoaded(): void {
+
+    }
+
+    /**
+     * will be called when deactivated, Default as `Observable.of(true)`
+     *    */
+    protected beforeLeaveScreen(): Observable<boolean> {
+        return Observable.of(true);
+    }
+
+    /**
+     * will be called before saving, Default as `Observable.of(true)`
+     *    */
+    protected beforeSave(): Observable<boolean> {
+        return Observable.of(true);
+    }
+
+
+    canDeactivate(): Observable<boolean> | boolean {
+        return this.beforeLeaveScreen().pipe(map(response => {
+            if (response) {
+                return true;
+            }
+            return false;
+        }));
+    }
+
+
+}
+
+export class ScreenSavingRef {
+    protected onSaveDone$: Subject<any> = new Subject();
+    onSaveDone: Observable<any> = this.onSaveDone$.asObservable();
+
+    saveDone(res?: any) {
+        this.onSaveDone$.next(res);
+        this.onSaveDone$.complete();
+    }
+}

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

@@ -0,0 +1,69 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { NbMenuItem } from '@nebular/theme';
+
+import { AdminComponent } from './admin.component';
+import { FamilyMembersComponent } from './family-members/family-members.component';
+import { HappinessGroupsComponent } from './happiness-groups/happiness-groups.component';
+import { LineMessagingAccountComponent } from './lines/line-messaging-account/line-messaging-account.component';
+import { LogsComponent } from './logs/logs.component';
+import { PastoralDomainsComponent } from './pastoral-domains/pastoral-domains.component';
+export class AdminRoutingConfig {
+
+  public static ADMIN_MENU_ITEMS: NbMenuItem[] = [
+    {
+      title: 'Family Members',
+      icon: 'person-outline',
+      link: '/Admin/members',
+    },
+    {
+      title: 'Cell Groups',
+      icon: 'people-outline',
+      link: '/Admin/pastoralDomains',
+    },
+    {
+      title: 'Happiness Group',
+      icon: 'smiling-face-outline',
+      link: '/Admin/happinessGroup',
+    },
+    {
+      title: 'Logs',
+      icon: 'file-text-outline',
+      link: '/Admin/logs',
+      home: true,
+    },
+    {
+      title: 'Line Messenger',
+      icon: 'smiling-face-outline',
+      children: [
+        {
+          title: 'Line Accounts',
+          icon: 'smiling-face-outline',
+          link: '/Admin/lineAccount',
+        },
+
+      ]
+    },
+
+  ];
+}
+const routes: Routes = [
+  {
+    path: '', component: AdminComponent,
+
+    children:
+      [
+        { path: 'members', component: FamilyMembersComponent },
+        { path: 'pastoralDomains', component: PastoralDomainsComponent },
+        { path: 'happinessGroup', component: HappinessGroupsComponent },
+        { path: 'logs', component: LogsComponent },
+        { path: 'lineAccount', component: LineMessagingAccountComponent },
+      ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AdminRoutingModule { }

src/app/admin/admin.component.html

@@ -0,0 +1,4 @@
+<ngx-one-column-layout>
+    <nb-menu [items]="MENU_ITEMS"></nb-menu>
+    <router-outlet></router-outlet>
+</ngx-one-column-layout>

src/app/admin/admin.component.spec.ts

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

src/app/admin/admin.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { NbMenuItem } from '@nebular/theme';
+import { AdminRoutingConfig } from './admin-routing.module';
+
+@Component({
+  selector: 'ngx-admin',
+  templateUrl: './admin.component.html',
+  styleUrls: ['./admin.component.scss']
+})
+export class AdminComponent implements OnInit {
+
+  constructor() { }
+
+  MENU_ITEMS = AdminRoutingConfig.ADMIN_MENU_ITEMS;
+
+  ngOnInit(): void {
+  }
+
+}

src/app/admin/admin.module.ts

@@ -0,0 +1,80 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AdminRoutingModule } from './admin-routing.module';
+import { AdminComponent } from './admin.component';
+import { HappinessGroupsComponent } from './happiness-groups/happiness-groups.component';
+import { NbMenuModule, NbInputModule, NbCardModule, NbButtonModule, NbActionsModule, NbCheckboxModule, NbRadioModule, NbDatepickerModule, NbSelectModule, NbIconModule, NbTagModule, NbStepperModule, NbListModule, NbSpinnerModule, NbDialogModule, NbUserModule } from '@nebular/theme';
+import { ThemeModule } from '../@theme/theme.module';
+import { HappinessGroupAddingDlgComponent } from './happiness-groups/happiness-group-adding-dlg/happiness-group-adding-dlg.component';
+import { FormsModule } from '@angular/forms';
+import { BestListDlgComponent } from './happiness-groups/best-list-dlg/best-list-dlg.component';
+import { AlertDlgModule } from '../ui/alert-dlg/alert-dlg.module';
+import { HappinessWeekEditorComponent } from './happiness-groups/happiness-week-editor/happiness-week-editor.component';
+import { HappinessWeekListDlgComponent } from './happiness-groups/happiness-week-list-dlg/happiness-week-list-dlg.component';
+import { CellGroupRoutineEventsComponent } from './cell-group-routine-events/cell-group-routine-events.component';
+import { FancyTableModule } from '../ui/fancy-table/fancy-table.module';
+import { FamilyMembersComponent } from './family-members/family-members.component';
+import { FamilyMemberEditorComponent } from './family-members/family-member-editor/family-member-editor.component';
+import { DropDownListModule } from '../ui/drop-down-list/drop-down-list.module';
+import { NgxMaskModule } from 'ngx-mask';
+import { PastoralDomainsComponent } from './pastoral-domains/pastoral-domains.component';
+import { PastoralDomainEditorComponent } from './pastoral-domains/pastoral-domain-editor/pastoral-domain-editor.component';
+import { AssignMemberCellGroupComponent } from './family-members/assign-member-cell-group/assign-member-cell-group.component';
+import { LogsComponent } from './logs/logs.component';
+import { LogDetailComponent } from './logs/log-detail/log-detail.component'
+import { CurrencyInputModule } from '../ui/currency-input/currency-input.module';
+import { MaskDirectiveModule } from '../directives/mask-directive/mask-directive.module';
+import { DateInputModule } from '../ui/date-input/date-input.module';
+import { LineMessagingAccountComponent } from './lines/line-messaging-account/line-messaging-account.component';
+import { LineMessagingAccountEditorComponent } from './lines/line-messaging-account-editor/line-messaging-account-editor.component';
+
+@NgModule({
+  declarations: [
+    AdminComponent,
+    HappinessGroupsComponent,
+    HappinessGroupAddingDlgComponent,
+    BestListDlgComponent,
+    HappinessWeekEditorComponent,
+    HappinessWeekListDlgComponent,
+    CellGroupRoutineEventsComponent,
+    FamilyMembersComponent,
+    FamilyMemberEditorComponent,
+    PastoralDomainsComponent,
+    PastoralDomainEditorComponent,
+    AssignMemberCellGroupComponent,
+    LogsComponent,
+    LogDetailComponent,
+    LineMessagingAccountComponent,
+    LineMessagingAccountEditorComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    AdminRoutingModule,
+    ThemeModule,
+    NbMenuModule,
+    NbInputModule,
+    NbCardModule,
+    NbButtonModule,
+    NbActionsModule,
+    NbCheckboxModule,
+    NbRadioModule,
+    NbDatepickerModule,
+    NbSelectModule,
+    NbIconModule,
+    NbTagModule,
+    NbStepperModule,
+    NbListModule,
+    NbUserModule,
+    NbSpinnerModule,
+    NbDialogModule,
+    AlertDlgModule,
+    FancyTableModule,
+    DropDownListModule,
+    NgxMaskModule,
+    CurrencyInputModule,
+    MaskDirectiveModule,
+    DateInputModule
+  ]
+})
+export class AdminModule { }

src/app/admin/cell-group-routine-events/cell-group-routine-events.component.html

@@ -0,0 +1,15 @@
+<nb-card>
+    <nb-card-header>
+        CellGroupRoutineEventss
+        <nb-actions size="small" fullWidth class="float-right">
+            <nb-action icon="plus-outline" title="Add New" (click)="openEditingDialog(true)"></nb-action>
+        </nb-actions>
+    </nb-card-header>
+    <nb-card-body>
+        <!-- <loading-spinner [isLoading]="isLoading"></loading-spinner> -->
+        <ng-container *ngIf="data">
+            <fancy-table [data]="allData" [settings]="settings" (rowSelected)="selectedIndex =$event.index"
+                (doubleClick)="openEditingDialog(false)"></fancy-table>
+        </ng-container>
+    </nb-card-body>
+</nb-card>

src/app/admin/cell-group-routine-events/cell-group-routine-events.component.spec.ts

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

src/app/admin/cell-group-routine-events/cell-group-routine-events.component.ts

@@ -0,0 +1,124 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { NbDialogService } from '@nebular/theme';
+import { Observable } from 'rxjs';
+import { first } from 'rxjs/operators';
+import { inherits } from 'util';
+import { StateService } from '../../@core/utils';
+import { CellGroupRoutineEvents } from '../../entity/CellGroupRoutineEvents';
+import { CellGroupRoutineEventsService } from '../../services/crudServices/cell-group-routine-events.service';
+import { MsgBoxService } from '../../services/msg-box.service';
+import { FancySettings } from '../../ui/fancy-table/fancy-settings.model';
+import { FancyTableComponent } from '../../ui/fancy-table/fancy-table.component';
+import { ObjectUtils } from '../../utilities/object-utils';
+
+@Component({
+  selector: 'ngx-cell-group-routine-events',
+  templateUrl: './cell-group-routine-events.component.html',
+  styleUrls: ['./cell-group-routine-events.component.scss']
+})
+export class CellGroupRoutineEventsComponent implements OnInit {
+
+
+  @ViewChild(FancyTableComponent, { static: false }) fancyTable: FancyTableComponent<CellGroupRoutineEvents>;
+  data: CellGroupRoutineEvents;
+  allData: CellGroupRoutineEvents[];
+  selectedIndex: number = 0;
+
+  constructor(
+    private cellGroupRoutineEventsService: CellGroupRoutineEventsService,
+    private msgBoxService: MsgBoxService,
+    private dlgService: NbDialogService,
+    protected stateService: StateService,
+    protected route: ActivatedRoute,
+  ) {
+    //super(stateService, route);
+  }
+
+  //#region Table Setting
+  settings = <FancySettings<CellGroupRoutineEvents>>{
+    contextMenuItems: [
+      {
+        id: 'add',
+        enabled: true,
+        title: 'Add New',
+        icon: 'plus-circle-outline',
+        callback: (datum, element) => {
+          this.openEditingDialog(true);
+        },
+      },
+      {
+        id: 'edit',
+        enabled: true,
+        title: 'Edit',
+        icon: 'edit',
+        callback: (datum, element) => {
+          this.openEditingDialog(false);
+        },
+      },
+      {
+        enabled: true,
+        id: 'delete',
+        title: 'Delete',
+        icon: 'trash-2-outline',
+        callback: (datum, element) => {
+          this.delete(datum);
+        },
+      }],
+    onContextMenuOpening: (datum, menuItems) => {
+      menuItems.find(i => i.id == 'delete').visible = !!datum;
+      menuItems.find(i => i.id == 'edit').visible = !!datum;
+      return datum;
+    },
+    columns: [
+
+    ],
+
+  };
+  //#endregion
+
+  //#region Implements Methods
+  ngOnInit(): void {
+  }
+  get saveMethod(): Observable<any> {
+    return Observable.of(true);
+  }
+  getAllData() {
+    this.cellGroupRoutineEventsService.getAll().pipe(first()).subscribe(result => {
+
+      this.allData = result;
+    });
+  }
+  //#endregion
+
+  //#region UI Calling Methods
+  openEditingDialog(isAdding: boolean) {
+    // this.dlgService.open(CellGroupRoutineEventsEditorComponent, {
+    //   context: {
+    //     data: isAdding ? null : ObjectUtils.CloneValue(this.allData[this.selectedIndex]),
+    //     isAdding: isAdding
+    //   }
+    // }).onClose.pipe(first()).subscribe(result => {
+    //   if (result) {
+    //     this.getAllData();
+    //   }
+    // });
+  }
+
+  //#endregion
+
+  //#region CRUD Methods
+  delete(datum) {
+    this.msgBoxService.showConfirmDeleteBox().pipe(first()).subscribe(answer => {
+      if (answer === true) {
+        this.cellGroupRoutineEventsService.delete(datum).pipe(first()).subscribe(result => {
+
+          this.allData.splice(this.selectedIndex, 1);
+          this.fancyTable.reload();
+        });
+      }
+    });
+  }
+  //#endregion
+
+}

src/app/admin/family-members/assign-member-cell-group/assign-member-cell-group.component.html

@@ -0,0 +1,16 @@
+<nb-card status="success">
+    <nb-card-header>
+        Assign Cell Group
+    </nb-card-header>
+    <nb-card-body>
+        <div class="row form-group">
+            <op-drop-down name="groupId" [source]="cellGroupOptions" [(ngModel)]="groupId" required></op-drop-down>
+        </div>
+    </nb-card-body>
+    <nb-card-footer>
+        <button class="float-right" nbButton hero status="danger" size="small" (click)="close()"
+            [nbSpinner]="processing">Close</button>
+        <button class="float-right mr-2" nbButton hero status="primary" size="small" (click)="update()"
+            [nbSpinner]="processing">Submit</button>
+    </nb-card-footer>
+</nb-card>