@hitsoft/e-donusum 1.0.5

package/_metronic/partials/content/widgets/mixed/mixed-widget4/mixed-widget4.component.html

@@ -0,0 +1,101 @@
+<div class="card-body">
+  <!-- begin::Heading -->
+  <div class="d-flex flex-stack">
+    <!-- begin:Info -->
+    <div class="d-flex align-items-center">
+      <!-- begin:Image -->
+      <div class="symbol symbol-60px me-5">
+        <span class="symbol-label" [ngClass]="'bg-' + color + '-light'">
+          <img [src]="image" class="h-50 align-self-center" alt="" />
+        </span>
+      </div>
+      <!-- end:Image -->
+
+      <!-- begin:Title -->
+      <div class="d-flex flex-column flex-grow-1 my-lg-0 my-2 pr-3">
+        <a href="#" class="text-gray-900 fw-bolder text-hover-primary fs-5">
+          {{ title }}
+        </a>
+
+        <span class="text-muted fw-bold">{{ date }}</span>
+      </div>
+      <!-- end:Title -->
+    </div>
+    <!-- begin:Info -->
+
+    <!-- begin:Menu -->
+    <div class="ms-1">
+      <button
+        type="button"
+        class="btn btn-sm btn-icon btn-color-primary btn-active-light-primary"
+        data-kt-menu-trigger="click"
+        data-kt-menu-placement="bottom-end"
+        data-kt-menu-flip="top-end"
+      >
+        <app-keenicon name="category" class="fs-2"></app-keenicon>
+      </button>
+      <app-dropdown-menu1></app-dropdown-menu1>
+    </div>
+    <!-- end::Menu -->
+  </div>
+  <!-- end::Heading -->
+
+  <!-- begin:Stats -->
+  <div class="d-flex flex-column w-100 mt-12">
+    <span class="text-gray-900 me-2 fw-bolder pb-3">Progress</span>
+
+    <div class="progress h-5px w-100">
+      <div
+        class="progress-bar"
+        [ngClass]="'bg-' + color"
+        role="progressbar"
+        [style.width]="progress"
+      ></div>
+    </div>
+  </div>
+  <!-- end:Stats -->
+
+  <!-- begin:Team -->
+  <div class="d-flex flex-column mt-10">
+    <div class="text-gray-900 me-2 fw-bolder pb-4">Team</div>
+
+    <div class="d-flex">
+      <a
+        href="#"
+        class="symbol symbol-35px me-2"
+        data-bs-toggle="tooltip"
+        title="Ana Stone"
+      >
+        <img src="./assets/media/avatars/300-6.jpg" alt="" />
+      </a>
+
+      <a
+        href="#"
+        class="symbol symbol-35px me-2"
+        data-bs-toggle="tooltip"
+        title="Mark Larson"
+      >
+        <img src="./assets/media/avatars/300-5.jpg" alt="" />
+      </a>
+
+      <a
+        href="#"
+        class="symbol symbol-35px me-2"
+        data-bs-toggle="tooltip"
+        title="Sam Harris"
+      >
+        <img src="./assets/media/avatars/300-9.jpg" alt="" />
+      </a>
+
+      <a
+        href="#"
+        class="symbol symbol-35px"
+        data-bs-toggle="tooltip"
+        title="Alice Micto"
+      >
+        <img src="./assets/media/avatars/300-10.jpg" alt="" />
+      </a>
+    </div>
+  </div>
+  <!-- end:Team -->
+</div>

package/_metronic/partials/content/widgets/mixed/mixed-widget4/mixed-widget4.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-mixed-widget4',
+  templateUrl: './mixed-widget4.component.html',
+})
+export class MixedWidget4Component {
+  @Input() color: string = '';
+  @Input() image: string = '';
+  @Input() title: string = '';
+  @Input() date: string = '';
+  @Input() progress: string = '';
+  constructor() {}
+}

package/_metronic/partials/content/widgets/mixed/mixed-widget5/mixed-widget5.component.html

