feat(dashboard): add new E-commerce dashboard (#1754)

src/app/pages/e-commerce/progress-section/progress-section.component.html

@@ -0,0 +1,12 @@
+<nb-card size="medium">
+  <nb-card-body>
+    <div class="progress-info" *ngFor="let item of progressInfoData">
+      <div class="title">{{ item.title }}</div>
+      <div class="value">{{ item.value | ngxNumberWithCommas }}</div>
+      <nb-progress-bar [value]="item.activeProgress"></nb-progress-bar>
+      <div class="description">
+        <bdi>{{ item.description }}</bdi>
+      </div>
+    </div>
+  </nb-card-body>
+</nb-card>

src/app/pages/e-commerce/progress-section/progress-section.component.scss

@@ -0,0 +1,53 @@
+@import '../../../@theme/styles/themes';
+
+$shadow-green: #00977e;
+
+@include nb-install-component() {
+  .progress-info {
+    color: nb-theme(color-fg-heading);
+    margin-top: 2.5rem;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  .title {
+    font-family: nb-theme(font-secondary);
+    font-size: nb-theme(font-size-lg);
+    font-weight: nb-theme(font-weight-bold);
+  }
+
+  .value {
+    font-size: 3rem;
+    font-weight: nb-theme(font-weight-light);
+    margin-top: 0.5rem;
+  }
+
+  .description {
+    color: nb-theme(color-fg);
+    margin-top: 0.5rem;
+  }
+
+  /deep/ nb-progress-bar {
+    margin-top: 0.2rem;
+
+    .progress-container {
+      height: 0.8rem;
+      border-radius: 0;
+    }
+
+    .progress-value {
+      height: 0.6rem;
+      background: nb-theme(progress-bar-background);
+
+      @include nb-for-theme(cosmic) {
+        box-shadow: 0 0.2rem $shadow-green;
+      }
+
+      @include nb-for-theme(corporate) {
+        height: 100%;
+      }
+    }
+  }
+}

src/app/pages/e-commerce/progress-section/progress-section.component.ts

@@ -0,0 +1,29 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'ngx-progress-section',
+  styleUrls: ['./progress-section.component.scss'],
+  templateUrl: './progress-section.component.html',
+})
+export class ECommerceProgressSectionComponent {
+  progressInfoData = [
+    {
+      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%)',
+    },
+  ];
+}