@@ -0,0 +1,57 @@
+<div class="card-body d-flex flex-column pb-10 pb-lg-15">
+  <div class="flex-grow-1">
+    <!-- begin::Info -->
+    <div class="d-flex align-items-center pe-2 mb-5">
+      <span class="text-muted fw-bolder fs-5 flex-grow-1">{{ time }}</span>
+
+      <div class="symbol symbol-50px">
+        <span class="symbol-label bg-light">
+          <img [src]="image" class="h-50 align-self-center" alt="" />
+        </span>
+      </div>
+    </div>
+    <!-- end::Info -->
+
+    <!-- begin::Link -->
+    <a href="#" class="text-gray-900 fw-bolder text-hover-primary fs-4">
+      {{ title }}
+    </a>
+    <!-- end::Link -->
+
+    <!-- begin::Desc -->
+    <p class="py-3">
+      <ng-content select="description"></ng-content>
+    </p>
+    <!-- end::Desc -->
+  </div>
+
+  <!-- begin::Team -->
+  <div class="d-flex align-items-center">
+    <a
+      href="#"
+      class="symbol symbol-35px me-2"
+      data-bs-toggle="tooltip"
+      title="Ana Stone"
+    >
+      <img src="./assets/media/avatars/300-6.jpg" alt="" />
+    </a>
+
+    <a
+      href="#"
+      class="symbol symbol-35px me-2"
+      data-bs-toggle="tooltip"
+      title="Mark Larson"
+    >
+      <img src="./assets/media/avatars/300-5.jpg" alt="" />
+    </a>
+
+    <a
+      href="#"
+      class="symbol symbol-35px me-2"
+      data-bs-toggle="tooltip"
+      title="Sam Harris"
+    >
+      <img src="../assets/media/avatars/300-9.jpg" alt="" />
+    </a>
+  </div>
+</div>

package/_metronic/partials/content/widgets/mixed/mixed-widget5/mixed-widget5.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-mixed-widget5',
+  templateUrl: './mixed-widget5.component.html',
+})
+export class MixedWidget5Component {
+  @Input() color: string = '';
+  @Input() image: string = '';
+  @Input() title: string = '';
+  @Input() time: string = '';
+  @Input() description: string = '';
+  constructor() {}
+}

package/_metronic/partials/content/widgets/mixed/mixed-widget6/mixed-widget6.component.html

@@ -0,0 +1,118 @@
+<!-- begin::Beader -->
+<div class="card-header border-0 py-5">
+  <h3 class="card-title align-items-start flex-column">
+    <span class="card-label fw-bolder fs-3 mb-1">Sales Overview</span>
+
+    <span class="text-muted fw-bold fs-7">Recent sales statistics</span>
+  </h3>
+
+  <div class="card-toolbar">
+    <!-- begin::Menu -->
+    <button
+      type="button"
+      class="btn btn-sm btn-icon btn-color-primary btn-active-light-primary"
+      data-kt-menu-trigger="click"
+      data-kt-menu-placement="bottom-end"
+      data-kt-menu-flip="top-end"
+    >
+      <app-keenicon name="category" class="fs-2"></app-keenicon>
+    </button>
+    <app-dropdown-menu1></app-dropdown-menu1>
+    <!-- end::Menu -->
+  </div>
+</div>
+<!-- end::Header -->
+
+<!-- begin::Body -->
+<div class="card-body p-0 d-flex flex-column">
+  <!-- begin::Stats -->
+  <div class="card-p pt-5 bg-body flex-grow-1">
+    <!-- begin::Row -->
+    <div class="row g-0">
+      <!-- begin::Col -->
+      <div class="col mr-8">
+        <!-- begin::Label -->
+        <div class="fs-7 text-muted fw-bold">Average Sale</div>
+        <!-- end::Label -->
+
+        <!-- begin::Stat -->
+        <div class="d-flex align-items-center">
+          <div class="fs-4 fw-bolder">$650</div>
+          <app-keenicon name="arrow-up" class="fs-5 text-success ms-1"></app-keenicon>
+        </div>
+        <!-- end::Stat -->
+      </div>
+      <!-- end::Col -->
+
+      <!-- begin::Col -->
+      <div class="col">
+        <!-- begin::Label -->
+        <div class="fs-7 text-muted fw-bold">Commission</div>
+        <!-- end::Label -->
+
+        <!-- begin::Stat -->
+        <div class="fs-4 fw-bolder">$233,600</div>
+        <!-- end::Stat -->
+      </div>
+      <!-- end::Col -->
+    </div>
+    <!-- end::Row -->
+
+    <!-- begin::Row -->
+    <div class="row g-0 mt-8">
+      <!-- begin::Col -->
+      <div class="col mr-8">
+        <!-- begin::Label -->
+        <div class="fs-7 text-muted fw-bold">Annual Taxes 2019</div>
+        <!-- end::Label -->
+
+        <!-- begin::Stat -->
+        <div class="fs-4 fw-bolder">$29,004</div>
+        <!-- end::Stat -->
+      </div>
+      <!-- end::Col -->
+
+      <!-- begin::Col -->
+      <div class="col">
+        <!-- begin::Label -->
+        <div class="fs-7 text-muted fw-bold">Annual Income</div>
+        <!-- end::Label -->
+
+        <!-- begin::Stat -->
+        <div class="d-flex align-items-center">
+          <div class="fs-4 fw-bolder">$1,480,00</div>
+          <app-keenicon name="arrow-down" class="fs-5 text-danger ms-1"></app-keenicon>
+        </div>
+        <!-- end::Stat -->
+      </div>
+      <!-- end::Col -->
+    </div>
+    <!-- end::Row -->
+  </div>
+  <!-- end::Stats -->
+
+  <!-- begin::Chart -->
+  <div
+    #chartRef
+    class="mixed-widget-3-chart card-rounded-bottom"
+    [style.height]="chartHeight"
+  >
+    <apx-chart
+      [series]="chartOptions.series"
+      [chart]="chartOptions.chart"
+      [xaxis]="chartOptions.xaxis"
+      [yaxis]="chartOptions.yaxis"
+      [dataLabels]="chartOptions.dataLabels"
+      [stroke]="chartOptions.stroke"
+      [legend]="chartOptions.legend"
+      [fill]="chartOptions.fill"
+      [states]="chartOptions.states"
+      [tooltip]="chartOptions.tooltip"
+      [colors]="chartOptions.colors"
+      [markers]="chartOptions.markers"
+      [plotOptions]="chartOptions.plotOptions"
+    ></apx-chart>
+  </div>
+  <!-- end::Chart -->
+</div>
+<!-- end::Body -->

package/_metronic/partials/content/widgets/mixed/mixed-widget6/mixed-widget6.component.ts

@@ -0,0 +1,140 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { getCSSVariableValue } from '../../../../../kt/_utils';
+@Component({
+  selector: 'app-mixed-widget6',
+  templateUrl: './mixed-widget6.component.html',
+})
+export class MixedWidget6Component implements OnInit {
+  @Input() chartColor: string = '';
+  @Input() chartHeight: string;
+  chartOptions: any = {};
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.chartOptions = getChartOptions(this.chartHeight, this.chartColor);
+  }
+}
+
+function getChartOptions(chartHeight: string, chartColor: string) {
+  const labelColor = getCSSVariableValue('--bs-gray-800');
+  const strokeColor = getCSSVariableValue('--bs-gray-300');
+  const baseColor = getCSSVariableValue('--bs-' + chartColor);
+  const lightColor = getCSSVariableValue('--bs-' + chartColor + '-light');
+
+  return {
+    series: [
+      {
+        name: 'Net Profit',
+        data: [30, 25, 45, 30, 55, 55],
+      },
+    ],
+    chart: {
+      fontFamily: 'inherit',
+      type: 'area',
+      height: chartHeight,
+      toolbar: {
+        show: false,
+      },
+      zoom: {
+        enabled: false,
+      },
+      sparkline: {
+        enabled: true,
+      },
+    },
+    plotOptions: {},
+    legend: {
+      show: false,
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    fill: {
+      type: 'solid',
+      opacity: 1,
+    },
+    stroke: {
+      curve: 'smooth',
+      show: true,
+      width: 3,
+      colors: [baseColor],
+    },
+    xaxis: {
+      categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+      axisBorder: {
+        show: false,
+      },
+      axisTicks: {
+        show: false,
+      },
+      labels: {
+        show: false,
+        style: {
+          colors: labelColor,
+          fontSize: '12px',
+        },
+      },
+      crosshairs: {
+        show: false,
+        position: 'front',
+        stroke: {
+          color: strokeColor,
+          width: 1,
+          dashArray: 3,
+        },
+      },
+      tooltip: {
+        enabled: false,
+      },
+    },
+    yaxis: {
+      min: 0,
+      max: 60,
+      labels: {
+        show: false,
+        style: {
+          colors: labelColor,
+          fontSize: '12px',
+        },
+      },
+    },
+    states: {
+      normal: {
+        filter: {
+          type: 'none',
+          value: 0,
+        },
+      },
+      hover: {
+        filter: {
+          type: 'none',
+          value: 0,
+        },
+      },
+      active: {
+        allowMultipleDataPointsSelection: false,
+        filter: {
+          type: 'none',
+          value: 0,
+        },
+      },
+    },
+    tooltip: {
+      style: {
+        fontSize: '12px',
+      },
+      y: {
+        formatter: function (val: number) {
+          return '$' + val + ' thousands';
+        },
+      },
+    },
+    colors: [lightColor],
+    markers: {
+      colors: [lightColor],
+      strokeColors: [baseColor],
+      strokeWidth: 3,
+    },
+  };
+}

package/_metronic/partials/content/widgets/mixed/mixed-widget7/mixed-widget7.component.html

@@ -0,0 +1,60 @@
+<!-- begin::Beader -->
+<div class="card-header border-0 py-5">
+  <h3 class="card-title align-items-start flex-column">
+    <span class="card-label fw-bolder fs-3 mb-1">Action Needed</span>
+    <span class="text-muted fw-bold fs-7">Complete your profile setup</span>
+  </h3>
+
+  <div class="card-toolbar">
+    <!-- begin::Menu -->
+    <button
+      type="button"
+      class="btn btn-sm btn-icon btn-color-primary btn-active-light-primary"
+      data-kt-menu-trigger="click"
+      data-kt-menu-placement="bottom-end"
+      data-kt-menu-flip="top-end"
+    >
+      <app-keenicon name="category" class="fs-2"></app-keenicon>
+    </button>
+    <app-dropdown-menu1></app-dropdown-menu1>
+    <!-- end::Menu -->
+  </div>
+</div>
+<!-- end::Header -->
+
+<!-- begin::Body -->
+<div class="card-body d-flex flex-column">
+  <div class="flex-grow-1">
+    <div #chartRef class="mixed-widget-4-chart" [style.height]="chartHeight">
+      <apx-chart
+        [series]="chartOptions.series"
+        [chart]="chartOptions.chart"
+        [xaxis]="chartOptions.xaxis"
+        [yaxis]="chartOptions.yaxis"
+        [dataLabels]="chartOptions.dataLabels"
+        [stroke]="chartOptions.stroke"
+        [legend]="chartOptions.legend"
+        [fill]="chartOptions.fill"
+        [states]="chartOptions.states"
+        [tooltip]="chartOptions.tooltip"
+        [colors]="chartOptions.colors"
+        [markers]="chartOptions.markers"
+        [plotOptions]="chartOptions.plotOptions"
+      ></apx-chart>
+    </div>
+  </div>
+
+  <div class="pt-5">
+    <p class="text-center fs-6 pb-5">
+      <span class="badge badge-light-danger fs-8">Notes:</span>&nbsp; Current
+      sprint requires stakeholders
+      <br />
+      to approve newly amended policies
+    </p>
+
+    <a href="#" class="btn w-100 py-3" [ngClass]="'btn-' + chartColor">
+      Take Action
+    </a>
+  </div>
+</div>
+<!-- end::Body -->

package/_metronic/partials/content/widgets/mixed/mixed-widget7/mixed-widget7.component.ts

@@ -0,0 +1,65 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { getCSSVariableValue } from '../../../../../kt/_utils';
+@Component({
+  selector: 'app-mixed-widget7',
+  templateUrl: './mixed-widget7.component.html',
+})
+export class MixedWidget7Component implements OnInit {
+  @Input() chartColor: string = '';
+  @Input() chartHeight: string;
+  chartOptions: any = {};
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.chartOptions = getChartOptions(this.chartHeight, this.chartColor);
+  }
+}
+
+function getChartOptions(chartHeight: string, chartColor: string) {
+  const baseColor = getCSSVariableValue('--bs-' + chartColor);
+  const lightColor = getCSSVariableValue('--bs-' + chartColor + '-light');
+  const labelColor = getCSSVariableValue('--bs-gray-700');
+
+  return {
+    series: [74],
+    chart: {
+      fontFamily: 'inherit',
+      height: chartHeight,
+      type: 'radialBar',
+    },
+    plotOptions: {
+      radialBar: {
+        hollow: {
+          margin: 0,
+          size: '65%',
+        },
+        dataLabels: {
+          name: {
+            show: false,
+            fontWeight: '700',
+          },
+          value: {
+            color: labelColor,
+            fontSize: '30px',
+            fontWeight: '700',
+            offsetY: 12,
+            show: true,
+            formatter: function (val: number) {
+              return val + '%';
+            },
+          },
+        },
+        track: {
+          background: lightColor,
+          strokeWidth: '100%',
+        },
+      },
+    },
+    colors: [baseColor],
+    stroke: {
+      lineCap: 'round',
+    },
+    labels: ['Progress'],
+  };
+}